/* 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; }
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; }
/* 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; }
@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; }
}