/* Alchemist home = one SCUMM screen. The room (320x200 art) at an integer scale --s picked by the media ladder at the end
   (no JS, no layout jump), the verb panel + inventory under it, everything else opens from objects in the room.
   Loaded after alch.css (shared VGA kit: plates, CA, cursors, icons, table). */
body.home { --s: 1; --u: calc(var(--s) * 1px); --t: 16px; --ph: 0px; --fr: 12px;
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: #2e323b; }
.home .screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.home .stage { flex: 1 0 auto; min-height: calc(200 * var(--u) + 2 * var(--fr)); }

/* ---------- stage: stone wall fields around the framed room */
.home .stage { position: relative; overflow: hidden; height: calc(200 * var(--u) + 2 * var(--fr));
  background: #41464f url(/assets/ui/wall-stone.png) 0 0 / calc(96 * var(--u)) calc(48 * var(--u)); container-type: size; }
.home .rf { position: absolute; z-index: 1; width: calc(320 * var(--u) + 2 * var(--fr)); height: calc(200 * var(--u) + 2 * var(--fr));
  left: calc(50% - 160 * var(--u) - var(--fr)); left: round(down, calc(50% - 160 * var(--u) - var(--fr)), 1px);
  top: max(calc(-1 * var(--fr)), calc((100% - 200 * var(--u) - 2 * var(--fr)) / 2)); top: max(calc(-1 * var(--fr)), round(down, calc((100% - 200 * var(--u) - 2 * var(--fr)) / 2), 1px));
  border: var(--fr) solid transparent; border-image: url(/assets/ui/b-frame.png) 6 / var(--fr) stretch; image-rendering: pixelated; }
.home .room { position: relative; width: calc(320 * var(--u)); height: calc(200 * var(--u)); overflow: hidden; background: var(--night); }
.home .rm { position: absolute; inset: 0; }
.home .rm[hidden] { display: none !important; }
.home .rm .art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home .rm .sc { position: absolute; inset: 0; width: auto; height: auto; left: 0; top: 0; transform: none; }
.home .spr, .home .hs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.home .spr { display: block; pointer-events: none; }
.home .alch-spr { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.home .hs { all: unset; position: absolute; z-index: 2; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  cursor: url(/assets/ui/cur-gold.png) 16 16, pointer; -webkit-tap-highlight-color: transparent; }
.home .hs:focus-visible { outline: 4px solid var(--gold); outline-offset: -4px; }
.home .title { position: absolute; z-index: 3; left: calc(85 * var(--u)); top: calc(4 * var(--u)); transform: none; line-height: 0; pointer-events: none; margin: 0; }
.home .title img { width: calc(150 * var(--u)); height: calc(30 * var(--u)); }

/* sconces hang on the wall fields when the ladder says they fit (.sconce display is set there) */
.home .sconce { display: none; position: absolute; top: calc(70 * var(--u)); width: calc(27 * var(--u)); height: calc(104 * var(--u)); pointer-events: none; z-index: 0; }
.home .sconce.l { right: auto; left: calc(-1 * var(--fr) - 27 * var(--u) - 6 * var(--u) - 24px); }
.home .sconce.r { left: calc(100% + var(--fr) + 6 * var(--u) + 24px); }
.home .sconce i { position: absolute; display: block; }
.home .sconce .pool { left: calc(-22 * var(--u)); top: calc(-16 * var(--u)); width: calc(72 * var(--u)); height: calc(100 * var(--u)); background: url(/assets/ui/pool-1.png) 0 0 / 100% 100%; }
.home .sconce .pool + .pool { background-image: url(/assets/ui/pool-2.png); opacity: 0; animation: lit 2.3s steps(1, end) infinite; }
.home .sconce .spr-c { inset: 0; overflow: hidden; }
.home .sconce .spr-c b { position: absolute; left: 0; top: 0; width: 300%; height: 100%; background: url(/assets/ui/sconce.png) 0 0 / 100% 100%; animation: flame .9s steps(1, end) infinite; }
.home .sconce.r .spr-c b { animation-duration: 1.13s; animation-delay: -.4s; }

/* ---------- dialogue: SCUMM lines over the speaker's head, coloured text with a hard ink outline */
.home .say { position: absolute; z-index: 4; margin: 0; pointer-events: none; text-align: center; min-height: 0;
  font: 400 var(--t)/1.15 Romulus, monospace; color: var(--gold-hi); text-wrap: balance;
  --o: max(2px, calc(var(--t) / 16)); text-shadow: var(--o) 0 0 var(--ink), calc(-1 * var(--o)) 0 0 var(--ink), 0 var(--o) 0 var(--ink), 0 calc(-1 * var(--o)) 0 var(--ink), var(--o) var(--o) 0 var(--ink), calc(-1 * var(--o)) calc(-1 * var(--o)) 0 var(--ink), var(--o) calc(-1 * var(--o)) 0 var(--ink), calc(-1 * var(--o)) var(--o) 0 var(--ink); }
.home .say-room { right: calc(4 * var(--u)); left: auto; bottom: calc(84 * var(--u)); top: auto; transform: none; width: calc(196 * var(--u)); max-width: none; background: none; border: 0; padding: 0; }
.home .say-room::after { content: ""; display: inline-block; width: calc(var(--t) * .375); height: calc(var(--t) / 8); margin-left: 4px; background: var(--gold-hi); vertical-align: baseline; animation: caret 1s steps(1, end) infinite; }
.home .say-ath { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(6 * var(--u)); color: var(--mercury); }

/* ---------- other rooms: the athanor (the run) and the vault (the card) */
.home .ath .meter { position: absolute; right: calc(8 * var(--u)); top: auto; bottom: calc(66 * var(--u)); left: auto; transform: none; z-index: 3; }
.home .fly, .home .drops { position: absolute; inset: 0; pointer-events: none; }
.home .fly img { position: absolute; left: 0; top: 0; width: calc(23 * var(--u)); height: auto; }
.home .drop { position: absolute; left: 0; top: 0; width: calc(2 * var(--u)); height: calc(3 * var(--u)); background: var(--gold); box-shadow: 0 calc(1 * var(--u)) 0 var(--gold-deep); }
.home .exit { position: absolute; z-index: 4; left: calc(6 * var(--u)); bottom: calc(6 * var(--u)); }
.home .rm-vault .card { position: absolute; left: 50%; top: calc(10 * var(--u)); transform: translateX(-50%); width: min(94%, calc(196 * var(--u))); z-index: 3; }
.home .fade { position: absolute; inset: 0; z-index: 9; background: var(--night); opacity: 0; pointer-events: none; }
.home .fade.go { animation: palout .48s steps(4, end) both; }
@keyframes palout { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- overlays: the plan and the ledger unroll as a scroll over the table, the film plays in a carved frame */
.home .ov { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 12px 16px; }
body.home #plan, body.home #athanor, body.home #card, body.home #ledger { background: none; margin: 0 !important; }
.home #plan, .home #ledger { padding: 12px 16px; }
.home .ov[hidden] { display: none !important; }
.home .ov::before { content: ""; position: absolute; inset: 0; background: url(/assets/ui/shade.png) 0 0 / 4px 4px; pointer-events: none; }
.home .scroll { position: relative; display: flex; flex-direction: column; width: min(100%, 1000px); max-height: 100%; }
.home .ov-ledger .scroll { width: min(100%, 760px); }
.home .roll { position: relative; display: block; flex: none; height: 28px; margin: 0 34px; background: url(/assets/art/roller-m-native.webp) 0 0 / 24px 28px repeat-x; image-rendering: pixelated; z-index: 2; }
.home .roll::before, .home .roll::after { content: ""; position: absolute; top: 0; width: 34px; height: 28px; background: url(/assets/art/roller-l-native.webp) 0 0 / 100% 100%; image-rendering: pixelated; }
.home .roll::before { left: -34px; } .home .roll::after { right: -34px; background-image: url(/assets/art/roller-r-native.webp); }
.home .sheet { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; margin: -6px 46px; display: flex; flex-direction: column;
  background: #e6d6ae url(/assets/ui/parch.png) 0 0 / 32px 32px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); box-shadow: inset 4px 0 0 #f0e4c4, inset -4px 0 0 #c9b48a; z-index: 1; }
.home .sheet-in { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 24px 20px; display: grid; gap: 12px; align-content: start; min-height: 0; }
.home .ov:not([hidden]) .scroll { animation: unroll .42s steps(6, end) both; }
@keyframes unroll { from { clip-path: inset(0 0 calc(100% - 28px) 0); } to { clip-path: inset(0 0 0 0); } }
.home .ov-x { all: unset; position: absolute; right: 8px; top: 10px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); cursor: url(/assets/ui/cur-hand.png) 12 2, pointer; }
.home .ov-x::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url(/assets/ui/ic-close.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/ui/ic-close.svg) 0 0 / 100% 100% no-repeat; }
.home .ov-x:hover { color: var(--gold-deep); }
.home .ov-x:focus-visible { outline: 4px solid var(--gold-deep); outline-offset: -4px; }
.home .sheet .h2 { font: 48px/1 Alagard, serif; color: var(--ink); padding-right: 44px; }
.home .sheet .sub, .home .sheet .feeline, .home .sheet .look-l, .home .sheet .rule { font: 32px/1.12 Romulus, monospace; color: #4a3020; margin: 0; }
.home .sheet .feeline .num, .home .sheet .rule .num { font-size: 17px; color: var(--ink); background: #f4c430; padding: 0 4px; }
.home .look { margin: 0; display: grid; gap: 6px; }
.home .look-row { display: flex; gap: 12px; }
.home .look-in { flex: 1 1 100%; width: 100%; min-width: 0; height: 56px; padding: 0 12px; color: var(--mercury); font-size: 15px; outline: none; border-radius: 0; }
.home .tbl-wrap { margin: 0; border: 4px solid var(--ink); border-image: none; background: #efe3c2; max-height: none; overflow: visible; }
.home .tbl th { top: -18px; }
.home .tbl td { color: var(--ink); border-top: 2px solid #c9b48a; }
.home .tbl .why { color: #6b4423; }
.home .tbl .mint, .home .tbl .mint a { color: #6b4423; }
.home .tbl .mint a:hover { color: var(--gold-dark); }
.home .tbl tr.skip td, .home .tbl tr.out td:not(.c-ck) { color: #8f7a5a; }
.home .tbl tr.hl td { background: #f4e3a6; }
.home .tbl .st-ok { color: #5a6e1a; }
.home .tbl .st-bad { color: #8a2a1e; }
.home .invite td { color: #4a3020; }
.home .totals { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.home .sheet-b { display: flex; justify-content: flex-end; }
.home .ctr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home .c { border: 4px solid transparent; border-image: url(/assets/ui/b-well.png) 4 fill / 4px stretch; padding: 12px 14px; display: grid; gap: 6px; }
.home .c-v { font-size: 30px; color: var(--gold); }
.home .c-k { font: 16px/1 Romulus, monospace; color: var(--hg-mid); text-transform: uppercase; letter-spacing: 1px; }
.home .ctr-note { font: 16px/1.2 Romulus, monospace; color: #6b4423; }
.home .film-box { position: relative; width: min(100%, 1100px, calc((100cqh - 150px) * 16 / 9)); padding: 16px 20px 20px; display: grid; gap: 12px;
  border: 12px solid transparent; border-image: url(/assets/ui/b-frame.png) 6 fill / 12px stretch; image-rendering: pixelated; }
.home .film-box .h2 { font: 48px/1 Alagard, serif; color: var(--mercury); padding-right: 48px; }
.home .film-box .ov-x { color: var(--gold); top: 4px; right: 4px; }
.home .film { margin: 0; }

/* ---------- the panel: sentence line, 3x3 verbs, inventory, and the strip that never leaves (Connect, pump, X, CA) */
.home .panel { position: relative; z-index: 5; display: grid; gap: 8px 24px; padding: 12px 16px 14px; border-top: 4px solid var(--ink);
  background: var(--slate-deep) url(/assets/ui/tile-deep.png) 0 0 / 16px 16px;
  grid-template-columns: 1fr; grid-template-areas: "sent" "verbs" "inv" "hud"; align-content: start; }
.home .panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 8px; background: url(/assets/ui/cornice.png) 0 0 / 16px 8px repeat-x; pointer-events: none; }
.home .sent-row { grid-area: sent; position: relative; display: flex; align-items: center; justify-content: center; min-height: 28px; }
.home .sentence { font: 16px/1 Romulus, monospace; color: var(--mercury); text-align: center; min-height: 0; margin: 0; }
.home .doc-l { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--pewter); min-height: 32px; display: inline-flex; align-items: center; padding: 0 4px; }
.home .doc-l:hover { color: var(--gold); }
.home .verbs { grid-area: verbs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; align-content: center; }
.home .verb { font-size: 16px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.home .verb.hint { color: var(--pewter); }
.home .verb.on { color: var(--gold); }
.home .opts { grid-area: verbs; display: none; align-content: center; gap: 0; }
.home .opt { all: unset; font: 16px/1.1 Romulus, monospace; color: var(--pewter); min-height: 36px; display: flex; align-items: center; cursor: url(/assets/ui/cur-hand.png) 12 2, pointer; }
.home .opt::before { content: ""; width: 8px; height: 8px; margin-right: 10px; background: currentColor; flex: none; }
.home .opt:hover:not(:disabled), .home .opt:focus-visible { color: var(--gold); }
.home .opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.home .opt-g:not(:disabled) { color: var(--gold-hi); }
.home .opt:disabled { color: var(--slate-hi); cursor: url(/assets/ui/cur-no.png) 16 16, not-allowed; }
.home .inv { grid-area: inv; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; justify-content: stretch; }
.home .slot { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; height: 64px; min-width: 0; padding: 2px 2px 4px;
  border: 8px solid transparent; border-image: url(/assets/ui/b-well.png) 4 fill / 8px stretch; cursor: url(/assets/ui/cur-gold.png) 16 16, pointer; }
.home .slot img { width: auto; height: auto; max-width: 40px; max-height: 26px; }
.home .slot:hover img, .home .slot:focus-visible img { transform: translateY(-2px); }
.home .slot:focus-visible { outline: 4px solid var(--gold); outline-offset: 0; }
.home .slot-n { position: static; font: 16px/1 Romulus, monospace; color: var(--pewter); white-space: nowrap; text-align: center; }
.home .slot-c { position: absolute; top: -2px; right: 0; font-size: 12px; color: var(--gold); }
.home .slot.has .slot-n { color: var(--gold-hi); }
.home .slot.off img { opacity: .35; }
.home .slot.zero img { opacity: .5; }
.home .inv-tag { position: absolute; right: 0; top: -14px; font: 16px/1 Romulus, monospace; color: var(--gold); }
.home .logbox { grid-area: inv; display: none; min-height: 0; gap: 4px; }
.home .runlog { margin: 0; max-height: 132px; overflow: auto; overscroll-behavior: contain; gap: 2px; }
.home .runlog li { padding: 4px 8px; font: 16px/1.1 Romulus, monospace; border: 4px solid transparent; border-image: url(/assets/ui/b-well.png) 4 fill / 4px stretch; background: none; }
.home .runlog li .num { font-size: 12px; }
.home .runlog .em { font-size: 16px; }
.home .logbox .why { font: 16px/1.2 Romulus, monospace; color: var(--hg-mid); margin: 0; }
.home .hud { grid-area: hud; display: grid; gap: 8px; align-content: center; min-width: 0; }
.home .hud-b { display: flex; gap: 8px; }
.home .hud-b .pl { flex: 1 1 auto; }
.home .hud-b .pl-f { width: 100%; justify-content: center; font-size: 16px; }
.home .hud-b #connect { flex: 2 1 auto; }
.home .hud .ca { min-height: 48px; }
.home .hud .ca-k, .home .hud .ca-c { font-size: 16px; }
.home .hud .ca-v { font-size: 13px; padding: 4px 8px; }
.home .hud .ca-pend .ca-v { font: 16px/1 Romulus, monospace; }

/* athanor mode: the verbs become dialogue options, the inventory becomes the run log */
.home[data-room="ath"] .verbs, .home[data-room="ath"] .inv { display: none; }
.home[data-room="ath"] .opts, .home[data-room="ath"] .logbox { display: grid; }

.home .toast { bottom: auto; top: 16px; }

/* ---------- phones < 344: no frame, the room is the full width */
@media (max-width: 343px) { body.home { --fr: 0px; } .home .rf { border: 0; } }

/* ---------- phone landscape: room left, panel right, one screen */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .home .screen { display: grid; grid-template-columns: calc(320px + 2 * var(--fr) + 24px) 1fr; height: 100vh; height: 100dvh; }
  .home .stage { height: 100%; min-height: 0; }
  .home .panel { overflow-y: auto; border-top: 0; border-left: 4px solid var(--ink); padding-top: 8px; gap: 6px 16px; }
  .home .panel::before { display: none; }
  .home .verb, .home .opt { min-height: 34px; }
}

/* ---------- small screens: overlays take the whole screen */
@media (max-width: 699px), (orientation: landscape) and (max-height: 520px) {
  .home .stage { container-type: normal; }
  .home .ov { position: fixed; padding: 8px; }
  .home .ov::before { background: rgba(28, 34, 51, .86); }
  .home .scroll { max-height: 100%; }
  .home .sheet { margin: -6px 40px; }
  .home #plan, .home #ledger { padding: 8px; }
  .home .scroll { width: 100%; }
  .home .sheet-in { padding: 12px 10px 14px; gap: 10px; }
  .home .sheet .h2 { font-size: 32px; }
  .home .sheet .sub, .home .sheet .feeline, .home .sheet .look-l, .home .sheet .rule { font-size: 16px; line-height: 1.25; }
  .home .look-row { flex-wrap: wrap; }
  .home .look-row .pl { flex: 1 1 100%; }
  .home .look-row .pl-f { width: 100%; justify-content: center; }
  .home .tbl thead { display: none; }
  .home .tbl, .home .tbl tbody, .home .tbl tr, .home .tbl td { display: block; width: 100%; }
  .home .tbl tr { display: grid; grid-template-columns: 36px 1fr auto; gap: 2px 8px; padding: 8px; border-top: 2px solid #c9b48a; }
  .home .tbl td { border: 0; padding: 0; font-size: 16px; }
  .home .tbl td.c-ck { grid-row: span 3; width: auto; }
  .home .tbl td.t-sol { grid-column: 3; grid-row: 1; text-align: right; }
  .home .tbl td.t-cls, .home .tbl td.t-act { grid-column: 2 / 4; }
  .home .tbl td.t-fee { grid-column: 3; grid-row: 2; text-align: right; }
  .home .tbl tr.invite { display: block; }
  .home .invite td { font-size: 16px; padding: 16px 8px; }
  .home .totals, .home .ctr { grid-template-columns: 1fr 1fr; }
  .home .sheet-b .pl, .home .sheet-b .pl-f { width: 100%; justify-content: center; }
  .home .film-box { width: 100%; padding: 8px; }
  .home .film-box .h2 { font-size: 32px; }
  .home .exit .pl-f { font-size: 16px; min-height: 24px; padding: 0 6px; }
  .home .rm-vault .card { padding: 6px 8px 8px; gap: 2px; top: calc(4 * var(--u)); }
  .home .rm-vault .card-k, .home .rm-vault .card-v { font-size: 16px; }
  .home .rm-vault .card-v .num { font-size: 22px; }
  .home .rm-vault .card-s { font-size: 16px; line-height: 1.1; }
  .home .rm-vault .card-b .pl-f { font-size: 16px; min-height: 24px; }
  .home .ath .meter { padding: 4px 6px; top: auto; bottom: calc(30 * var(--u)); }
  .home .rm-vault .card-s { display: none; }
  .home .ath .meter-v { font-size: 18px; }
  .home .ath .meter-k, .home .ath .meter-u { font-size: 16px; }
}
@media (max-width: 380px) { .home .slot-n { font-size: 16px; white-space: normal; line-height: .9; } .home .verbs { gap: 0 4px; } }

/* ---------- tablets and narrow desktops: verbs | inventory, then the strip */
@media (min-width: 700px) and (min-height: 521px), (min-width: 700px) and (orientation: portrait) {
  body.home { --ph: 300px; height: 100vh; height: 100dvh; overflow: hidden; }
  .home .stage { height: calc(100vh - var(--ph)); height: calc(100dvh - var(--ph)); min-height: 0; flex: none; }
  .home .panel { height: var(--ph); grid-template-columns: auto 1fr; grid-template-rows: 32px auto auto; grid-template-areas: "sent sent" "verbs inv" "hud hud"; padding: 10px 24px 14px; align-content: start; }
  .home .sentence { font-size: 32px; }
  .home .verb, .home .opt { font-size: 32px; min-height: 38px; justify-content: flex-start; }
  .home .verbs { gap: 0 20px; grid-template-columns: repeat(3, auto); }
  .home .opts { min-width: 400px; }
  .home .opt { min-height: 30px; }
  .home .inv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center; }
  .home .slot { grid-template-rows: none; grid-template-columns: 52px 1fr; place-items: center start; height: 54px; padding: 0 8px 0 2px; }
  .home .slot img { max-width: 44px; max-height: 32px; justify-self: center; }
  .home .slot-n { font-size: 16px; }
  .home .inv-tag { top: -20px; }
  .home .hud { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .home .hud-b .pl-f { font-size: 32px; }
  .home .hud .ca-k, .home .hud .ca-c { font-size: 32px; }
  .home .hud .ca-pend .ca-v { font-size: 32px; }
  .home .runlog { max-height: 116px; }
}
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 521px) { .home .hud { grid-template-columns: 1fr; } body.home { --ph: 356px; } }

/* ---------- desktop: one row under the sentence: verbs | inventory | strip */
@media (min-width: 1280px) and (min-height: 521px) {
  body.home { --ph: 184px; }
  .home .slot-n { font-size: 32px; }
  .home .panel { grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 32px 1fr; grid-template-areas: "sent sent sent" "verbs inv hud"; padding: 8px 24px 12px; }
  .home .inv { width: 440px; }
  .home .inv-tag { top: -30px; left: 0; right: auto; }
  .home .hud { grid-template-columns: 1fr; }
  .home .hud-b .pl-f { font-size: 16px; }
  .home .runlog { max-height: 124px; }
  .home .logbox { width: 440px; }
}

@media (min-width: 1440px) and (min-height: 521px) { .home .hud-b .pl-f { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .home .ov:not([hidden]) .scroll, .home .fade.go, .home .say-room::after, .home .sconce .spr-c b, .home .sconce .pool + .pool { animation: none; }
}

/* ---------- integer scale ladder (generated): s = the biggest integer where the framed room fits the width and shows
   at least 176 of its 200 rows above the panel (the floor is what gets cropped). Text in the room follows in 16 px steps. */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 708px) { body.home { --s: 2; --t: 16px; } .home .sconce { display: none; } }
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 708px) and (min-width: 876px) { .home .sconce { display: block; } }
@media (min-width: 984px) and (max-width: 1099px) and (min-height: 884px) { body.home { --s: 3; --t: 32px; } .home .sconce { display: none; } }
@media (min-width: 984px) and (max-width: 1099px) and (min-height: 884px) and (min-width: 1262px) { .home .sconce { display: block; } }
@media (min-width: 1100px) and (max-width: 1279px) and (min-height: 652px) { body.home { --s: 2; --t: 16px; } .home .sconce { display: none; } }
@media (min-width: 1100px) and (max-width: 1279px) and (min-height: 652px) and (min-width: 876px) { .home .sconce { display: block; } }
@media (min-width: 1100px) and (max-width: 1279px) and (min-height: 828px) { body.home { --s: 3; --t: 32px; } .home .sconce { display: none; } }
@media (min-width: 1100px) and (max-width: 1279px) and (min-height: 828px) and (min-width: 1262px) { .home .sconce { display: block; } }
@media (min-width: 1280px) and (min-height: 536px) { body.home { --s: 2; --t: 16px; } .home .sconce { display: none; } }
@media (min-width: 1280px) and (min-height: 536px) and (min-width: 876px) { .home .sconce { display: block; } }
@media (min-width: 1280px) and (min-height: 712px) { body.home { --s: 3; --t: 32px; } .home .sconce { display: none; } }
@media (min-width: 1280px) and (min-height: 712px) and (min-width: 1262px) { .home .sconce { display: block; } }
@media (min-width: 1304px) and (min-height: 888px) { body.home { --s: 4; --t: 32px; } .home .sconce { display: none; } }
@media (min-width: 1304px) and (min-height: 888px) and (min-width: 1648px) { .home .sconce { display: block; } }
@media (min-width: 1624px) and (min-height: 1064px) { body.home { --s: 5; --t: 32px; } .home .sconce { display: none; } }
@media (min-width: 1624px) and (min-height: 1064px) and (min-width: 2034px) { .home .sconce { display: block; } }
@media (min-width: 1944px) and (min-height: 1240px) { body.home { --s: 6; --t: 48px; } .home .sconce { display: none; } }
@media (min-width: 1944px) and (min-height: 1240px) and (min-width: 2420px) { .home .sconce { display: block; } }
@media (min-width: 2264px) and (min-height: 1416px) { body.home { --s: 7; --t: 48px; } .home .sconce { display: none; } }
@media (min-width: 2264px) and (min-height: 1416px) and (min-width: 2806px) { .home .sconce { display: block; } }
@media (min-width: 2584px) and (min-height: 1592px) { body.home { --s: 8; --t: 48px; } .home .sconce { display: none; } }
@media (min-width: 2584px) and (min-height: 1592px) and (min-width: 3192px) { .home .sconce { display: block; } }
@media (min-width: 2904px) and (min-height: 1768px) { body.home { --s: 9; --t: 64px; } .home .sconce { display: none; } }
@media (min-width: 2904px) and (min-height: 1768px) and (min-width: 3578px) { .home .sconce { display: block; } }
@media (min-width: 3224px) and (min-height: 1944px) { body.home { --s: 10; --t: 64px; } .home .sconce { display: none; } }
@media (min-width: 3224px) and (min-height: 1944px) and (min-width: 3964px) { .home .sconce { display: block; } }
@media (min-width: 3544px) and (min-height: 2120px) { body.home { --s: 11; --t: 64px; } .home .sconce { display: none; } }
@media (min-width: 3544px) and (min-height: 2120px) and (min-width: 4350px) { .home .sconce { display: block; } }
@media (min-width: 3864px) and (min-height: 2296px) { body.home { --s: 12; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 3864px) and (min-height: 2296px) and (min-width: 4736px) { .home .sconce { display: block; } }
@media (min-width: 4184px) and (min-height: 2472px) { body.home { --s: 13; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 4184px) and (min-height: 2472px) and (min-width: 5122px) { .home .sconce { display: block; } }
@media (min-width: 4504px) and (min-height: 2648px) { body.home { --s: 14; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 4504px) and (min-height: 2648px) and (min-width: 5508px) { .home .sconce { display: block; } }
@media (min-width: 4824px) and (min-height: 2824px) { body.home { --s: 15; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 4824px) and (min-height: 2824px) and (min-width: 5894px) { .home .sconce { display: block; } }
@media (min-width: 5144px) and (min-height: 3000px) { body.home { --s: 16; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 5144px) and (min-height: 3000px) and (min-width: 6280px) { .home .sconce { display: block; } }
@media (min-width: 5464px) and (min-height: 3176px) { body.home { --s: 17; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 5464px) and (min-height: 3176px) and (min-width: 6666px) { .home .sconce { display: block; } }
@media (min-width: 5784px) and (min-height: 3352px) { body.home { --s: 18; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 5784px) and (min-height: 3352px) and (min-width: 7052px) { .home .sconce { display: block; } }
@media (min-width: 6104px) and (min-height: 3528px) { body.home { --s: 19; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 6104px) and (min-height: 3528px) and (min-width: 7438px) { .home .sconce { display: block; } }
@media (min-width: 6424px) and (min-height: 3704px) { body.home { --s: 20; --t: 80px; } .home .sconce { display: none; } }
@media (min-width: 6424px) and (min-height: 3704px) and (min-width: 7824px) { .home .sconce { display: block; } }
/* the run log fills what the inventory had, the reason line always shows under it */
@media (min-width: 700px) and (min-height: 521px) {
  .home[data-room="ath"] .logbox { height: 128px; grid-template-rows: minmax(0, 1fr) auto; align-self: start; }
  .home[data-room="ath"] .logbox .runlog { max-height: none; min-height: 0; }
  .home .logbox .why { max-height: 40px; overflow: auto; }
}

/* the edge hints exist only on portrait phones */
.home .pan { display: none; }

/* ---------- portrait phones: the room at x2 (640x400) scrolls sideways like a SCUMM room. The frame (.rf) is the camera
   window (a size container: 100cqw/100cqh = what is visible), the room slides under it by --cam (room.js sets it in even px;
   before JS the same start position comes from CSS). UI that belongs to the screen, not the art (exit, meter, card, lines)
   follows the camera. Short screens crop the floor, never the sides. */
@media (max-width: 699px) and (orientation: portrait) {
  body.home { --s: 2; --t: 16px; --fr: 0px; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .home .screen { height: 100%; min-height: 0; }
  .home .stage { flex: 0 1 auto; height: calc(200 * var(--u)); min-height: 0; }
  .home .panel { flex: 1 0 auto; align-content: space-evenly; }
  .home .rf { inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0; overflow: hidden; overflow: clip; container-type: size; touch-action: none; }
  .home .room { --cam: clamp(0px, calc(155 * var(--u) - 50cqw), calc(320 * var(--u) - 100cqw)); transform: translateX(calc(-1 * var(--cam))); }
  .home .exit { left: calc(var(--cam) + 8px); bottom: calc(200 * var(--u) - 100cqh + 8px); }
  .home .ath .meter { right: calc(320 * var(--u) - var(--cam) - 100cqw + 8px); bottom: calc(200 * var(--u) - 100cqh + 60px); }
  .home .say-ath { left: calc(var(--cam) + 8px); right: auto; width: calc(100cqw - 16px); }
  .home .rm-vault .card { left: calc(var(--cam) + 50cqw); width: min(calc(100cqw - 24px), calc(196 * var(--u))); }
  .home .say-room { --sw: min(calc(196 * var(--u)), calc(100cqw - 16px)); width: var(--sw); right: auto;
    left: clamp(calc(var(--cam) + 8px), calc(267 * var(--u) - var(--sw) / 2), calc(var(--cam) + 100cqw - 8px - var(--sw))); }
  /* edge hints: thin pixel chevrons, gold with an ink outline, gone at the room's end */
  .home .pan { position: absolute; z-index: 6; top: 0; bottom: 0; width: 24px; display: grid; place-items: center; pointer-events: none; }
  .home .pan.l { left: 0; } .home .pan.r { right: 0; }
  .home .pan::before { content: ""; width: 10px; height: 18px; background: var(--gold-hi); image-rendering: pixelated;
    -webkit-mask: var(--chev) 0 0 / 100% 100% no-repeat; mask: var(--chev) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
    animation: hint 1.6s steps(1, end) infinite; }
  .home .pan.r::before { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1z'/%3E%3C/svg%3E"); }
  .home .pan.l::before { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h-1v1h-1v1h-1v1h-1v1h-1v1h1v1h1v1h1v1h1v1h1z'/%3E%3C/svg%3E"); }
  .home .pan.off { visibility: hidden; }
  @keyframes hint { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .45; } }
}
/* not much height: a tighter panel, so the room keeps more of its floor */
@media (max-width: 699px) and (orientation: portrait) and (max-height: 780px) {
  .home .panel { gap: 6px 24px; padding: 8px 12px 10px; }
  .home .verb { min-height: 34px; }
}
@media (max-width: 699px) and (orientation: portrait) and (max-height: 680px) {
  .home .panel { gap: 4px 24px; padding: 6px 12px 8px; }
  .home .verb { min-height: 32px; }
  .home .hud .ca { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .home .pan::before { animation: none; } }