/* mirelight/css/mirelight.css - MIRELIGHT's page: the curtain, the door over the side's landing, the corner, a night's
 * HUD around the water (the spot and the clock, the oil, the creel, the cohort's face, a story night's goal, the
 * lantern's five glasses, the night's news, Flare, the cohort's help and Row home), the first-time tips, the tutorial's
 * words, the cast's scenes, the sheets, and the rooms (the Story, the Lake map, the Challenge board, the Fishbook, the
 * Cohorts, the Collection and the Shop), laid over the water (mirelight/js/mirelight-render.js). The Herd's colours are
 * lantern amber, moonlit teal and gold on night water; the Horde's violet and swamp green (html[data-side], set by
 * mirelight/js/mirelight-main.js).
 *
 * The series' rules, kept here from the first draw (docs/READABILITY.md, ARCHITECTURE.md conventions 35 to 37,
 * docs/DUO-DEVELOPMENT-SPEC.md DUO-3, DUO-6, DUO-7, docs/LESSONS-LEARNED.md UI-23): words never under 16 CSS px and 18
 * for reading on a phone; every button 44 px or more (48 on a touch screen); nothing lies on a button; every edge steps
 * in past an iPhone's camera and rounded corners (env(safe-area-inset-*)); a short pane scrolls its panel and keeps Row
 * home in reach; the 320 point iPhone fits.
 *
 * A NIGHT'S LAYOUT is one grid (#hud): held upright, the top bar, the goal, the glasses, the water's slot, and the foot
 * (what is happening, Flare, the cohort and Row home); held sideways, the water on the left and a panel on the right.
 * mirelight-main.js measures #slot and fits the punt into it, so the water always has the room the words leave it. The
 * night's bars are glass with no blur: a blur over a canvas that redraws every frame costs a phone its battery. */
:root {
  --ink: #06141A;
  --glass: rgba(6, 22, 30, 0.84);
  --glass-2: rgba(12, 38, 50, 0.92);
  --line: rgba(150, 230, 255, 0.24);
  --text: #EFFAFF;
  --muted: #C8E4EE;
  --gold: #FFC86B;
  --a: #FFB347;
  --b: #7CFFD4;
  --foe: #7CFF6B;
  --shine: #FFE08A;
  --font: 'Trebuchet MS', 'Lucida Grande', Verdana, sans-serif;
  --title-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --edge-l: var(--sotc-edge-l, env(safe-area-inset-left, 0px));
  --edge-r: var(--sotc-edge-r, env(safe-area-inset-right, 0px));
  --tap: 48px;
  --panel: 340px;
}
html[data-side="horde"] {
  --ink: #0A0612; --glass: rgba(16, 10, 26, 0.86); --glass-2: rgba(30, 18, 46, 0.92); --line: rgba(190, 160, 255, 0.26);
  --muted: #DCCFF0; --gold: #C9F27A; --a: #B48CFF; --b: #9CFF8A; --foe: #FF8FC7; --shine: #C58BFF;
}
@media (pointer: fine) { :root { --tap: 44px; } }

html, body { margin: 0; padding: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }

#water { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
html:not([data-screen="play"]):not([data-screen="over"]) #water { visibility: hidden; }

/* ---- the loading curtain ------------------------------------------------------------------------------------------- */
.curtain { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 40%, #12384A 0%, var(--ink) 72%); transition: opacity 0.5s ease; }
html[data-side="horde"] .curtain { background: radial-gradient(circle at 50% 40%, #2A1C4A 0%, var(--ink) 72%); }
.curtain.is-gone { opacity: 0; }
.curtain-art { width: 132px; height: 132px; object-fit: contain; animation: curtain-bob 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 28px rgba(255, 179, 71, 0.7)); }
@keyframes curtain-bob { from { transform: translateY(8px) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }
.curtain-title { margin: 0; font-family: var(--title-font); font-weight: bold; letter-spacing: 0.3em; font-size: 26px; color: var(--gold); text-align: center; }
.curtain-bar { width: min(280px, 70vw); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.curtain-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--a), var(--gold), var(--b)); transition: width 0.4s ease; }
.curtain-line { margin: 0; color: var(--muted); font-size: 18px; }

/* ---- buttons and chips --------------------------------------------------------------------------------------------- */
.btn { appearance: none; min-height: var(--tap); border: 1px solid var(--line); background: var(--glass-2); color: var(--text); border-radius: 14px;
  padding: 10px 18px; font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease, background 0.2s;
  box-sizing: border-box; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .chip:focus-visible, .glass:focus-visible, .hud-menu:focus-visible, .hud-coach:focus-visible, .renown:focus-visible, .mode:focus-visible,
.ml-spot:focus-visible, .ml-chapter:focus-visible, .ml-pin:focus-visible, .ml-cohort:focus-visible, .ml-item:focus-visible, .ml-scene:focus-visible,
.ml-cpick__b:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-ghost { background: var(--glass); }
.btn-play { position: relative; border: 0; min-height: 64px; padding: 14px 44px; font-size: 26px; letter-spacing: 0.16em; text-transform: uppercase; color: #1E1204;
  background: linear-gradient(135deg, var(--gold), #FFF0C2 45%, var(--a)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 10px 34px rgba(255, 179, 71, 0.5); }
html[data-side="horde"] .btn-play { color: #160C24; background: linear-gradient(135deg, #C9F27A, #F5E9A8 40%, #C58BFF); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 10px 34px rgba(156, 255, 138, 0.4); }
.btn-play::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--gold); opacity: 0.6; animation: halo 2.4s ease-in-out infinite; pointer-events: none; }
.btn-play small { display: block; font-size: 16px; letter-spacing: 0.04em; text-transform: none; font-weight: bold; margin-top: 2px; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 0.15; } }
.chip { appearance: none; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--glass);
  color: var(--text); border-radius: 999px; padding: 6px 16px; font-size: 16px; font-weight: bold; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-sizing: border-box; }
.chip-side { padding: 4px 16px 4px 10px; cursor: default; }
.chip-side.side-badge--herd { border-color: rgba(255, 179, 71, 0.55); }
.chip-side.side-badge--horde { border-color: rgba(156, 255, 138, 0.5); }
.chip-side[role="button"] { cursor: pointer; }
/* the shared badge (js/side-picker.css) sets its two lines at 9 and 14 px; here every word is 16 px (the readable rule) */
.chip-side .side-badge__kick { font-size: 16px; letter-spacing: 0.02em; text-transform: none; opacity: 1; }
.chip-side .side-badge__name { font-size: 16px; letter-spacing: 0.1em; }

/* ---- the door ------------------------------------------------------------------------------------------------------ */
/* Over the side's landing (the Herd's lantern-lit Willowbank, the Horde's green-lit Rotwater). Held upright: one column
   in the middle; on a wide screen a column on the left with the painting on the right. */
.door { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden;
  box-sizing: border-box; padding: calc(72px + var(--safe-t)) calc(16px + var(--edge-r)) calc(122px + var(--safe-b)) calc(16px + var(--edge-l));
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(3, 12, 18, 0.74) 0%, rgba(3, 12, 18, 0.5) 52%, rgba(3, 12, 18, 0.12) 100%),
    url("../art/key-tall.webp") center 60% / cover no-repeat, var(--ink); }
html[data-side="horde"] .door { background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(8, 5, 16, 0.76) 0%, rgba(8, 5, 16, 0.52) 52%, rgba(8, 5, 16, 0.14) 100%),
    url("../art/landing-horde.webp") 40% center / cover no-repeat, var(--ink); }
