/* Echo Kamer — an open paper room, not a cabinet. The photographic shell keeps
   its 3:2 geometry. A live word sheet on the rear wall, loose floor speakers and
   foreground name slips are independent physical layers. No gameplay clock. */
html #zineEchoApp {
  --field: #e5a77d;
  --echo-room: url("assets/nachtzine/echo-room-2026-09-23/room.webp");
  min-height: 620px;
  height: 100svh;
  padding: 24px 34px 18px;
  grid-template-rows: 52px minmax(0, 1fr) 56px;
  gap: 6px;
  align-content: stretch;
}
html #zineEchoApp .echo-sound-system {
  grid-row: 2;
  display: block;
  width: min(100%, 1200px, calc((100svh - 162px) * 1.5));
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  padding: 0;
  align-self: center;
  container-type: inline-size;
}
html #zineEchoApp .echo-backboard {
  inset: 0;
  border: 0;
  border-image: none;
  background: var(--echo-room) center / contain no-repeat;
  filter: var(--wp-shadow-object);
}
html #zineEchoApp .echo-studio {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  min-height: 0;
}
html #zineEchoApp .echo-word-stack {
  position: absolute;
  left: 25%;
  top: 39%;
  width: 50%;
  height: 25%;
  margin: 0;
}
html #zineEchoApp .echo-word-carrier {
  height: 100%;
  min-height: 0;
  padding: 5% 7% 6%;
  grid-template-rows: 16px minmax(0, 1fr) 34px;
  filter: var(--wp-shadow-paper);
}
html #zineEchoApp .echo-word-carrier[data-paper-kind]::before { bottom: 0; }
html #zineEchoApp .echo-word-carrier[data-paper-kind]::after {
  inset: 3px 2px -4px -2px;
  transform: rotate(-.7deg);
}
html #zineEchoApp .echo-word {
  font-size: var(--echo-fit, clamp(56px, 8.5cqw, 112px));
  line-height: 1.02;
  padding: .06em 0;
}
html #zineEchoApp[data-phase="idle"] .echo-word-carrier {
  grid-template-rows: 0 auto auto;
  align-content: center;
  row-gap: 12px;
}
html #zineEchoApp[data-phase="idle"] #echoWord { font-size: clamp(34px, 4.5cqw, 58px); }
html #zineEchoApp[data-phase="idle"] #echoStarter { font-size: clamp(18px, 2.1cqw, 25px); }
html #zineEchoApp .echo-starter { font-size: clamp(18px, 2.1cqw, 25px); }
html #zineEchoApp[data-echo-moment="countdown"] .echo-word-carrier {
  grid-template-rows: 12px minmax(0, 1fr) 52px;
}
html #zineEchoApp[data-echo-moment="countdown"] .echo-word { font-size: var(--echo-fit, clamp(64px, 9cqw, 112px)); }
html #zineEchoApp .echo-ready-name { font-size: clamp(20px, 2.6cqw, 30px); }
html #zineEchoApp .echo-paper-clamp { width: 17px; height: 28px; top: -10px; }
html #zineEchoApp .echo-speaker {
  position: absolute;
  top: auto;
  bottom: 18%;
  left: 9%;
  width: 15%;
  height: 30%;
  transform: rotate(-3deg);
  filter: var(--wp-shadow-object);
}
html #zineEchoApp .echo-speaker-right { left: auto; right: 9%; transform: rotate(3deg); }
html #zineEchoApp .echo-rays { top: 9%; right: -12%; width: 27%; height: 20%; }
html #zineEchoApp .echo-speaker-right .echo-rays { right: auto; left: -12%; }
html #zineEchoApp .echo-roster-area {
  position: absolute;
  left: 11%;
  right: auto;
  bottom: 7%;
  width: 78%;
  max-width: none;
  justify-self: stretch;
}
html #zineEchoApp[data-player-count] .echo-roster-area { max-width: none; }
html #zineEchoApp #echoInstruction {
  margin: 0 0 15px;
  min-height: 1.3em;
  color: var(--ink);
  font-size: clamp(18px, 1.85cqw, 23px);
}
html #zineEchoApp .echo-players {
  width: 100%;
  gap: 12px 16px;
  grid-template-columns: repeat(var(--echo-cols, 3), minmax(0, 1fr));
}
html #zineEchoApp[data-player-count="2"] .echo-players { width: 62%; }
html #zineEchoApp[data-player-count="3"] .echo-players { width: 84%; }
html #zineEchoApp .echo-player {
  min-height: 92px;
  padding: 10px 8%;
  grid-template-rows: 40px 24px;
  gap: 3px;
  filter: var(--wp-shadow-slip);
}
html #zineEchoApp .echo-player-name { height: 40px; font-size: clamp(21px, 2.6cqw, 32px); }
html #zineEchoApp .echo-player-name[data-long="true"] { font-size: clamp(18px, 2cqw, 24px); }
html #zineEchoApp .echo-hearts { height: 24px; gap: 7px; }
html #zineEchoApp .echo-heart { width: 22px; height: 22px; }
html #zineEchoApp > .echo-controls {
  width: min(100%, 690px);
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  z-index: 4;
  align-self: center;
}
html #zineEchoApp > .echo-controls::before,
html #zineEchoApp > .echo-controls::after { display: none; }
/* The same word recedes into the room. Quiet ink, not transparent paper or
   a fleeting particle effect; these two copies are decorative and never future words. */
