/* ==========================================================================
   PredictPlay — stylesheet
   Mobile-first. Real desktop breakpoint at 1024px.
   ========================================================================== */

/* ---------------------------------- tokens -------------------------------- */
:root {
  /* surfaces */
  --navy-900:#080d29;
  --navy-800:#0d1a5c;
  --navy-700:#122471;
  --blue-600:#14319b;
  --blue-500:#1c3fbf;
  --blue-400:#2f55e0;

  /* accent */
  --gold-500:#ffcc00;
  --gold-400:#ffe066;
  --gold-ink:#0d1a5c;

  /* light surfaces */
  --paper:#ffffff;
  --paper-2:#f4f6fb;
  --paper-3:#e8edf9;
  --line:#dce3f2;

  /* text */
  --ink:#131a33;
  --ink-2:#5a6b96;
  --on-dark:#ffffff;
  --on-dark-2:#b8c8f5;

  /* semantic */
  --win:#1e8449;
  --loss:#c0392b;

  /* spacing scale — 4px base, used consistently for vertical rhythm */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(8,13,41,.08);
  --shadow-2:0 4px 16px rgba(8,13,41,.12);
  --shadow-3:0 12px 40px rgba(8,13,41,.28);

  --tap:48px;                 /* minimum touch target */
  --app-w:460px;
  --side-w:330px;
}

/* ---------------------------------- reset --------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--navy-900);
  color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
h1,h2,h3,p,ul,ol,figure { margin:0; padding:0; }
ul,ol { list-style:none; }
button { font:inherit; color:inherit; background:none; border:0; margin:0; }
svg { display:block; width:100%; height:100%; }
[hidden] { display:none !important; }

/* --------------------------------- a11y ----------------------------------- */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:var(--s4); top:-100px; z-index:200;
  background:var(--gold-500); color:var(--gold-ink);
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  font-weight:700; text-decoration:none; transition:top .15s ease;
}
.skip-link:focus { top:var(--s4); }

:where(button,a,[tabindex]):focus-visible {
  outline:3px solid var(--gold-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* -------------------------------- layout ---------------------------------- */
.page {
  min-height:100dvh;
  background:
    radial-gradient(120% 70% at 50% 0%, #2a1a63 0%, #150f3a 42%, var(--navy-900) 100%);
}
.layout {
  display:flex;
  justify-content:center;
  gap:var(--s6);
  max-width:calc(var(--app-w) + var(--side-w) + var(--s6));
  margin-inline:auto;
  padding:0;
}
.app {
  width:100%;
  max-width:var(--app-w);
  min-height:100dvh;
  background:var(--navy-800);
  display:flex;
  flex-direction:column;
  box-shadow:0 0 80px rgba(0,0,0,.5);
  position:relative;
}
.sidebar { display:none; }

/* --------------------------------- appbar --------------------------------- */
.appbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--blue-600);
  box-shadow:0 2px 14px rgba(0,0,0,.3);
}
.iconbtn {
  flex:0 0 auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);
  color:#fff; cursor:pointer;
  transition:background .15s ease;
}
.iconbtn svg { width:22px; height:22px; }
.iconbtn:hover { background:rgba(255,255,255,.26); }
.appbar__titles { flex:1; min-width:0; display:flex; flex-direction:column; }
.appbar__brand {
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar__sub { font-size:.6875rem; font-weight:500; color:#a9bdf7; }

.coinpill {
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:36px; padding:0 var(--s3);
  border-radius:var(--r-pill);
  background:rgba(255,204,0,.16);
  border:1px solid rgba(255,204,0,.45);
  color:var(--gold-500); font-size:.875rem; font-weight:700;
  cursor:pointer; transition:background .15s ease;
}
.coinpill:hover { background:rgba(255,204,0,.3); }
.coinpill__dot {
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-400),#e0a800);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.25);
}

/* --------------------------------- topnav (desktop) ----------------------- */
.topnav { display:none; }

/* -------------------------------- screens --------------------------------- */
.screens { flex:1; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
.screens:focus { outline:none; }
.screen {
  display:flex; flex-direction:column; gap:var(--s5);
  padding:var(--s5) var(--s4);
  animation:fadeUp .22s ease;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none; } }

.sectionhead {
  font-size:.75rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#93a9ef;
}

/* --------------------------------- buttons -------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s2);
  min-height:var(--tap);
  padding:var(--s3) var(--s5);
  border-radius:var(--r-md);
  font-size:.9375rem; font-weight:700;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease, border-color .15s ease;
  text-align:center;
}
.btn:active { transform:translateY(1px); }
.btn--lg { width:100%; min-height:52px; font-size:1rem; }

.btn--accent { background:var(--gold-500); color:var(--gold-ink); box-shadow:0 2px 10px rgba(255,204,0,.22); }
.btn--accent:hover { background:var(--gold-400); }

.btn--primary { background:var(--blue-500); color:#fff; }
.btn--primary:hover { background:var(--blue-400); }

.btn--ghost { border:1.5px solid rgba(255,255,255,.3); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.09); }

.btn--ghost-dark { border:1.5px solid rgba(255,255,255,.34); color:#fff; }
.btn--ghost-dark:hover { background:rgba(255,255,255,.1); }

.stack { display:flex; flex-direction:column; gap:var(--s3); }

/* ---------------------------------- hero ---------------------------------- */
/* Type hierarchy fix: the match-up is the largest element, not the meta line. */
.hero {
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  border-radius:var(--r-lg);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.6875rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold-500);
}
.livedot {
  width:8px; height:8px; border-radius:50%; background:#2ecc71;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero__title {
  font-size:1.625rem; font-weight:800; line-height:1.15; letter-spacing:-.02em;
  text-wrap:balance;
}
.hero__title span { color:var(--gold-500); font-weight:700; }
.hero__meta { font-size:.8125rem; font-weight:500; color:#cddaff; }
.hero .btn { margin-top:var(--s1); }

/* ---------------------------------- cards --------------------------------- */
.cardlist { display:flex; flex-direction:column; gap:var(--s3); }
.card {
  width:100%;
  display:flex; align-items:center; gap:var(--s3);
  background:var(--paper-2);
  border:1px solid transparent;
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  min-height:66px;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.card:hover { background:var(--paper); border-color:var(--blue-400); }
.card:active { transform:translateY(1px); }
.card__tag {
  flex:0 0 auto; width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--blue-600); color:var(--gold-500);
  font-size:.8125rem; font-weight:800; letter-spacing:.02em;
}
.card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.card__title { color:var(--navy-800); font-size:.9375rem; font-weight:700; line-height:1.25; }
.card__meta { color:var(--ink-2); font-size:.75rem; font-weight:500; }
.card__prize {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  color:var(--blue-600); font-size:.875rem; font-weight:800;
}
.card__prize::before {
  content:""; width:13px; height:13px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-400),#e0a800);
}