.door-col { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin: auto 0; }
.door-kicker { margin: 0; color: var(--muted); letter-spacing: 0.3em; text-transform: uppercase; font-size: 16px; font-weight: bold; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.door-title { margin: 0; font-family: var(--title-font); font-weight: bold; line-height: 1; font-size: clamp(44px, min(9.5vw, 11vh), 96px); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3D2 28%, var(--gold) 58%, var(--a) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 28px rgba(255, 179, 71, 0.55)); }
html[data-side="horde"] .door-title { background: linear-gradient(180deg, #FFFFFF 0%, #EADFFF 30%, #C58BFF 62%, var(--b) 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(160, 140, 255, 0.5)); }
.door-sub { margin: 0 0 4px; font-size: 20px; line-height: 1.35; font-style: italic; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); }
/* RENOWN: the level in a gold disc, the title, the bar to the next level (press it: what each level opens) */
.renown { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 64px; padding: 8px 14px 8px 8px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.renown:hover { filter: brightness(1.12); }
.renown__badge { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  color: #241404; background: radial-gradient(circle at 35% 30%, #FFF8DC, var(--gold) 55%, #B8741C); box-shadow: 0 0 0 3px rgba(255, 232, 170, 0.35), 0 0 18px rgba(255, 179, 71, 0.5); }
html[data-side="horde"] .renown__badge { color: #1A0E2C; background: radial-gradient(circle at 35% 30%, #F4FFE0, #C9F27A 52%, #7C55C9); box-shadow: 0 0 0 3px rgba(201, 242, 122, 0.3), 0 0 18px rgba(197, 139, 255, 0.45); }
.renown__k { font-size: 16px; font-weight: bold; }
.renown__lv { font: bold 22px/1 var(--title-font); }
.renown__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.renown__name { font: bold 20px/1.15 var(--title-font); color: var(--gold); overflow-wrap: anywhere; }
.renown__bar { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); overflow: hidden; }
.renown__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 2%; border-radius: 5px; background: linear-gradient(90deg, var(--a), var(--gold), #FFF2C2); transition: width 0.6s ease; }
html[data-side="horde"] .renown__bar span { background: linear-gradient(90deg, #A78BFA, var(--b), #F0FFD8); }
.renown__text { font-size: 16px; line-height: 1.25; color: var(--muted); }
/* THE THREE WAYS IN: a card each, side by side, with its host's face */
.door-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.mode { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; box-sizing: border-box; min-height: 0;
  padding: 10px 6px 12px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); text-align: center; cursor: pointer; font: inherit; color: var(--text);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform 0.12s ease, filter 0.12s ease; }
.mode:hover { filter: brightness(1.14); }
.mode:active { transform: scale(0.98); }
.mode__art { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #0C2430; box-shadow: 0 0 14px rgba(0, 0, 0, 0.45); }
#mode-story .mode__art { border-color: #7FA06A; }
#mode-lake .mode__art { border-color: #F2B84B; }
#mode-board .mode__art { border-color: #B98A5E; }
.mode__name { font: bold 18px/1.15 var(--title-font); color: var(--gold); }
.mode__sub { font-size: 16px; line-height: 1.2; color: var(--muted); }
.door-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn-shop { color: #1E1204; border: 0; background: linear-gradient(135deg, #FFF0C2, var(--gold) 50%, var(--a)); }
html[data-side="horde"] .btn-shop { color: #160C24; background: linear-gradient(135deg, #F5E9A8, #C9F27A 50%, #C58BFF); }
.door-copy { position: fixed; left: calc(14px + var(--edge-l)); bottom: calc(8px + var(--safe-b)); margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 12px; z-index: 21; pointer-events: none; }
/* held upright on a phone: the title on one line, the three ways side by side as cards, so the door fits the screen
   above the World door (nothing under it: ARCHITECTURE.md convention 36) */
@media (max-aspect-ratio: 5/4) and (max-width: 620px) {
  .door { padding-top: calc(66px + var(--safe-t)); }
  .door-col { gap: 10px; }
  .door-title { font-size: min(11vw, 64px); letter-spacing: 0.06em; }
  .door-sub { font-size: 18px; margin: 0; }
  .mode { padding: 10px 4px 10px; }
  .mode__art { width: 56px; height: 56px; }
  .mode__name { font-size: 17px; }
  .door-row { gap: 8px; width: 100%; }
  .door-row .btn { flex: 1 1 auto; font-size: 16px; padding: 8px 12px; }
}
@media (max-aspect-ratio: 5/4) and (max-width: 360px) {
  .door-kicker { display: none; }
  .mode__name { font-size: 16px; }
}
/* THE DOOR'S ROOM, held upright (UI-23, the 320 point iPhone): the column starts under the corner, which can take two
   rows, and ends over the World door and the copyright, all measured (fitDoor in mirelight-main.js sets --corner-b
   and --door-foot). When the column is still too tall for what is left, fitDoor sets data-door-fit 1 to 4: the extra
   words go, then the hosts' faces, then the Play button's second line, and last the column scrolls in its own room
   (never under the World door). */
@media (max-aspect-ratio: 5/4) and (max-width: 620px) {
  .door { padding-top: max(calc(66px + var(--safe-t)), calc(var(--corner-b, 0px) + 8px)); padding-bottom: max(calc(16px + var(--safe-b)), calc(var(--door-foot, 116px) + 6px)); }
}
@media (max-aspect-ratio: 5/4) {
  html[data-door-fit] .door-kicker, html[data-door-fit] .door-sub, html[data-door-fit] .renown__text, html[data-door-fit] .mode__sub { display: none; }
  html[data-door-fit] .door-col, html[data-door-fit] .door-row { gap: 6px; }
  html[data-door-fit] .door-title { font-size: min(11vw, 12vh, 44px); }
  html[data-door-fit] .renown { min-height: 48px; padding: 2px 12px 2px 4px; }
  html[data-door-fit] .renown__badge { width: 42px; height: 42px; }
  html[data-door-fit] .renown__lv, html[data-door-fit] .renown__name { font-size: 18px; }
  html[data-door-fit] .btn-play { min-height: 56px; padding: 8px 30px; font-size: 22px; }
  html[data-door-fit] .mode { padding-top: 6px; padding-bottom: 8px; }
  html[data-door-fit] .mode__art { width: 44px; height: 44px; }
}
@media (min-aspect-ratio: 5/4) {
  html[data-door-fit] .door-title { font-size: min(72px, 5.6vw, 12vh); white-space: nowrap; }
  html[data-door-fit]:not([data-door-fit="1"]) .door-kicker, html[data-door-fit]:not([data-door-fit="1"]) .door-sub,
  html[data-door-fit]:not([data-door-fit="1"]) .renown__text, html[data-door-fit]:not([data-door-fit="1"]) .mode__sub { display: none; }
}
html[data-door-fit="2"] .mode__art, html[data-door-fit="3"] .mode__art, html[data-door-fit="4"] .mode__art { display: none; }
html[data-door-fit="2"] .mode, html[data-door-fit="3"] .mode, html[data-door-fit="4"] .mode { justify-content: center; min-height: 52px; }
html[data-door-fit="3"] .btn-play small, html[data-door-fit="4"] .btn-play small { display: none; }
html[data-door-fit="3"] .door-row .btn, html[data-door-fit="4"] .door-row .btn { padding-left: 9px; padding-right: 9px; }
html[data-door-fit="4"] .door-col { box-sizing: border-box; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 4px 6px; overscroll-behavior: contain; }
@media (min-aspect-ratio: 5/4) {
  .door { justify-content: flex-start; padding: calc(70px + var(--safe-t)) calc(24px + var(--edge-r)) calc(30px + var(--safe-b)) calc(max(24px, 6vw) + var(--edge-l));
    background: linear-gradient(90deg, rgba(3, 12, 18, 0.84) 0%, rgba(3, 12, 18, 0.55) 38%, rgba(3, 12, 18, 0) 62%), url("../art/key-wide.webp") 62% center / cover no-repeat, var(--ink); }
  html[data-side="horde"] .door { background: linear-gradient(90deg, rgba(8, 5, 16, 0.86) 0%, rgba(8, 5, 16, 0.56) 38%, rgba(8, 5, 16, 0) 62%), url("../art/landing-horde.webp") 66% center / cover no-repeat, var(--ink); }
  .door-col { align-items: flex-start; text-align: left; width: min(540px, 46vw); }
  .door-row { justify-content: flex-start; }
  /* the copyright line goes left of the World door, clear of the column's buttons */
  .door-copy { left: auto; right: calc(124px + var(--edge-r)); }
}
/* a phone held sideways, or a fold's short pane: the column wider and tighter, the three ways side by side */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .door { padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  .door-col { gap: 8px; width: min(620px, 64vw); }
  .door-kicker, .door-sub { display: none; }
  .door-title { font-size: clamp(34px, 10vh, 54px); }
  .renown { min-height: 52px; padding: 4px 12px 4px 4px; }
  .renown__badge { width: 44px; height: 44px; }
  .renown__lv { font-size: 18px; }
  .renown__name { font-size: 18px; }
  .mode { flex-direction: row; gap: 8px; min-height: 52px; padding: 4px 8px 4px 4px; text-align: left; }
  .mode__art { width: 44px; height: 44px; }
  .mode__name { font-size: 16px; }
  .mode__sub { display: none; }
  .btn-play { min-height: 56px; font-size: 22px; padding: 8px 34px; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 400px) {
  /* the column ends above the copyright line, which its last row of buttons reaches on a short screen */
  .door { padding-bottom: calc(28px + var(--safe-b)); }
  .door-title { font-size: 32px; }
  .renown__text { display: none; }
  .door-row .btn { padding: 6px 14px; }
}
/* the narrowest phone held sideways (568 x 320): a card is too narrow for a face and a name, so the name stands alone,
   and Renown and Play share a row so the door fits the height */
@media (min-aspect-ratio: 5/4) and (max-height: 400px) and (max-width: 680px) {
  .mode__art { display: none; }
  .mode { justify-content: center; padding: 4px 6px; text-align: center; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 340px) {
  .door-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; justify-items: stretch; }
  .door-title, .door-modes, .door-row { grid-column: 1 / -1; justify-self: start; }
  .door-modes, .door-row { justify-self: stretch; }
  .btn-play { min-height: 52px; padding: 6px 12px; font-size: 20px; letter-spacing: 0.1em; }
}

/* ---- the corner: top right ----------------------------------------------------------------------------------------- */
.corner { position: fixed; top: calc(12px + var(--safe-t)); right: calc(12px + var(--edge-r)); z-index: 45; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 24px - var(--edge-l) - var(--edge-r)); }
@media (max-width: 420px) { .corner { left: calc(12px + var(--edge-l)); justify-content: center; } .chip { padding: 6px 12px; } }
@media (min-aspect-ratio: 5/4) and (max-height: 560px) { .corner { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; } }

/* ---- A NIGHT ------------------------------------------------------------------------------------------------------- */
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; box-sizing: border-box; display: grid; gap: 8px;
  padding: calc(8px + var(--safe-t)) calc(10px + var(--edge-r)) calc(8px + var(--safe-b)) calc(10px + var(--edge-l));
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "goal" "glasses" "slot" "foot"; }
.hud > * { pointer-events: auto; min-width: 0; }
.slot { grid-area: slot; pointer-events: none !important; }
.hud-top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); }
.hud-menu { flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid rgba(255, 232, 170, 0.6); background: var(--glass-2); cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.hud-menu span, .hud-menu span::before, .hud-menu span::after { display: block; width: 18px; height: 3px; border-radius: 2px; background: #FFE8AA; content: ''; position: relative; }
.hud-menu span::before { position: absolute; top: -6px; }
.hud-menu span::after { position: absolute; top: 6px; }
.hud-menu:active { transform: scale(0.94); }
.hud-title { flex: 1 1 auto; min-width: 0; }
.hud-spot { margin: 0; font-family: var(--title-font); font-weight: bold; font-size: 18px; line-height: 1.15; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-clock { margin: 0; font-size: 16px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-oil { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hud-oil img { width: 28px; height: 28px; object-fit: contain; }
.hud-oil__bar { position: relative; display: block; width: 52px; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line); overflow: hidden; }
#hud-oil-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #FFB347, #FFE08A); transition: width 0.4s ease; }
html[data-side="horde"] #hud-oil-fill { background: linear-gradient(90deg, #6BE07A, #DFFFB0); }
.hud-oil.is-half #hud-oil-fill { background: linear-gradient(90deg, #FF8A3D, #FFC46B); }
.hud-oil.is-low #hud-oil-fill { background: #FF5A4A; animation: oil-blink 0.9s ease-in-out infinite; }
@keyframes oil-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hud-creel { flex: none; display: flex; align-items: center; gap: 6px; }
.hud-creel img { width: 32px; height: 32px; object-fit: contain; }
.hud-creel__words { display: flex; flex-direction: column; line-height: 1.1; }
.hud-creel__n { font-size: 20px; font-weight: bold; color: #FFF0C2; font-variant-numeric: tabular-nums; }
html[data-side="horde"] .hud-creel__n { color: #E7FFCF; }
.hud-creel__lb { font-size: 16px; color: var(--muted); white-space: nowrap; }
.hud-creel.is-full .hud-creel__n { color: var(--b); }
.hud-face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--b); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); background: #000; }
.hud-face.is-mood { animation: face-pop 0.5s ease; }
@keyframes face-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* a story night's goal */
.hud-goal { grid-area: goal; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px; background: var(--glass); border: 1px solid rgba(255, 200, 107, 0.5);
  font-size: 16px; line-height: 1.25; font-weight: bold; color: #FFF0C2; }
.hud-goal__mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1E1204; font-size: 16px; }
.hud-goal.is-met { border-color: var(--b); color: var(--b); }
.hud-goal.is-met .hud-goal__mark { background: var(--b); color: #052018; }
/* THE LANTERN'S FIVE GLASSES: each wears its own colour (--g); the one in the lantern glows */
/* the five glasses, a holiday night's own sixth and the lure on the line share the row equally (2026-10-21) */
/* the five glasses, then a holiday night's own and the lure on the line: one row while each keeps a finger's 44 px,
   two rows on a panel too narrow for that (2026-10-21) */
.glasses { grid-area: glasses; display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
.glasses:has(> :nth-child(7)) { gap: 4px; }
.glass { appearance: none; container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 4px 2px 5px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--g) 45%, transparent); background: var(--glass-2); cursor: pointer;
  font: inherit; color: var(--text); box-sizing: border-box; transition: box-shadow 0.2s, border-color 0.2s; }
.glass img { width: 32px; height: 32px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g) 70%, transparent)); }
.glass__name { font-size: 16px; font-weight: bold; line-height: 1.1; white-space: nowrap; }
@container (max-width: 55.9px) { .glass__name { display: none; } .glass img { width: 36px; height: 36px; } }
.glass.is-on { border-color: var(--g); background: linear-gradient(180deg, color-mix(in srgb, var(--g) 40%, #06141A), color-mix(in srgb, var(--g) 12%, #06141A));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 35%, transparent), 0 0 18px color-mix(in srgb, var(--g) 55%, transparent); }
.glass.is-on .glass__name { color: #FFFFFF; }
.glass.is-swap { animation: glass-swap 0.4s ease-in-out infinite alternate; }
@keyframes glass-swap { from { opacity: 1; } to { opacity: 0.5; } }
.glass.is-shut { border-color: var(--line); cursor: default; }
.glass.is-shut img { filter: grayscale(1) brightness(0.45); }
.glass.is-shut .glass__name { color: var(--muted); }
.glass:hover:not(.is-shut) { filter: brightness(1.15); }

.hud-foot { grid-area: foot; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); }
.hud-foot > * { flex-shrink: 0; }
.hud-scroll { display: flex; flex-direction: column; gap: 6px; }
.hud-scroll > * { flex-shrink: 0; }
.hud-info { margin: 0; min-height: 2.5em; font-size: 16px; line-height: 1.25; color: var(--text); }
.hud-info.is-bad { color: #FFB08A; }
html[data-side="horde"] .hud-info.is-bad { color: #FFB0DA; }
.hud-info.is-good { color: var(--b); }
.hud-info.is-go { color: var(--shine); font-weight: bold; }
.hud-info.is-chat { color: #E8F6FF; font-style: italic; }
.hud-end { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; }
.btn-flare { padding: 8px 16px; color: #FFF6DE; border-color: rgba(255, 179, 71, 0.6); background: linear-gradient(135deg, rgba(255, 140, 60, 0.45), rgba(120, 50, 10, 0.5)); }
.btn-flare.is-dim { background: var(--glass); border-color: var(--line); color: var(--muted); }
.btn-flare.is-glow { animation: flare-glow 1.1s ease-in-out infinite; }
@keyframes flare-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 179, 71, 0.55), 0 0 22px rgba(255, 140, 60, 0.7); } }
.hud-ward { display: inline-flex; align-items: center; gap: 8px; }
/* the ship's bell: a round picture button beside Flare, shown once it is earned (mirelight-sim.js bell()) */
.btn-bell { display: inline-grid; place-items: center; width: var(--tap); padding: 0; border-radius: 50%; color: #FFE7A8; border-color: rgba(255, 215, 120, 0.6);
  background: radial-gradient(circle at 40% 35%, rgba(255, 214, 120, 0.4), rgba(110, 70, 10, 0.5)); }
.btn-bell svg { width: 26px; height: 26px; fill: currentColor; pointer-events: none; }
.btn-bell.is-dim { background: var(--glass); border-color: var(--line); color: var(--muted); }
.btn-bell.is-glow { animation: flare-glow 1.1s ease-in-out infinite; }
.btn-assist { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; }
.btn-assist img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--b); background: #000; pointer-events: none; }
.btn-assist span { font-size: 16px; white-space: nowrap; }
.btn-assist.is-dim img { filter: grayscale(0.8) brightness(0.7); }
.btn-assist.is-dim span { color: var(--muted); }
.btn-assist.is-glow { border-color: var(--b); animation: assist-glow 1.3s ease-in-out infinite; }
@keyframes assist-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 255, 212, 0); } 50% { box-shadow: 0 0 0 4px rgba(124, 255, 212, 0.45), 0 0 18px rgba(124, 255, 212, 0.5); } }
.btn-end { justify-self: end; padding: 8px 20px; color: #1E1204; border: 0; background: linear-gradient(135deg, var(--gold), #FFF0C2 55%, var(--a)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); white-space: nowrap; }
html[data-side="horde"] .btn-end { color: #160C24; background: linear-gradient(135deg, #C9F27A, #F5E9A8 50%, #C58BFF); }
.btn-end.is-sure { background: linear-gradient(135deg, #FFB27A, #FF7A4A); color: #200A04; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* the night's notes: only where a tall panel has the room (DUO-5: a bigger screen shows more, never less) */
.hud-notes { display: none; flex-direction: column; gap: 6px; }
.hud-notes__h { margin: 4px 0 0; font: bold 18px/1.2 var(--title-font); color: var(--gold); }
.hud-notes__p { margin: 0; font-size: 16px; color: var(--muted); }
.hud-creelrow { display: flex; flex-wrap: wrap; gap: 6px; }
.hud-catch { margin: 0; display: flex; flex-direction: column; align-items: center; width: 60px; }
.hud-catch img { width: 48px; height: 48px; object-fit: contain; }
.hud-catch figcaption { font-size: 16px; line-height: 1.1; white-space: nowrap; }
.hud-note { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.hud-note img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.hud-note img.is-unknown { filter: brightness(0) drop-shadow(0 0 2px rgba(150, 230, 255, 0.6)); opacity: 0.8; }
.hud-note p { margin: 0; font-size: 16px; line-height: 1.3; }
.hud-note b { color: var(--gold); }
.ml-dot { display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 2px; border-radius: 50%; vertical-align: -1px; background: var(--g); box-shadow: 0 0 8px var(--g); }
@media (min-aspect-ratio: 9/8) and (min-height: 700px) { .hud-notes { display: flex; } }

/* the night's news rises at the far edge of the water for a moment: never over a button (the glasses are the night's
   whole play, and nothing overlaps a button), see-through enough to show the water under it, and every tap goes
   through it to the water. A first-time tip covers the foot until it is pressed away (never the water). */
.hud-banner { grid-area: slot; align-self: start; justify-self: center; z-index: 5; margin: 6px 0 0; box-sizing: border-box; width: min(100%, 540px); padding: 8px 16px;
  display: flex; flex-direction: column; justify-content: center; border-radius: 18px; text-align: center; background: linear-gradient(180deg, rgba(14, 48, 64, 0.88), rgba(6, 22, 30, 0.82));
  border: 2px solid var(--gold); pointer-events: none !important; animation: banner-in 0.35s ease both; }
html[data-side="horde"] .hud-banner { background: linear-gradient(180deg, rgba(30, 19, 48, 0.88), rgba(18, 10, 30, 0.82)); }
.hud-banner__t { margin: 0; font-family: var(--title-font); font-weight: bold; font-size: 22px; line-height: 1.15; color: var(--gold); }
.hud-banner__s { margin: 2px 0 0; font-size: 16px; line-height: 1.3; color: var(--text); }
.hud-banner__s:empty { display: none; }
.hud-banner.is-shine { border-color: var(--shine); box-shadow: 0 0 26px rgba(255, 224, 138, 0.45); }
.hud-banner.is-bad { border-color: #FF8A5A; }
.hud-banner.is-bad .hud-banner__t { color: #FFB08A; }
html[data-side="horde"] .hud-banner.is-bad .hud-banner__t { color: #FFB0DA; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hud-coach { grid-area: foot; align-self: stretch; justify-self: stretch; z-index: 4; appearance: none; display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; min-height: var(--tap); margin: 0; padding: 10px 12px 10px 16px; border-radius: 18px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(135deg, #10394A, #06161E); border: 2px solid var(--gold); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  animation: banner-in 0.35s ease both; }
html[data-side="horde"] .hud-coach { background: linear-gradient(135deg, #251838, #140C22); }
/* a tip longer than its room runs off the foot, never up over the glasses (2026-10-21: the holiday glass and the lure
   can take the glasses to two rows on a short screen): its words centred by auto margins, which never go below nothing */
.hud-coach { align-items: flex-start; overflow: hidden; }
.hud-coach > * { margin-block: auto; }
/* the tip stands in the foot's place: the foot's buttons are out of sight under it until it is pressed away */
.hud:has(> .hud-coach:not([hidden])) .hud-foot { visibility: hidden; }
.hud-coach__t { flex: 1 1 auto; font-size: 18px; line-height: 1.3; }
.hud-coach__t::before { content: 'Tip'; display: block; margin-bottom: 2px; font: bold 16px/1.2 var(--title-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.hud-coach__ok { flex: none; padding: 8px 12px; border-radius: 12px; background: var(--gold); color: #1E1204; font-size: 16px; font-weight: bold; }

/* held sideways (or a wide window): the water on the left, the panel on the right */
@media (min-aspect-ratio: 9/8) {
  .hud { grid-template-columns: minmax(0, 1fr) min(var(--panel), 46vw); grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "slot top" "slot goal" "slot glasses" "slot foot"; column-gap: 10px; }
  .hud-foot { overflow: hidden; min-height: 0; }
  .hud-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .hud-foot .hud-end { margin-top: auto; }
  .hud-end { grid-template-columns: auto minmax(0, 1fr); }
  .hud-end .btn-end { grid-column: 1 / -1; justify-self: stretch; }
  /* the panel is narrow: the reach and the clock get a line of their own, the gauges sit under them */
  .hud-top { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "menu title title title face" "menu oil creel . face";
    align-items: center; column-gap: 12px; row-gap: 2px; }
  .hud-menu { grid-area: menu; }
  .hud-title { grid-area: title; }
  .hud-oil { grid-area: oil; flex-direction: row; gap: 6px; }
  .hud-oil img { width: 24px; height: 24px; }
  .hud-creel { grid-area: creel; }
  .hud-creel img { width: 26px; height: 26px; }
  .hud-creel__words { flex-direction: row; align-items: baseline; gap: 6px; }
  .hud-creel__n { font-size: 18px; }
  .hud-face { grid-area: face; }
}
/* a short pane held sideways (a phone, a fold half open): everything a size smaller */
@media (min-aspect-ratio: 9/8) and (max-height: 520px) {
  .hud { gap: 6px; padding-top: calc(6px + var(--safe-t)); padding-bottom: calc(6px + var(--safe-b)); }
  .hud-top { padding: 4px 6px; gap: 6px; }
  .hud-face { width: 44px; height: 44px; }
  .glass { min-height: 48px; padding: 2px; }
  .glass img { width: 28px; height: 28px; }
  .hud-info { min-height: 0; }
  .hud-end { grid-template-columns: auto auto minmax(0, 1fr); gap: 6px; }
  .hud-end .btn-end { grid-column: auto; padding: 8px 12px; }
  .btn-assist span { display: none; }
  .btn-assist { padding: 2px; }
  .btn-flare { padding: 8px 12px; }
  .hud-ward { gap: 6px; }
}
@media (min-aspect-ratio: 9/8) and (max-height: 360px) {
  .hud-spot { font-size: 16px; }
  .hud-creel__lb, .hud-oil__bar { display: none; }
  .glass__name { display: none; }
  .glass { min-height: 44px; }
  .hud-face { display: none; }
}
/* held upright on a phone: the foot tight, so the water keeps its room */
@media (max-aspect-ratio: 9/8) and (max-height: 700px) {
  .hud { gap: 6px; }
  .hud-top { padding: 4px 6px; }
  .hud-foot { padding: 6px; gap: 4px; }
  .glass { min-height: 48px; padding: 2px; }
  .hud-face { width: 44px; height: 44px; }
  .hud-coach__t { font-size: 16px; }
  .hud-info { min-height: 2.5em; max-height: 3.75em; overflow: hidden; }
}
/* a phone held upright: the clock and the moon a line each, so neither is cut short */
@media (max-aspect-ratio: 9/8) and (max-width: 520px) {
  .hud-clock__t, .hud-clock__m { display: block; overflow: hidden; text-overflow: ellipsis; }
  .hud-clock__c { display: none; }
}
@media (max-aspect-ratio: 9/8) and (max-width: 420px) {
  .hud-spot { font-size: 16px; }
  .btn-end { padding: 8px 14px; }
  .hud-oil__bar { width: 40px; }
}
/* a phone held upright with the ship's bell beside Flare: the help button shows its face alone, so Row home keeps its
   room (its words are in its label and How to play) */
@media (max-aspect-ratio: 9/8) and (max-width: 460px) {
  .hud-end:has(#hud-bell:not([hidden])) .btn-assist span { display: none; }
  .hud-end:has(#hud-bell:not([hidden])) .btn-assist { padding: 2px; }
}
@media (max-aspect-ratio: 9/8) and (max-width: 360px) {
  /* the 320 point iPhone (UI-23): the cohort's face gives its room to the spot's name (it is on the help button too),
     the creel's pounds wait for the end of the night, and the help button shows its face alone (its words are in the
     tip, How to play and its own label) */
  .hud-face { display: none; }
  .hud-creel__lb { display: none; }
  .hud-end { gap: 6px; }
  .btn-assist span { display: none; }
  .btn-assist { padding: 2px; }
  .btn-flare { padding: 8px 12px; }
  .hud-ward { gap: 6px; }
  .btn-end { padding: 8px 12px; font-size: 16px; }
}

/* ---- the sheets: the menu, a spot's page, Renown, How to play (js/room-ui.js dialog) ------------------------------- */
.ml-sheet__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ml-rows { display: flex; flex-direction: column; gap: 8px; }
.ml-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-row img { flex: none; width: 48px; height: 48px; object-fit: contain; }
.ml-row.is-reach img { object-fit: cover; border-radius: 10px; }
.ml-row.is-cohort img, .ml-row.is-angler img { border-radius: 50%; object-fit: cover; }
.ml-row__words { min-width: 0; }
.ml-row__name { margin: 0; font-size: var(--rui-body, 18px); font-weight: bold; color: var(--rui-gold, #FFC86B); line-height: 1.2; }
.ml-row__what { margin: 2px 0 0; font-size: var(--rui-min, 16px); line-height: 1.35; }
.ml-h { margin: 16px 0 6px; font: bold var(--rui-h2, 22px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-h:first-child { margin-top: 0; }
.ml-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.ml-links .rui-btn { text-decoration: none; }
.ml-keys { margin: 0; padding-left: 20px; }
.ml-keys li { font-size: var(--rui-min, 16px); line-height: 1.5; }
.ml-keys kbd { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 6px; border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); font: bold 16px/1.4 var(--font); text-align: center; }
/* HOW TO PLAY's pictures */
.ml-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.ml-pics.is-small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.ml-pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-pic img { width: 72px; height: 72px; object-fit: contain; }
.ml-pic figcaption { font-size: var(--rui-min, 16px); line-height: 1.2; text-align: center; font-weight: bold; }
.ml-pic.is-face img { object-fit: cover; border-radius: 50%; border: 2px solid var(--rui-gold, #FFC86B); }
.ml-pic.is-wide { grid-column: span 2; }
.ml-pic.is-wide img { width: 100%; height: 72px; object-fit: cover; border-radius: 10px; }
.ml-pic.is-old img { filter: drop-shadow(0 0 10px rgba(255, 224, 138, 0.7)); }
.ml-pic.is-map img { width: 72px; height: 96px; object-fit: cover; border-radius: 8px; }
/* A SPOT'S PAGE */
.ml-reachpic { position: relative; margin: 0 0 10px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 7; background: #06141A; }
.ml-reachpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-reachpic figcaption { position: absolute; left: 10px; bottom: 8px; padding: 4px 12px; border-radius: 12px; background: rgba(3, 12, 18, 0.86); font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-facts { color: var(--rui-soft, #C8E4EE); }
.ml-starlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-starlist li { display: flex; align-items: center; gap: 10px; font-size: var(--rui-min, 16px); line-height: 1.3; }
.ml-star { flex: none; font-size: 22px; line-height: 1; color: rgba(255, 255, 255, 0.4); }
.ml-starlist li.is-on .ml-star { color: #FFD95A; text-shadow: 0 0 8px rgba(255, 217, 90, 0.6); }
.ml-fishgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(150px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 10px; }
.ml-fishtile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 14px; text-align: center;
  background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-fishtile img { width: 72px; height: 72px; object-fit: contain; }
.ml-fishtile.is-unknown img { filter: brightness(0) drop-shadow(0 0 3px rgba(150, 230, 255, 0.7)); opacity: 0.85; }
.ml-fishtile.is-wanted { border: 2px solid var(--rui-gold, #FFC86B); }
.ml-fishtile.is-old { border: 2px solid #FFE08A; background: radial-gradient(circle at 50% 30%, rgba(255, 224, 138, 0.22), var(--rui-panel-2, #12303C) 70%); }
.ml-fishtile figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--rui-min, 16px); line-height: 1.25; }
.ml-fishtile b { color: var(--rui-gold, #FFC86B); }
.ml-cpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.ml-cpick__b { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; min-height: 44px; border-radius: 14px; cursor: pointer; font: inherit;
  background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: var(--rui-ink, #EFFAFF); }
.ml-cpick__b img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ml-cpick__b span { font-size: var(--rui-min, 16px); font-weight: bold; }
.ml-cpick__b.is-on { border-color: var(--rui-gold, #FFC86B); box-shadow: 0 0 0 2px rgba(255, 200, 107, 0.35); }
.ml-cpick__b.is-shut img { filter: grayscale(1) brightness(0.5); }
.ml-cpick__b.is-shut span { color: var(--rui-soft, #C8E4EE); }
.ml-cpick__line { margin-top: 8px; }

/* ---- THE ROOMS (readable rooms: js/room-ui.js) ------------------------------------------------------------------------ */
.rui.ml-room[data-paint] { background: linear-gradient(180deg, rgba(3, 14, 20, 0.84), rgba(3, 14, 20, 0.93)), var(--rui-paint) center / cover no-repeat, #06141A; }
.rui.ml-room[data-side="horde"][data-paint] { background: linear-gradient(180deg, rgba(10, 7, 20, 0.84), rgba(10, 7, 20, 0.93)), var(--rui-paint) center / cover no-repeat, #0A0612; }
.rui.ml-room--board[data-paint] { background: linear-gradient(180deg, rgba(20, 12, 4, 0.55), rgba(20, 12, 4, 0.78)), var(--rui-paint) center / cover no-repeat, #2A1A0C; }
.ml-count { margin: 0 0 8px; }
.ml-one { max-width: 520px; }
.ml-host { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-host__face { flex: none; width: calc(72px * var(--rui-s, 1)); height: calc(72px * var(--rui-s, 1)); border-radius: 50%; object-fit: cover; border: 2px solid var(--rui-gold, #FFC86B); background: #06141A; }
.ml-host__words { min-width: 0; }
.ml-host__name { margin: 0 0 2px; font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-host__line { margin: 0; font-style: italic; }
.ml-stars { display: inline-flex; gap: 2px; font-size: 20px; line-height: 1; color: rgba(255, 255, 255, 0.35); }
.ml-stars .is-on { color: #FFD95A; text-shadow: 0 0 6px rgba(255, 217, 90, 0.6); font-style: normal; }
.ml-stars i { font-style: normal; }
/* THE STORY */
.ml-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(300px * var(--rui-s, 1)), 100%), 1fr)); gap: 10px; margin: 10px 0; }
.ml-chapter { appearance: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; min-height: 44px;
  background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: var(--rui-ink, #EFFAFF); }
.ml-chapter:hover { filter: brightness(1.1); }
.ml-chapter.is-on { border-color: var(--rui-gold, #FFC86B); box-shadow: 0 0 0 2px rgba(255, 200, 107, 0.35), 0 6px 22px rgba(255, 200, 107, 0.25); }
.ml-chapter.is-done { border-color: rgba(124, 255, 212, 0.5); }
.ml-chapter.is-shut { cursor: default; }
.ml-chapter.is-shut .ml-chapter__art img { filter: grayscale(0.9) brightness(0.5); }
.ml-chapter__art { position: relative; flex: none; width: calc(76px * var(--rui-s, 1)); height: calc(76px * var(--rui-s, 1)); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(255, 179, 71, 0.36), rgba(6, 20, 26, 1) 72%); border: 2px solid rgba(255, 200, 107, 0.5); }
.ml-chapter__art img { width: 86%; height: 86%; object-fit: contain; }
.ml-chapter__art.is-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ml-chapter__art.is-unknown img { filter: brightness(0) drop-shadow(0 0 3px rgba(150, 230, 255, 0.8)); }
.ml-chapter__n { position: absolute; left: -4px; top: -4px; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center; border-radius: 15px;
  background: #06141A; border: 2px solid var(--rui-gold, #FFC86B); color: var(--rui-gold, #FFC86B); font: bold 16px/1 var(--rui-title-font, Georgia, serif); }
.ml-chapter__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-chapter__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-chapter.is-shut .ml-chapter__name { color: var(--rui-ink, #EFFAFF); }
.ml-chapter__where, .ml-chapter__goal { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); }
.ml-chapter__goal { color: var(--rui-ink, #EFFAFF); }
.ml-chapter__state { font-size: var(--rui-min, 16px); font-weight: bold; color: var(--rui-warn, #FFD27A); }
.ml-chapter__state.is-open { color: var(--rui-ink, #EFFAFF); }
.ml-chapter__state.is-done { color: var(--rui-good, #7CFFD4); }
/* THE LAKE: the map with a pin a reach, and the reaches' spots */
.ml-map { position: relative; container-type: inline-size; width: min(100%, 680px); margin: 0 auto; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 200, 107, 0.35); background: #06141A center / cover no-repeat; }
.ml-pin { appearance: none; position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--rui-ink, #EFFAFF); transform: translate(-50%, -22px); }
.ml-pin__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box; font: bold 20px/1 var(--rui-title-font, Georgia, serif);
  color: #1E1204; background: radial-gradient(circle at 35% 30%, #FFF8DC, #FFC86B 55%, #B8741C); border: 2px solid #FFF0C2;
  box-shadow: 0 0 0 4px rgba(255, 200, 107, 0.25), 0 0 20px rgba(255, 179, 71, 0.75); animation: pin-glow 2.4s ease-in-out infinite; }
@keyframes pin-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 200, 107, 0.25), 0 0 16px rgba(255, 179, 71, 0.6); } 50% { box-shadow: 0 0 0 7px rgba(255, 200, 107, 0.12), 0 0 28px rgba(255, 179, 71, 0.9); } }
.ml-pin__name { padding: 2px 10px; border-radius: 10px; background: rgba(3, 12, 18, 0.86); font-size: 16px; font-weight: bold; white-space: nowrap; }
.ml-pin.is-shut .ml-pin__n { color: #DDE7EC; background: radial-gradient(circle at 35% 30%, #8FA3AD, #3E5560 70%); border-color: #8FA3AD; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); animation: none; }
.ml-pin.is-here .ml-pin__n { border-color: #7CFFD4; box-shadow: 0 0 0 4px rgba(124, 255, 212, 0.4), 0 0 24px rgba(124, 255, 212, 0.8); }
@container (max-width: 479.9px) { .ml-pin__name { display: none; } }
.ml-reach { scroll-margin-top: 12px; }
.ml-reach__head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; }
.ml-reach__art { flex: none; width: calc(120px * var(--rui-s, 1)); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-reach.is-shut .ml-reach__art { filter: grayscale(0.8) brightness(0.55); }
.ml-reach__head .rui-p { margin: 0; }
@media (max-width: 420px) { .ml-reach__head { flex-direction: column; } .ml-reach__art { width: 100%; } }
.ml-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(230px * var(--rui-s, 1)), 100%), 1fr)); gap: 10px; }
.ml-spot { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 12px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; min-height: 44px;
  background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: var(--rui-ink, #EFFAFF); }
.ml-spot:hover { filter: brightness(1.1); }
.ml-spot.is-on { border-color: #7CFFD4; }
.ml-spot.is-shut { opacity: 0.75; }
.ml-spot__fish { display: flex; gap: 4px; }
.ml-spot__fish img { width: 48px; height: 48px; object-fit: contain; }
.ml-spot__fish img.is-unknown { filter: brightness(0) drop-shadow(0 0 2px rgba(150, 230, 255, 0.7)); opacity: 0.85; }
.ml-spot__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-spot__old { font-size: var(--rui-min, 16px); font-weight: bold; color: #FFE08A; }
.ml-spot__state { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-warn, #FFD27A); }
.ml-spot__state.is-open { color: var(--rui-soft, #C8E4EE); }
.ml-spot__holes { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-good, #7CFFD4); }
.ml-holelist .ml-star { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: bold 16px/1 var(--rui-title-font, Georgia, serif); background: rgba(255, 255, 255, 0.12); }
.ml-holelist li.is-on .ml-star { color: #1E1204; background: #FFC86B; text-shadow: none; }
/* THE FISHING HOLES: the spot's own map (3:4), its holes pinned on it and the boat at the landing; the hole's card beside
   it on a wide screen, under it on a phone */
.ml-holes { display: grid; gap: 14px; align-items: start; grid-template-areas: "map" "card" "host"; }
.ml-holes > .ml-host { grid-area: host; }
.ml-holes > .ml-holemap { grid-area: map; }
.ml-holes > .ml-holecard { grid-area: card; }
@media (min-width: 760px) {
  .ml-holes { grid-template-columns: min(520px, max(200px, calc((100dvh - 150px) * 0.75)), 50%) minmax(280px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "map host" "map card"; }
}
.ml-holemap { position: relative; width: min(100%, 520px, max(200px, calc((100dvh - 150px) * 0.75))); margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 200, 107, 0.35); background: #06141A center no-repeat; background-size: 100% 100%, cover; }
.ml-holemap__boat { position: absolute; height: 40px; width: auto; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.75)); }
.ml-holemap__boat.is-rowing { transition: left 0.6s ease-in-out, top 0.6s ease-in-out; }
.ml-hole { transform: translate(-50%, -50%); }
.ml-hole.is-on .ml-pin__n { border-color: #7CFFD4; box-shadow: 0 0 0 4px rgba(124, 255, 212, 0.5), 0 0 26px rgba(124, 255, 212, 0.9); animation: none; }
.ml-holecard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 18px; background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-holecard.is-deep { border-color: #4FD6B0; background: linear-gradient(180deg, #0B2C38, #061820); }
.ml-holecard .rui-p { margin: 0; }
.ml-holecard__depth { margin: 0; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rui-soft, #C8E4EE); }
.ml-holecard__name { margin: 0; font: bold var(--rui-h2, 22px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-holecard.is-shut .ml-holecard__name { color: var(--rui-ink, #EFFAFF); }
.ml-holecard__h { margin: 4px 0 0; font-size: var(--rui-min, 16px); font-weight: bold; color: var(--rui-gold, #FFC86B); }
.ml-holefish { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(104px * var(--rui-s, 1)), calc(50% - 4px)), 1fr)); gap: 8px; }
.ml-holefish__f { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); text-align: center; }
.ml-holefish__f img { width: 56px; height: 56px; object-fit: contain; }
.ml-holefish__f.is-unknown img { filter: brightness(0) drop-shadow(0 0 3px rgba(150, 230, 255, 0.75)); opacity: 0.85; }
.ml-holefish__f.is-old { box-shadow: inset 0 0 0 2px #FFE08A; }
.ml-holefish__f.is-trophy { box-shadow: inset 0 0 0 2px #FFC86B; }
.ml-holefish__f figcaption { display: flex; flex-direction: column; font-size: var(--rui-min, 16px); line-height: 1.2; }
.ml-holefish__f figcaption span { color: var(--rui-good, #7CFFD4); font-weight: bold; }
.ml-holecard__best { color: var(--rui-soft, #C8E4EE); }
.ml-holecard__go { min-height: 52px; font-size: 20px; }
.ml-plaqueline { margin: 0; font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); }
.ml-plaqueline.is-bronze { color: #F0B88A; }
.ml-plaqueline.is-silver { color: #E6EEF3; }
.ml-plaqueline.is-gold { color: #FFD95A; }
/* THE TROPHY WALL: a wooden mount a kind (an empty one a shadow with what it takes), and each spot's plaque */
.ml-mounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(200px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 12px; margin: 10px 0; }
.ml-mount { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 10px 12px; border-radius: 14px; text-align: center; background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(255, 255, 255, 0.3); }
.ml-mount.is-on { background: linear-gradient(180deg, #5A3620, #321C0E); border: 2px solid #B8741C; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.ml-mount.is-on.is-old { border-color: #FFE08A; box-shadow: 0 0 18px rgba(255, 224, 138, 0.45); }
.ml-mount__board { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 50% / 42%; background: radial-gradient(ellipse at 50% 45%, rgba(124, 255, 212, 0.1), rgba(3, 12, 18, 0.6) 72%); }
.ml-mount.is-on .ml-mount__board { background: radial-gradient(ellipse at 50% 40%, #93613A, #4E2A14 78%); box-shadow: inset 0 0 0 3px #C88A3A, 0 4px 10px rgba(0, 0, 0, 0.5); }
.ml-mount__board img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.ml-mount:not(.is-on) .ml-mount__board img { filter: brightness(0) drop-shadow(0 0 3px rgba(150, 230, 255, 0.6)); opacity: 0.6; }
.ml-mount__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-mount__lb { font: bold var(--rui-h2, 22px)/1.2 var(--rui-title-font, Georgia, serif); color: #FFF3D2; }
.ml-mount__where, .ml-mount__when, .ml-mount__need { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); }
.ml-mount.is-on .ml-mount__where, .ml-mount.is-on .ml-mount__when { color: #F5E6CF; }
.ml-plaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(220px * var(--rui-s, 1)), 100%), 1fr)); gap: 8px; }
.ml-plaque { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(255, 255, 255, 0.3); }
.ml-plaque.is-bronze { background: linear-gradient(160deg, #80492A, #43230E); border: 2px solid #E8A774; }
.ml-plaque.is-silver { background: linear-gradient(160deg, #5E6C76, #2E3940); border: 2px solid #E6EEF3; }
.ml-plaque.is-gold { background: linear-gradient(160deg, #96681A, #523406); border: 2px solid #FFE08A; }
.ml-plaque__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: #FFF3D2; }
.ml-plaque__k { font-size: var(--rui-min, 16px); line-height: 1.3; color: #F5E6CF; }
/* THE CHALLENGE BOARD: paper notices pinned to Jeb's cork, the season's track over them */
.ml-season { --season: #FF9F45; }
.ml-season > h2, .ml-season .rui-sec__title { color: var(--season); }
.ml-track { position: relative; margin: 46px 22px 34px; height: 14px; }
.ml-track__bar { position: absolute; inset: 0; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; }
.ml-track__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--season) 60%, #000), var(--season)); box-shadow: 0 0 12px var(--season); }
.ml-track__step { position: absolute; top: 50%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -38px); pointer-events: none; }
.ml-track__step img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #06141A; border: 2px solid rgba(255, 255, 255, 0.35); }
.ml-track__step b { margin-top: 22px; font-size: 16px; color: var(--rui-soft, #C8E4EE); }
.ml-track__step.is-paid img { border-color: var(--season); box-shadow: 0 0 10px var(--season); }
.ml-track__step.is-prize img { width: 40px; height: 40px; border-color: #FFE08A; }
.ml-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(200px * var(--rui-s, 1)), 100%), 1fr)); gap: 6px; }
.ml-steps li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); font-size: var(--rui-min, 16px); }
.ml-steps li b { flex: none; color: var(--season); }
.ml-steps li.is-paid { opacity: 0.7; }
.ml-prize { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(0, 0, 0, 0.4); border: 2px solid var(--season); }
.ml-prize__art { flex: none; width: calc(72px * var(--rui-s, 1)); height: calc(110px * var(--rui-s, 1)); object-fit: contain; filter: drop-shadow(0 0 12px var(--season)); }
.ml-prize__words { min-width: 0; }
.ml-prize__head { margin: 0; font-size: var(--rui-min, 16px); font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; color: var(--season); }
.ml-prize__name { margin: 2px 0; font: bold var(--rui-h2, 22px)/1.2 var(--rui-title-font, Georgia, serif); color: #FFF3D2; }
.ml-prize__words .rui-p { margin: 0; }
.ml-notices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(240px * var(--rui-s, 1)), 100%), 1fr)); gap: 14px; margin: 10px 0; }
.ml-notice { position: relative; padding: 18px 14px 14px; border-radius: 6px; color: #2A1A0C; background: linear-gradient(170deg, #FBF1D8, #EAD9B2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); transform: rotate(-0.8deg); --tier: #6FA84C; }
.ml-notice:nth-child(2) { transform: rotate(0.7deg); }
.ml-notice:nth-child(3) { transform: rotate(-0.4deg); }
.ml-notice.is-t1 { --tier: #D9892C; }
.ml-notice.is-t2 { --tier: #B8322A; }
.ml-notice__pin { position: absolute; left: 50%; top: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--tier) 55%, #3A1A0A); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.ml-notice__tier { margin: 0; font-size: 16px; font-weight: bold; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier); }
.ml-notice__words { margin: 4px 0 8px; font: bold 20px/1.25 var(--rui-title-font, Georgia, serif); color: #2A1A0C; }
.ml-notice__pay { margin: 8px 0 0; font-size: 16px; font-weight: bold; color: #5A3A1A; }
.ml-notice .rui-bar { --rui-ink: #2A1A0C; }
.ml-notice .rui-bar__words, .ml-notice .rui-bar span { color: #2A1A0C; }
.ml-notice__stamp { position: absolute; right: 12px; top: 14px; padding: 2px 10px; border: 3px solid #2E7D32; border-radius: 8px; color: #2E7D32; font: bold 20px/1.2 var(--rui-title-font, Georgia, serif);
  letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(8deg); opacity: 0.85; pointer-events: none; }
.ml-notice.is-done { background: linear-gradient(170deg, #EAF5DC, #D3E6BC); }
/* THE FISHBOOK */
.ml-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(200px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 10px; margin: 10px 0; }
.ml-fish { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px 12px; border-radius: 16px; background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.ml-fish.is-old { border-color: #FFE08A; background: radial-gradient(circle at 50% 18%, rgba(255, 224, 138, 0.2), var(--rui-panel-2, #12303C) 60%); }
.ml-fish__art { align-self: stretch; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(circle at 50% 60%, rgba(124, 255, 212, 0.18), rgba(3, 12, 18, 0.8) 72%); }
.ml-fish__art img { width: 82%; height: 82%; object-fit: contain; }
.ml-fish.is-unknown .ml-fish__art img { filter: brightness(0) drop-shadow(0 0 3px rgba(150, 230, 255, 0.75)); opacity: 0.85; }
.ml-fish__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-fish__glass, .ml-fish__lb, .ml-fish__where, .ml-fish__facts, .ml-fish__line, .ml-fish__nikki { font-size: var(--rui-min, 16px); line-height: 1.3; }
.ml-fish__where { color: var(--rui-soft, #C8E4EE); }
.ml-fish__facts { font-weight: bold; color: var(--rui-warn, #FFD27A); }
.ml-fish__facts.is-known { color: var(--rui-good, #7CFFD4); }
.ml-fish__line { font-style: italic; }
.ml-fish__nikki { color: #FFB3A8; }
.ml-fish__trophy { display: flex; align-items: center; gap: 6px; font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); }
.ml-fish__trophy.is-on { color: #FFD95A; font-weight: bold; }
.ml-fish__trophy img { flex: none; width: 24px; height: 24px; }
.ml-fish.is-trophy { border-color: #FFC86B; }
/* THE COHORTS */
.ml-cohorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(320px * var(--rui-s, 1)), 100%), 1fr)); gap: 12px; margin: 10px 0; }
.ml-cohort { appearance: none; display: flex; align-items: stretch; gap: 12px; padding: 8px 12px 10px 8px; border-radius: 18px; text-align: left; cursor: pointer; font: inherit; min-height: 44px; --c: #8BD35A;
  background: var(--rui-panel-2, #12303C); border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--rui-ink, #EFFAFF); }
.ml-cohort:hover { filter: brightness(1.08); }
.ml-cohort.is-on { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent), 0 6px 22px color-mix(in srgb, var(--c) 30%, transparent); }
.ml-cohort__art { flex: none; width: calc(96px * var(--rui-s, 1)); border-radius: 14px; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 40%, transparent), rgba(3, 12, 18, 0.9) 75%); }
.ml-cohort__art img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.ml-cohort.is-shut .ml-cohort__art img { filter: grayscale(1) brightness(0.45); }
.ml-cohort__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ml-cohort__name { font: bold var(--rui-h2, 22px)/1.15 var(--rui-title-font, Georgia, serif); color: var(--c); }
.ml-cohort__kind, .ml-cohort__nights { font-size: var(--rui-min, 16px); color: var(--rui-soft, #C8E4EE); }
.ml-cohort__row { font-size: var(--rui-min, 16px); line-height: 1.3; }
.ml-cohort__row b { color: var(--rui-gold, #FFC86B); }
.ml-cohort__row.is-flaw b { color: #FFB08A; }
.ml-cohort__state { margin-top: 2px; font-size: var(--rui-min, 16px); font-weight: bold; color: var(--rui-warn, #FFD27A); }
.ml-cohort__state.is-open { color: var(--rui-ink, #EFFAFF); }
.ml-cohort__state.is-on { color: var(--c); }
.ml-hearts { display: flex; gap: 2px; font-size: 20px; line-height: 1; color: rgba(255, 255, 255, 0.35); }
.ml-hearts i { font-style: normal; }
.ml-hearts .is-on { color: #FF6F91; text-shadow: 0 0 6px rgba(255, 111, 145, 0.6); }
.ml-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(240px * var(--rui-s, 1)), 100%), 1fr)); gap: 10px; margin: 10px 0; }
.ml-scene { appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 8px 12px 8px 8px;
  border-radius: 16px; text-align: left; cursor: pointer; font: inherit; background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: var(--rui-ink, #EFFAFF); min-height: 64px; }
.ml-scene:hover { filter: brightness(1.1); }
.ml-scene.is-shut { cursor: default; }
.ml-scene.is-shut .ml-scene__face { filter: grayscale(1) brightness(0.5); }
.ml-scene__face { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rui-gold, #FFC86B); }
.ml-scene__name { font-weight: bold; font-size: var(--rui-body, 18px); color: var(--rui-gold, #FFC86B); line-height: 1.2; align-self: end; }
.ml-scene.is-shut .ml-scene__name { color: var(--rui-ink, #EFFAFF); }
.ml-scene__state { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); align-self: start; }
/* THE COLLECTION */
.ml-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(200px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 12px; margin: 10px 0; }
.ml-item { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 12px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit;
  background: var(--rui-panel-2, #12303C); border: 2px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: var(--rui-ink, #EFFAFF); min-height: 44px; }
.ml-item:hover { filter: brightness(1.1); }
.ml-item.is-on { border-color: var(--rui-gold, #FFC86B); box-shadow: 0 0 0 2px rgba(255, 200, 107, 0.35), 0 6px 22px rgba(255, 200, 107, 0.25); }
.ml-item__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(255, 179, 71, 0.28), rgba(3, 12, 18, 0.95) 72%); }
.ml-item__art img { width: 84%; height: 84%; object-fit: contain; }
.ml-item.is-line .ml-item__art { aspect-ratio: 16 / 10; background: #04121A; }
.ml-item__art .ml-swatch, .gs-ware .ml-swatch { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-item.is-season .ml-item__art { background: radial-gradient(circle at 50% 55%, rgba(255, 224, 138, 0.35), rgba(3, 12, 18, 0.95) 72%); }
.ml-item.is-angler .ml-item__art { background: radial-gradient(circle at 50% 60%, rgba(124, 255, 212, 0.28), rgba(3, 12, 18, 0.95) 72%); }
.ml-item.is-shut .ml-item__art img, .ml-item.is-shut .ml-item__art canvas { filter: grayscale(0.9) brightness(0.45); }
.ml-item__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.ml-item.is-shut .ml-item__name { color: var(--rui-ink, #EFFAFF); }
.ml-item__words { font-size: var(--rui-min, 16px); line-height: 1.3; }
.ml-item__state { margin-top: 2px; font-size: var(--rui-min, 16px); font-weight: bold; color: var(--rui-warn, #FFD27A); }
.ml-item__state.is-open { color: var(--rui-soft, #C8E4EE); }
.ml-item__state.is-on { color: var(--rui-good, #7CFFD4); }
.ml-titles { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(220px * var(--rui-s, 1)), 100%), 1fr)); gap: 8px; }
.ml-titles li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4));
  font-size: var(--rui-min, 16px); opacity: 0.6; }
.ml-titles li.is-open { opacity: 1; }
.ml-titles li.is-on { border: 2px solid var(--rui-gold, #FFC86B); }
.ml-titles li b { color: var(--rui-soft, #C8E4EE); }
.ml-titles li span { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }

/* ---- THE TUTORIAL'S WORDS (#say): its own row of the grid, under the glasses, so it covers nothing ------------------- */
html[data-tut] .hud { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "goal" "glasses" "say" "slot" "foot"; }
.say { grid-area: say; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face head next" "face text text"; align-items: center;
  column-gap: 10px; row-gap: 2px; padding: 8px 10px 10px 8px; border-radius: 18px; box-sizing: border-box; --who: #7FA06A;
  background: linear-gradient(135deg, rgba(20, 46, 34, 0.95), rgba(8, 24, 18, 0.95)); border: 2px solid var(--who); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.say[data-who="tadwick"] { --who: #8BD35A; background: linear-gradient(135deg, rgba(24, 52, 20, 0.95), rgba(10, 26, 10, 0.95)); }
.say[data-who="daisy"] { --who: #F2B84B; background: linear-gradient(135deg, rgba(56, 40, 14, 0.95), rgba(28, 20, 6, 0.95)); }
.say[data-who="jeb"] { --who: #D2A877; background: linear-gradient(135deg, rgba(50, 34, 20, 0.95), rgba(26, 18, 10, 0.95)); }
.say[data-who="wren"] { --who: #9FC6D8; background: linear-gradient(135deg, rgba(18, 40, 54, 0.95), rgba(8, 20, 30, 0.95)); }
.say.is-new { animation: say-in 0.35s ease both; }
.say.is-nudge { animation: say-nudge 0.4s ease; }
@keyframes say-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes say-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.say__face { grid-area: face; align-self: start; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--who); background: #06141A; }
.say__words { display: contents; }
.say__head { grid-area: head; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.say__name { font: bold 18px/1.2 var(--title-font); color: var(--who); }
.say__step { font-size: 16px; color: var(--muted); }
.say__text { grid-area: text; margin: 0; font-size: 18px; line-height: 1.35; color: var(--text); }
.say__next { grid-area: next; padding: 6px 18px; color: #082008; border: 0; background: linear-gradient(135deg, #E2FFC8, var(--who)); }
/* the button or glass to press glows (the water draws its own ring on the shoal) */
.glass.is-hint, .btn.is-hint { animation: hint-glow 1.3s ease-in-out infinite; border-color: #FFF2C2; }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 242, 194, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 242, 194, 0.55), 0 0 22px rgba(255, 217, 90, 0.6); } }
@media (min-aspect-ratio: 9/8) {
  html[data-tut] .hud { grid-template-rows: auto auto auto auto minmax(0, 1fr); grid-template-areas: "slot top" "slot goal" "slot glasses" "slot say" "slot foot"; }
}
@media (max-aspect-ratio: 9/8) and (max-height: 700px) {
  .say { padding: 6px 8px 8px 6px; }
  .say__face { width: 48px; height: 48px; }
  .say__text { font-size: 16px; }
}
@media (min-aspect-ratio: 9/8) and (max-height: 520px) {
  .say { padding: 4px 8px 6px 4px; }
  .say__face { width: 44px; height: 44px; }
  .say__text { font-size: 16px; line-height: 1.3; }
  html[data-tut] .hud-info { display: none; }
}
/* the smallest phone held sideways: the glass moves over the water so the words get the panel's room (and scroll if they must) */
@media (min-aspect-ratio: 9/8) and (max-height: 360px) {
  html[data-tut] .hud { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "glasses top" "slot top" "slot say" "slot foot"; }
  .say { grid-template-areas: "face head next" "text text text"; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
  .say__face { width: 36px; height: 36px; align-self: center; }
}

/* ---- THE CAST'S SCENES (#scene): the speaker standing, and their words in a box at the foot ------------------------- */
.scene { position: fixed; inset: 0; z-index: 62; display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; overflow: hidden; --who: #7FA06A;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--edge-r)) calc(16px + var(--safe-b)) calc(16px + var(--edge-l));
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(16, 60, 70, 0.6), rgba(2, 8, 12, 0.94) 75%); }
html[data-side="horde"] .scene { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(46, 28, 74, 0.6), rgba(8, 5, 16, 0.95) 75%); }
.scene[data-who="tadwick"] { --who: #8BD35A; }
.scene[data-who="daisy"] { --who: #F2B84B; }
.scene[data-who="jeb"] { --who: #D2A877; }
.scene[data-who="wren"] { --who: #9FC6D8; }
.scene.is-up { animation: scene-in 0.4s ease both; }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
.scene__figure { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); height: min(62vh, 640px); width: auto; max-width: 92vw; object-fit: contain; transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 179, 71, 0.22)); pointer-events: none; }
.scene.is-up .scene__figure { animation: scene-figure 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
@keyframes scene-figure { from { opacity: 0; transform: translate(-50%, 30px) scale(0.96); } to { opacity: 1; transform: translateX(-50%); } }
.scene__box { position: relative; width: min(720px, 100%); box-sizing: border-box; padding: 12px 16px 14px; border-radius: 22px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(10, 38, 50, 0.97), rgba(4, 18, 26, 0.98)); border: 2px solid var(--who); box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.55); }
html[data-side="horde"] .scene__box { background: linear-gradient(180deg, rgba(34, 22, 52, 0.97), rgba(18, 11, 30, 0.98)); }
.scene__head { display: flex; align-items: center; gap: 12px; }
.scene__face { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--who); background: #06141A; }
.scene__who { flex: 1 1 auto; min-width: 0; }
.scene__name { margin: 0; font: bold 22px/1.15 var(--title-font); color: var(--who); }
.scene__role { margin: 0; font-size: 16px; line-height: 1.25; color: var(--muted); font-style: italic; }
.scene__count { flex: none; font-size: 16px; color: var(--muted); }
.scene__text { margin: 0; font-size: 20px; line-height: 1.4; color: var(--text); min-height: 2.8em; }
.scene__text.is-new { animation: say-in 0.3s ease both; }
.scene__acts { display: flex; justify-content: flex-end; gap: 10px; }
.scene__next { min-width: 120px; justify-self: auto; }
@media (min-aspect-ratio: 9/8) {
  .scene { justify-content: flex-end; align-items: center; }
  .scene__figure { left: max(4vw, calc(16px + var(--edge-l))); bottom: 0; height: min(94vh, 900px); max-width: 44vw; transform: none; }
  .scene.is-up .scene__figure { animation-name: scene-figure-side; }
  @keyframes scene-figure-side { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
  .scene__box { width: min(560px, 54vw); margin-right: 2vw; }
}
@media (min-aspect-ratio: 9/8) and (max-height: 520px) {
  .scene__text { font-size: 18px; min-height: 0; }
  .scene__face { width: 48px; height: 48px; }
  .scene__box { padding: 10px 14px 12px; gap: 6px; }
}
@media (max-aspect-ratio: 9/8) and (max-height: 700px) {
  .scene__figure { height: min(52vh, 520px); bottom: calc(170px + var(--safe-b)); }
  .scene__text { font-size: 18px; }
}

/* ---- small things -------------------------------------------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 14px;
  background: var(--glass-2); border: 1px solid var(--line); font-size: 18px; text-align: center; box-sizing: border-box; }
html[data-screen="play"] .toast { bottom: auto; top: calc(120px + var(--safe-t)); }
html[data-screen="boathouse"] .toast { bottom: auto; top: calc(16px + var(--safe-t)); }
.boot-error { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  background: var(--ink); font-size: 18px; }
.boot-error__title { font-size: 24px; font-weight: bold; color: var(--gold); margin: 0; }

/* ---- a big screen: the door's column, the corner and the night's words grow with it ---------------------------------- */
/* the shared result board (js/reward-board.js) on the 320 point iPhone (UI-23): its three ways on share 290 points, so
   their words draw in a little */
@media (max-width: 360px) { html[data-device="phone"] .rb .rb-foot .rb-btn { padding: 8px 6px; font-size: 16px; } }
@media (max-aspect-ratio: 5/4) and (min-width: 700px) and (min-height: 960px) { .door-col, .corner { zoom: 1.3; } .hud-top, .hud-goal, .glasses, .hud-foot, .hud-banner, .hud-coach, .say { zoom: 1.2; } }
@media (min-width: 1400px) and (min-height: 820px) { .door-col, .corner, .door-copy { zoom: 1.25; } :root { --panel: 400px; } .hud-top, .hud-goal, .glasses, .hud-foot, .hud-banner, .hud-coach, .say, .scene__box { zoom: 1.15; } }
@media (min-width: 2300px) and (min-height: 1250px) { .door-col, .corner, .door-copy { zoom: 1.6; } :root { --panel: 460px; } .hud-top, .hud-goal, .glasses, .hud-foot, .hud-banner, .hud-coach, .say, .scene__box { zoom: 1.4; } }

@media (prefers-reduced-motion: reduce) {
  .btn-play::after, .curtain-art, .hud-banner, .hud-coach, .hud-face.is-mood, .say.is-new, .say.is-nudge, .glass.is-hint, .btn.is-hint, .glass.is-swap, .btn-flare.is-glow, .btn-bell.is-glow,
  .btn-assist.is-glow, .hud-oil.is-low #hud-oil-fill, .ml-pin__n, .scene.is-up, .scene.is-up .scene__figure, .scene__text.is-new, .mll > .mll__dangler, .mll.is-sparkle > .mll__wrap { animation: none; }
  .renown__bar span, #hud-oil-fill, .ml-holemap__boat.is-rowing { transition: none; }
}

/* ---- THE BOATHOUSE (Goliath, 2026-10-20: the player's brag room; 2026-10-21 00:43Z: "That room should fill the screen
 * when you go into it ... Make this an experience vs a page") --------------------------------------------------------------
 * One layer over everything but the sheets, never scrolled. Under it the painting again, blurred and dark, so a screen
 * of another shape than 16:9 shows the room's own colours at its edges. The stage is the painting at the size and place
 * mirelight-main.js fitBoathouse() picks (as big as covers the screen, smaller only when what hangs on it would run under
 * the icons), and what hangs on it (#mlb-hang: portraits, plaques, the aquarium) is placed in the stage's own pixels. The
 * icons, the cohort at the top left, the chatter and the round Back are placed in the screen's pixels, inside the camera
 * and the rounded corners. The cabin is wood and lamplight on either side, so its gold is its own (not the side's). */
.mlb { position: fixed; inset: 0; z-index: 32; overflow: hidden; background: #120B06; --mlb-gold: #FFC86B; --mlb-b: 56px; --mlb-f: 72px;
  --mlb-cw: 360px; --mlb-rows: 8; font-family: var(--font); }
.mlb-fill { position: absolute; left: -48px; top: -48px; width: calc(100% + 96px); height: calc(100% + 96px); object-fit: cover; filter: blur(20px) brightness(0.42) saturate(1.1);
  pointer-events: none; }
.mlb-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.mlb-paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
.mlb-hang { position: absolute; inset: 0; }
.mlb-hang > * { position: absolute; box-sizing: border-box; }
.mlb-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: var(--safe-t) var(--edge-r) var(--safe-b) var(--edge-l); }

/* THE PORTRAITS: each cohort framed by friendship (pine, oak, carved, silver, gold; an unmet one a shadow), pressed to meet them */
.mlb-face { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  transition: transform 0.15s ease, filter 0.15s ease; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.mlb-face:hover { transform: translateY(-3px) rotate(-1deg); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)) brightness(1.08); }
.mlb-face .mlb-frame { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.mlb-face.is-with .mlb-frame { box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.95), 0 0 22px rgba(255, 210, 120, 0.85); }
.mlb-face__plate { flex: none; margin-top: 4px; max-width: 120%; padding: 1px 8px; border-radius: 6px; background: linear-gradient(#E9C77D, #A9772F);
  border: 1px solid #5E3D16; color: #2A1A0A; font: bold 16px/1.2 var(--title-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb[data-small] .mlb-face__plate { display: none; }
.mlb-frame { display: block; box-sizing: border-box; flex: none; aspect-ratio: 4 / 5; padding: 3px; border-radius: 10%; background: #6E4A26; border: 2px solid #D9B47A;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); }
.mlb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8%; background: #2A1A0E; }
.mlb-frame.is-oak { background: #4A2E15; border-color: #9A6630; }
.mlb-frame.is-carved { background: #3B220F; border: 4px double #C08040; }
.mlb-frame.is-silver { background: #5E6C76; border-color: #E6EEF3; box-shadow: 0 0 8px rgba(230, 238, 243, 0.55); }
.mlb-frame.is-gold { background: #96681A; border-color: #FFE08A; box-shadow: 0 0 12px rgba(255, 224, 138, 0.7); }
.mlb-frame.is-unmet { background: #2A1A0E; border-color: #5A3D22; }
.mlb-frame.is-unmet img { filter: grayscale(1) brightness(0.3); opacity: 0.7; }

/* THE PLAQUES: the six heaviest trophies on wooden mounts, pressed for the tale and Share; an empty mount waits */
.mlb-plq { appearance: none; margin: 0; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50% / 42%;
  background: radial-gradient(ellipse at 50% 38%, #A26B3E, #5E3519 70%, #3A1F0D); box-shadow: inset 0 0 0 3px #C8904F, inset 0 0 0 6px #5E3519, 0 6px 10px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, filter 0.15s ease; }
.mlb-plq:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.1); }
.mlb-plq img { width: 80%; height: 74%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.mlb-plq.is-old { box-shadow: inset 0 0 0 3px #FFE08A, inset 0 0 0 6px #6E4A16, 0 0 16px rgba(255, 224, 138, 0.7); }
.mlb-plq.is-empty { cursor: default; background: rgba(40, 25, 12, 0.5); box-shadow: inset 0 0 0 2px rgba(200, 138, 58, 0.45); }
.mlb-plq.is-empty::after { content: ''; width: 46%; height: 30%; border-radius: 50%; border: 2px dashed rgba(220, 170, 100, 0.4); }

/* THE AQUARIUM: the live well where the cabin has room for it, drawn every frame on its own canvas (cabinet and all) */
.mlb-tank { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: filter 0.2s ease; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); }
.mlb-tank:hover { filter: drop-shadow(0 0 14px rgba(140, 240, 255, 0.55)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); }
.mlb-tank canvas { display: block; width: 100%; height: 100%; }

/* THE ROUND BUTTONS: the icons round the cabin, the ? and the trophy, and Back in the bottom right ("a circle with an arrow") */
.mlb-disc { appearance: none; position: absolute; box-sizing: border-box; width: var(--mlb-b); height: var(--mlb-b); margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--mlb-gold); border: 2px solid rgba(255, 200, 107, 0.9);
  background: radial-gradient(circle at 50% 35%, rgba(70, 44, 22, 0.96), rgba(26, 15, 7, 0.96) 72%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 170, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease; }
.mlb-disc:hover { filter: brightness(1.25); transform: translateY(-1px); }
.mlb-disc:active { transform: scale(0.95); }
.mlb-disc svg { width: 62%; height: 62%; display: block; }
.mlb-disc.is-shut { color: #B59A72; border-color: rgba(200, 160, 100, 0.55); }
.mlb-rail { position: absolute; display: grid; gap: var(--mlb-g, 10px); grid-auto-flow: column; grid-template-rows: repeat(var(--mlb-rows), var(--mlb-b)); grid-auto-columns: var(--mlb-b);
  direction: rtl; }
.mlb[data-shape="tall"] .mlb-rail { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--mlb-cols, 8), var(--mlb-b)); grid-auto-rows: var(--mlb-b); direction: ltr; }
.mlb-rail .mlb-disc { position: relative; direction: ltr; }
.mlb-badge { position: absolute; right: -2px; bottom: -4px; min-width: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: #2A1A0A;
  border: 1px solid var(--mlb-gold); color: #FFF3D2; font: bold 16px/20px var(--font); text-align: center; pointer-events: none; }
.mlb-shine { transform-origin: 24px 6.6px; animation: mlb-twinkle 2.8s ease-in-out infinite; }
@keyframes mlb-twinkle { 0%, 70%, 100% { opacity: 0.55; transform: scale(0.7); } 82% { opacity: 1; transform: scale(1.25) rotate(20deg); } }
.mlb-disc:focus-visible, .mlb-face:focus-visible, .mlb-plq:focus-visible, .mlb-tank:focus-visible, .mlb-with:focus-visible { outline: 3px solid #FFE08A; outline-offset: 3px; }

/* WHO RIDES WITH YOU, at the top left: their face and name; pressed, the six to pick from */
.mlb-with { appearance: none; position: absolute; display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: var(--mlb-b); max-width: 300px; margin: 0;
  padding: 4px 18px 4px 4px; border-radius: 999px; border: 2px solid rgba(255, 200, 107, 0.85); background: rgba(26, 15, 7, 0.82); color: #FFF3D2; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); text-align: left; }
.mlb-with:hover { filter: brightness(1.15); }
.mlb-with__face { flex: none; width: calc(var(--mlb-b) - 12px); height: calc(var(--mlb-b) - 12px); border-radius: 50%; object-fit: cover; border: 2px solid var(--mlb-gold);
  background: #2A1A0E; }
.mlb-with__words { display: flex; flex-direction: column; min-width: 0; }
.mlb-with__name { font: bold 18px/1.15 var(--title-font); color: var(--mlb-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-with__sub { font-size: 16px; line-height: 1.2; color: #F2DFC0; white-space: nowrap; }
.mlb[data-small] .mlb-with { padding: 4px; border-radius: 50%; width: var(--mlb-b); height: var(--mlb-b); }
.mlb[data-small] .mlb-with__words { display: none; }

/* THE CHATTER: a cohort's face rises in the lower left with a line in a bubble, then goes */
.mlb-chat { position: absolute; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; opacity: 0; transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s ease; }
.mlb-chat.is-on { opacity: 1; transform: none; }
.mlb-chat__face { flex: none; box-sizing: border-box; width: var(--mlb-f); height: var(--mlb-f); border-radius: 50%; object-fit: cover; border: 3px solid var(--mlb-gold); background: #2A1A0E;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); }
.mlb-chat__line { position: relative; box-sizing: border-box; margin: 0 0 calc(var(--mlb-f) * 0.3); max-width: var(--mlb-cw); padding: 9px 14px 10px; border-radius: 16px; background: #FFF6E2;
  color: #2A1A0A; font-size: 18px; line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.mlb[data-small] .mlb-chat__line { font-size: 16px; padding: 7px 11px 8px; }
.mlb-chat__line::before { content: ''; position: absolute; left: -9px; bottom: 12px; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent #FFF6E2 transparent transparent; }
.mlb-chat__who { display: block; font: bold 16px/1.2 var(--title-font); color: #8A4E12; }

/* THE BACK ROOMS (Goliath, 2026-10-21 00:50Z): Nikki's kitchen and the brew room, painted like the cabin. What can be
 * pressed (the stove, the cake stand, the icebox, the kettle, the shelf, the bench) is a hot box over the painting with
 * its name on a plate, and the keeper (Nikki at her stove, Cornelius Pockets at the door) a figure standing in; the
 * keeper talks in a bubble by their figure (#mlb-say, placed by mirelight-main.js roomSay clear of every button). The
 * purse takes the cohort's place at the top left. */
.mlb-spot { appearance: none; margin: 0; padding: 0 0 6px; border: 0; border-radius: 18px; background: none; cursor: pointer; display: flex; align-items: flex-end;
  justify-content: center; transition: box-shadow 0.15s ease, background 0.15s ease; }
.mlb-spot:hover { background: rgba(255, 224, 138, 0.1); box-shadow: inset 0 0 0 3px rgba(255, 224, 138, 0.75), 0 0 18px rgba(255, 210, 120, 0.35); }
.mlb-spot__tag { box-sizing: border-box; padding: 1px 8px; border-radius: 6px; background: linear-gradient(#E9C77D, #A9772F); border: 1px solid #5E3D16;
  color: #2A1A0A; font: bold max(16px, calc(12px * var(--mlb-k, 1)))/1.15 var(--title-font); text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); pointer-events: none; }
.mlb-keeper { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; overflow: visible; }
.mlb-keeper__fig { position: absolute; left: 50%; top: 0; width: var(--fig-w, 100%); height: 100%; max-width: none; transform: translateX(-50%); object-fit: contain;
  object-position: 50% 100%; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); transition: filter 0.15s ease, opacity 0.45s ease, transform 0.45s ease; }
.mlb-keeper:hover .mlb-keeper__fig { filter: drop-shadow(0 0 16px rgba(255, 220, 140, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)) brightness(1.06); }
.mlb-keeper.is-away .mlb-keeper__fig { opacity: 0; transform: translateX(-50%) translateX(-14%); transition: none; }
.mlb:not([data-room="cabin"]) .mlb-with__face { object-fit: contain; padding: 3px; box-sizing: border-box; }
.mlb-spot:focus-visible, .mlb-keeper:focus-visible { outline: 3px solid #FFE08A; outline-offset: 3px; }
.mlb-say { position: absolute; z-index: 2; box-sizing: border-box; margin: 0; max-width: min(calc(300px * var(--mlb-k, 1)), 42vw); padding: 9px 14px 10px; border-radius: 16px; background: #FFF6E2;
  color: #2A1A0A; font-size: max(18px, calc(14px * var(--mlb-k, 1))); line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease; }
.mlb-say.is-on { opacity: 1; transform: none; }
.mlb[data-small] .mlb-say { font-size: 16px; padding: 7px 11px 8px; max-width: min(320px, 42vw); }
.mlb-say .mlb-chat__who { font-size: max(16px, calc(12px * var(--mlb-k, 1))); }
.mlb-say::before { content: ''; position: absolute; border-style: solid; }
.mlb-say[data-tail="down"]::before { left: calc(var(--tail-x, 50%) - 9px); bottom: -10px; border-width: 10px 9px 0 9px; border-color: #FFF6E2 transparent transparent transparent; }
.mlb-say[data-tail="left"]::before { left: -10px; top: 16px; border-width: 9px 10px 9px 0; border-color: transparent #FFF6E2 transparent transparent; }
.mlb-say[data-tail="right"]::before { right: -10px; top: 16px; border-width: 9px 0 9px 10px; border-color: transparent transparent transparent #FFF6E2; }
@media (prefers-reduced-motion: reduce) { .mlb-say, .mlb-spot, .mlb-keeper__fig { transition: none; } }

/* THE AQUARIUM FULL SCREEN: the well's fish swimming; the net picks who swims, the round Back goes back to the room */
.mlb-aqua { position: absolute; inset: 0; z-index: 3; background: #04161C; }
.mlb-aqua__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.mlb-aqua__head { position: absolute; left: calc(var(--edge-l) + 18px); top: calc(var(--safe-t) + 14px); pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.mlb-aqua__t { margin: 0; font: bold 26px/1.15 var(--title-font); color: var(--mlb-gold); }
.mlb-aqua__s { margin: 4px 0 0; font-size: 18px; line-height: 1.3; color: #DFF4F6; max-width: min(560px, 70vw); }
.mlb-aqua__fish { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); margin: 0; max-width: min(520px, calc(100vw - 2 * var(--mlb-b) - 80px));
  padding: 10px 16px; border-radius: 14px; background: rgba(4, 22, 28, 0.86); border: 1px solid rgba(150, 230, 255, 0.4); color: #EFFAFF; font-size: 18px; line-height: 1.3;
  text-align: center; pointer-events: none; }
/* --mlb-cr / --mlb-cl: 10 px more on the side of an iPhone held sideways away from the camera, its rounded corners (fitBoathouse) */
.mlb-aqua .mlb-disc { right: calc(var(--edge-r) + 16px + var(--mlb-cr, 0px)); bottom: calc(var(--safe-b) + 16px); }
.mlb-aqua .mlb-aqua__pick { right: auto; left: calc(var(--edge-l) + 16px + var(--mlb-cl, 0px)); }
.mlb[data-small] .mlb-aqua__t { font-size: 22px; }
.mlb[data-small] .mlb-aqua__s, .mlb[data-small] .mlb-aqua__fish { font-size: 16px; }

/* TURN YOUR PHONE: a phone held upright, the room waiting under it out of play */
.mlb-turn { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box;
  padding: calc(var(--safe-t) + 24px) 28px calc(var(--safe-b) + 90px); text-align: center; background: radial-gradient(circle at 50% 42%, rgba(46, 28, 12, 0.94), rgba(10, 6, 3, 0.97) 75%); }
.mlb-turn__phone { width: 132px; height: 132px; color: var(--mlb-gold); }
.mlb-turn__set { transform-origin: 48px 41px; animation: mlb-turn 2.6s ease-in-out infinite; }
@keyframes mlb-turn { 0%, 20% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
.mlb-turn__t { margin: 0; font: bold 26px/1.2 var(--title-font); color: var(--mlb-gold); }
.mlb-turn__s { margin: 0; font-size: 18px; line-height: 1.35; color: #F2DFC0; max-width: 300px; }
.mlb-turn .mlb-back { right: calc(var(--edge-r) + 16px); bottom: calc(var(--safe-b) + 16px); }
@media (prefers-reduced-motion: reduce) { .mlb-turn__set, .mlb-shine { animation: none; } .mlb-chat { transition: none; } .mlb-face, .mlb-plq { transition: none; } }

/* THE SHEETS the room opens: a cohort's own (their portrait, who they are, Select), a trophy's tale, the cohorts to pick */
/* THE BOATHOUSE'S POPUPS READ BIG (Goliath, 2026-10-21 01:49Z: "The character popup text is just too small ... need to up
   that so someone can actually read it"; 02:11Z, "the other popups should follow the same standard"): every sheet the
   Boathouse and its rooms open (.mlb-read) sizes all of room-ui's text through --rui-s, by --mlb-k from
   mirelight-main.js readScale: its words 17 px on a phone held sideways to 26 on a PC at 1920 x 1080 (28 at most),
   never under the room's floor, and the sheet widens to keep the lines short; Larger and Largest text still scale it */
.rui-dlg-back.mlb-read { --rui-s: var(--mlb-k, 1); }
html[data-text-size="large"] .rui-dlg-back.mlb-read { --rui-s: calc(var(--mlb-k, 1) * 1.25); }
html[data-text-size="largest"] .rui-dlg-back.mlb-read { --rui-s: calc(var(--mlb-k, 1) * 1.5); }
@media (min-height: 561px) {
  .rui-dlg-back.mlb-read .rui-dlg { width: min(calc(720px * var(--rui-s)), 100%); }
  .rui-dlg-back.mlb-read .rui-dlg--wide { width: min(calc(940px * var(--rui-s)), 100%); }
}
.mlb-read .rui-p { line-height: 1.45; }
.mlb-read .gs-ware__line { font-size: var(--rui-min); }
.mlb-read .gs-ware__tag { font-size: var(--rui-min); }
.mlb-read .gs-ware__name { font-size: calc(20px * var(--rui-s)); }
.mlb-read .gs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(260px * var(--rui-s))), 1fr)); }
.mlb-who__top { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 8px; }
.mlb-who__top .mlb-frame { width: 100%; }
.mlb-who__kind { margin: 0 0 6px; font: bold calc(var(--rui-body, 18px) + 2px)/1.25 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.mlb-who__row { margin: 8px 0 0; font-size: var(--rui-min, 16px); line-height: 1.4; }
.mlb-who__row b { color: var(--rui-gold, #FFC86B); }
@media (max-height: 700px) { .mlb-who__top { grid-template-columns: minmax(96px, 24%) minmax(0, 1fr); } }
@media (max-width: 480px), (max-height: 480px) { .mlb-who__top { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; } }
.mlb-tale__top { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 16px; align-items: center; }
.mlb-tale__art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 50% / 42%; background: radial-gradient(ellipse at 50% 38%, #A26B3E, #5E3519 70%, #3A1F0D);
  box-shadow: inset 0 0 0 3px #C8904F, inset 0 0 0 7px #5E3519; }
.mlb-tale__art.is-old { box-shadow: inset 0 0 0 3px #FFE08A, inset 0 0 0 7px #6E4A16, 0 0 18px rgba(255, 224, 138, 0.6); }
.mlb-tale__art img { width: 80%; height: 76%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.mlb-tale__lb { margin: 0; font: bold calc(28px * var(--rui-s, 1))/1.15 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.mlb-tale__where { margin: 6px 0 0; font-size: var(--rui-min, 16px); line-height: 1.35; }
.mlb-tale__tale { margin: 12px 0 0; font-size: var(--rui-body, 18px); line-height: 1.4; font-style: italic; }
@media (max-width: 480px) { .mlb-tale__top { grid-template-columns: minmax(0, 1fr); } .mlb-tale__art { width: 60%; justify-self: center; } }
@media (min-width: 481px) and (max-height: 480px) { .mlb-tale__top { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } }
.mlb-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(118px * var(--rui-s, 1)), calc(50% - 5px)), 1fr)); gap: 10px; }
.mlb-pick__b { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box; min-height: var(--rui-tap, 44px); padding: 10px 8px;
  border-radius: 14px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); color: inherit; font: inherit; cursor: pointer; }
.mlb-pick__b .mlb-frame { width: calc(72px * var(--rui-s, 1)); }
.mlb-pick__b.is-on { border: 2px solid var(--rui-gold, #FFC86B); box-shadow: 0 0 12px rgba(255, 200, 107, 0.35); }
.mlb-pick__b.is-shut { opacity: 0.8; }
.mlb-pick__name { font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); text-align: center; }
.mlb-pick__sub { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #C8E4EE); text-align: center; }
.mlb-key { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.mlb-key li { display: grid; grid-template-columns: calc(40px * var(--rui-s, 1)) minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--rui-min, 16px); line-height: 1.3; }
.mlb-key__ic { display: grid; place-items: center; width: calc(40px * var(--rui-s, 1)); height: calc(40px * var(--rui-s, 1)); border-radius: 50%; border: 2px solid #FFC86B; color: #FFC86B;
  background: radial-gradient(circle at 50% 35%, #46301A, #1A0F07 72%); }
.mlb-key__ic svg { width: 62%; height: 62%; }

/* NIKKI'S KITCHEN's dishes and her desserts, in the stove's and the cake stand's sheets */
.mlb-dishes .gs-ware__art { background: radial-gradient(ellipse at 50% 55%, #4A2E15, #1E1208 75%); }
.mlb-dishes .gs-ware__art > img { object-fit: contain; }
.mlb-dish__from { display: block; }
.mlb-dish__from > :first-child { display: inline-block; vertical-align: -0.1em; margin-right: 2px; }
@media (max-width: 560px) {
  .mlb-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mlb-dishes .gs-ware { padding: 10px; }
  .mlb-dishes .gs-ware__art { aspect-ratio: 4 / 3; }
  .mlb-dishes .gs-ware__row .rui-btn { width: 100%; }
}
/* THE BACK ROOMS' SHEETS: a row a thing (a picture, its name and line, what it comes to, its buttons), the keeper's
 * hearts once a friendship has begun, the purse */
.mlb-brews .gs-ware__art { background: radial-gradient(ellipse at 50% 55%, #4A2E15, #1E1208 75%); }
.mlb-brews .gs-ware__art > img { object-fit: contain; }
.mlb-sec { margin: 18px 0 8px; font: bold calc(20px * var(--rui-s, 1))/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.mlb-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.mlb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--rui-panel-2, #12303C);
  border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); }
.mlb-row.is-hot { border: 2px solid var(--rui-gold, #FFC86B); box-shadow: 0 0 12px rgba(255, 200, 107, 0.3); }
.mlb-row__art { flex: none; width: calc(64px * var(--rui-s, 1)); height: calc(64px * var(--rui-s, 1)); object-fit: contain; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 55%, #4A2E15, #1E1208 75%); }
.mlb-row__words { flex: 1 1 calc(200px * var(--rui-s, 1)); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mlb-row__name { font: bold var(--rui-body, 18px)/1.25 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.mlb-row__line { font-size: var(--rui-min, 16px); line-height: 1.35; color: var(--rui-soft, #C8E4EE); }
.mlb-row__right { flex: none; font: bold var(--rui-body, 18px)/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-ink, #FFF3D2); }
.mlb-row__acts { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mlb-row__acts .rui-btn.is-on { border-color: var(--rui-gold, #FFC86B); }
.mlb-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 0; }
.mlb-hearts { font-size: calc(22px * var(--rui-s, 1)); line-height: 1; letter-spacing: 2px; color: #FF7A8A; text-shadow: 0 0 6px rgba(255, 122, 138, 0.45); }
.mlb-purse { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; }
.mlb-purse__art { flex: none; width: calc(64px * var(--rui-s, 1)); height: calc(64px * var(--rui-s, 1)); object-fit: contain; }
.mlb-purse .rui-p { margin: 0; }
@media (max-width: 560px) {
  .mlb-brews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mlb-brews .gs-ware { padding: 10px; }
  .mlb-brews .gs-ware__art { aspect-ratio: 4 / 3; }
  .mlb-brews .gs-ware__row .rui-btn { width: 100%; }
}
.ml-item.is-cabin .ml-item__art { aspect-ratio: 16 / 9; }
.ml-item.is-cabin .ml-item__art img { width: 100%; height: 100%; object-fit: cover; }
.ml-item.is-postcard .ml-item__art { aspect-ratio: 3 / 2; }
.ml-item.is-postcard .ml-item__art img { width: 100%; height: 100%; object-fit: cover; }

.mlb-wellgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(124px * var(--rui-s, 1)), calc(50% - 4px)), 1fr)); gap: 8px; }
.mlb-wellfish { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box; min-height: var(--rui-tap, 44px); padding: 8px;
  border-radius: 12px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); font: inherit; font-size: var(--rui-min, 16px);
  line-height: 1.25; color: inherit; text-align: center; cursor: pointer; }
.mlb-wellfish img { width: 72%; aspect-ratio: 1; object-fit: contain; }
.mlb-wellfish.is-on { border: 2px solid var(--rui-gold, #FFC86B); background: #1B4A3C; }

/* SHARE (Goliath, 2026-10-20 17:46Z): a trophy's Share button, the share mark and the word, a full 44 px target */
.ml-share { min-height: 44px; }
.ml-mount__share { margin-top: auto; align-self: stretch; }
.ml-mount.is-on .ml-mount__when { margin-bottom: 8px; }
.ml-brag__note:empty { display: none; }
.ml-brag__img { display: block; width: auto; max-width: 100%; max-height: min(62vh, 620px); margin: 0 auto 8px; border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }

/* ---- TONIGHT'S LAKE ---- */
.door-row .btn-tonight { border: 2px solid var(--shine); color: #FFF3D2; box-shadow: 0 0 12px rgba(255, 224, 138, 0.3); }
.mlt-facts { margin: 0 0 10px; }
.mlt-face { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rui-gold, #FFC86B); background: #06141A; }
.mlt-board { list-style: none; margin: 8px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mlt-board li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.3); font-size: var(--rui-min, 16px); line-height: 1.3; }
.mlt-board li.is-me { border: 2px solid var(--rui-gold, #FFC86B); }
.mlt-board__rank { font: bold var(--rui-body, 18px)/1 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); text-align: center; }
.mlt-board__name { min-width: 0; overflow-wrap: anywhere; }
.mlt-board__lb { font-weight: bold; color: #FFF3D2; text-align: right; }
@media (max-width: 440px) { .mlt-board li { grid-template-columns: 2em minmax(0, 1fr); } .mlt-board__lb { grid-column: 2; text-align: left; } }

/* ---- THE LURE BENCH (Goliath, 2026-10-21 13:56Z: "make it look cool"): a lure drawn from its own parts, the body
 * wrapped in bands of its thread (a stripe of colour masked by the body's own shape) and the dangler swinging from the
 * tail ring; the vise's stage and part pickers, the tackle box's five places, the Lure Book's parchment pages and its
 * clue chips (proven, ruled out, likely by a rule learned, a part not found yet), and the lure on the line beside the
 * glasses. The parts are 160 px squares cut on the same grid (mirelight-cut.py), so their rings fall in the same place. */
.mll { position: relative; display: inline-block; flex: none; --s: 64px; width: calc(var(--s) * 1.22); height: var(--s); }
.mll > .mll__body, .mll > .mll__wrap { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); }
.mll > .mll__body { object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
.mll > .mll__wrap { pointer-events: none; -webkit-mask: var(--body) center / contain no-repeat; mask: var(--body) center / contain no-repeat;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.28)) 42% 0 / 30% 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--t) 80%, #FFFFFF) 0 2px, var(--t) 2px 4px, color-mix(in srgb, var(--t) 62%, #000000) 4px 5px) 42% 0 / 30% 100% no-repeat; }
.mll > .mll__dangler { position: absolute; left: calc(var(--s) * 0.68); top: calc(var(--s) * 0.46); width: calc(var(--s) * 0.5); height: calc(var(--s) * 0.5); object-fit: contain;
  transform-origin: 50% 6%; animation: mll-swing 2.6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.mll.is-sparkle > .mll__wrap { animation: mll-glint 1.4s ease-in-out infinite alternate; }
.mll.is-bare { width: var(--s); }
.mll > .mll__rod { width: var(--s); height: var(--s); object-fit: contain; }
.mll.is-big { --s: calc(132px * var(--rui-s, 1)); }
.mll.is-hud { --s: 28px; }
@keyframes mll-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes mll-glint { from { filter: brightness(0.95); } to { filter: brightness(1.5) saturate(1.3); } }
.mll-frame { display: grid; place-items: center; overflow: hidden; }
.mll-frame .mll { --s: calc(48px * var(--rui-s, 1)); }
.glass--lure .mll { margin: 0 auto; }
@container (max-width: 55.9px) { .glass--lure .mll { --s: 30px; } }

.mll-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 6px; padding: 14px 16px; border-radius: 16px;
  background: radial-gradient(ellipse at 22% 50%, #6A4322, #2A170A 72%); border: 1px solid rgba(200, 138, 58, 0.55); box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45); }
.mll-stage__words { flex: 1 1 calc(220px * var(--rui-s, 1)); min-width: 0; }
.mll-stage__name { margin: 0 0 4px; font: bold calc(22px * var(--rui-s, 1))/1.2 var(--rui-title-font, Georgia, serif); color: var(--rui-gold, #FFC86B); }
.mll-stage .rui-p { margin: 0 0 8px; }
.mll-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(96px * var(--rui-s, 1)), calc(33% - 6px)), 1fr)); gap: 8px; }
.mll-part { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; box-sizing: border-box; min-height: var(--rui-tap, 44px);
  padding: 6px 4px 8px; border-radius: 12px; background: var(--rui-panel-2, #12303C); border: 1px solid var(--rui-line, rgba(150, 230, 255, 0.4)); font: inherit; color: inherit; cursor: pointer; }
.mll-part img { width: calc(56px * var(--rui-s, 1)); height: calc(56px * var(--rui-s, 1)); object-fit: contain; pointer-events: none; }
.mll-part__name { font-size: var(--rui-min, 16px); font-weight: bold; line-height: 1.2; text-align: center; }
.mll-part__n { position: absolute; top: 4px; right: 4px; min-width: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgba(0, 0, 0, 0.6);
  font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; }
.mll-part.is-on { border: 2px solid var(--rui-gold, #FFC86B); background: #1B4A3C; box-shadow: 0 0 10px rgba(255, 200, 107, 0.35); }
.mll-part.is-out img { filter: grayscale(0.85) brightness(0.6); }
.mll-part.is-out .mll-part__n { color: #FFB0A0; }
.mll-part:focus-visible, .mll-page:focus-visible { outline: 3px solid var(--rui-gold, #FFC86B); outline-offset: 2px; }

.mll-box { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 6px; }
.mll-box.is-small { grid-template-columns: repeat(5, minmax(0, 72px)); }
.mll-box__slot { position: relative; display: grid; place-items: center; aspect-ratio: 1.3; border-radius: 14px; border: 2px dashed rgba(220, 170, 100, 0.45); background: rgba(40, 25, 12, 0.45); }
.mll-box__slot.is-on { border-style: solid; border-color: #C88A3A; background: radial-gradient(ellipse at 50% 50%, #5A3A1C, #24140A 75%); }
.mll-box__slot.is-lead { border-color: var(--rui-gold, #FFC86B); box-shadow: 0 0 12px rgba(255, 200, 107, 0.35); }
.mll-box__slot .mll { --s: min(calc(54px * var(--rui-s, 1)), 9vw); }
.mll-box__n { position: absolute; left: 6px; bottom: 2px; font-size: 16px; font-weight: bold; line-height: 1.2; color: var(--rui-gold, #FFC86B); text-shadow: 0 1px 2px #000000; }
@media (max-width: 420px) { .mll-box__n { display: none; } }

/* THE LURE BOOK's pages and clues, on parchment, in a dark brown ink */
.mll-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(150px * var(--rui-s, 1)), calc(50% - 4px)), 1fr)); gap: 8px; }
.mll-page { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; box-sizing: border-box; min-height: var(--rui-tap, 44px); padding: 8px;
  border-radius: 12px; background: linear-gradient(180deg, #F4E6C6, #E3CB98); border: 2px solid #A87A3E; color: #3A2410; font: inherit; text-align: center; cursor: pointer; }
.mll-page img { width: 70%; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.mll-page__name { font: bold var(--rui-min, 16px)/1.2 var(--rui-title-font, Georgia, serif); }
.mll-page__sub { font-size: var(--rui-min, 16px); line-height: 1.25; color: #5A3A1C; }
.mll-page.is-done { border-color: #1F7A44; box-shadow: inset 0 0 0 2px #7CE0A0; }
.mll-page.is-done::after { content: '\2713'; position: absolute; top: 4px; right: 8px; font: bold 20px/1 sans-serif; color: #1F7A44; }
.mll-page.is-old { border-color: #B8860B; }
.mll-head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.mll-head__fish { flex: none; width: calc(96px * var(--rui-s, 1)); aspect-ratio: 1; object-fit: contain; }
.mll-head .rui-p { margin: 0; }
.mll-chips { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(92px * var(--rui-s, 1)), calc(33% - 6px)), 1fr)); gap: 6px; }
.mll-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #F4E6C6, #E3CB98); border: 2px solid #A87A3E; color: #3A2410; }
.mll-chip img, .mll-chip__q { width: calc(46px * var(--rui-s, 1)); height: calc(46px * var(--rui-s, 1)); object-fit: contain; }
.mll-chip__q { display: grid; place-items: center; font: bold 28px/1 var(--rui-title-font, Georgia, serif); color: #7A5A30; }
.mll-chip__name { font-size: var(--rui-min, 16px); font-weight: bold; line-height: 1.15; }
.mll-chip__mark { position: absolute; top: 3px; right: 6px; font: bold 18px/1 sans-serif; }
.mll-chip.is-out { background: #5E4E3A; border-color: #3E3022; color: #EADFCB; }
.mll-chip.is-out img { filter: grayscale(1) brightness(0.7); }
.mll-chip.is-out .mll-chip__name { text-decoration: line-through; }
.mll-chip.is-out .mll-chip__mark { color: #FFB0A0; }
.mll-chip.is-proven { border-color: #1F7A44; background: linear-gradient(180deg, #E6F7E0, #BFE6B0); box-shadow: 0 0 10px rgba(124, 224, 160, 0.55); }
.mll-chip.is-proven .mll-chip__mark { color: #1F7A44; }
.mll-chip.is-likely { border-color: #C98A1A; box-shadow: 0 0 10px rgba(255, 200, 107, 0.65); }
.mll-chip.is-likely .mll-chip__mark { color: #9A5A00; }
.mll-riddle, .mll-legends .mlb-row__line { font-style: italic; }
.mll-lessons .mlb-row__name { font: var(--rui-min, 16px)/1.4 var(--rui-font, inherit); color: var(--rui-ink, #FFF3D2); }
/* lure codes (2026-10-21 14:53Z): the code under the vise's lure, and the box to type a friend's */
.mll-code { font-weight: bold; letter-spacing: 0.04em; color: var(--rui-gold, #FFC86B); }
.mll-code__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 4px; }
.mll-code__in { flex: 1 1 calc(220px * var(--rui-s, 1)); min-width: 0; min-height: var(--rui-tap, 44px); box-sizing: border-box; padding: 6px 12px; border-radius: 12px;
  border: 2px solid #8A5A2B; background: #F3E3C0; color: #2A1A0C; font: bold max(16px, var(--rui-min, 16px))/1.2 var(--rui-font, inherit); letter-spacing: 0.04em; text-transform: uppercase; }
.mll-code__in::placeholder { color: #8A6A44; font-weight: normal; }
.mll-code__in:focus-visible { outline: 3px solid var(--rui-gold, #FFC86B); outline-offset: 2px; }

/* JEB'S WEAVING FRAME AND ROD KIT (2026-10-21 15:14Z): a pattern, the number each stake wants along the top and each row
   with a slide either way (every row the same grid, so the columns line up); .is-gear is the reel's gear rings, the same
   puzzle in brass */
.mlw { display: grid; gap: 3px; justify-content: center; margin: 6px 0 10px; padding: 10px 6px; border-radius: 14px;
  background: linear-gradient(180deg, #6E4628, #4A2C16); border: 3px solid #2E1A0A; box-shadow: inset 0 0 0 2px #A87A3E; }
.mlw__row { display: grid; grid-template-columns: var(--rui-tap, 44px) repeat(var(--w), minmax(28px, 48px)) var(--rui-tap, 44px); gap: 3px; align-items: center; justify-content: center; }
.mlw__clue { justify-self: center; display: grid; place-items: center; width: min(38px, 100%); aspect-ratio: 1; box-sizing: border-box; border-radius: 50%;
  font: bold max(16px, var(--rui-min, 16px))/1 var(--rui-title-font, Georgia, serif); background: #F3E3C0; color: #3A2410; border: 2px solid #8A5A2B; }
.mlw__clue.is-ok { background: #FFD24A; border-color: #1F7A44; box-shadow: 0 0 8px rgba(255, 210, 74, 0.8); }
.mlw__clue.is-more { background: #F6C7B8; border-color: #9A2A1A; }
.mlw__cell { position: relative; height: var(--rui-tap, 44px); }
.mlw__stake, .mlw__weaver { position: absolute; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.mlw__stake { left: 33%; right: 33%; top: -3px; bottom: -3px; z-index: 2; background: linear-gradient(90deg, #B98A4A, #F2D79C 45%, #C9995A); }
.mlw__weaver { top: 27%; bottom: 27%; left: -2px; right: -2px; z-index: 1; background: linear-gradient(180deg, #D8A85A, #94602A); }
.mlw__cell.is-over .mlw__weaver { z-index: 3; background: linear-gradient(180deg, #FFD98A, #C98A3E); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); }
.mlw__slide { appearance: none; display: grid; place-items: center; width: var(--rui-tap, 44px); height: var(--rui-tap, 44px); padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #2E1A0A; background: radial-gradient(circle at 40% 35%, #F4E6C6, #C9995A); color: #3A2410; }
.mlw__slide svg { width: 26px; height: 26px; pointer-events: none; }
.mlw__slide:focus-visible { outline: 3px solid var(--rui-gold, #FFC86B); outline-offset: 2px; }
.mlw__slide:active { transform: translateY(1px); }
.mlw.is-gear { background: radial-gradient(ellipse at 50% 30%, #4A4A52, #22222A); border-color: #121216; box-shadow: inset 0 0 0 2px #C9A040; }
.mlw.is-gear .mlw__stake { left: 44%; right: 44%; background: #3A3A42; box-shadow: none; }
.mlw.is-gear .mlw__weaver { top: 40%; bottom: 40%; background: linear-gradient(180deg, #8A6A2A, #5A4418); }
.mlw.is-gear .mlw__cell.is-over .mlw__weaver { top: 12%; bottom: 12%; left: 14%; right: 14%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #FFE08A, #C9A040 60%, #8A6A2A); }
.ml-notices--one { grid-template-columns: minmax(0, calc(320px * var(--rui-s, 1))); }
.ml-notice.is-loft { border-color: #B98A5E; }
/* JEB'S TRY THIS AT HOME (2026-10-21): a card to read, and the same card on paper (only #ml-print prints) */
.mlh__need, .mlh__steps, .mlh__safe { margin: 4px 0 10px; padding-left: 1.4em; }
.mlh__need li, .mlh__steps li, .mlh__safe li { margin: 0 0 6px; font-size: var(--rui-min, 16px); line-height: 1.45; }
.mlh__safe li { color: var(--rui-gold, #FFC86B); }
.ml-prize--home .gs-ware__row { margin-top: 6px; }
#ml-print { display: none; }
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  body > *:not(#ml-print) { display: none !important; }
  #ml-print { display: block !important; max-width: 7in; margin: 0 auto; font: 12pt/1.45 Georgia, 'Times New Roman', serif; color: #000; }
  #ml-print h1 { font-size: 22pt; margin: 0 0 6pt; }
  #ml-print .mlh__art { float: right; width: 1.3in; height: 1.3in; object-fit: contain; margin: 0 0 8pt 12pt; }
  #ml-print .mlb-sec { font-size: 14pt; margin: 12pt 0 4pt; color: #000; }
  #ml-print .rui-p, #ml-print li { color: #000; font-size: 12pt; }
  #ml-print .mlh__safe li { color: #000; font-weight: bold; }
  #ml-print .mlh__foot { clear: both; margin-top: 16pt; padding-top: 6pt; border-top: 1px solid #999; font-size: 10pt; color: #444; }
  /* a postcard: the front on one page and the back on the next, 6 x 4 inches in the same place on each, so printed on
     both sides of one sheet (flipped on the long edge) the back is behind the front; a dashed line to cut on */
  #ml-print.is-postcard { max-width: none; }
  #ml-print .mlpc-page { width: 6in; height: 4in; margin: 1in auto 0; outline: 1px dashed #999; break-after: page; page-break-after: always; }
  #ml-print .mlpc-page:last-child { break-after: auto; page-break-after: auto; }
  #ml-print .mlpc-page img { display: block; width: 100%; height: 100%; }
}
/* POSTCARDS FROM THE MIRE (2026-10-21): the card, front and back, in its sheet */
.mlpc__card { display: block; width: 100%; max-width: 900px; height: auto; aspect-ratio: 3 / 2; margin: 4px auto 12px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); background: #FBF4E2; }

/* MOON-TOUCHED (2026-10-21): the Fishbook's moon pages, a trophy's moon frame, a plaque's silver ring */
.ml-fish.is-touched { border-color: #DCE8F5; background: radial-gradient(circle at 50% 18%, rgba(220, 232, 245, 0.28), var(--rui-panel-2, #12303C) 60%); }
.ml-fish.is-touched .ml-fish__art img { filter: drop-shadow(0 0 8px rgba(220, 240, 255, 0.9)) saturate(0.6) brightness(1.2); }
.ml-mount.is-on.is-touched { border-color: #DCE8F5; box-shadow: 0 0 18px rgba(200, 225, 255, 0.55); }
.ml-mount.is-on.is-touched .ml-mount__board { background: radial-gradient(ellipse at 50% 40%, #6E7F96, #2A3446 78%); box-shadow: inset 0 0 0 3px #DCE8F5, 0 4px 10px rgba(0, 0, 0, 0.5); }
.mlb-plq.is-touched { background: radial-gradient(ellipse at 50% 38%, #7C8EA6, #3A4A60 70%, #222C3A); box-shadow: inset 0 0 0 3px #DCE8F5, inset 0 0 0 6px #3A4A60, 0 0 16px rgba(200, 225, 255, 0.75); }
.mlb-plq.is-touched img { filter: drop-shadow(0 0 6px rgba(220, 240, 255, 0.9)); }