/* ===================== the custom UI (2026-09-26): Windows item sheet, real keys, hazard loader ===================== */
@font-face { font-family: 'Silkscreen'; src: url(../assets/fonts/Silkscreen-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Silkscreen'; src: url(../assets/fonts/Silkscreen-700.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Marker'; src: url(../assets/fonts/PermanentMarker-400.woff2) format('woff2'); font-display: block; }
:root {
  /* one art pixel of the 2504-wide key artwork, so the keys keep the exact layout of the design at any screen width */
  --u: clamp(0.3px, calc(100vw / 2504), 0.66px);
  --w95: #c0c0c0; --w95-hi: #ffffff; --w95-lo: #808080; --w95-dk: #000000; --w95-blue: #0000a8;
}
.px { font-family: 'Silkscreen', monospace; letter-spacing: .06em; }

/* ---- the keys ---- */
.keys { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 745); z-index: 12; pointer-events: none; opacity: 0; transition: opacity .4s; }
body.play .keys { opacity: 1; }   /* hidden on the loading and character-pick screens */
.keys > * { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.keys .key img { display: block; width: 100%; height: 100%; }
.keys img { -webkit-user-drag: none; user-select: none; }
.keys .key { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transition: transform .05s, filter .05s; touch-action: none; -webkit-tap-highlight-color: transparent; }
.keys .key.mouse { pointer-events: none; }
/* pressed: the cap drops toward its shadow and darkens a touch (the button.gif) */
.keys .key.down, .keys .key:active { transform: translate(calc(var(--u) * 6), calc(var(--u) * 7)); filter: brightness(.9); }
.keys .key.mouse.down { transform: translate(calc(var(--u) * 3), calc(var(--u) * 5)); }
.keys .key:focus-visible { outline: 2px dashed #fff; outline-offset: 2px; }
.keys .klabel { pointer-events: none; }
.keys .item-only { visibility: hidden; }
body.showing .keys .item-only { visibility: visible; }
body.picking .keys .pick-too { visibility: visible; }
body.picking .keys [data-key="w"], body.picking .keys [data-key="a"], body.picking .keys [data-key="s"], body.picking .keys [data-key="d"], body.picking .keys .klabel { visibility: hidden; }
body.picking .keys [data-key="space"] { visibility: visible; }
.keys .counter { font-family: 'Silkscreen', monospace; font-weight: 700; color: #fff; font-size: max(11px, calc(var(--u) * 40)); display: flex; align-items: center; justify-content: center; white-space: nowrap; z-index: 2; letter-spacing: 0;
  text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, 4px 4px 3px rgba(0,0,0,.8); }
.keys [data-key="space"].ready { animation: space-ready 1.1s ease-in-out infinite; }
@keyframes space-ready { 50% { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 240, 180, .7)); } }
/* the old text legend and the SPACE prompt give way to the keys */
.hud .hint { display: none !important; }
.hud .prompt { bottom: calc(var(--u) * 760); background: rgba(0,0,0,.6); border: 1px solid #fff; font-family: 'Silkscreen', monospace; letter-spacing: .08em; font-size: 11px; }
.hud .prompt .px { border: 1px solid #fff; padding: 1px 6px; }

/* ---- Windows 95 bits ---- */
.win { position: fixed; z-index: 13; background: var(--w95); color: #000; font-family: Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0;
  border: 2px solid; border-color: var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi); box-shadow: inset -1px -1px var(--w95-lo), inset 1px 1px #dfdfdf, 6px 8px 0 rgba(0,0,0,.35);
  padding: 3px; opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1); }
