/* The Host Who Listens. Look and layout: docs/DESIGN.md (Wright of Derby's single lamp; Jaques's Happy Families cards). */

@font-face {
  font-family: 'IM Fell English';
  src: url('fonts/imfellenglish/IMFeENrm28P.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('fonts/imfellenglish/IMFeENit28P.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #120c09;
  --panel: #22160f;
  --panel-2: #2d1d14;
  --ember: #c8641e;
  --ember-deep: #7a3511;
  --gold: #e8b25a;
  --parch: #e7d8b8;
  --parch-2: #d8c49c;
  --ink: #2b1d13;
  --ink-soft: #57412b;
  --grey: #9aa09c;
  --wine: #7d2420;
  --morn: #cdd2cf;
  --morn-bg: #5d6563;
  --text: #ead9b8;
  --text-dim: #b9a585;
  --serif: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --black: 'UnifrakturCook', 'IM Fell English', Georgia, serif;
  --notes: 'Special Elite', 'IM Fell English', Georgia, serif;
  --bar-h: 52px;
  --cw: 138px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  display: grid;
  grid-template-rows: var(--bar-h) 1fr;
  height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Header */
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 0 18px;
  background: #0b0705;
  border-bottom: 1px solid rgba(232, 178, 90, 0.22);
  min-width: 0;
  z-index: 20;
}
.bar-title { font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold); font-size: 18px; white-space: nowrap; }
.bar-night { color: var(--text-dim); font-style: italic; font-size: 16px; white-space: nowrap; }
.bar-nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.bar-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 2px;
}
.bar-btn:hover, .bar-btn[aria-expanded='true'] { background: rgba(232, 178, 90, 0.12); }
.bar-btn[aria-pressed='false'] { color: var(--text-dim); }
.bar-jam { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.stage { position: relative; overflow: hidden; min-height: 0; }

/* Buttons */
.btn {
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(232, 178, 90, 0.55);
  border-radius: 2px;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { background: rgba(232, 178, 90, 0.1); }
.btn-main { background: linear-gradient(#8f4214, #66290b); border-color: var(--gold); color: #f8e9cb; }
.btn-main:hover { background: linear-gradient(#a14c18, #73300e); }
.btn-quiet { border-color: transparent; color: var(--text-dim); text-decoration: underline; text-underline-offset: 4px; }
.btn-small { font-size: 17px; padding: 0 14px; }
.btn-danger { border-color: #b4483f; color: #f1c7bd; }
.btn.is-spent { opacity: 0.45; }

.narration { font-size: 19px; color: var(--text); max-width: 34em; }
.host-says { font-style: italic; color: #f0d9a8; }
.reveal { animation: rise 0.9s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Painted layers */
.title-bg, .arrival-bg, .ending-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: brightness(0.42) saturate(0.8); }
.title-bg.is-missing, .arrival-bg.is-missing, .ending-bg.is-missing { background: radial-gradient(ellipse at 50% 100%, #3a2416, var(--ground) 70%); filter: none; }
.snowfall { position: absolute; inset: 0; background-size: 520px; opacity: 0.55; mix-blend-mode: screen; animation: snow 26s linear infinite; pointer-events: none; }
.snowfall.is-missing { background-image: radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff6, transparent), radial-gradient(2px 2px at 40% 80%, #fff5, transparent); background-size: 240px 240px; }
@keyframes snow { from { background-position: 0 0; } to { background-position: 80px 520px; } }
.embers { position: absolute; inset: 0; background-size: 640px; mix-blend-mode: screen; opacity: 0.55; animation: embers 18s linear infinite; pointer-events: none; }
.embers.is-missing { display: none; }
@keyframes embers { from { background-position: 0 0; } to { background-position: -40px -640px; } }
.wall { position: absolute; inset: 0; background-size: 420px; opacity: 0.22; filter: sepia(0.5) brightness(0.7); }

/* Title */
.title-wrap { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; overflow-y: auto; }
.title-fire { position: relative; height: clamp(150px, 34vh, 330px); aspect-ratio: 1; margin-bottom: -5vh; flex: none; }
.title-hearth { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(200, 100, 30, 0.45)); }
.hearth-standin { background: radial-gradient(ellipse at 50% 78%, #f5a54a 0, #c8641e 10%, rgba(122, 53, 17, 0.6) 26%, transparent 52%); }
.title-fire .embers { opacity: 0.8; }
.title-name { font-family: var(--black); font-weight: 400; font-size: clamp(38px, 6.4vw, 70px); line-height: 1; margin: 0; color: var(--grey); text-shadow: 0 2px 0 #000, 0 0 30px rgba(200, 100, 30, 0.35); }
.title-goal { font-style: italic; font-size: 21px; color: #f0d9a8; }
.title-small { font-size: 14px; color: var(--text); max-width: 34em; padding: 4px 12px; background: rgba(12, 8, 6, 0.82); border-radius: 3px; }
.title-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rug-title { width: min(560px, calc(100vw - 48px)); }
.rug-title .rug-slot { position: relative; }
/* The first card lies on its slot's name; on a narrow rug the name is wider than the card and would show at its edges. */
.rug-title .rug-slot:first-child .slot-label { visibility: hidden; }
.title-card {
  position: absolute; inset: 6px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, #5b2620 0 6px, #4a1d18 6px 12px);
  border: 2px solid var(--parch-2);
  animation: lay-first 1.6s cubic-bezier(.2,.7,.2,1) 0.6s both;
}
@keyframes lay-first { from { transform: translate(180px, 160px) rotate(14deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }

/* Arrival */
.arrival-wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; padding: 32px max(24px, 8vw) 48px; }
.arrival-text { display: grid; gap: 14px; max-width: 36em; text-shadow: 0 1px 3px #000; }
.arrival-text .host-says { font-size: 22px; }

/* The rug */
.rug {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(232, 178, 90, 0.08) 0 2px, transparent 2px 14px),
    linear-gradient(#4a1c17, #391410);
  border: 3px double rgba(232, 178, 90, 0.4);
  border-radius: 3px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.rug-slot {
  aspect-ratio: 5 / 7;
  border: 1px dashed rgba(232, 178, 90, 0.35);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  padding: 0;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  cursor: default;
  min-width: 0;
}
.rug-slot .slot-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-variant: small-caps; letter-spacing: 0.06em; font-size: 15px; color: rgba(232, 178, 90, 0.6); pointer-events: none; }
.rug-slot:not(.is-empty) .slot-label { display: none; }
.rug-slot.is-next { border: 1px solid var(--ember); box-shadow: 0 0 18px rgba(200, 100, 30, 0.45); animation: next 2.4s ease-in-out infinite; }
.rug-slot.is-next .slot-label { color: var(--gold); }
@keyframes next { 50% { box-shadow: 0 0 6px rgba(200, 100, 30, 0.2); } }
.slot-card { width: 100%; display: flex; }
.slot-card .card { width: 100%; cursor: pointer; }

/* Cards */
.card {
  --cw: 138px;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  flex: none;
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 7px 8px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 252, 240, 0.35), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(120, 80, 30, 0.28), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(140, 100, 50, 0.12) 0 8%, transparent 9%),
    var(--parch);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #8d7046, 0 3px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.card-slot { font-size: 12px; font-variant: small-caps; letter-spacing: 0.08em; color: #7b5a37; line-height: 1; padding-top: 2px; white-space: nowrap; }
.card-num { font-style: italic; }
.card-name { font-size: max(13px, 11cqw); line-height: 1.08; text-align: center; color: var(--ink); }
.card-role { font-size: max(12px, 8.6cqw); font-style: italic; color: var(--ink-soft); text-align: center; line-height: 1.1; }
.card-text { font-size: max(12px, 8.6cqw); line-height: 1.22; color: #4c3925; text-align: center; margin-top: auto; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.card-orn { width: 70%; height: 22%; margin: 4px 0 2px; background:
  linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100% 1px no-repeat,
  radial-gradient(circle, var(--wine) 0 4px, transparent 5px) center / 12px 12px no-repeat; opacity: 0.75; }
.card .face { width: 82%; aspect-ratio: 1; flex: none; }
.face { position: relative; overflow: hidden; background: #2a1d14; border: 1px solid var(--ink); border-radius: 2px; }
.face-pic { position: absolute; inset: 0; background-size: 360%; background-position: 50% 3%; background-repeat: no-repeat; }
.face-silhouette { position: absolute; inset: 0; background:
  radial-gradient(ellipse 22% 26% at 50% 40%, #0d0806 98%, transparent 100%),
  radial-gradient(ellipse 44% 34% at 50% 100%, #0d0806 98%, transparent 100%),
  radial-gradient(ellipse at 50% 30%, #6a5038, #3a281b 70%); }
.face-host { background: radial-gradient(ellipse 24% 30% at 50% 42%, #c9ccc9 0 60%, #8d918f 100%, transparent 101%), radial-gradient(ellipse 46% 34% at 50% 104%, #3b3d3c 98%, transparent 100%), #1b1714; }
.card-seal { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b0423a, var(--wine) 60%, #4b1210); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.card.is-host { background: radial-gradient(ellipse at 30% 20%, #dfe2df, transparent 60%), #b9bdba; box-shadow: inset 0 0 0 3px #b9bdba, inset 0 0 0 4px #4b4f4d, 0 0 18px rgba(200, 210, 205, 0.35); }
.card.is-host .card-name { font-family: var(--black); }
.card.status-gone .face { filter: grayscale(1) brightness(0.6); }
.card.status-gone .face::after { content: ''; position: absolute; left: -20%; top: 12%; width: 140%; height: 12%; background: #0b0705; transform: rotate(-32deg); transform-origin: left; }
.card.status-changed .face { filter: sepia(0.6) contrast(0.8) blur(0.4px); }
.card.status-bound .face { box-shadow: inset 0 0 0 3px #6d5a3e; }
.rug .card .card-text { display: none; }
.rug .card .card-slot { display: none; }
.rug .card { padding: 5px; gap: 3px; box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 3px #8d7046, 0 2px 6px rgba(0, 0, 0, 0.5); }
.rug .card .face { width: 90%; }
.rug .card .card-name { font-size: max(12px, 12cqw); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rug .card .card-role { display: none; }
.card.is-small { --cw: 112px; }

/* Night */
.night { position: absolute; inset: 0; display: grid; grid-template-columns: 47% 1fr; }
.host-pane { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 108%, rgba(200, 100, 30, 0.55), rgba(122, 53, 17, 0.25) 35%, transparent 70%), #0e0907; --lean: 0; }
.host-wall { position: absolute; inset: 0; background-size: 380px; opacity: 0.16; filter: sepia(0.6) brightness(0.6); }
.host-wall.is-missing { display: none; }
.host-frame { position: absolute; inset: 0; transform: scale(calc(1 + var(--lean) * 0.012)); transform-origin: 50% 38%; transition: transform 1.6s ease, filter 0.6s ease; }
.host-pic { position: absolute; inset: 0; background-size: auto 150%; background-position: 50% 4%; background-repeat: no-repeat; opacity: 0; transition: opacity 1.4s ease, filter 1.4s ease;
  filter: grayscale(0.55) sepia(0.2) brightness(0.86) contrast(1.12); }
.host-pane[data-stage='2'] .host-pic { filter: grayscale(0.45) sepia(0.35) brightness(0.8) contrast(1.2) saturate(1.1); }
.host-pane[data-stage='3'] .host-pic { filter: grayscale(0.35) sepia(0.4) brightness(0.78) contrast(1.28) saturate(1.2); }
/* Firelight from one side, behind the cut-out host: the light is on the wall and the pane's edge, never laid over him. */
.host-fire { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 0% 85%, rgba(232, 120, 40, 0.5), rgba(150, 60, 20, 0.2) 45%, transparent 75%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200, 90, 30, 0.35), transparent 70%);
  animation: flicker 3.2s ease-in-out infinite; }
.host-pane[data-stage='3'] .host-fire { background: radial-gradient(ellipse 75% 85% at 0% 85%, rgba(240, 100, 30, 0.6), rgba(160, 40, 20, 0.25) 50%, transparent 80%), radial-gradient(ellipse 60% 45% at 50% 100%, rgba(200, 60, 20, 0.4), transparent 70%); }
.host-pane::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 12px rgba(8, 5, 3, 0.7); }
.host-pane.is-oil .host-pic { background-size: auto 112%; background-position: 50% 0%; filter: grayscale(0.35) brightness(0.92) contrast(1.06); }
/* A measured host fills the pane: the picture is scaled so his head is --hk of the pane's height in every stage, the
   face a little left of centre (the gauge stands on the right) and in the upper third, crown to hands. One grey grade
   over the set, so the stages share a skin. */
.host-pic.is-cropped { inset: auto; --hk: 0.27; height: calc(var(--hk) / var(--hh) * 100%); aspect-ratio: 1; left: 45%; top: 25%; background-size: 100% 100%; background-position: 0 0;
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%)); }
.host-pane.is-oil[data-stage='2'] .host-pic { filter: grayscale(0.4) brightness(0.9) contrast(1.1); }
.host-pane.is-oil[data-stage='3'] .host-pic { filter: grayscale(0.2) brightness(0.86) contrast(1.16) saturate(1.1); }
/* Addition A: the host leans in while a household Figure is held over the open slot. */
.host-pane.is-leaning .host-frame { transform: scale(calc(1.08 + var(--lean) * 0.012)); transform-origin: 50% 30%; }
.host-line.is-preview .line-text { opacity: 0.85; }
.host-line.is-preview { border-left-color: var(--ember); }
.host-pic.is-shown { opacity: 1; }
.host-standin { position: absolute; inset: 0; }
.host-standin-head { position: absolute; left: 50%; top: 18%; width: 30%; aspect-ratio: 3 / 4; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, #c8ccc9, #8d918f 55%, #4d5150); box-shadow: 0 0 60px rgba(154, 160, 156, 0.25); }
.host-standin-head::after { content: ''; position: absolute; left: 24%; right: 24%; top: 64%; height: 6%; border-bottom: 2px solid #2a2c2b; border-radius: 0 0 50% 50%; }
.host-standin-body { position: absolute; left: 50%; bottom: 0; width: 76%; height: 46%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: linear-gradient(#2b2422, #120c09); }
@keyframes flicker { 0%, 100% { opacity: 0.85; } 30% { opacity: 1; } 55% { opacity: 0.75; } 75% { opacity: 0.95; } }
.host-pane.is-listening .host-frame { filter: brightness(1.12) contrast(1.05); }
.host-pane.is-bored .host-frame { filter: grayscale(0.6) brightness(0.8); }

.gauge { position: absolute; right: 14px; top: 12%; bottom: 12%; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.gauge-label { writing-mode: vertical-rl; transform: rotate(180deg); font-variant: small-caps; letter-spacing: 0.12em; font-size: 15px; color: var(--gold); }
.gauge-rule { position: relative; flex: 1; width: 12px; border: 1px solid #b08a4a; background: rgba(0, 0, 0, 0.6); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column-reverse; }
.gauge-notch { flex: 1; border-top: 1px solid rgba(176, 138, 74, 0.5); position: relative; z-index: 1; }
.gauge-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, var(--ember-deep), var(--ember) 60%, var(--gold)); transition: height 1.2s cubic-bezier(.3,.7,.2,1); }
.gauge-bored { position: absolute; left: -2px; right: -2px; bottom: 20%; height: 2px; background: #d04a3c; z-index: 2; }
.gauge-num { font-size: 17px; color: var(--gold); display: grid; justify-items: center; line-height: 1.05; }
.gauge-of { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.gauge.is-low .gauge-fill { background: linear-gradient(to top, #4b1210, var(--wine)); }

.tale-pane { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 22px 10px; min-width: 0; min-height: 0; background: radial-gradient(ellipse at 0% 60%, rgba(200, 100, 30, 0.14), transparent 60%); }
.tale-hearth { position: absolute; right: -4%; top: -6%; width: 46%; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; opacity: 0.2; pointer-events: none; }
.tale-hearth.is-missing { display: none; }
.craving-box { position: relative; max-width: 36em; display: grid; gap: 2px; }
.craving-label { font-family: var(--notes); font-size: 13px; letter-spacing: 0.06em; color: #c99a55; display: flex; align-items: center; gap: 7px; }
.craving { font-size: 20px; min-height: 1.4em; position: relative; }
/* The ember: on the craving's label, and on every hand card that would answer it. */
.card-ember { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 40%, #ffd28a, var(--ember) 55%, #8a2f12); box-shadow: 0 0 6px 2px rgba(240, 140, 50, 0.55); }
.card .card-ember { position: absolute; left: 6px; top: 6px; }
.card.is-kept .card-kept { position: absolute; left: 0; right: 0; top: 42%; padding: 2px 0; text-align: center; font-size: 12px; font-variant: small-caps; letter-spacing: 0.1em; color: #f3e6cc; background: rgba(90, 22, 18, 0.82); transform: rotate(-8deg); }
.tale-pane .rug { position: relative; max-width: 720px; width: 100%; }
.host-line { position: relative; min-height: 4.4em; padding: 10px 16px; background: rgba(0, 0, 0, 0.35); border-left: 2px solid var(--gold); max-width: 720px; cursor: default; --at: 2; }
.host-line::before { content: ''; position: absolute; top: -9px; left: calc((var(--at) + 0.5) * 20% - 8px); border: 8px solid transparent; border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.35); transition: left 0.4s ease; }
.host-line .line-text { font-size: 20px; line-height: 1.35; }
.host-line.is-waiting::after { content: ''; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ember); box-shadow: 16px 0 0 var(--ember), 32px 0 0 var(--ember); animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { opacity: 0.25; } }
.tale-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 720px; min-height: 44px; }
.prompt { font-style: italic; color: var(--text-dim); font-size: 17px; flex: 1 1 14em; }
.prompt-flavour { display: none; }
.tale-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.appetite-note { display: flex; flex-wrap: wrap; gap: 4px 14px; font-style: normal; }
.appetite-delta { color: var(--gold); }
.appetite-part { color: var(--text-dim); font-size: 16px; }
.appetite-part.is-cost { color: #e08a7d; }
.hand-wrap { margin-top: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #5a3d26 transparent; padding: 18px 2px 6px; min-height: 0; }
.hand { display: flex; gap: 10px; width: max-content; }
.hand .card { cursor: pointer; transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease; }
.hand .card.is-dim { opacity: 0.6; }
.hand .card.is-selected { transform: translateY(-14px); box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #8d7046, 0 0 0 2px var(--gold), 0 10px 22px rgba(0, 0, 0, 0.6); opacity: 1; }
.hand-empty { color: var(--text-dim); font-style: italic; }
.tale-pane.is-told .hand-wrap { opacity: 0.5; }

/* Day */
.stage-day { overflow-y: auto; }
.day { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 20px 24px 28px; align-items: start; }
.plan {
  color: var(--ink);
  background: radial-gradient(ellipse at 20% 10%, rgba(255, 252, 240, 0.4), transparent 60%), radial-gradient(ellipse at 90% 90%, rgba(120, 80, 30, 0.25), transparent 60%), var(--parch);
  padding: 16px 18px 18px;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.plan-title { font-family: var(--notes); font-size: 20px; letter-spacing: 0.04em; }
.candles { display: flex; gap: 10px; align-items: flex-end; }
.candle-stub { width: 12px; height: 30px; background: linear-gradient(90deg, #d9cba8, #f3ead4 40%, #c4b38c); border-radius: 2px 2px 1px 1px; position: relative; opacity: 0.5; }
.candle-stub::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 6px; margin-left: -1px; background: #2b1d13; }
.candle-stub.is-lit { opacity: 1; }
.candle-stub.is-lit::after { content: ''; position: absolute; left: 50%; top: -20px; width: 10px; height: 16px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #fff3c4, #f0a640 50%, rgba(200, 100, 30, 0) 75%); animation: flicker 2.2s ease-in-out infinite; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: 'r0 r1 r2' 'r3 hearth r4'; border: 3px solid var(--ink); }
.plan-room { grid-area: auto; min-height: 120px; padding: 10px; background: transparent; border: 1px solid var(--ink); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; text-align: left; position: relative; }
.plan-room:hover { background: rgba(200, 100, 30, 0.08); }
.plan-room[data-cell='r0'] { grid-area: r0; }
.plan-room[data-cell='r1'] { grid-area: r1; }
.plan-room[data-cell='r2'] { grid-area: r2; }
.plan-room[data-cell='r3'] { grid-area: r3; }
.plan-room[data-cell='r4'] { grid-area: r4; }
.plan-room[data-cell='hearth'] { grid-area: hearth; }
.plan-name { font-family: var(--notes); font-size: 17px; line-height: 1.15; }
.plan-sub { font-style: italic; font-size: 15px; color: var(--ink-soft); }
.plan-room.is-here { background: rgba(200, 100, 30, 0.16); box-shadow: inset 0 0 0 3px var(--ember); }
.plan-room.is-searchable::after { content: ''; position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border: 1.5px solid var(--ink-soft); border-radius: 50%; }
.plan-hearth { background: radial-gradient(ellipse at 50% 100%, rgba(200, 100, 30, 0.35), transparent 70%); justify-content: flex-end; }
.plan-faces { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.face-dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); }
.plan-hint { margin-top: 10px; font-style: italic; font-size: 16px; color: var(--ink-soft); }
.room { position: relative; background: rgba(20, 13, 9, 0.88); border: 1px solid rgba(232, 178, 90, 0.25); padding: 0 0 16px; border-radius: 3px; display: flex; flex-direction: column; gap: 10px; }
.room > :not(.room-art) { margin-left: 18px; margin-right: 18px; }
.room-none { padding: 18px; gap: 16px; }
.room-none > * { margin: 0 !important; }
.room-art { position: relative; height: 230px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(200, 100, 30, 0.25), transparent 70%), #160e0a; border-bottom: 1px solid rgba(232, 178, 90, 0.2); }
.room.has-result .room-art { height: 110px; }
.room-prop { position: absolute; left: 50%; bottom: 0; height: 112%; transform: translateX(-50%); object-fit: contain; }
.prop-standin { width: 50%; height: 70%; bottom: 0; background: linear-gradient(#2d1d14, #150d09); border-radius: 4px 4px 0 0; }
.room-glow { position: absolute; inset: 0; background-size: cover; mix-blend-mode: screen; opacity: 0.35; pointer-events: none; }
.room-glow.is-missing { display: none; }
.room-name { font-weight: 400; font-size: 26px; margin: 4px 0 0; color: var(--gold); }
.room-text { color: var(--text); }
.room-empty { color: var(--text-dim); font-style: italic; }
.people { display: grid; gap: 10px; }
.person { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; }
.face-person { width: 60px; height: 60px; border-radius: 50%; border: 1px solid #8d7046; }
.person-name { font-size: 19px; }
.person-role { font-style: italic; color: var(--text-dim); font-size: 16px; }
.person.status-changed .face { filter: sepia(0.7) contrast(0.8); }
.room-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.talk { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; background: var(--parch); color: var(--ink); border-radius: 3px; position: relative; animation: rise 0.5s ease both; }
.talk > .face-talk { width: 96px; height: 120px; }
.talk .face-talk .face-pic { background-size: 260%; background-position: 50% 4%; }
.talk:not(:has(.face-talk)) { grid-template-columns: 1fr; }
.talk-body { display: grid; gap: 8px; min-width: 0; }
.talk-who { font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink-soft); }
.talk-line { font-size: 18px; }
.talk .narration { color: var(--ink); }
.talk-cards { margin-top: 6px; }
.talk-cards-label { font-family: var(--notes); font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.talk-cards-row { display: flex; gap: 8px; flex-wrap: wrap; }
.talk .btn-close { justify-self: end; grid-column: 1 / -1; color: var(--ink-soft); }

/* Morning */
/* The table at the top, the roll call in its own scrolling column, and Leave the table always in view below it. */
.stage-morning { overflow: hidden; }
.morning { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 14px; padding: 16px 18px 14px; background: linear-gradient(#6c7573, var(--morn-bg) 40%, #3b4241); color: #1d2221; }
.window-light { position: absolute; inset: 0 0 auto; height: 60%; background: linear-gradient(100deg, transparent 20%, rgba(235, 240, 238, 0.22) 30%, transparent 42%, transparent 55%, rgba(235, 240, 238, 0.16) 63%, transparent 72%); pointer-events: none; }
.table-wrap { position: relative; width: min(980px, 100%); margin-top: 6px; }
.seats { display: flex; justify-content: center; gap: clamp(6px, 2vw, 22px); padding: 0 12px; }
.seat { position: relative; width: clamp(64px, 14vw, 150px); height: clamp(150px, 38vh, 300px); opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.seat.is-set { opacity: 1; transform: none; }
.chair-pic { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; object-fit: contain; object-position: bottom; filter: brightness(0.75) saturate(0.6); }
.chair-standin { left: 14%; right: 14%; width: auto; height: 72%; border: 7px solid #3a2a1f; border-bottom: 0; border-radius: 46% 46% 0 0 / 22% 22% 0 0; background: repeating-linear-gradient(90deg, #4a3628 0 10px, #2e2018 10px 14px); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); }
.face-seat { position: absolute; left: 10%; right: 10%; top: 4%; aspect-ratio: 4 / 5; border-radius: 45% 45% 8% 8%; border: 0; z-index: 1; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35); }
.face-seat .face-pic { background-size: 300%; background-position: 50% 3%; }
.seat.status-changed .face-seat { filter: sepia(0.7) contrast(0.85); }
.seat.status-bound .face-seat { box-shadow: 0 0 0 3px #6d5a3e; }
.seat.is-empty .chair-pic { filter: brightness(0.9) saturate(0.4); }
.table-top { position: relative; z-index: 2; margin-top: calc(-1 * clamp(44px, 9vh, 72px)); height: clamp(54px, 11vh, 86px); display: flex; justify-content: center; gap: clamp(6px, 2vw, 22px); padding: 0 12px; align-items: flex-start; background: linear-gradient(#eef0ee, #c9ceca 60%, #a9afab); border-radius: 4px; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35); }
.place-setting { width: clamp(64px, 14vw, 150px); height: 100%; position: relative; }
.place-setting::before { content: ''; position: absolute; left: 50%; top: 22%; width: 52%; aspect-ratio: 2.4; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #fafbfa 40%, #d6dbd8 41%, #fafbfa 60%, #bfc5c1 62%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); }
.place-card { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); padding: 1px 6px; font-size: 12px; font-variant: small-caps; letter-spacing: 0.05em; width: max-content; max-width: 150%; text-align: center; line-height: 1.1; color: #3d4341; background: #f7f7f2; border: 1px solid #b7bdb9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.place-setting.is-untouched .place-card { color: #6b716e; }
.place-setting:not(.is-untouched)::after { content: ''; position: absolute; left: 44%; top: 26%; width: 18%; aspect-ratio: 2; border-radius: 40%; background: #c08a4a; }
.morning-words { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 36em; width: 100%; overflow-y: auto; text-align: center; padding: 0 6px; overscroll-behavior: contain; }
.morning-line { font-size: 20px; color: #121615; }
.morning-line.is-fate { font-size: 22px; color: #0b0d0c; }
.morning-line.is-recalled { font-size: 17px; font-style: italic; color: #1d2221; }
.morning-foot { min-height: 44px; }
.morning-line.reveal { animation-duration: 0.45s; }
.morning-words::-webkit-scrollbar { width: 6px; }
.morning-words::-webkit-scrollbar-thumb { background: rgba(20, 24, 23, 0.35); }
.morning .btn { color: #121615; border-color: rgba(20, 24, 23, 0.55); }
.morning .btn-main { background: #2c3332; color: #e8ecea; border-color: #121615; }

/* Ending */
.stage-ending { overflow-y: auto; }
.ending { position: relative; max-width: 40em; margin: 0 auto; padding: 48px 24px; display: grid; gap: 16px; text-shadow: 0 1px 3px #000; }
.ending-title { font-family: var(--black); font-weight: 400; font-size: clamp(34px, 5vw, 56px); color: var(--grey); margin: 0; line-height: 1.05; }
.ending-text { font-size: 20px; }
.ending-tally { color: var(--text-dim); font-style: italic; }
.ending-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* Sheets */
.sheet { position: fixed; z-index: 30; right: 0; top: calc(var(--bar-h) + env(safe-area-inset-top)); bottom: 0; width: min(440px, 100%); background: #1a110c; border-left: 1px solid rgba(232, 178, 90, 0.35); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; animation: slide 0.25s ease both; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 20px; border-bottom: 1px solid rgba(232, 178, 90, 0.2); }
.sheet-title { font-weight: 400; font-size: 24px; color: var(--gold); margin: 0; }
.sheet-close { font-size: 18px; min-width: 88px; }
.sheet-body { overflow-y: auto; padding: 16px 20px 24px; display: grid; gap: 14px; align-content: start; }
.note-head { font-family: var(--notes); font-weight: 400; font-size: 17px; color: var(--gold); margin: 6px 0 4px; letter-spacing: 0.03em; }
.note { color: var(--text-dim); font-size: 17px; }
.journal .note { color: var(--text); margin-bottom: 6px; }
.journal-night { border-top: 1px solid rgba(232, 178, 90, 0.15); padding-top: 6px; }
.menu .btn { justify-self: start; }
.menu .menu-sound { display: none; }
.confirm { display: grid; gap: 10px; padding: 12px; border: 1px solid #b4483f; }
.confirm .btn { justify-self: start; }
.credits-title { font-family: var(--black); font-size: 30px; color: var(--grey); }
.credits-stability { color: var(--gold); font-size: 18px; }

/* Toasts */
.toasts { position: fixed; z-index: 40; left: 50%; top: calc(var(--bar-h) + 12px + env(safe-area-inset-top)); transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; width: min(520px, 92vw); }
.toast { background: rgba(14, 9, 7, 0.95); border: 1px solid rgba(232, 178, 90, 0.5); padding: 10px 16px; font-size: 17px; text-align: center; animation: rise 0.3s ease both; transition: opacity 0.5s ease; }
.toast.is-leaving { opacity: 0; }

/* Phone and narrow screens: host on top, rug in the middle, hand below */
@media (max-width: 760px) {
  :root { --bar-h: 50px; }
  body { font-size: 17px; }
  .bar { gap: 8px; padding: 0 4px 0 10px; }
  .bar-title { display: none; }
  .bar-night { font-size: 15px; }
  .bar-btn { padding: 0 6px; font-size: 15px; white-space: nowrap; }
  .bar-night { font-size: 14px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* Breakfast on a phone: seven chairs in one row, short enough that the chair shows under each face; the place cards alternate
     on and over the table edge so neighbouring names never overlap. */
  .seat { height: 130px; }
  .seats, .table-top { gap: 4px; padding: 0 4px; }
  .table-wrap { margin-bottom: 28px; }
  .place-setting:nth-child(even) .place-card { bottom: -26px; }
  .night { grid-template-columns: 1fr; grid-template-rows: 30% 1fr; }
  .host-pic { background-size: auto 230%; background-position: 50% 3%; }
  .gauge { top: 10px; bottom: 10px; right: 8px; width: 36px; }
  .gauge-label { font-size: 13px; }
  .tale-pane { padding: 8px 10px 4px; gap: 8px; }
  .tale-hearth { display: none; }
  .craving { font-size: 17px; }
  .rug { gap: 5px; padding: 6px; }
  .rug-slot .slot-label { font-size: 12px; }
  .host-line { min-height: 4em; padding: 8px 12px; }
  .host-line .line-text { font-size: 17px; }
  .prompt { font-size: 15px; }
  .tale-controls { gap: 8px; }
  .tale-actions .btn { font-size: 16px; padding: 0 12px; }
  .hand-wrap { padding-top: 16px; }
  .hand .card { --cw: 120px; }
  .day { grid-template-columns: 1fr; padding: 10px; gap: 12px; }
  .plan { padding: 10px; }
  .plan-room { min-height: 96px; padding: 6px; }
  .plan-name { font-size: 15px; }
  .face-dot { width: 32px; height: 32px; }
  .room-art { height: 190px; }
  .room > :not(.room-art) { margin-left: 12px; margin-right: 12px; }
  .talk { grid-template-columns: 72px 1fr; padding: 10px; }
  .talk > .face-talk { width: 72px; height: 90px; }
  .sheet { top: auto; height: 72dvh; width: 100%; border-left: 0; border-top: 1px solid rgba(232, 178, 90, 0.35); }
  .arrival-wrap { padding: 20px 18px 30px; }
  .title-fire { height: clamp(140px, 28vh, 260px); }
}

/* Short landscape (a phone on its side): the hand and the controls are budgeted first. Nothing in the tale pane shrinks
   below its content; the pane scrolls instead, and the craving keeps its words without the label. Chosen by height, so a
   small phone on its side (568 to 760 wide) gets it too, over the narrow stacked layout above. */
@media (max-height: 560px) and (min-width: 568px) and (orientation: landscape) {
  .night { grid-template-columns: 38% 1fr; grid-template-rows: 1fr; }
  .tale-pane { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: 'craving craving' 'rug line' 'controls controls' 'hand hand';
    align-content: start; overflow-y: auto; overscroll-behavior: contain; gap: 6px 10px; padding: 6px 14px 4px; }
  .craving-box { grid-area: craving; }
  .tale-pane .rug { grid-area: rug; gap: 5px; padding: 5px; }
  .host-line { grid-area: line; min-height: 0; padding: 5px 10px; overflow-y: auto; }
  .host-line::before { display: none; }
  .tale-controls { grid-area: controls; min-height: 40px; gap: 8px; }
  .hand-wrap { grid-area: hand; margin-top: 0; padding: 14px 2px 4px; min-height: max-content; }
  .tale-hearth { display: none; }
  .craving-label { display: none; }
  .craving { font-size: 16px; min-height: 0; }
  .rug-slot .slot-label { font-size: 12px; }
  .host-line .line-text { font-size: 15px; line-height: 1.3; }
  .prompt { font-size: 15px; }
  /* Hand cards lose their ornament and set their flavour tight, so a whole row fits under the controls. A tapped card's
     whole line is read in the prompt, above the row. */
  .hand .card { --cw: 128px; aspect-ratio: auto; height: 116px; }
  .hand .card .card-orn { display: none; }
  .hand .card .card-text { font-size: 12px; line-height: 1.08; -webkit-line-clamp: 4; }
  .prompt-flavour { display: block; font-size: 14px; line-height: 1.25; color: var(--text); }
  .prompt-flavour + .prompt-ask { display: none; }
  .hand .card:has(.face) .card-text { display: none; }
  .hand .card .face { width: 46%; }
  .host-pic.is-cropped { --hk: 0.25; top: 21%; }
}

/* A small phone on its side (568 to 760 wide): the tale pane is too narrow for the rug and the host's line side by side,
   so the line is spoken from under his portrait, over his knees, and the rug takes the pane's width at whatever height is
   left above the controls and the hand. */
@media (max-height: 560px) and (min-width: 568px) and (max-width: 760px) and (orientation: landscape) {
  .night { grid-template-columns: 36% 1fr; }
  .tale-pane { position: static; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(64px, 1fr) auto auto; grid-template-areas: 'craving' 'rug' 'controls' 'hand'; height: 100%; }
  .tale-pane .rug { grid-template-rows: minmax(0, 1fr); min-height: 0; max-width: 420px; }
  .tale-pane .rug-slot { aspect-ratio: auto; min-height: 0; }
  .craving { font-size: 15px; line-height: 1.3; }
  .host-line { position: absolute; z-index: 2; left: 6px; bottom: 6px; width: calc(36% - 60px); max-height: 46%; background: rgba(10, 6, 4, 0.86); }
  .host-line .line-text { font-size: 14px; }
  .hand .card { --cw: 120px; height: 106px; }
}
@media (max-height: 340px) and (min-width: 568px) and (max-width: 760px) and (orientation: landscape) {
  .tale-pane { grid-template-rows: auto minmax(50px, 1fr) auto auto; gap: 4px 10px; padding-top: 4px; }
  .tale-controls { min-height: 34px; }
  .hand-wrap { padding-top: 9px; }
  .hand .card { height: 100px; }
}

/* Desk display faces (atlas canvases). The words show in IM Fell until the atlas has decoded. */
.atlas { display: inline-block; max-width: 100%; vertical-align: middle; }
.atlas.is-drawn .atlas-fallback { display: none; }
.atlas-canvas { display: block; max-width: 100%; height: auto; }
.title-name .atlas-canvas { filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 18px rgba(200, 100, 30, 0.4)); }
.ending-title .atlas-canvas { filter: drop-shadow(0 2px 0 #000); }
.plan-title .atlas-canvas { height: 24px; width: auto; }
.note-head .atlas-canvas { height: 21px; width: auto; }

/* The painted candle for the day's hours: spent hours are snuffed. */
.candle-pic { width: 30px; height: 30px; object-fit: contain; object-position: 50% 100%; filter: grayscale(0.7) brightness(0.55); transform: scale(1.5); transform-origin: 50% 100%; }
.candle-pic.is-lit { filter: drop-shadow(0 0 6px rgba(240, 166, 64, 0.8)); animation: flicker 2.2s ease-in-out infinite; }

/* The card's own stains over the CSS paper (the desk's parchment came back with a figure painted on it, so it is not used). */
.card:not(.is-host) { background-image:
    radial-gradient(ellipse at 28% 18%, rgba(255, 252, 240, 0.35), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(120, 80, 30, 0.28), transparent 50%);
  background-position: center; }

/* A measured crop (art.js CROP): the picture is sized so the head is --k of the frame's width, and the middle of the
   face is placed at --ax, --ay. Each frame sets its own head size and face height: head and shoulders everywhere. */
.face .face-pic.is-cropped { inset: auto; left: var(--ax, 50%); top: var(--ay, 40%); width: calc(var(--k, 0.46) / var(--hh) * 100%); height: auto; aspect-ratio: 1; background-size: 100% 100%; background-position: 0 0;
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%)); }
.card .face { --k: 0.44; --ay: 40%; }
.face-seat { --k: 0.5; --ay: 36%; }
.face-person { --k: 0.5; --ay: 46%; }
.face-dot { --k: 0.56; --ay: 50%; }
.face-talk { --k: 0.44; --ay: 34%; }
.face-staff { background: radial-gradient(ellipse at 30% 25%, #5a4130, #24170f 70%); }

/* A card tapped while the host listens: it waits lifted at the rug's edge, ember-lit, until the line ends. */
.hand .card.is-queued { transform: translateY(-14px); box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #8d7046, 0 0 0 2px var(--ember), 0 0 18px rgba(240, 140, 50, 0.6); opacity: 1; animation: next 1.2s ease-in-out infinite; }

/* The room's life in the day panel, and the morning's whereabouts before the first step. */
.room-moment { font-family: var(--notes); font-size: 15px; line-height: 1.5; color: #d9c7a6; border-left: 2px solid rgba(232, 178, 90, 0.35); padding-left: 12px; }
.room-not-yet { font-size: 16px; font-style: italic; color: var(--text-dim); }
.about { display: grid; gap: 8px; }
.about-head { font-weight: 400; font-size: 20px; margin: 0; color: var(--gold); }
.about-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; text-align: left; font: inherit; color: var(--text); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(232, 178, 90, 0.2); border-radius: 3px; cursor: pointer; }
.about-row:hover, .about-row:focus-visible { border-color: var(--gold); }
.about-faces { display: flex; gap: 4px; flex: none; }
.about-faces .face-dot { width: 40px; height: 40px; }
.about-text { display: grid; }
.about-room { font-size: 18px; color: var(--gold); }
.about-who { font-size: 16px; color: var(--text-dim); }

@media (max-width: 760px) {
  /* The phone's host pane is short: he is framed from the crown to the knees, hands in view, the picture fading into the
     dark above the craving rather than cut off at the waist. */
  .host-pic.is-cropped { --hk: 0.25; top: 21%; }
  .host-frame { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  /* Breakfast with five or more places: smaller chairs, and every place card in its own plate's width, wrapped if need be. */
  .morning.is-crowded .seat { height: 136px; }
  .morning.is-crowded .table-top { height: 62px; margin-top: -40px; }
  .morning.is-crowded .table-wrap { margin-bottom: 0; }
  /* A phone's place is about 50 px wide: the chair fills the place's height (cropped to the chair from its square plate)
     so its back stands clear of the table, and the face is small and high, so an empty chair reads as plainly as a full one. */
  .chair-pic { height: 100%; object-fit: cover; object-position: 50% 0; }
  .seat { height: 150px; }
  .face-seat { left: calc(50% - 22px); right: auto; width: 44px; top: 0; --k: 0.66; --ay: 46%; }
  .place-setting:nth-child(even) .place-card { bottom: 4%; }
  .place-card { white-space: normal; width: min-content; max-width: 100%; bottom: 4%; padding: 1px 3px; letter-spacing: 0; overflow-wrap: normal; }
  .morning-line { font-size: 18px; }
  .morning-line.is-fate { font-size: 19px; }
  .bar-title { display: block; font-size: 14px; white-space: normal; line-height: 1.05; max-width: 6.5em; letter-spacing: 0.04em; }
  #btn-sound { display: none; }
  .bar-word { display: none; }
  .bar-night { overflow: visible; }
  .menu .menu-sound { display: inline-flex; }
}

/* A short screen keeps the button in the first view: the plate is capped and the rug narrowed before anything scrolls. */
@media (max-height: 560px) {
  .title-wrap { justify-content: safe center; gap: 8px; padding-top: 10px; }
  .title-fire { height: clamp(60px, 18vh, 110px); margin-bottom: -1vh; }
  .title-name { font-size: clamp(28px, 4.2vw, 40px); }
  .title-goal { font-size: 17px; }
  .rug-title { width: min(320px, 50vw); padding: 6px; gap: 5px; }
}

@media (max-height: 560px) and (max-width: 760px) {
  .seat, .morning.is-crowded .seat { height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .snowfall, .embers, .host-fire, .rug-slot.is-next, .candle-stub.is-lit::after, .candle-pic.is-lit { animation: none; }
  .host-frame { transition: none; transform: none; }
  .title-card { animation-duration: 0.01s; }
}