/* nightfall/css/nightfall.css - NIGHTFALL's page: the curtain, the door, the corner, a night's HUD, the stick, the
 * level-up, chest and pause sheets, and the heroes' and nights' rooms, laid over the 2D field
 * (nightfall/js/nightfall-render.js). The Herd's colours are gold, pink and moonlight blue; the Horde's violet and toxic
 * green (html[data-side], set by nightfall/js/nightfall-main.js).
 *
 * The series' lessons, kept here from the first draw (docs/READABILITY.md, ARCHITECTURE.md conventions 35 to 37):
 * 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 (the World door keeps the bottom right of the door to itself, the copyright mark the
 * bottom left); every edge steps in past an iPhone's camera and rounded corners (env(safe-area-inset-*), and
 * --sotc-edge-l/-r from js/friends.js THE ISLAND'S SIDE); the field fills the whole window on a computer, at any shape. */
:root {
  --ink: #0E0A1A;
  --glass: rgba(16, 10, 30, 0.8);
  --glass-2: rgba(32, 20, 54, 0.86);
  --line: rgba(255, 255, 255, 0.18);
  --text: #FBF3E7;
  --muted: #DCCFF0;
  --gold: #F5C242;
  --a: #FF8FC7;
  --b: #9FE8FF;
  --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;
}
html[data-side="horde"] { --a: #A78BFA; --b: #9CFF6B; --ink: #0A0712; }
@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; }
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }

/* ---- 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%, #2A1C4A 0%, var(--ink) 72%); transition: opacity 0.5s ease; }
.curtain.is-gone { opacity: 0; }
.curtain-art { width: 132px; height: 132px; object-fit: contain; animation: curtain-bob 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.5)); }
@keyframes curtain-bob { from { transform: translateY(8px); } to { transform: translateY(-10px); } }
.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; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .chip:focus-visible, .hud-pause:focus-visible, .nf-card:focus-visible, .nf-hero:focus-visible, .nf-night: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: #170E26;
  background: linear-gradient(135deg, var(--gold), #FFE9A8 45%, var(--a)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 10px 34px rgba(245, 194, 66, 0.45); }
html[data-side="horde"] .btn-play { background: linear-gradient(135deg, #C9F27A, #F5E9A8 40%, var(--a)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 10px 34px rgba(156, 255, 107, 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; }
@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-acct { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-friends { gap: 6px; border-color: rgba(245, 194, 66, 0.55); color: #FFE9A8; }
.chip-friends::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-7 8-7s8 3 8 7z'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M15.5 13.2c4 .2 7.5 2.6 7.5 6.8h-4.6c0-2.6-1-4.9-2.9-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-7 8-7s8 3 8 7z'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M15.5 13.2c4 .2 7.5 2.6 7.5 6.8h-4.6c0-2.6-1-4.9-2.9-6.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip-friends[aria-expanded="true"] { border-color: var(--gold); background: rgba(245, 194, 66, 0.22); }
.chip-side { padding: 4px 16px 4px 10px; cursor: default; }
.chip-side.side-badge--herd { border-color: rgba(255, 143, 199, 0.5); }
.chip-side.side-badge--horde { border-color: rgba(156, 255, 107, 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 ---------------------------------------------------------------------------------------------------------- */
/* Held upright: one column in the middle, the corner above it and the World door below it. On a wide screen: a column
   on the left with the night playing on the right. The column scrolls on a very short screen rather than shrink. */
