/* Night garden around a lit dollhouse: the page is the dark yard, the canvas is the house. */
:root {
  --night: #1b2046;
  --night-2: #252b5c;
  --ink: #f3ead2;
  --muted: #aeb2d8;
  --lamp: #f2c84a;
  --wood: #6a4022;
  --wood-l: #c48a4e;
  --paper: #f7f1df;
  --paper-ink: #2a1d16;
  --pixel: "Pixelify Sans", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 17px;
  line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 48px;
}
.page { max-width: 1000px; margin: 0 auto; display: grid; gap: 20px; }
.head { display: grid; gap: 6px; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.1; text-wrap: balance; }
h1 .num { color: var(--lamp); }
#lede { margin: 0; color: var(--muted); max-width: 62ch; }
#lede.wide { max-width: none; white-space: pre-line; }   /* following a job (2026-10-26): two lines over the whole width */
h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; }

.page > * { min-width: 0; }
.stage { display: flex; justify-content: center; min-width: 0; }
.screen { position: relative; max-width: 100%; }
/* the daily letter, over the house */
.letter-pop { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, 0.35); }
.letter-pop .letter { width: min(460px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 12px; }
.letter-pop .letter h2 { margin: 0; }
.letter-pop .letter button { justify-self: end; }
/* the station behind the panel over the piano (2026-10-26): the pattern large, the console's numbers in three columns */
.letter-pop .station-card { width: min(560px, 100%); }
.station-grid { display: block; width: 100%; height: auto; border: 1.5px solid var(--paper-ink); background: #040804; }
.station-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin: 0; font-size: 0.85rem; }
.station-numbers div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--wood-l); padding-bottom: 2px; }
.station-numbers dt { opacity: 0.75; }
.station-numbers dd { margin: 0; font-weight: 600; }
/* his whiteboard large (2026-10-25): wider than a letter; the diagram scrolls sideways inside it on a phone */
.letter-pop .board-card { width: min(760px, 100%); }
.board-svg { overflow-x: auto; }
.board-svg svg { display: block; width: 100%; min-width: 420px; height: auto; border: 1.5px solid var(--paper-ink); }
.board-card pre { font-size: 0.8rem; }
/* switching between the seats of a parallel step (2026-10-25) */
.board-seats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; }
html[data-look] .board-seats button { justify-self: auto; font-size: 11px; padding: 5px 8px; letter-spacing: 0.04em; text-transform: none; }
html[data-look] .board-seats button[aria-current] { background: var(--paper-ink); color: var(--paper); opacity: 1; }
/* another seat's card switches the house to it; it looks like every other card, only the pointer and keyboard focus show it */
.board-svg .board-step { cursor: pointer; }
.board-svg .board-step:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
#game {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border: 4px solid var(--wood); box-shadow: 0 0 0 1px var(--wood-l);
  background: #131a3e;
}

.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.seat-form, .toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* one row (2026-10-25): the seat, the job, then the explorer buttons (IMD Explorer / Hide explorer, Random job in the
   side-by-side page) at the right end; on narrow screens each part wraps onto its own line */
.seat-form { flex: 0 0 auto; }
.split-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.split-actions:not(:has(button:not([hidden]))) { display: none; }
/* following a job (2026-10-25): the list is 18rem at most, not as wide as its longest option, and shrinks first */
.job-form { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.job-form button { white-space: nowrap; }
#job-select { flex: 0 1 18rem; width: 18rem; min-width: 7rem; font: inherit; color: var(--paper-ink); background: var(--paper);
  border: 2px solid var(--wood-l); padding: 6px 8px; }
