:root{--panel-border:#ffffff1f;--text:#eef1ea;--muted:#b9c2b4;--accent:#d9b56a;--radius:8px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:#c8d6e0;margin:0;overflow:hidden}#app{position:fixed;inset:0}#app canvas{display:block}.labels{pointer-events:none;position:absolute;inset:0}.place-label{border-radius:var(--radius);color:var(--text);white-space:nowrap;border:1px solid var(--panel-border);background:#0e1210b3;padding:3px 8px;font-size:12px}#loading{text-align:center;z-index:10;background:#24302a;place-content:center;display:grid;position:fixed;inset:0}.loading-title{letter-spacing:.02em;font-size:56px;font-weight:700}.loading-text{color:var(--muted);margin-top:8px}.start-menu{justify-items:center;gap:10px;margin-top:28px;display:grid}.start-button{min-width:220px;color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius);cursor:pointer;background:#ffffff0d;padding:11px 18px;font:18px/1.4 Georgia,Times New Roman,serif}.start-button:hover,.start-button:focus-visible{border-color:var(--accent);background:#ffffff1f;outline:none}.hud{pointer-events:none;text-shadow:0 1px 2px #0000008c;font-size:13px;position:fixed;inset:0}.btn{font:inherit;color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius);cursor:pointer;background:#ffffff14;padding:6px 8px}.btn:hover{background:#ffffff29}.lock-hint{border-radius:var(--radius);background:#0e12108c;padding:8px 14px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.help-overlay{border-radius:var(--radius);color:var(--muted);text-align:center;text-shadow:none;white-space:nowrap;background:#0e1210c7;padding:14px 18px;font-size:13px;line-height:1.75;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.help-overlay b{color:var(--text);font-weight:600}.help-overlay .credits{color:#eef1ea80;margin-top:8px;font-size:10px}.compass{position:absolute;top:16px;left:16px}.compass .ring{background:#0e121040;border:1px solid #ffffff59;border-radius:50%;width:48px;height:48px;position:relative}.compass .ring span{color:#eef1eabf;font-size:9px;font-weight:600;position:absolute;transform:translate(-50%,-50%)}.compass .ring .n{color:#ff8a6a;font-size:10px;top:8px;left:50%}.compass .ring .s{top:40px;left:50%}.compass .ring .e{top:50%;left:40px}.compass .ring .w{top:50%;left:8px}.time{font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s;position:absolute;top:31px;left:74px}.time.on{opacity:1;transition:none}.prompt{border-radius:var(--radius);white-space:nowrap;background:#0e12108c;padding:7px 13px;font-size:15px;display:none;position:absolute;bottom:96px;left:50%;transform:translate(-50%)}kbd{background:var(--accent);color:#1c1a14;text-align:center;border-radius:5px;min-width:22px;margin-right:6px;padding:1px 6px;font:700 13px/20px system-ui,sans-serif;display:inline-block}.activity{z-index:6;border-radius:var(--radius);text-align:center;background:#0e121080;max-width:640px;padding:7px 14px;display:none;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.act-status{color:var(--accent);font-variant-numeric:tabular-nums}.act-status:empty{display:none}.act-help{color:var(--muted);margin-top:4px;font-size:12px}.toasts{z-index:6;justify-items:center;gap:6px;display:grid;position:absolute;top:18px;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius);background:#0e121099;border:1px solid #0000;padding:6px 13px;font-size:14px;transition:opacity .8s}.toast.done{border-color:#d9b56ab3}.toast.warn{border-color:#e6785ab3}.toast.out{opacity:0}.promille{color:#e7a27e;font-size:12px;display:none;position:absolute;top:72px;left:16px}.fade{opacity:0;pointer-events:none;z-index:5;background:#000;position:fixed;inset:0}.black-card{z-index:19;opacity:0;-webkit-user-select:none;user-select:none;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.black-card[hidden]{display:none}.black-card-text{text-align:center;color:#f2efe8;transition:opacity .8s}.black-card-text.gone{opacity:0}.black-card-line{letter-spacing:.05em;opacity:0;font-size:clamp(22px,2.8vw,46px);font-weight:300;line-height:1.4;transition:opacity 1s,transform 1.4s ease-out;transform:translateY(10px)}.black-card-line+.black-card-line{color:#f2efe8b8;margin-top:.7em;font-size:clamp(18px,2.1vw,34px);font-style:italic}.black-card-line.in{opacity:1;transform:none}.hint{border-radius:var(--radius);white-space:nowrap;color:var(--muted);background:#0e121073;padding:4px 11px;font-size:13px;display:none;position:absolute;bottom:140px;left:50%;transform:translate(-50%)}.story{z-index:20;cursor:pointer;-webkit-user-select:none;user-select:none;background:#060908;position:fixed;inset:0}.story[hidden]{display:none}.story-still{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.story:after{content:"";pointer-events:none;background:linear-gradient(#04060500,#040605c7);height:38%;position:absolute;bottom:0;left:0;right:0}.story-label{z-index:1;color:#eef1ead1;text-shadow:0 1px 3px #000c;font-size:13px;position:absolute;top:16px;left:18px}.story-box{z-index:1;width:min(860px,100% - 32px);color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius);background:#0e1310d1;padding:14px 22px 12px;position:absolute;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0006}.story-box.in .story-text{animation:.25s ease-out story-line}@keyframes story-line{0%{opacity:0;transform:translateY(4px)}}.story-who{color:var(--accent);font:700 15px/1.3 system-ui,sans-serif}.story-box[data-who=tonttu] .story-who{color:#e8705f}.story-text{margin-top:4px;font:24px/1.4 Georgia,Times New Roman,serif}.story-keys{text-align:right;color:var(--muted);margin-top:8px;font-size:12px}@media (max-width:720px){.story-box{padding:12px 16px 10px;bottom:16px}.story-text{font-size:19px}}.choice{z-index:20;background:#080c0a4d;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.choice[hidden]{display:none}.choice-card{border:1px solid var(--panel-border);border-radius:var(--radius);background:#141a17f2;width:min(320px,100%);padding:18px 20px 20px;box-shadow:0 18px 60px #00000073}.choice-title{color:var(--text);margin:0 0 14px;font:600 21px/1.3 Georgia,Times New Roman,serif}.choice-list{gap:8px;max-height:min(70vh,640px);display:grid;overflow-y:auto}.choice-item{width:100%;color:var(--text);text-align:left;border:1px solid var(--panel-border);border-radius:var(--radius);cursor:pointer;background:#ffffff0d;align-items:center;padding:9px 12px;font:17px/1.4 Georgia,Times New Roman,serif;display:flex}.choice-item kbd{margin-right:12px}.choice-item.on{border-color:var(--accent);background:#ffffff1f}.compass .target{width:0;height:0;display:none;position:absolute;top:50%;left:50%}.compass .target:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffecbed9 0%,#ffc87880 25%,#ffa04624 60%,#ff8c3c00 100%);border-radius:50%;width:28px;height:28px;animation:2.4s ease-in-out infinite alternate wisp-pulse;position:absolute;top:-43px;left:-14px}.compass .target:after{content:"";filter:drop-shadow(0 0 2px #ffecbef2)drop-shadow(0 0 5px #ffa046cc)drop-shadow(0 1px 1px #00000080);border-bottom:13px solid #ffd58a;border-left:8px solid #0000;border-right:8px solid #0000;position:absolute;top:-36px;left:-8px}@keyframes wisp-pulse{0%{opacity:.55;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}@media (prefers-reduced-motion:reduce){.compass .target:before{animation:none}}.compass .target.quest:before{display:none}.compass .target.quest:after{filter:drop-shadow(0 1px 1px #0009);border-bottom:8px solid #19b8c4;border-left-width:5px;border-right-width:5px;top:-27px;left:-5px}.intro{z-index:30;pointer-events:none;position:fixed;inset:0}.intro[hidden]{display:none}.intro-bar{background:#000;height:11vh;transition:transform .8s ease-in-out;position:absolute;left:0;right:0}.intro-bar.top{top:0}.intro-bar.bottom{bottom:0}.intro.ending .intro-bar.top{transform:translateY(-100%)}.intro.ending .intro-bar.bottom{transform:translateY(100%)}.intro-title{text-align:center;color:#fff;opacity:0;white-space:nowrap;text-shadow:0 2px 30px #00000059;position:absolute;top:27%;left:50%;transform:translate(-50%)}.intro-name{letter-spacing:calc(.3em + var(--spread,0em));margin-right:calc(-.3em - var(--spread,0em));font-size:clamp(64px,12vw,210px);font-weight:800;line-height:1}.intro-sub{letter-spacing:.16em;margin-top:.8em;margin-right:-.16em;font-size:clamp(14px,1.8vw,30px);font-weight:300}.intro-black{opacity:1;background:#000;position:absolute;inset:0}.intro-skip{color:#ffffff8c;font-size:12px;position:absolute;bottom:calc(11vh + 14px);right:24px}.intro-skip kbd{font:inherit;border:1px solid #ffffff59;border-radius:3px;padding:1px 5px}.race-count{z-index:12;color:var(--text);text-shadow:0 4px 24px #0000008c;pointer-events:none;font-variant-numeric:tabular-nums;font:700 120px/1 Georgia,Times New Roman,serif;position:fixed;top:34%;left:50%;transform:translate(-50%,-50%)}.race-count.go{color:var(--accent)}.race-count.time{font-size:84px}.race-count.pop{animation:.35s ease-out race-pop}@keyframes race-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.5)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.race-modal{z-index:20;background:#080c0a4d;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.race-modal[hidden]{display:none}.race-card{border:1px solid var(--panel-border);border-radius:var(--radius);text-align:center;background:#141a17f2;width:min(340px,100%);padding:20px 22px 18px;box-shadow:0 18px 60px #00000073}.race-time{color:var(--accent);font-variant-numeric:tabular-nums;font:700 46px/1.1 Georgia,Times New Roman,serif}.race-rank{color:var(--muted);margin-top:4px;font:16px/1.4 Georgia,Times New Roman,serif}.race-slots{justify-content:center;gap:10px;margin:22px 0 26px;display:flex}.race-slot{width:58px;color:var(--muted);border-bottom:3px solid #ffffff2e;padding:8px 0 6px;font:700 44px/1 ui-monospace,Menlo,Consolas,monospace;position:relative}.race-slot.set{color:var(--text)}.race-slot.on{color:var(--text);border-bottom-color:var(--accent);animation:.9s steps(2,jump-none) infinite race-blink}@keyframes race-blink{50%{color:var(--accent);border-bottom-color:#ffffff2e}}.race-keys{color:var(--muted);margin-top:12px;font-size:12px}.race-keys kbd{margin-right:3px}.race-keys kbd+kbd{margin-left:-1px}.race-title{color:var(--text);margin:0 0 12px;font:600 21px/1.3 Georgia,Times New Roman,serif}.race-board{font-variant-numeric:tabular-nums;color:var(--text);margin:0;padding:0;font:600 19px/1.65 ui-monospace,Menlo,Consolas,monospace;list-style:none}.race-board li{text-align:left;grid-template-columns:3ch 4ch 1fr;gap:10px;padding:0 8px;display:grid}.race-board .r{color:var(--muted);text-align:right}.race-board .t{text-align:right}.race-board li.me{color:var(--accent);background:#d9b56a1a;border-radius:4px;animation:1s steps(2,jump-none) infinite race-blink-row}.race-board li.gap{text-align:center;color:var(--muted);line-height:1.1;display:block}@keyframes race-blink-row{50%{color:var(--text)}}
