/* Playground mode (/play/): "Inside Damodar's mind". The game draws itself on the canvas; this styles what sits over
   it: the HUD and journey bar, the info card under the hero, the controls, the screens and the case study viewer. The
   overlays are styled like a design tool's own panels, so they read the same in every era. The game has its own fixed
   look and does not follow the site's light/dark theme. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #f5f6f8;
  --dim: #b9bec8;
  --panel: rgba(28, 29, 34, .94);
  --panel-2: #26272d;
  --chip: rgba(22, 23, 28, .8);
  --edge: rgba(255, 255, 255, .12);
  --accent: #ff9f68;
  --sel: #0d99ff;
  --paper: #e8590c;
  --print: #e63b2e;
  --canvas: #0d99ff;
  --ai: #a78bfa;
  --sky: #f06595;
  --night: #9775fa;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: cubic-bezier(.3, 1.5, .5, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111215; color: var(--ink); font: 400 16px/1.45 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { touch-action: none; -webkit-user-select: none; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
[hidden] { display: none !important; }
button, a { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sel); outline-offset: 3px; }
kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; margin: 0 2px; border-radius: 6px; background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); border-bottom-width: 2px; font: 500 12px "Geist Mono", monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .25s var(--pop), background .2s, box-shadow .25s; }
.pbtn:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.pbtn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--pop); }
.pbtn:hover svg { transform: translateX(3px); }
.pbtn.primary { background: var(--accent); color: #1d0c03; border-color: transparent; box-shadow: 0 4px 0 #b8582a; }
.pbtn.primary:hover { background: #ffb084; box-shadow: 0 6px 0 #b8582a; transform: translateY(-2px); }
.pbtn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8582a; }
.pbtn.sm { min-height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; box-shadow: none; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kicker { margin: 0 0 10px; font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ---------- HUD and the journey bar ---------- */
/* the chapter picker on the left, the journey in the middle of the screen, sound / Menu / Minimalist on the right;
   the sticker and pixel counters sit in the bottom-right corner, so the top stays clear (Damodar's call, 21 Oct 2026) */