/* --------------------------------- note ----------------------------------- */
.note {
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  background:rgba(255,255,255,.04);
}
.note p { font-size:.75rem; line-height:1.55; color:var(--on-dark-2); }
.note strong { color:#fff; }

/* --------------------------------- versus --------------------------------- */
.versus {
  display:flex; align-items:center; justify-content:center; gap:var(--s6);
  background:var(--blue-600);
  border-radius:var(--r-lg);
  padding:var(--s4) var(--s3);
}
.versus__side { display:flex; flex-direction:column; align-items:center; gap:var(--s2); width:100px; }
.versus__crest {
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:#dfe6f7; color:var(--blue-600);
  font-size:1.125rem; font-weight:800; letter-spacing:.02em;
  border:3px solid rgba(255,255,255,.45);
}
.versus__crest--a { border-color:var(--gold-500); }
.versus__name { font-size:.8125rem; font-weight:700; text-align:center; line-height:1.2; }
.versus__vs { color:var(--gold-500); font-size:1.0625rem; font-weight:800; }

/* --------------------------------- qcard ---------------------------------- */
.qcard {
  background:var(--paper-2);
  border-radius:var(--r-lg);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s4);
}
.qcard__top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.qcard__counter { color:var(--ink-2); font-size:.8125rem; font-weight:600; }
.qcard__pts {
  color:var(--blue-600); font-size:.75rem; font-weight:800;
  background:#e2e9fb; border-radius:var(--r-pill); padding:3px 10px;
}
.progress { height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.progress__bar {
  height:100%; width:0%;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue-500),var(--blue-400));
  transition:width .3s ease;
}
.qcard__q {
  color:var(--navy-800);
  font-size:1.25rem; font-weight:800; line-height:1.3; letter-spacing:-.01em;
  text-wrap:pretty;
}
.qcard__hint { color:var(--ink-2); font-size:.75rem; font-weight:500; }

/* ------------------------------- answers ---------------------------------- */
/* High-contrast, obviously tappable. Solid border + hover lift + explicit
   selected state, so they never read as disabled text fields. */
