/***************************************
 * FitnessHistory.com — theme tokens + everything Tailwind utilities don't cover
 *
 * Three themes cycle from the Theme button: midnight (default), nord, daylight.
 * Each one only redefines the variables below; the rules further down read them,
 * so nothing else in the page has to know which theme is on.
 ***************************************/

/* ---------- 1. THEMES ---------- */
:root,
[data-theme="midnight"]{
  --bg-a:#0b1020;  --bg-b:#0a0f1a;
  --panel:rgba(255,255,255,.06);   --panel-line:rgba(255,255,255,.10);
  --surface:rgba(255,255,255,.10); --surface-hi:rgba(255,255,255,.18);
  --text:#f1f5f9;   --text-soft:#cbd5e1;  --text-mute:#94a3b8;
  --accent:#34d399; --accent-hi:#6ee7b7;  --accent-ink:#04121d;
  --danger:#f87171;
  --canvas-a:rgba(15,23,42,.92);   --canvas-b:rgba(30,41,59,.95);
  --canvas-ink:rgba(255,255,255,.04);
  --shade:rgba(2,6,23,.72);
}
[data-theme="nord"]{
  --bg-a:#2e3440;  --bg-b:#272c36;
  --panel:rgba(236,239,244,.07);   --panel-line:rgba(236,239,244,.14);
  --surface:rgba(236,239,244,.10); --surface-hi:rgba(236,239,244,.20);
  --text:#eceff4;   --text-soft:#d8dee9;  --text-mute:#a9b3c4;
  --accent:#88c0d0; --accent-hi:#8fbcbb;  --accent-ink:#1b2027;
  --danger:#bf616a;
  --canvas-a:rgba(46,52,64,.95);   --canvas-b:rgba(59,66,82,.95);
  --canvas-ink:rgba(236,239,244,.05);
  --shade:rgba(30,34,43,.76);
}
[data-theme="daylight"]{
  --bg-a:#ffffff;  --bg-b:#eef2f6;
  --panel:rgba(255,255,255,.96);   --panel-line:rgba(15,23,42,.12);
  --surface:rgba(15,23,42,.06);    --surface-hi:rgba(15,23,42,.12);
  --text:#0f172a;   --text-soft:#334155;  --text-mute:#5b6b80;
  --accent:#0f766e; --accent-hi:#115e59;  --accent-ink:#ffffff;
  --danger:#b91c1c;
  --canvas-a:#0f172a;              --canvas-b:#1e293b;
  --canvas-ink:rgba(15,23,42,.06);
  --shade:rgba(15,23,42,.55);
}

/* ---------- 2. TAILWIND UTILITIES, RE-POINTED AT THE TOKENS ---------- */
/* #root is the <body>, so these win over the CDN's utilities. */
#root.bg-hero{background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 100%);}
#root.text-slate-100, #root .text-slate-100{color:var(--text)}
#root .text-slate-300{color:var(--text-soft)}
#root .text-slate-400{color:var(--text-mute)}
#root .text-emerald-400{color:var(--accent)}
#root .text-red-400{color:var(--danger)}
#root .text-slate-900{color:var(--accent-ink)}
#root .bg-emerald-500{background-color:var(--accent)}
#root .hover\:bg-emerald-400:hover{background-color:var(--accent-hi)}
#root .bg-white\/10{background-color:var(--surface)}
#root .border-white\/10{border-color:var(--panel-line)}
#root .shadow-emerald-500\/25{--tw-shadow-color:color-mix(in srgb,var(--accent) 25%,transparent)}
#root .ring-emerald-400{--tw-ring-color:var(--accent)}
#root input::placeholder, #root textarea::placeholder{color:var(--text-mute)}

/* ---------- 3. SURFACES ---------- */
.glass{backdrop-filter:blur(8px);background:var(--panel);border:1px solid var(--panel-line);}
.pill{border:1px solid var(--panel-line);padding:.25rem .5rem;border-radius:.75rem;background:var(--surface)}
.btn-mini{background:var(--surface);transition:background .15s, transform .1s}
.btn-mini:hover{background:var(--surface-hi)}
.btn-mini:active{transform:scale(.96)}
.tab-button{transition:all .1s;}
.tab-button.active{background:var(--surface);color:var(--accent);border-bottom-color:var(--accent);}
.score-chip{font-variant-numeric:tabular-nums;letter-spacing:.02em}
input[type=range]{accent-color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Chart box keeps a fixed height so the canvas can't grow on redraw. */
.chart-container-fix{height:160px;overflow:hidden;position:relative;}

/* ---------- 4. NEWSWIRE ---------- */
.rss-scroll{max-height:24rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;}
.rss-scroll::-webkit-scrollbar{width:6px}
.rss-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
.rss-scroll-compact{max-height:26rem;min-height:12rem}
.rss-item{display:flex;gap:.75rem;padding:.6rem;border-radius:.75rem;transition:background .15s, transform .15s;}
.rss-item:hover{background:var(--surface);transform:translateX(2px)}
.rss-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:.6rem;object-fit:cover;background:var(--surface)}
.rss-fallback{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.25rem}
.skeleton{position:relative;overflow:hidden;background:var(--surface);border-radius:.6rem}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface-hi),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- 5. OFFER MODAL ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:var(--shade);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal-card{width:100%;max-width:30rem;max-height:90vh;overflow-y:auto;transform:translateY(14px) scale(.98);transition:transform .18s ease}
.modal-backdrop.open .modal-card{transform:none}
body.modal-open{overflow:hidden}

/* ---------- 6. FITNESS QUIZ ---------- */
.quiz-bar{height:6px;border-radius:999px;background:var(--surface);overflow:hidden}
.quiz-bar > span{display:block;height:100%;width:100%;background:var(--accent);transition:width .25s linear}
.quiz-bar.low > span{background:var(--danger)}
.quiz-choice{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .75rem;border-radius:.75rem;
  background:var(--surface);border:1px solid var(--panel-line);transition:background .15s, border-color .15s, transform .1s}
.quiz-choice:hover:not(:disabled){background:var(--surface-hi);transform:translateX(2px)}
.quiz-choice:disabled{cursor:default}
.quiz-choice .key{flex:0 0 1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;
  background:var(--surface-hi);font-size:.75rem;font-weight:700}
.quiz-choice.correct{background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:var(--accent)}
.quiz-choice.wrong{background:color-mix(in srgb,var(--danger) 24%,transparent);border-color:var(--danger)}

/* ---------- 7. GAMES ---------- */
.game-canvas{width:100%;display:block;border-radius:.75rem;background:var(--canvas-a);touch-action:none;cursor:pointer}
.game-canvas-aim{cursor:crosshair}
.flash{animation:flash .4s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
                 100%{box-shadow:0 0 0 14px transparent}}

/* ---------- 8. CONTENT / SEO ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.55rem .9rem;
           background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:0 0 .75rem 0}
.skip-link:focus{left:0}
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-chevron{transition:transform .15s ease}
.faq-item[open] .faq-chevron{transform:rotate(90deg)}
.offer-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.offer-link:hover{color:var(--accent)}

/* ---------- 9. HIGH SCORES (a compact board that overlays a game at rest) ---------- */
.quiz-stage{min-height:19rem;display:flex;flex-direction:column;position:relative}
.game-stage{position:relative}

/* Parked in the top-right corner: every game writes its own end-of-round
   message across the middle of the canvas, so that lane stays clear. */
.hof-overlay{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  width:min(15rem,60%);padding:.5rem .6rem .55rem;
  border:1px solid var(--panel-line);border-radius:.75rem;
  background:var(--shade);backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(-.4rem) scale(.97);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  pointer-events:none;          /* it is a scoreboard, not a control: clicks reach the game */
}
.hof-overlay.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hof-head{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;
          font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute)}
.hof-unit{font-size:.58rem;letter-spacing:.06em;white-space:nowrap}
.hof-list{margin:.35rem 0 0;display:grid;gap:.1rem;font-size:.72rem;list-style:none;padding:0}
.hof-row{display:grid;grid-template-columns:1rem 2.6rem 1fr auto;align-items:center;gap:.4rem;
         padding:.14rem .3rem;border-radius:.4rem;font-variant-numeric:tabular-nums;color:var(--text)}
.hof-row:nth-child(odd){background:var(--surface)}
.hof-rank{color:var(--text-mute);text-align:right}
.hof-who{font-weight:700;letter-spacing:.1em;color:var(--accent)}
.hof-score{font-weight:700}
.hof-when{color:var(--text-mute);font-size:.62rem;justify-self:end;white-space:nowrap}
.hof-row.is-new{animation:hofPop .9s ease}
.hof-empty{color:var(--text-mute);font-size:.68rem;padding:.2rem .3rem;line-height:1.3}
@keyframes hofPop{
  0%{background:color-mix(in srgb,var(--accent) 40%,transparent)}
  100%{background:transparent}
}

/* Narrow phones: the corner card would cover the play area, so it sits
   across the foot of the stage instead. */
@media (max-width:420px){
  .hof-overlay{top:auto;bottom:.4rem;left:.4rem;right:.4rem;width:auto}
  .hof-overlay .hof-list{grid-template-columns:1fr 1fr;gap:.1rem .5rem}
  .hof-overlay .hof-when{display:none}
  .hof-row{grid-template-columns:1rem 2.6rem 1fr}
}

/* ---------- 10. LIVE TAB ---------- */
.live-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:999px;background:var(--accent);
          box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);animation:livePulse 2s infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
  70%{box-shadow:0 0 0 .5rem transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.live-now{transition:box-shadow .4s ease}
.live-now.bump{box-shadow:0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb,var(--accent) 35%,transparent)}
#liveCount.counting{color:var(--accent-hi)}
.live-list{list-style:none;padding:0;margin:0;display:grid;gap:.25rem;max-height:11rem;overflow-y:auto}
.live-row{display:flex;align-items:center;gap:.5rem;padding:.35rem .55rem;border-radius:.6rem;
          background:var(--surface);font-size:.78rem;font-variant-numeric:tabular-nums}
.live-row.you{border:1px solid var(--accent)}
.live-row.fresh{animation:hofPop 1.4s ease}
.live-ip{font-weight:600}
.live-tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);
          background:var(--accent);border-radius:999px;padding:.05rem .4rem}
.live-when{margin-left:auto;color:var(--text-mute);font-size:.7rem}
.live-empty{color:var(--text-mute);font-size:.75rem;padding:.35rem .55rem}

@media (prefers-reduced-motion:reduce){
  .live-dot,.hof-row.is-new,.live-row.fresh{animation:none}
}