*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#123c43;color:#fff9e8;font-family:Nunito,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:900 15px Nunito,system-ui;cursor:pointer;color:inherit;border:0}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}[hidden]{display:none!important}#app{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#home{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 45%,#1e798626,transparent 65%)}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px;font-size:12px;font-weight:900}header span{padding:8px 13px;background:#082b36a8;border:1px solid #ffffff20;border-radius:25px}.round{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:#153a43dc;border:1px solid #ffffff3b;box-shadow:0 3px 0 #062a34;text-decoration:none;color:#fff;font-size:24px}.title{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 22px;text-align:center}.eyebrow{letter-spacing:3px;font-size:11px;color:#a8eed5;font-weight:900;margin:0 0 8px}h1{font-size:clamp(34px,6vw,62px);line-height:.99;margin:0;letter-spacing:-1.5px;color:#fff7bd;text-shadow:0 4px 0 #713919,3px 0 #713919,-3px 0 #713919,0 -3px #713919,0 8px 0 #072e35}h1 span{display:block;font-size:.65em;color:#ffca56;margin-top:9px;letter-spacing:2px}.tagline{font-size:13px;font-weight:800;color:#c6efe1;margin:14px 0 0}#hero{height:110px;width:300px;max-height:20vh}.modes{display:flex;gap:8px;margin:0 0 14px}.modes button{min-width:140px;border:1px solid #b7f4dc44;background:#12363ec9;border-radius:16px;padding:10px 16px;color:#d8ece5}.modes button[aria-pressed=true]{background:#fff3cc;color:#493111;box-shadow:0 4px 0 #cf9b43;border-color:#fff6cf}.modes small{display:block;font-size:10px;margin-top:3px;opacity:.8}.main{width:min(330px,90%);border:3px solid #e7fcb5;background:linear-gradient(#b6f86e,#50c53a);color:#143d20;font-size:25px;border-radius:24px;padding:13px 20px;box-shadow:0 6px 0 #1a6829,0 10px 0 #062c32;text-shadow:0 1px #dcffb9}.main:active{transform:translateY(2px)}#homeNote{font-size:11px;color:#c7e7d9;margin:16px 0 13px;min-height:15px}nav{display:flex;gap:12px}nav button{background:transparent;display:flex;flex-direction:column;align-items:center;font-size:10px;gap:7px;padding:0}nav b{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-size:20px;border:2px solid #062c36;background:linear-gradient(#ffea6e,#f6a937);box-shadow:0 4px 0 #062b32;color:#473625}nav button:nth-child(2) b{background:linear-gradient(#ffb0d3,#ee5e9c)}nav button:nth-child(3) b{background:linear-gradient(#89eaff,#32b1e1)}nav button:nth-child(4) b{background:linear-gradient(#ffc18a,#ef8655)}nav button:nth-child(5) b{background:linear-gradient(#dab6ff,#9d71dc)}#hud{position:absolute;left:0;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 18px 10px;pointer-events:none;background:linear-gradient(#082e40e6,transparent);gap:14px}#hud button{pointer-events:auto}.score,.time{text-align:center;min-width:74px}#hud small{display:block;font-size:9px;letter-spacing:1.5px;font-weight:900;color:#b9e4dc}#hud strong{font-size:32px;line-height:1.1;text-shadow:0 3px #0a2936}.time strong{color:#ffdf74}#tip{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;pointer-events:none;color:#e3fff0;text-shadow:0 2px #052d39}#toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);padding:8px 16px;border-radius:18px;background:#062c37da;font-size:17px;font-weight:900;color:#ffe179;pointer-events:none;text-align:center;opacity:0;transition:opacity .15s}#toast.show{opacity:1}dialog{position:absolute;width:min(390px,calc(100% - 32px));max-height:calc(100% - 30px);overflow:auto;border:2px solid #83d6c8;border-radius:28px;background:linear-gradient(#205b66,#133b49);color:#fff5da;padding:24px 20px;text-align:center;box-shadow:0 16px 80px #001d30aa}dialog::backdrop{background:#001d37ab}dialog h2{font-size:26px;margin:0 0 13px}dialog p{font-size:13px;line-height:1.6;color:#d2ede4}dialog button{margin:7px auto;display:block}dialog .main{font-size:20px;padding:10px}.secondary{background:#ffffff0e;border:1px solid #ffffff35;border-radius:15px;padding:11px;width:90%}.result-score{font-size:64px;font-weight:1000;color:#ffdf76;line-height:1.2}.result-stats{display:flex;justify-content:center;gap:20px;font-size:12px;margin:12px 0}.result-stats b{display:block;font-size:21px;color:#fff}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.collection-grid canvas{width:65px;height:65px}.collection-grid small{display:block;font-size:11px}#uji{position:absolute;z-index:20;inset:0;background:white;color:black;overflow:auto;margin:0;padding:20px}@media(min-width:700px) and (min-height:430px){.title{padding-bottom:18px}#hero{height:100px}nav{gap:22px}}@media(max-height:540px){header{height:45px}.title{padding:3px 12px 10px}.eyebrow{margin-bottom:4px;font-size:9px}h1{font-size:34px}h1 span{margin-top:5px}.tagline{margin-top:8px;font-size:11px}#hero{height:50px}.modes{margin-bottom:9px}.modes button{padding:6px 15px}.main{font-size:22px;padding:8px 15px}#homeNote{margin:10px 0}nav b{width:36px;height:36px}nav{gap:15px}nav button{gap:5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.record-progress{width:85%;height:8px;accent-color:#91e960;margin:0 0 12px}