@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#173e3d;background:#eef4ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e96e36;outline-offset:4px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #173e3d18}.brand{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;text-decoration:none;color:inherit;letter-spacing:-1px}.brand>span{color:#6c897a}.brand small{display:inline-block;border-left:1px solid #b8c6bb;padding-left:18px;margin-left:18px;font:10px 'DM Sans',sans-serif;letter-spacing:2px}.tools{display:flex;gap:10px}.tools button,#home{border:1px solid #b8c6bb;border-radius:30px;background:transparent;padding:10px 17px;font-size:13px}main{display:grid;grid-template-columns:minmax(210px,1fr) minmax(260px,420px) minmax(200px,1fr);gap:5vw;max-width:1450px;margin:28px auto;padding:0 4vw;align-items:center}.intro{max-width:320px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,3.5vw,54px);line-height:1.04;letter-spacing:-2.5px;margin:20px 0}p{font-size:15px;line-height:1.7;color:#60766d}.rule{display:flex;gap:15px;margin-top:25px}.rule>span{font-size:12px;border:1px solid #cad8cc;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:none}.rule h3{font-size:15px;margin:3px 0 5px}.rule p{margin:0;font-size:13px}.rule b{color:#39864f;font-size:12px;margin-left:6px}.rule .bad{color:#c6754b}.privacy{border-top:1px solid #cedbce;padding-top:20px;margin-top:35px;font-size:13px}.privacy small{display:block;font-size:11px;line-height:1.6;color:#728275;margin-top:8px}.game-wrap{width:100%;max-width:min(420px,calc((100dvh - 158px)*.5625));justify-self:center}.game{width:100%;aspect-ratio:9/16;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 20px 70px #21464129;background:#88dbe0;isolation:isolate}#game{width:100%;height:100%;display:block}.hud{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none}.hud>div{background:#fffdf0ed;padding:10px 17px;border-radius:13px;min-width:86px}.hud span{display:block;font-size:9px;letter-spacing:1.5px;font-weight:700}.hud strong{font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.2}.time{text-align:right}.time.warning{color:#b84127;animation:pulse .7s infinite alternate}@keyframes pulse{to{transform:scale(1.06)}}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(transparent 5%,#144e4522)}.overlay:empty{pointer-events:none;background:none}.screen{width:100%;background:#fffdf0f7;border:1px solid #fff8;border-radius:22px;padding:28px 22px;text-align:center;box-shadow:0 10px 40px #183e4220}.screen .eyebrow{font-size:10px;color:#697b61}.screen h2{font:700 39px/.98 'Space Grotesk',sans-serif;letter-spacing:-1.7px;margin:17px 0;color:#194d42}.screen p{font-size:14px;line-height:1.6;margin:14px 0 20px}.screen button{display:block;width:100%;border:0;border-radius:10px;padding:15px 10px;font-weight:700;background:#d0f578;color:#173e3d;margin-top:10px}.screen button.secondary{background:transparent;border:1px solid #bdc9ac;font-size:13px}.screen .big{font:700 80px 'Space Grotesk',sans-serif;line-height:1.1}.screen .number{font-size:100px}.screen progress{accent-color:#4c9c69;width:90%}.bottom-status{position:absolute;bottom:15px;left:22px;right:22px;display:flex;justify-content:space-between;color:white;font-size:9px;font-weight:700;letter-spacing:1.5px}.under-game{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:12px 3px;font-size:10px;color:#667c70;min-height:38px}#home{padding:4px 8px;font-size:10px}.ride-info{max-width:275px}.pill{border:1px solid #bbcdbd;padding:9px 13px;border-radius:30px;display:inline-block;font-size:9px;letter-spacing:1px}h2{font:500 27px/1.2 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:22px 0 30px}.food-card{border-top:1px solid #c4d3c4;padding:20px 0 10px}.food-card .eyebrow{font-size:10px;color:#478155}.foods{font-size:29px;margin-top:14px;white-space:nowrap}.food-card p{display:flex;justify-content:space-between;font-size:12px}.food-card b{color:#438050}.avoid .eyebrow,.avoid b{color:#bc6540}.setup{margin-top:28px;font-size:13px;color:#274b3d}.setup small{display:block;font-size:12px;line-height:1.8;color:#6c7b6a;margin-top:8px}footer{max-width:1450px;margin:auto;padding:0 4vw 16px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#778a7d}.notice{position:absolute;top:115px;left:18px;right:18px;background:#173e3ded;color:#fff;padding:14px;border-radius:12px;text-align:center;font-size:13px}#debug{position:fixed;bottom:10px;left:10px;background:#102921;color:#cfefa5;padding:8px;z-index:10;font-size:11px}#debug-canvas{width:240px}#debug-text{margin:0}[hidden]{display:none!important}@media(max-width:1050px){main{gap:3vw}.ride-info{display:none}main{grid-template-columns:1fr 1.2fr;max-width:900px}.game-wrap{max-width:min(420px,calc((100dvh - 155px)*.5625))}}@media(max-width:620px){header{height:64px;padding:0 18px}.brand{font-size:20px}.brand small,.intro,footer{display:none}.tools button{font-size:11px;padding:8px 10px}main{display:block;padding:0 10px;margin:14px auto}.game-wrap{margin:auto;max-width:min(420px,calc((100dvh - 120px)*.5625))}.game{border-radius:18px}.hud{top:18px;left:18px;right:18px}.screen{padding:22px 18px}.screen h2{font-size:34px}.screen p{font-size:13px}}@media(prefers-reduced-motion:reduce){.time.warning{animation:none}}
/* Game-only presentation: all controls and status stay inside the portrait stage. */
:root{background:#103d3e}
body{min-height:100dvh}
main{display:grid;place-items:center;min-height:100dvh;max-width:none;margin:0;padding:8px;gap:0;grid-template-columns:1fr}
.game-wrap{width:min(100%,calc((100dvh - 16px)*.5625));max-width:none;margin:0}
.game{border-radius:18px;box-shadow:0 10px 60px #001b2340}
.tools{position:absolute;bottom:14px;left:18px;right:18px;justify-content:space-between;gap:8px;z-index:2}
.tools button,.tools #home{background:#164644e8;color:#fffde7;border:1px solid #ffffff40;padding:9px 12px;font-size:12px;border-radius:20px}
.bottom-status{bottom:62px;left:22px;right:22px}
.camera-status{position:absolute;top:103px;left:16px;right:16px;text-align:center;font-size:11px;color:#183f3d;background:#fffbe6b0;border-radius:20px;padding:5px 8px}
.notice{top:141px;z-index:3}
.overlay{padding:20px 20px 44px}
.screen{max-height:calc(100% - 160px);overflow:auto}
@media(max-width:620px){main{padding:0}.game-wrap{width:min(100%,calc(100dvh*.5625));max-width:none}.game{border-radius:0}.hud{top:18px}.camera-status{top:96px}.tools button,.tools #home{font-size:11px;padding:8px 10px}.screen{padding:22px 18px}}
/* Sea Skater panels */
:root{background:#061d2a;color:#e8f5f7}.screen{background:linear-gradient(145deg,#082e41ef,#061d2aee);border:1px solid #b7e6ed35;box-shadow:0 20px 70px #00101866;border-radius:18px}.screen h2{color:#f4fbfc;letter-spacing:-1px}.screen .eyebrow{color:#93c9d6}.screen p{color:#c0d5dd}.screen button{background:#d5f3a1;color:#173329}.screen button.secondary{border-color:#91b5c359;color:#e3f2f7}.screen label{display:block;text-align:left;font-size:14px;margin-bottom:9px;color:#d1e8ef}.screen input{width:100%;padding:15px;border:1px solid #91b5c3;border-radius:8px;background:#ffffff0a;color:white;font:inherit;outline-offset:3px}.screen input:focus{outline:2px solid #d5f3a1}.screen input::placeholder{color:#95b0bb}#name-error{font-size:13px;color:#ffc0b3;margin:7px 0}.rankings{list-style:none;padding:0;margin:5px 0 18px;text-align:left;max-height:36dvh;overflow:auto}.rankings li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff16;padding:10px 2px}.rankings li>span{font-size:13px;color:#8db1c1;min-width:22px}.rankings li>div{min-width:0;flex:1}.rankings strong{display:block;font-size:15px;overflow-wrap:anywhere}.rankings small{font-size:10px;color:#91abb8;display:block;margin-top:3px}.rankings b{font:600 23px 'Space Grotesk',sans-serif;color:#d5f3a1}.rankings .empty{font-size:14px;color:#b8d0db;padding:20px 0}.hud>div{background:#072c40c9;color:white;border:1px solid #ffffff35;backdrop-filter:blur(8px)}.camera-status{background:#062c3baa;color:#d7eef2;font-size:10px}.bottom-status{text-shadow:0 1px 5px #00202c}.tools button,.tools #home{background:#062a3ad9}.overlay{background:linear-gradient(transparent,#001d2922)}
/* Touch name entry */
.name-screen{padding:18px 12px;max-height:calc(100% - 100px)}.name-screen h2{font-size:30px;margin:10px 0}.name-screen>p{font-size:12px;margin:8px 0 12px}.name-screen label{font-size:12px;margin-bottom:5px}.name-screen input{padding:11px;font-size:18px}.name-screen #name-error:empty{display:none}#virtual-keyboard{margin:12px -3px 6px;touch-action:manipulation}.key-row{display:flex;justify-content:center;gap:3px;margin:4px 0}.screen .key{display:block;flex:1;min-width:0;width:auto;padding:0;height:42px;margin:0;border:1px solid #87b3c145;border-radius:5px;background:#245064;color:#f3fbff;font-size:14px;font-weight:500;touch-action:manipulation}.screen .key:active{background:#6094a4;transform:translateY(1px)}.screen .key[aria-pressed=true]{border-color:#d5f3a1}.screen .space-key{flex:2}.key-row:last-child .key{font-size:11px}.name-screen #ready{margin-top:12px;padding:13px}.name-screen>button.secondary{padding:9px;margin-top:7px}.tools{justify-content:flex-end}.tools #home{margin-right:auto}@media(max-height:650px){.name-screen{padding:10px;max-height:calc(100% - 80px)}.screen .key{height:34px}.name-screen h2{font-size:25px}.name-screen>p{margin:5px 0}.name-screen .eyebrow{font-size:9px}}