/* Point and Click Museum
   Layout idea: a period museum in pixel art. One room per page (timeline, studios, engines,
   techniques, minigames, arcade), a corridor of doors as navigation and classic screen
   transitions between rooms. Single theme by design: green walls, walnut, brass, parchment. */
:root {
  /* "Period museum" palette: bottle-green walls, walnut cabinets, brass, oxblood, verdigris and parchment,
     the colours of 80s and 90s adventure boxes and manuals. Screens stay black. No purple. */
  --ink: #14211c;        /* bottle-green wall: page background */
  --sky: #1b2d26;        /* top of the page gradient */
  --glow: #3a2616;       /* lamplight on the floor: bottom of the page */
  --panel: #2c1e14;      /* walnut cabinet */
  --panel2: #43301f;     /* raised walnut */
  --well: #0b1310;       /* recessed surfaces: terminals, inputs */
  --shade: #050907;      /* deepest tone: text shadows, screen bezels */
  --paper: #f1e2bf;      /* parchment text */
  --amber: #e8b04a;      /* brass */
  --rose: #c8553d;       /* oxblood red */
  --teal: #74c2a2;       /* verdigris: interactive / hover */
  --dim: #c9b896;        /* aged paper: muted text */
  --verb: #6ad16a;       /* classic verb green */
  --display: "Press Start 2P", "Courier New", monospace;
  --body: "VT323", "Courier New", monospace;
  --px: 4px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; color: var(--paper);
  background: var(--ink) linear-gradient(180deg, var(--sky) 0, var(--ink) 480px, var(--ink) 70%, var(--glow) 100%) no-repeat;
  background-attachment: fixed; min-height: 100vh;
  font-family: var(--body); font-size: 22px; line-height: 1.3;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M10 0h4v8h-4zM10 16h4v8h-4zM0 10h8v4H0zM16 10h8v4h-8z' fill='%23120d24'/%3E%3Cpath d='M11 1h2v6h-2zM11 17h2v6h-2zM1 11h6v2H1zM17 11h6v2h-6z' fill='%23f3e6c8'/%3E%3C/svg%3E") 12 12, crosshair;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: var(--well); }
a, button, [role="button"], canvas.clickable, input[type="range"], label.file {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M10 0h4v8h-4zM10 16h4v8h-4zM0 10h8v4H0zM16 10h8v4h-8z' fill='%23120d24'/%3E%3Cpath d='M11 1h2v6h-2zM11 17h2v6h-2zM1 11h6v2H1zM17 11h6v2h-6z' fill='%23ffb547'/%3E%3Crect x='10' y='10' width='4' height='4' fill='%23ef5d8a'/%3E%3C/svg%3E") 12 12, pointer;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; line-height: 1.45; margin: 0; }
h2 { font-size: clamp(15px, 3vw, 24px); color: var(--amber); }
h3 { font-size: 12px; color: var(--paper); }
p { margin: 0; max-width: 65ch; }
a { color: var(--teal); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--teal); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--amber); color: var(--ink); padding: 8px 12px; font-family: var(--display); font-size: 10px; }
.skip:focus { top: 8px; }

/* Pixel boxes: notched corners via stepped shadows */
.px {
  background: var(--panel);
  box-shadow: 0 calc(-1*var(--px)) 0 0 var(--c, var(--paper)), 0 var(--px) 0 0 var(--c, var(--paper)),
              calc(-1*var(--px)) 0 0 0 var(--c, var(--paper)), var(--px) 0 0 0 var(--c, var(--paper));
  margin: var(--px);
}
.pbtn {
  background: var(--panel2); border: 0; padding: 10px 14px; font-family: var(--display); font-size: 10px;
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink),
              inset -3px -3px 0 0 rgba(0,0,0,.35), inset 3px 3px 0 0 rgba(255,255,255,.12);
  color: var(--paper); margin: 3px; line-height: 1.4; text-decoration: none;
}
.pbtn:hover { background: #415b60; color: var(--amber); }
.pbtn:active { transform: translateY(2px); }
.pbtn[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.pbtn:disabled { opacity: .45; cursor: not-allowed; }
.pbtn.small { font-size: 9px; padding: 8px 10px; min-height: 36px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
section { padding-block: 56px 24px; scroll-margin-top: 56px; }
.sec-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin-bottom: 14px; }
.sec-head .room { font-family: var(--display); font-size: 10px; color: var(--rose); letter-spacing: 1px; }
.lead { color: var(--dim); margin-bottom: 18px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }


.lang-hint { background: var(--teal); color: var(--ink); font-size: 20px; padding: 8px var(--gutter-r) 8px var(--gutter-l); display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.lang-hint a { color: var(--ink); font-family: var(--display); font-size: 10px; }
.lang-hint button { background: none; border: 0; font-size: 22px; color: var(--ink); min-width: 36px; min-height: 36px; }

/* Hero */
.hero { padding-block: 22px 8px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 5fr 7fr; align-items: center; } .hero-intro { grid-column: 1 / -1; } }
.title { font-size: clamp(22px, 5vw, 48px); color: var(--amber); line-height: 1.3; text-shadow: 4px 4px 0 var(--rose), 8px 8px 0 var(--shade); }
@media (min-width: 1000px) { .title { font-size: clamp(28px, 3.4vw, 44px); } }
.title small { display: block; font-size: clamp(9px, 1.3vw, 12px); color: var(--teal); text-shadow: none; margin-top: 14px; letter-spacing: 2px; }
.tagline { color: var(--dim); margin-top: 14px; }
#heroCanvas { width: 100%; display: block; background: #000; aspect-ratio: 320 / 150; }
.scene-line { font-family: var(--display); font-size: 10px; color: var(--teal); min-height: 1.8em; padding: 8px 4px 0; }
.say { font-size: 23px; color: var(--paper); min-height: 2.6em; padding: 2px 4px; }
.hero-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 8px; }
.hero-intro .px { padding: 14px 16px; }
.hero-intro b { font-family: var(--display); font-size: 10px; color: var(--amber); display: block; margin-bottom: 6px; font-weight: 400; }

/* Timeline */
.eras { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.tl-outer { position: relative; }
.tl-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--dim); font-size: 19px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(27,43,46,.78); z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.modal-bg.open { display: flex; }
.pmodal { max-width: 720px; width: 100%; max-height: 88vh; max-height: 88dvh; overflow: auto; padding: 22px; position: relative; --c: var(--amber); }
.pmodal .mh { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; padding-right: 44px; }
.pmodal .mh img { width: 72px; height: 72px; flex: none; }
.pmodal .meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 12px 0; font-size: 20px; }
.pmodal .meta dt { color: var(--amber); font-family: var(--display); font-size: 9px; padding-top: 6px; }
.pmodal .meta dd { margin: 0; min-width: 0; }
.pmodal .fact { border-left: 4px solid var(--rose); padding-left: 10px; margin-top: 12px; }
.pmodal .close { position: absolute; top: 6px; right: 6px; }
.pmodal .nav { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .pmodal { padding: 16px; } .pmodal .mh img { width: 56px; height: 56px; } }