html #zineEchoApp .echo-imprint {
  display: grid;
  inset: auto 13% calc(100% + 12px);
  height: 30%;
  padding: 4px 5%;
  opacity: 1;
  visibility: hidden;
  transform: rotate(.8deg);
  animation: none;
  filter: var(--wp-shadow-slip);
}
html #zineEchoApp .echo-imprint-far {
  inset: auto 27% calc(130% + 22px);
  height: 23%;
  transform: rotate(-1deg);
}
html #zineEchoApp[data-phase="playing"][data-echo-busy="false"] .echo-imprint { visibility: visible; }
html #zineEchoApp .echo-imprint span {
  width: 100%;
  text-align: center;
  font-size: var(--echo-copy-fit, clamp(24px, 4.1cqw, 48px));
  color: #535347;
}
html #zineEchoApp .echo-imprint-far span {
  font-size: var(--echo-copy-fit, clamp(18px, 2.6cqw, 32px));
  color: #696759;
}
html #zineEchoApp[data-echo-motion] .echo-imprint { animation: none; }
/* Countdown is a fixed preparation card: identity left, one large figure right.
   Its ink changes once per second; its paper only turns at the two boundaries. */
html #zineEchoApp[data-echo-moment="countdown"] .echo-word-carrier {
  padding: 5% 8%;
  grid-template-columns: minmax(0, 1fr) 26%;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 7%;
  row-gap: 7px;
  text-align: left;
}
html #zineEchoApp[data-echo-moment="countdown"] .echo-kicker { grid-area: 1 / 1; font-size: clamp(16px, 2cqw, 22px); }
html #zineEchoApp[data-echo-moment="countdown"] .echo-starter { grid-area: 2 / 1; align-self: start; justify-items: start; gap: 5px; font-size: clamp(16px, 1.7cqw, 22px); }
html #zineEchoApp[data-echo-moment="countdown"] .echo-ready-name { display: block; width: 100%; min-width: 0; white-space: nowrap; font-size: var(--echo-name-fit, clamp(22px, 3.4cqw, 40px)); line-height: 1.05; }
html #zineEchoApp[data-echo-moment="countdown"] .echo-word { grid-area: 1 / 2 / 3; text-align: center; font-size: var(--echo-fit, clamp(64px, 11cqw, 130px)); line-height: 1; padding: 0; }
html #zineEchoApp .echo-turn-leaf::after { display: none; }
/* Alternative photographed paper stocks; deliberately no hue filter on ink,
   hearts, speakers or the shared interface. Opt-in, not the production palette. */
