:root { --snake-ink:#173f35; --snake-green:#286247; --snake-paper:#f7f8ef; --snake-gold:#ffd96b; }
html { scroll-behavior:auto; }
* { box-sizing:border-box; }
body.snake-page { margin:0; color:var(--snake-ink); background:#f6f7ee; background-image:radial-gradient(circle at 90% 4%,#e4edcc 0,transparent 32%); font-family:Arial,"Noto Sans Hebrew",sans-serif; }
.snake-shell { max-width:1120px; padding:0 24px; margin:auto; }
.snake-nav { display:flex; align-items:center; justify-content:space-between; min-height:74px; border-bottom:1px solid #dce4d5; gap:16px; }
.snake-nav a { color:var(--snake-ink); text-decoration:none; font-size:15px; font-weight:700; }
.snake-nav .snake-brand { font-size:24px; letter-spacing:-1px; }
.snake-brand span { display:inline-block; margin-inline-start:16px; font-size:12px; letter-spacing:0; font-weight:400; color:#637566; }
.snake-heading { display:flex; align-items:center; justify-content:space-between; padding:30px 6px 18px; gap:20px; }
.snake-eyebrow { font-size:12px; letter-spacing:.4px; color:#627b5f; margin:0 0 8px; font-weight:700; }
.snake-heading h1 { font-size:clamp(28px,4vw,46px); margin:0; line-height:1.05; letter-spacing:-1.5px; }
.snake-heading h1 span { display:block; font-size:17px; font-weight:500; margin-top:10px; letter-spacing:0; }
.snake-heading p:last-child { font-size:15px; margin:12px 0 0; color:#546c5b; }
.snake-heading img { object-fit:contain; transform:rotate(-12deg); }
.snake-profile { margin:4px 0 14px; font-size:13px; }
.snake-profile summary,.snake-parent-note summary { cursor:pointer; min-height:32px; padding:7px 0; font-weight:700; }
.snake-profile .learning-profile-picker { margin-top:8px; }
.snake-layout { display:grid; grid-template-columns:minmax(0,720px) minmax(210px,280px); gap:26px; align-items:start; }
.snake-play { min-width:0; border:1px solid #cadbc7; border-radius:26px; padding:18px; background:#fffef7; box-shadow:0 12px 38px #254c3410; scroll-margin-top:8px; }
.snake-hud { display:grid; grid-template-columns:1.35fr 1fr 1fr; align-items:center; margin-bottom:13px; gap:8px; }
.snake-hud>div { text-align:center; padding:6px; border-inline-start:1px solid #e3e9dd; }
.snake-hud>div:first-child { border:0; }
.snake-hud span { display:block; font-size:12px; color:#64785e; }
.snake-hud strong { display:block; font-size:30px; line-height:1.2; margin-top:2px; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.snake-hud strong span { display:inline; font:inherit; color:inherit; }
.snake-hud strong small { font-size:14px; color:#819075; font-weight:500; }
.snake-hud .snake-target { display:flex; gap:10px; justify-content:center; align-items:center; background:#fff0ba; border-radius:14px; }
.snake-target strong { font-size:40px; min-width:50px; }
.snake-progress { height:5px; background:#e4ebda; border-radius:9px; margin:0 5px 14px; overflow:hidden; }
.snake-progress>span { display:block; height:100%; width:0; background:#73a66e; transition:width .2s ease; }
.snake-board-wrap { position:relative; width:min(100%,calc(100svh - 290px)); margin-inline:auto; aspect-ratio:1; border:7px solid #275244; border-radius:19px; overflow:hidden; background:#dfebca; isolation:isolate; }
#snake-board { display:block; width:100%; height:100%; touch-action:none; outline-offset:-5px; }
.snake-overlay { position:absolute; inset:0; display:grid; place-items:center; background:#13372925; padding:14px; }
.snake-overlay[hidden] { display:none; }
.snake-overlay-card { background:#fffef5f5; border:1px solid #f5f7e6; text-align:center; padding:28px 26px; border-radius:24px; max-width:350px; width:100%; box-shadow:0 14px 42px #234b3630; backdrop-filter:blur(6px); }
#snake-overlay-icon { font-size:36px; color:#b07c0e; }
.snake-overlay h2 { font-size:25px; margin:9px 0; }
.snake-overlay p { font-size:15px; line-height:1.6; margin:0 0 18px; }
.snake-primary { width:100%; border:0; border-radius:12px; background:var(--snake-green); color:white; min-height:50px; padding:12px; font:700 18px Arial,sans-serif; cursor:pointer; box-shadow:0 4px 0 #153e2c; }
.snake-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #153e2c; }
.snake-primary:disabled { opacity:.65; cursor:wait; }
#snake-result-report { display:block; margin-top:16px; color:#285a3e; font-size:14px; }
#snake-result-report[hidden] { display:none; }
.snake-toolbar { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.snake-toolbar button { flex:1; min-height:42px; padding:8px 4px; border:1px solid #d3dfca; background:#f4f7ed; color:#244e3c; border-radius:10px; font:700 13px Arial,sans-serif; cursor:pointer; }
.snake-toolbar button:disabled { opacity:.4; cursor:default; }
.snake-voice-control { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; margin:10px 0 0; font-size:12px; color:#63795d; }
.snake-voice-control button { min-height:42px; padding:8px 12px; border:1px solid #c8d8bc; border-radius:10px; background:#eaf2df; color:#244e3c; font:700 13px Arial,sans-serif; cursor:pointer; }
.snake-voice-control button[aria-pressed=false] { background:#f4f7ed; }
.snake-message { min-height:25px; text-align:center; font-size:14px; font-weight:700; margin:12px 0 8px; line-height:1.4; }
.snake-message.is-alert { color:#9d4831; }
.snake-dpad { display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,46px); justify-content:center; gap:5px; direction:ltr; }
.snake-dpad button { font:700 26px Arial,sans-serif; background:#e9f0dd; border:1px solid #c3d4b2; color:#24533a; border-radius:11px; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.snake-dpad button:active { background:#bed7a5; }
.snake-dpad [data-direction=up] { grid-column:2; }
.snake-dpad [data-direction=left] { grid-column:1; grid-row:2; }
.snake-dpad [data-direction=down] { grid-column:2; grid-row:2; }
.snake-dpad [data-direction=right] { grid-column:3; grid-row:2; }
.snake-control-help { font-size:11px; color:#6b8060; text-align:center; line-height:1.6; margin:10px 4px 0; }
.snake-guide { display:grid; gap:18px; padding-top:3px; }
.snake-guide section { border-bottom:1px solid #dce5d2; padding:0 2px 18px; }
.snake-guide h2 { font-size:18px; margin:0 0 14px; }
.snake-settings label { display:block; font-size:13px; margin-bottom:7px; }
.snake-settings select { width:100%; min-height:46px; border:1px solid #c5d5b9; background:#fffef7; color:#224c37; padding:10px; border-radius:11px; font:14px Arial,sans-serif; }
.snake-settings p,.snake-edge-note { font-size:12px; line-height:1.75; color:#63795d; }
.snake-guide ol { list-style:none; padding:0; margin:0; counter-reset:rules; }
.snake-guide li { position:relative; padding:0 30px 16px 0; counter-increment:rules; }
.snake-guide li:before { content:counter(rules); position:absolute; right:0; top:0; display:grid; place-items:center; border-radius:50%; background:#e4edce; width:22px; height:22px; font-size:12px; font-weight:700; }
.snake-guide li strong { display:block; font-size:14px; margin-bottom:5px; }
.snake-guide li span { display:block; font-size:13px; line-height:1.6; color:#546b50; }
.snake-guide .snake-monsters { text-align:center; border:0; }
.snake-monsters img { display:inline-block; width:80px; height:80px; }
.snake-monsters p { font-size:12px; line-height:1.6; color:#64795a; margin:0; }
.snake-parent-note { margin:22px 0; padding:14px 20px; border:1px solid #dbe3d0; border-radius:16px; font-size:14px; line-height:1.8; background:#fffdf5; }
.snake-parent-note a { color:#276342; }
.snake-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; padding:22px 0 30px; border-top:1px solid #dce5d2; }
.snake-footer a { color:#5c7154; font-size:12px; text-decoration:none; }
.snake-noscript { padding:20px; background:#fff0ba; border-radius:12px; }
.snake-page :focus-visible { outline:3px solid #b67208; outline-offset:3px; }
@media(min-width:781px) and (pointer:fine) { .snake-dpad { display:none; } }
@media(max-width:780px) { .snake-layout { grid-template-columns:1fr; } .snake-guide { grid-template-columns:1fr 1fr; gap:20px; } .snake-monsters { display:none; } .snake-heading { padding-top:22px; } .snake-board-wrap { width:min(100%,max(280px,calc(100svh - 375px))); } }
@media(max-width:480px) { .snake-shell { padding:0 10px; } .snake-nav { min-height:52px; } .snake-brand span { display:none; } .snake-heading { padding:18px 3px 10px; gap:6px; } .snake-heading img { width:75px; height:75px; } .snake-heading h1 { font-size:29px; } .snake-heading h1 span { font-size:14px; } .snake-heading p:last-child { font-size:12px; max-width:240px; } .snake-play { padding:10px; border-radius:18px; } .snake-hud strong { font-size:25px; } .snake-target strong { font-size:32px; min-width:35px; } .snake-hud span { font-size:11px; } .snake-board-wrap { border-width:5px; border-radius:13px; } .snake-overlay-card { padding:17px; max-width:265px; } .snake-overlay h2 { font-size:22px; } .snake-overlay p { font-size:13px; } .snake-toolbar { gap:5px; } .snake-toolbar button { font-size:12px; } .snake-guide { grid-template-columns:1fr; padding:5px 10px; } .snake-guide section { padding-bottom:10px; } .snake-dpad { grid-template-columns:repeat(3,54px); grid-template-rows:repeat(2,44px); } }
@media(prefers-reduced-motion:reduce) { .snake-progress>span { transition:none; } }

/* Play controls, learning feedback and earned Blender character appearances. */
.snake-play-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:12px; font-weight:700; }
.snake-play-top button { flex-shrink:0; min-height:42px; border:1px solid #ccd9c3; border-radius:10px; padding:7px 12px; font:700 13px Arial,sans-serif; color:#28523e; background:#f0f5e7; cursor:pointer; }
#snake-next-boost { color:#557246; }
#snake-next-boost.is-near { color:#815914; background:#fff0bb; border-radius:8px; padding:6px 8px; }
.snake-feedback { min-height:38px; margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 12px; text-align:center; }
.snake-word { margin:0; font-size:clamp(15px,2.2vw,19px); line-height:1.4; color:#245239; }
.snake-word bdi { font-size:1.25em; font-weight:800; color:#8b6012; }
.snake-boost { border-radius:8px; padding:5px 9px; background:#fff0b6; color:#78520d; font-size:12px; font-weight:700; }
.snake-reward-notice { width:100%; border:1px solid #c4a555; border-radius:10px; padding:8px; background:#fff0b6; color:#65490d; font:700 13px Arial,sans-serif; cursor:pointer; }
.snake-feedback [hidden],#snake-start[hidden] { display:none; }
.snake-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.snake-play[data-state=countdown] #snake-overlay-icon { display:block; font-size:64px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
.snake-play[data-state=countdown] .snake-overlay-card { padding:24px; }
.snake-rewards p { font-size:12px; line-height:1.7; color:#63795d; }
.snake-reward-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.snake-reward-grid button { padding:8px 4px; border:1px solid #cedcc3; border-radius:12px; background:#fbfcf5; color:#2b573d; cursor:pointer; font:12px Arial,sans-serif; }
.snake-reward-grid button img { display:block; margin:auto; width:66px; height:66px; object-fit:contain; }
.snake-reward-grid button strong,.snake-reward-state { display:block; line-height:1.5; }
.snake-reward-state { color:#6b7c5e; font-size:11px; margin-top:3px; }
.snake-reward-grid button[aria-pressed=true] { border:2px solid #3d7652; background:#e8f2de; padding:7px 3px; }
.snake-reward-grid button:disabled { color:#697a60; background:#f0f2e9; cursor:default; }
.snake-reward-grid button:disabled img { opacity:.48; filter:grayscale(.7); }

/* Native fullscreen where available; the same viewport layout also works on iPhones. */
body.snake-focus-active { overflow:hidden; overscroll-behavior:none; }
.snake-play.is-focus { position:fixed; inset:0; z-index:2147483000; width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); margin:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 5px minmax(0,1fr) auto auto; gap:4px; overflow:hidden; background:#fffef7; }
.snake-play.is-focus .snake-play-top { margin:0; min-height:42px; }
.snake-play.is-focus .snake-hud { margin:0; width:min(100%,640px); justify-self:center; gap:4px; }
.snake-play.is-focus .snake-hud>div { padding:3px; }
.snake-play.is-focus .snake-hud strong { font-size:24px; }
.snake-play.is-focus .snake-hud .snake-target strong { font-size:30px; }
.snake-play.is-focus .snake-progress { width:min(100%,640px); justify-self:center; margin:0; }
.snake-play.is-focus .snake-board-wrap { place-self:center; border-width:4px; border-radius:12px; min-width:0; min-height:0; max-width:100%; max-height:100%; }
.snake-play.is-focus .snake-feedback { margin:0; min-height:28px; }
.snake-play.is-focus .snake-controls { width:min(100%,640px); justify-self:center; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.snake-play.is-focus .snake-toolbar,.snake-play.is-focus .snake-voice-control { display:contents; }
.snake-play.is-focus .snake-toolbar button,.snake-play.is-focus .snake-voice-control button { min-height:38px; padding:4px 2px; font-size:11px; }
.snake-play.is-focus #snake-voice-help { display:none; }
.snake-play.is-focus .snake-message { grid-column:1/-1; margin:0; min-height:18px; font-size:12px; }
.snake-play.is-focus .snake-control-help { display:none; }
.snake-play.is-focus .snake-dpad { display:grid; grid-column:1/-1; grid-template-columns:repeat(3,min(19vw,72px)); grid-template-rows:repeat(2,44px); gap:4px; }
.snake-play.is-focus .snake-reward-notice { padding:5px; font-size:12px; }
.snake-play.is-focus::backdrop { background:#fffef7; }
@media(max-width:480px) { .snake-board-wrap { width:100%; } .snake-shell { padding:0 8px; } .snake-play { padding:8px; } .snake-play-top { gap:5px; } .snake-controls .snake-dpad { position:sticky; bottom:0; z-index:2; padding:4px 0 max(4px,env(safe-area-inset-bottom)); background:#fffef7f5; } .snake-controls .snake-toolbar { margin-top:7px; } }
@media(max-height:540px) and (orientation:landscape) {
 .snake-play.is-focus { grid-template-columns:minmax(170px,min(42%,310px)) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:'top board' 'hud board' 'controls board' 'feedback board'; gap:4px 10px; }
 .snake-play.is-focus .snake-play-top { grid-area:top; font-size:11px; }
 .snake-play.is-focus .snake-play-top button { font-size:11px; padding:5px; min-height:36px; }
 .snake-play.is-focus .snake-hud { grid-area:hud; }
 .snake-play.is-focus .snake-progress { display:none; }
 .snake-play.is-focus .snake-board-wrap { grid-area:board; }
 .snake-play.is-focus .snake-controls { grid-area:controls; align-self:center; }
 .snake-play.is-focus .snake-feedback { grid-area:feedback; }
 .snake-play.is-focus .snake-word { font-size:13px; }
 .snake-play.is-focus .snake-dpad { grid-template-columns:repeat(3,50px); grid-template-rows:repeat(2,38px); }
 .snake-play.is-focus .snake-message { max-height:34px; overflow:hidden; }
}