/* ──────────────────────────────────────────────────────────────────────
   streak.css - shared styling for STREAK challenges (Fact Off, Odd One Out,
   …). Each challenge page sets --accent / --accent-dk inline and provides a
   window.STREAK_CONFIG; streak.js drives the UI built from these classes.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --pitch:#1F6B3A; --pitch-dk:#16502b; --gold:#c8a14a;
  --ink:#181410; --ink-soft:rgba(24,20,16,.55);
  --page:#f6f1e6; --page-edge:#e3d9c4; --radius:5px;
  --accent:#1F6B3A; --accent-dk:#16502b;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Archivo",system-ui,sans-serif; background:#d9d0be; color:var(--ink); -webkit-font-smoothing:antialiased; }
.hub { max-width:480px; margin:0 auto; min-height:100dvh; background:var(--page); display:flex; flex-direction:column; }

/* ── header ── */
.hub-header { background:var(--accent); padding:20px 20px 16px; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.12); }
.hub-header a.back { font-family:"Archivo"; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72); text-decoration:none; }
.hub-header a.back:hover { color:#fff; }
.kicker { display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:11px 0 5px; }
.kicker a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(200,161,74,.5); }
.hub-header h1 { font-family:"Archivo Black"; font-size:25px; line-height:1.04; }
.hub-sub { font-size:12.5px; color:rgba(255,255,255,.82); margin-top:7px; line-height:1.4; }

/* ── streak meters ── */
.streak-wrap { display:flex; gap:10px; margin-top:15px; }
.streak-box { flex:1; background:rgba(255,255,255,.12); border-radius:var(--radius); padding:9px 12px; }
.streak-box .lbl { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.streak-box .val { font-family:"Archivo Black"; font-size:22px; color:#fff; line-height:1.1; margin-top:2px; }
.streak-box.cur .val { color:var(--gold); }
.streak-box .val .fire { font-size:17px; }

/* ── league bar ── */
.lg-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 16px; background:#efe7d4; color:var(--ink); text-decoration:none; font-family:"JetBrains Mono",monospace; font-size:11px; border-bottom:1px solid var(--page-edge); }
.lg-bar b { font-family:"Archivo Black",system-ui,sans-serif; }
.lg-bar .arr { color:var(--accent); font-family:"Archivo Black",system-ui,sans-serif; }

/* ── question area ── */
.play { flex:1; padding:18px 16px 26px; display:flex; flex-direction:column; }
.q-tag { display:inline-block; align-self:center; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--accent); padding:4px 11px; border-radius:100px; }
.q-prompt { font-family:"Archivo Black"; font-size:23px; line-height:1.18; text-align:center; margin:13px 8px 4px; }
.q-note { text-align:center; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--ink-soft); margin-bottom:16px; letter-spacing:.02em; }