html #zineEchoApp[data-echo-colour="lilac"] {
  --field: #a89bc4;
  --echo-teal: #493752;
  --echo-room: url("assets/nachtzine/echo-colour-2026-09-23/lilac.webp");
  background: radial-gradient(ellipse at 50% 42%, #e5dbee48, #40344918), var(--stock) center / 1000px, var(--field);
}
html #zineEchoApp[data-echo-colour="ochre"] {
  --field: #d6b452;
  --echo-teal: #263b55;
  --echo-room: url("assets/nachtzine/echo-colour-2026-09-23/ochre.webp");
  background: radial-gradient(ellipse at 50% 42%, #fae7a248, #6f541618), var(--stock) center / 1000px, var(--field);
}
html #zineEchoApp[data-echo-colour-review] .echo-heading > p { display: none; }
html #zineEchoApp .echo-palette-review { display: flex; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; }
html #zineEchoApp .echo-palette-review legend { padding: 0; font-size: 15px; }
html #zineEchoApp .echo-palette-review button { color: var(--ink); font: inherit; font-size: 19px; padding: 7px 10px; min-height: 40px; border: 2px solid transparent; background: #f3e5c670; cursor: pointer; }
html #zineEchoApp .echo-palette-review button[aria-pressed="true"] { border-color: currentColor; background: #f3e5c6; }
html #zineEchoApp .echo-palette-review button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
html #zineEchoApp .echo-palette-review button:disabled { cursor: wait; opacity: .65; }
html #zineEchoApp .echo-palette-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html #zineEchoApp .echo-victory-stamp { top: 10px; font-size: clamp(20px, 2.2cqw, 28px); }

/* Large groups become two banks beside the room, not a wall of tickets in
   front of the speakers. DOM/session order remains row-wise, all seats persist. */
@media (min-width: 901px) and (min-height: 561px) {
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-sound-system {
    max-width: calc(100vw - 460px);
  }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-roster-area {
    width: calc(100vw - 72px);
    left: 50%;
    right: auto;
    bottom: 22%;
    transform: translateX(-50%);
  }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-players {
    width: 100%;
    grid-template-columns: repeat(2, clamp(160px, 15vw, 210px));
    justify-content: space-between;
  }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) #echoInstruction {
    position: absolute;
    top: calc(100% + 22px);
    left: 24%;
    right: 24%;
    margin: 0;
  }
}

/* The same eight fixed name positions must fit without changing the room or
   shrinking when someone loses a life. Space comes from the quiet floor. */
@media (min-width: 901px) and (max-height: 740px) {
  html #zineEchoApp { padding: 16px 26px 12px; grid-template-rows: 48px minmax(0, 1fr) 50px; gap: 3px; }
  html #zineEchoApp .echo-sound-system { width: min(100%, 1040px, calc((100svh - 132px) * 1.5)); }
  html #zineEchoApp .echo-word-stack { top: 39%; height: 25%; }
  html #zineEchoApp .echo-word-carrier { padding-block: 3%; grid-template-rows: 10px minmax(0, 1fr) 26px; }
  html #zineEchoApp .echo-roster-area { bottom: 6%; left: 9%; right: auto; width: 82%; }
  html #zineEchoApp #echoInstruction { margin-bottom: 9px; font-size: 18px; }
  html #zineEchoApp .echo-player { min-height: 72px; padding: 5px 7%; grid-template-rows: 35px 20px; }
  html #zineEchoApp .echo-player-name { height: 35px; font-size: 23px; }
  html #zineEchoApp .echo-player-name[data-long="true"] { font-size: 18px; }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-word-carrier { padding-block: 4%; grid-template-rows: 20px minmax(0, 1fr); }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-word { font-size: var(--echo-fit, 76px); }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-starter { font-size: 17px; }
  html #zineEchoApp .echo-players { gap: 10px 12px; }
  html #zineEchoApp .echo-heart { width: 19px; height: 19px; }
  html #zineEchoApp .echo-hearts { height: 20px; gap: 5px; }
  html #zineEchoApp[data-player-count="8"] .echo-word-stack,
  html #zineEchoApp[data-player-count="7"] .echo-word-stack,
  html #zineEchoApp[data-player-count="6"] .echo-word-stack,
  html #zineEchoApp[data-player-count="5"] .echo-word-stack { top: 39%; height: 25%; }
  html #zineEchoApp > .echo-controls { height: 50px; min-height: 50px; }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-roster-area { bottom: 20%; left: 50%; width: calc(100vw - 72px); }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-player { min-height: 80px; grid-template-rows: 40px 20px; }
  html #zineEchoApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .echo-player-name { height: 40px; }
}
/* Compact views keep a real 3:2 chamber above an ordinary scrolling roster,
   never a distorted tall box or a tiny eight-card UI inside a photograph. */
