@font-face{font-family:Baloo;src:url('/assets/fonts/baloo.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/fonts/nunito.woff2') format('woff2');font-weight:400 900;font-display:swap}
:root{color-scheme:light;--ink:#174655;--cream:#fff7e7;--coral:#b2432b;--gold:#edc785;--fern:#365f4a}
[hidden],#game[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 75%,#e4ecd955,transparent 45%),var(--cream);color:var(--ink);font:17px/1.65 Nunito,sans-serif}
header{padding:15px 5vw;border-bottom:1px solid #17465520;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:800 23px/.9 Baloo,cursive;text-decoration:none;color:var(--ink)}.brand span{display:block;color:var(--coral)}nav{display:flex;gap:30px}a{color:var(--ink);text-underline-offset:5px}nav a{font-size:14px;font-weight:800}
main{max-width:1240px;margin:10px auto 30px;display:grid;grid-template-columns:minmax(270px,1fr) minmax(0,650px);gap:44px;padding:0 28px}.intro{padding:35px 0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--coral);font-size:12px;font-weight:900}h1{font:800 clamp(56px,6vw,86px)/.88 Baloo,cursive;letter-spacing:-.035em;margin:20px 0 24px}h1 span{display:block;color:var(--coral)}.lede{font-size:22px;line-height:1.5}.desktop-note{max-width:330px;font-size:16px}
.instructions{max-width:350px;margin:18px 0;font-size:14px;line-height:1.65}.instructions summary{min-height:44px;display:list-item;cursor:pointer;padding:9px 0;font-weight:900}.legend{border-top:1px solid #17465525;max-width:330px;padding-top:18px}.legend>div{display:flex;align-items:center;gap:16px;margin:12px 0}.legend p{margin:0;font-size:13px}.legend strong,.legend p span{display:block}.legend strong{font-size:15px}.bonus-symbol{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#f8e1ac;border:1px solid #b4955e70;box-shadow:inset 0 1px 0 #fff;border-radius:50%;width:42px;height:42px}.bonus-symbol svg{width:24px;height:24px}
#game{min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center}.board{width:min(100%,calc((100svh - 305px)*.7692308));min-width:min(100%,300px);border:5px solid #e1be7c;border-radius:20px;overflow:hidden;background:#b8d7e6;box-shadow:0 22px 46px #7d644522,0 0 0 1px #9373334a;isolation:isolate}canvas{display:block;width:100%;height:auto;touch-action:none}
.hud{width:100%;display:flex;align-items:center;gap:13px;margin:0 0 10px;text-align:left}.hud>span{flex:1;font-size:12px;line-height:1.25}.hud strong{display:block;font:800 25px/1.2 Baloo,cursive;margin-top:2px}.hud button{font-size:13px;padding:7px 10px;min-width:44px;flex-shrink:0}
.buttons{display:flex;gap:12px;margin-top:12px;width:100%;max-width:540px}.buttons button{flex:1}.buttons span{font-size:18px}button{min-height:46px;border:1px solid #17465565;border-radius:12px;padding:8px 14px;color:var(--ink);background:#fff8e8;font:900 16px Nunito,sans-serif;cursor:pointer;touch-action:none;box-shadow:0 3px 0 #9f946c55}button:active{box-shadow:none;transform:translateY(2px)}button:disabled{opacity:.5;cursor:default}#start{background:linear-gradient(#f7dfaa,#edc785);border-color:#b5965c}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px}canvas:focus-visible{outline-offset:-4px}#status{font-size:14px;line-height:1.4;min-height:40px;max-width:530px;margin:8px 0 0}#art-note{font-size:13px;color:#853725;max-width:480px}#bonuses{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:0}#bonuses:not(:empty){margin-top:12px}#bonuses span{font-size:12px;font-weight:900;background:#f1e7c9;border-radius:20px;padding:4px 10px;color:#31554f}#bonuses b{font-variant-numeric:tabular-nums}.review-note,.no-script{margin:12px 24px;text-align:center;font-size:13px;color:#546964}
.music-controls{padding-top:10px!important;padding-bottom:10px!important}.sound-options{position:relative;font-size:13px}.sound-options summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px}.sound-options summary:after{content:'+'}.sound-options[open] summary:after{content:'-'}
.sound-options .sound-body{position:static;min-width:230px;padding:16px;background:var(--cream);border:1px solid #b6bba2;border-radius:14px;margin-bottom:6px}.sound-body .music-note{display:block}.sound-body label{margin-bottom:8px}
#game:fullscreen,#game.expanded{height:100dvh;width:100%;max-width:none;background:var(--cream);padding:8px max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;overflow:auto}
#game.expanded{position:fixed;inset:0;z-index:20}body:has(#game.expanded){overflow:hidden}
#game:fullscreen .board,#game.expanded .board{flex:0 1 auto;min-height:0;min-width:0;height:calc(100dvh - 222px);width:calc((100dvh - 222px)*.7692308);max-width:100%;aspect-ratio:600/780}
#game:fullscreen canvas,#game.expanded canvas{height:100%;width:100%;object-fit:contain}
#game:fullscreen .hud,#game.expanded .hud{width:min(580px,100%);flex-shrink:0}#game:fullscreen .buttons,#game.expanded .buttons{width:min(540px,100%);flex-shrink:0}
#game:fullscreen .music-controls,#game.expanded .music-controls{padding:0 0 6px!important;flex-shrink:0}#game:fullscreen #status,#game.expanded #status{font-size:12px;min-height:28px;margin:6px 0 0}#game:fullscreen #bonuses:not(:empty),#game.expanded #bonuses:not(:empty){margin-top:6px}
.fade-in{animation:enter .45s ease-out both}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:850px){header{padding:13px 20px}.brand{font-size:21px}nav{gap:20px}main{display:flex;flex-direction:column;gap:8px;max-width:580px;margin-top:2px;padding:0 14px}.intro{display:contents}.eyebrow{font-size:10px;letter-spacing:.15em;margin:0;text-align:center;order:0}h1{font-size:40px;text-align:center;margin:0;line-height:1;order:1}h1 span{display:inline}.lede,.desktop-note{display:none}#game{order:2}.instructions{order:3;margin:4px 8px;max-width:none}.legend{order:4;width:100%;max-width:none;display:flex;gap:12px;margin-top:6px;padding-top:12px}.legend>div{flex:1;display:block;text-align:center;font-size:11px;margin:0}.legend p{font-size:11px;line-height:1.35}.legend strong{font-size:12px;margin:5px 0}.legend p span{display:none}.bonus-symbol{width:36px;height:36px}
.hud{gap:8px;margin-top:8px}.hud>span{font-size:11px}.hud strong{font-size:23px}.hud button{font-size:12px;padding:6px 8px}.board{width:min(100%,calc((100svh - 304px)*.7692308));min-width:min(100%,288px);border-width:4px;border-radius:16px}.buttons{gap:8px;margin-top:10px}.buttons button{font-size:14px;padding:8px;min-height:46px}#status{font-size:13px;min-height:36px;margin-top:6px}
body>.music-controls{justify-content:center!important;padding-top:6px!important;padding-bottom:6px!important;gap:8px 20px!important}.sound-options .sound-body{right:0}.review-note{margin:10px 20px}}
@media(max-width:350px){nav{gap:16px}.brand{font-size:19px}nav a{font-size:12px}.hud{gap:5px}.hud strong{font-size:20px}.hud button{font-size:11px}.legend{gap:5px}}
@media(orientation:landscape) and (max-height:600px){
#game:fullscreen,#game.expanded{display:grid;grid-template-columns:auto minmax(230px,340px);grid-template-rows:auto auto auto auto auto auto;justify-content:center;align-content:center;align-items:center;column-gap:22px;row-gap:8px}
#game:fullscreen .board,#game.expanded .board{grid-column:1;grid-row:1/7;width:calc((100dvh - 24px)*.7692308);height:calc(100dvh - 24px);max-width:none;align-self:center}
#game:fullscreen .music-controls,#game.expanded .music-controls{grid-column:2;grid-row:1;justify-content:center;padding:0!important}
#game:fullscreen .hud,#game.expanded .hud{grid-column:2;grid-row:2;gap:7px;margin:0}
#game:fullscreen .buttons,#game.expanded .buttons{grid-column:2;grid-row:3;margin:0}
#game:fullscreen #bonuses,#game.expanded #bonuses{grid-column:2;grid-row:4;margin:0}
#game:fullscreen #status,#game.expanded #status{grid-column:2;grid-row:5;margin:0}
#game:fullscreen #art-note,#game.expanded #art-note{grid-column:2;grid-row:6}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}button:active{transform:none}}
