@font-face{font-family:Inter;src:url(../portal/inter.ttf)}@font-face{font-family:Mono;src:url(../portal/mono.ttf)}
:root{font-family:Inter,Arial,sans-serif;color:#f5f6f3;background:#151c1e;font-synthesis:none;--mint:#97d8bd;--red:#ed9b88;--line:#ffffff24}*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,input,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}[hidden]{display:none!important}#world{position:fixed;inset:0;z-index:0}#world canvas{width:100%;height:100%;display:block;touch-action:none}header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:#10181999}.wordmark{text-decoration:none;font-size:16px;font-weight:650}.wordmark span{color:#c5ac77;margin-left:5px}.edition{font:11px Mono,monospace;color:#e5f0ed}.edition b{font-weight:400;opacity:.6;margin-left:8px}.icon-button{border:1px solid var(--line);color:white;background:#152025a8;width:40px;height:40px;border-radius:4px;font-size:22px;display:grid;place-items:center}.icon-button.active{color:var(--mint);border-color:var(--mint)}main{position:relative;z-index:1;pointer-events:none}main button,main a,main input,main summary,.console,.lobby-actions{pointer-events:auto}.lobby{min-height:calc(100svh - 80px);display:flex;flex-direction:column;justify-content:space-between;padding:24px}.title{text-shadow:0 2px 14px #16232b}.eyebrow{font:10px Mono,monospace;color:var(--mint);margin:0 0 10px}.title h1{font-size:48px;margin:0;font-weight:550;line-height:1.1}.subtitle{font-size:14px;margin-top:12px}.lobby-actions{align-self:flex-start;width:min(100%,340px);background:#152025eb;padding:20px;border-top:2px solid var(--mint)}.primary,.secondary{min-height:46px;padding:12px 18px;border-radius:4px;font-size:14px;font-weight:600}.primary{background:var(--mint);color:#10211b;border:0;width:100%}.secondary{background:transparent;border:1px solid var(--line);color:white}.primary:disabled{opacity:.55;cursor:wait}.small{font-size:11px;color:#becacb;line-height:1.6}.notes{font-size:11px;color:#becacb;border-top:1px solid var(--line);padding-top:12px;line-height:1.6}.notes summary{cursor:pointer}#lobby-status{font-size:12px;color:#d5e1dd}#qr{background:white;width:180px;height:180px;margin:12px auto;padding:10px}#qr img,#qr canvas{width:160px;height:160px}#share{width:100%;margin:6px 0}#invite-link{display:block;text-align:center}.journey{display:flex;justify-content:space-between;align-items:center;padding:18px 24px 10px;background:#10181965}.journey h1{font-size:16px;margin:0;font-weight:550}.route-bar{height:3px;background:#ffffff25;margin:0 24px}#progress{height:100%;background:var(--mint);width:0}.view-readout{display:flex;justify-content:space-between;padding:12px 24px;font:10px Mono,monospace;text-shadow:0 1px 5px #000}.console{margin-top:clamp(160px,28svh,300px);padding:20px 24px 24px;background:#151c1ef5;border-top:1px solid var(--line);padding-bottom:max(24px,env(safe-area-inset-bottom))}.instruments{display:grid;grid-template-columns:1fr 1fr .8fr;gap:16px;align-items:start}.instrument>span{display:block;font:9px Mono,monospace;color:#9fbbb8;margin-bottom:7px}.instrument strong{font:36px Mono,monospace;font-weight:400}.instrument small{font:10px Mono,monospace;color:#bfcdcd;margin-left:4px}.instrument.water{display:grid;grid-template-columns:30px 1fr;gap:0 4px}.instrument.water>span{grid-column:1/-1}.waterglass{width:24px;height:42px;border:1px solid #90a7b2;position:relative;background:#0a121a;border-radius:3px;overflow:hidden}.waterglass i:first-child{position:absolute;bottom:0;width:100%;height:72%;background:#78bcd5}.safe-line{position:absolute;bottom:36%;width:100%;border-top:1px solid #fff}.water small{align-self:end;margin:0;font-size:11px}#message{font-size:12px;color:#d0ddda;min-height:16px;margin:14px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}.control{display:block;margin:14px 0}.control>span{display:flex;justify-content:space-between;font-size:12px}.control output{font:11px Mono,monospace;color:var(--mint)}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:34px;background:transparent;touch-action:pan-y;margin:2px 0}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#456261;border-radius:2px}input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:26px;background:var(--mint);border:4px solid #203430;border-radius:50%;margin-top:-11px}input[type=range]::-moz-range-track{height:4px;background:#456261}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--mint);border:0;border-radius:50%}.brake output{color:var(--red)}.brake input::-webkit-slider-thumb{background:var(--red)}.water-feed output{color:#88c3e2}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.switch-row label,.door-switch{display:flex;gap:10px;align-items:center;font-size:12px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--mint)}.fire-top{display:flex;justify-content:space-between;align-items:center;font:11px Mono,monospace;color:#c5d4d1}.firebox{height:108px;margin:8px 0 14px;position:relative;background:#140b0b;border:6px solid #363839;overflow:hidden;border-radius:4px}.embers{height:100%;display:flex;align-items:end;gap:2px;padding:6px;filter:saturate(.9)}.ember-zone{flex:1;background:radial-gradient(ellipse at bottom,#ffe078 0,#e3552c 34%,#782115 65%,#251719 94%);position:relative;min-height:25px;border-radius:35% 35% 0 0;animation:flicker 1.2s infinite alternate}.ember-zone:nth-child(2){animation-delay:-.7s}.ember-zone:nth-child(3){animation-delay:-.3s}@keyframes flicker{from{filter:brightness(.75)}to{filter:brightness(1.2)}}.fire-door{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#303335 0 18px,#242628 19px 20px);z-index:2;transition:transform .3s;pointer-events:none}.firebox.open .fire-door{transform:translateY(-110%)}.fire-actions{position:absolute;inset:0;display:flex;gap:2px;z-index:3;padding:4px}.fire-actions button{flex:1;background:transparent;border:0;color:#fff;font-size:11px;text-shadow:0 1px 4px #000;align-self:end;min-height:40px}.fire-actions button:disabled{color:#ffffff66}.fire-actions button:active{background:#ffffff24}#result h2{font-size:22px;font-weight:500}#result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;font:18px Mono,monospace}#result-stats small{display:block;font:10px Inter,sans-serif;color:#a5b9b3;margin-top:6px}#toast{position:fixed;bottom:20px;left:20px;right:20px;padding:16px;background:#622d28;color:white;z-index:5;font-size:13px;border-radius:4px}
@media(min-width:850px){.lobby{padding:42px;min-height:calc(100svh - 80px)}.title h1{font-size:64px}.console{position:absolute;top:120px;right:28px;width:360px;margin:0;border:1px solid var(--line);border-radius:6px}.journey{max-width:540px;background:transparent}.route-bar{max-width:490px}.view-readout{max-width:540px}.lobby-actions{width:320px}}
@media(max-height:500px) and (max-width:849px){header{padding:8px 16px}.console{width:45%;margin:0 0 0 auto;padding:12px 16px}.journey{width:55%;position:absolute;top:0;padding:12px 16px}.route-bar,.view-readout{position:absolute;top:75px;width:48%}.view-readout{top:84px;padding:8px 0}.instruments{gap:8px}.instrument strong{font-size:26px}.control{margin:8px 0}.lobby{padding:16px;min-height:calc(100svh - 56px);flex-direction:row;gap:20px;align-items:end}.title h1{font-size:36px}.lobby-actions{width:270px;padding:12px}#qr{width:120px;height:120px;margin:4px auto;padding:5px}#qr img,#qr canvas{width:110px;height:110px}.notes{display:none}}
@media(prefers-reduced-motion:reduce){.ember-zone{animation:none}.fire-door{transition:none}}
@media(max-width:849px) and (min-height:501px){#world{bottom:auto;height:55svh}#world canvas{height:100%!important}.lobby{background:linear-gradient(0deg,#151c1e 20%,transparent 55%)}.title h1{font-size:42px}}
.choices{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.choices legend{font:10px Mono,monospace;color:#9fbbb8;margin-bottom:8px}.choices label{position:relative;cursor:pointer}.choices input{position:absolute;opacity:0}.choices span{display:block;text-align:center;border:1px solid var(--line);padding:10px 4px;border-radius:4px;font-size:12px}.choices input:checked+span{background:#97d8bd22;color:var(--mint);border-color:var(--mint)}.choices input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}.journey-tools{display:flex;gap:6px}.view-readout{flex-wrap:wrap;gap:5px}

/* 1.2: the opening film - black, centred, fades into the game */
.intro{position:fixed;inset:0;z-index:20;background:#000;display:grid;place-items:center;transition:opacity .6s ease}
.intro.out{opacity:0;pointer-events:none}
.intro video{width:100%;height:100%;object-fit:contain;background:#000}
.intro-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border:0;background:#000;color:#d9d4c8;font:12px Mono,monospace;letter-spacing:.28em;text-transform:uppercase;cursor:pointer}
.intro-start span:last-child{animation:introPulse 2.2s ease-in-out infinite}
.intro-mark{width:18px;height:18px;transform:rotate(45deg);border:1.5px solid #a88a5a}
.intro-skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));border:1px solid #ffffff33;background:#00000080;color:#e8e4da;font:11px Mono,monospace;letter-spacing:.12em;padding:10px 14px;border-radius:4px;cursor:pointer}
@keyframes introPulse{0%,100%{opacity:.45}50%{opacity:1}}
body.intro-on{overflow:hidden}

/* ---- 2.0: the line, the clock, roles, the result and the top list ---- */
.route-bar{position:relative;height:4px;overflow:visible}
.route-bar .mark{position:absolute;top:-4px;width:2px;height:12px;background:#e9e2cf;transform:translateX(-1px)}
.route-bar .mark::after{position:absolute;top:13px;left:50%;transform:translateX(-50%);font:8px Mono,monospace;color:#cfd9d5;white-space:nowrap;text-shadow:0 1px 3px #000}
.route-bar .mark.water::after{content:'VATTEN'}.route-bar .mark.water.done{background:var(--mint)}
.route-bar .mark.signal::after{content:'SIGNAL'}.route-bar .mark.stop{background:#f2c94c;width:3px}.route-bar .mark.stop::after{content:'ÄNGSBY';color:#f2c94c}
#train-dot{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #10181999;transform:translateX(-6px);transition:left .3s linear}
.view-readout{gap:12px;padding-top:22px}#clock{font-size:13px;color:#fff}
.road{position:relative;margin:0 0 14px;padding:12px 14px;border-left:3px solid #f2c94c;background:#0f1618}
.road p{margin:4px 0 0;font-size:14px;line-height:1.4}.road .eyebrow{color:#f2c94c;margin:0}
.road-sign{color:#ffd6a0;font-weight:600}
.signal-lamp{position:absolute;right:12px;top:10px;font:10px Mono,monospace;padding:6px 8px;border-radius:3px;display:flex;align-items:center;gap:6px}
.signal-lamp::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.signal-lamp.red{color:#ff6b57;background:#2a1110}.signal-lamp.green{color:#7be09a;background:#0f2416}
.call{margin:0 0 14px;padding:12px 14px;background:#2b2110;border-left:3px solid #f2c94c;animation:callIn .25s ease-out}
.call p{margin:4px 0 0;font:600 16px Inter,sans-serif}.call .eyebrow{color:#f2c94c;margin:0}
.call.brake{background:#2e1513;border-color:var(--red)}.call.brake .eyebrow{color:var(--red)}
.call.release{background:#0f2419;border-color:var(--mint)}
@keyframes callIn{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.reverser .scale{display:flex;justify-content:space-between;font:9px Mono,monospace;color:#8ea6a2;margin-top:-4px}
.brake-state{font-size:12px;color:#c5d4d1;margin:4px 0 10px}.brake-state b{font-weight:600;color:var(--mint)}.brake-state b.on{color:var(--red)}
.whistle{min-width:120px;user-select:none;-webkit-user-select:none;touch-action:none}.whistle:active{background:#f2c94c;color:#1b1607;border-color:#f2c94c}
.codes{margin:6px 0 0}
.slope{font:10px Mono,monospace;color:#f2c94c}
.waterglass i:first-child.low{background:#e38b6f}
.result-time{font:44px Mono,monospace;margin:4px 0 16px;color:#fff}
#result-stats{grid-template-columns:repeat(4,1fr);font-size:14px}
.submit-score{margin:4px 0 14px}.submit-score label{display:block;font-size:12px;color:#c5d4d1;margin-bottom:6px}
.submit-score div{display:flex;gap:8px}.submit-score input{flex:1;min-width:0;height:46px;border-radius:4px;border:1px solid var(--line);background:#0d1416;color:#fff;padding:0 12px;font:15px Inter,sans-serif}
.board{list-style:none;padding:0;margin:0 0 16px;border-top:1px solid var(--line)}
.board li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.board li span{font:11px Mono,monospace;color:#8ea6a2}.board li em{font:13px Mono,monospace;font-style:normal}
.board li.me{color:#f2c94c}.board li.empty{display:block;color:#8ea6a2}
.small-board li{grid-template-columns:1fr auto auto}.small-board li small{font-size:10px;color:#8ea6a2}
.guide-link{display:block;margin:14px 0 4px;padding:12px 14px;border:1px solid #c5ac7766;background:linear-gradient(135deg,#2a2418,#1a1712);text-decoration:none;font-size:13px;color:#efe6cf;line-height:1.5}
.guide-link span{display:block;font:10px Mono,monospace;letter-spacing:.2em;color:#c5ac77}
@media (max-width:420px){#result-stats{grid-template-columns:repeat(2,1fr)}.result-time{font-size:36px}}

/* 2.1: the voice line */
.talk .slash{display:none}.talk.muted .slash{display:block}.talk.on{color:var(--mint);border-color:var(--mint)}.talk.muted{color:var(--red);border-color:var(--red)}
.talk.live.on{box-shadow:0 0 0 1px var(--mint) inset}.talk.talking{box-shadow:0 0 0 3px #97d8bd88,0 0 18px #97d8bd88;transition:box-shadow .1s}
.voice-line{margin:-4px 24px 0;font:10px Mono,monospace;color:#d8e6e2;text-shadow:0 1px 5px #000}.voice-line.invite{color:#c5ac77}

/* First-person views need a little more clear forward view on a phone. */
@media(max-width:849px) and (min-height:501px){header{padding:12px 18px}.journey{padding:10px 16px 8px}.journey h1{font-size:14px}.journey .eyebrow{margin-bottom:6px}.route-bar{margin-inline:16px}.view-readout{padding:17px 16px 7px}}