.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(10, 6, 20, 0.78) 0%, rgba(10, 6, 20, 0.6) 50%, rgba(10, 6, 20, 0.2) 100%); }
.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(46px, 14vw, 96px); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #FFFFFF 0%, #E9E2FF 30%, var(--gold) 62%, 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 26px rgba(160, 140, 255, 0.45)); }
.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); }
.door-picks { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.door-pick { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 10px 8px 8px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); text-align: left; }
.door-pick__art { flex: none; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.door-pick__art--hero { background: radial-gradient(circle at 50% 70%, rgba(245, 194, 66, 0.42), rgba(255, 143, 199, 0.12) 70%); }
html[data-side="horde"] .door-pick__art--hero { background: radial-gradient(circle at 50% 70%, rgba(156, 255, 107, 0.32), rgba(167, 139, 250, 0.14) 70%); }
.door-pick__art--hero img { width: 112%; height: 112%; object-fit: contain; object-position: center 70%; }
.door-pick__art--night img { width: 100%; height: 100%; object-fit: cover; }
.door-pick__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.door-pick__label { font-size: 16px; color: var(--muted); }
.door-pick__name { font-size: 20px; font-weight: bold; color: var(--gold); overflow-wrap: anywhere; line-height: 1.2; }
.door-pick__who { font-size: 16px; color: var(--muted); line-height: 1.3; }
.door-pick__change { flex: none; }
.door-best { margin: 0; font-size: 18px; font-weight: bold; line-height: 1.35; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.door-next-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.door-next { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); overflow: hidden; border: 1px solid var(--line); }
.door-next span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #FFE9A8); transition: width 0.6s ease; }
.door-next-text { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.35; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.door-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.door-copy { position: fixed; left: calc(14px + var(--edge-l)); bottom: calc(8px + var(--safe-b)); margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 12px; z-index: 21; pointer-events: none; }
/* a computer or a phone held sideways: the column on the left, the night on the right */
@media (min-aspect-ratio: 5/4) {
  .door { justify-content: flex-start; padding: calc(70px + var(--safe-t)) calc(24px + var(--edge-r)) calc(24px + var(--safe-b)) calc(max(24px, 6vw) + var(--edge-l));
    background: linear-gradient(90deg, rgba(10, 6, 20, 0.8) 0%, rgba(10, 6, 20, 0.5) 40%, rgba(10, 6, 20, 0) 64%); }
  .door-col { align-items: flex-start; text-align: left; width: min(480px, 46vw); }
  .door-row { justify-content: flex-start; }
  /* the copyright line goes over the field, 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: short, so the column is tighter, the two picks side by side and the title smaller */
@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(560px, 63vw); }
  .door-kicker, .door-sub, .door-pick__who, .door-next-wrap { display: none; }
  .door-title { font-size: clamp(34px, 9vh, 52px); }
  .door-picks { flex-direction: row; }
  .door-pick { flex: 1 1 0; min-width: 0; padding: 6px; gap: 8px; }
  .door-pick__art { width: 52px; height: 52px; }
  .door-pick__name { font-size: 18px; }
  .btn-play { min-height: 56px; font-size: 22px; padding: 10px 34px; }
}
/* a small phone held sideways (an iPhone SE, 667 x 375): two picks side by side left each name a few letters a line, so
   they stand one above the other, each one line high */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) and (max-width: 760px) {
  .door-picks { flex-direction: column; gap: 6px; }
  .door-pick { flex: none; }
}
/* held upright on a phone that is not tall: the picks drop their second line, so the column ends above the World door */
@media (max-aspect-ratio: 5/4) and (max-height: 940px) {
  .door-pick__who { display: none; }
}
/* THE DOOR FITS ITS WINDOW (nightfall-main.js fitDoor): where the door would run past its foot in the device's own face,
   the app held upright first takes back the room kept for the website's World door (it has none: html[data-app]); then
   the line over the title and the line under it go; then the bar to the next hero (the Heroes show it) and each pick's
   second line, and the title and the big button come down to a short phone's sizes; last, the line of nights won goes
   and the picks' pictures shrink */
