*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e8f6ee;color:#285566;font-family:system-ui,'Microsoft YaHei',sans-serif}body{touch-action:none}[hidden]{display:none!important}main{height:100dvh;max-width:1440px;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto minmax(0,1fr) 108px;gap:10px}header{display:flex;gap:8px;align-items:center}header>div{flex:1;min-width:0}header small{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#67928c;display:block;white-space:nowrap}h1{margin:2px 0;font-size:27px;letter-spacing:1px;color:#2b6877;white-space:nowrap}h1 span{display:inline-block;vertical-align:middle;margin-left:9px;font-size:10px;letter-spacing:0;padding:5px 8px;background:#d4eee0;color:#417b69;border-radius:20px}button{font:inherit;font-weight:700;color:#366778;background:#fffdf3;border:2px solid #bddad0;border-radius:15px;padding:10px 15px;min-height:44px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #bedace}button:focus-visible,select:focus-visible{outline:3px solid #398eb8;outline-offset:2px}button:active{transform:translateY(2px);box-shadow:none}.stats{display:flex;justify-content:space-between;gap:8px;background:#fffdf3;border:2px solid #d0e6d8;border-radius:19px;padding:9px 16px;color:#69857d;font-size:11px}.stats>div{min-width:0}.stats b{display:block;color:#285b6c;font-size:23px;font-variant-numeric:tabular-nums;line-height:1.3}.stats>div:nth-child(2) b{color:#b27255}#stage{position:relative;min-width:0;min-height:0;border:3px solid #6fb9b7;border-radius:28px;overflow:hidden;background:#85dbda;box-shadow:0 4px 0 #c0ddd0}canvas{width:100%;height:100%;display:block}.watermark{position:absolute;left:10px;top:9px;max-width:calc(100% - 20px);padding:6px 10px;border:1px solid #ffffffa1;background:#f3fff0dd;border-radius:13px;color:#3b746f;font-size:10px;line-height:1.6;pointer-events:none;box-shadow:0 2px 0 #64b7b126}#course{font-weight:750}#objective{font-size:9px;color:#567a6d}#overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#52ada665;backdrop-filter:blur(3px)}#overlay.hidden{display:none}.card{width:min(420px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:#fffdf1;border:3px solid #fff;border-radius:25px;padding:20px 24px;box-shadow:0 7px 0 #398e8e38,0 14px 28px #2e7d7730;scrollbar-width:thin;scrollbar-color:#93cbb6 #eef4df}.island-mark{width:154px;height:70px;margin:0 auto 5px}.island-mark svg{width:100%;height:100%;display:block}.card>small{font-size:10px;letter-spacing:1px;color:#659189}h2{font-size:27px;line-height:1.2;color:#2b6676;margin:7px 0 10px}.card p{font-size:13px;line-height:1.65;color:#637d76;margin:8px 0}.rules{font-size:12px;line-height:1.9;color:#5b7971;background:#eef6e9;border-radius:12px;padding:9px;margin:10px 0}.card:has(#choices:not([hidden])) .rules{display:none}#choices{display:grid;gap:7px;margin:12px 0}#choices label{font-size:12px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;font-weight:700}select{width:100%;min-width:0;max-width:100%;min-height:36px;padding:7px;font:inherit;font-size:12px;color:#3c6b6d;background:#edf6e9;border:2px solid #cee0c8;border-radius:10px}#recordBest{font-size:10px;line-height:1.5;color:#749286;letter-spacing:0}#start{width:100%;min-height:48px;padding:12px;color:#fffefa;background:#f09976;border:2px solid #de8261;box-shadow:0 4px 0 #d57958;font-size:17px;border-radius:16px;text-shadow:0 1px #aa694c}.session-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.session-actions button{font-size:11px;padding:7px 9px;min-height:36px;border-width:1px;border-radius:10px;box-shadow:none;background:#f2f7ec}#storageNote{display:block;font-size:11px;color:#ac6744;letter-spacing:0}.card .fine{font-size:10px;margin-bottom:0;color:#92a28c}footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.tip{text-align:center;max-width:340px}.tip strong{display:block;font-size:12px;color:#4f7d72;line-height:1.5}.tip small{display:block;font-size:11px;color:#779789;margin-top:5px}#joystick{width:102px;height:102px;flex-shrink:0;position:relative;border-radius:50%;border:3px solid #c5e0d4;background:radial-gradient(circle at 40% 30%,#fffef2,#e1f0e3);box-shadow:0 4px 0 #b3d3c5;touch-action:none}#joystick::before{content:'';position:absolute;inset:9px;border:1px dashed #bad6c7;border-radius:50%}#knob{position:absolute;left:28px;top:28px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b5eff8 8%,#75c4df 70%);border:3px solid #4c9db9;box-shadow:0 4px 0 #86b9bd;pointer-events:none}#joystick span{position:absolute;bottom:6px;width:100%;text-align:center;font-size:10px;color:#789486}#dash{width:100px;height:86px;flex-shrink:0;border-radius:27px;background:#f2a17e;border:3px solid #de8668;color:#fffef3;font-size:22px;box-shadow:0 5px 0 #cf785c;text-shadow:0 1px #bd7355}#dash small{display:block;color:#fff1d9;font-size:11px;margin-top:4px}#dash:disabled{background:#c4d9cc;border-color:#b1cabc;color:#647f72;box-shadow:0 4px 0 #a5c1b0;text-shadow:none}#dash:disabled small{color:#647f72}@media(max-width:480px){main{padding-left:9px;padding-right:9px;gap:8px;grid-template-rows:auto auto minmax(0,1fr) 100px}header small{font-size:8px;letter-spacing:.7px}h1{font-size:22px;letter-spacing:0}h1 span{margin-left:5px;padding:4px 6px;font-size:9px}header button{padding:8px;min-width:44px;font-size:13px}.stats{padding:8px 10px;font-size:10px;border-radius:16px}.stats b{font-size:21px}.tip{max-width:130px}.tip strong{font-size:10px}.tip small{font-size:10px}#joystick{width:92px;height:92px}#knob{left:23px;top:23px}#dash{width:88px;height:80px}.card{padding:17px}.watermark{font-size:9px}h2{font-size:24px}}@media(orientation:portrait) and (max-height:700px){main{grid-template-rows:auto auto minmax(0,1fr) 86px;gap:6px;padding-top:8px;padding-bottom:8px}#joystick{width:80px;height:80px}#knob{left:17px;top:17px}#dash{width:80px;height:72px;font-size:20px}.tip small{display:none}.card{padding:11px;border-radius:18px}.island-mark{display:none}.card h2{font-size:20px;margin:4px 0}.card p{font-size:11px;line-height:1.45;margin:5px 0}.card .fine{display:none}#choices{gap:4px;margin:6px 0}select{min-height:30px;padding:4px}#start{min-height:42px;padding:8px;font-size:15px}.session-actions{margin-top:8px}.session-actions button{min-height:30px;padding:5px}.watermark{padding:4px 7px;font-size:8px}#objective{font-size:8px}}@media(orientation:landscape) and (max-height:600px){main{grid-template-columns:96px minmax(0,1fr) 94px;grid-template-rows:44px minmax(0,1fr);gap:8px;padding:7px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left))}header{grid-column:1/4}header small{display:none}h1{font-size:22px}header button{min-height:38px;padding:6px 13px}header>div{overflow:hidden}.stats{grid-row:2;flex-direction:column;justify-content:space-around;padding:8px;font-size:10px;border-radius:17px}.stats b{font-size:21px}#stage{grid-column:2;grid-row:2;border-radius:23px}footer{grid-column:3;grid-row:2;flex-direction:column;justify-content:center;gap:16px}.tip{display:none}#joystick{width:84px;height:84px}#knob{left:19px;top:19px}#dash{height:74px;width:86px;font-size:20px}.card{padding:12px 17px;max-width:440px;border-radius:20px}.island-mark,.card .fine,.card .rules{display:none}.card h2{font-size:21px;margin:4px 0}.card p{font-size:11px;line-height:1.5;margin:5px 0}#choices{gap:4px;margin:6px 0}select{min-height:30px;padding:4px}#start{padding:8px;min-height:42px;font-size:15px}.session-actions{margin-top:8px}.session-actions button{min-height:32px;padding:5px}.watermark{font-size:8px;padding:4px 7px;top:7px;left:7px}#objective{font-size:8px}}@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Dark labels retain contrast on the warm primary controls. */
#start,#dash{color:#653d31;text-shadow:none}#dash small{color:#744b3b}.tip small{color:#587b71}.card .fine{color:#647c6f}.stats{color:#517467}
/* Locale-aware layout: compact selector and wrapping labels. */
h1 .brand{background:none;color:inherit;font:inherit;padding:0;margin:0}h1{white-space:normal}h1>span:not(.brand){display:none}header small{white-space:normal;letter-spacing:.3px}.language-picker{font-size:10px;width:112px;flex-shrink:0}.language-picker>span{display:none}.language-picker select{min-height:44px;font-size:10px;padding:4px}header button{font-size:12px;padding:6px;max-width:80px}#choices label{grid-template-columns:1fr;gap:4px}.watermark{max-width:calc(100% - 20px);font-size:9px}.tip strong{overflow-wrap:anywhere}#dash{font-size:16px;padding:5px}#dash small{font-size:10px}html:not([lang="zh-CN"]) h1{font-size:19px}html:not([lang="zh-CN"]) header>div>small{display:none}@media(max-width:480px){header{flex-wrap:wrap;gap:5px}header>div{flex-basis:calc(100% - 125px)}.language-picker{position:absolute;right:10px;top:10px;width:112px}header>button{min-height:32px;max-width:none}main{grid-template-rows:auto auto minmax(0,1fr) 90px}.stats{font-size:9px}.watermark{font-size:8px;padding:4px 6px}.tip strong{font-size:9px}#dash{font-size:14px}}@media(orientation:landscape) and (max-height:600px){header{flex-wrap:nowrap}.language-picker{position:static;width:105px}html:not([lang="zh-CN"]) h1{font-size:18px}.language-picker select{min-height:36px}header button{min-height:36px;font-size:11px}#dash{font-size:15px}.watermark{font-size:8px}}
@media(max-width:480px){header{display:grid;grid-template-columns:1fr 1fr 112px;grid-template-rows:auto auto;align-items:center}header>div{grid-column:1/3;grid-row:1}header>.language-picker{grid-column:3;grid-row:1/3;position:static;width:112px}header>#help{grid-column:1;grid-row:2}header>#pause{grid-column:2;grid-row:2}header button{width:100%;min-height:32px}header>div>small{display:none}h1{font-size:20px!important;margin:0}.watermark{line-height:1.35}}
#joystick span span{position:static;width:auto;display:inline}
.language-picker select{font-size:9px;padding-left:3px;padding-right:0}