body.game{height:100dvh;overflow:hidden;background:#849ea9;color:#f1f5f3;-webkit-user-select:none;user-select:none}body.game #world{position:fixed;inset:0}body.game #world canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}body.game .film{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#213b3c2e,#213b3c00 35%,#213b3c59)}body.game.playing .film{opacity:.4}.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.4rem;z-index:10}.wordmark{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.5rem;text-decoration:none;color:#f1f5f3;text-shadow:0 1px 10px rgba(33,59,60,.4)}.wordmark svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.tools{display:flex;gap:.5rem}.tools button,#controls-button{background:none;border:0;color:#e1e8e8;font:600 .95rem var(--font-body);cursor:pointer;padding:.4rem .6rem;text-shadow:0 1px 8px rgba(33,59,60,.5)}.tools button:hover,#controls-button:hover{color:#fff}.intro,.results{position:fixed;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:2rem;padding:6rem clamp(1.25rem,5vw,4rem) 3.5rem}.intro[hidden],.results[hidden],.hud[hidden],.hint[hidden],.touch-controls[hidden],.pause-overlay[hidden],#pause-button[hidden]{display:none}.intro .location,.results .location{color:#f0d9a3;text-shadow:0 1px 12px rgba(33,59,60,.6)}.intro h1{color:#f1f5f3;text-shadow:0 2px 30px rgba(33,59,60,.4);margin:.75rem 0 0}.intro .tagline{margin:1.25rem 0 1.75rem;font-size:clamp(1.125rem,2vw,1.375rem);max-width:30ch;color:#eef3f2;text-shadow:0 1px 12px rgba(33,59,60,.45)}.intro .small{color:#e1e8e8cc;margin-top:.75rem}.record{color:#f0d9a3!important}.intro-aside{display:flex;flex-direction:column;gap:1.25rem;justify-self:end;max-width:30ch}.intro-aside p{color:#eef3f2;text-shadow:0 1px 10px rgba(33,59,60,.45)}.intro-footer{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:#e1e8e8bb}.primary{background:#f1f5f3;color:#213b3c}.primary:hover{background:#fff}.primary:disabled{opacity:.7;cursor:default}.secondary{color:#f1f5f3;border-color:#f1f5f38c}.hud{position:fixed;top:4.5rem;left:1.4rem;z-index:6;display:grid;grid-template-columns:auto auto;gap:.35rem 1.25rem;align-items:end;padding:1rem 1.25rem;border-radius:10px;background:#eff3efd1;color:#213b3c;min-width:190px;backdrop-filter:blur(6px)}.hud strong{display:block;font-family:var(--font-display);font-weight:700;font-size:2.75rem;line-height:.95;font-variant-numeric:tabular-nums}.hud .speed strong{font-size:1.75rem}.hud span{font-size:.8rem;color:#627a79}.mass-track{grid-column:1 / -1;height:6px;border-radius:3px;background:#213b3c24;overflow:hidden;margin-top:.35rem}.mass-track span{display:block;height:100%;width:100%;background:#6f9bb6;transform-origin:left;transition:transform .12s linear,background .3s}.mass-track span.low{background:#c47a3a}#surface{grid-column:1 / -1;font-size:.85rem;font-weight:600;color:#395660}.hint{position:fixed;bottom:1.25rem;right:1.4rem;z-index:6;color:#e1e8e8;font-size:.9rem;text-shadow:0 1px 8px rgba(33,59,60,.5);transition:opacity 1s}.touch-controls{position:fixed;bottom:1.25rem;left:0;right:0;z-index:6;display:flex;justify-content:space-between;padding:0 1.25rem}@media(hover:hover)and (pointer:fine){.touch-controls{display:none}}.touch-controls button{width:84px;height:84px;border-radius:50%;border:0;background:#213b3c8c;color:#f1f5f3;font:600 1.05rem var(--font-body);touch-action:none}.touch-controls button:first-child,.touch-controls button:last-child{font-size:2rem}.results{background:#213b3c73;backdrop-filter:blur(8px);grid-template-columns:1fr;align-items:center}.result-inner{max-width:40rem}.results h2{color:#f1f5f3;font-size:clamp(2.5rem,7vw,5rem);margin:.75rem 0 1.5rem}.result-score{display:flex;align-items:baseline;gap:.75rem}.result-score strong{font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,12vw,7rem);line-height:1;font-variant-numeric:tabular-nums}.result-score span{font-size:1.25rem;color:#e1e8e8}#final-detail{margin-top:.5rem;color:#eef3f2}.result-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.pause-overlay{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#213b3c73;backdrop-filter:blur(8px)}.pause-overlay p{font-family:var(--font-display);font-size:2.5rem;font-weight:700}dialog#panel{border:0;border-radius:12px;padding:2rem;max-width:34rem;width:calc(100% - 2rem);background:#eff3ef;color:#213b3c}dialog#panel::backdrop{background:#213b3c80}dialog#panel h2{font-size:2.5rem;margin-bottom:1rem}dialog#panel label{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;border-bottom:1px solid #d3dcdb;font-weight:500}dialog#panel select{font:inherit;padding:.4rem .6rem;border-radius:6px;border:1px solid #8fa2a1;background:#fff}dialog#panel .close{position:absolute;top:.75rem;right:.75rem;background:none;border:0;font-size:1.5rem;cursor:pointer;color:#213b3c}dialog#panel p{margin-top:1rem;color:#3b5559}dialog#panel .keys{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:1rem 0}dialog#panel dt{font-weight:600}dialog#panel dd{margin:0;color:#3b5559}@media(max-width:820px){.intro{grid-template-columns:1fr;padding-top:5rem}.intro-aside{justify-self:start}.intro h1{font-size:clamp(2.75rem,14vw,4.5rem)}.hud{top:4rem;min-width:150px;padding:.75rem 1rem}.hud strong{font-size:2rem}}
