:root{color-scheme:dark;--ink:#f5ead7;--faint:#c2c8bd;--accent:#e9b96a;--panel:rgba(20,30,29,.82)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:'Trebuchet MS',sans-serif;color:var(--ink);background:#bcc5bf}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,#world:focus-visible{outline:2px solid var(--accent);outline-offset:4px}#world{position:absolute;inset:0;outline:none}#world canvas{display:block;width:100%;height:100%}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px 48px;background:linear-gradient(#0d20294d,transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:12px;text-shadow:0 1px 8px #15222544}.mark{font-family:Georgia,serif;font-size:45px;line-height:1;border-right:1px solid #fff4;padding-right:16px}.brand h1{margin:0 0 5px;font-size:17px;letter-spacing:.23em;font-weight:500}.brand div>span{font-size:10px;letter-spacing:.2em;text-transform:uppercase}nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;pointer-events:auto}nav button{padding:10px 12px;border:1px solid #ffffff24;background:rgba(24,35,33,.54);border-radius:5px;font-size:12px;backdrop-filter:blur(16px);transition:background .2s}nav button:hover{background:#263c36e8}kbd{display:inline-block;font:11px 'Trebuchet MS',sans-serif;min-width:18px;text-align:center;padding:3px 4px;border:1px solid #e0e4ce44;border-radius:3px;background:#ffffff09;color:#fff}nav kbd{margin-left:9px}.location{position:absolute;top:113px;left:34px;font-size:11px;letter-spacing:.12em;display:flex;align-items:center;gap:10px;text-shadow:0 1px 3px #17271a}.sun{font-size:22px;color:#f5cb88}.muted{margin:0 7px;opacity:.6}.map-panel{position:absolute;bottom:81px;left:30px;width:174px;padding:9px;background:var(--panel);border:1px solid #ffffff19;border-radius:8px;box-shadow:0 10px 35px #10202028;backdrop-filter:blur(14px)}#map{width:154px;height:154px;display:block}.map-panel>div{display:flex;justify-content:space-between;padding:9px 3px 1px;font-size:9px;letter-spacing:.09em;color:#e6ddc9}.instruments{position:absolute;right:32px;bottom:80px;width:210px;background:var(--panel);border:1px solid #ffffff20;border-radius:8px;padding:20px 20px 13px;backdrop-filter:blur(14px);box-shadow:0 10px 40px #16262122}.speed{display:flex;align-items:baseline;justify-content:flex-end;gap:9px}.speed strong{font-size:60px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.045em;line-height:1}.speed span{font-size:12px;color:#b9c4b6}.gear{position:absolute;top:24px;left:22px;display:flex;flex-direction:column;gap:2px}.gear small{font-size:8px;letter-spacing:.15em;color:#adbcae}.gear strong{font-family:Georgia,serif;font-size:28px;font-weight:400;color:var(--accent)}.tach{position:relative;height:5px;margin:22px 0 4px;background:#a8b2a344;border-radius:1px}.tach>div{position:relative;height:100%;width:0;background:var(--accent);transition:width .1s}.tach>b{position:absolute;top:0;bottom:0;background:#d4533a8c}.tach>i{position:absolute;top:-3px;bottom:0;width:1px;margin-left:-.5px;background:#eef0e270}.tach-scale{position:relative;height:12px;font-size:8px;color:#b8c0b4;font-variant-numeric:tabular-nums}.tach-scale span{position:absolute;top:0;transform:translateX(-50%)}.tach-scale span:first-child{transform:none}.tach-scale span:last-child{transform:translateX(-100%)}.dial-labels{display:flex;justify-content:space-between;align-items:baseline;font-size:8px;letter-spacing:.13em;color:#b8c0b4}.dial-labels b{font-weight:400;font-size:12px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}.help{position:absolute;bottom:0;width:100%;padding:23px 24px 20px;display:flex;gap:26px;justify-content:center;background:linear-gradient(transparent,#17282477);font-size:11px;color:#edf0db}.help span{display:flex;align-items:center;gap:5px}.help kbd:last-of-type{margin-right:6px}#notice{position:absolute;top:120px;left:50%;transform:translateX(-50%);background:#20332cec;padding:12px 20px;border:1px solid #fff2;border-radius:5px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}#notice.visible{opacity:1}#loading{position:absolute;inset:0;background:#162a29;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .7s}#loading.hide{opacity:0;pointer-events:none}.load-mark{font:100px Georgia,serif;color:#eac992}#loading h2{font-size:18px;font-weight:400;letter-spacing:.08em;margin:25px 0 6px}#loading p{font-size:13px;color:#a8bbb1}.load-track{width:220px;height:2px;background:#ffffff16;margin-top:18px}.load-track i{display:block;height:100%;width:12%;background:var(--accent);transition:width .3s}.touch{display:none}body.photo .topbar,body.photo .location,body.photo .map-panel,body.photo .instruments,body.photo .help{opacity:0}@media(max-width:760px){.topbar{padding:18px 16px;gap:8px;align-items:flex-start}.brand{gap:7px}.brand h1{font-size:13px;letter-spacing:.13em}.brand div>span{font-size:8px}.mark{font-size:33px;padding-right:10px}nav{flex-wrap:wrap;justify-content:flex-end;max-width:215px}nav button{padding:9px 8px;font-size:10px}nav kbd{display:none}.location{top:107px;left:18px;font-size:9px}.map-panel{left:16px;bottom:116px;width:121px;padding:5px}#map{width:109px;height:109px}.map-panel>div{font-size:7px}.instruments{width:163px;right:16px;bottom:116px;padding:18px 14px 10px}.speed strong{font-size:45px}.gear{left:16px;top:20px}.gear strong{font-size:22px}.tach{margin-top:18px}.help{display:none}.touch{display:flex;position:absolute;bottom:24px;left:16px;right:16px;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:8px}.touch button{pointer-events:auto;touch-action:none;width:60px;height:62px;background:#20332acc;border:1px solid #e4e5bc55;border-radius:9px;font-size:15px;user-select:none}.touch button[data-key=w]{background:#d9b16c;color:#1c3026}.touch button:active{filter:brightness(1.3)}}@media(max-width:400px){.touch>div{gap:6px}.touch button{width:54px;font-size:13px}}

#crash-comment{position:absolute;z-index:2;left:50%;top:22%;width:min(540px,calc(100% - 36px));padding:19px 24px 17px;transform:translate(-50%,12px) rotate(-1deg);background:#f7edd4;color:#233630;border:1px solid #d9cba9;border-top:4px solid #b26037;border-radius:3px;box-shadow:0 12px 35px #10202040;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s}
#crash-comment.visible{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(-1deg);animation:crash-pop .38s ease-out}
.crash-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#815333}
#crash-detail{font-size:9px;letter-spacing:.025em;text-align:right;white-space:nowrap}
#crash-line{margin:12px 0 14px;font:italic 27px/1.12 Georgia,serif;letter-spacing:-.02em}
#crash-comment small{font-size:10px;color:#647064}
#crash-comment kbd{font-size:9px;color:#324638;background:#2336300b;border-color:#23363033;padding:2px 4px}
#crash-comment[data-severity="3"]{border-top-color:#ad3229;background:#fff0d3}
@keyframes crash-pop{0%{transform:translate(-50%,-12px) rotate(2deg) scale(.95)}55%{transform:translate(-50%,2px) rotate(-2deg) scale(1.02)}100%{transform:translate(-50%,0) rotate(-1deg) scale(1)}}
@media(max-width:760px){#crash-comment{top:24%;padding:16px 18px}.crash-top{gap:8px;font-size:8px;letter-spacing:.07em}#crash-line{font-size:24px}#crash-detail{font-size:8px}#crash-comment small{font-size:9px}}
@media(prefers-reduced-motion:reduce){#crash-comment,#crash-comment.visible{animation:none;transition:opacity .15s;transform:translateX(-50%)}}

/* The neighbourhood challenge: HUD, level card, speeder warning, victory postcard and defeat card. */
@font-face{font-family:Lobster;src:url(assets/fonts/lobster-latin.woff2) format('woff2');font-display:swap}
.challenge{position:absolute;top:100px;right:32px;width:210px;padding:14px 18px 11px;background:var(--panel);border:1px solid #ffffff20;border-radius:8px;backdrop-filter:blur(14px);box-shadow:0 10px 40px #16262122;display:none}
body[data-game=running] .challenge,body[data-game=won] .challenge,body[data-game=lost] .challenge{display:block}
.ch-top,.ch-acc{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#adbcae}
#ch-flag{color:var(--accent);white-space:nowrap}
#ch-time{display:block;margin:7px 0 9px;font:400 46px/1 Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ch-acc b{font:400 18px Georgia,serif;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.ch-pips{display:flex;gap:4px;margin:8px 0 8px}
.ch-pips i{flex:1;height:5px;border-radius:3px;background:#a8b2a338;transition:background .3s}
.ch-pips i.hit{background:#d4683f}
.challenge small{display:block;font-size:9px;letter-spacing:.04em;color:#9fae9f}
.challenge.danger{border-color:#e0674f70}
.challenge.danger .ch-pips i:not(.hit){background:#e0674f55}
.challenge.final #ch-time{color:var(--accent);animation:final-second 1s ease-out infinite}
.challenge.bump{animation:accident-bump .6s ease-out}
@keyframes final-second{0%{transform:scale(1.07)}40%,100%{transform:scale(1)}}
@keyframes accident-bump{0%{transform:scale(1)}25%{transform:scale(1.05);background:#6d2a20ee}100%{transform:scale(1)}}

.pirate-alert{position:absolute;z-index:3;left:50%;top:84px;padding:9px 16px;transform:translate(-50%,-8px);background:#b3241ceb;color:#fff4e6;border-radius:5px;font-size:13px;letter-spacing:.03em;box-shadow:0 8px 24px #50100c55;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;white-space:nowrap}
.pirate-alert b{margin-right:7px;letter-spacing:.14em;text-transform:uppercase}
.pirate-alert.visible{opacity:1;visibility:visible;transform:translate(-50%,0);animation:alert-pulse .7s ease-in-out infinite alternate}
@keyframes alert-pulse{to{background:#d8392cf2;box-shadow:0 8px 30px #b3241c88}}

.level-card{position:absolute;z-index:2;left:50%;top:15%;width:min(660px,calc(100% - 32px));padding:19px 24px 15px;transform:translateX(-50%) rotate(-.6deg);background:#f7edd4;color:#233630;border:1px solid #d9cba9;border-top:4px solid #0f7a45;border-radius:3px;box-shadow:0 14px 40px #10202044;display:none}
body[data-game=ready] .level-card{display:block;animation:card-in .45s ease-out}
body.exploring .level-card{display:none}
@keyframes card-in{from{opacity:0;transform:translate(-50%,14px) rotate(1deg)}}
.lc-kicker{margin:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#815333}
.level-card h2{margin:6px 0 7px;font:italic 400 27px/1.12 Georgia,serif;letter-spacing:-.015em}
.lc-text{margin:0 0 14px;font-size:13px;line-height:1.45;color:#3d4f47}
.lc-text b{font-style:italic}
.lc-red{color:#b3241c;font-weight:bold}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.levels button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 12px 11px;text-align:left;background:#fffaf0;border:1px solid #d9cba9;border-radius:4px;color:#233630;transition:border-color .15s,transform .15s,background .15s}
.levels button:hover{border-color:#b26037;transform:translateY(-1px)}
.levels button[aria-pressed=true]{background:#233630;border-color:#233630;color:#f7edd4}
.level-card kbd{color:inherit;background:transparent;border-color:currentColor;opacity:.55}
.levels kbd{position:absolute;top:10px;right:10px}
.levels strong{font:400 22px/1.1 Lobster,Georgia,serif}
.levels em{font:italic 12.5px Georgia,serif;opacity:.8}
.levels span{margin-top:4px;font-size:10.5px;line-height:1.35;opacity:.85}
.lc-go{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 0;font-size:11px;color:#5d695f}
.lc-free{padding:4px 2px;background:none;color:#233630;font-size:11px;text-decoration:underline;text-underline-offset:3px}

.victory,.defeat{position:absolute;inset:0;z-index:5;display:none;overflow-y:auto;padding:28px 16px}
.victory{background:#4a2c18}
.victory.show,.defeat.show{display:flex}
.victory.show{animation:fade-in .6s ease-out}
.v-backdrop{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.victory::before{content:'';position:fixed;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 45%,#3a1d0c30,#2a1206c4 80%)}
#confetti{position:fixed;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
@keyframes fade-in{from{opacity:0}}
.postcard{position:relative;z-index:2;margin:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);width:min(1080px,100%);padding:14px;background:radial-gradient(circle at 18% 8%,#fffaf0,#f5e9ce);color:#2a3a33;border-radius:4px;box-shadow:0 34px 90px #1a0b0490,0 1px 0 #fff inset;transform:rotate(-1.2deg);animation:postcard-in 1s cubic-bezier(.2,1.3,.35,1) both}
@keyframes postcard-in{from{opacity:0;transform:translateY(60px) rotate(-7deg) scale(.9)}}
.pc-art{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#e7cfa0;box-shadow:0 0 0 1px #0000001a}
.pc-art img{display:block;width:100%;height:100%;min-height:100%;aspect-ratio:4/3;object-fit:cover}
.pc-approved{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border:3px double #b8231d;border-radius:50%;background:#fff4dcd0;color:#b8231d;font:bold 9px 'Trebuchet MS',sans-serif;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 0 5px #fff4dc66;transform:rotate(-14deg);animation:stamp-in .5s 1s cubic-bezier(.3,1.6,.5,1) both}
.pc-approved b{margin:3px 0 2px;font-size:17px;letter-spacing:.1em}
@keyframes stamp-in{from{opacity:0;transform:rotate(-14deg) scale(2.4)}}
.pc-note{position:relative;display:flex;flex-direction:column;margin-left:14px;padding:20px 26px 16px 28px;border-left:1px dashed #c9b690}
.pc-post{position:absolute;top:14px;right:14px;display:flex;align-items:center}
.pc-stamp{display:flex;flex-direction:column;width:56px;padding:4px 4px 3px;background:#fff;border:3px dotted #f5e9ce;outline:1px solid #e3d3b0;transform:rotate(4deg);box-shadow:1px 2px 4px #0000001f}
.pc-stamp i{height:40px;background:linear-gradient(90deg,#0f7a45 33.3%,#f7f1e3 0 66.6%,#c8313b 0)}
.pc-stamp b{margin-top:3px;font:bold 9px Georgia,serif;text-align:center;color:#6b4a2d}
.pc-postmark{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;margin-right:-24px;order:-1;border:2px solid #2a3a3370;border-radius:50%;color:#2a3a3399;font:bold 7.5px 'Trebuchet MS',sans-serif;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-16deg);position:relative;z-index:1}
.pc-postmark em{margin-top:3px;font:italic 9px Georgia,serif;letter-spacing:.04em;text-transform:none}
.pc-kicker{margin:4px 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a5b33}
#v-title{margin:2px 0 6px;font:400 clamp(58px,7.4vw,88px)/1 Lobster,Georgia,serif;color:#c8313b;text-shadow:3px 3px 0 #0f7a4526;transform-origin:20% 70%;animation:evviva .8s .45s cubic-bezier(.2,1.6,.4,1) both}
#v-title::after{content:'';display:block;width:92px;height:5px;margin-top:8px;border-radius:3px;background:linear-gradient(90deg,#0f7a45 33.3%,#f0e6cd 0 66.6%,#c8313b 0)}
@keyframes evviva{from{opacity:0;transform:scale(.5) rotate(-8deg)}}
.pc-lead{margin:4px 0 8px;font:italic 21px/1.25 Georgia,serif;color:#233630}
.pc-body{margin:0 0 7px;font:15px/1.55 Georgia,serif;color:#3d4a42}
.pc-en{margin:0 0 14px;font:italic 12px/1.45 Georgia,serif;color:#7d8578}
.pc-stats{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:10px;margin:0 0 12px;padding:10px 0 0;border-top:1px dotted #b9a47c}
.pc-stats div{min-width:0}
.pc-stats dt{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#9a5b33}
.pc-stats dd{margin:3px 0 0;font:15px/1.25 Georgia,serif;color:#233630}
.pc-sign{margin:auto 0 14px;font:italic 14px Georgia,serif;color:#55605a}
.pc-sign span{font:400 25px Lobster,Georgia,serif;font-style:normal;color:#0f7a45;margin-left:4px}
.end-actions{display:flex;flex-wrap:wrap;gap:8px}
.end-actions button{padding:11px 18px;border:1px solid #23363040;border-radius:4px;background:transparent;color:#233630;font-size:13px;letter-spacing:.02em;transition:transform .15s,background .15s}
.end-actions button:hover{transform:translateY(-1px);background:#2336300d}
.end-actions .primary{border-color:#c8313b;background:#c8313b;color:#fff8ee;box-shadow:0 4px 14px #c8313b40}
.end-actions .primary:hover{background:#b1262f}
.end-actions button:focus-visible{outline:2px solid #0f7a45;outline-offset:3px}

.defeat{background:radial-gradient(ellipse at 50% 40%,#1a2a2755,#0d1614d0)}
.defeat.show{animation:fade-in .4s ease-out}
.defeat-card{margin:auto;width:min(480px,100%);padding:22px 28px 22px;text-align:center;background:#f7edd4;color:#233630;border:1px solid #d9cba9;border-top:5px solid #ad3229;border-radius:3px;box-shadow:0 22px 60px #00000080;transform:rotate(1deg);animation:defeat-in .5s ease-out both}
@keyframes defeat-in{from{opacity:0;transform:translateY(-24px) rotate(-3deg) scale(.95)}60%{transform:translateY(3px) rotate(2deg)}}
.dc-kicker{margin:0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#815333}
#d-title{margin:6px 0 10px;font:400 64px/1 Lobster,Georgia,serif;color:#ad3229}
.dc-line{margin:0 0 6px;font:italic 21px/1.3 Georgia,serif}
.dc-en{margin:0 0 12px;font:italic 12px/1.4 Georgia,serif;color:#7d8578}
.dc-detail{margin:0 0 18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#647064}
.defeat-card .end-actions{justify-content:center}

body.photo .challenge,body.photo .level-card,body.photo .pirate-alert,body.posed .level-card,body.posed .pirate-alert{visibility:hidden}
.tap-hint{display:none}
@media(max-width:1100px){.challenge{top:124px}}
@media(max-width:760px){
 /* On phones the challenge is a strip under the buttons: clock left, level and accidents right. */
 .challenge{top:98px;left:16px;right:16px;width:auto;padding:8px 12px 9px;grid-template-columns:auto 1fr;grid-template-areas:"time top" "time acc" "time pips";column-gap:14px;align-items:center}
 body[data-game=running] .challenge,body[data-game=won] .challenge,body[data-game=lost] .challenge{display:grid}
 body[data-game=running] .location,body[data-game=won] .location,body[data-game=lost] .location{visibility:hidden}
 body[data-game=running] #notice{top:176px}
 #ch-time{grid-area:time;margin:0;font-size:34px}.ch-top{grid-area:top}.ch-acc{grid-area:acc;margin-top:3px}.ch-pips{grid-area:pips;margin:5px 0 0}
 .ch-top,.ch-acc{font-size:8px;letter-spacing:.08em}.ch-acc b{font-size:15px}.challenge small{display:none}
 .pirate-alert{top:36%;font-size:12px}
 .level-card{top:118px;padding:14px 16px 12px}.level-card h2{font-size:20px}.lc-text{font-size:12px;margin-bottom:10px}
 .levels{grid-template-columns:1fr;gap:6px}.levels button{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:baseline;padding:8px 36px 8px 11px}
 .levels strong{font-size:19px}.levels span{grid-column:1/-1;margin-top:0}
 .brand h1,.brand div>span{white-space:nowrap}.brand-school{display:none}
 .lc-go{flex-direction:column;align-items:flex-start;gap:4px}.key-hint,.levels kbd,.lc-free kbd{display:none}.tap-hint{display:inline}
 .postcard{grid-template-columns:1fr;padding:10px;transform:rotate(-.6deg)}
 .pc-note{margin:12px 0 0;padding:14px 8px 6px;border-left:0;border-top:1px dashed #c9b690}
 .pc-approved{width:88px;height:88px;right:10px;bottom:10px;font-size:7.5px}.pc-approved b{font-size:14px}
 .pc-post{top:10px;right:4px;transform:scale(.82);transform-origin:top right}
 #v-title{font-size:56px}.pc-lead{font-size:18px}.pc-body{font-size:14px}
 .pc-stats{grid-template-columns:1fr 1fr;row-gap:8px}.pc-stats div:first-child{grid-column:1/-1}
 .end-actions button{flex:1 1 auto}
 #d-title{font-size:52px}
}
@media(prefers-reduced-motion:reduce){.postcard,.pc-approved,#v-title,.defeat-card,.level-card,.challenge,.pirate-alert.visible,.challenge.final #ch-time{animation:none!important}}

/* Rear-view mirror: the glass is drawn by WebGL into this box; the frame's border covers the render's edges. */
:root{--mw:min(420px,36vw);--mtop:82px;--mbottom:calc(var(--mtop) + var(--mw)/3 + 12px)}
.mirror-frame{position:absolute;z-index:1;top:var(--mtop);left:calc(50% - var(--mw)/2 - 6px);border:6px solid #17201e;border-radius:12px;box-shadow:0 10px 28px #0c181666,0 0 0 1px #ffffff1c;visibility:hidden;pointer-events:none}
.mirror-frame i{display:block;width:var(--mw);aspect-ratio:3/1;border-radius:6px;box-shadow:inset 0 1px 0 #ffffff26}
body.mirror-on .mirror-frame{visibility:visible}
body.mirror-on .pirate-alert{top:calc(var(--mbottom) + 10px)}
body.mirror-on #notice{top:calc(var(--mbottom) + 56px)}
body.mirror-on #crash-comment{top:max(22%,calc(var(--mbottom) + 18px))}
#mirror[aria-pressed=true]{border-color:#e9b96a88}
/* Night: the button lit like the moon, and the moon in the place badge. */
#night[aria-pressed=true]{border-color:#b9c9e888}
body.night .sun{color:#dfe6f2;font-size:20px}
@media(max-width:1100px){:root{--mtop:122px}}
@media(max-width:760px){
 :root{--mw:min(330px,calc(100vw - 44px));--mtop:170px}
 body.mirror-on .pirate-alert{top:calc(var(--mbottom) + 10px)}
 body.mirror-on #notice,body.mirror-on[data-game=running] #notice{top:calc(var(--mbottom) + 54px)}
}

/* After a crash, Close panels flashes in step with the hazard lights (0.7 s). */
nav button.urgent{position:relative;z-index:1;color:#1c2a24;font-weight:bold;border-color:#fff3d6;animation:panels-urgent .7s steps(1,end) infinite}
nav button.urgent kbd{color:inherit;border-color:currentColor;background:#ffffff40}
@keyframes panels-urgent{0%{background:#f4b73e;box-shadow:0 0 0 3px #f4b73e88,0 0 26px 6px #f4b73ecc;transform:scale(1.08)}50%{background:#c8313b;color:#fff8ee;box-shadow:0 0 0 3px #c8313b66,0 0 14px 2px #c8313b88;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){nav button.urgent{animation:none;background:#f4b73e;box-shadow:0 0 0 3px #f4b73e88}}
/* On foot: the car's instruments dim, the level card steps aside, and the help shows how to run. */
.walk-hint{display:none!important}
body.on-foot .walk-hint{display:flex!important}
body.on-foot .instruments{opacity:.38;transition:opacity .4s}
body.on-foot .level-card{display:none}

/* The wardrobe (G): the fitting room is drawn in place of the town and the panel sits beside it (below it on phones).
   Everything else steps aside while he dresses. */
body.dressing nav,body.dressing .location,body.dressing .map-panel,body.dressing .instruments,body.dressing .challenge,body.dressing .help,body.dressing .touch,body.dressing #notice,body.dressing #crash-comment,body.dressing .pirate-alert,body.dressing .level-card,body.dressing .mirror-frame{display:none!important}
body.dressing #world canvas{cursor:grab;touch-action:none}
body.dressing #world canvas:active{cursor:grabbing}
.wardrobe{position:absolute;z-index:4;top:50%;right:32px;display:none;flex-direction:column;width:min(410px,calc(100% - 32px));max-height:calc(100% - 48px);overflow-y:auto;padding:20px 22px 14px;transform:translateY(-50%);background:#f7edd4;color:#233630;border:1px solid #d9cba9;border-top:4px solid #c8313b;border-radius:3px;box-shadow:0 18px 50px #0a141270}
body.dressing .wardrobe{display:flex;animation:wardrobe-in .35s ease-out}
@keyframes wardrobe-in{from{opacity:0;transform:translate(18px,-50%)}}
.wd-kicker{margin:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#815333}
.wardrobe h2{margin:4px 0 5px;font:400 34px/1.05 Lobster,Georgia,serif;color:#233630}
.wd-text{margin:0 0 12px;font:italic 13px/1.42 Georgia,serif;color:#55605a}
.wd-rows{display:flex;flex-direction:column;gap:4px}
.wd-row{padding:8px 10px 10px;border:1px solid transparent;border-radius:4px;transition:background .15s,border-color .15s}
.wd-row.chosen{background:#fffaf0;border-color:#d9cba9;box-shadow:inset 3px 0 0 #c8313b}
.wd-name{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.wd-name strong{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:bold;color:#233630}
.wd-name em{font:italic 13px Georgia,serif;color:#9a5b33}
.wd-options{display:flex;flex-wrap:wrap;gap:5px}
.wd-options button{padding:6px 11px;border:1px solid #cdbf9f;border-radius:999px;background:#fffdf7;color:#233630;font-size:12px;transition:border-color .15s,background .15s,color .15s}
.wd-options button:hover{border-color:#b26037}
.wd-options button[aria-checked=true]{background:#233630;border-color:#233630;color:#f7edd4}
.wd-options button:focus-visible,.wd-actions button:focus-visible{outline:2px solid #0f7a45;outline-offset:2px}
.wd-actions{display:flex;gap:8px;margin-top:14px}
.wd-actions button{padding:10px 14px;border:1px solid #23363040;border-radius:4px;background:transparent;color:#233630;font-size:13px;transition:transform .15s,background .15s}
.wd-actions button:hover{transform:translateY(-1px);background:#2336300d}
.wd-actions .primary{margin-left:auto;border-color:#c8313b;background:#c8313b;color:#fff8ee;box-shadow:0 4px 14px #c8313b40}
.wd-actions .primary:hover{background:#b1262f}
.wardrobe kbd{margin-left:6px;color:inherit;background:transparent;border-color:currentColor;opacity:.6;font-size:10px;padding:1px 4px}
.wd-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;font-size:10.5px;color:#6b766c}
.wd-keys kbd{margin:0 2px 0 0}
.lc-links{display:flex;gap:14px;align-items:center}
@media(max-width:760px){
 .wardrobe{top:auto;bottom:0;left:0;right:0;width:100%;max-height:min(58%,480px);padding:12px 14px 10px;transform:none;border-radius:10px 10px 0 0;border-width:1px 0 0}
 @keyframes wardrobe-in{from{opacity:0;transform:translateY(30px)}}
 .wardrobe h2{font-size:25px;margin:2px 0 8px}
 .wd-text,.wd-keys,.wardrobe kbd{display:none}
 .wd-row{padding:6px 8px 8px}.wd-name{margin-bottom:5px}
 .wd-options button{padding:7px 11px}
 .wd-actions{margin-top:10px}.wd-actions button{flex:1 1 auto;padding:10px 8px}
 /* Wider phones and small tablets give the buttons the room beside the brand, so they wrap into fewer rows. */
 nav{max-width:max(215px,calc(100vw - 230px))}
}
@media(prefers-reduced-motion:reduce){body.dressing .wardrobe{animation:none}}

/* Lifetime usage totals; private records are never rendered here. */
.usage{position:relative;margin-left:12px;pointer-events:auto;text-transform:none;letter-spacing:0;font-size:11px}
.usage summary{cursor:pointer;color:#e9dcc0;list-style:none;border-bottom:1px dotted #e9dcc077;padding:3px 0}
.usage summary::-webkit-details-marker{display:none}
.usage-note{position:absolute;top:28px;left:0;width:min(330px,calc(100vw - 40px));padding:16px;background:#f7edd4;color:#233630;border:1px solid #d9cba9;box-shadow:0 8px 28px #10202055;border-radius:3px;font-size:12px;line-height:1.5;text-shadow:none;z-index:12}
.usage-note p{margin:8px 0 0}.usage-note strong{font-size:14px}
@media(max-width:600px){.usage{margin-left:4px}.usage-note{position:fixed;left:20px;right:auto;top:155px}}
/* The street plan is La Spezia's, from OpenStreetMap (ODbL), and its ground Regione Liguria's DTM (CC BY): their credits sit under the map. */
.osm-credit{display:block;padding:4px 3px 0;font-size:7px;letter-spacing:.05em;color:#9fac9f}.osm-credit a{color:inherit;text-decoration:none}.osm-credit a:hover{color:#e6ddc9}@media(max-width:760px){.osm-credit{font-size:6px;padding-top:2px}}
/* The place name opens the list of locations (maps.mjs); choosing one reloads the page there. */
.place{position:relative;pointer-events:auto;margin-right:6px}
.place summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:3px;min-height:44px;padding:7px 11px;background:var(--panel);border:1px solid #e9b96a88;border-radius:5px;box-shadow:0 3px 12px #10202030;text-shadow:none;transition:background .15s,border-color .15s}.place summary::-webkit-details-marker{display:none}
.place-label{grid-column:1;grid-row:1;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
#place-name{grid-column:1;grid-row:2;font-size:11px;font-weight:bold;white-space:nowrap}
.place .caret{grid-column:2;grid-row:1/3;align-self:center;font-size:16px;line-height:1;color:var(--accent);transition:transform .15s}
.place summary:hover,.place[open] summary{background:#263c36ed;border-color:var(--accent)}
.place summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.place[open] .caret{transform:rotate(180deg)}
.place-menu{position:absolute;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 40px));padding:14px 14px 10px;background:#f7edd4;color:#233630;border:1px solid #d9cba9;box-shadow:0 8px 28px #10202055;border-radius:3px;font-size:12px;line-height:1.45;letter-spacing:0;text-transform:none;text-shadow:none;z-index:12}
.place-menu strong{font-size:14px}.place-menu p{margin:6px 0 10px;color:#4b5a52}
.place-menu button{display:block;width:100%;text-align:left;margin:0 0 6px;padding:9px 11px;background:#fffaf0;color:#233630;border:1px solid #d9cba9;border-radius:3px;cursor:pointer}
.place-menu button b{display:block;font:italic 400 17px/1.2 Georgia,serif}.place-menu button span{display:block;margin-top:2px;color:#56645c}
.place-menu button[aria-pressed=true]{background:#233630;color:#f7edd4;border-color:#233630;cursor:default}.place-menu button[aria-pressed=true] span{color:#c9d2c8}
.place-menu button:hover:not([aria-pressed=true]),.place-menu button:focus-visible{border-color:#8a6d3b}
.osm-credit[hidden]{display:none}
@media(max-width:600px){.place-menu{position:fixed;left:20px;right:auto;top:155px}}
@media(max-width:760px){#notice{top:165px}}

/* Language resources can make controls taller; anchors follow their measured bottom edge. */
.brand{flex-shrink:0}
.brand h1,.brand div>span{white-space:nowrap}
.location{top:max(113px,var(--controls-bottom,113px))}
.challenge{top:max(100px,var(--controls-bottom,100px))}
:root{--mtop:max(82px,var(--controls-bottom,82px))}
.level-card{top:max(15%,var(--controls-bottom,0px))}
#notice{top:max(120px,var(--controls-bottom,120px))}
.crash-top{flex-wrap:wrap}
html[lang=ru] .dial-labels{letter-spacing:0}
.dial-labels>span{white-space:nowrap}
@media(max-width:760px){
 .location{top:max(107px,var(--controls-bottom,107px))}
 .challenge{top:max(98px,var(--controls-bottom,98px))}
 .level-card{top:max(118px,calc(var(--controls-bottom,106px) + 12px))}
 :root{--mtop:max(170px,calc(var(--controls-bottom,90px) + 80px))}
 #notice{top:max(165px,calc(var(--controls-bottom,85px) + 80px))}
 body[data-game=running] #notice{top:calc(var(--controls-bottom,98px) + 80px)}
 body.mirror-on #notice,body.mirror-on[data-game=running] #notice{top:calc(var(--mbottom) + 54px)}
 html[lang=ru] .touch button{font-size:12px}
}
/* The compass beside the minimap (half its size) and the city map (M) by the left edge: its size is set from the
   window in app.js, never wider than a third of it. */
.compass{position:absolute;bottom:81px;left:216px;width:100px;padding:6px 6px 5px;background:var(--panel);border:1px solid #ffffff19;border-radius:8px;box-shadow:0 10px 35px #10202028;backdrop-filter:blur(14px);text-align:center}
#compass{width:88px;height:88px;display:block}
#heading{display:block;padding-top:4px;font-size:9px;letter-spacing:.09em;color:#e6ddc9;font-variant-numeric:tabular-nums}
.city-map{position:absolute;left:30px;top:150px;z-index:2;padding:9px 10px;background:var(--panel);border:1px solid #ffffff19;border-radius:8px;box-shadow:0 10px 35px #10202040;backdrop-filter:blur(14px)}
.city-map[hidden]{display:none}
#city-map-canvas{display:block;border-radius:3px}
.city-map-head,.city-map-legend{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;letter-spacing:.09em;color:#e6ddc9}
.city-map-head{padding:0 2px 8px}.city-map-head strong{font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.city-map-head kbd{margin-right:5px}
.city-map-legend{padding:8px 2px 0;justify-content:flex-start;gap:16px}.city-map-legend span:last-child{margin-left:auto}
.city-map-legend .key-you::before,.city-map-legend .key-garage::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#fff4d8;box-shadow:0 0 6px #fff4d8;vertical-align:-1px}
.city-map-legend .key-garage::before{border-radius:2px;background:#e0663f;box-shadow:none}
body.photo .compass,body.photo .city-map{opacity:0}
body.dressing .compass,body.dressing .city-map{display:none!important}
@media(max-width:760px){.compass{left:145px;bottom:116px;width:68px;padding:4px}#compass{width:58px;height:58px}#heading{font-size:7px;padding-top:2px}.city-map{left:16px;top:130px;padding:6px}.city-map-head,.city-map-legend{font-size:8px}}
/* On narrow phones there is no room between the minimap and the speedometer: the compass stands over the minimap. */
@media(max-width:420px){.compass{left:16px;bottom:282px}}
/* The panel is exactly its canvas wide (app.js), so its title gives way and the legend wraps on a small map. */
.city-map-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-map-head span{white-space:nowrap}
.city-map-legend{flex-wrap:wrap;row-gap:4px}
/* The key map: shown once the loading curtain lifts (keyboards only), dismissed by Enter, Esc, a click or any game key. */
.keymap{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;background:radial-gradient(ellipse at 50% 45%,#0d1a1866,#0a1412c4)}
body.keys-open .keymap{display:flex;animation:keymap-fade .25s ease-out}
@keyframes keymap-fade{from{opacity:0}}
.km-card{position:relative;margin:auto;width:min(820px,100%);padding:20px 26px 18px;background:#f7edd4;color:#233630;border:1px solid #d9cba9;border-top:4px solid #0f7a45;border-radius:3px;box-shadow:0 22px 60px #0008;outline:none;animation:keymap-in .4s ease-out}
@keyframes keymap-in{from{opacity:0;transform:translateY(14px)}}
.km-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;background:transparent;color:#233630;font-size:22px;line-height:1;opacity:.55}
.km-x:hover{opacity:1;background:#2336300d}
.km-kicker{margin:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#815333}
.km-card h2{margin:4px 0 0;font:400 34px/1.05 Lobster,Georgia,serif}
.km-board{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));grid-auto-rows:minmax(64px,auto);row-gap:6px;margin:16px 0 8px}
.km-key{display:flex;flex-direction:column;justify-content:space-between;min-width:0;margin:0 3px;padding:6px 7px 7px;border:1px solid #dccfae;border-bottom-width:3px;border-radius:7px;background:#efe4c8;color:#2336302e;font-size:13px;font-weight:bold;overflow:hidden}
.km-key small{font-size:10.5px;line-height:1.12;font-weight:normal;overflow-wrap:break-word;hyphens:auto}
.km-key.move,.km-key.act{color:#fff8ee;box-shadow:0 6px 14px #23363030;animation:key-lit .5s ease-out both}
.km-key.move{background:#0f7a45;border-color:#0a5732}
.km-key.act{background:#b26037;border-color:#874422}
.km-key b{font-size:15px;letter-spacing:.02em}
.km-key.arrow{align-items:center;justify-content:center;background:#dcebdc;border-color:#a9cbb1;color:#0f7a45;font-size:15px}
@keyframes key-lit{from{opacity:0;transform:translateY(-6px)}}
.km-arrows{margin:4px 0 0;font-size:11.5px;color:#5d695f}
.km-more-title{margin:16px 0 8px;padding-top:12px;border-top:1px solid #dccfae;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:bold;color:#815333}
.km-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;margin:0;padding:0;list-style:none;font-size:12.5px}
.km-more li{display:flex;align-items:center;gap:8px}
.km-card kbd{color:#233630;background:#fffaf0;border-color:#cdbf9f;border-bottom-width:2px;font-size:11px;font-weight:bold;min-width:24px;padding:3px 5px}
.km-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:11px;color:#5d695f}
.km-actions kbd{min-width:18px;padding:1px 4px;font-size:10px}
.km-actions .primary{padding:10px 16px;border:1px solid #0f7a45;border-radius:4px;background:#0f7a45;color:#fff8ee;font-size:14px;box-shadow:0 4px 14px #0f7a4540;transition:transform .15s,background .15s}
.km-actions .primary:hover{transform:translateY(-1px);background:#0b6639}
.km-actions .primary kbd{margin-left:8px;color:inherit;background:transparent;border-color:currentColor;opacity:.7}
.km-x:focus-visible,.km-actions .primary:focus-visible{outline:2px solid #b26037;outline-offset:2px}
.help-keys{display:flex;align-items:center;gap:5px;padding:0;background:none;font-size:11px;color:#edf0db}
.help-keys:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
body.photo .keymap,body.posed .keymap{display:none!important}
@media(max-width:760px){.keymap{display:none!important}}
@media(prefers-reduced-motion:reduce){body.keys-open .keymap,.km-card,.km-key.move,.km-key.act{animation:none}}