@media (max-width: 900px), (max-height: 560px) {
  html #zineEchoApp[data-echo-colour-review] .echo-heading { flex-wrap: wrap; gap: 10px; }
  html #zineEchoApp { min-height: 100svh; height: auto; padding: 64px 12px 28px; grid-template-rows: auto auto auto; gap: 18px; overflow: visible; }
  html #zineEchoApp .echo-sound-system { width: min(100%, 820px); aspect-ratio: auto; padding: 0; }
  html #zineEchoApp .echo-backboard { bottom: auto; width: 100%; aspect-ratio: 3 / 2; }
  html #zineEchoApp .echo-studio { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  html #zineEchoApp .echo-word-stack { top: 38%; left: 23%; width: 54%; height: 32%; }
  html #zineEchoApp .echo-word-carrier { padding: 3px 6%; grid-template-rows: 12px minmax(0, 1fr) 25px; }
  html #zineEchoApp[data-phase="idle"] #echoWord { font-size: clamp(23px, 5.5cqw, 42px); }
  html #zineEchoApp[data-phase="idle"] #echoStarter { font-size: clamp(14px, 3.3cqw, 21px); }
  html #zineEchoApp .echo-word { font-size: var(--echo-fit, clamp(34px, 9cqw, 80px)); }
  html #zineEchoApp .echo-speaker { left: 7%; bottom: 22%; width: 16%; height: 30%; }
  html #zineEchoApp .echo-speaker-right { left: auto; right: 7%; }
  html #zineEchoApp .echo-paper-clamp { width: 12px; height: 20px; top: -6px; }
  html #zineEchoApp .echo-roster-area { position: relative; inset: auto; width: 94%; margin: -8px auto 0; transform: none; }
  html #zineEchoApp #echoInstruction { margin-bottom: 18px; min-height: 1.3em; font-size: 18px; }
  html #zineEchoApp .echo-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  html #zineEchoApp[data-player-count] .echo-players { width: 100%; }
  html #zineEchoApp .echo-player { min-height: 92px; }
  html #zineEchoApp .echo-starter { font-size: 16px; }
  html #zineEchoApp .echo-ready-name { font-size: 18px; }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-word-carrier { padding: 3px 6%; grid-template-rows: 15px minmax(0, 1fr); column-gap: 4%; row-gap: 3px; }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-kicker { font-size: 13px; }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-ready-name { font-size: var(--echo-name-fit, clamp(16px, 4cqw, 26px)); }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-word { font-size: var(--echo-fit, clamp(32px, 10cqw, 72px)); }
  html #zineEchoApp[data-echo-moment="countdown"] .echo-starter { gap: 0; font-size: 14px; }
  html #zineEchoApp .echo-imprint { bottom: calc(100% + 5px); padding: 2px 4%; }
  html #zineEchoApp .echo-imprint-far { bottom: calc(130% + 10px); }
  html #zineEchoApp .echo-imprint span { font-size: var(--echo-copy-fit, clamp(14px, 4.8cqw, 32px)); }
  html #zineEchoApp .echo-imprint-far span { font-size: var(--echo-copy-fit, clamp(11px, 3.4cqw, 24px)); }
  html #zineEchoApp > .echo-controls { height: auto; min-height: 56px; margin: 0; padding: 0; }
}
@media (forced-colors: active) {
  html #zineEchoApp .echo-imprint { display: none; }
  html #zineEchoApp .echo-backboard { display: none; }
  html #zineEchoApp .echo-word-carrier,
  html #zineEchoApp .echo-player { filter: none; }
  html #zineEchoApp #echoInstruction { color: CanvasText; }
}

/* The room stays physical; guidance belongs to the quiet control margin.
   Player slips remain the start action, not the roster-management button. */