/* Studios */
.studios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.studio { padding: 14px; display: flex; flex-direction: column; gap: 8px; --c: var(--dim); }
.studio:hover { --c: var(--teal); }
.studio .top { display: flex; gap: 12px; align-items: center; }
.studio .logo { width: 96px; height: 56px; object-fit: contain; flex: none; image-rendering: auto; background: var(--paper); padding: 4px; box-shadow: 0 0 0 4px var(--shade); }
.logo.plate-dark { background: var(--shade) !important; }
.st-games-h { font-family: var(--display); font-size: 8px; color: var(--amber); display: block; margin-bottom: 6px; }
.st-games ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-games a { display: block; text-decoration: none; }
.st-games img { display: block; height: 56px; width: auto; image-rendering: auto; box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 2px var(--shade); transition: transform .12s steps(2); }
.st-games a:hover img, .st-games a:focus-visible img { transform: translateY(-3px); }
.st-games a:focus-visible { outline: 3px dashed var(--teal); outline-offset: 3px; }
.st-games .nc { display: grid; place-items: center; height: 56px; width: 42px; padding: 2px; font-size: 13px; line-height: 1; text-align: center; color: var(--dim); background: var(--well); box-shadow: 0 0 0 2px var(--shade); overflow: hidden; }
.studio .yrs { color: var(--dim); font-size: 18px; }
.studio .talked { font-family: var(--display); font-size: 8px; color: var(--teal); min-height: 1em; }
.dialog-box { --c: var(--teal); padding: 18px; margin-top: 22px; scroll-margin-bottom: 20px; }
.dlg-who { display: flex; gap: 14px; align-items: flex-start; }
.dlg-face { flex: none; display: block; }
.dlg-face .logo { width: 96px; height: 56px; object-fit: contain; image-rendering: auto; background: var(--paper); padding: 4px; }
.dlg-text { font-size: 24px; color: var(--amber); min-height: 3.6em; }
.dlg-opts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.dlg-opts button { background: none; border: 0; text-align: left; font-size: 22px; color: var(--paper); padding: 6px 4px; width: 100%; min-height: 40px; }
.dlg-opts button:hover, .dlg-opts button:focus-visible { color: var(--teal); background: rgba(79,214,200,.08); }
.dlg-opts button.used { color: var(--dim); }

/* Engines */
.engines { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 800px) { .engines { grid-template-columns: 1fr; } }
.carts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cart {
  border: 0; padding: 0 0 8px; background: var(--cc); color: var(--ink); text-align: center;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 0 0 rgba(255,255,255,.25); transition: transform .15s steps(3);
}
.cart::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(90deg, #c9b37a 0 6px, #8f7a45 6px 10px); margin-bottom: 8px; }
.cart .lbl .logo { display: block; width: 100%; height: 28px; object-fit: contain; image-rendering: auto; margin-bottom: 4px; }
.cart .lbl { display: block; margin: 0 8px; background: var(--paper); padding: 6px 4px; font-family: var(--display); font-size: 9px; line-height: 1.5; }
.cart .yr2 { font-size: 18px; display: block; margin-top: 4px; font-family: var(--body); }
.cart:hover { transform: translateY(-4px); }
.cart[aria-pressed="true"] { transform: translateY(6px); outline: 4px solid var(--amber); }
.console { padding: 0; --c: var(--dim); min-width: 0; }
.screen {
  background: #071a12; color: #7dffb0; font-size: 21px; padding: 18px; min-height: 340px; white-space: pre-wrap;
  position: relative; overflow: hidden; text-shadow: 0 0 6px rgba(125,255,176,.5); overflow-wrap: anywhere;
}
@media (max-width: 560px) { .screen { min-height: 260px; font-size: 19px; } }
.screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); pointer-events: none; }
.cur { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.console-base { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; font-family: var(--display); font-size: 9px; color: var(--dim); flex-wrap: wrap; }
.led { display: inline-block; width: 10px; height: 10px; background: #4a1c2a; margin-right: 8px; vertical-align: middle; }
.led.on { background: var(--rose); box-shadow: 0 0 8px var(--rose); }

/* Techniques */
.techs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.tech { padding: 16px; display: flex; flex-direction: column; gap: 10px; --c: var(--dim); min-width: 0; }
.tech canvas { width: 100%; display: block; background: #000; }
.tech .row { font-size: 19px; color: var(--dim); }
.tech input[type="range"] { accent-color: var(--amber); flex: 1; min-width: 120px; min-height: 32px; }
.wide { grid-column: 1 / -1; }
.ideas { columns: 2 300px; column-gap: 28px; font-size: 21px; padding-left: 20px; margin: 0; }
.ideas li { break-inside: avoid; margin-bottom: 10px; }
.ideas b { color: var(--amber); font-weight: 400; }

/* Minigames */
.games { display: grid; gap: 28px; }
.game { padding: 18px; --c: var(--rose); min-width: 0; }
@media (max-width: 560px) { .game { padding: 12px; } }
.game-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 12px; }
.game-head .how { color: var(--dim); font-size: 19px; }
.term { background: var(--well); padding: 14px; height: 340px; overflow-y: auto; font-size: 22px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .term { height: 280px; font-size: 20px; } }
.term .in { color: var(--amber); }
.term .sys { color: var(--teal); }
.term-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.term-form label { font-family: var(--display); font-size: 14px; color: var(--amber); }
.term-form input { flex: 1; background: var(--well); color: var(--amber); border: 0; font: inherit; font-size: 24px; padding: 8px 10px; box-shadow: 0 0 0 3px var(--panel2); min-width: 0; }
.scene { width: 100%; display: block; background: #000; touch-action: manipulation; }
.room-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; background: var(--well); padding: 10px; }
@media (max-width: 680px) { .room-ui { grid-template-columns: 1fr; } }
.room-sentence { grid-column: 1 / -1; text-align: center; color: var(--teal); font-size: 24px; min-height: 1.3em; }
.verbgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.verbgrid button { background: none; border: 0; color: var(--verb); font-size: 24px; text-align: left; padding: 4px 6px; min-height: 40px; }
.verbgrid button:hover { color: var(--amber); }
.verbgrid button[aria-pressed="true"] { color: var(--amber); background: rgba(255,181,71,.12); }
.inv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.inv button { background: var(--panel); border: 0; height: 56px; display: grid; place-items: center; padding: 0; }
.inv button img { width: 40px; height: 40px; }
.inv button[aria-pressed="true"] { outline: 3px solid var(--amber); }
.room-msg { font-size: 24px; color: var(--amber); min-height: 2.6em; padding: 10px 4px 0; }
.hunt-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 8px 0; font-family: var(--display); font-size: 10px; }
.hunt-bar .t { color: var(--amber); font-variant-numeric: tabular-nums; }
.order-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin: 14px 0; }
.ord { border: 0; background: var(--panel2); padding: 12px; text-align: left; display: flex; gap: 10px; align-items: center; min-height: 80px; position: relative; }
.ord img { height: 56px; width: auto; flex: none; image-rendering: auto; box-shadow: 0 0 0 2px var(--shade); }
.ord .slot { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; background: var(--amber); color: var(--ink); font-family: var(--display); font-size: 12px; display: none; place-items: center; }
.ord.picked .slot { display: grid; }
.ord.ok { box-shadow: 0 0 0 4px var(--teal); }
.ord.bad { box-shadow: 0 0 0 4px var(--rose); }
.ord .yr3 { display: none; color: var(--amber); font-family: var(--display); font-size: 10px; margin-top: 4px; }
.ord.reveal .yr3 { display: block; }
.result { font-size: 23px; color: var(--amber); min-height: 1.4em; }

