/* WHO SAID IT? — a hushed, parchment-and-candlelight page for a game of voices. */

html { height: auto; overflow-y: auto; }
.ws-body {
  display: flex; flex-direction: column; min-height: 100vh; height: auto; overflow: visible;
  color: #ede4d0;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(58, 110, 165, 0.18), transparent),
    radial-gradient(900px 420px at 85% 0%, rgba(165, 44, 44, 0.18), transparent),
    radial-gradient(700px 500px at 50% 100%, rgba(201, 161, 90, 0.12), transparent),
    linear-gradient(180deg, #191411, #100d0b);
}
.ws-stage { flex: 1; max-width: 780px; width: 100%; margin: 0 auto; padding: 40px 20px 90px; box-sizing: border-box; }
.ws-plain { flex: 1; max-width: 780px; width: 100%; margin: 0 auto; padding: 40px 20px 20px; box-sizing: border-box; }

/* ================= the hall =================
   Five paintings of one wall (assets/hall1–5.webp), stacked and cross-faded:
   a single candle at hall1, the whole chamber ablaze at hall5. Which one shows
   is driven by how many voices you have named correctly, and --glow warms the
   wall continuously in between, so every right answer changes something even
   when the painting has not stepped yet.

   The art is 1448 x 1086 and its recessed panel sits at 20.5%-79.5% across and
   11.5%-71.5% down. .ws-hall carries the art's own aspect ratio so those
   percentages hold at any size, and .ws-wall is pinned to that rect. The frame
   clips top and bottom on a short window rather than shrinking the words —
   the panel starts 11.5% down, so the desk may only be tall enough that the
   clip stays inside that margin (height <= frame / 0.77, i.e. width <= 2.66 x). */
.ws-shell {
  --glow: 0;
  position: relative; display: flex; flex-direction: column; flex: 1; padding-bottom: 40px;
}
.ws-hallframe {
  display: none;
  width: 100%; justify-content: center; align-items: center;
  overflow: hidden; max-height: calc(100vh - 118px);
}
.ws-hall {
  /* 1.334 = the wall's own aspect (1448/1086), so the WHOLE painting fits the
     viewport height and is never clipped — a larger multiplier blew the wall up
     taller than the frame, and the overflow-clip read as a zoomed-in crop */
  --hw: min(1240px, 94vw, calc((100vh - 118px) * 1.334));
  position: relative; flex: 0 0 auto;
  width: var(--hw); aspect-ratio: 1448 / 1086;
}
.ws-shell:not([data-phase="setup"]) .ws-hallframe { display: flex; }
.ws-shell:not([data-phase="setup"]) .ws-plain { display: none; }

.ws-hall-art { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; }
.ws-hall-layer {
  position: absolute; inset: 0; opacity: 0;
  background-size: 100% 100%; background-position: center;
  transition: opacity 1.6s ease;
}
.ws-hall-layer.on { opacity: 1; }
/* hall1 stays lit underneath so a cross-fade never shows through to nothing */
.ws-hall-layer[data-n="1"] { opacity: 1; }

/* the warmth between paintings — one variable, driven by the exact score */
.ws-hall-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: radial-gradient(58% 52% at 50% 46%, rgba(255, 176, 74, 0.30), transparent 72%);
  opacity: var(--glow);
  mix-blend-mode: screen;
  transition: opacity 1.1s ease;
}

.ws-wall {
  position: absolute;
  left: 20.5%; top: 11.5%; width: 59%; height: 60%;
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto; scrollbar-width: none;
  font-size: calc(var(--hw) * 0.0118);
}
.ws-wall::-webkit-scrollbar { display: none; }

/* ---------------- the faces you have named ----------------
   This replaces the row of progress dots: one slot per question, filled with
   that speaker's portrait when you name them and left an empty niche when you
   do not. It is the progress bar, the score and the reward in one row. */
