:root{--title: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;--mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;--ink: #e9eef4;--dim: #95a3b3;--panel: rgba(6, 10, 16, .62);--line: rgba(255, 255, 255, .14);--accent: #00e5ff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;user-select:none}#game{position:fixed;inset:0;width:100vw;height:100vh;display:block}.ui{position:fixed;inset:0;pointer-events:none;z-index:10}.hud{position:absolute;inset:0;z-index:2}.flash{position:absolute;inset:0;opacity:0;z-index:3}.bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:4}.bar.top{top:0}.bar.bottom{bottom:0}.fade{position:absolute;inset:0;background:#000;opacity:1;z-index:6}.title{position:absolute;inset:0;z-index:5;opacity:0;padding:0 6vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.title .main{font-family:var(--title);font-size:clamp(56px,10vw,150px);line-height:.95;letter-spacing:.12em;color:#f6f1e7;text-shadow:0 0 40px rgba(255,196,140,.35),0 2px 0 rgba(0,0,0,.6)}.title .sub{margin-top:1.1em;font-size:clamp(13px,1.5vw,20px);letter-spacing:.45em;text-transform:uppercase;color:#d3dde8;text-shadow:0 1px 10px #000}.title.small{justify-content:flex-end;padding-bottom:17vh}.title.small .main{font-size:clamp(40px,6.5vw,96px)}.title.danger .main{color:#f43;text-shadow:0 0 50px rgba(255,40,20,.8)}.caption{position:absolute;left:6vw;bottom:calc(11vh + 22px);z-index:5;opacity:0;font-size:clamp(11px,1.1vw,15px);letter-spacing:.32em;text-transform:uppercase;color:#dbe5ef;text-shadow:0 1px 8px #000}.hint{position:absolute;left:50%;bottom:7vh;transform:translate(-50%);z-index:5;padding:9px 18px;background:var(--panel);border:1px solid var(--line);font-size:14px;letter-spacing:.14em;white-space:nowrap;opacity:0;transition:opacity .3s}.hint.on{opacity:1}.btn{pointer-events:auto;position:absolute;bottom:18px;z-index:7;cursor:pointer;background:#00000080;color:var(--ink);border:1px solid rgba(255,255,255,.28);font:13px var(--mono);letter-spacing:.2em;padding:9px 14px}.btn:hover{background:#ffffff1f}.skip{right:18px;display:none}.skip.on{display:block}.mute{left:18px;padding:7px 10px;font-size:16px;letter-spacing:0}.notice{position:absolute;left:72px;bottom:27px;z-index:7;font-size:12px;letter-spacing:.12em;color:#ffd23f}.radio{position:absolute;left:18px;top:112px;z-index:5;opacity:0;max-width:min(420px,80vw);padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid #7cff6b}.radio .who{font-size:11px;letter-spacing:.22em;color:#7cff6b}.radio .chip{display:inline-block;margin:6px 0 4px;padding:2px 6px;font-size:9px;letter-spacing:.2em;color:#0b0f14;background:#7cff6b}.radio .orig{font-size:16px;font-style:italic;color:#fff}.radio .en{margin-top:3px;font-size:13px;color:var(--dim)}.route{position:absolute;right:18px;top:84px;z-index:5;opacity:0;padding:12px 16px;background:var(--panel);border:1px solid var(--line)}.route .head{font-size:9px;letter-spacing:.22em;color:var(--dim);margin-bottom:8px}.route .stops{display:flex;flex-direction:column;gap:6px;border-left:1px dashed rgba(255,255,255,.3);margin-left:5px;padding-left:12px}.route .stop{position:relative;font-size:12px;letter-spacing:.12em;color:var(--dim)}.route .stop i{position:absolute;left:-17px;top:3px;width:9px;height:9px;border-radius:50%;background:#2a3442;border:1px solid #5a6878}.route .stop.done{color:#7f8c99;text-decoration:line-through}.route .stop.done i{background:#5a6878}.route .stop.here{color:#fff}.route .stop.here i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}.start{position:absolute;inset:0;z-index:8;pointer-events:auto;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 62%,#0d1d27,#000 70%)}.start h1{margin:0;font-family:var(--title);font-weight:400;font-size:clamp(56px,11vw,160px);letter-spacing:.12em;color:#f6f1e7;text-shadow:0 0 40px rgba(80,220,230,.25)}.start .tag{margin-top:6px;font-size:13px;letter-spacing:.5em;color:var(--dim);text-transform:uppercase}.start .who{margin-top:44px;font-size:14px;letter-spacing:.2em}.start .who b{color:var(--accent);font-weight:400}.start .go{margin-top:26px;padding:14px 30px;border:1px solid rgba(255,255,255,.35);font-size:14px;letter-spacing:.3em;animation:pulse 1.8s ease-in-out infinite}.start .keys{margin-top:40px;font-size:12px;line-height:2;letter-spacing:.15em;color:var(--dim)}@keyframes pulse{50%{opacity:.45}}.badge{position:absolute;top:18px;left:18px;display:flex;gap:12px;align-items:center;padding:10px 16px 10px 10px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent)}.badge .face{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);object-fit:cover;background:radial-gradient(circle at 50% 35%,#2c3646,#0d1118)}.badge .label{font-size:10px;letter-spacing:.25em;color:var(--dim)}.badge .code{font-family:var(--title);font-size:26px;letter-spacing:.06em;line-height:1.1}.badge .user{font-size:12px;letter-spacing:.08em;color:var(--accent)}.dial{position:absolute;right:18px;bottom:70px;width:194px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);text-align:center;transition:opacity .3s}.dial canvas{width:166px;height:166px;display:block}.dial .state{margin-top:8px;font-size:11px;letter-spacing:.2em;color:var(--dim)}.dial.off{opacity:.4}.hull{position:absolute;top:18px;left:18px;display:flex;gap:6px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font-size:11px;letter-spacing:.25em}.hull span{margin-right:6px}.hull i{width:22px;height:10px;background:#7cff6b;box-shadow:0 0 8px #7cff6b}.hull i.lost{background:#3a2020;box-shadow:none}.track{position:absolute;left:50%;bottom:26px;transform:translate(-50%);width:min(520px,60vw);height:6px;background:#ffffff2e}.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffd27a}.track .me{position:absolute;top:-5px;left:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}.track .gate{position:absolute;right:-2px;top:-20px;font-size:11px;letter-spacing:.2em}.rear{position:absolute;top:18px;left:50%;transform:translate(-50%);width:min(360px,30vw);aspect-ratio:3.2;border:2px solid rgba(255,255,255,.55);border-radius:6px;box-shadow:0 6px 30px #00000073}.rear span{position:absolute;left:8px;top:4px;font-size:10px;letter-spacing:.25em;color:#fff;text-shadow:0 1px 4px #000}.threat{position:absolute;top:18px;right:18px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font-size:12px;letter-spacing:.2em}.threat.close{color:#f43;border-color:#f43;animation:pulse .6s infinite}.credits{position:absolute;top:0;bottom:0;left:46%;right:4vw;overflow:hidden;mask-image:linear-gradient(transparent 0%,#000 16%,#000 84%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0%,#000 16%,#000 84%,transparent 100%)}.credits .roll{position:absolute;left:0;right:0;top:0;text-align:center}.credits h2{margin:0;font-family:var(--title);font-weight:400;font-size:64px;letter-spacing:.12em}.credits .role{margin-top:44px;font-size:11px;letter-spacing:.35em;color:var(--dim);text-transform:uppercase}.credits .name{margin-top:8px;font-size:18px;letter-spacing:.1em}.credits .star{margin-top:8px;font-family:var(--title);font-size:48px;letter-spacing:.08em;color:var(--accent)}.credits .small{margin-top:6px;font-size:12px;letter-spacing:.06em;color:var(--dim)}.replay{right:18px}.hull .tries{margin-left:10px;color:#ffd23f}.track .river{position:absolute;left:58.4%;top:-20px;font-size:10px;letter-spacing:.2em;color:#7fd6e0}.track .river:after{content:"";position:absolute;left:0;top:18px;width:1.8vw;max-width:10px;height:8px;background:#3f8f8a}.rear{width:min(320px,26vw)}.cards{position:absolute;right:18px;bottom:70px;padding:12px 16px;text-align:center;background:var(--panel);border:1px solid var(--line)}.cards .row{display:flex;gap:10px;justify-content:center}.cards i{width:34px;height:22px;border:1px dashed rgba(255,255,255,.35);border-radius:3px}.cards i.have{border:0;background:linear-gradient(135deg,#ffb020,#ffd96b);box-shadow:0 0 12px #ffb020}.cards .label{margin-top:8px;font-size:11px;letter-spacing:.2em;color:var(--dim)}.boost{position:absolute;top:64px;left:18px;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);font-size:11px;letter-spacing:.25em}.boost .gauge{width:120px;height:8px;background:#ffffff1f}.boost .gauge i{display:block;height:100%;width:100%;background:#4dd0e1}.boost .gauge i.on{background:#fff;box-shadow:0 0 12px #4dd0e1}.kick{position:absolute;top:108px;left:18px;padding:6px 12px;background:var(--panel);border:1px solid var(--line);font-size:10px;letter-spacing:.2em;color:var(--dim)}.kick.ready{color:#ffd23f;border-color:#ffd23f80}.hint{white-space:normal;max-width:min(900px,92vw);text-align:center}.radio{top:150px}kbd{display:inline-block;min-width:22px;padding:2px 6px;margin:0 2px;text-align:center;font:12px var(--mono);color:#0b0f14;background:#e9eef4;border-radius:4px;box-shadow:0 2px #8a96a3;letter-spacing:0;vertical-align:1px}.legend{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:3;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font-size:11px;letter-spacing:.06em}.legend .ltitle{margin-bottom:6px;font-size:9px;letter-spacing:.3em;color:var(--dim)}.krow{display:flex;align-items:center;gap:10px;padding:3px 0;color:var(--dim);transition:color .15s}.krow .keys{min-width:78px;white-space:nowrap}.legend{font-size:10px;opacity:.9;max-width:330px}.krow.active{color:#fff}.krow.active kbd{background:var(--accent);box-shadow:0 0 10px var(--accent)}.krow.cool{opacity:.4}.prompt{position:absolute;left:50%;top:30%;transform:translate(-50%);z-index:5;opacity:0;padding:12px 22px;background:#080a0ec7;border:1px solid rgba(255,210,63,.6);font-size:17px;letter-spacing:.08em;color:#ffd23f;white-space:nowrap}.prompt kbd{font-size:15px}.brief{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;background:#0000009e}.brief.on{display:flex}.brief .card{width:min(560px,92vw);padding:26px 30px;background:#080c12f0;border:1px solid var(--line);border-top:3px solid var(--accent)}.brief .btitle{font-family:var(--title);font-size:46px;letter-spacing:.1em}.brief .goal{margin:4px 0 18px;font-size:13px;line-height:1.6;color:#cfd8e3}.brief .rows .krow{color:#e9eef4;font-size:13px;padding:5px 0}.brief .rows .krow .keys{min-width:130px}.brief .go{margin-top:20px;text-align:center;font-size:13px;letter-spacing:.25em;animation:pulse 1.6s infinite}