/* Arcade */
.arcade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .arcade { grid-template-columns: 1fr; } }
.dos-frame { --c: var(--amber); padding: 0; background: #000; min-width: 0; }
.dos-screen { position: relative; aspect-ratio: 4 / 3; width: 100%; background: #000; overflow: hidden; }
.dos-screen > .dos-host { position: absolute; inset: 0; }
.dos-idle { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--dim); font-size: 22px; }
.dos-idle b { display: block; font-family: var(--display); font-weight: 400; color: var(--amber); font-size: 12px; margin-bottom: 12px; }
.dos-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--panel); }
.dos-bar .now { font-family: var(--display); font-size: 9px; color: var(--teal); }
.dos-list { display: grid; gap: 12px; }
.dos-game { padding: 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; --c: var(--dim); }
.dos-game img { width: 40px; height: 40px; grid-row: span 2; }
.dos-game h3 { font-size: 10px; }
.dos-game .meta { color: var(--dim); font-size: 17px; }
.dos-game p { grid-column: 1 / -1; font-size: 19px; }
.dos-game .row { grid-column: 1 / -1; }
/* real box art (data/media.json or found by tools/games_inbox.py), with its credit */
.dos-game[data-cover] { grid-template-columns: 64px minmax(0, 1fr); }
.dos-game img.cover { width: 64px; height: auto; max-height: 88px; object-fit: contain; align-self: start; grid-row: span 2;
  image-rendering: auto; box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 2px var(--shade); }
.dos-game .credit { grid-column: 1 / -1; font-size: 13px; line-height: 1.2; color: var(--dim); overflow-wrap: anywhere; }
.dos-game .credit a { color: var(--teal); }
.cat-none { padding: 14px; background: var(--well); color: var(--dim); font-size: 19px; }
.dos-help output { min-width: 3.5ch; font-variant-numeric: tabular-nums; color: var(--paper); }
.chip { font-family: var(--display); font-size: 8px; padding: 4px 6px; background: var(--panel2); color: var(--teal); }
.chip.warn { color: var(--amber); }
.byo { padding: 14px; --c: var(--teal); display: grid; gap: 10px; }
.byo label { font-size: 19px; color: var(--dim); display: grid; gap: 4px; }
.byo input[type="text"] { background: var(--well); color: var(--amber); border: 0; font: inherit; font-size: 22px; padding: 6px 10px; box-shadow: 0 0 0 3px var(--panel2); min-width: 0; }
.byo input[type="file"] { font: inherit; font-size: 18px; color: var(--paper); max-width: 100%; }
.byo .err { color: var(--rose); }


/* Toast + CRT */
.ptoast { position: fixed; top: calc(54px + env(safe-area-inset-top, 0px)); right: var(--gutter-r); z-index: 120; display: grid; gap: 8px; pointer-events: none; }
.ptoast div { background: var(--amber); color: var(--ink); font-family: var(--display); font-size: 10px; padding: 10px 12px; animation: pop 2.6s steps(6) forwards; box-shadow: 4px 4px 0 var(--shade); max-width: min(300px, 80vw); line-height: 1.5; }
@keyframes pop { 0% { transform: translateX(120%); } 10%, 85% { transform: translateX(0); } 100% { transform: translateX(120%); } }
body.crt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background: repeating-linear-gradient(0deg, rgba(19,28,30,.12) 0 2px, transparent 2px 4px),
              radial-gradient(ellipse at center, transparent 65%, rgba(19,28,30,.28) 100%);
}
.cert { text-align: center; }
.cert h3 { color: var(--amber); font-size: 16px; margin: 12px 0; }
noscript p { background: var(--rose); color: var(--ink); padding: 10px; margin: 10px 0; }
.studio .top > div { min-width: 0; }
.studio h3, .dos-game h3, .pmodal h3 { overflow-wrap: anywhere; }

/* ===== Multi-page layout ===== */
.room-page { padding-block: 28px 12px; }
.crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 19px; color: var(--dim); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--rose); }
.crumbs a { color: var(--dim); text-decoration: none; border-bottom: 1px dashed currentColor; }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--paper); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.page-head img { width: 48px; height: 48px; }
.page-head .room { font-family: var(--display); font-size: 10px; color: var(--rose); letter-spacing: 1px; }
.page-head h1 { font-size: clamp(18px, 3.6vw, 30px); color: var(--amber); text-shadow: 3px 3px 0 var(--shade); }
.how { color: var(--dim); font-size: 20px; margin-bottom: 12px; }
.pbtn.ghost { background: transparent; box-shadow: inset 0 0 0 3px var(--panel2); }
.pbtn.ghost:hover { box-shadow: inset 0 0 0 3px var(--teal); }

.hero-stage { min-width: 0; }
.stage-frame { --c: var(--panel2); padding: 0; background: #000; }
.hero-cta { margin-top: 18px; gap: 10px; }
.map { padding-block: 24px 8px; }
.map h2 { margin-bottom: 8px; }
.room-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 10px 0 26px; }
.room-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 4px 14px; padding: 16px; color: var(--paper); text-decoration: none; --c: var(--panel2); transition: transform .12s steps(2); }
.room-card img { width: 48px; height: 48px; grid-row: span 2; }
.room-card .room { font-family: var(--display); font-size: 9px; color: var(--rose); align-self: end; }
.room-card h3 { font-size: 12px; color: var(--amber); align-self: start; }
.room-card p { grid-column: 1 / -1; color: var(--dim); font-size: 19px; }
.room-card .go { grid-column: 1 / -1; font-family: var(--display); font-size: 9px; color: var(--teal); }
.room-card:hover, .room-card:focus-visible { --c: var(--teal); transform: translateY(-4px); background: var(--panel2); }

.room-nav { display: flex; justify-content: space-between; gap: 12px; padding-block: 28px 8px; flex-wrap: wrap; }
.room-nav .rn { display: grid; gap: 4px; padding: 12px 16px; background: var(--panel); color: var(--paper); text-decoration: none; min-width: min(100%, 220px); box-shadow: inset 0 0 0 3px var(--panel2); }
.room-nav .rn small { font-family: var(--display); font-size: 9px; color: var(--teal); }
.room-nav .rn.next { text-align: right; margin-left: auto; }
.room-nav .rn:hover { box-shadow: inset 0 0 0 3px var(--amber); color: var(--amber); }


a.ext { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(79,214,200,.4); white-space: nowrap; }
a.ext:hover { color: var(--amber); border-color: var(--amber); }