.answers { display:flex; flex-direction:column; gap:var(--s3); }
.answer {
  position:relative; width:100%;
  display:flex; align-items:center; gap:var(--s3);
  min-height:56px;
  padding:var(--s3) var(--s4);
  background:var(--paper);
  border:2px solid #7a91c4;   /* 3.16:1 on white — meets WCAG 1.4.11 */
  border-radius:var(--r-md);
  cursor:pointer;
  text-align:left;
  box-shadow:var(--shadow-1);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .08s ease;
  overflow:hidden;
}
.answer:hover:not(:disabled) {
  border-color:var(--blue-500);
  background:#f7f9ff;
  box-shadow:var(--shadow-2);
}
.answer:active:not(:disabled) { transform:translateY(1px); }
.answer__marker {
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  border:2px solid #7a91c4; background:#fff;
  display:grid; place-items:center;
  transition:border-color .15s ease, background .15s ease;
}
.answer__marker svg { width:14px; height:14px; opacity:0; transition:opacity .15s ease; color:#fff; }
.answer__label { flex:1; color:var(--ink); font-size:1rem; font-weight:600; line-height:1.3; }
.answer__share {
  flex:0 0 auto; color:var(--blue-600); font-size:.8125rem; font-weight:800;
  opacity:0; transition:opacity .25s ease;
}
/* share bar fills behind the label once answered */
.answer__fill {
  position:absolute; inset:0 auto 0 0; width:0;
  background:rgba(47,85,224,.1);
  transition:width .45s cubic-bezier(.22,.8,.3,1);
  pointer-events:none;
}
.answer > :not(.answer__fill) { position:relative; z-index:1; }

.answer.is-selected { border-color:var(--blue-600); background:#eef3ff; }
.answer.is-selected .answer__marker { background:var(--blue-600); border-color:var(--blue-600); }
.answer.is-selected .answer__marker svg { opacity:1; }
.answer.is-revealed .answer__share { opacity:1; }
.answer:disabled { cursor:default; }
.answer:disabled:not(.is-selected) { opacity:.72; }

/* -------------------------------- funfact --------------------------------- */
.funfact {
  background:var(--paper-2);
  border-radius:var(--r-md);
  padding:var(--s4);
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
}
.funfact__tag { color:var(--blue-600); font-size:.8125rem; font-weight:800; letter-spacing:.02em; }
.funfact__body { color:var(--ink); font-size:.8125rem; font-weight:500; line-height:1.55; text-align:center; }

/* ------------------------------- scorecard -------------------------------- */
.scorecard {
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  text-align:center;
}
.scorecard__label { color:#b6c9ff; font-size:.8125rem; font-weight:600; }
.scorecard__score { color:var(--gold-500); font-size:3rem; font-weight:800; line-height:1.05; }
.scorecard__sub { color:#e4ecff; font-size:.8125rem; font-weight:500; }

/* -------------------------------- leaders --------------------------------- */
.leaders { display:flex; flex-direction:column; gap:var(--s2); }
.leader {
  display:flex; align-items:center; gap:var(--s3);
  background:var(--paper-2);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  min-height:58px;
}
.leader.is-you { background:#fff6d9; box-shadow:inset 0 0 0 2px var(--gold-500); }
.leader__pos { width:26px; color:var(--blue-600); font-size:.875rem; font-weight:800; }
.leader__avatar {
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#dfe6f7; color:var(--blue-600);
  font-size:.8125rem; font-weight:800;
}
.leader__name { flex:1; color:var(--ink); font-size:.9375rem; font-weight:600; }
.leader__pts { color:var(--navy-800); font-size:.875rem; font-weight:800; }

/* --------------------------------- picks ---------------------------------- */
.pick {
  display:flex; flex-direction:column; gap:var(--s1);
  background:var(--paper-2);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  border-left:4px solid var(--blue-500);
}
.pick.is-won  { background:#eafbf0; border-left-color:var(--win); }
.pick.is-lost { background:#fdeeee; border-left-color:var(--loss); }
.pick__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); }
.pick__title { color:var(--ink); font-size:.9375rem; font-weight:700; line-height:1.3; }
.pick__status { flex:0 0 auto; font-size:.75rem; font-weight:800; color:var(--blue-600); }
.pick.is-won  .pick__status { color:var(--win); }
.pick.is-lost .pick__status { color:var(--loss); }
.pick__meta { color:var(--ink-2); font-size:.75rem; font-weight:600; }

/* --------------------------------- wallet --------------------------------- */
.earn { display:flex; flex-direction:column; gap:var(--s2); }
.earn__row {
  display:flex; align-items:center; gap:var(--s3);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  min-height:60px;
  width:100%;
  text-align:left;
}
.earn__row[data-clickable="1"] { cursor:pointer; transition:background .15s ease; }
.earn__row[data-clickable="1"]:hover { background:rgba(255,255,255,.12); }
.earn__icon {
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.0625rem;
  background:rgba(255,204,0,.16); color:var(--gold-500);
}
.earn__body { flex:1; display:flex; flex-direction:column; }
.earn__title { font-size:.875rem; font-weight:700; }
.earn__sub { font-size:.75rem; font-weight:500; color:var(--on-dark-2); }
.earn__amt { flex:0 0 auto; color:var(--gold-500); font-size:.875rem; font-weight:800; }
.earn__amt[data-done="1"] { color:#7f8cb5; }

.ledger { display:flex; flex-direction:column; gap:var(--s2); }
.ledger__row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  background:var(--paper-2);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
}
.ledger__label { color:var(--ink); font-size:.8125rem; font-weight:600; line-height:1.35; }
.ledger__amt { flex:0 0 auto; font-size:.9375rem; font-weight:800; }
.ledger__amt.is-in  { color:var(--win); }
.ledger__amt.is-out { color:var(--loss); }

/* --------------------------------- more ----------------------------------- */
.linklist { background:var(--paper-2); border-radius:var(--r-md); overflow:hidden; }
.linklist__head {
  padding:var(--s3) var(--s4);
  background:var(--paper-3);
  color:var(--navy-800); font-size:.9375rem; font-weight:700;
}
.linklist ul { display:flex; flex-direction:column; }
.linklist button {
  width:100%; min-height:54px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-top:1px solid var(--line);
  color:var(--ink); font-size:.9375rem; font-weight:500;
  text-align:left; cursor:pointer;
  transition:background .15s ease;
}
.linklist button:hover { background:var(--paper); }
.linklist button::after {
  content:""; flex:0 0 auto; width:8px; height:8px;
  border-right:2px solid #9aa6c4; border-bottom:2px solid #9aa6c4;
  transform:rotate(-45deg);
}

.howto {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  padding:var(--s5) var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.howto__title { color:var(--gold-500); font-size:.9375rem; font-weight:800; }
.howto__steps { display:flex; flex-direction:column; gap:var(--s3); counter-reset:step; }
.howto__steps li {
  display:flex; gap:var(--s3); align-items:flex-start;
  font-size:.8125rem; font-weight:500; line-height:1.5; color:#e2e9ff;
}
.howto__steps li::before {
  counter-increment:step; content:counter(step);
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold-500); color:var(--gold-ink);
  font-size:.6875rem; font-weight:800;
}

.legal { font-size:.75rem; line-height:1.7; color:var(--on-dark-2); text-align:center; }
.legal--muted { font-size:.6875rem; color:#8090bd; }
.legal__link {
  color:var(--gold-500); font-weight:700; text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; padding:2px;
}
.legal__link:hover { color:var(--gold-400); }

.infocard { background:var(--paper-2); border-radius:var(--r-md); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.infocard__title { color:var(--blue-600); font-size:1.25rem; font-weight:800; }
.infocard__body { color:var(--ink); font-size:.875rem; font-weight:500; line-height:1.65; }

/* -------------------------------- tabbar ---------------------------------- */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:26;
  width:100%; max-width:var(--app-w);
  margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--blue-600);
  border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  min-height:66px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:#8fa4e8; cursor:pointer;
  border-top:3px solid transparent;
  transition:color .15s ease, background .15s ease;
}
.tab:hover { color:#c9d6ff; background:rgba(255,255,255,.06); }
.tab__icon { width:22px; height:22px; }
.tab__label { font-size:.6875rem; font-weight:700; }
.tab.is-active { color:var(--gold-500); border-top-color:var(--gold-500); }

/* --------------------------------- toast ---------------------------------- */
.toast {
  position:fixed; left:50%; bottom:96px; z-index:70;
  transform:translateX(-50%) translateY(14px);
  background:var(--navy-800);
  border:1px solid rgba(255,204,0,.5);
  color:var(--gold-500);
  font-size:.8125rem; font-weight:700;
  padding:var(--s3) var(--s5);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-3);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-on { opacity:1; transform:translateX(-50%) translateY(0); }

/* -------------------------------- consent --------------------------------- */
.consent {
  position:fixed; inset:auto 0 0 0; z-index:120;
  display:flex; justify-content:center;
  padding:var(--s4);
  padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(8,13,41,0),rgba(8,13,41,.9) 40%);
}
.consent__inner {
  width:100%; max-width:520px;
  background:var(--navy-800);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}
.consent__title { font-size:1rem; font-weight:800; }
.consent__body { font-size:.8125rem; line-height:1.6; color:var(--on-dark-2); }
.consent__actions { display:flex; gap:var(--s3); flex-wrap:wrap; }
.consent__actions .btn { flex:1 1 180px; }

/* ---------------------------------- ads ----------------------------------- */
/* Ads are visually contained and labelled so they are never mistaken for app UI.
   A slot stays display:none until ads.js activates it, so hidden screens never
   contribute a phantom flex gap. Activated slots reserve their height to keep
   cumulative layout shift down. */
.adslot { display:none; }
.adslot.is-active { display:block; }
.adslot--spaced.is-mounted { margin-top:var(--s3); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.12); }

/* An unfilled unit must leave no trace - no reserved box, no separator. */
.adslot.is-unfilled { display:none !important; }
.adunit ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }

.adunit { border-radius:var(--r-md); overflow:hidden; background:var(--paper-2); }
.adunit__body { display:block; min-height:1px; }
.adunit ins.adsbygoogle { display:block; }

/* placeholder shown only when ads are not configured / blocked */
.adunit--placeholder .adunit__body {
  min-height:120px;
  display:grid; place-items:center; gap:var(--s1);
  padding:var(--s5) var(--s4);
  background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f7f9fe 10px,#f7f9fe 20px);
  text-align:center;
}
.adunit__ph-title { color:var(--navy-800); font-size:.8125rem; font-weight:700; }
.adunit__ph-sub { color:var(--ink-2); font-size:.6875rem; font-weight:500; }

/* ======================================================================
   DESKTOP  —  real layout, not a phone column in a void
   ====================================================================== */
@media (min-width:1024px) {
  .layout {
    gap:var(--s6);
    padding:var(--s6) var(--s6) var(--s7);
    align-items:flex-start;
  }
  .app {
    min-height:auto;
    border-radius:var(--r-lg);
    overflow:hidden;
    box-shadow:var(--shadow-3);
    position:sticky; top:var(--s6);
    max-height:calc(100dvh - 64px);
  }
  .appbar { border-radius:0; }

  /* bottom tabs off, inline nav on */
  .tabbar { display:none; }
  .topnav {
    display:grid; grid-template-columns:repeat(4,1fr);
    background:var(--navy-700);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .topnav__item {
    min-height:46px;
    font-size:.8125rem; font-weight:700;
    color:#8fa4e8; cursor:pointer;
    border-bottom:3px solid transparent;
    transition:color .15s ease, background .15s ease;
  }
  .topnav__item:hover { color:#cfdaff; background:rgba(255,255,255,.06); }
  .topnav__item.is-active { color:var(--gold-500); border-bottom-color:var(--gold-500); }

  .screens { padding-bottom:0; overflow-y:auto; }
  .toast { bottom:var(--s6); }

  /* sidebar on */
  .sidebar {
    display:flex; flex-direction:column; gap:var(--s4);
    width:var(--side-w); flex:0 0 var(--side-w);
    position:sticky; top:var(--s6);
  }
  .panel {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--r-md);
    padding:var(--s5) var(--s4);
    display:flex; flex-direction:column; gap:var(--s3);
  }
  .panel__title { font-size:.8125rem; font-weight:800; color:var(--gold-500); letter-spacing:.02em; }
  .leaders--compact .leader { min-height:46px; padding:var(--s2) var(--s3); background:rgba(255,255,255,.06); }
  .leaders--compact .leader__name { color:#e6ecff; font-size:.8125rem; }
  .leaders--compact .leader__pts  { color:#fff; font-size:.8125rem; }
  .leaders--compact .leader__pos  { color:var(--gold-500); font-size:.75rem; }
  .leaders--compact .leader__avatar { width:28px; height:28px; font-size:.6875rem; }
  .leaders--compact .leader.is-you { background:rgba(255,204,0,.16); box-shadow:inset 0 0 0 1px var(--gold-500); }
  .leaders--compact .leader.is-you .leader__name { color:#fff; }
  .sidebar__legal { font-size:.6875rem; color:#7b8ab8; text-align:center; line-height:1.6; }
}

/* wide desktop: a little more room */
@media (min-width:1280px) {
  :root { --app-w:500px; --side-w:360px; }
}

/* tablet: centre the app with visible framing */
@media (min-width:768px) and (max-width:1023.98px) {
  .layout { padding:var(--s6) var(--s4); }
  .app { border-radius:var(--r-lg); overflow:hidden; min-height:auto; box-shadow:var(--shadow-3); }
  .tabbar { position:sticky; max-width:none; }
  .screens { padding-bottom:0; }
}