/* question media (e.g. a player photo above the flag options) */
.q-media { display:flex; flex-direction:column; align-items:center; margin:8px 0 0; }
.q-media .qm-photo { width:118px; height:118px; border-radius:50%; overflow:hidden; background:#efe7d4; position:relative; box-shadow:0 2px 0 rgba(0,0,0,.06); }
.q-media .qm-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.q-media .qm-name { font-family:"Archivo Black"; font-size:18px; margin-top:10px; text-align:center; }

/* flag-tile option (Where Do They Play) */
.flag-opt { display:flex; flex-direction:column; align-items:center; gap:7px; }
.flag-opt .flag-emoji { font-size:42px; line-height:1; }
.flag-opt .flag-label { font-family:"Archivo"; font-weight:700; font-size:13px; }

.opts { display:grid; gap:11px; }
.opts.duo { grid-template-columns:1fr 1fr; }
.opts.quad { grid-template-columns:1fr 1fr; }

/* option button + player card */
.opt { position:relative; border:1.5px solid var(--page-edge); background:#fff; border-radius:var(--radius); padding:12px 10px 13px; cursor:pointer; text-align:center; transition:transform .08s ease, border-color .12s ease, background .12s ease; }
.opt:active { transform:scale(.98); }
.opts.duo .opt { padding-top:15px; }
/* hover only on real pointers, so a tap doesn't leave a sticky accent outline
   on the next round's button at the same position (looked like a "you picked this side" marker) */
@media (hover: hover) and (pointer: fine) { .opt:hover { border-color:var(--accent); background:#fffdf7; } }
.opt[disabled] { cursor:default; }
.opt.correct { border-color:#2e9e57; background:#eff8f1; box-shadow:0 0 0 2px #2e9e57 inset; }
.opt.wrong   { border-color:#cf3a2a; background:#fbefed; box-shadow:0 0 0 2px #cf3a2a inset; }
.opt.dim { opacity:.45; }
.opt .verdict { position:absolute; top:7px; right:9px; font-size:15px; }

.pc-photo { position:relative; margin:0 auto; border-radius:50%; overflow:hidden; background:#efe7d4; display:flex; align-items:center; justify-content:center; }
.opts.duo .pc-photo { width:104px; height:104px; }
.opts.quad .pc-photo { width:66px; height:66px; }
.pc-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pc-fb { font-size:30px; display:none; }
.opts.quad .pc-fb { font-size:22px; }
.pc-photo.pc-flag .pc-fb { display:block; }   /* flag shown only when there's no photo / it failed */
.pc-photo.pc-loading { animation:pcPulse 1.1s ease-in-out infinite alternate; }  /* neutral while the photo loads - no flag */
@keyframes pcPulse { from { background:#efe7d4; } to { background:#e7ddc6; } }
.pc-name { font-family:"Archivo Black"; font-size:14px; line-height:1.12; margin-top:9px; }
.opts.quad .pc-name { font-size:12.5px; margin-top:7px; }
.pc-meta { font-family:"JetBrains Mono",monospace; font-size:9.5px; color:var(--ink-soft); margin-top:4px; line-height:1.35; }

.vs { align-self:center; font-family:"Archivo Black"; font-size:13px; color:var(--ink-soft); margin:2px 0; }

/* ── feedback line ── */
.fb { min-height:18px; text-align:center; font-family:"JetBrains Mono",monospace; font-size:11.5px; margin-top:15px; letter-spacing:.02em; }
.fb.ok { color:#2e9e57; } .fb.no { color:#cf3a2a; }

/* ── game-over overlay ── */
.over { position:fixed; inset:0; background:rgba(24,20,16,.58); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.over.on { display:flex; }
.over-card { width:100%; max-width:380px; background:var(--page); border-radius:14px; overflow:hidden; }
.over-top { background:var(--accent); color:#fff; padding:22px 20px; text-align:center; }
.over-top .res-lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.over-top .res-streak { font-family:"Archivo Black"; font-size:52px; line-height:1; margin:6px 0 2px; color:var(--gold); }
.over-top .res-sub { font-size:12.5px; color:rgba(255,255,255,.85); }
.over-top .res-best { font-family:"JetBrains Mono",monospace; font-size:11px; color:rgba(255,255,255,.7); margin-top:8px; }
.over-top .res-pb { display:inline-block; margin-top:9px; font-family:"Archivo Black"; font-size:11px; letter-spacing:.04em; background:var(--gold); color:var(--ink); padding:4px 11px; border-radius:100px; }
.over-body { padding:16px; }
.miss { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-soft); text-align:center; line-height:1.5; margin-bottom:14px; }
.miss b { color:var(--ink); }
.over-btns { display:flex; flex-direction:column; gap:8px; }
.ob { font-family:"Archivo Black",system-ui,sans-serif; font-size:13px; letter-spacing:.02em; padding:13px; border-radius:var(--radius); border:none; cursor:pointer; text-decoration:none; text-align:center; display:block; }
.ob.primary { background:var(--accent); color:#fff; }
.ob.gold { background:var(--gold); color:var(--ink); }
.ob.ghost { background:transparent; color:var(--ink-soft); border:1.5px solid var(--page-edge); }
.ob.ghost:hover { color:var(--ink); }

.hub-footer { text-align:center; padding:18px 20px; font-family:"Archivo"; font-size:11px; color:var(--ink-soft); border-top:1px dashed var(--page-edge); }
.hub-footer a { color:var(--ink-soft); }