:root{--sky: #4ec8f0;--sand: #f4d7a0;--sun: #ffd93d;--cream: #fff6e8;--coral: #e84d4d;--leaf: #3ecf8e;--ocean: #3272dd;--ink: #3e3e3e;--vvh: 100dvh;--vvw: 100vw;--pad: max(8px, env(safe-area-inset-left), env(safe-area-inset-right))}*{box-sizing:border-box}html,body{margin:0;height:var(--vvh);overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%}body{font-family:Avenir Next,Apple SD Gothic Neo,sans-serif;color:var(--ink);background:#1a8ad4 url(/assets/bg/beach.webp) center / cover no-repeat}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#app{height:var(--vvh);width:100%;overflow:hidden}.screen{height:var(--vvh);width:100%;overflow:hidden;padding:max(8px,env(safe-area-inset-top)) var(--pad) max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.2vh,12px)}.home,.clear{justify-content:space-evenly}.sun{width:min(18vw,11vh,120px);height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}.mascots{display:flex;gap:clamp(8px,3vw,24px);justify-content:center;align-items:flex-end;flex:0 1 auto;max-height:32vh}.mascots img{width:min(26vw,20vh,160px);height:auto;max-height:28vh;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}.play-btn{width:min(22vw,16vh,108px);height:min(22vw,16vh,108px);flex:0 0 auto;border:0;border-radius:50%;background:var(--leaf);box-shadow:0 8px #2e9a68,0 12px 20px #0003;cursor:pointer}.play-btn:after{content:"";display:block;width:0;height:0;margin:0 auto;border:22px solid transparent;border-left:34px solid #fff;transform:translate(8px)}.home-door{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:28px;height:28px;opacity:.25;border:0;background:var(--ink);border-radius:8px}.play{justify-content:stretch}.hud{width:min(920px,100%);display:grid;grid-template-columns:min(12vw,64px) 1fr min(12vw,64px);align-items:center;gap:6px;flex:0 0 auto}.hud-char{width:100%;height:auto;max-height:10vh;object-fit:contain}.target{justify-self:center;width:min(28vw,14vh,140px);aspect-ratio:1;background:#fff6e8eb;border:3px dashed #ff7ab6;border-radius:20px;display:grid;place-items:center;padding:4px}.target img{width:100%;height:100%;object-fit:contain}.stars{grid-column:1 / -1;text-align:center;font-size:clamp(16px,3.5vh,26px);line-height:1;color:var(--sun)}.board{width:min(720px,100%);flex:1 1 auto;min-height:0;display:grid;gap:clamp(6px,1.4vh,12px)}.board.cols-2{grid-template-columns:1fr 1fr}.board.cols-3{grid-template-columns:1fr 1fr 1fr}.board.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}.tile{min-width:0;min-height:0;height:100%;border:0;border-radius:clamp(12px,2.4vw,20px);background:var(--cream);box-shadow:0 5px #e8d7b8;padding:clamp(4px,1vw,8px);cursor:pointer}.tile img{width:100%;height:100%;object-fit:contain;pointer-events:none}.tile.shake{animation:shake .35s}.tile.hinting{box-shadow:0 0 0 5px var(--sun)}.tools{display:flex;gap:clamp(10px,3vw,16px);flex:0 0 auto;padding-bottom:2px}.tool{width:min(16vw,9vh,64px);height:min(16vw,9vh,64px);border:0;border-radius:50%;background:var(--cream);box-shadow:0 5px #e8d7b8}.tool.hint{background:var(--sun)}.tool.sound.on{background:var(--ocean)}.tool.sound.off{background:#969696}.tool.house{background:var(--coral)}.parent{background:#fff6e8f0;max-width:min(520px,100%);margin:0 auto;border-radius:20px;align-items:stretch;justify-content:center;gap:10px}.parent h1{margin:0;font-size:clamp(20px,4vh,28px)}.parent button{min-height:48px;border:0;border-radius:12px;background:var(--ocean);color:#fff;font-size:18px}.home-text{border:0;background:transparent;color:#fff;font-size:clamp(18px,3vh,22px);text-shadow:0 2px 4px rgba(0,0,0,.35)}.star-burst{font-size:clamp(28px,6vh,48px);color:var(--sun);margin:0}@keyframes shake{25%{transform:translate(-8px)}75%{transform:translate(8px)}}html[data-wide="1"] .play{flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:12px}html[data-wide="1"] .hud{width:min(280px,32vw);align-content:center}html[data-wide="1"] .board{width:min(720px,62vw);height:auto}html[data-wide="1"] .tools{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%)}html[data-wide="1"] .play{position:relative;padding-bottom:max(72px,calc(env(safe-area-inset-bottom) + 64px))}