.win.on { opacity: 1; transform: none; pointer-events: auto; }
.win-title { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 3px 0 6px; background: linear-gradient(90deg, #0a1a8a, #1f3fbf); color: #fff; font: 700 17px/1 Arial, Helvetica, sans-serif; user-select: none; }
.win-title img { width: 22px; height: 22px; border-radius: 50%; background: #fff; padding: 1px; }
.win-btns { margin-left: auto; display: flex; gap: 2px; }
.wb, .w95 { font: inherit; color: #000; background: var(--w95); cursor: pointer; border: 2px solid; border-color: var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi); box-shadow: inset -1px -1px var(--w95-lo), inset 1px 1px #dfdfdf; }
.wb { width: 22px; height: 20px; padding: 0; font: 700 13px/1 Arial, sans-serif; display: grid; place-items: center; }
.wb:active, .w95:active, .w95.down, .wb.down { border-color: var(--w95-dk) var(--w95-hi) var(--w95-hi) var(--w95-dk); box-shadow: inset 1px 1px var(--w95-lo), inset -1px -1px #dfdfdf; padding-top: 2px; padding-left: 2px; }
.w95 { padding: 6px 18px; font: 400 16px/1.2 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.w95:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.win-body { padding: 12px 12px 12px; background: var(--w95); }

/* ---- the item info sheet ---- */
.card { left: calc(var(--u) * 52); bottom: calc(var(--u) * 330); width: max(300px, calc(var(--u) * 580)); top: auto; right: auto; }
.card .win-body { border: 2px solid; border-color: var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo); margin-top: 4px; background: #fff; padding: 10px 12px 12px; }
.card h2 { margin: 0 0 4px; font: 700 21px/1.15 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0; }
.card p { margin: 0; font: 700 13px/1.35 Arial, Helvetica, sans-serif; opacity: 1; text-transform: none; letter-spacing: 0; }
.card .sizes { display: flex; justify-content: center; gap: 20px; margin: 22px 0 2px; }
.card .sizes button { background: none; border: 0; padding: 2px 3px; font: 700 15px/1 Arial, sans-serif; color: #8a8a8a; cursor: pointer; }
.card .sizes button:hover { color: #000; }
.card .sizes button.on { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.card .sizes button:active { transform: translateY(1px); }
.card .hint-line { text-align: center; font: 400 10px/1.3 Arial, sans-serif; color: #6a6a6a; margin-bottom: 10px; }
.card .hint-line.warn { color: #c00000; font-weight: 700; animation: shake .3s; }
.card .hint-line.done { color: #1a7a1a; font-weight: 700; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.basket-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; background: var(--w95); padding: 14px 20px 14px 26px;
  border: 2px solid; border-color: var(--w95-hi) var(--w95-lo) var(--w95-lo) var(--w95-hi); }
.basket-icon svg { width: 62px; height: 62px; display: block; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.25)); }
.basket-right { display: grid; justify-items: center; gap: 8px; font: 400 14px/1 Arial, sans-serif; }
.basket-right .w95 { width: 100%; max-width: 130px; padding: 9px 10px; }
.price-tag { position: absolute; top: -26px; right: -30px; width: 132px; height: 84px; background: url(../assets/ui/price-tag.png) center / contain no-repeat;
  transform: rotate(8deg); filter: drop-shadow(3px 4px 2px rgba(0,0,0,.45)); display: grid; place-items: center; pointer-events: none; }
.price-tag span { font-family: 'Marker', 'Comic Sans MS', cursive; font-size: 25px; color: #1a1210; transform: rotate(3deg) translateY(2px); letter-spacing: .01em; }
.card.min .win-body { display: none; }
.card.min .price-tag { transform: rotate(8deg) scale(.7); top: -30px; }

/* ---- the clerk ---- */
.talk { right: 22px; left: auto; bottom: calc(var(--u) * 330); width: min(380px, calc(100vw - 44px)); top: auto; }
.talk .win-body { border: 2px solid; border-color: var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo); background: #fff; margin-top: 4px; }
.talk p { font: 700 18px/1.3 Arial, Helvetica, sans-serif; margin: 2px 0 14px; text-transform: uppercase; letter-spacing: 0; opacity: 1; }
.talk-btns { display: flex; gap: 10px; justify-content: flex-end; }
.talk-btns .w95 { min-width: 86px; }

/* ---- the loader: the walking figure and the hazard bar, both driven by the real download ---- */
.loader .loading { display: grid; justify-items: center; gap: 10px; margin-top: 8px; }
.runner { width: 61px; height: 80px; background: url(../assets/ui/loading-figure.png?v=psd4) 0 0 / 800% 100% no-repeat; image-rendering: pixelated; animation: run .8s steps(8) infinite; }
@keyframes run { to { background-position: 100% 0; } }
@supports (background-position: calc(100% + 1px)) { .runner { background-size: 800% 100%; } }
.hazard { position: relative; width: min(360px, 78vw); height: 34px; border-radius: 17px; background: #222; overflow: hidden; box-shadow: inset 0 0 0 2px #111; }
.hazard i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 17px; transition: width .25s;
  background: repeating-linear-gradient(-45deg, #ffe600 0 14px, #111 14px 28px); background-size: 40px 40px; animation: stripes .7s linear infinite; }
@keyframes stripes { to { background-position: 40px 0; } }
.loader .load-text { font-size: 13px; letter-spacing: .12em; margin-top: 2px; }
.load-what { font-size: 10px; opacity: .55; letter-spacing: .12em; }
.loader .bar { display: none; }
.loader.pick .loading { display: none; }
.char-pick .w95 { padding: 8px 16px; font-size: 15px; }
.loader.pick .char-pick .w95 { background: var(--w95); color: #000; border-color: var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi); }
.loader.pick .char-pick .w95.is-on { border-color: var(--w95-dk) var(--w95-hi) var(--w95-hi) var(--w95-dk); box-shadow: inset 1px 1px var(--w95-lo); background: #fff; font-weight: 700; }
.loader.pick #enter.w95 { background: var(--w95); color: #000; border-color: var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi); margin-top: 16px; padding: 10px 44px; font: 700 17px/1 Arial, sans-serif; letter-spacing: .08em; }
.loader.pick #enter.w95:active, .loader.pick #enter.w95.down { border-color: var(--w95-dk) var(--w95-hi) var(--w95-hi) var(--w95-dk); }
.loader.pick .pick-controls { margin-bottom: 40px; }
.loader.pick .pick-hint { color: #fff; opacity: .8; font-size: 11px; }
@media (max-width: 700px) { .card { left: 10px; width: calc(100vw - 20px); max-width: 360px; } .price-tag { right: -8px; } }
/* racks: the glowing space key says it; the text prompt is only for the clerk */
.hud .prompt:not(.talk-prompt) { display: none; }

/* ---- the new logo, centred (dark on the white loader, white on the dark pick screen) ---- */
.loader h1.logo { margin: 0 0 26px; line-height: 0; }
.loader h1.logo img { width: min(640px, 78vw); height: auto; display: block; }
.loader h1.logo .logo-light { display: none; }
.loader.pick h1.logo .logo-dark { display: none; }
.loader.pick h1.logo .logo-light { display: block; filter: drop-shadow(0 2px 24px rgba(0,0,0,.8)); width: min(520px, 70vw); }
.loader-mid { width: min(640px, 86vw) !important; display: flex; flex-direction: column; align-items: center; }

/* ---- the M key + its pixel label ---- */
.keys .walk-only { visibility: visible; }
body.showing .keys .walk-only { visibility: hidden; }
.keys .klabel-px { pointer-events: none; font-family: 'Silkscreen', monospace; font-weight: 700; color: #fff; font-size: max(10px, calc(var(--u) * 34)); display: flex; align-items: center; justify-content: center;
  text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, 3px 3px 2px rgba(0,0,0,.8); letter-spacing: 0; }

/* ---- the phone menu ---- */
.menu { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.menu.on { pointer-events: auto; }
.phone { position: relative; height: min(88vh, 900px); aspect-ratio: 584 / 1024; transform: translateY(110vh) rotate(6deg); transition: transform .45s cubic-bezier(.2,.9,.25,1.05); }
.menu.on .phone { transform: translateY(0) rotate(-2deg); visibility: visible; transition: transform .45s cubic-bezier(.2,.9,.25,1.05), visibility 0s; }
.menu:not(.on) .phone { visibility: hidden; transition: transform .35s ease-in, visibility 0s .35s; }
.phone-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* the glass: 85..505 x 198..832 of the 584 x 1024 phone */
.phone-screen { position: absolute; left: calc(85 / 584 * 100%); top: calc(198 / 1024 * 100%); width: calc(420 / 584 * 100%); height: calc(634 / 1024 * 100%); background: #000; z-index: 1;
  display: flex; flex-direction: column; align-items: center; container-type: inline-size; }
.phone-status { width: 100%; display: flex; gap: 4px; padding: 2cqw 3cqw; color: #fff; font-size: 3cqw; align-items: flex-end; }
.phone-status .bars { display: inline-flex; gap: 1px; align-items: flex-end; }
.phone-status .bars i { width: .8cqw; background: #fff; display: block; }
.phone-status .bars i:nth-child(1) { height: 1cqw; } .phone-status .bars i:nth-child(2) { height: 1.6cqw; } .phone-status .bars i:nth-child(3) { height: 2.2cqw; } .phone-status .bars i:nth-child(4) { height: 2.8cqw; }
.phone-logo { width: 56cqw; margin-top: 1cqw; margin-left: 12cqw; }
.phone-keys { width: 76cqw; margin: 1cqw 0 0; }
.phone-btns { display: flex; flex-direction: column; gap: 2.4cqw; width: 75cqw; margin-top: 3cqw; }
.phone-btns button { height: 16cqw; border: 0; padding: 0 0 1cqw; cursor: pointer; background: url(../assets/ui/menu/button.png) center / 100% 100% no-repeat; color: #fff;
  font: 700 4.6cqw/1 Tahoma, Verdana, Arial, sans-serif; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,60,0,.9), 0 0 1px #0a3a0a;
  transition: transform .05s, filter .05s; -webkit-tap-highlight-color: transparent; }
.phone-btns button:hover, .phone-btns button.sel { filter: brightness(1.12) saturate(1.1); }
.phone-btns button.sel { outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; border-radius: 10cqw; }
.phone-btns button:active, .phone-btns button.down { transform: translateY(.8cqw) scale(.98); filter: brightness(.82); }
.phone-btns button[data-go="camera"].is-on::after { content: " · ON"; color: #eaff5a; }
.phone-home { position: absolute; z-index: 3; left: calc(248 / 584 * 100%); top: calc(856 / 1024 * 100%); width: calc(92 / 584 * 100%); aspect-ratio: 1; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.phone-home:active { background: rgba(255,255,255,.12); }
.keys .mouse-label { font-size: max(8px, calc(var(--u) * 27)); white-space: nowrap; }
body.showing .keys .mouse-label { visibility: visible; }

/* ===================== v6 (2026-09-26 evening): pick screen, HUD corner basket, browser windows ===================== */
/* ---- HUD: the logo top-left, the turning basket top-right (only while playing) ---- */
.hud .sign, .hud .sub, .hud .bag { display: none !important; }
.hud-logo { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 18px; width: clamp(110px, 12vw, 190px); opacity: 0; transition: opacity .4s; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); pointer-events: none; }
.bag-corner { position: fixed; top: max(6px, env(safe-area-inset-top)); right: 10px; z-index: 12; display: flex; align-items: center; gap: 2px; color: #fff; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .4s, transform .1s; }
.bag-corner canvas { width: 76px; height: 76px; display: block; }
.bag-corner span { font-weight: 700; font-size: 15px; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; margin-right: 6px; }
.bag-corner:active { transform: translateY(2px); }
.bag-corner.bump { animation: bump .45s; }
@keyframes bump { 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
body.play .hud-logo, body.play .bag-corner { opacity: 1; }
body.play .bag-corner { pointer-events: auto; }
body.showing .hud-logo { opacity: .85; }

/* ---- browser windows with the piece's photos ---- */
.browsers { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.bw { width: 27vw; min-width: 250px; top: 9.7vh; transform-origin: 50% 30%; }
.bw.on { opacity: 1; transform: none; pointer-events: auto; }
.bw .win-title { font-size: clamp(13px, 1.2vw, 17px); height: 28px; }
.bw .win-title.inactive { background: linear-gradient(90deg, #7b7b7b, #a8a8a8); }
.bw .bw-bar { display: flex; align-items: center; gap: 6px; padding: 6px 4px; }
.bw .bw-addr { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; padding: 4px 8px; font: 400 clamp(11px, 1vw, 14px)/1.2 Arial, sans-serif; color: #444;
  border: 2px solid; border-color: var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo); white-space: nowrap; overflow: hidden; }
.bw .bw-addr img { width: 18px; height: 18px; border-radius: 50%; }
.bw .bw-menu { width: 30px; height: 26px; font-size: 16px; padding: 0; }
.bw .bw-page { background: #fff; border: 2px solid; border-color: var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo); height: min(52vh, 36vw); display: grid; place-items: center; overflow: hidden; }
.bw .bw-page img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* focused: comes forward a little, keeps its place */
.bw.focus { transform: translate(-6px, -8px) scale(1.035); box-shadow: inset -1px -1px var(--w95-lo), inset 1px 1px #dfdfdf, 14px 18px 0 rgba(0,0,0,.35); }
.bw.min .bw-bar, .bw.min .bw-page { display: none; }
.bw.big { width: 40vw; }
.bw.big .bw-page { height: min(70vh, 52vw); }
@media (max-aspect-ratio: 1/1) { .bw { width: 46vw; min-width: 0; } .bw .bw-page { height: 26vh; } }

/* ---- pick screen (UI DESIGN WAREHOUS PAGES) ---- */
.loader.pick .pick-controls { margin-bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loader.pick .char-pick { display: flex; align-items: center; gap: 12px; margin: 0; }
.loader .portrait { position: relative; width: clamp(64px, 6.6vw, 90px); aspect-ratio: 1; padding: 0; border: 3px solid #c9c9c9; background: #000; cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.6); transition: transform .06s; }
.loader .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loader .portrait .sel { position: absolute; left: -3px; top: -18px; background: #13c513; color: #fff; font-size: 10px; padding: 3px 5px 2px; display: none; letter-spacing: .04em; }
.loader .portrait.is-on { border-color: #13d013; }
.loader .portrait.is-on .sel { display: block; }
.loader .portrait:active, .loader .portrait.down { transform: translate(2px, 3px); }
.loader .pk { padding: 0; border: 0; background: none; cursor: pointer; width: clamp(34px, 3vw, 44px); transition: transform .05s, filter .05s; }
.loader .pk img { width: 100%; display: block; }
.loader .pk:active, .loader .pk.down, .loader .enter-key:active, .loader .enter-key.down { transform: translate(3px, 4px); filter: brightness(.9); }
.loader .pick-hint { color: #fff; font-size: 13px; letter-spacing: .1em; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; opacity: 1; margin: 0; }
.loader .enter-key { position: absolute; right: 22px; bottom: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 6px; transition: transform .05s; }
.loader .enter-key img { width: clamp(70px, 7vw, 96px); display: block; }
.loader .enter-key span { color: #fff; font-size: 12px; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; }
.loader:not(.pick) .enter-key { display: none; }
.loader.pick .loader-foot { display: none; }
.loader.pick h1.logo .logo-light { width: min(470px, 56vw); }
.loader.pick .loader-mid { justify-content: space-between; margin-top: 18px; }
.loader.pick #enter.enter-key { border: 0 !important; padding: 0 !important; background: none !important; margin: 0 !important; font: inherit; letter-spacing: normal; }
.loader.pick #enter.enter-key:hover { background: none !important; color: inherit; }
.loader .pk { width: clamp(38px, 3.4vw, 50px); align-self: flex-end; margin-bottom: 4px; }

/* while something you bought drops into the basket, the photo windows step aside (opacity on the container, not per window) */
#browsers { transition: opacity .22s ease; }
#browsers.drop { opacity: .08; }

/* HUD v7 (mockup photo_2026-09-26_03-35-37): blue logo, a bigger yellow basket with BASKET above it, no number */
.hud-logo { width: clamp(140px, 17vw, 260px); top: max(18px, env(safe-area-inset-top)); left: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.bag-corner { flex-direction: column; gap: 0; top: max(10px, env(safe-area-inset-top)); right: 14px; }
.bag-corner .bag-label { font-size: clamp(10px, .85vw, 13px); letter-spacing: .08em; color: #fff; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; margin: 0 0 -4px; }
.bag-corner canvas { width: clamp(84px, 9.8vw, 132px); height: clamp(84px, 9.8vw, 132px); }
.bag-corner #bagCount { display: none; }

/* visitors board window */
.board-dlg { left: 50%; top: 50%; width: min(540px, calc(100vw - 32px)); transform: translate(-50%, calc(-50% + 14px)) scale(.98); }
.board-dlg.on { transform: translate(-50%, -50%); }
.board-dlg .win-body { padding: 14px 16px 16px; }
.bd-lead { margin: 0 0 14px; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.bd-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.bd-card { background: #fbfbf7; padding: 10px 10px 6px; box-shadow: 3px 4px 0 rgba(0,0,0,.35); transform: rotate(-2deg); display: grid; justify-items: center; gap: 6px; }
.bd-card canvas { width: 144px; height: 192px; image-rendering: pixelated; background: #222; display: block; }
.bd-card span { font: 12px/1 'Silkscreen', monospace; max-width: 144px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bd-side { flex: 1; min-width: 190px; display: grid; gap: 14px; }
.bd-file { display: block; text-align: center; }
.bd-name { display: grid; gap: 5px; font: 14px Arial, Helvetica, sans-serif; }
.bd-name input { font: 15px Arial, Helvetica, sans-serif; padding: 5px 7px; background: #fff; border: 2px solid; border-color: var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo); box-shadow: inset 1px 1px #000; outline: none; text-transform: uppercase; }
.bd-status { margin: 0; min-height: 1.3em; font: 13px/1.35 Arial, Helvetica, sans-serif; color: #333; }
.bd-status.err { color: #a00000; }
.bd-status.ok { color: #0a6a1a; font-weight: 700; }
.bd-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.bd-btns .w95[disabled] { color: #8a8a8a; text-shadow: 1px 1px #fff; cursor: default; }



/* the clerk yelling at a shoplifter */
.talk.shout { border-color: #ff4a4a #7a0000 #7a0000 #ff4a4a; }
.talk.shout .win-title { background: linear-gradient(90deg, #8a0a0a, #d01818); }
.talk.shout #talkText { font: 400 clamp(22px, 2.3vw, 30px)/1.15 'Marker', 'Permanent Marker', cursive; color: #c40000; letter-spacing: .01em; animation: yell .09s steps(2) 12; }
@keyframes yell { 0% { transform: translate(-2px, 1px) rotate(-.6deg); } 100% { transform: translate(2px, -1px) rotate(.6deg); } }


/* ---- v8 ---------------------------------------------------------------------------------------------------- */
@font-face { font-family: 'CrashNum'; src: url(../assets/fonts/CrashNumberingGothic.ttf) format('truetype'); font-display: swap; }

/* loading (photo_2026-10-02_01-54-45): a big runner over the hazard bar, nothing else; the pick screen keeps its logo + keys */
.loader:not(.pick) .pick-controls, .loader:not(.pick) .sign, .loader:not(.pick) h1.logo, .loader:not(.pick) .load-text, .loader:not(.pick) .load-what, .loader:not(.pick) .loader-foot { display: none; }
.loader:not(.pick) .loading { gap: 1.9vh; margin: 0; }
.loader:not(.pick) .runner { height: min(22.8vh, 240px); width: calc(min(22.8vh, 240px) * 122 / 160); image-rendering: auto; }   /* 2026-10-16: 40 % smaller */
.loader:not(.pick) .hazard { width: clamp(132px, 13.5vw, 360px); height: clamp(11px, 1.26vw, 30px); border-radius: 999px; box-shadow: inset 0 0 0 2px #111; }
.loader:not(.pick) .hazard i { border-radius: 999px; }

/* walking keys (photo_2026-10-02_02-22-05, "UI K/ui keyboard last2.png"): one 3615-wide strip across the whole screen */
:root, .keys { --uw: min(calc(100vw / 3615), 1px); }   /* the strip always spans the screen, like the reference */
body:not(.showing) .keys { height: calc(var(--uw) * 661); }
body:not(.showing) .keys > [style*="--wx"] { left: calc(var(--uw) * var(--wx)); top: calc(var(--uw) * var(--wy)); width: calc(var(--uw) * var(--ww)); height: calc(var(--uw) * var(--wh)); }
body:not(.showing) .keys .key.down, body:not(.showing) .keys .key:active { transform: translate(calc(var(--uw) * 6), calc(var(--uw) * 7)); }
body:not(.showing) .keys .klabel-px { font-size: max(9px, calc(var(--uw) * 34)); }
body:not(.showing) .keys .mouse-label { font-size: max(8px, calc(var(--uw) * 30)); }

/* the black smoke under the keys (and a little at the top for the logo), only while playing */
.hud-shade { position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 9%, rgba(0,0,0,.28) 20%, rgba(0,0,0,0) 34%),
              linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 15%); }
body.play .hud-shade { opacity: 1; }

/* numbers in the gothic face (it only has digits + a few signs, so the rest falls back) */
.keys .counter { font-family: 'CrashNum', 'Silkscreen', monospace; font-weight: 400; font-size: max(13px, calc(var(--u) * 46)); letter-spacing: .06em; }
.price-tag span, #cardPrice { font-family: 'CrashNum', 'Marker', cursive; }

/* product photos fill their browser frames (no white bars) */
.bw .bw-page img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* the basket in the corner stays in front of the photo windows */
.bag-corner { z-index: 60; }

/* the runner sprite: 8 frames side by side; step exactly one frame width per tick (percent steps landed between frames) */
.runner { --rw: 61px; animation: run-frames .8s steps(8) infinite; background-size: calc(var(--rw) * 8) 100%; }
.loader:not(.pick) .runner { --rw: calc(min(22.8vh, 240px) * 122 / 160); }
@keyframes run-frames { from { background-position: 0 0; } to { background-position: calc(var(--rw) * -8) 0; } }


/* 2026-10-16: colours + rim from 'loading run.psd' / 'loading dude.psd' — dark #1D1D1B, yellow #FFED00, stripes inside a crisp dark rim */
.loader:not(.pick) .hazard { background: #1D1D1B; box-shadow: none; padding: 0; border-radius: 999px; box-sizing: border-box; }
.loader:not(.pick) .hazard i { position: absolute; left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #FFED00 0 6px, #1D1D1B 6px 12px); background-size: 16.97px 16.97px; image-rendering: pixelated; }
@keyframes stripes { to { background-position: 16.97px 0; } }
.loader:not(.pick) .runner { image-rendering: auto; }

/* the selected portrait's frame is the same green as its SELECTED badge (style.css's white .is-on button rule was winning) */
.loader.pick .char-pick .portrait.is-on { border-color: #13c513; background: #000; }

/* 2026-10-16: the pixel font from the pick screen ("CHOOSE THE CHARACTER" = Silkscreen) — reversed the same day:
   only the keyboard UI and the loading / character-pick page keep it; everything else is back to its own fonts. */
.keys, .keys *, .loader, .loader * { font-family: 'Silkscreen', monospace !important; letter-spacing: .02em; }
.price-tag span, #cardPrice { font-family: 'CrashNum', 'Marker', cursive !important; }

/* the logo sits so its lightning bolt (27 % across the artwork) is right above the character's head (screen centre) */
.loader.pick h1.logo .logo-light { transform: translateX(26%); }

/* 2026-10-16: every key label is live text in the pick screen's 'CHOOSE THE CHARACTER' style (Silkscreen 13 px, white, black outline) —
   crisp at any size, no more scaled label pictures. The old label plate images are no longer used. */
.keys .klabel-px, body:not(.showing) .keys .klabel-px, body:not(.showing) .keys .mouse-label, .keys .mouse-label,
.loader .enter-key .px, .loader .pick-hint, .bag-corner .bag-label {
  font-family: 'Silkscreen', monospace !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: .1em !important;
  color: #fff !important; background: none !important; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000 !important;
  white-space: nowrap; overflow: visible; display: flex; align-items: center; justify-content: center; }

/* the phone menu's buttons: a plain bold sans, no shadow (gd 2026-10-16) */
.phone-btns button { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; font-size: 4.6cqw !important; letter-spacing: .02em !important;
  color: #fff !important; text-shadow: none !important; text-transform: uppercase; }
/* the yellow basket stays in front of everything while an item is open (gd 2026-10-16) */
.bag-corner { z-index: 60; }
/* no WAITING ROOM tag on the character pick (gd 2026-10-16) */
.loader.pick .sign { display: none !important; }

/* item view (gd 2026-10-16): only BACK + SWIPE ITEMS stay, at the supermarket (walk) key size.
   Every key now uses the walk strip's unit (--uw, 3615-wide art) in all modes. */
.keys, body.showing .keys { height: calc(var(--uw) * 661); }
.keys > [style*="--wx"] { left: calc(var(--uw) * var(--wx)); top: calc(var(--uw) * var(--wy)); width: calc(var(--uw) * var(--ww)); height: calc(var(--uw) * var(--wh)); }
.keys .key.down, .keys .key:active { transform: translate(calc(var(--uw) * 6), calc(var(--uw) * 7)); }
.keys .counter { font-size: max(12px, calc(var(--uw) * 38)) !important; }
body.showing .keys > :not(.item-only) { visibility: hidden !important; }

/* ---- item info sheet = gd's 'item window.ai' (2026-10-16): every size is a share of the window width (cqw) ---- */
.card { container-type: inline-size; }
.card .win-title { height: 7.8cqw; gap: 2.2cqw; font: 400 5.05cqw/1 Arial, Helvetica, sans-serif; }
.card .win-title img { width: 6.4cqw; height: 6.4cqw; }
.card .wb { width: 6.6cqw; height: 6.2cqw; font-size: 4.4cqw; }
.card .win-menu { display: flex; gap: 2.8cqw; padding: 2.2cqw 0 1.8cqw 4.4cqw; font: 400 3.97cqw/1.2 Arial, Helvetica, sans-serif; color: #000; user-select: none; }
.card .win-menu u { text-decoration: underline; text-underline-offset: 2px; }
.card .win-body { margin-top: 0; padding: 3.4cqw 3.8cqw 3.8cqw; }
.card h2 { font: 400 5.05cqw/1.15 Arial, Helvetica, sans-serif; margin: 0 0 1cqw; }
.card p { font: 400 3.97cqw/1.2 Arial, Helvetica, sans-serif; }
.card .sizes { gap: 3.6cqw; margin: 4.6cqw 0 .6cqw; }
.card .sizes button { font: 400 3.45cqw/1 Arial, Helvetica, sans-serif; }
.card .hint-line { font: 400 2.6cqw/1.3 Arial, Helvetica, sans-serif; margin-bottom: 2.6cqw; }
.card .hint-line.done { color: #22a822; font-weight: 400; }
.card .basket-panel { margin: 0 4cqw; padding: 4.4cqw 5cqw 4.4cqw 6cqw; gap: 7cqw; }
.card .basket-icon { position: relative; display: block; width: 21cqw; height: 21cqw; }
.card .basket-icon canvas, .card .basket-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card .basket-icon svg.tick { inset: 1cqw; width: calc(100% - 2cqw); height: calc(100% - 2cqw); filter: drop-shadow(.5cqw .5cqw 0 rgba(0,0,0,.25)); display: none; }
.card.got .basket-icon svg.tick { display: block; }
.card.got .basket-icon canvas { visibility: hidden; }
.card .basket-right { gap: 3.4cqw; font: 400 3.97cqw/1 Arial, Helvetica, sans-serif; }
.card .basket-right .w95 { width: 100%; max-width: none; height: 11.8cqw; padding: 0; font: 400 5cqw/1 Arial, Helvetica, sans-serif; }
/* the orange sticker: right over the title bar's corner, text tilted with it (€ plain sans, number CrashNum) */
.card .price-tag { top: .6cqw; right: 1.4cqw; width: 41cqw; height: 29.4cqw; transform: none; }   /* ref: sticker ends just inside the frame */
.card .price-tag span { display: flex; align-items: baseline; gap: 2.6cqw; font-size: 9.6cqw; line-height: 1; color: #1a1210; transform: rotate(13.2deg) translate(.6cqw, -.4cqw); }
.card .price-tag .eur { font-family: 'Myriad Pro', Arial, Helvetica, sans-serif; font-weight: 400; }
.card .price-tag .num { font-family: 'CrashNum', 'Marker', cursive; font-weight: 400; }
.card.min .price-tag { transform: scale(.7); transform-origin: 100% 0; top: -2cqw; }
.card.min .win-menu { display: none; }


/* ---- the WEB BROWSER photo windows: small, like real windows, and draggable by the title bar ---- */
.bw { width: 18vw; min-width: 190px; }
.bw .win-title { cursor: move; height: 24px; font-size: clamp(11px, .9vw, 14px); touch-action: none; }
.bw .bw-bar { padding: 4px 3px; }
.bw .bw-addr { font-size: clamp(10px, .75vw, 12px); padding: 2px 6px; }
.bw .bw-menu { width: 24px; height: 20px; font-size: 13px; }
.bw .bw-page { height: calc(max(18vw, 190px) * .78); }
.bw.big { width: 34vw; }
.bw.big .bw-page { height: calc(34vw * .78); }
.bw.dragging { transition: none; box-shadow: inset -1px -1px var(--w95-lo), inset 1px 1px #dfdfdf, 12px 16px 0 rgba(0,0,0,.35); }
@media (max-aspect-ratio: 1/1) { .bw { width: 38vw; min-width: 0; } .bw .bw-page { height: 30vw; } }

/* ---- gd 2026-10-16 (night) ---- */
/* the corner basket: 25 % smaller, a little pixelated (rendered at 60 px, scaled up hard-edged) */
.bag-corner canvas { width: calc(clamp(84px, 9.8vw, 132px) * .75); height: calc(clamp(84px, 9.8vw, 132px) * .75); image-rendering: pixelated; }
.card .basket-icon canvas { image-rendering: pixelated; }
/* the 1 / 5 counter between the arrows: pixel font, like the key labels */
.keys .counter { font-family: 'Silkscreen', monospace !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: .1em !important; color: #fff;
  text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000 !important; }
/* the item info sheet sits lower, just above the keys, and in from the corner */
.card { left: auto; right: 3vw; bottom: calc(var(--uw) * 205 + 22px); }   /* bottom-right, above the keys (the mouse key is hidden in item view) */
@media (max-width: 700px) { .card { right: 10px; } }
/* WEB BROWSER windows: sized by js to their photo (bwShape); the photo stretches when you pull the frame */
.bw { width: 27vw; min-width: 0; }
.bw .bw-page { height: 21vw; position: relative; }
.bw .bw-page img { object-fit: fill !important; width: 100%; height: 100%; }
.bw.big { width: auto; }
.bw.big .bw-page { height: auto; }
.bw .bw-grip { position: absolute; z-index: 3; touch-action: none; }
.bw .bw-grip[data-grip="n"], .bw .bw-grip[data-grip="s"] { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.bw .bw-grip[data-grip="n"] { top: -4px; } .bw .bw-grip[data-grip="s"] { bottom: -4px; }
.bw .bw-grip[data-grip="e"], .bw .bw-grip[data-grip="w"] { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.bw .bw-grip[data-grip="e"] { right: -4px; } .bw .bw-grip[data-grip="w"] { left: -4px; }
.bw .bw-grip[data-grip$="e"][data-grip^="n"], .bw .bw-grip[data-grip="ne"] { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.bw .bw-grip[data-grip="nw"] { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.bw .bw-grip[data-grip="se"] { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.bw .bw-grip[data-grip="sw"] { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.bw.min .bw-grip { display: none; }
.bw .win-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the item sheet: lower-left corner, just above BACK / SWIPE ITEMS (gd 2026-10-16) */
.card { left: max(14px, calc(var(--uw) * 46)); right: auto; }
@media (max-width: 700px) { .card { left: 10px; right: auto; } }
/* M nudge: after 20 s in the shop without opening the menu (js nudgeMenu) */
.keys .press-me { visibility: hidden; pointer-events: none; overflow: visible; z-index: 3; }
body.nudge-m:not(.showing) .keys .press-me { visibility: visible; }
.keys .press-me b { position: absolute; left: 0; bottom: 0; transform: translate(-50%, -4px); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap;
  font: 400 13px/1 'Silkscreen', monospace; letter-spacing: .1em; color: #ffed00; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; animation: press-me-bob .7s ease-in-out infinite; }
.keys .press-me i { font-style: normal; font-size: 14px; }
@keyframes press-me-bob { 50% { transform: translate(-50%, -12px); } }
body.nudge-m:not(.showing) .keys [data-key="m"] { animation: m-buzz 1.6s infinite; }
@keyframes m-buzz {
  0%, 40%, 100% { transform: none; }
  4% { transform: translate(-3px, 1px) rotate(-6deg); } 8% { transform: translate(3px, -1px) rotate(6deg); } 12% { transform: translate(-3px, 0) rotate(-5deg); }
  16% { transform: translate(3px, 1px) rotate(5deg); } 20% { transform: translate(-2px, 0) rotate(-3deg); } 24% { transform: translate(2px, 0) rotate(3deg); } 28% { transform: none; }
}
/* FOUND ALL? (gd photo_2026-10-16_23-11-45): sizes as shares of the window width */
.found { container-type: inline-size; z-index: 30; left: 50%; top: 50%; width: min(460px, 92vw); transform: translate(-50%, calc(-50% + 14px)) scale(.98); }
.found.on { transform: translate(-50%, -50%); }
.found .win-title { height: 9.6cqw; padding: 0 1cqw 0 3cqw; font: 400 6.6cqw/1 Arial, Helvetica, sans-serif; }
.found .wb { width: 6.6cqw; height: 6cqw; font-size: 4.6cqw; }
.found .found-body { padding: 8cqw 7cqw 5cqw; text-align: center; }
.found .found-msg { margin: 0 0 6cqw; font: 400 6cqw/1 Arial, Helvetica, sans-serif; color: #222; }
.found .found-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5cqw; }
.found .found-btns > div { display: grid; gap: 2.4cqw; justify-items: center; }
.found .found-btns .w95 { width: 100%; height: 13.6cqw; padding: 0; font: 400 6cqw/1 Arial, Helvetica, sans-serif; }
.found .found-btns span { font: 400 3.4cqw/1.2 Arial, Helvetica, sans-serif; color: #777; }
.found u { text-decoration: underline; text-underline-offset: 2px; }
/* gd's 'ui keyboard kabels.png': the cords under the walk keys (tools/make_key_cables.py) */
.keys .cables { pointer-events: none; z-index: 0; }
.keys > .key, .keys > .klabel-px, .keys > .press-me { z-index: 1; }

/* ---- the clerk texts you (gd's iphone notification PSD; positions in PSD px × --k, matched to photo_2026-10-17_01-08-24/25) ---- */
.notify { position: fixed; left: 0; bottom: 0; width: 0; height: 0; z-index: 18; pointer-events: none; }
body:not(.play) .notify, body.showing .notify, body.in-menu .notify { visibility: hidden; }
.notify .nt-f1, .notify .nt-f2 { position: absolute; padding: 0; border: 0; background: none; pointer-events: none; }
.notify .nt-f1 { --k: clamp(.14px, calc(100vw / 6400), .26px); left: calc(4.84vw - 523 * var(--k)); bottom: 0; width: calc(1837 * var(--k)); height: calc(1332 * var(--k));
  transform: translateY(105%); transition: transform .75s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; cursor: pointer; }
.notify .nt-f2 { --k: calc(clamp(.14px, calc(100vw / 6400), .26px) * 1.42); left: calc(8.44vw - 493 * var(--k)); bottom: calc(2vw - 363 * var(--k));
  width: calc(1837 * var(--k)); height: calc(1332 * var(--k)); visibility: hidden; }
.notify .nt-part, .notify .nt-hit { position: absolute; left: calc(var(--px) * var(--k)); top: calc(var(--py) * var(--k)); width: calc(var(--pw) * var(--k)); height: calc(var(--ph) * var(--k)); }
.notify img.nt-part { display: block; -webkit-user-drag: none; user-select: none; }
.notify .nt-hit { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.notify .nt-hit.nt-go { border-radius: 999px; }
/* frame 1: up from the bottom, buzzing in bursts, bolts flashing */
.notify.f1 .nt-f1 { transform: none; }
.notify.f1 .nt-phone { pointer-events: auto; animation: nt-buzz 1.1s linear .5s infinite; transform-origin: 50% 80%; }
.notify .nt-bolt { opacity: 0; }
.notify.f1 .nt-bolt { animation: nt-bolt 1.1s steps(1) .5s infinite; }
.notify.f1 .nt-bolt.b2 { animation-delay: .62s; } .notify.f1 .nt-bolt.b3 { animation-delay: .74s; }
@keyframes nt-buzz {
  0% { transform: none; } 4% { transform: translate(-1.5%, .4%) rotate(-2deg); } 8% { transform: translate(1.5%, -.4%) rotate(2deg); }
  12% { transform: translate(-1.5%, .3%) rotate(-2deg); } 16% { transform: translate(1.5%, 0) rotate(2deg); } 20% { transform: translate(-1%, 0) rotate(-1deg); }
  24% { transform: translate(1%, 0) rotate(1deg); } 28%, 100% { transform: none; } }
@keyframes nt-bolt { 0% { opacity: 1; } 30% { opacity: 0; } 34% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* frame 2: the phone opens into her message */
.notify.f2 .nt-f1 { transform: translateY(12%) scale(.9); opacity: 0; }
.notify.f2 .nt-f2 { visibility: visible; }
.notify .nt-f2 .nt-part { opacity: 0; transition: opacity .25s, transform .45s cubic-bezier(.2, .9, .3, 1.25); }
.notify .nt-bg { transform: scale(.55) rotate(-6deg); transform-origin: 45% 70%; }
.notify .nt-avatar { transform: scale(.4); transform-origin: 35% 50%; }
.notify .nt-title { transform: translateX(-30%); }
.notify .nt-button { transform: scale(.6); transform-origin: 20% 50%; }
.notify.f2 .nt-f2 .nt-part { opacity: 1; transform: none; }
.notify.f2 .nt-avatar { transition-delay: .12s; } .notify.f2 .nt-title { transition-delay: .22s; } .notify.f2 .nt-button { transition-delay: .3s; }
.notify.f2 .nt-button { animation: nt-glow 1.6s ease-in-out 1s infinite; }
@keyframes nt-glow { 50% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(80, 255, 60, .55)); } }
.notify .nt-go:hover ~ .nt-button, .notify .nt-go:active { filter: brightness(1.1); }
/* gd's 'UI KEYBOARD FINALY' set: a grunge/checker band behind the keys in the shop AND the item view; item view = esc + A/D with cords */
.keys .kb-bg { pointer-events: none; z-index: 0; visibility: visible; }
body.showing .keys > .kb-bg { visibility: visible !important; }

/* =================== PHONE (html.is-phone = touch + portrait; gd's mockups in tools/ui_src/phone) =================== */
/* loading: bigger figure + bar ('loading.png') */
.is-phone .loader:not(.pick) .runner { height: 27vh; width: calc(27vh * 122 / 160); --rw: calc(27vh * 122 / 160); }
.is-phone .loader:not(.pick) .hazard { width: 46vw; height: 3.6vw; }
/* character pick ('chose caracter.png'): big logo, big portraits, arrow keys at the edges, big enter key */
.is-phone .loader.pick { padding: 5vh 0 0; }
.is-phone .loader.pick h1.logo .logo-light { width: 64vw; }
.is-phone .loader.pick .loader-mid { width: 100vw !important; margin-top: 0; }
.is-phone .loader.pick .pick-controls { margin-bottom: 22vh; display: grid; justify-items: center; gap: 4vw; }
.is-phone .loader.pick .char-pick { gap: 2.5vw; }
.is-phone .loader .portrait { width: 21vw; border-width: 3px; }
.is-phone .loader .portrait .sel { font-size: 2.4vw; top: -4.4vw; padding: .6vw 1.2vw .4vw; }
.is-phone .loader .pk { width: 10vw; align-self: center; margin: 0; }
.is-phone .loader .enter-key { right: 3vw; bottom: 3vh; }
.is-phone .loader .enter-key img { width: 25vw; }
.is-phone .loader .pick-hint { font-size: 3.3vw !important; }
/* walking: only M + the space bar on the grunge band ('ui warehouse.png'); you walk / look by touch */
.is-phone .keys { overflow: hidden; }
.keys > .ph { display: none; }
.is-phone body:not(.showing) .keys { height: calc(100vw / 1800 * 594); }
.is-phone body:not(.showing) .keys > :not(.ph) { display: none; }
.is-phone body:not(.showing) .keys > .ph { display: block; visibility: visible; position: absolute; left: calc(100vw / 1800 * var(--qx)); top: calc(100vw / 1800 * var(--qy)); width: calc(100vw / 1800 * var(--qw)); height: calc(100vw / 1800 * var(--qh)); }
.is-phone .keys > .ph-bg { pointer-events: none; z-index: 0; }
.is-phone .keys > .ph.key { z-index: 1; }
.is-phone .keys > .ph.key.down, .is-phone .keys > .ph.key:active { transform: translate(calc(100vw / 1800 * 6), calc(100vw / 1800 * 7)); }
/* item view on a phone: the desktop item keys, 2.6x bigger */
.is-phone .keys, .is-phone { --uw: calc(100vw / 1390); }
.is-phone .card { bottom: calc(100vw / 1390 * 205 + 14px); }
/* the menu phone fits the width ('menu.png') */
.is-phone .menu .phone { height: min(88vh, calc(90vw * 1024 / 584)); }
/* the clerk's text ('not1.png' / 'not2.png'): the buzzing phone bottom-RIGHT (bolts to its left), the message across the bottom */
.is-phone .notify .nt-f1 { --k: calc(100vw / 1911); left: calc(69vw - 523 * var(--k)); top: calc(73.3vh - 308 * var(--k)); bottom: auto; transform: translateY(60vh); }
.is-phone .notify.f1 .nt-f1 { transform: none; }
.is-phone .notify.f2 .nt-f1 { transform: translateY(8vh) scale(.9); }
.is-phone .notify .nt-bolt { left: calc(var(--mx) * var(--k)); transform: scaleX(-1); }
.is-phone .notify .nt-f2 { --k: calc(100vw / 1676); left: calc(25.15vw - 493 * var(--k)); top: calc(82.2vh - 674 * var(--k)); bottom: auto; }
.is-phone .notify { top: 0; right: 0; width: auto; height: auto; }   /* full-screen box: the phone frames are placed from the top */