.ws-faces {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.34em;
  justify-items: center; margin: 0 auto 0.8em; max-width: 22em;
}
.ws-face {
  width: 2.8em; height: 2.8em; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: rgba(10, 6, 3, 0.55);
  border: 2px solid rgba(201, 161, 90, 0.28);
  transition: box-shadow .5s ease, border-color .5s ease, transform .3s ease;
}
.ws-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-face-got {
  border-color: rgba(255, 196, 110, 0.85);
  box-shadow: 0 0 0.75em rgba(255, 176, 74, 0.75);
  animation: ws-hang .55s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ws-hang {
  from { opacity: 0; transform: translateY(-0.5em) scale(.8); }
  to   { opacity: 1; transform: none; }
}
.ws-face-missed {
  border-style: dashed; border-color: rgba(196, 96, 84, 0.75);
  background: rgba(90, 26, 22, 0.45);
}
.ws-face-now { border-color: var(--gold-bright); box-shadow: 0 0 0.6em rgba(201, 161, 90, 0.7); }


/* every screen this page toggles must actually hide — style.css has no bare .hidden rule */
.ws-setup.hidden, .ws-gate.hidden, .ws-game.hidden, .ws-result.hidden, .ws-shell .hidden { display: none; }
.ws-anim-in { animation: ws-screen-in .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes ws-screen-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- setup ---------------- */
.ws-setup { text-align: center; }
.ws-kicker { font-family: var(--serif-display); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }
.ws-setup h1 {
  font-family: var(--serif-display); font-size: 42px; letter-spacing: 3px; margin: 12px 0 12px;
  background: linear-gradient(180deg, #f6e7c5, #c9a15a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ws-sub { max-width: 500px; margin: 0 auto 34px; opacity: 0.8; line-height: 1.6; }

/* saga chooser — which realm's voices to be examined on */
.ws-sagas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.ws-saga {
  font-family: var(--serif-display); font-size: 12px; letter-spacing: 1.2px; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; color: var(--gold-bright);
  background: rgba(240, 230, 210, 0.04); border: 1px solid rgba(201, 161, 90, 0.34);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.ws-saga:hover { border-color: var(--gold); transform: translateY(-1px); }
.ws-saga.active {
  color: #241a10; border-color: transparent;
  background: linear-gradient(180deg, #e0bd7c, #b98f47);
  box-shadow: 0 6px 16px rgba(201, 161, 90, 0.24);
}

.ws-fmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 30px; }
.ws-fmt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 22px 12px 16px; border-radius: 14px;
  background: rgba(240, 230, 210, 0.05); border: 2px solid rgba(201, 161, 90, 0.25);
  color: #ede4d0; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.ws-fmt:hover { transform: translateY(-3px); }
.ws-fmt-emoji { font-size: 40px; line-height: 1; }
.ws-fmt b { font-family: var(--serif-display); font-size: 14px; }
.ws-fmt i { font-size: 11px; opacity: 0.6; font-style: normal; }
.ws-fmt.active { box-shadow: 0 8px 26px rgba(0,0,0,.45); border-color: var(--gold-bright); background: rgba(201, 161, 90, 0.12); }

.ws-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 34px; }
.ws-diff {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 14px 10px; border-radius: 12px;
  background: rgba(240, 230, 210, 0.05); border: 2px solid rgba(201, 161, 90, 0.22);
  color: #ede4d0; transition: border-color .2s ease, background .2s ease;
}
.ws-diff b { font-family: var(--serif-display); font-size: 15px; letter-spacing: 1px; }
.ws-diff span { font-size: 11px; opacity: 0.6; }
.ws-diff-easy.active { border-color: #58b368; background: rgba(88, 179, 104, 0.14); }
.ws-diff-med.active { border-color: #e0a83c; background: rgba(224, 168, 60, 0.14); }
.ws-diff-hard.active { border-color: #d84c4c; background: rgba(216, 76, 76, 0.16); }

.ws-start {
  font-family: var(--serif-display); font-size: 16px; letter-spacing: 2px;
  padding: 16px 44px; border-radius: 12px; border: none; cursor: pointer;
  color: #241c12; background: linear-gradient(180deg, #e8c883, #c9a15a);
  box-shadow: 0 6px 24px rgba(201, 161, 90, 0.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.ws-start:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 161, 90, 0.5); }
.ws-start:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------- spoiler shield ---------------- */
.ws-gate { text-align: center; }
.ws-gate h2 {
  font-family: var(--serif-display); font-size: 32px; letter-spacing: 2px; margin: 10px 0 12px;
  background: linear-gradient(180deg, #f6e7c5, #c9a15a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ws-gate-group { margin: 0 auto 22px; max-width: 600px; text-align: center; }
.ws-gate-label { font-family: var(--serif-display); font-size: 13px; letter-spacing: 1.5px; color: var(--gold-bright); margin-bottom: 10px; }
.ws-gate-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ws-gate-opt {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(240, 230, 210, 0.05); border: 1.5px solid rgba(201, 161, 90, 0.25);
  color: #ede4d0; font-family: var(--serif-body); font-size: 13px;
  transition: border-color .15s ease, background .15s ease;
}
.ws-gate-opt:hover { border-color: var(--gold-bright); }
.ws-gate-opt.active { border-color: var(--gold-bright); background: rgba(201, 161, 90, 0.22); color: #f6e7c5; }
.ws-gate-count { margin: 4px 0 24px; font-size: 13.5px; opacity: 0.75; min-height: 20px; }
.ws-gate-count b { color: var(--gold-bright); }
.ws-gate-count .ws-gate-warn { color: #e0a83c; }
.ws-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ws-gate-back, .ws-gate-nospoil {
  font-family: var(--serif-display); font-size: 12.5px; letter-spacing: 1px;
  padding: 12px 22px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(201, 161, 90, 0.45); background: transparent; color: var(--gold);
}
.ws-gate-back:hover, .ws-gate-nospoil:hover { background: rgba(201, 161, 90, 0.15); }

/* ---------------- game, written on the wall ---------------- */
.ws-game-head { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.4em; }
.ws-quit {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(230, 205, 165, 0.72); font-family: var(--serif-body); font-size: 0.76em;
}
.ws-quit:hover { color: #f4ead2; text-decoration: underline; }
.ws-streak { flex: 1; font-family: var(--serif-display); font-size: 0.76em; color: #f0b45c; text-align: right; }

.ws-card { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.ws-quote {
  font-family: var(--serif-body); font-style: italic; font-size: 1.24em; line-height: 1.42;
  text-align: center; color: #f7edd6; margin: 0 0 0.9em; padding: 0 0.4em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.ws-quote::before { content: "\201C"; }
.ws-quote::after { content: "\201D"; }

/* four faces in a 2x2 grid — the hall offers you four and you point at one */
.ws-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5em; }
.ws-a {
  display: flex; flex-direction: row; align-items: center; gap: 0.6em;
  padding: 0.45em 0.55em; border-radius: 0.6em; cursor: pointer; text-align: left;
  color: #f0e6d2; font-family: var(--serif-body); font-size: 0.86em; line-height: 1.2;
  background: rgba(20, 12, 6, 0.5); border: 1px solid rgba(201, 161, 90, 0.32);
  backdrop-filter: blur(2px);
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.ws-a:hover:not(:disabled) { border-color: var(--gold-bright); background: rgba(60, 36, 14, 0.62); transform: translateY(-2px); }
.ws-a:disabled { cursor: default; }
.ws-a.right { border-color: #7fce8c; background: rgba(40, 92, 50, 0.6); animation: ws-pop .3s ease; }
.ws-a.wrong { border-color: #e06a6a; background: rgba(110, 34, 34, 0.6); animation: ws-shake .3s ease; }
.ws-a.dim { opacity: 0.35; }
.ws-a.faded-out { visibility: hidden; }
.ws-a-portrait {
  width: 3.2em; height: 3.2em; border-radius: 50%; object-fit: cover; display: block; flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(201, 161, 90, 0.35);
}
.ws-a-name { font-weight: 600; font-size: 0.98em; min-width: 0; }

.ws-tools { display: flex; gap: 0.4em; justify-content: center; margin-top: 0.7em; flex-wrap: wrap; }
.ws-tool {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.42em 0.85em; border-radius: 999px; cursor: pointer; font-size: 0.8em;
  font-family: var(--serif-body); color: #f0e6d2;
  background: rgba(20, 12, 6, 0.5); border: 1px solid rgba(201, 161, 90, 0.32);
}
.ws-tool:hover:not(:disabled) { border-color: var(--gold-bright); background: rgba(60, 36, 14, 0.6); }
.ws-tool:disabled { opacity: 0.4; }
.ws-tool:disabled { opacity: 0.35; cursor: default; }
.ws-tool-tag { font-size: 0.78em; opacity: 0.7; text-transform: uppercase; letter-spacing: .5px; }

.ws-hint, .ws-context {
  margin-top: 0.6em; font-size: 0.78em; line-height: 1.45; text-align: center;
  color: #efe0c4; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.ws-hint { font-style: italic; color: #f0c97e; }
.ws-next {
  display: block; margin: 0.7em auto 0; padding: 0.5em 1.2em; border-radius: 999px; cursor: pointer;
  font-family: var(--serif-display); font-size: 0.78em; letter-spacing: 1px;
  color: #241c12; border: none; background: linear-gradient(180deg, #f0cd8c, #c9a15a);
}
.ws-next:hover { background: linear-gradient(180deg, #ffe0a4, #d9b169); }

/* ---------------- the verdict, also on the wall ---------------- */
.ws-result { text-align: center; }
.ws-result .ws-kicker { font-size: 0.66em; }
.ws-score-ring {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 5.4em; height: 5.4em; margin: 0.2em auto 0.5em; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 186, 96, 0.28), rgba(20, 12, 6, 0.5));
  border: 1px solid rgba(255, 196, 110, 0.6);
  box-shadow: 0 0 2em rgba(255, 176, 74, 0.4);
}
.ws-score-ring b { font-family: var(--serif-display); font-size: 2em; color: #ffeec4; line-height: 1; }
.ws-score-ring span { font-size: 0.6em; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; margin-top: 0.3em; }
.ws-rank { font-family: var(--serif-display); font-size: 1.25em; color: #ffd894; margin-bottom: 0.3em; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ws-rank-sub { margin: 0 auto 1em; opacity: 0.9; line-height: 1.5; font-size: 0.78em; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.ws-reveal-1 { animation: ws-screen-in .5s ease .45s both; }
.ws-reveal-2 { animation: ws-screen-in .5s ease .7s both; }
.ws-reveal-3 { animation: ws-screen-in .5s ease .95s both; }
.ws-result-actions { display: flex; gap: 0.4em; justify-content: center; flex-wrap: wrap; }
.ws-result-actions button {
  padding: 0.45em 0.9em; border-radius: 999px; cursor: pointer; font-size: 0.74em;
  font-family: var(--serif-body); color: #f0e6d2;
  background: rgba(20, 12, 6, 0.5); border: 1px solid rgba(201, 161, 90, 0.4);
}
.ws-result-actions button:hover { border-color: var(--gold-bright); background: rgba(60, 36, 14, 0.6); }

/* too narrow, or too short, to write on the wall: the painting becomes a
   full-bleed backdrop and the wall becomes a panel floating over it */
@media (max-width: 820px), (max-height: 640px) {
  .ws-hallframe { display: block; max-height: none; overflow: visible; }
  .ws-shell:not([data-phase="setup"]) .ws-hallframe { display: block; }
  .ws-hall { --hw: 100%; width: 100%; aspect-ratio: auto; }
  .ws-hall-art { position: fixed; inset: 0; border-radius: 0; z-index: -1; }
  .ws-hall-layer { background-size: cover; }
  .ws-hall-glow { position: fixed; inset: 0; z-index: -1; }
  .ws-wall {
    position: static; width: min(560px, 94vw); height: auto; margin: 18px auto 0;
    padding: 20px 16px 22px; box-sizing: border-box; border-radius: 6px; font-size: 15px;
    background: rgba(14, 9, 5, 0.82);
    border: 1px solid rgba(201, 161, 90, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  }
  .ws-answers { grid-template-columns: 1fr 1fr; }
  .ws-setup h1 { font-size: 30px; }
  .ws-quote { font-size: 1.05em; }
}