/* ══════════════════ ΕΠΤΑΠΥΛΟΣ — Connect Four · The Seven Gates ══════════════════
   Connect-4 reimagined as the siege of seven-gated Thebes. The board's 7
   columns ARE the seven gates; you and a rival champion answer to earn the
   right to cast a bronze seal into a gate. Align four to breach the wall.
   Quiz-to-move (triliza) core, plus three earned twists:
     · ΔΙΠΛΟ  (Double)  — cast two seals in one move        [fast answer]
     · ΠΥΡ    (Pyre)    — burn out one enemy seal, gravity pulls down  [3-streak]
     · ΑΣΠΙΣ  (Aegis)   — wedge a neutral war-stone to wall a line     [5-streak]

   ART DIRECTION — "Bronze & Stone": torch-lit night siege. Carved-stone
   board framed in bronze, embossed bronze seals vs sea-glazed rival seals,
   Greek-key meander accents, ember ambience, wall-crack victory.
   Palette: bronze terracotta (you) vs aegean blue (rival) on dark Hearth.
══════════════════════════════════════════════════════════════════════════════ */

#hep-overlay {
  --hep-ink:#0A0907;
  --hep-me:#D97B5C;   --hep-me-dk:#B7512F;
  --hep-op:#5E8B96;   --hep-op-dk:#3C6670;
  --hep-stone:#8E8270;
  --hep-flame:#E8A15A; --hep-flame-hot:#FFD9A0;
  --hep-marble:#D8CCB7;
  /* Greek-key meander, drawn procedurally (data-URI SVG) */
  --hep-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath fill='none' stroke='%23C4A448' stroke-width='1.6' d='M1 11 V1 H13 V11 H5 V5 H9 V8'/%3E%3C/svg%3E");
}
#hep-overlay .overlay-topbar {
  background:rgba(10,9,7,0.92);
  border-bottom:1px solid rgba(196,164,72,0.28);
  box-shadow:0 1px 0 rgba(0,0,0,0.6), 0 6px 24px rgba(0,0,0,0.35);
}
#hep-overlay .overlay-title {
  color:var(--sym-terra-lt);
  text-shadow:0 0 16px rgba(217,123,92,0.42);
}

#hep-wrap {
  min-height:100%;
  background:
    radial-gradient(1000px 560px at 50% -12%, rgba(217,123,92,0.14), transparent 62%),
    radial-gradient(820px 640px at 88% 112%, rgba(94,139,150,0.11), transparent 60%),
    linear-gradient(180deg, #140D09, #0A0907 55%, #0C0806);
  color:var(--sym-cream); font-family:var(--sym-sans); position:relative; overflow:hidden;
}

/* ────────────────── Torch-lit ambience (presentation only) ────────────────── */
.hep-ambient { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hep-ambient::before, .hep-ambient::after {
  content:''; position:absolute; width:52vmax; height:52vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(224,130,58,0.13), rgba(224,130,58,0.05) 42%, transparent 64%);
}
.hep-ambient::before { left:-16vmax; bottom:-22vmax; }
.hep-ambient::after  { right:-16vmax; bottom:-24vmax; background:radial-gradient(circle, rgba(224,130,58,0.11), rgba(158,59,46,0.04) 45%, transparent 64%); }
.hep-ember {
  position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--hep-flame-hot), var(--hep-flame) 45%, rgba(224,106,58,0) 75%);
  box-shadow:0 0 6px 1px rgba(232,161,90,0.35);
  opacity:0; will-change:transform,opacity;
  animation:hep-ember-rise linear infinite;
}
@keyframes hep-ember-rise {
  0%   { transform:translate(0,0) scale(1); opacity:0; }
  6%   { opacity:var(--glow,0.8); }
  60%  { opacity:calc(var(--glow,0.8) * 0.55); }
  100% { transform:translate(var(--dx,0px), -108vh) scale(0.15); opacity:0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hep-ambient::before { animation:hep-torch 3.4s ease-in-out infinite alternate; }
  .hep-ambient::after  { animation:hep-torch 2.7s ease-in-out -1.4s infinite alternate; }
}
@keyframes hep-torch { from { opacity:0.72; transform:scale(1); } to { opacity:1; transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hep-ember { display:none; } }

.hep-screen { display:none; flex-direction:column; min-height:calc(100vh - 54px); min-height:calc(100dvh - 54px); padding:clamp(16px,3vw,32px); position:relative; z-index:1; }
.hep-screen.active { display:flex; }
@media (prefers-reduced-motion: no-preference) {
  .hep-screen.active { animation:hep-fade .4s ease; }
}
/* transform-only entrance — content stays visible even if the animation is
   paused at frame 0 (static capture / print), so it never blanks out. */
@keyframes hep-fade { from{transform:translateY(10px);} to{transform:none;} }

/* ────────────────── Intro ────────────────── */
#hep-screen-intro { align-items:center; justify-content:center; text-align:center; gap:6px; }
.hep-crest {
  width:132px; height:132px; margin-bottom:2px;
  filter:drop-shadow(0 10px 34px rgba(217,123,92,0.42)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
@media (prefers-reduced-motion: no-preference) {
  .hep-crest { animation:hep-crest-sway 5.5s ease-in-out infinite; }
}
@keyframes hep-crest-sway { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hep-logo {
  font-family:var(--sym-display); font-weight:700;
  font-size:clamp(38px,6vw,66px); letter-spacing:0.1em; line-height:1.05;
  background:linear-gradient(180deg, #F4D9B0 4%, var(--sym-terra-lt) 38%, var(--hep-me-dk) 82%, #7E3418);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--sym-terra-lt);
  filter:drop-shadow(0 0 26px rgba(217,123,92,0.35)) drop-shadow(0 2px 0 rgba(0,0,0,0.55));
}
@media (prefers-reduced-motion: no-preference) {
  #hep-screen-intro.active .hep-logo { animation:hep-logo-in .8s cubic-bezier(.2,.8,.25,1) both; }
}
@keyframes hep-logo-in { from { letter-spacing:0.42em; transform:translateY(6px); } to { letter-spacing:0.1em; transform:none; } }
.hep-logo-en { font-family:var(--sym-serif); font-style:italic; font-size:20px; color:var(--sym-gold-lt); margin-bottom:2px; }
.hep-meander {
  width:min(300px,72vw); height:12px; margin:6px auto 10px;
  background:var(--hep-meander) repeat-x center / 14px 12px;
  opacity:0.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hep-intro-txt { font-family:var(--sym-serif); font-size:18px; line-height:1.55; color:var(--sym-stone); max-width:560px; margin-bottom:14px; }
.hep-intro-txt b { color:var(--sym-cream); font-style:normal; }

/* staggered rise of intro blocks */
@media (prefers-reduced-motion: no-preference) {
  #hep-screen-intro.active > * { animation:hep-rise .55s cubic-bezier(.2,.8,.3,1) both; }
  #hep-screen-intro.active > *:nth-child(2) { animation-delay:.05s; }
  #hep-screen-intro.active > *:nth-child(3) { animation-delay:.09s; }
  #hep-screen-intro.active > *:nth-child(4) { animation-delay:.13s; }
  #hep-screen-intro.active > *:nth-child(5) { animation-delay:.17s; }
  #hep-screen-intro.active > *:nth-child(6) { animation-delay:.21s; }
  #hep-screen-intro.active > *:nth-child(7) { animation-delay:.25s; }
  #hep-screen-intro.active > *:nth-child(8) { animation-delay:.29s; }
  #hep-screen-intro.active > *:nth-child(9) { animation-delay:.33s; }
  #hep-screen-intro.active > *:nth-child(10){ animation-delay:.37s; }
}
@keyframes hep-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* power legend on the cover */
.hep-powers-legend { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:640px; margin-bottom:18px; }
.hep-pl {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border:1px solid rgba(196,164,72,0.16); border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.16));
  box-shadow:inset 0 1px 0 rgba(244,217,176,0.06);
  transition:border-color .25s, transform .25s;
}
.hep-pl:hover { border-color:rgba(196,164,72,0.45); transform:translateY(-2px); }
.hep-pl-glyph {
  width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; font-size:16px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.45), 0 2px 5px rgba(0,0,0,0.4);
}
.hep-pl-txt { text-align:left; }
.hep-pl-name { display:block; font-family:var(--sym-display); font-size:14px; letter-spacing:1px; color:var(--sym-cream); text-transform:uppercase; line-height:1.1; }
.hep-pl-how { display:block; font-family:var(--sym-mono); font-size:9.5px; letter-spacing:0.5px; color:var(--sym-stone); margin-top:2px; }

/* champion (difficulty) pick */
.hep-pick-lbl {
  font-family:var(--sym-mono); font-size:11px; letter-spacing:3px; color:var(--sym-gold-lt);
  text-transform:uppercase; margin-bottom:10px; opacity:0.85;
  display:flex; align-items:center; gap:12px;
}
.hep-pick-lbl::before, .hep-pick-lbl::after {
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(196,164,72,0.55));
}
.hep-pick-lbl::after { background:linear-gradient(90deg, rgba(196,164,72,0.55), transparent); }

/* setup options — the variants/tweaks beyond difficulty */
.hep-powers-legend.dim { opacity:0.3; }
.hep-setup { display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; max-width:680px; margin-bottom:22px; }
.hep-opt-group { display:flex; flex-direction:column; gap:7px; align-items:center; }
.hep-opt-label { font-family:var(--sym-mono); font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--sym-stone); }
.hep-seg {
  display:inline-flex; border:1px solid rgba(196,164,72,0.22); border-radius:6px; overflow:hidden;
  background:rgba(0,0,0,0.28); box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
}
.hep-seg button {
  background:transparent; border:none; border-left:1px solid rgba(240,235,224,0.08);
  color:var(--sym-stone); font-family:var(--sym-display); font-size:13px; letter-spacing:0.5px;
  padding:8px 14px; cursor:pointer; transition:background .18s, color .18s, box-shadow .18s; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.05; min-width:60px;
}
.hep-seg button:first-child { border-left:none; }
.hep-seg button small { font-family:var(--sym-mono); font-size:8px; letter-spacing:0.5px; opacity:0.75; text-transform:none; }
.hep-seg button:hover { background:rgba(240,235,224,0.06); color:var(--sym-cream); }
.hep-seg button.on {
  background:linear-gradient(180deg, var(--sym-terra-lt), var(--sym-terra-dk));
  color:#1A130C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(90,36,21,0.5);
  text-shadow:0 1px 0 rgba(255,255,255,0.22);
}
.hep-seg button.on small { opacity:0.7; }

.hep-champs { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.hep-champ {
  width:132px; padding:15px 10px 13px; border:1px solid rgba(240,235,224,0.13); border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s, border-color .22s, background .22s, box-shadow .22s;
}
.hep-champ::before { /* sheen sweep */
  content:''; position:absolute; top:0; bottom:0; width:46%; left:-70%;
  background:linear-gradient(105deg, transparent, rgba(244,217,176,0.10), transparent);
  transform:skewX(-18deg); transition:left .5s ease; pointer-events:none;
}
.hep-champ:hover { transform:translateY(-4px); border-color:var(--sym-stone); box-shadow:0 10px 26px rgba(0,0,0,0.45); }
.hep-champ:hover::before { left:130%; }
.hep-champ.on {
  border-color:var(--sym-terra); background:rgba(217,123,92,0.12);
  box-shadow:0 0 0 1px var(--sym-terra) inset, 0 8px 30px rgba(217,123,92,0.18);
}
.hep-champ-seal {
  width:50px; height:50px; margin:0 auto 9px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sym-display); font-weight:700; font-size:23px; color:#0A0907;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.5), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 38% 30%, var(--sym-aegean-lt), var(--hep-op-dk));
  box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.45), 0 5px 16px rgba(0,0,0,0.45);
}
/* tier rings: warden stone · warlord bronze · demigod gold */
.hep-champ:nth-child(1) .hep-champ-seal { box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 2px rgba(142,130,112,0.5), 0 5px 16px rgba(0,0,0,0.45); }
.hep-champ:nth-child(2) .hep-champ-seal { box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 2px rgba(217,123,92,0.6), 0 5px 16px rgba(0,0,0,0.45); }
.hep-champ:nth-child(3) .hep-champ-seal { box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 2px rgba(227,199,102,0.75), 0 0 14px rgba(227,199,102,0.35), 0 5px 16px rgba(0,0,0,0.45); }
.hep-champ-name { font-family:var(--sym-display); font-size:15px; letter-spacing:1px; color:var(--sym-cream); text-transform:uppercase; }
.hep-champ-tier { font-family:var(--sym-mono); font-size:9px; letter-spacing:1.5px; color:var(--sym-stone); margin-top:3px; }

/* ────────────────── Game HUD ────────────────── */
.hep-hud { display:flex; align-items:stretch; justify-content:center; gap:10px; margin-bottom:12px; max-width:600px; width:100%; margin-left:auto; margin-right:auto; }
.hep-side {
  flex:1; display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:9px;
  border:1px solid rgba(240,235,224,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  position:relative; overflow:hidden;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.hep-side::after { /* torch underline when active */
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:2px; border-radius:2px;
  background:currentColor; opacity:0; transform:scaleX(0.3); transition:opacity .3s, transform .35s;
}
.hep-side.active::after { opacity:0.9; transform:scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .hep-side.active::after { animation:hep-underglow 1.6s ease-in-out infinite; }
}
@keyframes hep-underglow { 0%,100%{ box-shadow:0 0 6px currentColor; } 50%{ box-shadow:0 0 14px currentColor; } }
.hep-side.active { box-shadow:0 0 0 1px currentColor inset, 0 6px 22px rgba(0,0,0,0.35); }
.hep-side.me { color:var(--hep-me); }
.hep-side.me.active { background:rgba(217,123,92,0.13); border-color:var(--hep-me); }
.hep-side.op { color:var(--hep-op); flex-direction:row-reverse; text-align:right; }
.hep-side.op.active { background:rgba(94,139,150,0.13); border-color:var(--hep-op); }
.hep-side-seal {
  width:38px; height:38px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sym-display); font-weight:700; font-size:17px; color:#0A0907;
  box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -3px 5px rgba(0,0,0,0.45), 0 3px 8px rgba(0,0,0,0.4);
}
.hep-side.me .hep-side-seal {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,241,224,0.6), rgba(255,241,224,0) 40%),
    radial-gradient(circle at 38% 30%, var(--sym-terra-lt), var(--hep-me-dk));
}
.hep-side.op .hep-side-seal {
  background:
    radial-gradient(circle at 34% 26%, rgba(230,248,252,0.55), rgba(230,248,252,0) 40%),
    radial-gradient(circle at 38% 30%, var(--sym-aegean-lt), var(--hep-op-dk));
}
.hep-side-txt { display:flex; flex-direction:column; min-width:0; }
.hep-side-name { font-family:var(--sym-display); font-size:14px; letter-spacing:0.5px; color:var(--sym-cream); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hep-side-sub { font-family:var(--sym-mono); font-size:9.5px; letter-spacing:1px; color:var(--sym-stone); }
.hep-vs {
  align-self:center; width:34px; height:34px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--sym-display); font-size:11px; letter-spacing:1px; color:var(--sym-gold-lt);
  border:1px solid rgba(196,164,72,0.4);
  background:radial-gradient(circle at 38% 30%, rgba(196,164,72,0.22), rgba(0,0,0,0.4));
  box-shadow:inset 0 1px 2px rgba(244,217,176,0.18), 0 2px 8px rgba(0,0,0,0.45);
}