@media (max-aspect-ratio: 5/4) { html[data-app] .door.door--snug { padding-top: calc(64px + var(--safe-t)); padding-bottom: calc(40px + var(--safe-b)); } }
.door--tight .door-kicker, .door--tight .door-sub { display: none; }
.door--tight .door-col { gap: 8px; }
.door--tighter .door-next-wrap, .door--tighter .door-pick__who { display: none; }
.door--tighter .door-title { font-size: clamp(34px, min(11vw, 8vh), 52px); }
.door--tighter .btn-play { min-height: 52px; font-size: 20px; padding: 8px 30px; }
.door--tighter .door-pick__art { width: 52px; height: 52px; }
.door--tighter .door-col { gap: 6px; }
.door--tighter .door-row { gap: 8px; }
.door--tightest .door-best { display: none; }
.door--tightest .door-pick__art { width: 44px; height: 44px; }

/* ---- the corner: top right, in past the island when it is on the 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 11px; font-size: 16px; } .chip-acct { max-width: 120px; } }
/* a phone held sideways: the chips stand in a column down the right edge, clear of the door's picks */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) { .corner { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; } }

/* ---- a night ------------------------------------------------------------------------------------------------------------ */
.pad { position: fixed; inset: 0; z-index: 25; touch-action: none; outline: none; cursor: crosshair; }
.stick { position: fixed; left: 0; top: 0; z-index: 26; width: 0; height: 0; pointer-events: none; }
.stick::before { content: ''; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35); background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.12) 100%); }
.stick__knob { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, var(--gold) 60%, rgba(245, 194, 66, 0.6));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); opacity: 0.85; }
html[data-side="horde"] .stick__knob { background: radial-gradient(circle at 40% 35%, #FFFFFF, var(--b) 60%, rgba(156, 255, 107, 0.6)); }
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.hud-hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 40, 60, 0) 55%, rgba(255, 40, 60, 0.5) 100%); }
.hud-hurt.is-on { animation: hurt 0.35s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
.hud-top { position: absolute; top: calc(10px + var(--safe-t)); left: calc(12px + var(--edge-l)); right: calc(12px + var(--edge-r));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.hud-left { justify-self: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hud-stat { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 5px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line); font-size: 22px; font-weight: bold; color: #FFE9A8; min-height: 42px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.hud-stat__icon { width: 34px; height: 34px; flex: none; background: center / contain no-repeat; }
.hud-stat--corn .hud-stat__icon { background-image: url("../art/plants/corn-herd.webp"); }
.hud-stat--seeds .hud-stat__icon { background-image: url("../art/plants/seeds-herd.webp"); }
html[data-side="horde"] .hud-stat--corn .hud-stat__icon { background-image: url("../art/plants/corn-horde.webp"); }
html[data-side="horde"] .hud-stat--seeds .hud-stat__icon { background-image: url("../art/plants/seeds-horde.webp"); }
.hud-stat--seeds { color: #D8F7B0; }
.hud-stat--corn.is-low { color: #FFB0A0; border-color: rgba(255, 120, 100, 0.8); animation: low 1.2s ease-in-out infinite; }
@keyframes low { 50% { box-shadow: 0 0 14px rgba(255, 110, 90, 0.7); } }
/* the charms wrap to the left column's width (five a row at most): a fixed row of five was wider than that column on an
   upright phone, so the seeds counter beside the corn ran under the clock (found 2026-10-20 by the Duo rehearsal) */
.hud-kit { display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(5 * 34px + 4 * 4px); }
.hud-kit__i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(10, 6, 20, 0.7); border: 1px solid var(--line); overflow: hidden; }
.hud-kit__i img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hud-kit__i--charm { border-radius: 50%; }
.hud-kit__i.is-awake { border-color: var(--gold); box-shadow: 0 0 8px rgba(245, 194, 66, 0.6); }
/* the level as a bar along the icon's foot (a picture, not words: the kit's own words are its label) */
.hud-kit__i i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--gold); box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
.hud-kit__i--charm i { background: var(--b); }
.hud-mid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-clock { margin: 0; font-family: var(--title-font); font-weight: bold; font-size: 40px; line-height: 1; color: #FFFFFF; white-space: nowrap;
  -webkit-text-stroke: 1.5px rgba(16, 8, 30, 0.9); text-shadow: 0 3px 0 rgba(16, 8, 30, 0.75), 0 0 16px rgba(0, 0, 0, 0.4); font-variant-numeric: tabular-nums; }
.hud-xp { display: flex; align-items: center; gap: 8px; }
.hud-lv { font-size: 16px; font-weight: bold; color: #FFE9A8; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); white-space: nowrap; }
.hud-xpbar { width: min(220px, 32vw); height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
.hud-xpbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--b), #FFFFFF); transition: width 0.15s linear; }
.hud-pause { justify-self: end; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 233, 168, 0.7); background: var(--glass);
  display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.hud-pause span { width: 16px; height: 18px; border-left: 5px solid #FFE9A8; border-right: 5px solid #FFE9A8; box-sizing: border-box; }
.hud-pause:active { transform: scale(0.94); }
.hud-boss { position: absolute; top: calc(118px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px - var(--edge-l) - var(--edge-r)));
  text-align: center; }
.hud-boss__name { margin: 0 0 4px; font-size: 18px; font-weight: bold; color: #FFD0D8; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95); }
.hud-boss__bar { height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.65); border: 2px solid rgba(255, 120, 140, 0.7); overflow: hidden; }
.hud-boss__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #FF4A6A, #FF9A5A); transition: width 0.15s linear; }
.hud-banner { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); margin: 0; width: max-content; max-width: calc(100vw - 40px - var(--edge-l) - var(--edge-r));
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 22px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, rgba(20, 12, 36, 0.86), rgba(20, 12, 36, 0.7)); border: 1px solid var(--line); opacity: 0; }
.hud-banner.is-on { animation: banner 2.6s ease forwards; }
.hud-banner__t { font-family: var(--title-font); font-weight: bold; font-size: 28px; line-height: 1.15; color: #FFFFFF; }
.hud-banner__s { font-size: 18px; line-height: 1.3; color: var(--muted); }
.hud-banner--gold .hud-banner__t { color: var(--gold); }
.hud-banner--warn .hud-banner__t { color: #FFB27A; }
.hud-banner--boss { border-color: rgba(255, 90, 110, 0.6); }
.hud-banner--boss .hud-banner__t { color: #FF8A9A; }
.hud-banner--dawn .hud-banner__t { color: #FFE2A8; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.95); } 10% { opacity: 1; transform: translate(-50%, -50%); } 82% { opacity: 1; } 100% { opacity: 0; } }
.hud-hint { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 40px);
  padding: 10px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 18px; text-align: center; line-height: 1.35;
  animation: hint-in 0.5s ease 0.4s both; }
.hud-hint.is-gone { animation: hint-out 0.6s ease forwards; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hint-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
/* THE SEED BAR at the foot: a button for each kind grown, the one picked ringed in gold; the spot's words over it */
.hud-bar { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; }
.hud-bar:empty { display: none; }
.hud-seed { appearance: none; position: relative; width: 66px; height: 66px; padding: 0; border-radius: 16px; border: 2px solid var(--line); background: var(--glass);
  cursor: pointer; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); touch-action: manipulation; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hud-seed img { position: absolute; left: 6%; top: 2%; width: 88%; height: 88%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.hud-seed__cost { position: absolute; left: 3px; bottom: 5px; padding: 0 5px 0 3px; border-radius: 8px; background: rgba(10, 6, 20, 0.8); font-size: 16px; line-height: 20px;
  font-weight: bold; color: #D8F7B0; display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.hud-seed__cost::before { content: ''; width: 14px; height: 14px; background: url("../art/plants/seeds-herd.webp") center / contain no-repeat; }
html[data-side="horde"] .hud-seed__cost::before { background-image: url("../art/plants/seeds-horde.webp"); }
.hud-seed__n { position: absolute; right: 4px; top: 2px; font-size: 16px; line-height: 20px; font-weight: bold; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); }
.hud-seed i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--gold); }
.hud-seed.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 194, 66, 0.45), 0 0 16px rgba(245, 194, 66, 0.55); transform: translateY(-4px); }
.hud-seed.is-short img { opacity: 0.5; }
.hud-seed.is-short .hud-seed__cost { color: #FFB0A0; }
.hud-seed.is-awake { background: radial-gradient(circle at 50% 70%, rgba(245, 194, 66, 0.35), var(--glass) 70%); }
.hud-seed:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hud-spot { position: absolute; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 40px - var(--edge-l) - var(--edge-r));
  padding: 6px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 17px; line-height: 1.3; text-align: center; color: #CFEFFF; }
.hud-spot.is-no { color: #FFD0B0; border-color: rgba(255, 160, 120, 0.6); }
/* a phone held upright: the clock smaller, the seed bar's buttons a little smaller */

@media (max-width: 520px) {
  .hud-clock { font-size: 32px; }
  .hud-xpbar { width: 30vw; }
  .hud-kit { gap: 3px; max-width: calc(5 * 28px + 4 * 3px); }
  .hud-kit__i { width: 28px; height: 28px; }
  .hud-stat { font-size: 20px; min-height: 38px; padding: 2px 10px 2px 4px; }
  .hud-stat__icon { width: 30px; height: 30px; }
  .hud-seed { width: 60px; height: 60px; border-radius: 14px; }
  .hud-bar { gap: 5px; }
  .hud-spot { bottom: calc(84px + var(--safe-b)); }
  .hud-hint { bottom: calc(136px + var(--safe-b)); }
  .hud-boss { top: calc(150px + var(--safe-t)); }
}
/* the narrowest phones: the level's bar shorter, so the level and its bar stay clear of the corn and seeds counters */
@media (max-width: 359px) { .hud-xpbar { width: 20vw; } }
@media (max-height: 560px) and (min-aspect-ratio: 5/4) { .hud-clock { font-size: 32px; } .hud-boss { top: calc(64px + var(--safe-t)); width: min(420px, 46vw); } .hud-banner { top: 40%; }
  .hud-seed { width: 56px; height: 56px; } .hud-spot { bottom: calc(76px + var(--safe-b)); } .hud-hint { bottom: calc(124px + var(--safe-b)); } }

/* ---- the sheets: level up, a chest, the pause (js/room-ui.js dialog) --------------------------------------------------------- */
.nf-level__lead { margin: 0 0 10px; }
.nf-pick { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .nf-level .rui-dlg { width: min(860px, calc(100vw - 32px)); max-width: none; } .nf-pick { grid-template-columns: repeat(3, 1fr); } }
@media (min-aspect-ratio: 5/4) and (max-height: 560px) { .nf-level .rui-dlg { width: min(860px, calc(100vw - 32px - var(--edge-l) - var(--edge-r))); max-width: none; } .nf-pick { grid-template-columns: repeat(3, 1fr); } }
.nf-card { appearance: none; display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; text-align: left; cursor: pointer; min-height: 48px;
  background: var(--rui-panel-2, #251C38); border: 2px solid var(--rui-line, rgba(201, 168, 245, 0.4)); color: var(--rui-ink, #FBF3E7); font: inherit; }
.nf-card:hover { border-color: var(--rui-gold, #F5C242); filter: brightness(1.1); }
.nf-card.is-new { border-color: rgba(245, 194, 66, 0.7); }
@media (min-width: 760px) { .nf-card { flex-direction: column; align-items: center; text-align: center; } }
@media (min-aspect-ratio: 5/4) and (max-height: 560px) { .nf-card { flex-direction: column; align-items: center; text-align: center; padding: 8px; } }
.nf-card__art { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); }
.nf-card__art img { width: 100%; height: 100%; object-fit: contain; }
.nf-card__words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nf-card__tag { font-size: var(--rui-min, 16px); color: var(--rui-good, #8EF07A); font-weight: bold; }
.nf-card.is-new .nf-card__tag { color: var(--rui-gold, #F5C242); }
.nf-card__name { font-size: var(--rui-h2, 22px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; }
.nf-card__what { font-size: var(--rui-body, 18px); line-height: 1.35; }
.nf-card__note { font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-soft, #DED4F2); font-style: italic; }
.nf-loot { display: flex; flex-direction: column; gap: 10px; }
.nf-loot__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--rui-panel-2, #251C38); border: 1px solid var(--rui-line, rgba(201, 168, 245, 0.4)); }
.nf-loot__row.is-awake { border: 2px solid var(--rui-gold, #F5C242); box-shadow: 0 0 18px rgba(245, 194, 66, 0.35); }
.nf-loot__art { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
.nf-loot__words { min-width: 0; }
.nf-loot__name { margin: 0; font-size: var(--rui-h2, 22px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; }
.nf-loot__what { margin: 2px 0 0; }
.nf-sheet__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nf-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 8px; margin-top: 10px; }
.nf-kit__row { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px;
  background: var(--rui-panel-2, #251C38); border: 1px solid var(--rui-line, rgba(201, 168, 245, 0.4)); }
.nf-kit__row.is-awake { border-color: var(--rui-gold, #F5C242); }
.nf-kit__row img { grid-row: 1 / 3; width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: rgba(0, 0, 0, 0.3); }
.nf-kit__name { margin: 0; font-size: var(--rui-body, 18px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; }
.nf-kit__lv { margin: 0; font-size: var(--rui-min, 16px); color: var(--rui-soft, #DED4F2); }
.nf-how .nf-how__h { margin: 18px 0 4px; font: bold var(--rui-h2, 22px)/1.2 var(--title-font); color: var(--rui-gold, #F5C242); }
.nf-how .nf-how__h:first-child { margin-top: 0; }
/* the privacy policy and help: two buttons that are links (each opens the site's page; in the app, in Safari) */
.nf-how__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.nf-how__links .rui-btn { text-decoration: none; }

/* ---- THE HEROES and THE NIGHTS (readable rooms: js/room-ui.js) ---------------------------------------------------------------- */
/* The room stands over the night's painting (mount({ paint })), busy and bright, so its scrim is darker and the words sit
   on a calm ground. */
.rui.nf-room[data-paint] {
  background:
    linear-gradient(180deg, rgba(10, 7, 20, 0.84), rgba(10, 7, 20, 0.92)),
    var(--rui-paint) center / cover no-repeat,
    #0E0A1A;
}
.nf-next__row { display: flex; align-items: center; gap: 16px; }
.nf-next__art { flex: none; width: calc(104px * var(--rui-s, 1)); height: calc(104px * var(--rui-s, 1)); object-fit: contain; border-radius: 16px;
  background: radial-gradient(circle at 50% 70%, rgba(245, 194, 66, 0.4), rgba(255, 143, 199, 0.1) 70%); }
.nf-next__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nf-next__name { margin: 0; font-size: var(--rui-h2, 22px); font-weight: bold; color: var(--rui-gold, #F5C242); }
.nf-next__who, .nf-next__left { margin: 0; }
.nf-count { margin: 0 0 8px; }
.nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(168px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 12px; margin: 10px 0; }
.nf-hero { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 12px; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--rui-panel-2, #251C38); border: 2px solid var(--rui-line, rgba(201, 168, 245, 0.4)); color: var(--rui-ink, #FBF3E7); min-height: 44px; font: inherit; }
.nf-hero:hover { filter: brightness(1.12); }
.nf-hero.is-on { border-color: var(--rui-gold, #F5C242); box-shadow: 0 0 0 2px rgba(245, 194, 66, 0.35), 0 6px 22px rgba(245, 194, 66, 0.25); }
.nf-hero__art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 66%, rgba(245, 194, 66, 0.36), rgba(255, 143, 199, 0.1) 72%); }
.rui[data-side="horde"] .nf-hero__art { background: radial-gradient(circle at 50% 66%, rgba(156, 255, 107, 0.3), rgba(167, 139, 250, 0.12) 72%); }
.nf-hero__art img { width: 104%; height: 104%; object-fit: contain; }
.nf-hero.is-shut .nf-hero__art img { filter: grayscale(1) brightness(0.45); }
.nf-hero__name { font-size: var(--rui-body, 18px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; overflow-wrap: anywhere; }
.nf-hero.is-shut .nf-hero__name { color: var(--rui-ink, #FBF3E7); }
.nf-hero__weapon { display: flex; align-items: center; gap: 6px; font-size: var(--rui-min, 16px); font-weight: bold; line-height: 1.2; }
.nf-hero__weapon img { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.nf-hero__gift { font-size: var(--rui-min, 16px); color: var(--rui-soft, #DED4F2); line-height: 1.3; }
.nf-hero__state { margin-top: 2px; font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-warn, #FFD27A); }
.nf-hero__state.is-open { color: var(--rui-good, #8EF07A); font-weight: bold; }
.nf-hero.is-on .nf-hero__state { color: var(--rui-gold, #F5C242); }
@media (max-width: 380px) { .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.nf-ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(300px * var(--rui-s, 1)), 100%), 1fr)); gap: 12px; margin: 10px 0; }
.nf-night { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 16px; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--rui-panel-2, #251C38); border: 2px solid var(--rui-line, rgba(201, 168, 245, 0.4)); color: var(--rui-ink, #FBF3E7); min-height: 44px; font: inherit; }
.nf-night:hover { filter: brightness(1.1); }
.nf-night.is-on { border-color: var(--rui-gold, #F5C242); box-shadow: 0 0 0 2px rgba(245, 194, 66, 0.35), 0 6px 22px rgba(245, 194, 66, 0.25); }
.nf-night__art { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.nf-night__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-night.is-shut .nf-night__art img { filter: grayscale(0.85) brightness(0.4); }
.nf-night__n { position: absolute; left: 10px; top: 8px; min-width: 40px; height: 40px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 20px;
  background: rgba(10, 6, 20, 0.82); border: 2px solid var(--rui-gold, #F5C242); color: var(--rui-gold, #F5C242); font: bold 20px/1 var(--title-font); }
/* THE SHOP (js/game-shop.css lays out its cards): a trail's card plays its own little night */
.nf-trail-cv { background: #0E1424; }
html[data-side="horde"] .nf-trail-cv { background: #120A1A; }
.nf-shop-plain { margin-top: 12px; }
.nf-long .nf-night__n { color: #FFE9A8; }
.nf-night__words { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.nf-night__name { font-size: var(--rui-h2, 22px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; }
.nf-night.is-shut .nf-night__name { color: var(--rui-ink, #FBF3E7); }
.nf-night__title { font-size: var(--rui-min, 16px); font-style: italic; color: var(--rui-soft, #DED4F2); }
.nf-night__line { font-size: var(--rui-min, 16px); line-height: 1.35; }
.nf-night__state { margin-top: 4px; font-size: var(--rui-min, 16px); font-weight: bold; color: var(--rui-warn, #FFD27A); }
.nf-night__state.is-open { color: var(--rui-ink, #FBF3E7); }
.nf-night__state.is-won { color: var(--rui-good, #8EF07A); }

/* ---- small things -------------------------------------------------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(110px + 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; }
.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; }
.boot-error a { color: var(--b); }

/* ---- a big screen: the door's column, the corner and the night's words grow with it, so a PC reads as well as a phone
   held close (the readable rooms grow the same way, by --rui-s) ------------------------------------------------------------ */
@media (min-width: 1400px) and (min-height: 820px) { .door-col, .corner, .hud-top, .hud-hint, .hud-boss, .hud-banner, .door-copy { zoom: 1.3; } }
@media (min-width: 2300px) and (min-height: 1250px) { .door-col, .corner, .hud-top, .hud-hint, .hud-boss, .hud-banner, .door-copy { zoom: 1.65; } }

@media (prefers-reduced-motion: reduce) {
  .btn-play::after, .curtain-art, .hud-hint, .hud-banner.is-on, .hud-hurt.is-on { animation: none; }
  .hud-banner.is-on { opacity: 1; }
}