:root {
  --sulfur: #E9DC9A;
  --sulfur-soft: #F2E9BC;
  --spark: #FF6A1A;
  --char: #2B2118;
  --ash: #CFC7B0;
  --ember: #B3261E;
  --display: "Bowlby One", Impact, sans-serif;
  --body: "Red Hat Text", system-ui, sans-serif;
  /* scorch marks: soft burnt blotches over the sulfur paper */
  --scorch:
    radial-gradient(ellipse 380px 260px at 6% 12%, rgba(43, 33, 24, 0.16), transparent 70%),
    radial-gradient(ellipse 300px 200px at 96% 34%, rgba(43, 33, 24, 0.12), transparent 70%),
    radial-gradient(ellipse 220px 160px at 18% 78%, rgba(179, 38, 30, 0.10), transparent 70%),
    radial-gradient(ellipse 420px 240px at 88% 96%, rgba(43, 33, 24, 0.14), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(43, 33, 24, 0.10) 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--scorch), var(--sulfur); background-attachment: fixed; color: var(--char); font: 17px/1.6 var(--body); }
a { color: var(--ember); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1; margin: 0; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 4vw, 48px); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--char); text-decoration: none; font: 26px/1 var(--display); }
.connect { background: transparent; color: var(--char); border: 3px solid var(--char); border-radius: 10px; padding: 8px 16px; font-weight: 700; }

main { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 40px; }

.intro { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: end; margin-top: 12px; }
.intro h1 { font-size: clamp(44px, 7vw, 76px); }
.intro p { max-width: 460px; margin: 0; font-size: 18px; }

/* ---------- the fuse */
.board { display: grid; grid-template-columns: 1fr 300px; align-items: end; margin-top: 18px; }
.fuse { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 120px; }
.track { fill: none; stroke: var(--ash); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 12; }
.rope { fill: none; stroke: url(#twist); stroke-width: 14; stroke-linecap: round; }
.bead circle { fill: var(--char); stroke: var(--sulfur); stroke-width: 3; }
.bead text { font: 700 17px var(--body); fill: var(--char); paint-order: stroke; stroke: var(--sulfur); stroke-width: 5px; }
.bead.me circle { fill: var(--spark); }
#spark .glow { transform-box: fill-box; transform-origin: center; animation: flicker 0.18s infinite alternate; }
#spark.flare .glow { animation: flare 0.9s ease-out both; }
@keyframes flicker { from { transform: scale(0.82); opacity: 0.8; } to { transform: scale(1.1); opacity: 1; } }
@keyframes flare { 0% { transform: scale(1); } 30% { transform: scale(3.4); opacity: 1; } 100% { transform: scale(1); } }
#spark.out { display: none; }

.bombcard { display: grid; gap: 12px; justify-items: stretch; }
.bomb-body {
  aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #5a4634, var(--char) 55%);
  display: grid; place-content: center; text-align: center; color: var(--sulfur-soft);
  box-shadow: 0 14px 0 rgba(43, 33, 24, 0.25); position: relative;
}
.bomb-body::before { content: ""; position: absolute; top: -18px; left: 50%; width: 42px; height: 30px; margin-left: -21px; background: #4a3a2b; border-radius: 6px 6px 0 0; }
.timer { margin: 0; font: clamp(44px, 6vw, 66px)/1 var(--display); font-variant-numeric: tabular-nums; }
.timer.hot { color: var(--spark); }
.timer-sub { margin: 6px 0 0; font-size: 14px; opacity: 0.85; }
.pot { text-align: center; }
.pot p { margin: 0; }
.pot-label { font-weight: 700; font-size: 14px; }
.pot-val { font: 38px/1.1 var(--display); color: var(--ember); }
.pot-last { font-size: 14px; }
.press {
  background: var(--spark); color: var(--char); border: 3px solid var(--char); border-radius: 14px;
  padding: 16px; font: 22px/1 var(--display); box-shadow: 0 6px 0 var(--char);
}
.press:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--char); }
.settle { background: var(--char); color: var(--sulfur); border: 0; border-radius: 12px; padding: 12px; font-weight: 700; }
.note { min-height: 1.6em; margin: 0; text-align: center; font-weight: 700; font-size: 15px; }
.note.bad { color: var(--ember); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.stats div { border-top: 4px solid var(--char); padding-top: 10px; }
.stats b { display: block; font: 30px/1.1 var(--display); }
.stats span { font-size: 14px; }

.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.lists h2 { font-size: 30px; margin-bottom: 12px; }
.winners { list-style: none; padding: 0; margin: 0; }
.winners li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 2px dotted rgba(43, 33, 24, 0.35); align-items: baseline; }
.winners b { font-family: var(--display); color: var(--ember); font-weight: 400; }
.winners .empty { display: block; }
.how ol { margin: 0; padding-left: 22px; }
.how li { margin-bottom: 10px; }

.foot { margin-top: 48px; padding-top: 18px; border-top: 4px solid var(--char); font-size: 14px; }
.foot p { margin: 4px 0; overflow-wrap: anywhere; }
.foot .built { font: 20px/1.3 var(--display); }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .fuse { margin-bottom: 0; }
  .bombcard { width: min(320px, 100%); margin: 6px auto 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .lists { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #spark .glow { animation: none !important; }
}