.hud { position: fixed; inset: 0 0 auto; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.hud-l, .hud-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: auto; }
.hud-l { position: relative; justify-self: start; }
.hud-r { justify-self: end; justify-content: flex-end; }
.hud-ch, .hud-chip, .hud-btn { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: var(--chip); border: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-weight: 500; font-size: 14px; }
.hud-ch { padding: 0 10px 0 6px; gap: 10px; text-align: left; cursor: pointer; transition: background .2s, transform .2s var(--pop); }
.hud-ch:hover { background: var(--panel-2); transform: translateY(-1px); }
.hud-ch > svg { width: 18px; height: 18px; margin-left: 2px; opacity: .85; transition: transform .25s var(--ease); }
.hud-ch[aria-expanded="true"] { background: var(--panel-2); }
.hud-ch[aria-expanded="true"] > svg { transform: rotate(180deg); }
.hud-ch > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--wc, var(--accent)); color: #fff; font: 700 15px "Geist Mono", monospace; }
.hud-ch > span { display: grid; line-height: 1.1; }
.hud-ch [data-hud="name"] { font-weight: 700; }
.hud-ch small { font-size: 12px; color: var(--dim); }
.hud-chip b { font: 500 14px "Geist Mono", monospace; }
.px-i { width: 14px; height: 14px; background: var(--wc, var(--accent)); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .45), inset -3px -3px 0 rgba(0, 0, 0, .25); }
.stk-i { width: 17px; height: 17px; background: #ffd166; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 80% 100%, 50% 78%, 20% 100%, 29% 61%, 0 38%, 37% 35%); }
.hud-btn, .hud-stk { cursor: pointer; text-decoration: none; transition: background .2s, transform .2s var(--pop); }
.hud-btn:hover, .hud-stk:hover { background: var(--panel-2); transform: translateY(-1px); }
.hud-btn svg { width: 18px; height: 18px; }
.hud-min { background: var(--ink); color: #15161a; border-color: transparent; }
.hud-min:hover { background: #fff; }
body.muted .snd-on, body:not(.muted) .snd-off { display: none; }
body[data-world="paper"] { --wc: var(--paper); }
body[data-world="print"] { --wc: var(--print); }
body[data-world="canvas"] { --wc: var(--canvas); }
body[data-world="ai"] { --wc: var(--ai); }
body[data-world="sky"] { --wc: var(--sky); }
body[data-world="night"] { --wc: var(--night); }
/* the chapter bar and the drop-down are all in the colour of the world you're in, the same for every chapter (Damodar's
   call, 21 Oct 2026: one colour, not one per chapter) */
.journey li, .hud-dd li { --c: var(--wc, var(--accent)); }

/* the chapter drop-down */
/* while the drop-down is open the top bar sits above the touch buttons and the info card */
.hud:has(.hud-dd:not([hidden])) { z-index: 8; }
.hud-dd { position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; width: 288px; max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 16px; background: #1c1d22; border: 1px solid var(--edge); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform-origin: top left; animation: dd .22s var(--pop); }
.hud-dd p { margin: 4px 8px 8px; font: 500 11.5px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.hud-dd ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hud-dd button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 7px 8px; border: 0; border-radius: 11px; background: none; text-align: left; cursor: pointer; transition: background .15s; }
.hud-dd button:hover, .hud-dd button:focus-visible { background: rgba(255, 255, 255, .09); outline-offset: -2px; }
.hud-dd b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--c); color: #fff; font: 700 14px "Geist Mono", monospace; }
.hud-dd span { display: grid; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.hud-dd small { font-size: 12px; font-weight: 500; color: var(--dim); }
.hud-dd li.done small::after { content: " ✓"; color: color-mix(in srgb, var(--c) 45%, #fff); font-weight: 700; }
.hud-dd li.on button { background: rgba(255, 255, 255, .1); }
.hud-dd li.on button::after { content: "You’re here"; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--c); color: #1d0c03; font: 600 11px Geist, sans-serif; white-space: nowrap; }
@keyframes dd { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* the counters, bottom right */
.hud-stats { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 8px; pointer-events: auto; }
body.touchui .hud-stats { display: none; }

/* the journey, centred at the top: one button per chapter (it takes you there), then Skip. Each chapter looks like what
   it is, a button: a pill with its number and name. The one you're in is lit and the ones you've finished are ticked,
   with room to breathe between them and no progress bars (Damodar's call, 21 Oct 2026). */
.journey { justify-self: center; pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 16px; background: var(--chip); border: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.journey ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.journey li button { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 7px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--pop); }
.journey li button:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.j-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); color: var(--dim); font: 700 12.5px "Geist Mono", monospace; transition: background .2s, color .2s; }
.j-t { font-size: 13.5px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.journey li button:hover .j-t, .journey li.on .j-t { color: var(--ink); }
.journey li button:hover .j-n { background: var(--c); color: #fff; box-shadow: none; }
.journey li.on button { background: rgba(255, 255, 255, .14); border-color: var(--c); }
.journey li.on .j-n { background: var(--c); color: #fff; box-shadow: none; }
.journey li.done:not(.on) .j-n { background: color-mix(in srgb, var(--c) 40%, transparent); color: #fff; box-shadow: none; }
.journey li.done:not(.on) .j-t::after { content: " ✓"; color: color-mix(in srgb, var(--c) 45%, #fff); }
.j-skip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 11px 0 13px; border-radius: 11px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s; }
.j-skip:hover { background: rgba(255, 255, 255, .2); }
.j-skip svg { width: 15px; height: 15px; }

/* ---------- the info card: what you're standing next to, right under the hero ---------- */
.info { position: fixed; z-index: 6; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow: auto; padding: 12px 16px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 18px 50px rgba(0, 0, 0, .4); opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .3s var(--ease); -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.info.in { opacity: 1; transform: translate(-50%, 0); }
.info-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
.info-path { min-width: 0; margin: 0; font: 500 11.5px "Geist Mono", monospace; letter-spacing: .02em; color: #8fc9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-more { flex: none; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 600; cursor: pointer; }
.info-more:hover { background: rgba(255, 255, 255, .14); }
.info-t { margin: 3px 0 2px; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-x { margin: 0; font-size: 14px; line-height: 1.45; color: #d3d6dd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-chips { list-style: none; display: none; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.info-chips li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--edge); font-size: 12.5px; color: #e4e6eb; }
.info.more .info-t { white-space: normal; }
.info.more .info-x { display: block; }
.info.more .info-chips:not(:empty) { display: flex; }
.info-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.info-links .pbtn { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.info-links .pbtn.primary { box-shadow: 0 3px 0 #b8582a; }
.info-key { margin: 0; font-size: 12.5px; color: var(--dim); }

/* ---------- the controls, always on screen (keyboard: a legend; touch: the buttons) ---------- */
.legend { position: fixed; z-index: 5; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 6px 16px; padding: 10px 14px; border-radius: 12px; background: rgba(22, 23, 28, .7); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12.5px; color: #dfe2e8; pointer-events: none; }
.legend span { white-space: nowrap; }
.legend kbd { min-width: 22px; height: 20px; margin: 0 1px; font-size: 11px; }
body:not([data-screen="play"]) .legend, body.touchui .legend { display: none; }
.legend.hi { box-shadow: 0 0 0 3px var(--wc, var(--accent)); animation: hi 1.1s ease-in-out infinite; }
@keyframes hi { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--wc, var(--accent)) 40%, transparent); } }

/* ---------- the controls walkthrough: first visit, and after Start over ---------- */
/* big keys in the strip at the bottom of the screen, one step at a time (dots up top), then an arrow to the legend */
.coach { position: fixed; z-index: 6; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto minmax(0, auto); grid-template-areas: "dots x" "keys txt"; align-items: center; gap: 10px 20px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px 18px; border-radius: 20px; background: rgba(22, 23, 28, .92); border: 1px solid var(--edge); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(-50%); transition: border-color .2s, box-shadow .2s; }
.coach.in { animation: coach-in .45s var(--pop); }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
.coach-dots { grid-area: dots; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.coach-dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .2s, width .25s var(--ease); }
.coach-dots li.done { background: rgba(255, 255, 255, .6); }
.coach-dots li.on { width: 22px; border-radius: 4px; background: var(--wc, var(--accent)); }
.coach-x { grid-area: x; justify-self: end; padding: 2px 4px; border: 0; background: none; color: var(--dim); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.coach-x:hover { color: var(--ink); }
.coach-keys { grid-area: keys; display: flex; align-items: center; gap: 10px; }
.coach-keys kbd { min-width: 60px; height: 60px; margin: 0; padding: 0 14px; border-radius: 14px; background: #f5f6f8; border: 0; border-bottom: 5px solid #a9afba; color: #15161a; font: 700 24px Geist, sans-serif; transition: transform .08s, border-bottom-width .08s, background .15s; }
.coach-keys kbd.wide { min-width: 96px; font-size: 18px; }
.coach-keys kbd.down { transform: translateY(3px); border-bottom-width: 2px; background: var(--wc, var(--accent)); color: #fff; }
.coach-keys i { font-style: normal; font-size: 22px; font-weight: 700; color: var(--dim); }
.coach-txt { grid-area: txt; display: grid; gap: 3px; margin: 0; min-width: 0; }
.coach-t { font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.coach-s { font-size: 14.5px; color: var(--dim); }
/* done: a tick, and the card lights up for a moment before the next step */
.coach.ok { border-color: var(--wc, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent), 0 18px 50px rgba(0, 0, 0, .35); }
.coach.ok .coach-t::after { content: " ✓"; color: var(--wc, var(--accent)); }
.coach.ok kbd { background: var(--wc, var(--accent)); color: #fff; }
.coach-to { position: fixed; z-index: 6; display: grid; justify-items: start; gap: 2px; pointer-events: none; }
.coach-to span { padding: 9px 14px; border-radius: 12px; background: #fff; color: #17181c; font-size: 14.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--wc, var(--accent)), 0 12px 30px rgba(0, 0, 0, .3); }
.coach-to svg { width: 52px; height: 44px; margin-left: 4px; color: var(--wc, var(--accent)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); animation: nudge 1s ease-in-out infinite; }
.coach-to.in { animation: rise .45s var(--pop); }
@keyframes nudge { 50% { transform: translate(-4px, 4px); } }
body:not([data-screen="play"]) .coach, body:not([data-screen="play"]) .coach-to { display: none; }
/* on touch: above the buttons when the phone is upright, between them when it's on its side */
body.touchui .coach { padding: 10px 14px 14px; gap: 8px 14px; }
body.touchui .coach-keys kbd { min-width: 52px; height: 52px; font-size: 20px; }
body.touchui .coach-keys kbd.wide { min-width: 76px; font-size: 16px; }
body.touchui .coach-t { font-size: 18px; }
body.touchui .coach-s { font-size: 13px; }
body.portrait.touchui .coach { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px); }
body.touchui:not(.portrait) .coach { bottom: max(8px, env(safe-area-inset-bottom)); max-width: calc(100vw - 380px); }
/* on a laptop that isn't very wide, the card keeps clear of the legend */
@media (max-width: 1180px) {
  body:not(.touchui) .info { left: 290px; width: min(560px, calc(100vw - 306px - 112px)); transform: translateY(12px); }
  body:not(.touchui) .info.in { transform: none; }
  .hud-stats { flex-direction: column; align-items: flex-end; }
  body:not(.touchui) .coach { left: 290px; max-width: calc(100vw - 306px - 112px); transform: none; }
  body:not(.touchui) .coach.in { animation-name: rise; }
}
@media (max-width: 900px) {
  body:not(.touchui) .coach-keys kbd { min-width: 50px; height: 50px; font-size: 20px; }
  body:not(.touchui) .coach-keys kbd.wide { min-width: 78px; font-size: 16px; }
  body:not(.touchui) .coach-t { font-size: 18px; }
}
@media (max-width: 620px) {
  body:not(.touchui) .legend { display: none; }
  body:not(.touchui) .info { left: 16px; width: calc(100vw - 32px); }
  body:not(.touchui) .coach { left: 16px; max-width: calc(100vw - 32px); }
}

/* ---------- toasts, arriving, flash ---------- */
.toasts { position: fixed; z-index: 15; top: max(78px, calc(env(safe-area-inset-top) + 70px)); left: 50%; translate: -50% 0; width: min(420px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
/* over a menu, an end card or a case study, toasts move to a corner so they don't sit on top of what you're reading */
body:not([data-screen="play"]) .toasts { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: auto; right: 16px; translate: none; }
.toast { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #fff; color: #17181c; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .3s, transform .45s var(--pop); }
.toast.in { opacity: 1; transform: none; }
.toast-i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: #ffd166 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3d06' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 18px no-repeat; color: #3a2600; font-size: 15px; font-weight: 700; }
.t-sticker .toast-i { border-radius: 50%; background-image: none; box-shadow: inset 0 0 0 2px #fff; outline: 2px solid #ffd166; }
.t-relic .toast-i { background-color: #f2b632; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1206' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
.t-hat .toast-i { place-items: start center; background: #fde4ee; }
.t-hat .toast-i img { width: 34px; height: 48px; }
.toast .tt { margin: 0; font-weight: 700; font-size: 15px; }
.toast .tx { margin: 2px 0 0; font-size: 13.5px; color: #4b4f58; }
/* arriving somewhere: the chapter chip lights up in the world's colour */
.hud-ch.pop { animation: arrive 1.1s var(--pop); }
@keyframes arrive { 0% { transform: scale(.9); box-shadow: 0 0 0 0 var(--wc, var(--accent)); } 35% { transform: scale(1.07); box-shadow: 0 0 0 6px color-mix(in srgb, var(--wc, var(--accent)) 45%, transparent); } 100% { transform: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); } }
.fade { position: fixed; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fade.in { opacity: .5; transition: none; }

/* ---------- touch controls ---------- */
.touch { position: fixed; z-index: 7; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); pointer-events: none; }
body:not([data-screen="play"]) .touch { display: none; }
.touch-l, .touch-r { display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.touch button { width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(20, 20, 26, .62); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 22px; font-weight: 700; touch-action: none; transition: transform .1s, background .1s; }
.touch button.on { transform: scale(.92); background: rgba(255, 159, 104, .7); }
.touch .t-jump { width: 86px; height: 86px; display: grid; place-content: center; line-height: 1.1; background: rgba(255, 159, 104, .62); color: #1d0c03; font-size: 16px; }
.touch .t-jump small { font-size: 10.5px; font-weight: 600; opacity: .8; }
.touch .t-act { width: 66px; height: 66px; font-size: 14px; background: var(--sel); margin-bottom: 40px; animation: pop .4s var(--pop); }
/* on touch the info card sits between the buttons (landscape) or just above them (portrait) */
body.touchui .info { bottom: max(10px, env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 372px)); padding: 8px 12px 10px; border-radius: 14px; }
body.touchui .info-top { position: absolute; top: 7px; right: 8px; }
body.touchui .info-path, body.touchui .info-key { display: none; }
body.touchui .info-t { margin: 0 56px 1px 0; font-size: 15px; }
body.touchui .info-x { font-size: 13px; -webkit-line-clamp: 1; }
body.touchui .info-links { margin-top: 6px; }
body.touchui .info-links .pbtn { min-height: 32px; padding: 0 12px; font-size: 13px; }
body.portrait.touchui .info { width: calc(100vw - 20px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 100px); padding: 10px 14px 12px; }
body.portrait.touchui .info-t { font-size: 16px; }
body.portrait.touchui .info-x { font-size: 13.5px; -webkit-line-clamp: 2; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; padding: 24px 16px; overflow: auto; background: rgba(10, 10, 14, .5); animation: fade .35s var(--ease); touch-action: auto; -webkit-user-select: text; user-select: text; }
.panel { position: relative; margin: auto; width: min(680px, 100%); padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: rise .5s var(--pop); }
.panel h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.03em; }

/* the menu: chapters on the left, the sticker book and the wardrobe on the right, and a close button in the corner */
.map-panel { width: min(920px, 100%); }
.map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.map-x { flex: none; display: grid; place-items: center; width: 46px; height: 46px; margin: -8px -8px 0 0; padding: 0; border-radius: 14px; border: 0; background: var(--ink); color: #15161a; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); cursor: pointer; transition: background .2s, transform .25s var(--pop); }
.map-x:hover { background: #fff; transform: scale(1.06); }
.map-x svg { width: 24px; height: 24px; stroke-width: 2.4; }
.map-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px; margin-top: 18px; align-items: start; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.map-list li { border-radius: 16px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); overflow: hidden; }
.map-list li[data-world="paper"] { --c: var(--paper); } .map-list li[data-world="print"] { --c: var(--print); } .map-list li[data-world="canvas"] { --c: var(--canvas); } .map-list li[data-world="ai"] { --c: var(--ai); } .map-list li[data-world="sky"] { --c: var(--sky); } .map-list li[data-world="night"] { --c: var(--night); }
.ml-go { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .2s; }
.ml-go:hover, .ml-go:focus-visible { background: rgba(255, 255, 255, .07); }
.ml-go:focus-visible { outline-offset: -3px; border-radius: 16px; }
.ml-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c); color: #fff; font: 700 19px "Geist Mono", monospace; }
.map-list li[data-world="ai"] .ml-n { color: #1a1040; }
.ml-t { display: grid; gap: 1px; }
.ml-t b { font-size: 17px; }
.ml-t small { font-size: 13px; color: var(--dim); }
.ml-s { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--edge); white-space: nowrap; }
.map-list .done .ml-s { color: #7dffb0; border-color: rgba(125, 255, 176, .4); }
.map-list .here .ml-s { color: #1d0c03; background: var(--accent); border-color: transparent; }
.ml-relic { width: 12px; height: 12px; background: #f2b632; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 80% 100%, 50% 78%, 20% 100%, 29% 61%, 0 38%, 37% 35%); }
.ml-rooms { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 68px; }
.ml-rooms button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 500; cursor: pointer; }
.ml-rooms button:hover { background: rgba(255, 255, 255, .14); }
.map-side { display: grid; gap: 22px; }
.map-side h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.map-side h3 span { font-size: 12.5px; font-weight: 500; color: var(--dim); }
.stk-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stk-b { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .5); font-weight: 700; font-size: 15px; cursor: default; transition: transform .2s var(--pop), background .2s; }
.stk-b.got { border: 2px solid #fff; background: #ffd166; color: #3a2600; box-shadow: 0 4px 14px rgba(255, 209, 102, .28); }
.stk-b:hover, .stk-b:focus-visible { transform: scale(1.1); }
.stk-line { margin: 12px 0 0; min-height: 40px; font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.stk-line b { color: var(--ink); margin-right: 3px; }
.stk-got { color: #7dffb0; font-weight: 600; }
.hat-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hat { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 4px 2px 8px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); font-size: 11.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, border-color .2s; }
.hat span { max-width: 100%; overflow-wrap: anywhere; }
.hat img { width: 42px; height: 59px; }
.hat:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.hat[aria-pressed="true"] { border-color: var(--accent); background: rgba(255, 159, 104, .14); }
.hat:disabled { cursor: default; opacity: .5; }
.hat:disabled img { filter: grayscale(1) brightness(.7); }
.hat small { font-size: 10.5px; font-weight: 500; color: var(--dim); }

/* Start over asks once more before it clears anything */
.pbtn.restart:hover svg { transform: rotate(-50deg); }
.pbtn.restart.sure { background: #ffd166; color: #3a2600; border-color: transparent; }

/* ---------- the end: a medal, what you did, your reward (my resume) and where to reach me, then play again ---------- */
.s-done { background: radial-gradient(circle at 50% 28%, rgba(255, 209, 102, .18), rgba(10, 10, 14, .74) 62%); }
.end-panel { width: min(980px, 100%); padding: clamp(22px, 3.4vw, 42px); }
.end-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(24px, 4vw, 48px); align-items: center; }
.end-medal { display: block; width: 74px; margin: 0 0 12px; transform-origin: 50% 0; animation: medal 1s var(--pop) both; }
.end-medal svg { display: block; width: 100%; height: auto; }
@keyframes medal { 0% { opacity: 0; transform: translateY(-30px) rotate(-14deg) scale(.6); } 60% { opacity: 1; transform: rotate(6deg) scale(1.06); } 100% { transform: none; } }
.end-panel h2 { font-size: clamp(30px, 4.4vw, 46px); }
.end-lede { margin: 0; max-width: 46ch; color: var(--dim); font-size: 16.5px; }
.end-stats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.end-stats li { display: grid; gap: 2px; padding: 12px 12px 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); }
.end-stats b { font: 700 22px "Geist Mono", monospace; letter-spacing: -.02em; color: #ffd166; }
.end-stats span { font-size: 12.5px; color: var(--dim); }
.end-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.end-cta .pbtn:hover svg { transform: none; }
/* the reward: page one of my resume, like a print you've just been handed */
.end-cv { position: relative; display: block; padding: 10px 10px 0; border-radius: 6px; background: #fff; color: #17181c; text-decoration: none; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); transform: rotate(2deg); transition: transform .35s var(--pop), box-shadow .35s; animation: rise .7s .15s var(--pop) backwards; }
.end-cv:hover, .end-cv:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.end-cv img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 1132; border: 1px solid #eceef1; background: #f5f6f8; }
.end-ribbon { position: absolute; top: -12px; left: -10px; z-index: 1; padding: 6px 12px; border-radius: 8px; background: #ffd166; color: #3a2600; font: 700 12.5px Geist, sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transform: rotate(-5deg); }
.end-open { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0 14px; font-size: 14.5px; font-weight: 700; }
.end-open svg { width: 16px; height: 16px; }
.end-again { margin-top: clamp(22px, 3vw, 32px); padding-top: 20px; border-top: 1px solid var(--edge); }
.end-h { margin: 0 0 12px; font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.end-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.end-chips button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 7px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s, transform .25s var(--pop); }
.end-chips button:hover, .end-chips button:focus-visible { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.end-chips .dn-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--wc, var(--accent)); color: #fff; font: 700 14px "Geist Mono", monospace; }
.end-chips .done::after { content: "✓"; color: color-mix(in srgb, var(--wc, var(--accent)) 45%, #fff); }

/* ---------- the case study viewer: one big artboard over the game ---------- */
.s-case { z-index: 12; padding: clamp(8px, 2vw, 22px); background: rgba(8, 8, 12, .84); --cv-acc: #0f766e; }
.s-case[data-room="1"] { --cv-acc: #c2410c; }
.s-case[data-room="2"] { --cv-acc: #1d4ed8; }
.s-case[data-room="3"] { --cv-acc: #15803d; }
.s-case[data-room="ai"] { --cv-acc: #b45309; }
.cv { margin: auto; width: min(1320px, 100%); height: 100%; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: #17181c; box-shadow: 0 40px 100px rgba(0, 0, 0, .55); animation: rise .45s var(--pop); }
.cv-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 10px 0 16px; background: #1e1f24; color: var(--ink); }
.cv-frame { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-frame i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--sel); }
.cv-frame span { overflow: hidden; text-overflow: ellipsis; }
.cv-nav { display: flex; gap: 4px; }
.cv-step, .cv-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 9px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); cursor: pointer; transition: background .2s; }
.cv-step { width: 38px; }
.cv-step:first-child svg { transform: rotate(180deg); }
.cv-close { padding: 0 14px; font-size: 14px; font-weight: 600; background: var(--accent); color: #1d0c03; border-color: transparent; }
.cv-step:hover { background: rgba(255, 255, 255, .14); }
.cv-close:hover { background: #ffb084; }
.cv-step svg, .cv-close svg { width: 18px; height: 18px; }
.cv-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; touch-action: pan-y; }
.cv-art { width: min(1120px, 100%); margin: 0 auto; padding: clamp(18px, 4vw, 52px) clamp(18px, 4vw, 48px) 0; font-size: 16.5px; line-height: 1.6; }
.cv-art h2, .cv-art h3, .cv-art h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.cv-art p { margin: 0; }
.cv-cover { margin: 0 0 28px; border-radius: 12px; overflow: hidden; background: #f1f2f4; }
.cv-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.cv-label { margin-bottom: 8px !important; font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cv-acc); }
.cv-title { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -.04em !important; }
.cv-sum { margin-top: 12px !important; max-width: 64ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: #30333a; }
/* the viewer is wide for the pictures; running text keeps a comfortable line length */
.cv-intro > p:not([class]), .cv-prose, .cv-lead, .cv-made { max-width: 76ch; }
.cv-client { margin-top: 10px !important; font-size: 14px; font-weight: 500; color: #5b616c; }
.cv-intro > p:not([class]) { margin-top: 14px; color: #3d414a; }
.cv-made { margin-top: 14px !important; padding-left: 12px; border-left: 3px solid var(--cv-acc); font-weight: 600; color: #17181c; }
.cv-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #17181c; font-size: 14px; font-weight: 600; text-decoration: none; }
.cv-btn:hover { background: #17181c; color: #fff; }
.cv-btn svg { width: 16px; height: 16px; }
.cv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid #e6e8ec; }
.cv-facts dt { font: 500 11px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #5b616c; }
.cv-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.cv-sec { margin-top: 56px; padding-top: 40px; border-top: 1px solid #e6e8ec; }
.cv-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.cv-sub { margin-top: 10px !important; font-size: 17px; color: #4b4f58; max-width: 62ch; }
.cv-b { margin-top: 28px; }
.cv-h3 { margin-bottom: 12px !important; font-size: 20px; }
.cv-h4, .cv-art h4 { font-size: 17px; }
.cv-prose p + p, .cv-prose p + ul, .cv-prose ul + p { margin-top: 12px; }
.cv-prose ul { margin: 0; padding-left: 20px; }
.cv-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--cv-acc); font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.cv-cards, .cv-cells, .cv-flow, .cv-prod, .cv-parties { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cv-cards li, .cv-cells li, .cv-flow li { padding: 18px; border-radius: 12px; background: #f5f6f8; }
.cv-cards b { display: block; margin-bottom: 4px; color: var(--cv-acc); }
.cv-cards p, .cv-cells p, .cv-flow p, .cv-num p, .cv-prod p, .cv-parties p { font-size: 15px; color: #4b4f58; }
.cv-lead { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.cv-cells { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cv-cells b { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -.03em; color: var(--cv-acc); }
.cv-cells span { display: block; margin: 4px 0; font-weight: 700; }
.cv-num { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cv-num li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #eceef1; }
.cv-num-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 28px; }
.cv-n { font: 500 14px "Geist Mono", monospace; color: var(--cv-acc); padding-top: 2px; }
.cv-num h4 { margin-bottom: 4px; }
.cv-who { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: #eef0f3; font-size: 12.5px; font-weight: 600; }
.cv-need { margin: 6px 0 !important; font-style: italic; color: #30333a !important; }
.cv-flow li { display: grid; gap: 6px; align-content: start; }
.cv-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.cv-split > div { padding: 18px; border-radius: 12px; background: #f5f6f8; }
.cv-split ul { margin: 0; padding-left: 18px; font-size: 15px; color: #30333a; }
.cv-stat-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 26px; align-items: start; }
.cv-stat b { display: block; font-size: clamp(40px, 5vw, 58px); line-height: 1; letter-spacing: -.04em; color: var(--cv-acc); }
.cv-stat span { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: #30333a; }
.cv-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #eef0f3; font-size: 13.5px; font-weight: 500; }
.cv-chips svg, .cv-list svg { width: 15px; height: 15px; flex: none; color: var(--cv-acc); }
.cv-take { margin-top: 12px !important; font-weight: 600; }
.cv-pic { margin: 22px 0 0; }
.cv-pic img, .cv-pic video { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #e6e8ec; background: #f1f2f4; }
.cv-pic figcaption { margin-top: 8px; font-size: 13px; color: #5b616c; }
.cv-gal { display: grid; gap: 12px; }
.cv-gal .cv-pic { margin: 0; }
.cv-gal.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cv-gal.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cv-launch { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; }
.cv-launch .cv-pic { margin: 0; }
.cv-launch > div > p:not(.cv-label) { margin-top: 10px; color: #4b4f58; }
.cv-dates { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cv-dates li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; }
.cv-dates li > span:first-child { display: grid; place-items: center; height: 62px; border-radius: 12px; background: #f5f6f8; font: 500 12px "Geist Mono", monospace; text-transform: uppercase; color: #5b616c; }
.cv-dates b { display: block; font: 700 24px Geist, sans-serif; line-height: 1; color: var(--cv-acc); }
.cv-dates li > span:last-child { display: grid; font-size: 14px; color: #4b4f58; }
.cv-dates strong { font-size: 15.5px; color: #17181c; }
.cv-parties { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cv-parties li { display: grid; gap: 6px; align-content: start; }
.cv-plate { display: grid; place-items: center; height: 92px; padding: 16px; border-radius: 12px; border: 1px solid #e6e8ec; background: #fff; }
.cv-plate img { max-width: 100%; max-height: 54px; object-fit: contain; }
.cv-prod { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cv-prod li { display: grid; gap: 6px; align-content: start; }
.cv-prod .cv-pic { margin: 0 0 6px; }
.cv-src { margin-top: 12px !important; font-size: 12.5px; color: #5b616c; }
.cv-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.cv-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: #4b4f58; }
.cv-list li svg { margin-top: 4px; }
.cv-list strong { color: #17181c; }
.cv-cta p { margin-top: 8px !important; color: #4b4f58; }
.cv-foot { display: flex; flex-wrap: wrap; gap: 10px; width: min(1120px, 100%); margin: 56px auto 0; padding: 24px clamp(18px, 4vw, 48px) 40px; border-top: 1px solid #e6e8ec; }
.cv-foot .pbtn:not(.primary) { color: #17181c; border-color: #c9cdd3; background: #fff; }
.cv-foot .pbtn:not(.primary):hover { background: #f1f2f4; }
/* the big arrows either side, in the margins: the previous and next case study (← and → do the same). On a narrow
   screen there's no margin, so the small arrows in the bar do it instead. */
.cv-side { display: none; }
@media (min-width: 900px) {
  .s-case:not(.solo) { --cvw: min(1320px, 100vw - 2 * clamp(100px, 9vw, 150px)); --sw: clamp(84px, 8vw, 120px); }
  .s-case:not(.solo) .cv { width: var(--cvw); }
  .s-case:not(.solo) .cv-nav { display: none; }
  .s-case:not(.solo) .cv-side { position: fixed; top: 50%; z-index: 1; display: grid; justify-items: center; gap: 10px; width: var(--sw); padding: 0; border: 0; background: none; color: var(--ink); text-align: center; cursor: pointer; transform: translateY(-50%); }
  .cv-prev { left: max(6px, calc((100vw - var(--cvw)) / 2 - var(--sw) - 12px)); }
  .cv-next { right: max(6px, calc((100vw - var(--cvw)) / 2 - var(--sw) - 12px)); }
}
.cv-ar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #17181c; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: transform .25s var(--pop), background .2s; }
.cv-ar svg { width: 28px; height: 28px; stroke-width: 2.2; }
.cv-prev .cv-ar svg { transform: rotate(180deg); }
.cv-side:hover .cv-ar { transform: scale(1.1); background: var(--accent); }
.cv-side:focus-visible { outline: none; }
.cv-side:focus-visible .cv-ar { transform: scale(1.1); background: var(--accent); outline: 3px solid var(--sel); outline-offset: 3px; }
.cv-st { display: grid; gap: 3px; max-width: 100%; }
.cv-st small { font: 500 11px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cv-st b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; }
.cv-side kbd { color: var(--dim); }

.nojs { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; }

/* ---------- smaller screens ---------- */
/* not much room: the chapters you're not in show just their number (the name is in the tooltip and the drop-down) */
@media (max-width: 1360px) {
  .journey li:not(.on) .j-t { display: none; }
  .journey li:not(.on) button { padding: 0 7px; }
}
@media (max-width: 980px) {
  .hud-btn span, .hud-ch small { display: none; }
  /* the chapter bar shows numbers only here; the drop-down on the left names the chapter */
  .journey li .j-t { display: none; }
  .journey li button { padding: 0 7px; }
  .hud-btn { width: 42px; padding: 0; justify-content: center; }
  .map-cols { grid-template-columns: 1fr; }
  .end-main { grid-template-columns: minmax(0, 1fr) minmax(180px, 230px); }
  .end-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hud { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "ch . sound pause min" "j j j j j"; gap: 8px; }
  .hud-l { grid-area: ch; }
  .hud-r { display: contents; }
  .hud-stats { display: none; }
  .hud-r [data-act="pause"] { grid-area: pause; } .hud-r [data-act="sound"] { grid-area: sound; } .hud-r .hud-min { grid-area: min; }
  .journey { grid-area: j; justify-self: stretch; }
  .journey ol { flex: 1; }
  .journey li.on { flex: 1; }
  .journey li.on button { width: 100%; }
  .j-t { font-size: 12px; }
  .journey li.on .j-t { display: inline; }
  .journey li.on button { padding: 0 12px 0 6px; }
  body:not(.touchui) .info { width: min(560px, calc(100vw - 306px)); }
  .hud-ch, .hud-btn { height: 40px; }
  .hud-btn { width: 40px; }
  .end-main { grid-template-columns: 1fr; }
  .end-cv { justify-self: center; width: min(250px, 72%); }
  .cv-launch, .cv-stat-row { grid-template-columns: 1fr; gap: 16px; }
  .cv-gal.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .cv-close span { display: none; }
  .cv-close { width: 38px; padding: 0; }
  .ml-rooms { padding-left: 12px; }
  .toasts { top: max(116px, calc(env(safe-area-inset-top) + 108px)); }
}
@media (max-width: 560px) {
  /* phones: the chapter bar shows numbers only (the drop-down above names the chapter), spread across the width */
  .journey .j-t, .journey li.on .j-t { display: none; }
  .journey ol { justify-content: space-between; }
  .journey li.on { flex: none; }
  .journey li.on button, .journey li:not(.on) button { width: auto; padding: 0 6px; }
  .screen { padding: 14px 12px; }
  .ml-go { grid-template-columns: 40px 1fr; }
  .ml-s { display: none; }
  .ml-n { width: 40px; height: 40px; font-size: 18px; }
  .cv-gal.cols-2 { grid-template-columns: 1fr; }
}
/* short landscape phones */
@media (max-height: 520px) {
  .hud { padding-top: max(8px, env(safe-area-inset-top)); }
  .hud-ch, .hud-btn, .hud-chip { height: 36px; }
  .hud-btn { width: 36px; }
  .journey { padding: 4px; }
  .journey li button, .j-skip { height: 30px; }
  .hud-dd small { display: none; }
  .hud-dd button { padding: 5px 8px; }
  .hud-dd b { width: 26px; height: 26px; font-size: 13px; }
  .btns { margin-top: 12px; }
  body.touchui .coach-keys kbd { min-width: 44px; height: 44px; font-size: 17px; }
  body.touchui .coach-keys kbd.wide { min-width: 64px; font-size: 14px; }
  body.touchui .coach-dots, body.touchui .coach-x { display: none; }
  body.touchui .coach { grid-template-areas: "keys txt"; }
  .touch button { width: 62px; height: 62px; }
  .touch .t-jump { width: 72px; height: 72px; font-size: 14px; }
  .touch .t-act { width: 56px; height: 56px; margin-bottom: 20px; }
  body.touchui .info { width: min(460px, calc(100vw - 330px)); }
  /* the end screen, squeezed so the buttons show without scrolling */
  .end-panel { padding: 18px 22px 20px; }
  .end-main { grid-template-columns: minmax(0, 1fr) 160px; gap: 24px; align-items: start; }
  .end-medal { width: 40px; margin-bottom: 4px; }
  .end-panel h2 { font-size: 28px; }
  .end-lede { font-size: 14px; }
  .end-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
  .end-stats li { padding: 7px 10px 6px; }
  .end-stats b { font-size: 17px; }
  .end-cta { margin-top: 14px; }
  .end-cv { width: auto; }
  .end-open { padding: 8px 0 10px; font-size: 13px; white-space: nowrap; }
  .end-again { margin-top: 16px; padding-top: 14px; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.98); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }