/* ===== The challenge page as an EVENT — the essence loop ===== */

.ch { --accent: var(--gold); --accent-ink: var(--gold-ink); }
.ch[data-color="cobalt"]    { --accent: var(--cobalt);    --accent-ink:#fff; }
.ch[data-color="cherry"]    { --accent: var(--cherry);    --accent-ink:#fff; }
.ch[data-color="tangerine"] { --accent: var(--tangerine); --accent-ink:#2a1400; }

.ch-hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 var(--s8);
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    var(--ink);
}
.ch-hero::after { /* subtle vignette texture */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(900px 500px at 50% 120%, rgba(0,0,0,.5), transparent 60%);
}
.ch-hero > .wrap { position: relative; z-index: 2; }

.ch-status { display:flex; justify-content:center; gap:10px; margin-bottom: var(--s5); flex-wrap:wrap; }

/* (1) prize statement — the thumbnail as a page */
.ch-prize {
  text-align:center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 6.2rem); line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase; text-wrap: balance;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.35));
}
.ch-prize .num { color: var(--accent); display:inline-block; }
.ch-sub { text-align:center; color: var(--on-dark-mut); font-size: clamp(1rem,2.4vw,1.3rem); margin: var(--s5) auto 0; max-width: 44ch; }

/* (2) live counter band */
.ch-counter { text-align:center; margin-top: var(--s8); }
.ch-counter .lbl { font-family: var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color: var(--on-dark-dim); }
.odo {
  display:inline-flex; align-items:center; gap: 4px; margin: 12px 0 4px;
  padding: 10px 18px; border-radius: 16px;
  background: rgba(255,255,255,.04); border:1px solid var(--line);
  transition: transform .15s var(--ease);
}
.odo.pulse { transform: scale(1.05); }
.odo-digit {
  position: relative; width: .62em; height: 1.12em; overflow: hidden;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 1.12em;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.odo-strip { position:absolute; top:0; left:0; width:100%; will-change: transform;
  transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.odo-strip span { display:block; height:1.12em; text-align:center; }
.odo-sep { font-family: var(--display); font-weight:800; font-size: clamp(1.6rem,5vw,3rem); color: var(--on-dark-dim); align-self:center; }
.odo-plus { /* floating +1 particle */
  position:absolute; left:50%; top:-4px; transform: translateX(-50%);
  font-family: var(--display); font-weight:800; color: var(--accent);
  font-size:1.4rem; pointer-events:none; opacity:0;
}
.odo-plus.fire { animation: plusFloat .9s var(--ease) forwards; }
@keyframes plusFloat { 0%{opacity:0; transform:translate(-50%,6px) scale(.7)} 15%{opacity:1} 100%{opacity:0; transform:translate(-50%,-46px) scale(1.1)} }
.ch-momentum { color: var(--on-dark-mut); font-size:.98rem; margin-top:2px; }
.ch-momentum b { color: var(--on-dark); font-variant-numeric: tabular-nums; }

/* entrant ticker (ticker-drift) */
.ticker { overflow:hidden; margin-top: var(--s5); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display:inline-flex; gap: 10px; white-space:nowrap; will-change: transform; animation: drift 26s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes drift { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { font-size:.86rem; color: var(--on-dark-mut); background: rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
.ticker-item b { color: var(--on-dark); }
.ticker-empty { text-align:center; color: var(--on-dark-dim); font-size:.9rem; margin-top: var(--s5); }

/* (3) countdown */
.ch-countdown { margin-top: var(--s8); display:flex; justify-content:center; gap: clamp(8px,2.4vw,20px); }
.cd-cell { text-align:center; min-width: 74px; }
.cd-num { font-family: var(--mono); font-weight:500; font-size: clamp(1.8rem, 6vw, 3.2rem); font-variant-numeric: tabular-nums; line-height:1;
  background: var(--ink-2); border:1px solid var(--line); border-radius:12px; padding: 12px 8px; color: var(--on-dark); display:block; }
.cd-lbl { font-family: var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:.62rem; color: var(--on-dark-dim); margin-top:8px; }
.ch-countdown.urgent .cd-num { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); animation: deadlinePulse 2s var(--ease) infinite; }
@keyframes deadlinePulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.cd-caption { text-align:center; color:var(--on-dark-dim); font-size:.85rem; margin-top: var(--s4); font-family: var(--mono); letter-spacing:.08em; }
.cd-caption.urgent { color: var(--accent); }

/* closed state */
.ch-closed-banner { text-align:center; margin-top: var(--s7); padding: var(--s6); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 12%, var(--ink-2)); border:1px solid var(--line-2); }
.ch-closed-banner h3 { font-size: clamp(1.6rem,5vw,2.6rem); text-transform:uppercase; }

/* ===== entry section ===== */
.ch-entry { padding: var(--s9) 0; background: var(--ink-2); }
.entry-card { max-width: 560px; margin:0 auto; text-align:center; }
.entry-form { display:flex; gap:10px; margin-top: var(--s5); }
.entry-form .field { flex:1; }
.btn-enter { position:relative; overflow:hidden; min-width: 170px; }
.btn-enter .chk { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: var(--lime); color:#fff; transform: translateY(105%); transition: transform .3s var(--ease-spring); }
.btn-enter.done .chk { transform: translateY(0); }
.entry-note { font-size:.82rem; color: var(--on-dark-dim); margin-top: 12px; }
@media (max-width:520px){ .entry-form { flex-direction:column; } }

/* entry-drop confirmation card */
.confirm { max-width: 560px; margin: var(--s6) auto 0; }
.confirm-card { background: var(--surface); border:1px solid var(--accent); border-radius: var(--radius-lg); padding: var(--s6);
  opacity:0; transform: translateY(28px) scale(.98); }
.confirm-card.in { animation: entryDrop .6s var(--ease-spring) forwards; }
@keyframes entryDrop { to { opacity:1; transform: none; } }
.confirm-check { width:64px; height:64px; margin:0 auto var(--s4); border-radius:50%; background: var(--lime); display:flex; align-items:center; justify-content:center; }
.confirm-check svg { width:34px; height:34px; stroke:#fff; }
.confirm h3 { font-size:1.8rem; text-align:center; }
.confirm .entry-no { text-align:center; font-family:var(--mono); font-size: clamp(1.6rem,6vw,2.6rem); color: var(--accent); margin: 10px 0; font-variant-numeric:tabular-nums; }
.confirm .next { text-align:center; color:var(--on-dark-mut); }
.share-row { display:flex; gap:10px; margin-top: var(--s5); }
.share-row .field { flex:1; font-size:.85rem; }
@media (max-width:520px){ .share-row{flex-direction:column} }

/* ===== rules ===== */
.ch-rules { padding: var(--s9) 0; }
.rules-plain { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); max-width: 900px; margin:0 auto; }
@media (max-width:760px){ .rules-plain{ grid-template-columns:1fr; } }
.rule-cell { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.rule-cell .n { font-family:var(--mono); color: var(--accent); font-size:.8rem; letter-spacing:.1em; }
.rule-cell p { margin:8px 0 0; color: var(--on-dark-mut); font-size:.98rem; }
.official { max-width: 900px; margin: var(--s7) auto 0; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.official summary { cursor:pointer; padding: var(--s5); font-family:var(--display); font-weight:700; font-size:1.15rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.official summary::-webkit-details-marker{display:none;}
.official summary .caret{ transition: transform .2s; }
.official[open] summary .caret{ transform: rotate(180deg); }
.official .body { padding: 0 var(--s5) var(--s5); color: var(--on-dark-mut); font-size:.94rem; line-height:1.7; }
.official .body h4 { color: var(--on-dark); margin: var(--s4) 0 6px; font-size:.95rem; font-family: var(--sans); }
.noprch { display:inline-block; background: color-mix(in srgb, var(--lime) 18%, var(--ink)); border:1px solid var(--lime); color: var(--on-dark); padding:10px 14px; border-radius:10px; font-weight:600; font-size:.9rem; margin: 8px 0; }

/* ===== winners feed ===== */
.winners { display:grid; gap: var(--s4); max-width: 760px; margin: var(--s6) auto 0; }
.winner { display:flex; gap: var(--s4); align-items:center; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.winner .medal { width:48px; height:48px; flex:none; border-radius:50%; background: var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.winner .who { font-family:var(--display); font-weight:700; font-size:1.15rem; }
.winner .react { color: var(--on-dark-mut); font-size:.92rem; font-style:italic; margin-top:2px; }

/* demo-state preview control (labeled) */
.demo-toggle { position: sticky; bottom: 14px; z-index: 40; display:flex; justify-content:center; margin-top: var(--s7); }
.demo-toggle .inner { display:flex; gap:6px; align-items:center; background: rgba(13,13,16,.9); backdrop-filter: blur(8px); border:1px solid var(--line-2); border-radius:999px; padding:7px 8px 7px 16px; box-shadow:0 10px 30px rgba(0,0,0,.5); flex-wrap:wrap; justify-content:center; }
.demo-toggle .tag { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark-dim); }
.demo-toggle button { background: var(--surface); border:1px solid var(--line); color: var(--on-dark-mut); border-radius:999px; padding:7px 12px; font-size:.8rem; font-weight:600; cursor:pointer; }
.demo-toggle button.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

.ch-back { display:inline-flex; gap:8px; align-items:center; color: var(--on-dark-mut); font-weight:600; margin: var(--s7) 0 0; }
.ch-back:hover{ color: var(--gold); }