:root {
  --bg:        #0b0d0f;
  --bg-lift:   #12161a;
  --stone:     #161b21;
  --line:      #272e36;
  --line-soft: #1d232a;
  --ink:       #e7e0d1;
  --muted:     #857f72;
  --ember:     #e0a43f;
  --ember-dim: #8d6626;
  --cold:      #5e6873;
  --blood:     #a84b3b;
  --accent:    var(--cold);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  /* firelight pooling behind the hall, tinted by the current state */
  background-image:
    radial-gradient(60rem 40rem at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 50% 110%, #000 20%, transparent 70%);
  color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem 1.25rem;
  transition: background-image 1.2s ease;
}

.hall {
  width: 100%;
  max-width: 26rem;
  margin: auto;  /* with flex, keeps a tall card scrollable instead of clipped */
  text-align: center;
  background: linear-gradient(180deg, var(--stone), var(--bg-lift));
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2.75rem 2rem 1.5rem;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 30px 60px -30px #000;
}
/* carved bevel top and bottom */
.hall::before, .hall::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.hall::before { top: 0.75rem; }
.hall::after  { bottom: 0.75rem; }

/* ---------- rune mark ---------- */
.mark { display: grid; place-items: center; margin-bottom: 1.25rem; }
.rune { width: 84px; height: 84px; overflow: visible; }
.rune .ring, .rune .ticks line, .rune .stave line, .rune .stave polyline {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .8s ease, opacity .8s ease;
}
.rune .ring-outer { stroke-width: 1; opacity: .28; }
.rune .ring-inner { stroke-width: 1; opacity: .14; }
.rune .ticks line  { stroke-width: 1.5; opacity: .45; }
.rune .stave line, .rune .stave polyline { stroke-width: 3.5; }

[data-phase="up"] .rune .stave { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ember) 55%, transparent)); }
[data-phase="up"] .rune .ring-outer { animation: breathe 4.5s ease-in-out infinite; }
[data-phase="waking"] .rune .stave { animation: flicker 1.6s ease-in-out infinite; }
[data-phase="down"] .rune { opacity: .55; }

@keyframes breathe { 0%,100% { opacity:.2; transform:scale(1);} 50% { opacity:.45; transform:scale(1.03);} }
@keyframes flicker { 0%,100% { opacity:1;} 45% { opacity:.45;} }

/* ---------- titles ---------- */
.title {
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.75rem);
  letter-spacing: .16em;
  text-indent: .08em;   /* half the letter-spacing: the trailing space shifts the visual centre left by half its width */
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--ink), #a99e88);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker {
  margin: .35rem 0 1.9rem;
  font-size: .72rem;
  letter-spacing: .28em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- verdict ---------- */
.verdict { min-height: 4.4rem; }
.state {
  font-family: Cinzel, Georgia, serif;
  font-size: 1.22rem;
  letter-spacing: .06em;
  text-indent: .03em;
  margin: 0;
  color: var(--accent);
  transition: color .8s ease;
}
.sub { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- player tally ---------- */
.tally {
  margin: 1.5rem auto .25rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: .1rem;
}
.count {
  font-family: Cinzel, Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ember);
  text-shadow: 0 0 24px color-mix(in srgb, var(--ember) 30%, transparent);
}
.count-label {
  font-size: .72rem; letter-spacing: .22em; text-indent: .11em; text-transform: uppercase; color: var(--muted);
}

/* ---------- meta ---------- */
.meta {
  display: flex; justify-content: center; gap: 2.25rem;
  margin: 1.4rem 0 1.6rem;
}
.meta div { display: grid; gap: .15rem; }
.meta dt { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: #5f5a50; }
.meta dd { margin: 0; font-size: .85rem; color: var(--ink); font-variant-numeric: tabular-nums; }


/* ---------- footer ---------- */
.foot {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #4f4a42;
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transition: background .8s ease; }
[data-phase="up"] .dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }

/* ---------- phases ---------- */
[data-phase="up"]      { --accent: var(--ember); }
[data-phase="waking"]  { --accent: var(--ember-dim); }
[data-phase="down"]    { --accent: var(--blood); }
[data-phase="loading"] { --accent: var(--cold); }
[data-phase="error"]   { --accent: var(--cold); }

body:has([data-phase="up"])     { --accent: var(--ember); }
body:has([data-phase="waking"]) { --accent: var(--ember-dim); }
body:has([data-phase="down"])   { --accent: var(--blood); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Author-level display rules (e.g. .tally{display:grid}) outrank the browser's
   [hidden]{display:none}, so el.hidden alone would not hide anything. */
[hidden] { display: none !important; }