/* timeline: one axis, era signs and a stop per game (no boxes) */
.tl-count { color: var(--dim); margin: 6px 0 10px; }
.era-range { color: var(--dim); }
.tl { position: relative; padding: 8px 0 40px; --axis: 50%; }
.tl::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--axis) - 2px); width: 4px;
  background: repeating-linear-gradient(180deg, var(--wall) 0 8px, transparent 8px 16px);
}
.tl-era { position: relative; padding-bottom: 12px; }
.tl-sign {
  position: relative; z-index: 1; max-width: 600px; margin: 48px auto 28px; padding: 14px 20px 16px; text-align: center;
  background: var(--ink); border-top: 4px solid var(--ec); border-bottom: 4px solid var(--ec);
  box-shadow: -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 8px 0 -4px var(--shade);
}
.tl-range { font-family: var(--display); font-size: 10px; color: var(--amber); letter-spacing: 1px; }
.tl-sign h2 { font-size: 16px; color: var(--ec); margin: 8px 0 6px; }
.tl-sign p { margin: 0 auto; color: var(--dim); font-size: 20px; line-height: 1.2; max-width: 52ch; text-wrap: pretty; }
.tl-n { display: inline-block; margin-top: 8px; font-size: 17px; color: var(--paper); opacity: .75; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-decade { position: relative; z-index: 1; text-align: center; margin: 22px 0 18px; }
.tl-decade span { font-family: var(--display); font-size: 10px; color: var(--paper); background: var(--ink); padding: 6px 10px; box-shadow: 0 0 0 2px var(--wall); }
.tl-item { position: relative; width: 50%; min-height: 72px; display: flex; align-items: center; gap: 10px; }
.tl-item + .tl-item { margin-top: -22px; }
.tl-item.r { margin-left: 50%; padding-left: 22px; }
.tl-item.l { flex-direction: row-reverse; padding-right: 22px; text-align: right; }
.tl-item::before { content: ""; position: absolute; top: calc(50% - 2px); width: 18px; height: 4px; background: var(--wall); }
.tl-item.r::before { left: 0; }
.tl-item.l::before { right: 0; }
.tl-node { position: absolute; top: calc(50% - 7px); width: 14px; height: 14px; background: var(--ink); box-shadow: 0 0 0 4px var(--ec, var(--amber)); z-index: 1; }
.tl-era .tl-node { box-shadow: 0 0 0 4px var(--ec); }
.tl-item.r .tl-node { left: -7px; }
.tl-item.l .tl-node { right: -7px; }
.tl-item.seen .tl-node { background: var(--ec); }
.tl-year { font-family: var(--display); font-size: 11px; color: var(--ec); flex: none; }
.tl-entry {
  all: unset; display: flex; align-items: center; gap: 12px; padding: 4px 6px; min-width: 0; max-width: 380px;
  text-align: inherit; flex-direction: inherit; color: var(--paper);
}
.tl-entry:focus-visible { outline: 3px dashed var(--teal); outline-offset: 2px; }
.tl-cover { height: 64px; width: auto; flex: none; image-rendering: auto; box-shadow: 0 0 0 2px var(--shade), 4px 4px 0 2px var(--shade); transition: transform .12s steps(2); }
.tl-text { display: flex; flex-direction: column; min-width: 0; }
.tl-title { font-size: 25px; line-height: 1; overflow-wrap: anywhere; }
.tl-meta { font-size: 18px; color: var(--dim); line-height: 1.1; margin-top: 3px; }
.tl-entry:hover .tl-title, .tl-entry:focus-visible .tl-title { color: var(--amber); text-decoration: underline 2px; text-underline-offset: 3px; }
.tl-entry:hover .tl-cover { transform: translateY(-3px); }
.tl-item:hover .tl-node, .tl-item:focus-within .tl-node { background: var(--amber); }
.tl-item.seen .tl-title::after { content: " \2713"; color: var(--teal); font-size: 20px; }
.tl-item.pre { opacity: 0; transform: translateX(var(--from, 16px)); transition: opacity .3s steps(4), transform .3s steps(4); }
.tl-item.l.pre { --from: -16px; }
.tl-item.pre.in { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .tl { --axis: 14px; }
  .tl-sign { margin: 36px 0 18px 30px; text-align: left; padding: 12px 14px 14px; }
  .tl-sign p { margin: 0; }
  .tl-decade { text-align: left; margin-left: 0; }
  .tl-item, .tl-item.l, .tl-item.r { width: auto; margin-left: 14px; padding-left: 24px; padding-right: 0; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 0; }
  .tl-item + .tl-item { margin-top: 14px; }
  .tl-item::before, .tl-item.l::before { left: 0; right: auto; top: 10px; }
  .tl-node, .tl-item.l .tl-node, .tl-item.r .tl-node { left: -7px; right: auto; top: 5px; }
  .tl-entry { flex-direction: row; padding-left: 0; max-width: none; }
  .tl-item.l.pre { --from: 16px; }
}

/* real images with their credits (covers, screenshots, logos) */
.media { margin: 0; min-width: 0; }
.media img { display: block; width: 100%; height: auto; image-rendering: auto; box-shadow: 0 0 0 2px var(--shade), 4px 4px 0 2px var(--shade); background: var(--well); }
.media-screenshot img { image-rendering: pixelated; }
.media figcaption { font-size: 15px; line-height: 1.2; color: var(--dim); margin-top: 8px; overflow-wrap: anywhere; }
.media figcaption cite { font-style: normal; color: var(--paper); }
.media figcaption a { color: var(--teal); }
.media-cap { font-family: var(--display); font-size: 8px; color: var(--amber); }
.monogram { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; font-family: var(--display); font-size: 15px; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 4px var(--shade); }

/* the game record (modal) */
.sheet-head { padding-right: 44px; margin-bottom: 14px; }
.sheet-era { display: block; font-size: 18px; color: var(--dim); }
.sheet-head .m-year { color: var(--ec); }
.sheet-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; align-items: start; }
.sheet.no-cover .sheet-body { grid-template-columns: minmax(0, 1fr); }
.sheet-info .meta { margin-top: 0; }
.sheet-info p { margin: 10px 0 0; }
.sheet-shot { margin-top: 18px; }
.sheet-src { font-family: var(--display); font-size: 9px; color: var(--amber); }
@media (max-width: 560px) {
  .sheet-body { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .sheet-cover figcaption { font-size: 13px; }
}
.pmodal h3#mTitle { font-size: 14px; margin-top: 6px; }
.m-link { margin-top: 14px; }

.studio-actions { justify-content: space-between; }
.dlg-link { margin-top: 8px; font-size: 20px; }
.eng-media { padding: 0 14px 14px; }

/* interface lab (techniques) */
.ui-tabs { gap: 6px; }
#palCanvas { width: 100%; height: auto; image-rendering: pixelated; }
#palCredit figcaption { margin-top: 0; }
#prCanvas:focus-visible { outline: 3px dashed var(--teal); }
.ui-tabs [aria-selected="true"] { background: var(--amber); color: var(--ink); }
.ui-desc { margin: 10px 0 14px; max-width: 75ch; }
.ui-lab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
@media (max-width: 899px) { .ui-lab { grid-template-columns: minmax(0, 1fr); } }
.ui-real .media img { image-rendering: pixelated; }
.ui-tag { font-family: var(--display); font-size: 8px; color: var(--amber); display: block; margin-bottom: 6px; }
.ui-note { font-size: 16px; color: var(--dim); margin: 8px 0 0; }
.ui-stage { position: relative; }
.ui-screen { background: #000; }
.ui-screen { position: relative; }
.ui-screen canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: none; touch-action: none; }
@media (pointer: coarse) { .ui-screen canvas { cursor: auto; } }
.ui-say { position: absolute; left: 4%; right: 4%; top: 6px; text-align: center; font-size: 21px; line-height: 1.1; color: #f3e6c8; text-shadow: 2px 2px 0 #000; pointer-events: none; opacity: 0; }
.ui-say.on { opacity: 1; }
.st-mm .ui-say { color: #f3e6c8; } .st-mi1 .ui-say, .st-mi2 .ui-say { color: #ffffff; }
.st-twobutton .ui-say { top: auto; bottom: 6px; color: #f3e6c8; }
.ui-panel { background: #000; padding: 4px 8px 8px; font-size: 20px; line-height: 1.05; }
.ui-sentence { min-height: 1.1em; text-align: center; }
.ui-bottom { display: flex; gap: 16px; align-items: flex-start; }
.ui-verbs { display: grid; gap: 0 16px; }
.ui-verbs button { all: unset; cursor: pointer; white-space: nowrap; }
.ui-verbs button:focus-visible { outline: 2px dashed var(--teal); }
.ui-inv { display: flex; flex-direction: column; min-width: 0; }
.ui-inv button { all: unset; cursor: pointer; }
/* Maniac Mansion: magenta sentence, green verbs, yellow highlight; five columns */
.st-mm .ui-sentence { text-align: left; color: #ff55ff; }
.st-mm .ui-bottom { flex-direction: column; gap: 4px; }
.st-mm .ui-inv { flex-direction: row; gap: 0 18px; flex-wrap: wrap; }
.st-mm .ui-verbs button { color: #00aa00; }
.st-mm .ui-verbs button.on, .st-mm .ui-verbs button:hover { color: #ffff55; }
.st-mm .ui-inv button { color: #aa00aa; }
/* Monkey Island (EGA): cyan sentence, green verbs, magenta text inventory */
.st-mi1 .ui-sentence { color: #00aaaa; }
.st-mi1 .ui-verbs button { color: #00aa00; }
.st-mi1 .ui-verbs button.on, .st-mi1 .ui-verbs button:hover { color: #55ff55; }
.st-mi1 .ui-inv button { color: #aa00aa; }
/* Monkey Island 2: boxed purple verbs, icon inventory */
.st-mi2 .ui-sentence { color: #b48ad6; }
.st-mi2 .ui-verbs { gap: 3px; }
.st-mi2 .ui-verbs button { color: #8a5aa8; background: #1c0f24; padding: 2px 8px; text-align: center; }
.st-mi2 .ui-verbs button.on, .st-mi2 .ui-verbs button:hover { color: #e6c4ff; }
.st-mi2 .ui-inv { display: grid; grid-template-columns: repeat(4, 36px); gap: 3px; }
.st-mi2 .inv-slot { display: grid; place-items: center; width: 36px; height: 30px; background: #1c0f24; }
.st-mi2 .inv-slot canvas { width: 24px; height: 24px; image-rendering: pixelated; }
@media (max-width: 560px) { .ui-panel { font-size: 17px; } .ui-verbs { gap: 0 8px; } .st-mi2 .ui-inv { grid-template-columns: repeat(4, 26px); } .st-mi2 .inv-slot { width: 26px; height: 24px; } }
/* Full Throttle / Curse of Monkey Island inventory (right button) */
.ui-invpop { position: absolute; right: 6%; top: 18%; min-width: 34%; padding: 10px 14px; font-size: 19px; }
.st-ft .ui-invpop { background: #2a1a10; color: #efe6cf; border-radius: 40% 40% 30% 30%; box-shadow: 0 0 0 3px #ff7a1a; }
.st-cmi .ui-invpop { background: #5a3418; color: #f2cf63; box-shadow: 0 0 0 3px #e6b84a, 0 0 0 6px #3a2010; }
.ui-invpop span { font-family: var(--display); font-size: 8px; display: block; margin-bottom: 6px; }
.ui-invpop button { all: unset; cursor: pointer; display: block; }
.ui-hint { font-size: 16px; color: var(--dim); background: var(--well); margin: 0; padding: 4px 8px; }
/* Broken Sword / Machinarium: inventory bar at the top edge */
.ui-invtop { position: absolute; left: 0; right: 0; top: 0; background: rgba(19,28,30,.85); padding: 4px 8px; transform: translateY(-100%); opacity: 0; transition: transform .12s steps(2), opacity .12s steps(2); }
.ui-invtop.show, .ui-invtop:hover { transform: none; opacity: 1; }
.ui-invtop button { all: unset; cursor: pointer; color: #ffd75a; font-size: 19px; margin-right: 12px; }
.ui-reset { margin: 10px 0 0; }
.zork { background: #000; color: #d8d8d8; font-size: 20px; padding: 10px 12px; }
.zork pre { margin: 0; white-space: pre-wrap; font: inherit; max-height: 260px; overflow-y: auto; }
.zork form { display: flex; gap: 6px; margin-top: 4px; }
.zork input { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; font: inherit; outline: none; }
.zork input:focus-visible { outline: 1px dashed var(--teal); }
.eng-media .eng-shot { max-width: 440px; }
.eng-media .eng-logo img { width: auto; max-width: 100%; max-height: 120px; background: var(--paper); padding: 8px; }
.console-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 14px 12px; font-size: 20px; min-height: 1.2em; }
.list-details { margin-top: 26px; padding: 14px 18px; --c: var(--panel2); }
.credits ul { margin: 10px 0 0; padding-left: 20px; font-size: 17px; line-height: 1.25; color: var(--dim); }
.credits li { margin: 4px 0; overflow-wrap: anywhere; }
.credits b { color: var(--paper); font-weight: 400; }
.credits cite { font-style: normal; }
.credits a { color: var(--teal); }
.credits > p { font-size: 18px; color: var(--dim); margin: 10px 0 0; }
.list-details summary { font-family: var(--display); font-size: 10px; color: var(--amber); cursor: pointer; }
.eng-list { margin: 14px 0 0; display: grid; gap: 12px; }
.eng-list dt { font-family: var(--display); font-size: 11px; color: var(--paper); }
.eng-list dt small { font-family: var(--body); font-size: 18px; color: var(--dim); margin-left: 8px; }
.eng-list dd { margin: 0; color: var(--dim); white-space: pre-line; display: grid; gap: 6px; }

/* arcade */
.dos-player { position: absolute; inset: 0; }
.dos-help { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px 12px; background: var(--panel); color: var(--dim); font-size: 19px; }
.dos-help input { accent-color: var(--amber); width: 130px; }
.dos-screen.locked { outline: 3px solid var(--teal); }
.page-head h1, .room-card h3, @media (max-width: 560px) {
  .page-head h1 { font-size: clamp(14px, 5vw, 20px); flex-basis: 100%; }
  .crumbs ol { font-size: 17px; }
}

/* ===== DOSBox catalogue ===== */
.cat-title { font-size: 13px; color: var(--amber); margin-bottom: 10px; }
.cat-tools { display: grid; gap: 8px; margin-bottom: 8px; }
.cat-tools input[type="search"], .cat-tools select {
  background: var(--well); color: var(--paper); border: 0; font: inherit; font-size: 20px; padding: 6px 10px;
  box-shadow: 0 0 0 3px var(--panel2); min-width: 0; max-width: 100%;
}
.cat-tools input[type="search"] { color: var(--amber); width: 100%; }
.cat-tools .row select { flex: 1 1 140px; }
.letters { display: flex; flex-wrap: wrap; gap: 2px; }
.letters button { background: var(--panel); border: 0; color: var(--paper); font-family: var(--display); font-size: 9px; min-width: 26px; min-height: 28px; padding: 4px 6px; }
.letters button:hover:not(:disabled) { color: var(--amber); }
.letters button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.letters button:disabled { opacity: .3; cursor: default; }
/* catalogue pages */
.cat-pages { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; margin-top: 12px; }
.cat-pages button { background: var(--panel); border: 0; color: var(--paper); font-family: var(--display); font-size: 9px; min-width: 32px; min-height: 32px; padding: 4px 8px; }
.cat-pages button:hover:not(:disabled) { color: var(--amber); }
.cat-pages button[aria-current="page"] { background: var(--amber); color: var(--ink); }
.cat-pages button:disabled { opacity: .3; cursor: default; }
.cat-pages span { color: var(--dim); padding: 0 2px; }
.cat-count { color: var(--dim); font-size: 18px; margin: 4px 0 8px; }
.cat-list { display: grid; gap: 12px; align-content: start; }
/* the catalogue goes page by page (10 games): no inner scroll box */
@media (min-width: 901px) { .cat-list { padding: 6px 6px 6px 2px; } }
.cat-list .dos-game p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-empty { color: var(--rose); font-size: 20px; }
.chip.local { color: var(--rose); }
.byo-wrap { background: var(--panel); padding: 10px 12px; }
.byo-wrap summary { font-family: var(--display); font-size: 10px; color: var(--teal); cursor: pointer; }
.byo-wrap .byo { padding: 10px 0 4px; }
/* long catalogues: compact rows, 2 columns on tablets */
.cat-list.compact { gap: 8px; }
.cat-list.compact .dos-game { padding: 8px 10px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.cat-list.compact .dos-game img { width: 32px; height: 32px; grid-row: span 2; }
.cat-list.compact .dos-game[data-cover] { grid-template-columns: 40px minmax(0, 1fr) auto; }
.cat-list.compact .dos-game img.cover { width: 40px; height: auto; max-height: 56px; grid-row: span 3; }
.cat-list.compact .dos-game .credit { grid-column: 2 / -1; font-size: 12px; }
.cat-list.compact .dos-game h3 { font-size: 9px; line-height: 1.5; }
.cat-list.compact .dos-game .meta { font-size: 16px; grid-column: 2; }
.cat-list.compact .dos-game p { display: none; }
.cat-list.compact .dos-game .row { grid-column: 3; grid-row: 1 / span 2; }
.cat-list.compact .dos-game .row .ext { display: none; }
/* catalogue cards (state, reason, shop link): their actions go on a line of their own under the title */
.cat-list.compact .dos-game[data-status] .row { grid-column: 2 / -1; grid-row: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.cat-list.compact .dos-game[data-status] .row .ext { display: inline; font-size: 16px; }
.cat-list.compact .dos-game[data-status] .row .pbtn { margin: 2px 0; }
.dos-game .why { font-size: 15px; color: var(--dim); line-height: 1.1; }
.chip.state.playable { color: var(--ink); background: var(--teal); }
.chip.state.pending { color: var(--amber); }
.chip.state.record { color: var(--dim); }
.dos-game[data-status="record"] h3 { color: var(--dim); }
.tl-play { display: block; margin-top: 3px; font-size: 15px; color: var(--teal); }
.m-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; }
.m-actions .pbtn { text-decoration: none; }
@media (min-width: 600px) and (max-width: 900px) { .cat-list.compact { grid-template-columns: 1fr 1fr; } }
.svm-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.chip.engine { color: var(--amber); }
.byo select { background: var(--well); color: var(--paper); border: 0; font: inherit; font-size: 20px; padding: 6px 10px; box-shadow: 0 0 0 3px var(--panel2); }

/* ===== Screen transitions (src/js/transitions.js) ===== */
.pcm-wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9000; pointer-events: none; display: none;
  image-rendering: pixelated; image-rendering: crisp-edges; }
.pcm-wipe.on { display: block; pointer-events: auto; }
html.pcm-wipe-in::after { content: ""; position: fixed; inset: 0; z-index: 9001; background: #0b1112; }

/* ===================================================================
   Navigation: a corridor of doors (header), the museum floor plan (map
   panel), the "in this room" strip and the footer.
   =================================================================== */
:root { --hd-h: 76px; --sub-h: 0px; --wall: #7f9a87; }
[id] { scroll-margin-top: calc(var(--hd-h) + var(--sub-h) + 16px); }

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 80; overflow-anchor: none;
  background: var(--well); border-bottom: 4px solid var(--panel2); box-shadow: 0 4px 0 rgba(19,28,30,.35);
}
.hd-bar {
  max-width: 1320px; margin: 0 auto; min-height: 64px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand doors tools";
  align-items: stretch; gap: 0 18px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  transition: min-height .2s steps(4);
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; padding-block: 8px; }
.brand img { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--display); font-size: 9px; line-height: 1.7; color: var(--dim); white-space: nowrap; }
.brand-name b { display: block; font-weight: 400; font-size: 14px; color: var(--amber); text-shadow: 2px 2px 0 var(--shade); }
.brand:hover .brand-name b { color: var(--paper); }

/* the doors */
.doors { grid-area: doors; min-width: 0; }
.doors > ul { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; gap: 4px; }
.door { position: relative; display: flex; align-items: stretch; }
.door-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; color: var(--paper); text-decoration: none;
  border-bottom: 4px solid transparent; margin-bottom: -4px; position: relative;
  transition: background-color .15s steps(3), border-color .15s steps(3);
}
.door-link img { width: 28px; height: 28px; flex: none; }
.door-text { display: grid; line-height: 1.1; }
.door-room { font-size: 16px; color: var(--dim); }
.door-name { font-family: var(--display); font-size: 10px; line-height: 1.6; white-space: nowrap; }
.door-link:hover, .door-link:focus-visible { background: rgba(243,230,200,.07); border-bottom-color: var(--panel2); }
.door.here > .door-link { color: var(--amber); border-bottom-color: var(--amber);
  background: linear-gradient(180deg, rgba(255,181,71,0) 10%, rgba(255,181,71,.24) 100%); }
.door.here > .door-link img { filter: drop-shadow(0 0 6px rgba(255,181,71,.65)); }
.door.here .door-room { color: var(--paper); }

.sub-toggle { background: none; border: 0; color: var(--dim); padding: 0 6px; font-size: 18px; min-width: 28px; }
.sub-toggle:hover, .door.open .sub-toggle { color: var(--amber); }
.sub { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: none; min-width: 340px;
  background: var(--panel); padding: 8px; box-shadow: 0 0 0 4px var(--panel2), 6px 6px 0 4px var(--shade); }
.door.open .sub { display: block; }
@media (hover: hover) and (pointer: fine) { .door.has-sub:hover .sub { display: block; } }
.sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sub a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; color: var(--paper); text-decoration: none; }
.sub a:hover, .sub a:focus-visible, .sub a[aria-current] { background: rgba(243,230,200,.08); }
.sub a[aria-current] b { color: var(--amber); }
.sub b { display: block; font-family: var(--display); font-size: 9px; font-weight: 400; line-height: 1.6; }
.sub small { display: block; font-size: 17px; color: var(--dim); line-height: 1.15; }

/* tools: score, language, sound, CRT, map */
.hd-tools { grid-area: tools; display: flex; align-items: center; gap: 6px; padding-block: 8px; }
.score-chip { display: grid; grid-template-columns: 20px auto; grid-template-areas: "i t" "i b"; gap: 2px 8px; align-items: center;
  padding: 4px 10px; color: var(--paper); text-decoration: none; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-chip img { grid-area: i; width: 20px; height: 20px; }
.score-chip #score { grid-area: t; line-height: 1; }
.score-bar { grid-area: b; height: 4px; background: var(--panel); display: block; min-width: 80px; }
.score-bar span { display: block; height: 100%; width: 0; background: var(--amber); transition: width .4s steps(8); }
.score-chip:hover #score { color: var(--amber); }
.tool, .lang-menu summary { width: 40px; height: 40px; display: inline-grid; place-items: center; background: var(--panel); border: 0; padding: 0; position: relative; }
.tool img, .lang-menu summary img { width: 22px; height: 22px; }
.tool:hover, .lang-menu summary:hover { background: var(--panel2); }
.tool[aria-pressed="false"] img { opacity: .45; }
.tool[aria-pressed="false"]::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; background: var(--rose); transform: rotate(-45deg); }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; width: auto; grid-auto-flow: column; gap: 6px; padding: 0 10px; font-family: var(--display); font-size: 9px; color: var(--paper); cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; list-style: none; margin: 0; padding: 6px; min-width: 170px;
  background: var(--panel); box-shadow: 0 0 0 4px var(--panel2), 6px 6px 0 4px var(--shade); }
.lang-menu a { display: block; padding: 6px 10px; color: var(--paper); text-decoration: none; font-size: 20px; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(243,230,200,.08); }
.lang-menu a[aria-current] { color: var(--amber); }
.map-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; background: var(--amber); color: var(--ink);
  font-family: var(--display); font-size: 9px; box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.map-btn img { width: 22px; height: 22px; }
.map-btn:hover { background: var(--paper); }

/* compact header after scrolling */
.site-header.compact .hd-bar { min-height: 60px; }
.site-header.compact .door-room { display: none; }
.site-header.compact .brand img { width: 32px; height: 32px; }

/* doors on their own row at every width: six rooms plus the tools never fit in one */
@media all {
  .hd-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "doors doors"; }
  .doors { border-top: 2px solid var(--panel); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); }
  .doors > ul { justify-content: space-between; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter-l) var(--gutter-r); }
  .doors > ul::-webkit-scrollbar { display: none; }
  .door-link { padding: 8px 10px 6px; }
  .door.has-sub { position: static; }
  .sub { left: auto; right: var(--gutter-r); }
  .site-header.compact .doors { display: none; }
}
@media (max-width: 900px) { .door-link { flex-direction: column; gap: 4px; text-align: center; } .door-room { display: none; } .door-name { font-size: 9px; } }
/* phones: the map holds the rooms, languages and settings */
@media (max-width: 759px) {
  .hd-bar { grid-template-areas: "brand tools"; min-height: 64px; gap: 0 8px; }
  .doors, .hd-tools .lang-menu, .hd-tools .tool { display: none; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 7px; } .brand-name b { font-size: 11px; }
  .score-chip { padding: 4px 6px; font-size: 16px; } .score-bar { min-width: 56px; }
  .map-btn { padding: 0 10px; }
}
@media (max-width: 380px) { .brand-name { display: none; } }

/* "in this room" strip */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hd-h)); z-index: 70; background: rgba(52,76,81,.96); border-bottom: 2px solid var(--panel2); }
.subnav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.subnav-label { color: var(--dim); font-size: 18px; white-space: nowrap; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 8px 12px 6px; color: var(--paper); text-decoration: none; font-size: 20px; white-space: nowrap; border-bottom: 4px solid transparent; }
.subnav a:hover { border-bottom-color: var(--panel2); }
.subnav a[aria-current="true"] { color: var(--amber); border-bottom-color: var(--amber); }
@media (max-width: 559px) { .subnav-label { display: none; } }

/* the museum map: a floor plan */
html.map-open { overflow: hidden; }
.map-panel { position: fixed; inset: 0; z-index: 300; background: rgba(19,28,30,.92); overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(24px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.map-panel.opening { animation: iris-open .5s steps(10) both; }
@keyframes iris-open { from { clip-path: circle(0 at var(--ox, 90%) var(--oy, 40px)); } to { clip-path: circle(150vmax at var(--ox, 90%) var(--oy, 40px)); } }
.map-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.map-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding-top: 8px; }
.map-head h2 { font-size: clamp(16px, 2.6vw, 24px); color: var(--amber); }
.map-visited { grid-row: 2; color: var(--dim); }
.map-close { grid-row: 1 / span 2; grid-column: 2; width: 48px; height: 48px; border: 0; background: var(--panel); color: var(--paper); font-size: 30px; line-height: 1; }
.map-close:hover { background: var(--rose); }
.plan {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "timeline studios engines" "techniques games arcade" ". home .";
  padding: 28px; background-color: var(--well);
  background-image: linear-gradient(rgba(79,214,200,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,214,200,.07) 1px, transparent 1px);
  background-size: 16px 16px; box-shadow: 0 0 0 4px var(--panel2);
}
.plan-room { position: relative; margin: -2px; border: 4px solid var(--wall); background: rgba(52,76,81,.55); display: grid; }
.plan-room::after { content: ""; position: absolute; left: calc(50% - 18px); bottom: -4px; width: 36px; height: 4px; background: var(--well); } /* doorway */
.plan-timeline { grid-area: timeline; } .plan-studios { grid-area: studios; } .plan-engines { grid-area: engines; }
.plan-techniques { grid-area: techniques; } .plan-games { grid-area: games; } .plan-arcade { grid-area: arcade; }
.plan-home { grid-area: home; margin-top: 26px; border-style: dashed; }
.plan-home::after { top: -4px; bottom: auto; }
.plan-room > a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; align-content: start; padding: 16px; min-height: 140px; color: var(--paper); text-decoration: none; }
.plan-room > a:hover, .plan-room > a:focus-visible { background: rgba(243,230,200,.06); }
.plan-room img { width: 32px; height: 32px; grid-row: span 2; }
.plan-room-no { color: var(--dim); font-size: 17px; line-height: 1; }
.plan-room-name { font-family: var(--display); font-size: 11px; line-height: 1.6; }
.plan-caption { grid-column: 1 / -1; color: var(--dim); font-size: 18px; margin-top: 6px; }
.plan-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.here-pin, .visited-mark { display: none; font-size: 16px; padding: 1px 8px; }
.here-pin { background: var(--amber); color: var(--ink); }
.visited-mark { color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.plan-room.here { border-color: var(--amber); background: linear-gradient(180deg, rgba(255,181,71,.06), rgba(255,181,71,.2)); z-index: 1; }
.plan-room.here .here-pin { display: inline-block; }
.plan-room.here .plan-room-name { color: var(--amber); }
.plan-room.visited:not(.here) .visited-mark { display: inline-block; }
.plan-sub { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 4px; }
.plan-sub a { display: flex; align-items: center; gap: 8px; color: var(--paper); text-decoration: none; font-size: 19px; padding: 2px 6px; }
.plan-sub a:hover, .plan-sub a[aria-current] { background: rgba(243,230,200,.08); color: var(--amber); }
.plan-sub img { width: 20px; height: 20px; }
.map-settings { display: grid; gap: 8px; }
.map-settings h3 { font-size: 10px; color: var(--dim); }
.map-settings .pbtn[aria-current] { background: var(--amber); color: var(--ink); }
@media (max-width: 899px) {
  .plan { grid-template-columns: 1fr 1fr; grid-template-areas: "home home" "timeline studios" "engines techniques" "games arcade"; padding: 18px; }
  .plan-home { margin: -2px -2px 22px; }
  .plan-home::after { top: auto; bottom: -4px; }
}
@media (max-width: 559px) {
  /* one corridor: rooms in a line, doors on the left */
  .plan { grid-template-columns: 1fr; grid-template-areas: "home" "timeline" "studios" "engines" "techniques" "games" "arcade"; padding: 14px 14px 14px 30px; position: relative; }
  .plan::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; border-left: 4px dashed var(--panel2); }
  .plan-room { margin: 0 0 10px; }
  .plan-room::after, .plan-home::after { left: -4px; top: calc(50% - 14px); bottom: auto; width: 4px; height: 28px; }
  .plan-home { margin: 0 0 10px; }
  .plan-room > a { min-height: 0; padding: 12px; }
  .plan-caption { display: none; }
}

/* footer: the museum directory */
.site-footer { margin-top: 32px; padding-block: 36px 24px; background: var(--well); border-top: 4px solid var(--panel2); color: var(--dim); font-size: 19px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 24px 32px; }
.footer-grid h2 { font-size: 10px; color: var(--amber); margin-bottom: 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-grid a { color: var(--paper); text-decoration: none; }
.footer-grid a:hover, .footer-grid a[aria-current] { color: var(--amber); }
.ft-about p { max-width: 60ch; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-about { grid-column: 1 / -1; } }
@media (max-width: 559px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.link-btn { background: none; border: 0; padding: 0; color: var(--paper); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--amber); }

/* Google Analytics consent: a small sign bottom-left (Murray lives bottom-right) */
.pconsent { --c: var(--amber); position: fixed; z-index: 96; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 230px)); padding: 12px 14px 8px; color: var(--paper); font-size: 19px; line-height: 1.25; }
.pconsent p { margin: 0 0 6px; }
.pconsent .row { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 599px) { .pconsent { left: 12px; right: 12px; width: auto; bottom: calc(12px + 96px); } }

/* Murray, the talking skull: chat widget, bottom-right on every page */
.murray-widget { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.murray-widget > * { pointer-events: auto; }
.murray-fab { width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: #000; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--amber), 0 0 0 8px var(--shade), 0 8px 18px rgba(5,9,7,.55); transition: transform .12s steps(2); }
.murray-fab img { width: 150%; max-width: none; height: auto; image-rendering: pixelated; transform: translate(-3%, 10%); }
.murray-fab:hover, .murray-fab:focus-visible { transform: translateY(-3px); }
.murray-fab:focus-visible { outline: 3px dashed var(--teal); outline-offset: 10px; }
.murray-fab.on { box-shadow: 0 0 0 4px var(--teal), 0 0 0 8px var(--shade); }
.murray-panel { width: min(400px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 140px), calc(100dvh - 140px)); display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--well); box-shadow: 0 0 0 4px var(--panel2), 0 0 0 8px var(--shade), 0 14px 30px rgba(5,9,7,.6); }
.murray-panel[hidden] { display: none; }
.murray-top { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.murray-top canvas { width: 86px; height: auto; image-rendering: pixelated; background: #000; box-shadow: 0 0 0 2px var(--panel2); }
.murray-top h2 { font-size: 10px; line-height: 1.5; color: var(--amber); }
.murray-mode { font-family: var(--display); font-size: 7px; color: var(--teal); min-height: 1em; margin: 4px 0 0; }
.murray-x { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; font-size: 22px; color: var(--paper); background: var(--panel); box-shadow: 0 0 0 2px var(--panel2); }
.murray-x:hover, .murray-x:focus-visible { color: var(--amber); }
.murray-x:focus-visible { outline: 2px dashed var(--teal); }
/* only the conversation shrinks and scrolls: the header, the suggestions and the form always stay visible */
.murray-panel > * { flex: none; }
.murray-panel > .murray-log { flex: 1 1 auto; min-height: 72px; }
.murray-panel { overflow-y: auto; overscroll-behavior: contain; }  /* last resort on very short screens */
.murray-log { list-style: none; margin: 0; padding: 0 4px 0 0; flex: 1; min-height: 72px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 19px; }
.murray-log li { max-width: 92%; }
.murray-log .who { font-family: var(--display); font-size: 7px; display: block; margin-bottom: 3px; }
.murray-log p { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.m-murray .who { color: #b7d98a; }
.m-murray > p:first-of-type { color: #e6f0c8; }
.m-you { align-self: flex-end; text-align: right; }
.m-you .who { color: var(--amber); }
.murray-log .waiting p { color: var(--dim); animation: blink 1s steps(2) infinite; }
.murray-log .src { font-size: 16px; color: var(--dim); margin-top: 4px; }
.murray-log .src span { font-family: var(--display); font-size: 6px; color: var(--amber); }
.murray-log .src a { color: var(--teal); }
.murray-sugg { display: flex; flex-wrap: wrap; gap: 4px; max-height: 118px; overflow-y: auto; padding: 3px 4px 3px 3px; }
.murray-sugg .pbtn { flex: 0 1 auto; max-width: 100%; min-height: 30px; margin: 2px; padding: 5px 8px; white-space: normal; text-align: left; line-height: 1.5; font-size: 7px; }
.murray-form { display: flex; gap: 6px; }
.murray-form input { flex: 1; min-width: 0; background: var(--shade); color: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--panel2); font: inherit; font-size: 19px; padding: 4px 8px; }
.murray-form input:focus-visible { outline: 3px dashed var(--teal); }
.murray-privacy { font-size: 14px; line-height: 1.15; color: var(--dim); margin: 0; }
.murray-privacy figure { margin: 4px 0 0; }
.murray-privacy figcaption { margin: 0; font-size: 13px; }
@media (max-width: 560px) {
  .murray-fab { width: 62px; height: 62px; }
  .murray-panel { width: calc(100vw - 24px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
  .murray-widget { right: 12px; bottom: 12px; }
}

/* the place Murray (or a link) just brought you to */
.flash { animation: flash 1.2s steps(6) 2; }
@keyframes flash { 50% { box-shadow: 0 0 0 4px var(--amber), 0 0 0 8px var(--shade); } }
.murray-log .m-nav { align-self: center; max-width: 100%; font-family: var(--display); font-size: 8px; color: var(--amber); }