/* the light / dark switch: icon and the other mode's name, as on explorer.imd.fun */
.mode-btn { display: inline-flex; align-items: center; gap: 8px; }
.mode-btn svg { flex: none; }
html[data-mode="light"] .mode-btn .moon, html:not([data-mode="light"]) .mode-btn .sun { display: none; }
#job-select:disabled { opacity: 0.7; }
/* talking to him (2026-10-24): one command line under the seat row, his answer under it, like the original game's prompt */
.talk { display: grid; gap: 6px; }
.talk-line { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; border: 2px solid var(--wood-l); background: var(--night-2); }
.talk-line:focus-within { border-color: var(--lamp); }
.talk-prompt { color: var(--lamp); font-weight: 600; }
#talk-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; caret-color: var(--lamp); }
#talk-input::placeholder { color: var(--muted); opacity: 0.8; }
.talk-reply { margin: 0; min-height: 1.4em; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-reply:empty { display: none; }
.talk-reply .who { color: var(--lamp); }
.talk-reply a { color: var(--lamp); }
label { color: var(--muted); }
input[type=number] {
  width: 5.5rem; font: inherit; color: var(--paper-ink); background: var(--paper);
  border: 2px solid var(--wood-l); padding: 6px 8px;
}
button {
  font: inherit; font-weight: 600; color: var(--paper-ink); background: var(--lamp);
  border: 2px solid var(--wood); padding: 6px 12px; cursor: pointer;
}
button.quiet { background: transparent; color: var(--ink); border-color: var(--wood-l); }
button[aria-pressed=true] { background: var(--wood-l); color: var(--paper-ink); }
button:hover { filter: brightness(1.08); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }

/* the connected wallet, at the right end of the seat row */
.wallet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.wallet p { margin: 0; color: var(--muted); }
.doors { display: flex; flex-wrap: wrap; gap: 8px; }
.doors:empty { display: none; }
.door { background: var(--wood-l); color: var(--paper-ink); }

.below { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.below:has(.side[hidden]) { grid-template-columns: 1fr; }     /* the counters switched off: the diary takes the row */
@media (max-width: 720px) { .below { grid-template-columns: 1fr; } }
.diary ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.diary li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 8px; }
.diary li time { color: var(--muted); font-variant-numeric: tabular-nums; }
.diary li.empty { display: block; color: var(--muted); }
.side { display: grid; gap: 20px; }
.counters dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.counters dl div { background: var(--night-2); padding: 8px 10px; border-left: 3px solid var(--wood-l); }
.counters dt { color: var(--muted); font-size: 0.85rem; }
.counters dd { margin: 0; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.small { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }
@media (max-width: 420px) { .counters dl { grid-template-columns: repeat(2, 1fr); } }

.letter { background: var(--paper); color: var(--paper-ink); padding: 16px 18px; border: 2px solid var(--wood-l); box-shadow: 4px 4px 0 var(--wood); }
.letter h2 { font-family: var(--pixel); }
.letter pre { margin: 0; font-family: var(--type); font-size: 0.98rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

code { font-family: var(--type); font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

.knock { display: grid; gap: 8px; background: var(--paper); color: var(--paper-ink); padding: 14px 16px;
  border: 3px solid var(--lamp); box-shadow: 4px 4px 0 var(--wood); }
.knock h2 { margin: 0; }
.knock p { margin: 0; max-width: 70ch; }
.knock code { background: #ebe1c6; padding: 0 4px; }
.knock button { justify-self: start; }

.legend { max-width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 18px 20px;
  background: var(--paper); color: var(--paper-ink); border: 3px solid var(--wood); box-shadow: 6px 6px 0 var(--wood); }
.legend::backdrop { background: rgba(10, 12, 32, 0.7); }
.legend h2 { margin: 0 0 8px; font-size: 1.35rem; }
.legend table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 0.95rem; }
.legend th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--wood-l); padding: 6px 8px; }
.legend td { border-bottom: 1px solid #e4d8b8; padding: 6px 8px; vertical-align: top; }
.legend td:first-child { width: 58%; }
.small-ink { margin: 0; font-size: 0.92rem; color: #5a4632; max-width: 70ch; }
.legend form { margin: 4px 0 0; }
.legend-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.legend-head h2 { margin: 0; }
.quiet-ink { background: transparent; color: var(--paper-ink); border-color: var(--wood-l); }

/* the header: the name on the left, the look and settings on the right (as imd.fun's top bar) */
.topbar { max-width: 1000px; margin: 0 auto 26px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.brand { font-weight: 600; font-size: 1.15rem; color: var(--ink); text-decoration: none; padding: 6px 12px; border: 2px solid var(--wood-l); }
.brand:hover { color: var(--lamp); }
.brand:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
/* the logo, made like explorer.imd.fun's IMD mark (2026-10-24): a box with pepe's head, a rule and LCP, in the page's
   own two colours; on hover the head turns like the explorer's diamond (a globe turn every 2.4 s) */
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.logo { display: flex; align-items: stretch; height: 40px; border: 1.5px solid var(--ink); background: var(--night);
  color: var(--ink); text-decoration: none; transition: background-color 0.2s; }
.logo:hover { background: color-mix(in srgb, var(--ink) 14%, var(--night)); }
.logo:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.logo-mark { display: flex; align-items: center; justify-content: center; width: calc(40px - 1.5px);
  border-right: 1.5px solid var(--ink); perspective: 60px; }
.logo-mark svg { display: block; }
.logo:hover .logo-mark svg, .logo:focus-visible .logo-mark svg { animation: 2.4s linear infinite globe; }
.logo-label { display: flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.3em;
  padding: 0 calc(16px - 0.3em) 0 16px; }
@keyframes globe { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .logo:hover .logo-mark svg, .logo:focus-visible .logo-mark svg { animation: none; } }
.diary-col h2, .counters h2 { min-height: 1.4em; }
.looks { display: inline-flex; gap: 0; }
.looks button + button { border-left-width: 0; }

/* The IMD look (2026-10-24): imd.fun's black page, IBM Plex Mono, outlined square controls, a terminal for the diary. */
html[data-look="imd"] {
  --night: #000000;
  --night-2: #0b0b0b;
  --ink: #f4f4f2;
  --muted: #9a9a96;
  --lamp: #38d050;
  --wood: #f4f4f2;
  --wood-l: #5c5c58;
  --paper: #f4f4f2;
  --paper-ink: #0b0b0b;
  --term: #040404;
  --term-edge: #18301c;
  --on-ink: #000000;          /* text on an ink-filled control */
  --hover-bg: #141414;
  --field: #000000;
  --brand-hover: #e6e6e6;
  --pixel: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* The IMD look in light mode (2026-10-24), like explorer.imd.fun's light mode: the side-by-side page sends the
   explorer's mode (main.js, setMode). Only the page around the house changes; the house keeps its own sky. */
html[data-look="imd"][data-mode="light"] {
  --night: #ffffff;
  --night-2: #f4f4f2;
  --ink: #0b0b0b;
  --muted: #5c5c58;
  --lamp: #1f9d55;            /* the green, darker so it reads on white */
  --wood: #0b0b0b;
  --wood-l: #9a9a96;
  --paper: #f4f4f2;
  --paper-ink: #0b0b0b;
  --term: #f7f7f5;
  --term-edge: #cfe3d2;
  --on-ink: #ffffff;
  --hover-bg: #ececea;
  --field: #ffffff;
  --brand-hover: #2c2c2a;
  color-scheme: light;
}
html[data-look="imd"] body { font-size: 14px; line-height: 1.55; }
html[data-look="imd"] h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: 0.01em; }
html[data-look="imd"] h2 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
html[data-look="imd"] #game { image-rendering: auto; border: 1.5px solid var(--ink); box-shadow: none; background: #000; }
html[data-look="imd"] button {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px;
}
html[data-look="imd"] button.quiet { border-color: var(--wood-l); }
html[data-look="imd"] button[aria-pressed=true] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
html[data-look="imd"] button:hover { filter: none; background: var(--hover-bg); }
html[data-look="imd"] button[aria-pressed=true]:hover { background: var(--ink); }
html[data-look="imd"] button:focus-visible, html[data-look="imd"] input:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
html[data-look="imd"] input[type=number] { background: var(--field); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; }
html[data-look="imd"] #job-select { background: var(--field); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; }
html[data-look="imd"] select:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
html[data-look="imd"] .door { background: transparent; color: var(--ink); }
html[data-look="imd"] .brand { background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--ink); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
html[data-look="imd"] .brand:hover { color: var(--on-ink); background: var(--brand-hover); }
/* The top bar sized and placed like explorer.imd.fun's (measured 2026-10-24), so the two line up side by side: 16px
   from the top (12px up to 640px wide), the side gutter clamp(16px, 4vw, 34px), 40px controls with 1.5px rules,
   12px labels at weight 500 and 0.06em, the name at 13px/600/0.3em, the next row 82px from the top (80px narrow). */
html[data-look="imd"] body {
  padding-top: 16px;
  padding-left: max(clamp(16px, 4vw, 34px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 34px), env(safe-area-inset-right, 0px));
}
html[data-look="imd"] .topbar { gap: 8px 12px; margin-bottom: 26px; }
html[data-look="imd"] .topbar .toggles { gap: 12px; }
html[data-look="imd"] .brand, html[data-look="imd"] .topbar button { display: inline-flex; align-items: center; height: 40px; }
html[data-look="imd"] .brand { padding: 0 calc(16px - 0.3em) 0 16px; }
html[data-look="imd"] .topbar button { padding: 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; }
@media (max-width: 640px) {
  html[data-look="imd"] body { padding-top: 12px; }
  html[data-look="imd"] .topbar { gap: 10px; margin-bottom: 28px; }
  html[data-look="imd"] .topbar .toggles { gap: 10px; }
  html[data-look="imd"] .topbar button { padding: 0 12px; font-size: 10.5px; }
}
html[data-look="imd"] .diary { background: var(--term); border: 1.5px solid var(--term-edge); padding: 12px 14px; }
html[data-look="imd"] .diary ol { font-size: 12.5px; }
html[data-look="imd"] .talk-line { background: var(--term); border-color: var(--term-edge); height: 40px; }
html[data-look="imd"] .talk-prompt { color: var(--lamp); }
html[data-look="imd"] #talk-input { font-size: 13px; }
html[data-look="imd"] .talk-reply { font-size: 12.5px; }
html[data-look="imd"] .diary li { grid-template-columns: 1rem 3.4rem 1fr; }
html[data-look="imd"] .diary li::before { content: ">"; color: var(--lamp); }
html[data-look="imd"] .diary li:first-child time, html[data-look="imd"] .diary li:first-child::before { color: var(--lamp); }
html[data-look="imd"] .diary li.empty::before { content: none; }
html[data-look="imd"] .counters dl div { background: var(--term); border-left: 2px solid var(--lamp); }
html[data-look="imd"] .counters dd { font-size: 1.15rem; }
html[data-look="imd"] .letter, html[data-look="imd"] .knock { border: 1.5px solid var(--ink); box-shadow: none; }
html[data-look="imd"] .knock { border-color: var(--lamp); }
html[data-look="imd"] .knock code { background: #e6e6e6; }
html[data-look="imd"] .legend { border: 1.5px solid var(--ink); box-shadow: none; }
html[data-look="imd"] .legend::backdrop { background: rgba(0, 0, 0, 0.75); }
html[data-look="imd"] .legend th { border-bottom-color: var(--paper-ink); }
html[data-look="imd"] .legend td { border-bottom-color: #d6d6d2; }
html[data-look="imd"] .small-ink { color: #5c5c58; }
html[data-look="imd"] .letter button, html[data-look="imd"] .knock button, html[data-look="imd"] .legend button { color: var(--paper-ink); border-color: var(--paper-ink); }

/* A chart or swap page beside him when the side-by-side page is not around (a hosted copy, or the house alone): under
   the command line, or fixed on the right where the screen has room for both, the page centred in what is left */
.side-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 75vh; min-height: 420px; border: 2px solid var(--wood-l); background: var(--night-2); }
.pane-head { display: flex; align-items: center; gap: 14px; padding: 6px 10px; border-bottom: 2px solid var(--wood-l); }
.pane-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-head a { color: var(--lamp); }
.side-pane iframe { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }
@media (min-width: 1500px) {
  body.with-pane, html[data-look] body.with-pane { padding-right: calc(min(44vw, 820px) + 24px); }   /* over the look's gutter */
  .side-pane { position: fixed; top: 0; right: 0; bottom: 0; z-index: 5; width: min(44vw, 820px); height: auto; min-height: 0; border-width: 0 0 0 2px; }
}

/* the radio (2026-10-25): the line under the command line names the station and theidm.fun; the frame of their stream
   page is audio only and stays out of the layout (hidden by size and opacity, not display: none, so it keeps playing) */
.radio-line { margin: -6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 0.95rem; }
.radio-line b { color: var(--ink); font-weight: 600; }
.radio-line a { color: var(--lamp); }
.radio-line .quiet { margin-left: auto; }
#radio { position: fixed; left: 0; bottom: 0; width: 0; height: 0; }   /* out of the page grid: no empty row between his reply and the diary (owner, 2026-10-26) */
.radio-frame { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; border: 0; opacity: 0.01; pointer-events: none; }
/* the light / dark switch shows its icon only (owner, 2026-10-25); the mode's name stays for screen readers */
.mode-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mode-btn { position: relative; }

/* The IMD Daily in the house (2026-10-26): the issue's pages in the popup over the house */
#news-pop { position: fixed; z-index: 20; }                /* the reader covers the page, not just the house: a page needs the height */
.letter-pop .news-card { width: min(760px, 100%); max-height: calc(100vh - 24px); }
.news-stage { position: relative; display: grid; justify-content: center; background: #e9e6dc; border: 1.5px solid var(--paper-ink); min-height: 220px; touch-action: pan-y; overflow: hidden; }
#news-page { display: block; height: auto; max-width: 100%; background: #ffffff; }
.news-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; text-align: center; color: var(--paper-ink); background: rgba(255, 255, 255, 0.85); }
.news-msg:empty { display: none; }
.news-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.news-nav span { color: var(--paper-ink); font-size: 0.9rem; }