/* style.css — The Sealed Chamber. Candlelit-study palette over the shared
   Areopagus chrome (chrome.css supplies texture, top bar, brass accent). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0c0a08;
  --bg-panel:    #14100c;
  --bg-raised:   #1b1610;
  --border:      #2c241a;
  --border-mid:  #3a3022;

  --text:        #e9e2d4;
  --text-muted:  #93887a;
  --text-faint:  #4a4238;

  --brass:       #c9a84c;
  --brass-dim:   #4a3a10;
  --brass-glow:  rgba(201, 168, 76, 0.12);

  --parlor:      #c8c2b4;
  --drawing:     #a8b4cc;
  --chamber:     #c9a84c;

  --closed:      #7fae6e;
  --trial:       #c9a84c;
  --open:        #b06a5a;

  --font-display: 'Cinzel', Georgia, serif;
  --font-serif:   'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --font-mono:    'Courier New', Courier, monospace;

  --radius: 3px;
}

html {
  font-size: 17px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 5px; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Header & hero ─────────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.4rem 1.5rem 0.4rem;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.site-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.site-title span { color: var(--brass); }

.beta-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
  background: var(--brass-glow);
}

.hero {
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  padding: 1.6rem 1.5rem 0.6rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: 0.015em;
}
.hero-title em { color: var(--brass); font-style: italic; }

.hero-tagline {
  margin-top: 0.9rem;
  max-width: 620px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

/* ─── Main layout ───────────────────────────────────────────────────── */

.site-main {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem 4rem;
}

/* ─── Tier selector ─────────────────────────────────────────────────── */

.tier-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}

.tier-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.tier-btn:hover { border-color: var(--border-mid); background: var(--bg-raised); }

.tier-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier-desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.tier-parlor  .tier-name { color: var(--parlor); }
.tier-drawing .tier-name { color: var(--drawing); }
.tier-chamber .tier-name { color: var(--chamber); }

.tier-btn.active { border-color: var(--brass-dim); box-shadow: 0 0 0 1px var(--brass-dim), 0 0 24px var(--brass-glow); }
.tier-btn.active .tier-desc { color: var(--text); }

/* ─── Rubric box ────────────────────────────────────────────────────── */

.rubric-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
  padding: 0.75rem 1rem;
}
.rubric-box summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.rubric-table {
  width: 100%;
  margin: 0.9rem 0 0.4rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.rubric-table td {
  padding: 0.4rem 0.6rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.rubric-table td:first-child { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.06em; white-space: nowrap; }
.rubric-table td:nth-child(2) { color: var(--brass); font-family: var(--font-mono); font-size: 0.82rem; }
.rubric-table td:last-child { color: var(--text-muted); }
.rubric-note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.rubric-note strong { color: var(--text); font-weight: 600; }

/* ─── Mystery panel ─────────────────────────────────────────────────── */

.mystery-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  margin-bottom: 1.4rem;
}

.mystery-head { margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.9rem; }
.mystery-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}
.mystery-period {
  margin-top: 0.25rem;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.mystery-text { font-size: 1.04rem; }
.mystery-text p { margin-bottom: 0.95rem; }
.mystery-text p:last-child { margin-bottom: 0; }
.mystery-text em { color: var(--text-muted); }
.mystery-text strong { color: var(--brass); font-weight: 600; }

/* ─── Answer panel ──────────────────────────────────────────────────── */

.answer-panel { margin-bottom: 1.4rem; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.1rem 0 0.4rem;
}

.answer-panel textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  padding: 0.7rem 0.85rem;
  resize: vertical;
}
.answer-panel textarea:focus { outline: none; border-color: var(--brass-dim); box-shadow: 0 0 0 1px var(--brass-dim); }
.answer-panel textarea::placeholder { color: var(--text-faint); font-style: italic; }

.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.char-note { font-size: 0.85rem; color: var(--open); }

.btn-primary {
  background: var(--brass-glow);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover:not(:disabled) { background: rgba(201, 168, 76, 0.22); box-shadow: 0 0 20px var(--brass-glow); }
.btn-primary:disabled { opacity: 0.5; cursor: wait; }

/* ─── Verdict panel ─────────────────────────────────────────────────── */

.verdict-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
}

.verdict-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
}

.verdict-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}
.verdict--closed { color: var(--closed); }
.verdict--trial  { color: var(--trial); }
.verdict--open   { color: var(--open); }

.verdict-score { font-family: var(--font-mono); }
.score-value { font-size: 1.6rem; color: var(--text); }
.score-max   { font-size: 0.95rem; color: var(--text-muted); }

.dim-row { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.dim-row:last-of-type { border-bottom: none; }
.dim-head { display: flex; justify-content: space-between; gap: 1rem; }
.dim-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dim-score { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.dim-score--high { color: var(--brass); }
.dim-feedback { margin-top: 0.3rem; font-size: 0.92rem; color: var(--text-muted); }

.lucky-cap {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--open);
  border-radius: var(--radius);
  color: var(--open);
  font-size: 0.9rem;
}

.verdict-explanation {
  margin-top: 1.1rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
}

.reveal-box {
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 0.7rem 1rem;
}
.reveal-box summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.reveal-text { margin-top: 0.9rem; font-size: 0.98rem; }
.reveal-text p { margin-bottom: 0.85rem; }
.reveal-text strong { color: var(--brass); }
.reveal-text em { color: var(--text-muted); }

.again-row { margin-top: 1.3rem; text-align: right; }

/* ─── Loading & footer ──────────────────────────────────────────────── */

.loading-note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 2rem 0;
  text-align: center;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.4rem 1.5rem 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-faint);
}
.site-footer a { color: var(--text-muted); }

/* ─── Small screens ─────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .tier-select { grid-template-columns: 1fr; }
  .mystery-panel, .verdict-panel { padding: 1.2rem 1.1rem; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .btn-primary { width: 100%; }
}

/* The hidden attribute must win. A class carrying its own `display` (.site-main is
   `display:grid`) silently defeats the UA `[hidden]{display:none}` rule, which is how
   the Arena and Comebacks landing pages shipped ~950px of an inert practice panel
   below the match view, tier cards and all (beta audit 2026-10-21). */
[hidden] { display: none !important; }

/* ─── Screen-reader-only ────────────────────────────────────────────── */
/* Carries the verdict announcement (#verdict-live). Must stay off-canvas but
   IN the accessibility tree — display:none or visibility:hidden would remove
   it from that tree and the announcement with it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Keyboard-open reachability (B11) ──────────────────────────────── */
/* MEASURED 2026-10-27, headless at 390px: "Submit for Judgment" sat at y=880
   in an 844px viewport with no keyboard at all, and at y=668 in the ~420px
   that an open keyboard leaves. The player had to dismiss the keyboard,
   scroll, and only then submit — on the chamber whose entire interaction is
   one long textarea and one button.
   Pinning the row to the bottom of the answer panel keeps it on screen for as
   long as the panel is. --kb-inset is fed by the visualViewport shim in
   index.html and is 0 everywhere the keyboard already resizes the viewport. */
@media (max-width: 620px) {
  .answer-panel { position: relative; }
  .submit-row {
    position: sticky;
    bottom: var(--kb-inset, 0px);
    z-index: 20;
    margin-top: 0.75rem;
    padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 62%, rgba(12, 10, 8, 0));
  }
  /* A ten-row field on a phone pushes its own submit control out of reach.
     The field still scrolls and still drag-resizes; it just stops being
     taller than the space a keyboard leaves. */
  .answer-panel textarea { max-height: 38vh; }
}