.hep-turn-banner { text-align:center; min-height:22px; margin-bottom:10px; font-family:var(--sym-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; transition:color .3s; text-shadow:0 1px 0 rgba(0,0,0,0.6); }
.hep-turn-banner::before, .hep-turn-banner::after { /* spear-line flourishes */
  content:''; display:inline-block; width:30px; height:1px; vertical-align:middle;
  background:linear-gradient(90deg, transparent, currentColor); opacity:0.55;
  margin:0 12px 3px 0;
}
.hep-turn-banner::after { background:linear-gradient(90deg, currentColor, transparent); margin:0 0 3px 12px; }
.hep-turn-banner:empty::before, .hep-turn-banner:empty::after { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .hep-turn-banner.flip { animation:hep-banner-in .4s cubic-bezier(.2,.8,.3,1); }
}
@keyframes hep-banner-in { from { opacity:0; transform:translateY(-6px); letter-spacing:4px; } to { opacity:1; transform:none; letter-spacing:2px; } }

/* ────────────────── Siege backdrop — night sky & the distant walls of Thebes ──────────────────
   Layers drift at different depths against the cursor (--hep-parx/y set by JS,
   via the standalone `translate` property so keyframe transforms stay intact). */
#hep-overlay { --hep-parx:0; --hep-pary:0; }
.hep-siege-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hep-siege-bg i { position:absolute; display:block; }
.hep-siege-bg::before { translate:calc(var(--hep-parx) * -7px) calc(var(--hep-pary) * -3px); transition:translate .55s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.hep-siege-bg .sg-moon { translate:calc(var(--hep-parx) * -4px) calc(var(--hep-pary) * -2px); transition:translate .7s cubic-bezier(.2,.7,.3,1); }
.hep-siege-bg .sg-smoke { translate:calc(var(--hep-parx) * -9px) calc(var(--hep-pary) * -4px); transition:translate .6s cubic-bezier(.2,.7,.3,1); }
.hep-siege-bg::after,
.hep-siege-bg .sg-fire { translate:calc(var(--hep-parx) * -13px) calc(var(--hep-pary) * -6px); transition:translate .5s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .hep-siege-bg::before, .hep-siege-bg::after,
  .hep-siege-bg .sg-moon, .hep-siege-bg .sg-smoke, .hep-siege-bg .sg-fire { translate:none; }
}
.hep-siege-bg::before { /* scatter of stars over the siege camp */
  content:''; position:absolute; inset:0 0 38% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 22%, rgba(244,217,176,0.85), transparent 60%),
    radial-gradient(1px 1px at 27% 9%,  rgba(244,217,176,0.6), transparent 60%),
    radial-gradient(1.8px 1.8px at 41% 30%, rgba(216,204,183,0.55), transparent 60%),
    radial-gradient(1px 1px at 56% 12%, rgba(244,217,176,0.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 26%, rgba(216,204,183,0.6), transparent 60%),
    radial-gradient(1px 1px at 79% 8%,  rgba(244,217,176,0.65), transparent 60%),
    radial-gradient(1.7px 1.7px at 90% 20%, rgba(244,217,176,0.55), transparent 60%),
    radial-gradient(1px 1px at 18% 44%, rgba(216,204,183,0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 42%, rgba(216,204,183,0.5), transparent 60%),
    radial-gradient(1px 1px at 6% 8%,   rgba(244,217,176,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 18%, rgba(244,235,214,0.45), transparent 60%),
    radial-gradient(1px 1px at 48% 40%, rgba(216,204,183,0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 6%, rgba(244,217,176,0.55), transparent 60%),
    radial-gradient(1px 1px at 95% 33%, rgba(216,204,183,0.45), transparent 60%);
  opacity:0.75;
}
@media (prefers-reduced-motion: no-preference) {
  .hep-siege-bg::before { animation:hep-starbreathe 7s ease-in-out infinite alternate; }
}
@keyframes hep-starbreathe { from { opacity:0.62; } to { opacity:0.9; } }
.hep-siege-bg::after { /* seven-towered silhouette on the horizon, watch-fires burning */
  content:''; position:absolute; left:0; right:0; bottom:0; height:168px; opacity:0.9;
  background:
    radial-gradient(58% 110px at 50% 100%, rgba(224,130,58,0.20), transparent 72%),
    radial-gradient(2px 2px at 13.5% calc(100% - 74px), rgba(255,196,110,0.95), transparent 65%),
    radial-gradient(2px 2px at 31.2% calc(100% - 52px), rgba(255,196,110,0.85), transparent 65%),
    radial-gradient(2px 2px at 68.4% calc(100% - 62px), rgba(255,196,110,0.9), transparent 65%),
    radial-gradient(2px 2px at 87.3% calc(100% - 86px), rgba(255,196,110,0.95), transparent 65%),
    linear-gradient(180deg, rgba(48,38,28,0.55), #0B0805 26%) 12% 100% / 42px 90px no-repeat,
    linear-gradient(180deg, rgba(48,38,28,0.5), #0B0805 30%) 30% 100% / 30px 64px no-repeat,
    linear-gradient(180deg, rgba(48,38,28,0.45), #0B0805 32%) 52% 100% / 26px 52px no-repeat,
    linear-gradient(180deg, rgba(48,38,28,0.5), #0B0805 28%) 69% 100% / 36px 76px no-repeat,
    linear-gradient(180deg, rgba(48,38,28,0.55), #0B0805 24%) 88% 100% / 46px 102px no-repeat,
    repeating-linear-gradient(90deg, #0B0805 0 15px, transparent 15px 27px) left calc(100% - 34px) / 100% 9px no-repeat,
    linear-gradient(180deg, #0B0805, #070503) left bottom / 100% 34px no-repeat;
}
.hep-siege-bg .sg-moon { /* waning crescent over Thebes */
  top:30px; right:9%; width:72px; height:72px; border-radius:50%; opacity:0.42;
  background:radial-gradient(circle at 40% 36%, #F7EFDC, #D8CCB7 58%, #A99D87);
  -webkit-mask-image:radial-gradient(circle at 68% 38%, transparent 50%, #000 55%);
          mask-image:radial-gradient(circle at 68% 38%, transparent 50%, #000 55%);
  filter:drop-shadow(0 0 22px rgba(244,235,214,0.4));
}
.hep-siege-bg .sg-smoke { /* siege smoke drifting across the camp */
  bottom:92px; left:-28%; width:72%; height:96px; border-radius:50%;
  background:radial-gradient(50% 55% at 50% 50%, rgba(122,100,80,0.15), transparent 70%);
  filter:blur(15px);
}
.hep-siege-bg .sg-smoke.s2 {
  bottom:126px; left:auto; right:-26%; width:64%; height:74px;
  background:radial-gradient(50% 55% at 50% 50%, rgba(96,88,76,0.12), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hep-siege-bg .sg-smoke { animation:hep-smoke-drift 44s ease-in-out infinite alternate; }
  .hep-siege-bg .sg-smoke.s2 { animation:hep-smoke-drift 58s ease-in-out -21s infinite alternate-reverse; }
}
@keyframes hep-smoke-drift { from { transform:translateX(-4%); } to { transform:translateX(52%); } }
.hep-siege-bg .sg-fire { /* pulsing halos over the watch-fire embers */
  z-index:1; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 45% 40%, #FFE9C2, #E8A15A 55%, rgba(232,161,90,0));
  box-shadow:0 0 12px 4px rgba(255,178,92,0.5);
  opacity:0.85;
}
.hep-siege-bg .sg-fire.f1 { left:calc(13.5% - 2px); bottom:72px; }
.hep-siege-bg .sg-fire.f2 { left:calc(31.2% - 2px); bottom:50px; }
.hep-siege-bg .sg-fire.f3 { left:calc(68.4% - 2px); bottom:60px; }
.hep-siege-bg .sg-fire.f4 { left:calc(87.3% - 2px); bottom:84px; }
@media (prefers-reduced-motion: no-preference) {
  .hep-siege-bg .sg-fire { animation:hep-firepulse 2.2s ease-in-out infinite; }
  .hep-siege-bg .sg-fire.f2 { animation-delay:-0.8s; animation-duration:2.6s; }
  .hep-siege-bg .sg-fire.f3 { animation-delay:-1.4s; animation-duration:1.9s; }
  .hep-siege-bg .sg-fire.f4 { animation-delay:-0.4s; animation-duration:2.4s; }
}
@keyframes hep-firepulse {
  0%,100% { opacity:0.7; box-shadow:0 0 9px 2px rgba(255,178,92,0.4); }
  50%     { opacity:1;   box-shadow:0 0 17px 6px rgba(255,178,92,0.6); }
}

/* ────────────────── Board — carved stone in a bronze frame ────────────────── */
.hep-board-wrap { display:flex; justify-content:center; margin-bottom:14px; position:relative; }
.hep-board-wrap::before { /* torch pool behind the wall */
  content:''; position:absolute; left:50%; top:50%; width:150%; height:150%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(224,130,58,0.20), rgba(224,130,58,0.07) 46%, transparent 70%);
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference) {
  .hep-board-wrap::before { animation:hep-glowflicker 3.1s ease-in-out infinite; }
}

/* ────────────────── Siege stage — architecture around the board ────────────────── */
.hep-stage { position:absolute; inset:0; pointer-events:none; }
.hep-stage i { display:block; position:absolute; }

/* crenellated parapet behind the board crown */
.hep-parapet {
  position:absolute; left:-34px; right:-34px; top:-24px; height:26px;
  background:
    repeating-linear-gradient(90deg, rgba(244,217,176,0.26) 0 30px, transparent 30px 47px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(90,78,58,0.5) 0 30px, transparent 30px 47px) 0 2px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #2C251C 0 30px, transparent 30px 47px) top left / 100% 12px no-repeat,
    linear-gradient(180deg, rgba(244,217,176,0.10), transparent 40%) bottom left / 100% 14px no-repeat,
    linear-gradient(180deg, #332B21, #1C1712) bottom left / 100% 14px no-repeat;
  border-radius:2px;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

/* flanking stone pilasters — the gateposts of the seven gates */
.hep-pilaster { position:absolute; top:-20px; bottom:-14px; width:54px; }
.hep-pilaster.left { left:-72px; } .hep-pilaster.right { right:-72px; }
.hep-pilaster .pl-cap {
  left:-4px; right:-4px; top:0; height:15px;
  background:
    linear-gradient(180deg, rgba(255,236,190,0.14), transparent 45%),
    linear-gradient(180deg, #4E4335 0%, #363023 70%, #282219);
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(244,217,176,0.25),
    inset 0 -2px 0 rgba(196,164,72,0.18),
    0 3px 7px rgba(0,0,0,0.6);
}
.hep-pilaster .pl-shaft {
  left:5px; right:5px; top:14px; bottom:14px;
  background:
    linear-gradient(180deg, rgba(232,161,90,0.20), rgba(232,161,90,0.05) 30%, transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,0.55), transparent 24%, rgba(244,217,176,0.13) 46%, transparent 72%, rgba(0,0,0,0.52)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.38) 0 2.5px, rgba(255,236,204,0.05) 2.5px 4px, transparent 4px 10px),
    linear-gradient(180deg, #3D3428 0%, #2D261E 55%, #211B15);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4), 0 12px 26px rgba(0,0,0,0.55);
}
.hep-pilaster .pl-base {
  left:-5px; right:-5px; bottom:0; height:16px;
  background:
    linear-gradient(180deg, rgba(244,217,176,0.10), transparent 40%),
    linear-gradient(180deg, #383024, #1D1812);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(244,217,176,0.14), 0 6px 12px rgba(0,0,0,0.55);
}

/* torches mounted on the gateposts */
.hep-torch { position:absolute; top:-82px; width:44px; height:82px; }
.hep-torch.left { left:-67px; } .hep-torch.right { right:-67px; }
.hep-torch .tc-glow {
  left:50%; bottom:2px; width:210px; height:210px; margin-left:-105px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,161,90,0.36), rgba(232,161,90,0.12) 44%, transparent 70%);
  mix-blend-mode:screen;
}
.hep-torch .tc-stem {
  left:50%; bottom:0; width:6px; height:30px; margin-left:-3px;
  background:linear-gradient(180deg, #83612F, #402D14);
  border-radius:2px;
  box-shadow:inset 1px 0 0 rgba(255,224,160,0.35), 0 2px 4px rgba(0,0,0,0.5);
}
.hep-torch .tc-cup {
  left:50%; bottom:26px; width:24px; height:13px; margin-left:-12px;
  background:radial-gradient(circle at 50% -12%, #E3C766 0%, #8A6A2A 58%, #4A3415);
  border-radius:3px 3px 12px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.65), inset 0 1px 1px rgba(255,236,190,0.55);
}
.hep-torch .tc-flame {
  left:50%; bottom:34px; width:22px; height:38px; margin-left:-11px;
  background:radial-gradient(50% 62% at 50% 78%, #FFF3DE 0%, #FFD9A0 26%, #E8A15A 52%, rgba(217,106,40,0.6) 72%, rgba(158,59,30,0) 92%);
  border-radius:50% 50% 46% 54% / 62% 62% 38% 38%;
  transform-origin:50% 100%;
  filter:blur(0.4px);
}
.hep-torch .tc-flame.f2 {
  width:12px; height:23px; margin-left:-6px; bottom:36px;
  background:radial-gradient(50% 60% at 50% 82%, #FFFDF5 0%, #FFE9C2 42%, rgba(255,190,110,0) 85%);
  filter:none;
}
.hep-torch .tc-spark {
  width:3px; height:3px; border-radius:50%; left:50%; bottom:52px;
  background:radial-gradient(circle at 40% 35%, #FFE9C2, #E8A15A 60%, rgba(232,161,90,0));
  opacity:0;
}
@media (prefers-reduced-motion: no-preference) {
  .hep-torch .tc-flame { animation:hep-flame 0.58s ease-in-out infinite alternate; }
  .hep-torch .tc-flame.f2 { animation:hep-flame2 0.44s ease-in-out infinite alternate; }
  .hep-torch .tc-glow { animation:hep-glowflicker 2.3s ease-in-out infinite; }
  .hep-torch.right .tc-flame { animation-delay:-0.29s; }
  .hep-torch.right .tc-flame.f2 { animation-delay:-0.2s; }
  .hep-torch.right .tc-glow { animation-delay:-1.2s; }
  .hep-torch .tc-spark { animation:hep-tspark 2.5s linear infinite; }
  .hep-torch .tc-spark.s2 { animation-delay:0.9s; animation-duration:3s; }
  .hep-torch .tc-spark.s3 { animation-delay:1.7s; animation-duration:2.2s; }
  .hep-torch.right .tc-spark { animation-delay:0.4s; }
  .hep-torch.right .tc-spark.s2 { animation-delay:1.3s; }
  .hep-torch.right .tc-spark.s3 { animation-delay:2s; }
}
@keyframes hep-flame {
  0%   { transform:scale(1,1) rotate(-2.5deg); }
  100% { transform:scale(0.9,1.14) rotate(2.5deg); }
}
@keyframes hep-flame2 { 0%{ transform:scaleY(1); } 100%{ transform:scaleY(1.24) translateY(-2px); } }
@keyframes hep-glowflicker {
  0%,100% { opacity:0.82; transform:scale(1); }
  28%     { opacity:1;    transform:scale(1.06); }
  54%     { opacity:0.72; }
  76%     { opacity:0.94; transform:scale(1.03); }
}
@keyframes hep-tspark {
  0%   { transform:translate(0,0) scale(1); opacity:0; }
  8%   { opacity:0.9; }
  100% { transform:translate(9px,-58px) scale(0.35); opacity:0; }
}
/* a seal slamming home makes the gatepost torches surge (class set by JS) */
.hep-torch .tc-flame, .hep-torch .tc-glow { transition:filter .22s ease-out; }
.hep-torch.surge .tc-flame { filter:brightness(1.4) blur(0.4px); }
.hep-torch.surge .tc-flame.f2 { filter:brightness(1.35); }
.hep-torch.surge .tc-glow { filter:brightness(1.45) saturate(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .hep-torch.surge .tc-glow { animation:hep-torch-surge .6s cubic-bezier(.2,.7,.3,1); }
}
@keyframes hep-torch-surge {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.18); }
  100% { transform:scale(1); }
}

/* torchlight bouncing off the board's bronze frame */
.hep-bounce {
  position:absolute; top:-4px; bottom:-4px; width:124px; mix-blend-mode:screen;
  background:radial-gradient(130% 46% at 0% 5%, rgba(232,161,90,0.34), rgba(232,161,90,0.11) 48%, transparent 74%);
  border-radius:14px;
}
.hep-bounce.left { left:-2px; }
.hep-bounce.right { right:-2px; transform:scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .hep-bounce { animation:hep-glowflicker 2.7s ease-in-out infinite; }
  .hep-bounce.right { animation-delay:-1.35s; }
}

/* the wall stands on scorched ground */
.hep-ground {
  position:absolute; left:-82px; right:-82px; bottom:-32px; height:50px;
  background:
    radial-gradient(52% 100% at 50% 0%, rgba(0,0,0,0.7), transparent 74%),
    radial-gradient(36% 70% at 18% 8%, rgba(232,161,90,0.15), transparent 70%),
    radial-gradient(36% 70% at 82% 8%, rgba(232,161,90,0.15), transparent 70%);
  border-radius:50%;
  filter:blur(2px);
}

@media (max-width:920px) {
  .hep-pilaster, .hep-torch, .hep-bounce { display:none; }
  .hep-parapet { left:-6px; right:-6px; }
  .hep-ground { left:-20px; right:-20px; }
}
.hep-board {
  position:relative; width:min(460px,92vw);
  padding:13px 13px 11px; border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,228,190,0.11), rgba(255,228,190,0.03) 30%, transparent 56%),
    radial-gradient(130% 90% at 50% 118%, rgba(232,161,90,0.10), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.96 0 0 0 0 0.85 0 0 0 0 0.69 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1.5px, rgba(255,236,204,0.045) 1.5px 3px, transparent 3px 54px),
    linear-gradient(180deg, #473C30 0%, #362D24 55%, #292219 100%);
  border:1px solid #0E0B08;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.66),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(244,217,176,0.22),
    inset 0 -3px 6px rgba(0,0,0,0.55);
}
.hep-board::before { /* bronze inner frame, riveted at the corners */
  content:''; position:absolute; inset:5px; border-radius:10px; pointer-events:none;
  border:2px solid rgba(196,164,72,0.42);
  background:
    radial-gradient(5px 5px at 11px 11px, rgba(244,217,176,0.55) 24%, rgba(94,62,28,0.85) 52%, transparent 72%),
    radial-gradient(5px 5px at calc(100% - 11px) 11px, rgba(244,217,176,0.55) 24%, rgba(94,62,28,0.85) 52%, transparent 72%),
    radial-gradient(5px 5px at 11px calc(100% - 11px), rgba(244,217,176,0.5) 24%, rgba(94,62,28,0.85) 52%, transparent 72%),
    radial-gradient(5px 5px at calc(100% - 11px) calc(100% - 11px), rgba(244,217,176,0.5) 24%, rgba(94,62,28,0.85) 52%, transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,236,190,0.28),
    inset 0 0 0 1px rgba(70,44,18,0.5),
    inset 0 -1px 0 rgba(255,224,170,0.10),
    0 1px 0 rgba(255,236,190,0.12),
    0 0 0 1px rgba(0,0,0,0.45),
    0 0 18px rgba(232,161,90,0.06);
  transition:border-color .4s, box-shadow .4s;
}
.hep-board::after { /* stone vignette — corners fall into shadow */
  content:''; position:absolute; inset:5px; border-radius:10px; pointer-events:none;
  background:
    radial-gradient(90% 46% at 50% -8%, rgba(255,214,160,0.07), transparent 62%),
    radial-gradient(130% 120% at 50% 32%, transparent 54%, rgba(0,0,0,0.32) 100%);
}
/* the wall "wakes" when it is your cast — torchlight catches the bronze frame */
.hep-board:has(.hep-grid.droppable) {
  box-shadow:
    0 30px 70px rgba(0,0,0,0.66),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 44px rgba(232,161,90,0.18),
    inset 0 1px 0 rgba(244,217,176,0.26),
    inset 0 -3px 6px rgba(0,0,0,0.55);
}
.hep-board:has(.hep-grid.droppable)::before {
  border-color:rgba(217,181,88,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,236,190,0.36),
    inset 0 0 0 1px rgba(70,44,18,0.5),
    inset 0 0 30px rgba(232,161,90,0.10),
    0 1px 0 rgba(255,236,190,0.16),
    0 0 0 1px rgba(0,0,0,0.45),
    0 0 26px rgba(232,161,90,0.16);
}
@media (prefers-reduced-motion: no-preference) {
  .hep-board:has(.hep-grid.droppable)::before { animation:hep-frame-breathe 2.6s ease-in-out infinite; }
}
@keyframes hep-frame-breathe {
  0%,100% { border-color:rgba(217,181,88,0.55); }
  50%     { border-color:rgba(240,206,120,0.75); }
}
/* gate plaques above each column — carved stone lintel strip */
.hep-gates {
  display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-bottom:7px; position:relative; z-index:1;
  padding:5px 0 4px; border-radius:8px 8px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255,236,204,0.08), rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.22)),
    linear-gradient(180deg, #40362B, #2C251D);
  box-shadow:
    inset 0 1px 0 rgba(244,217,176,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 5px rgba(0,0,0,0.4);
}
.hep-gate-no {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--sym-mono); font-size:10px; letter-spacing:1px;
  color:rgba(227,199,102,0.78); padding-bottom:1px;
  text-shadow:0 1px 0 rgba(0,0,0,0.7);
  transition:color .25s;
}
.hep-gate-no + .hep-gate-no { box-shadow:-1px 0 0 rgba(0,0,0,0.3), -2px 0 0 rgba(244,217,176,0.05); }
.hep-arch { /* carved gate arch — doorway of torch-lit dark */
  display:block; width:17px; height:11px;
  border:2px solid rgba(196,164,72,0.72); border-bottom:none;
  border-radius:9px 9px 0 0;
  background:linear-gradient(180deg, rgba(5,4,3,0.9), rgba(224,130,58,0.22));
  box-shadow:0 1px 0 rgba(0,0,0,0.55), 0 -1px 0 rgba(255,236,190,0.10), inset 0 1px 2px rgba(0,0,0,0.65);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.hep-gate-name { /* the historical gate name, carved small */
  font-size:7px; letter-spacing:0.5px; line-height:1;
  color:rgba(216,204,183,0.52);
  text-shadow:0 1px 0 rgba(0,0,0,0.7);
  transition:color .25s;
}
@media (max-width:620px){ .hep-gate-name { display:none; } }
/* hovered gate catches the torchlight */
.hep-gate-no.lit { color:var(--hep-flame-hot); text-shadow:0 0 10px rgba(255,205,130,0.5), 0 1px 0 rgba(0,0,0,0.7); }
.hep-gate-no.lit .hep-arch {
  border-color:rgba(255,217,160,0.95);
  background:linear-gradient(180deg, rgba(232,161,90,0.65), rgba(255,217,160,0.25));
  box-shadow:0 0 14px rgba(255,205,130,0.65), inset 0 1px 2px rgba(0,0,0,0.4);
}
.hep-gate-no.lit .hep-gate-name { color:rgba(255,217,160,0.85); }
/* the gate the rival casts into flares sea-glaze for a beat (class set by JS) */
.hep-gate-no.op-cast { color:var(--sym-aegean-lt); text-shadow:0 0 10px rgba(127,176,188,0.55), 0 1px 0 rgba(0,0,0,0.7); }
.hep-gate-no.op-cast .hep-arch {
  border-color:rgba(159,202,212,0.95);
  background:linear-gradient(180deg, rgba(94,139,150,0.6), rgba(159,202,212,0.22));
  box-shadow:0 0 14px rgba(127,176,188,0.65), inset 0 1px 2px rgba(0,0,0,0.4);
}
.hep-gate-no.op-cast .hep-gate-name { color:rgba(159,202,212,0.85); }
@media (prefers-reduced-motion: no-preference) {
  .hep-gate-no.op-cast .hep-arch { animation:hep-arch-glow-op 0.9s ease-in-out infinite; }
}
@keyframes hep-arch-glow-op {
  0%,100% { box-shadow:0 0 10px rgba(127,176,188,0.5), inset 0 1px 2px rgba(0,0,0,0.4); }
  50%     { box-shadow:0 0 20px rgba(159,202,212,0.8), inset 0 1px 2px rgba(0,0,0,0.4); }
}
@media (prefers-reduced-motion: no-preference) {
  .hep-gate-no.lit .hep-arch { animation:hep-arch-glow 1.3s ease-in-out infinite; }
}
@keyframes hep-arch-glow {
  0%,100% { box-shadow:0 0 10px rgba(255,205,130,0.5), inset 0 1px 2px rgba(0,0,0,0.4); }
  50%     { box-shadow:0 0 18px rgba(255,205,130,0.75), inset 0 1px 2px rgba(0,0,0,0.4); }
}
@media (prefers-reduced-motion: no-preference) {
  .hep-gate-no.hit { animation:hep-gate-hit .5s cubic-bezier(.2,.8,.3,1); }
}
@keyframes hep-gate-hit {
  0% { transform:translateY(0); color:var(--hep-flame-hot); }
  35% { transform:translateY(-4px) scale(1.25); color:var(--hep-flame-hot); }
  100% { transform:none; }
}
.hep-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative; }
.hep-grid::after { /* torchlight wash — ember pool rising from below, torch spill from the gateposts */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:screen; border-radius:0 0 8px 8px;
  background:
    radial-gradient(92% 46% at 50% 110%, rgba(232,161,90,0.17), rgba(232,161,90,0.05) 55%, transparent 76%),
    radial-gradient(48% 36% at -6% -8%, rgba(255,205,130,0.11), transparent 72%),
    radial-gradient(48% 36% at 106% -8%, rgba(255,205,130,0.11), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .hep-grid::after { animation:hep-wash-flicker 3.4s ease-in-out infinite; }
}
@keyframes hep-wash-flicker {
  0%,100% { opacity:0.8; }
  28%     { opacity:1; }
  55%     { opacity:0.72; }
  80%     { opacity:0.94; }
}
.hep-cell { aspect-ratio:1; position:relative; display:grid; place-items:center; cursor:pointer; }
/* fluted grooves between gate columns */
.hep-cell:not([data-c="0"]) { border-left:1px solid rgba(0,0,0,0.38); box-shadow:inset 1px 0 0 rgba(244,217,176,0.07); }
.hep-hole {
  width:80%; height:80%; border-radius:50%; position:relative;
  background:radial-gradient(circle at 50% 30%, #101619, #04070A 74%);
  box-shadow:
    inset 0 5px 9px rgba(0,0,0,0.85),
    inset 0 -2px 4px rgba(232,161,90,0.17),
    inset 2px 0 5px rgba(0,0,0,0.4),
    0 1px 0 rgba(244,217,176,0.10);
}
.hep-hole::after { /* counter-sunk bronze collar around each socket */
  content:''; position:absolute; inset:-3.5px; border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(196,164,72,0.17);
  box-shadow:
    0 1.5px 0 rgba(244,217,176,0.10),
    0 -1px 1px rgba(0,0,0,0.55),
    inset 0 1px 3px rgba(0,0,0,0.6);
}
/* placed seal — embossed bronze vs sea-glaze */
.hep-disc {
  position:absolute; width:80%; height:80%; border-radius:50%; left:10%; top:10%;
  display:grid; place-items:center;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -4px 7px rgba(0,0,0,0.5),
    0 3px 7px rgba(0,0,0,0.55);
}
.hep-disc::after { /* struck-coin emboss ring */
  content:''; position:absolute; inset:13%; border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(0,0,0,0.26);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.25), 0 1px 1px rgba(255,255,255,0.12);
}
.hep-disc::before { /* coin reeding — notched rim like a struck seal */
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(rgba(0,0,0,0.22) 0deg 4deg, rgba(255,255,255,0.10) 4deg 8deg, transparent 8deg 12deg);
  -webkit-mask-image:radial-gradient(circle, transparent 76%, #000 79%);
  mask-image:radial-gradient(circle, transparent 76%, #000 79%);
  opacity:0.65;
}
.hep-disc.me {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,241,224,0.72), rgba(255,241,224,0) 40%),
    radial-gradient(circle at 66% 82%, rgba(56,18,7,0.5), transparent 55%),
    conic-gradient(from 220deg, #8C3A1E, #C05535 22%, #E8A985 40%, #D97B5C 58%, #93411F 78%, #8C3A1E);
}
.hep-disc.op {
  background:
    radial-gradient(circle at 32% 26%, rgba(232,249,252,0.62), rgba(232,249,252,0) 40%),
    radial-gradient(circle at 66% 82%, rgba(10,30,36,0.55), transparent 55%),
    conic-gradient(from 220deg, #2E505A, #4A7681 22%, #9FCAD4 40%, #5E8B96 58%, #35595F 78%, #2E505A);
}
.hep-disc.block {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 72% 30%, rgba(90,78,60,0.5) 3%, transparent 8%),
    radial-gradient(circle at 30% 68%, rgba(90,78,60,0.45) 2.5%, transparent 7%),
    radial-gradient(circle at 58% 55%, rgba(255,255,255,0.14) 2%, transparent 6%),
    radial-gradient(circle at 40% 32%, #C7BBA4, #6B5D49 82%);
}
.hep-disc.block::after { border-style:dashed; border-color:rgba(0,0,0,0.3); }
.hep-disc .hep-disc-mk {
  font-family:var(--sym-display); font-weight:700; font-size:clamp(13px,3.4vw,18px);
  color:rgba(30,9,3,0.66); pointer-events:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.4), 0 -1px 1px rgba(0,0,0,0.3);
}
.hep-disc.op .hep-disc-mk { color:rgba(4,18,22,0.72); text-shadow:0 1px 0 rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.3); }
/* falling motion streak above the seal (child added by JS on drop) —
   rides the disc during the fall, then collapses into it on landing */
.hep-disc .hep-disc-trail {
  position:absolute; left:24%; right:24%; bottom:76%;
  height:calc(var(--fall,4) * 105%);
  border-radius:45%; pointer-events:none; opacity:0;
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 62%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 4%, #000 62%, #000 100%);
}
.hep-disc.me .hep-disc-trail    { background:linear-gradient(180deg, rgba(232,169,133,0), rgba(232,169,133,0.30) 62%, rgba(255,217,160,0.55)); }
.hep-disc.op .hep-disc-trail    { background:linear-gradient(180deg, rgba(159,202,212,0), rgba(159,202,212,0.26) 62%, rgba(205,227,232,0.5)); }
.hep-disc.block .hep-disc-trail { background:linear-gradient(180deg, rgba(199,187,164,0), rgba(199,187,164,0.24) 62%, rgba(216,204,183,0.45)); }
@media (prefers-reduced-motion: no-preference) {
  .hep-disc.drop .hep-disc-trail { animation:hep-trail .6s cubic-bezier(.3,.6,.3,1) both; }
}
@keyframes hep-trail {
  0%   { opacity:0.9; transform:scaleY(1); }
  55%  { opacity:0.5; transform:scaleY(0.72); }
  100% { opacity:0;  transform:scaleY(0.2); }
}
/* one-shot metal glint that sweeps the seal as it settles (child added by JS on drop) */
.hep-disc .hep-disc-glint {
  position:absolute; inset:3%; border-radius:50%; pointer-events:none; display:block;
  background:linear-gradient(120deg, transparent 32%, rgba(255,244,224,0.55) 47%, rgba(255,244,224,0.10) 55%, transparent 68%);
  background-size:260% 100%; background-position:140% 0; opacity:0;
}
@media (prefers-reduced-motion: no-preference) {
  .hep-disc.drop .hep-disc-glint { animation:hep-glint .8s ease-out .4s 1 both; }
}
@keyframes hep-glint {
  0%   { opacity:0; background-position:140% 0; }
  22%  { opacity:1; }
  100% { opacity:0; background-position:-60% 0; }
}
.hep-disc.drop { animation:hep-drop .42s cubic-bezier(.34,1.32,.5,1); }
@keyframes hep-drop {
  0%   { transform:translateY(calc(-100% * var(--fall,4) - 60%)) rotate(-6deg) scale(1); }
  68%  { transform:translateY(0) rotate(1.5deg) scale(1); }
  76%  { transform:translateY(2%) rotate(0.5deg) scale(1.11,0.84); }
  86%  { transform:translateY(-7%) rotate(0deg) scale(0.96,1.05); }
  100% { transform:translateY(0) scale(1); }
}
/* impact shockwave ring (spawned by JS at landing) */
.hep-ring {
  position:absolute; inset:8%; border-radius:50%; pointer-events:none; z-index:2;
  border:2px solid currentColor; opacity:0;
  box-shadow:0 0 14px currentColor, inset 0 0 8px currentColor;
}
.hep-disc.win { z-index:3; }
@media (prefers-reduced-motion: no-preference) {
  .hep-disc.win { animation:hep-winpulse 0.9s ease-in-out infinite; }
}
@keyframes hep-winpulse {
  0%,100% { box-shadow:inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 2.5px rgba(244,217,176,0.6), 0 0 8px 1px rgba(244,217,176,0.4); }
  50%     { box-shadow:inset 0 2px 4px rgba(255,255,255,0.4),  inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,232,190,0.95), 0 0 28px 8px rgba(255,217,160,0.85); transform:scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hep-disc.win { box-shadow:inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,232,190,0.9), 0 0 18px 4px rgba(255,217,160,0.6); }
}

/* column hover / drop affordance */
.hep-grid.droppable .hep-cell { cursor:pointer; }
.hep-grid.col-hl-on .hep-cell.colhl { background:linear-gradient(180deg, rgba(255,217,160,0.14), rgba(255,217,160,0.03)); }
.hep-col-ghost { position:absolute; top:0; height:100%; width:calc(100%/7); display:grid; place-items:start center; pointer-events:none; opacity:0; transition:opacity .12s, left .1s ease-out; z-index:2; }
.hep-col-ghost.show { opacity:1; }
.hep-col-ghost::before { /* torchlight shaft pouring down the chosen gate */
  content:''; position:absolute; top:-4px; bottom:3px; left:50%; width:82%;
  transform:translateX(-50%); border-radius:8px;
  background:linear-gradient(180deg, rgba(255,217,160,0.42), rgba(255,199,130,0.16) 52%, transparent 92%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hep-col-ghost.show::before { animation:hep-shaft 1.7s ease-in-out infinite; }
}
@keyframes hep-shaft { 0%,100%{ opacity:0.85; } 50%{ opacity:1.0; } }
.hep-col-ghost .arrow { /* hovering seal preview (colored via inline currentColor) */
  margin-top:-32px; font-size:0; line-height:0; position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 66% 82%, rgba(0,0,0,0.30), transparent 55%),
    currentColor;
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -2px 4px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.6), 0 0 26px currentColor;
  animation:hep-bob 0.9s ease-in-out infinite;
}
.hep-col-ghost .arrow::before { /* embossed emblem on the preview seal (set by JS via data-mk) */
  content:attr(data-mk);
  font-family:var(--sym-display); font-weight:700; font-size:15px; line-height:1;
  color:rgba(30,9,3,0.6); text-shadow:0 1px 0 rgba(255,255,255,0.35);
  position:relative; z-index:1;
}
.hep-col-ghost .arrow::after { /* seal emboss ring on the preview */
  content:''; position:absolute; inset:13%; border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.28);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.35);
}
@media (prefers-reduced-motion: reduce) { .hep-col-ghost .arrow { animation:none; } }
@keyframes hep-bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
.hep-grid.col-hl-on .hep-cell.colhl .hep-hole {
  box-shadow:
    inset 0 5px 9px rgba(0,0,0,0.72),
    inset 0 -2px 5px rgba(255,199,130,0.28),
    0 0 0 2px rgba(255,217,160,0.5),
    0 0 16px rgba(255,199,130,0.24);
}
.hep-grid.col-hl-on .hep-cell.colhl .hep-hole::after { border-color:rgba(255,217,160,0.4); }
/* the landing socket — where the seal will strike — glows like a waiting brazier */
.hep-grid.col-hl-on .hep-cell.colhl.landing .hep-hole {
  background:
    radial-gradient(circle at 50% 66%, rgba(232,161,90,0.30), rgba(232,161,90,0.07) 52%, transparent 72%),
    radial-gradient(circle at 50% 30%, #101619, #04070A 74%);
  box-shadow:
    inset 0 5px 9px rgba(0,0,0,0.6),
    inset 0 -3px 7px rgba(255,199,130,0.5),
    0 0 0 2.5px rgba(255,217,160,0.85),
    0 0 24px rgba(255,199,130,0.5);
}
.hep-grid.col-hl-on .hep-cell.colhl.landing .hep-hole::after { border-color:rgba(255,217,160,0.85); }
@media (prefers-reduced-motion: no-preference) {
  .hep-grid.col-hl-on .hep-cell.colhl.landing .hep-hole { animation:hep-landing-breathe 1.1s ease-in-out infinite; }
}
@keyframes hep-landing-breathe {
  0%,100% { box-shadow:inset 0 5px 9px rgba(0,0,0,0.6), inset 0 -3px 7px rgba(255,199,130,0.42), 0 0 0 2px rgba(255,217,160,0.68), 0 0 14px rgba(255,199,130,0.34); }
  50%     { box-shadow:inset 0 5px 9px rgba(0,0,0,0.6), inset 0 -3px 7px rgba(255,199,130,0.62), 0 0 0 3px rgba(255,232,190,0.95), 0 0 32px rgba(255,199,130,0.62); }
}
.hep-grid.burnmode .hep-disc.op { cursor:crosshair; outline:2px dashed rgba(244,217,176,0.85); outline-offset:-3px; animation:hep-burnpulse 0.8s ease-in-out infinite; }
@keyframes hep-burnpulse { 0%,100%{ outline-color:rgba(244,217,176,0.5);} 50%{ outline-color:rgba(217,123,92,1);} }
.hep-disc.removing { animation:hep-burnout .5s ease forwards; }
@keyframes hep-burnout { to { transform:scale(0.1) rotate(120deg); opacity:0; filter:brightness(2.5) saturate(2); } }
.hep-disc.settle { animation:hep-settle .3s ease; }
@keyframes hep-settle { from{ transform:translateY(-12%);} to{ transform:translateY(0);} }

/* victory wall-crack overlay (drawn by JS along the winning line) */
.hep-crack { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible; }
.hep-crack .crack-under { stroke:#050403; stroke-opacity:0.92; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hep-crack .crack-hot {
  stroke:var(--hep-flame-hot); fill:none; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,205,130,1)) drop-shadow(0 0 14px rgba(255,178,92,0.9)) drop-shadow(0 0 30px rgba(232,161,90,0.6));
}
.hep-crack .crack-core { stroke:#FFF6E3; fill:none; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(255,246,227,0.95)); }
.hep-crack .crack-branch {
  stroke:var(--hep-flame-hot); stroke-width:1.6; stroke-opacity:0.95; fill:none; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,205,130,1)) drop-shadow(0 0 12px rgba(232,161,90,0.7));
}
/* once fully drawn, the fissure keeps arcing like live lightning */
@media (prefers-reduced-motion: no-preference) {
  .hep-crack.lit .crack-hot { animation:hep-crack-arc 0.42s steps(2, jump-none) infinite; }
  .hep-crack.lit .crack-core { animation:hep-crack-arc 0.3s steps(2, jump-none) -0.1s infinite; }
  .hep-crack.lit .crack-branch { animation:hep-crack-arc 0.42s steps(2, jump-none) -0.21s infinite; }
}
@keyframes hep-crack-arc { 0%,100% { opacity:1; } 50% { opacity:0.62; } }

/* landing flare — warm light pop in the socket (spawned by JS) */
.hep-flare {
  position:absolute; inset:-14%; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(255,217,160,0.6), rgba(232,161,90,0.20) 45%, transparent 70%);
  mix-blend-mode:screen; opacity:0; will-change:transform,opacity;
}
/* rubble shards raining off the breached wall (spawned by JS in the fx layer) */
.hep-rubble { position:absolute; border-radius:2px; will-change:transform,opacity; }
/* masonry dust billowing out of the fissure (spawned by JS in the fx layer) */
.hep-dustpuff {
  position:absolute; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 45% 42%, rgba(158,142,118,0.5), rgba(122,108,88,0.28) 48%, transparent 72%);
  filter:blur(5px); will-change:transform,opacity;
}
/* golden ray burst at the breach point (spawned by JS in the fx layer) */
.hep-rays {
  position:absolute; border-radius:50%; pointer-events:none; opacity:0;
  background:
    repeating-conic-gradient(rgba(255,217,160,0.17) 0deg 8deg, transparent 8deg 22deg),
    radial-gradient(circle, rgba(255,236,190,0.55), rgba(255,205,130,0.18) 38%, transparent 66%);
  -webkit-mask-image:radial-gradient(circle, #000 26%, transparent 68%);
          mask-image:radial-gradient(circle, #000 26%, transparent 68%);
  mix-blend-mode:screen; will-change:transform,opacity;
}
.hep-rays.op {
  background:
    repeating-conic-gradient(rgba(159,202,212,0.15) 0deg 8deg, transparent 8deg 22deg),
    radial-gradient(circle, rgba(205,227,232,0.5), rgba(127,176,188,0.16) 38%, transparent 66%);
}

/* victory stamp — kinetic seal slammed over the board */
.hep-stamp {
  position:absolute; left:50%; top:50%; z-index:6; pointer-events:none;
  transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--sym-display); font-weight:700; font-size:clamp(34px,7vw,58px);
  letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap;
  color:var(--hep-flame-hot);
  padding:6px 26px; border:3px double currentColor; border-radius:6px;
  background:rgba(10,9,7,0.55);
  text-shadow:0 0 24px rgba(255,205,130,0.6), 0 2px 0 rgba(0,0,0,0.6);
  box-shadow:0 0 40px rgba(232,161,90,0.35), inset 0 0 22px rgba(232,161,90,0.18);
}
.hep-stamp.op { color:var(--sym-aegean-lt); text-shadow:0 0 24px rgba(127,176,188,0.55), 0 2px 0 rgba(0,0,0,0.6); box-shadow:0 0 40px rgba(94,139,150,0.35), inset 0 0 22px rgba(94,139,150,0.2); }
@media (prefers-reduced-motion: no-preference) {
  .hep-stamp { animation:hep-stamp-in .9s cubic-bezier(.16,1,.3,1) both, hep-stamp-breathe 1.7s ease-in-out .95s infinite alternate; }
}
@keyframes hep-stamp-in {
  0%   { transform:translate(-50%,-50%) rotate(-7deg) scale(2.6); opacity:0; filter:blur(6px); }
  38%  { transform:translate(-50%,-50%) rotate(-7deg) scale(0.94); opacity:1; filter:blur(0); }
  52%  { transform:translate(-50%,-50%) rotate(-7deg) scale(1.04); }
  100% { transform:translate(-50%,-50%) rotate(-7deg) scale(1); opacity:1; }
}
/* afterglow breathing while the breach holds on screen (variant-agnostic) */
@keyframes hep-stamp-breathe {
  from { filter:brightness(1); }
  to   { filter:brightness(1.18); }
}

/* ────────────────── Power bar ────────────────── */
.hep-powerbar { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; min-height:44px; }
.hep-power {
  display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:30px; cursor:pointer;
  border:1px solid rgba(240,235,224,0.13);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.2));
  font-family:var(--sym-display); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--sym-cream);
  box-shadow:inset 0 1px 0 rgba(244,217,176,0.07), 0 2px 6px rgba(0,0,0,0.3);
  transition:transform .14s, border-color .2s, background .2s, opacity .2s, box-shadow .2s;
}
.hep-power .hep-power-ico {
  width:23px; height:23px; display:grid; place-items:center; border-radius:50%; font-size:13px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.16), inset 0 -2px 3px rgba(0,0,0,0.4);
}
.hep-power .hep-power-n { font-family:var(--sym-mono); font-size:11px; color:var(--sym-gold-lt); }
.hep-power:not(.ready) { opacity:0.32; cursor:default; }
.hep-power.ready { border-color:rgba(196,164,72,0.4); }
@media (prefers-reduced-motion: no-preference) {
  .hep-power.ready { animation:hep-ready-glow 2.2s ease-in-out infinite; }
}
@keyframes hep-ready-glow {
  0%,100% { box-shadow:inset 0 1px 0 rgba(244,217,176,0.07), 0 2px 6px rgba(0,0,0,0.3); }
  50%     { box-shadow:inset 0 1px 0 rgba(244,217,176,0.07), 0 2px 6px rgba(0,0,0,0.3), 0 0 14px rgba(196,164,72,0.3); }
}
.hep-power.ready:hover { transform:translateY(-2px) scale(1.03); border-color:var(--sym-terra); background:rgba(217,123,92,0.14); }
.hep-power.ready:active { transform:translateY(0) scale(0.98); }
.hep-power.armed { border-color:var(--sym-gold); background:rgba(196,164,72,0.16); box-shadow:0 0 0 1px var(--sym-gold) inset; animation:hep-armed 1s ease-in-out infinite; }
@keyframes hep-armed { 0%,100%{ box-shadow:0 0 0 1px var(--sym-gold) inset, 0 0 0 0 rgba(196,164,72,0.4);} 50%{ box-shadow:0 0 0 1px var(--sym-gold) inset, 0 0 14px 3px rgba(196,164,72,0.5);} }
.hep-power.double .hep-power-ico { background:rgba(196,164,72,0.25); color:var(--sym-gold-lt); }
.hep-power.burn .hep-power-ico { background:rgba(217,123,92,0.25); color:var(--sym-terra-lt); }
.hep-power.block .hep-power-ico { background:rgba(142,130,112,0.3); color:#D8CCB7; }

/* ────────────────── Question ────────────────── */
.hep-qbody { max-width:760px; margin:0 auto; width:100%; }
.hep-q-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.hep-qcount { font-family:var(--sym-mono); font-size:11px; letter-spacing:2px; color:var(--sym-terra-lt); }
.hep-streak { font-family:var(--sym-mono); font-size:11px; letter-spacing:1px; color:var(--sym-stone); transition:color .3s; }
.hep-streak b { color:var(--sym-gold-lt); text-shadow:0 0 10px rgba(227,199,102,0.5); }
/* 3+ streak smoulders like a caught torch */
.hep-streak.hot { color:var(--sym-terra-lt); }
.hep-streak.hot b { color:var(--hep-flame-hot); text-shadow:0 0 12px rgba(255,178,92,0.85), 0 0 26px rgba(232,161,90,0.4); }
@media (prefers-reduced-motion: no-preference) {
  .hep-streak.hot b { animation:hep-streak-ember 1.5s ease-in-out infinite; }
}
@keyframes hep-streak-ember {
  0%,100% { text-shadow:0 0 8px rgba(255,178,92,0.65), 0 0 20px rgba(232,161,90,0.3); }
  50%     { text-shadow:0 0 14px rgba(255,205,130,1), 0 0 30px rgba(232,161,90,0.55); }
}
.hep-q-card {
  background:linear-gradient(180deg, rgba(244,217,176,0.03), rgba(0,0,0,0.24)), var(--sym-bg-panel);
  border:1px solid rgba(217,123,92,0.24); border-radius:6px;
  padding:17px 26px; margin-bottom:10px; text-align:center; position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(244,217,176,0.06);
}
.hep-q-card::before, .hep-q-card::after { /* carved corner brackets */
  content:''; position:absolute; width:16px; height:16px; pointer-events:none;
  border:2px solid rgba(196,164,72,0.5);
}
.hep-q-card::before { top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:5px 0 0 0; }
.hep-q-card::after  { bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 5px 0; }
@media (prefers-reduced-motion: no-preference) {
  .hep-q-card.fresh { animation:hep-card-in .38s cubic-bezier(.2,.8,.3,1); }
}
@keyframes hep-card-in { from { opacity:0.2; transform:translateY(8px) scale(0.985); } to { opacity:1; transform:none; } }
.hep-q-text { font-family:var(--sym-serif); font-size:clamp(18px,2.5vw,25px); line-height:1.38; color:var(--sym-cream); }

/* timer as a burning fuse */
.hep-timer { height:7px; border-radius:5px; background:rgba(240,235,224,0.08); box-shadow:inset 0 1px 3px rgba(0,0,0,0.5); overflow:visible; margin:0 auto 14px; max-width:760px; width:100%; position:relative; }
.hep-timer-fill { height:100%; width:100%; border-radius:5px; background:linear-gradient(90deg, var(--sym-gold), var(--sym-terra)); transition:background .3s; position:relative; }
.hep-timer-fill::after { /* ember tip */
  content:''; position:absolute; right:-4px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FFF3DE, var(--hep-flame) 60%);
  box-shadow:0 0 10px 3px rgba(255,178,92,0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .hep-timer-fill::after { animation:hep-fuse 0.45s ease-in-out infinite alternate; }
  .hep-timer-fill.warn::after { animation-duration:0.18s; }
}
@keyframes hep-fuse { from { box-shadow:0 0 7px 2px rgba(255,178,92,0.6); } to { box-shadow:0 0 14px 5px rgba(255,178,92,0.9); } }
.hep-timer-fill.warn { background:linear-gradient(90deg, var(--sym-terra), var(--sym-blood)); }

.hep-answers { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:760px; margin:0 auto; }
/* Mobile: keep answers a compact 2-col grid (grammar answers are short) and tighten the
   vertical stack so the board + question + answers coexist without a long scroll. */
@media (max-width:600px){
  .hep-answers{ grid-template-columns:1fr 1fr; gap:8px; }
  .hep-ans{ padding:10px 11px; gap:10px; touch-action:manipulation; }
  /* trim just enough vertical space (board width capped ~25px, tighter question card) so the
     full 6-row board AND all four answers coexist on a phone without scrolling; cells stay ≥40px. */
  .hep-board{ max-width:318px; }
  .hep-board-wrap{ margin-bottom:8px; }
  .hep-q-card{ padding:11px 16px; margin-bottom:7px; }
  .hep-q-meta{ margin-bottom:5px; }
  .hep-q-text{ font-size:17px; }
  .hep-timer{ margin-bottom:8px; }
  .hep-powerbar{ gap:7px; margin-bottom:8px; flex-wrap:nowrap; }
  .hep-powerbar .hep-power{ padding:6px 9px; gap:6px; font-size:11px; letter-spacing:.5px; }
  .hep-powerbar .hep-power .hep-power-ico{ width:20px; height:20px; }
  .hep-grid{ touch-action:manipulation; }
}
.hep-ans {
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18)), var(--sym-bg-panel);
  border:1px solid rgba(240,235,224,0.1); border-radius:6px; padding:14px 16px;
  font-family:var(--sym-sans); font-size:16px; color:var(--sym-cream);
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  transition:transform .13s, border-color .2s, background .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.hep-ans::before { /* bronze sheen sweep on hover */
  content:''; position:absolute; top:0; bottom:0; width:42%; left:-64%;
  background:linear-gradient(105deg, transparent, rgba(244,217,176,0.09), transparent);
  transform:skewX(-18deg); transition:left .45s ease; pointer-events:none;
}
.hep-ans:hover:not(:disabled)::before { left:126%; }
.hep-ans:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--sym-terra); box-shadow:0 8px 22px rgba(0,0,0,0.4), 0 0 0 1px rgba(217,123,92,0.25); }
.hep-ans:active:not(:disabled){ transform:translateY(0) scale(0.995); }
.hep-ans:disabled { cursor:default; }
.hep-ans-key { /* bronze coin */
  width:29px; height:29px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sym-display); font-weight:700; font-size:14px; color:#2A0F06;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,241,224,0.65), rgba(255,241,224,0) 42%),
    radial-gradient(circle at 40% 34%, #E8A985, #A34324);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.4);
  text-shadow:0 1px 0 rgba(255,255,255,0.25);
  transition:transform .15s;
}
.hep-ans:hover:not(:disabled) .hep-ans-key { transform:rotate(-8deg) scale(1.08); }
.hep-ans-txt { flex:1; }
.hep-ans.correct { border-color:var(--sym-sage); background:rgba(106,135,82,0.2); box-shadow:0 0 0 1px rgba(106,135,82,0.5), 0 0 22px rgba(106,135,82,0.2); }
.hep-ans.wrong { border-color:var(--sym-blood); background:rgba(158,59,46,0.18); }
@media (prefers-reduced-motion: no-preference) {
  .hep-ans.correct { animation:hep-ans-pop .35s cubic-bezier(.2,.8,.3,1); }
  .hep-ans.wrong { animation:hep-ans-shake .38s ease; }
}
@keyframes hep-ans-pop { 0%{ transform:scale(1);} 45%{ transform:scale(1.03);} 100%{ transform:scale(1);} }
@keyframes hep-ans-shake { 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 45%{ transform:translateX(5px);} 70%{ transform:translateX(-3px);} 88%{ transform:translateX(2px);} }
.hep-ans.dim { opacity:0.35; }
.hep-ans-mark { font-family:var(--sym-display); font-weight:700; font-size:18px; }
.hep-ans.correct .hep-ans-mark { color:var(--sym-sage); }
.hep-ans.wrong .hep-ans-mark { color:var(--sym-blood); }

.hep-feedback { text-align:center; min-height:24px; margin-top:12px; font-family:var(--sym-mono); font-size:13px; letter-spacing:1px; }
.hep-feedback.ok { color:var(--sym-sage); }
.hep-feedback.bad { color:var(--sym-terra-lt); }
@media (prefers-reduced-motion: no-preference) {
  .hep-feedback.ok, .hep-feedback.bad { animation:hep-feedback-in .3s cubic-bezier(.2,.8,.3,1); }
}
@keyframes hep-feedback-in { from { opacity:0; transform:translateY(4px) scale(0.96); } to { opacity:1; transform:none; } }

/* ────────────────── Two-column siege layout on wide screens ────────────────── */
@media (min-width:1080px) {
  #hep-screen-game.active {
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(360px,600px);
    grid-template-areas:
      "hud    hud"
      "banner banner"
      "board  q"
      "power  q";
    justify-content:center; align-content:start;
    column-gap:clamp(28px,4vw,64px);
  }
  #hep-screen-game .hep-hud { grid-area:hud; }
  #hep-screen-game .hep-turn-banner { grid-area:banner; }
  #hep-screen-game .hep-board-wrap { grid-area:board; margin-bottom:10px; }
  #hep-screen-game .hep-powerbar { grid-area:power; align-self:start; }
  #hep-screen-game .hep-qbody { grid-area:q; align-self:center; }
}

/* ────────────────── Watch panel — fills the question column while the rival moves ──────────────────
   Pure CSS: appears only when the JS hides #hep-qbody (inline display:none), wide layout only. */
.hep-watch { display:none; }
@media (min-width:1080px) {
  #hep-screen-game.active #hep-qbody[style*="none"] + .hep-watch {
    grid-area:q; align-self:center; justify-self:center;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
    padding:36px 44px; max-width:430px;
    border:1px solid rgba(196,164,72,0.15); border-radius:10px;
    background:
      radial-gradient(85% 62% at 50% 0%, rgba(232,161,90,0.07), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
    box-shadow:inset 0 1px 0 rgba(244,217,176,0.06), 0 16px 44px rgba(0,0,0,0.38);
  }
  @media (prefers-reduced-motion: no-preference) {
    #hep-screen-game.active #hep-qbody[style*="none"] + .hep-watch { animation:hep-watch-in .5s cubic-bezier(.2,.8,.3,1) both; }
  }
}
@keyframes hep-watch-in { from { opacity:0; transform:translateY(12px) scale(0.98); } to { opacity:1; transform:none; } }
.hep-watch-crest { width:112px; height:112px; opacity:0.9; filter:drop-shadow(0 8px 26px rgba(217,123,92,0.32)) drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
@media (prefers-reduced-motion: no-preference) { .hep-watch-crest { animation:hep-crest-sway 5.5s ease-in-out infinite; } }
.hep-watch-title { font-family:var(--sym-display); font-size:17px; letter-spacing:3px; color:var(--sym-gold-lt); text-shadow:0 0 16px rgba(227,199,102,0.3), 0 2px 0 rgba(0,0,0,0.5); }
.hep-watch-meander {
  width:160px; height:10px;
  background:var(--hep-meander) repeat-x center / 12px 10px; opacity:0.4;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.hep-watch-sub { font-family:var(--sym-serif); font-style:italic; font-size:15px; line-height:1.55; color:var(--sym-stone); max-width:300px; }

/* ────────────────── FX layer (particles / flash) ────────────────── */
#hep-fx-layer { position:fixed; inset:0; pointer-events:none; z-index:1400; overflow:hidden; }
.hep-spark { position:absolute; border-radius:50%; will-change:transform,opacity; }
.hep-float {
  position:absolute; font-family:var(--sym-display); font-weight:700;
  letter-spacing:2px; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 0 14px currentColor, 0 2px 2px rgba(0,0,0,0.7);
  will-change:transform,opacity;
}
.hep-flashplate { position:absolute; inset:0; opacity:0; will-change:opacity; }

/* ────────────────── End ────────────────── */
#hep-screen-end { align-items:center; justify-content:center; text-align:center; gap:6px; }
.hep-end-crest { width:122px; height:122px; margin-bottom:6px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.55)); }
.hep-end-title { font-family:var(--sym-display); font-weight:700; font-size:clamp(32px,5.4vw,56px); letter-spacing:0.05em; text-transform:uppercase; }
@media (prefers-reduced-motion: no-preference) {
  #hep-screen-end.active .hep-end-title { animation:hep-title-in .7s cubic-bezier(.16,1,.3,1) both; }
  #hep-screen-end.active > * { animation:hep-rise .5s cubic-bezier(.2,.8,.3,1) both; }
  #hep-screen-end.active > *:nth-child(3) { animation-delay:.08s; }
  #hep-screen-end.active > *:nth-child(4) { animation-delay:.16s; }
  #hep-screen-end.active > *:nth-child(5) { animation-delay:.24s; }
}
@keyframes hep-title-in { from { letter-spacing:0.3em; opacity:0; transform:scale(1.12); filter:blur(4px); } to { letter-spacing:0.05em; opacity:1; transform:none; filter:blur(0); } }
.hep-end-title.win { color:var(--sym-terra-lt); text-shadow:0 0 34px rgba(217,123,92,0.5), 0 2px 0 rgba(0,0,0,0.5); }
.hep-end-title.lose { color:var(--sym-aegean-lt); text-shadow:0 0 26px rgba(127,176,188,0.35), 0 2px 0 rgba(0,0,0,0.5); }
.hep-end-title.draw { color:var(--sym-gold-lt); text-shadow:0 0 26px rgba(227,199,102,0.35), 0 2px 0 rgba(0,0,0,0.5); }
.hep-end-sub { font-family:var(--sym-serif); font-size:19px; font-style:italic; color:var(--sym-stone); max-width:540px; line-height:1.5; margin-bottom:8px; }
.hep-end-stats { display:flex; gap:0; justify-content:center; margin:8px 0 24px; }
.hep-stat { display:flex; flex-direction:column; padding:2px 26px; }
.hep-stat + .hep-stat { border-left:1px solid rgba(196,164,72,0.25); }
.hep-stat-val { font-family:var(--sym-display); font-size:32px; color:var(--sym-cream); line-height:1; text-shadow:0 2px 0 rgba(0,0,0,0.5); }
.hep-stat-lbl { font-family:var(--sym-mono); font-size:9.5px; letter-spacing:1.5px; color:var(--sym-stone); text-transform:uppercase; margin-top:6px; }
.hep-end-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

@media (max-width:560px){
  .hep-hud { flex-wrap:wrap; }
  .hep-side-name { font-size:12.5px; }
  .hep-powerbar .hep-power { padding:6px 10px; font-size:11px; }
  .hep-stat { padding:2px 16px; }
}