html #zineEchoApp > .echo-controls { position: relative; }
html #zineEchoApp > .echo-controls #echoInstruction {
  position: absolute; top: auto; bottom: calc(100% + 5px);
  left: 50%; right: auto; width: max-content; max-width: 90vw;
  transform: translateX(-50%); margin: 0; min-height: 0;
  font-size: 18px; line-height: 1.2; color: #40352c;
}
html #zineEchoApp[data-phase="idle"] #echoMainAction.echo-quiet {
  font-size: 21px; color: var(--ink); min-height: 44px;
  padding: 9px 22px; filter: var(--wp-shadow-slip);
}
html #zineEchoApp[data-phase="idle"] #echoMainAction.echo-quiet::before { background-color: #d6bb91; }
html #zineEchoApp[data-phase="idle"] .echo-player:not(:disabled)::before { border-bottom: 4px solid var(--echo-teal); }
html #zineEchoApp[data-phase="idle"] .echo-player:not(:disabled):is(:hover,:focus-visible) { color: var(--echo-teal); }
html #zineEchoApp .echo-player-name,
html #zineEchoApp .echo-player-name[data-long="true"] {
  font-size: var(--echo-card-name-fit, clamp(21px, 2.6cqw, 32px));
  white-space: nowrap; overflow-wrap: normal; line-height: 1.04;
  width: 100%; justify-items: center;
}
html #zineEchoApp .echo-player-name > span { display: block; }
html #zineEchoApp .echo-card-hint { filter: var(--wp-shadow-slip); }
html #zineEchoApp .echo-result-hearts { display: flex; gap: 9px; justify-content: center; align-items: center; }
html #zineEchoApp .echo-result-hearts .echo-heart { width: clamp(23px, 3.2cqw, 36px); height: clamp(23px, 3.2cqw, 36px); }
html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-word-carrier {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px minmax(0, 1fr) auto;
  padding: 4% 7%; gap: 3px;
}
html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-kicker { color: var(--echo-red); font-size: clamp(17px, 2.2cqw, 25px); }
html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-word { font-size: var(--echo-fit, clamp(30px, 5.6cqw, 68px)); }
html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-starter,
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-starter { display: flex; flex-direction: column-reverse; gap: 4px; font-size: clamp(16px, 1.9cqw, 22px); }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-word-carrier { grid-template-rows: 32px minmax(0, 1fr) auto; gap: 4px; padding-block: 2%; }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-kicker { display: none; }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-word { grid-row: 2; font-size: var(--echo-fit, clamp(32px, 6.2cqw, 76px)); padding-block: 0; }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-starter { grid-row: 3; font-size: clamp(14px, 1.7cqw, 20px); gap: 3px; }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-result-hearts .echo-heart { width: clamp(22px, 2.7cqw, 30px); height: clamp(22px, 2.7cqw, 30px); }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-victory-stamp { position: relative; top: auto; left: auto; grid-row: 1; justify-self: center; transform: rotate(-4deg); font-size: 18px; animation: none; }
html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-player[data-winner="true"]::after { content: "WINNAAR"; position: absolute; left: 50%; top: -10px; transform: translateX(-50%) rotate(-2deg); padding: 3px 10px; background: var(--echo-teal); color: var(--paper); font-size: 15px; }
@media (max-width: 900px), (max-height: 560px) {
  html #zineEchoApp > .echo-controls { margin-top: 38px; }
  html #zineEchoApp > .echo-controls #echoInstruction { max-width: calc(100vw - 32px); width: 100%; font-size: 16px; }
  html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-word-carrier { grid-template-rows: 15px minmax(0, 1fr) auto; gap: 1px; padding: 3% 6%; }
  html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-kicker { font-size: 13px; }
  html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-word { font-size: var(--echo-fit, clamp(19px, 5.6cqw, 42px)); }
  html #zineEchoApp .echo-result-hearts { gap: 6px; }
  html #zineEchoApp .echo-result-hearts .echo-heart { width: 18px; height: 18px; }
  html #zineEchoApp:is([data-echo-moment="loss"], [data-echo-moment="elimination"]) .echo-starter,
  html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-starter { font-size: 13px; gap: 1px; }
  html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-word-carrier { grid-template-rows: 16px minmax(0, 1fr) auto; gap: 2px; }
  html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-victory-stamp { font-size: 13px; border-width: 2px; }
  html #zineEchoApp[data-phase="complete"][data-echo-busy="false"] .echo-word { font-size: var(--echo-fit, clamp(20px, 6cqw, 46px)); }
}
@media (prefers-reduced-motion: reduce) {
  html #zineEchoApp .echo-result-hearts .is-losing { opacity: .35; }
  html #zineEchoApp .echo-result-hearts .is-losing path { fill: none; }
}
@media (forced-colors: active) {
  html #zineEchoApp .echo-card-hint { background: Canvas; color: CanvasText; filter: none; }
  html #zineEchoApp > .echo-controls #echoInstruction { color: CanvasText; }
  html #zineEchoApp .echo-result-hearts .echo-heart { color: CanvasText; }
}