:root{--enamel:#f1ead9f2;--enamel-solid:#f1ead9;--ink:#1c2230;--muted:#71695a;--well:#e2d8c1;--well-hi:#d8ccb0;--line:#d3c6a8;--rim:#b8aa8a;--bnl:#1f4f9d;--red:#d23f2e;--amber:#f2b33d;--green:#3f9b5a;--tape:#191b20;--tape-ink:#f3eedf;--night:#141820ee;--night-ink:#e9e1cc;--night-muted:#cdc4ad;--night-line:#2c323d;--shadow:0 2px 0 #0000001c,0 8px 22px #10141a38;--ui:"Saira Condensed","Arial Narrow",Arial,sans-serif;--mono:"Share Tech Mono",ui-monospace,Menlo,monospace;--stencil:"Saira Stencil One","Saira Condensed",Impact,sans-serif;--kana:"Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;--screws:radial-gradient(circle at 6px 6px,#9d916f 1.6px,#0000 2.3px),radial-gradient(circle at calc(100% - 6px) 6px,#9d916f 1.6px,#0000 2.3px),radial-gradient(circle at 6px calc(100% - 6px),#9d916f 1.6px,#0000 2.3px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#9d916f 1.6px,#0000 2.3px);--scan:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 3px);font-family:var(--ui);color:var(--ink);font-synthesis:none;background:#14181f}*{box-sizing:border-box}body{background:#14181f;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}#app,#scene{touch-action:none;width:100%;height:100%;position:absolute;inset:0}#scene{display:block}[hidden]{display:none!important}kbd{min-width:18px;font:400 11px/1 var(--mono);text-align:center;color:var(--ink);background:#fbf7ec;border:1px solid #b9ab8a;border-bottom-width:3px;border-radius:3px;padding:2px 5px 1px;display:inline-block}.panel,#menu,#goals,#gauges,#shelf{background:var(--screws),var(--enamel);border:1px solid var(--rim);box-shadow:var(--shadow),inset 0 1px 0 #fffaf0}.tape,.gauge b{font:400 10px/1 var(--mono);letter-spacing:1.5px;color:var(--tape-ink);background:var(--tape);border-radius:2px;padding:3px 5px 2px;display:inline-block;transform:rotate(-.8deg);box-shadow:0 1px #0003}.panel{z-index:3;border-radius:5px;align-items:center;gap:8px;padding:7px 9px 7px 16px;display:flex;position:absolute;top:14px;left:14px}.wordmark{font:400 21px/1 var(--stencil);letter-spacing:1px;color:var(--ink);align-items:baseline;gap:5px;margin-right:4px;text-decoration:none;display:flex}.wordmark span{font:400 11px/1 var(--kana);letter-spacing:0;color:var(--red)}.mode-switch{background:var(--well);border-radius:4px;gap:2px;padding:2px;display:flex;box-shadow:inset 0 1px 2px #0000001f}.mode-switch button{letter-spacing:.6px;text-transform:uppercase;color:var(--muted);background:0 0;border:0;border-radius:3px;padding:5px 11px;font-size:13px;font-weight:700}.mode-switch button.active{background:var(--bnl);color:#f3eedf;box-shadow:0 1px #0b2550}.chip{background:var(--well);color:var(--ink);letter-spacing:.5px;white-space:nowrap;border:0;border-radius:4px;align-items:center;gap:6px;height:30px;padding:0 10px;font-size:13px;font-weight:700;display:inline-flex;box-shadow:inset 0 -2px #0000001a}.chip:hover,.icon-button:hover{background:var(--well-hi)}#shelf-btn{font-family:var(--mono);font-size:12px;font-weight:400}.icon-button{background:var(--well);color:var(--ink);border:0;border-radius:4px;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:flex;box-shadow:inset 0 -2px #0000001a}.icon-button.active{background:var(--bnl);color:#fff}#menu{border-radius:5px;width:260px;padding:12px 12px 10px;position:absolute;top:calc(100% + 8px);right:0}.menu-row{border-bottom:1px dashed var(--line);justify-content:space-between;align-items:center;gap:10px;padding:7px 2px;display:flex}.menu-row>span{letter-spacing:.8px;text-transform:uppercase;color:var(--muted);align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.menu-row kbd{min-width:0;padding:2px 4px 1px;font-size:9px}.menu-actions{gap:6px;padding:10px 0 0;display:flex}.menu-actions .chip{flex:1;justify-content:center}.menu-actions kbd{min-width:0;padding:2px 4px 1px;font-size:9px}#reset{color:var(--red)}#sound .mute{display:none}#sound.off .mute{display:inline}#sound.off .wave{display:none}#sound.off{color:#9a917e}#sound em{font-style:normal}#skins{gap:4px;display:flex}#skins button{background:0 0;border:0;border-radius:50%;padding:3px}#skins i{border-radius:50%;width:18px;height:18px;display:block;box-shadow:0 0 0 1px #1c223040}#skins button.active i{box-shadow:0 0 0 2px var(--enamel-solid),0 0 0 4px var(--bnl)}#skins button.locked i{opacity:.35;filter:grayscale(.6)}#skins button.locked{position:relative}#skins button.locked:after{content:"🔒";font-size:8px;position:absolute;bottom:-2px;right:-2px}#mode-hint{z-index:2;font:400 12px var(--mono);letter-spacing:.5px;color:#fff;text-shadow:0 1px 3px #0009;pointer-events:none;position:absolute;top:66px;left:16px}#hud-right{z-index:2;pointer-events:none;flex-direction:column;gap:8px;width:194px;display:flex;position:absolute;top:14px;right:14px}#minimap{outline:1px solid var(--rim);width:194px;height:130px;box-shadow:var(--shadow);border:3px solid #1b1f27;border-radius:5px;display:block}#goals{letter-spacing:1px;color:var(--muted);border-radius:5px;padding:9px 11px 10px;font-size:12px;font-weight:700}#place{font:400 12px var(--mono);letter-spacing:1.5px;color:var(--ink);border-bottom:1px dashed var(--line);white-space:nowrap;text-overflow:ellipsis;margin-bottom:7px;padding-bottom:6px;overflow:hidden}#place:empty{display:none}#goals .goal{grid-template-columns:1fr auto;align-items:center;gap:2px 6px;margin-bottom:6px;display:grid}#goals .goal:last-child{margin-bottom:0}#goals .goal span{font:400 11px var(--mono)}#goals .bar{background:var(--well);border-radius:1px;grid-column:1/3;height:6px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #0000001f}#goals .bar u{background:var(--c);position:absolute;top:0;bottom:0;left:0}#goals .bar em{background:var(--ink);width:2px;position:absolute;top:-1px;bottom:-1px;left:80%}#goals .done span{color:var(--green)}#goals .here b{color:var(--ink)}#goals .here b:before{content:"▸ ";color:var(--red)}#trial{z-index:3;background:var(--scan),var(--night);border:1px solid var(--night-line);color:var(--night-ink);font:400 13px var(--mono);letter-spacing:1px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:var(--shadow);border-radius:4px;padding:8px 14px;position:absolute;top:14px;left:50%;transform:translate(-50%)}#trial .best{color:var(--amber)}#gauges{z-index:2;pointer-events:none;border-radius:5px;align-items:center;gap:20px;padding:10px 20px;display:none;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.driving #gauges{display:flex}.gauge{align-items:center;gap:9px;display:flex}.gauge b{padding:4px 6px 3px;font-size:12px}.pips{gap:4px;display:flex}.pips i{background:#c9bc9c;border-radius:2px;width:13px;height:13px;box-shadow:inset 0 0 0 1.5px #8f8164}.pips i.on{background:var(--green);box-shadow:inset 0 0 0 1.5px #24653a,inset 0 -3px #0003}#compactor .pips i{border-radius:50%}#compactor .pips i.on{background:#b07a35;box-shadow:inset 0 0 0 1.5px #6e4a1c}#pack.full b{background:var(--red)}#pack.full .pips i.on{background:#e0892a;animation:.8s steps(2,start) infinite blink}@keyframes blink{50%{opacity:.45}}#boost i{background:#c9bc9c;border-radius:2px;width:120px;height:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px #8f8164}#boost u{width:calc(var(--k,1)*100%);background:repeating-linear-gradient(90deg,var(--bnl) 0 8px,#2a63bd 8px 10px);position:absolute;top:0;bottom:0;left:0}#boost.on u{background:var(--amber);box-shadow:0 0 6px var(--amber)}#boost.on b{background:#c8701a}#boost.empty u{background:var(--red)}#boost.empty b{background:#9e2a1e}#drive-controls{z-index:3;background:var(--scan),var(--night);border:1px solid var(--night-line);width:240px;color:var(--night-ink);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:5px;grid-template-columns:1fr 1fr;gap:7px 10px;padding:11px 13px 12px;display:grid;position:absolute;bottom:16px;left:14px}#drive-controls header{font:400 12px var(--mono);letter-spacing:2.5px;color:var(--amber);border-bottom:1px solid var(--night-line);grid-column:1/3;justify-content:space-between;align-items:center;padding-bottom:5px;display:flex}#drive-controls header button{color:var(--night-ink);background:#ffffff14;border:0;border-radius:3px;width:22px;height:22px;font-size:14px;line-height:1}#drive-controls>div{letter-spacing:.3px;color:var(--night-ink);white-space:nowrap;align-items:center;gap:7px;font-size:14px;font-weight:600;display:flex}#drive-controls kbd,.pill kbd{color:#141820;background:#e9e1cc;border-color:#9a917e;font-size:11px}.pill{z-index:3;border:1px solid var(--night-line);background:var(--night);color:var(--night-ink);letter-spacing:1px;text-transform:uppercase;opacity:.92;border-radius:4px;align-items:center;gap:6px;padding:5px 11px 5px 6px;font-size:13px;font-weight:700;display:flex;position:absolute;bottom:16px;left:14px}.pill:hover{opacity:1}footer{z-index:2;pointer-events:none;justify-content:center;display:flex;position:absolute;bottom:16px;left:0;right:0}.animation-buttons{background:var(--scan),var(--night);border:1px solid var(--night-line);pointer-events:auto;box-shadow:var(--shadow);border-radius:5px;flex-wrap:wrap;justify-content:center;gap:2px;padding:4px;display:flex}.animation-buttons button{letter-spacing:.6px;text-transform:uppercase;color:var(--night-muted);background:0 0;border:0;border-radius:3px;padding:7px 12px;font-size:14px;font-weight:600}.animation-buttons button:hover{color:var(--night-ink)}.animation-buttons button.selected{background:var(--bnl);color:#f3eedf}.driving footer{display:none}#touch-controls{z-index:3;pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:14px;left:12px;right:12px}#touch-controls>*{pointer-events:auto}.dpad{grid-template-columns:repeat(3,46px);gap:4px;display:grid}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}#touch-controls button{height:46px;color:var(--night-ink);touch-action:none;letter-spacing:.8px;text-transform:uppercase;background:#1b2029e6;border:1px solid #3d4554;border-bottom-width:3px;border-radius:5px;font-size:14px;font-weight:700}.touch-actions{flex-direction:column;gap:5px;display:flex}.touch-actions button{padding:0 18px}#touch-reset{height:28px!important;font-size:11px!important}#toast{z-index:4;background:var(--tape);max-width:calc(100% - 32px);color:var(--tape-ink);font:400 14px var(--mono);letter-spacing:1px;text-align:center;pointer-events:none;opacity:0;border-radius:3px;padding:8px 14px 7px;transition:opacity .3s,transform .3s;position:absolute;bottom:74px;left:50%;transform:translate(-50%,6px);box-shadow:0 2px #0004,0 6px 18px #0004}#toast.show{opacity:1;transform:translate(-50%)}#district{z-index:2;pointer-events:none;opacity:0;background:var(--scan),var(--night);border:1px solid var(--night-line);box-shadow:var(--shadow);border-radius:4px;align-items:stretch;gap:0;transition:opacity .5s,transform .5s;display:flex;position:absolute;top:17%;left:50%;overflow:hidden;transform:translate(-50%,-8px)}#district.show{opacity:1;transform:translate(-50%)}#district .seal{background:var(--red);color:#fff3e4;min-width:58px;font:400 30px/1 var(--kana);box-shadow:inset -3px 0 0 var(--accent,#fff);justify-content:center;align-items:center;padding:0 10px;font-style:normal;display:flex}#district .seal:empty{display:none}#district>div{text-align:left;padding:10px 20px 9px}#district b{font:700 26px/1.05 var(--ui);letter-spacing:4px;text-transform:uppercase;color:var(--night-ink);white-space:nowrap;display:block}#district span{font:400 12px var(--mono);letter-spacing:1.5px;color:var(--night-muted);text-transform:uppercase;margin-top:5px;display:block}#district.spotless b{color:var(--amber)}#district.spotless span{color:var(--night-ink)}#floaters{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.floater{font:700 18px var(--ui);letter-spacing:1px;white-space:nowrap;color:#fff;text-shadow:0 1px #141820,0 2px 6px #14182099;will-change:transform,opacity;position:absolute;top:0;left:0}.floater.litter{color:#ffd27a}.floater.pile{color:#b9f3c9}.floater.sleep{color:#dfe9ff;text-shadow:0 1px 6px #1a2a4acc;font-size:22px;font-style:italic}.floater.pack{color:var(--tape-ink);font:400 12px var(--mono);letter-spacing:2px;background:var(--tape);text-shadow:none;border-radius:2px;padding:4px 7px 3px;box-shadow:0 2px #0004}#shelf{z-index:6;width:min(460px,100% - 32px);max-height:calc(100% - 40px);color:var(--ink);border-radius:5px;padding:16px 16px 14px;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 10px 40px #10141a77,inset 0 1px #fffaf0}#shelf[hidden]{display:none}#shelf header{border-bottom:1px dashed var(--line);align-items:baseline;gap:10px;margin-bottom:12px;padding-bottom:9px;display:flex}#shelf header b{font:400 20px var(--stencil);letter-spacing:1.5px}#shelf header span{color:var(--muted);flex:1;font-size:13px}#shelf-close{background:var(--well);color:var(--ink);border:0;border-radius:3px;width:24px;height:24px;font-size:15px;line-height:1}#shelf-items{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.find{background:var(--well);text-align:center;border-radius:3px;flex-direction:column;align-items:center;gap:4px;padding:9px 6px 8px;display:flex;box-shadow:inset 0 1px 2px #0000001a}.find img,.find .unknown{background:#d4c8ad;border-radius:3px;width:72px;height:72px}.find .unknown{font:400 30px var(--stencil);color:#a99d80;justify-content:center;align-items:center;display:flex}.find b{letter-spacing:.3px;font-size:14px}.find span{color:var(--muted);font-size:12px}#loading{z-index:10;background:var(--scan),radial-gradient(ellipse at 50% 45%,#232a35,#101318 70%);flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .8s;display:flex;position:absolute;inset:0}.loading-mark{align-items:flex-start;gap:10px;display:flex}.loading-logo{font:400 72px/.9 var(--stencil);letter-spacing:4px;color:var(--night-ink)}.loading-kana{writing-mode:vertical-rl;font:400 17px/1 var(--kana);color:var(--red);padding-top:4px}.loading-bar{background:#2a303a;width:180px;height:3px;display:block;overflow:hidden}.loading-bar u{background:var(--amber);width:40%;height:100%;animation:1.2s ease-in-out infinite loading;display:block}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(250%)}}#loading-text{font:400 12px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--night-muted)}#curtain{z-index:9;opacity:0;pointer-events:none;background:#000;transition:opacity .55s;position:absolute;inset:0}#curtain.down{opacity:1}#title{z-index:8;cursor:pointer;background:linear-gradient(90deg,#0b0e14b8,#0b0e1455 38%,#0000 60%),linear-gradient(#0000 65%,#0b0e14aa);align-items:flex-end;padding:0 0 11vh 7vw;transition:opacity 1s;display:flex;position:absolute;inset:0}#title.leaving{opacity:0;pointer-events:none}.title-card{color:var(--night-ink);flex-direction:column;align-items:flex-start;gap:6px;animation:1.6s cubic-bezier(.2,.7,.2,1) .3s both title-in;display:flex}@keyframes title-in{0%{opacity:0;transform:translateY(16px)}}.title-kicker{font:400 13px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--amber)}.title-mark{align-items:flex-start;gap:14px;display:flex}.title-mark h1{font:400 clamp(96px,15vw,190px)/.82 var(--stencil);letter-spacing:.04em;color:#f4ecd8;text-shadow:0 4px 30px #0008;margin:0}.title-kana{writing-mode:vertical-rl;font:400 clamp(22px,2.8vw,34px)/1 var(--kana);color:#f4ecd8;text-shadow:0 2px 16px #0008;padding-top:.3em}.title-seal{writing-mode:vertical-rl;font:400 clamp(15px,1.7vw,20px)/1.05 var(--kana);color:#fff3e4;background:var(--red);border-radius:3px;align-self:flex-end;margin-bottom:.6em;padding:7px 5px;font-style:normal;transform:rotate(4deg);box-shadow:0 2px 10px #0006}.title-sub{font:600 clamp(18px,2vw,24px)/1.2 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:#d9d0bb;margin:4px 0 0}.title-start{color:var(--night-ink);font:400 13px var(--mono);letter-spacing:2.5px;text-transform:uppercase;background:#0b0e1466;border:1px solid #f4ecd855;border-radius:3px;margin-top:26px;padding:9px 18px 8px;animation:2.4s ease-in-out infinite pulse}.title-start:hover{border-color:var(--amber);color:var(--amber)}.title-start .tap-hint{display:none}@media (pointer:coarse){.title-start .key-hint{display:none}.title-start .tap-hint{display:inline}}@keyframes pulse{50%{opacity:.55}}@media (width<=700px){.panel{gap:5px;padding:5px 6px;top:10px;left:10px}.wordmark{display:none}.chip,.icon-button{height:28px}.icon-button{width:28px}.chip{padding:0 8px}.mode-switch button{padding:5px 8px;font-size:12px}#menu{width:min(260px,100vw - 20px);left:-6px;right:auto}#hud-right{width:124px;top:10px;right:10px}#minimap{width:124px;height:84px}#goals{padding:7px 9px;font-size:10px}#goals .goal span{font-size:9px}#place{font-size:10px}#mode-hint{display:none}.animation-buttons button{padding:5px 7px;font-size:12px}#district{max-width:calc(100% - 32px);top:30%}#district b{letter-spacing:2px;font-size:18px}#district span{letter-spacing:1px;white-space:normal;font-size:10px}#district .seal{min-width:44px;font-size:22px}#district>div{padding:8px 12px}#trial{font-size:11px;top:58px}#gauges{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 11px;top:58px;bottom:auto;left:10px;transform:none}#boost i{width:72px;height:10px}.pips i{width:10px;height:10px}#toast{bottom:170px}#shelf-items{grid-template-columns:repeat(2,1fr)}#title{background:linear-gradient(#0000 30%,#0b0e1466 55%,#0b0e14dd);justify-content:center;align-items:flex-end;padding:0 16px 9vh}.title-card{text-align:center;align-items:center}.title-kicker{letter-spacing:1.4px;white-space:nowrap;font-size:9px}}#cinema{z-index:5;pointer-events:none;position:absolute;inset:0;overflow:hidden}#cinema .bar{background:#000;height:11.5vh;transition:transform 1.1s cubic-bezier(.4,0,.2,1);position:absolute;left:0;right:0}#cinema .bar.top{top:0;transform:translateY(-100%)}#cinema .bar.bottom{bottom:0;transform:translateY(100%)}#cinema.on .bar{transform:none}#cinema .vignette{opacity:0;background:radial-gradient(#0000 55%,#0000088c 100%);transition:opacity 1.2s;position:absolute;inset:0}#cinema.on .vignette{opacity:1}#cinema .fade{opacity:0;background:#000;position:absolute;inset:0}#cinema .caption{text-align:center;color:#f3ead8;letter-spacing:.06em;text-shadow:0 2px 14px #000c;opacity:0;margin:0;padding:0 16px;font:italic 400 clamp(15px,2.2vw,22px)/1.3 Georgia,Times New Roman,serif;position:absolute;bottom:calc(11.5vh + 18px);left:0;right:0}#cinema .skip{color:#ffffff70;font:400 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity 1s 2s;position:absolute;bottom:calc(11.5vh - 26px);right:18px}#cinema.on .skip{opacity:1}:is(.cinema,.titling) :is(.panel,#hud-right,#trial,#gauges,#mode-hint,#drive-controls,#controls-pill,#touch-controls,#floaters,#district,#toast,footer){transition:opacity .6s;opacity:0!important;pointer-events:none!important}.panel,#hud-right,#gauges,#drive-controls,#controls-pill,footer{transition:opacity .8s}
