/* ============================================================
   APP — structural layout & components. Colors come ONLY from
   semantic vars set by the active design. Fully responsive.
   ============================================================ */

/* ---------- layout primitives ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.stack{ display:flex; flex-direction:column; }
.stack-4>*+*{ margin-top:var(--sp-4); } .stack-6>*+*{ margin-top:var(--sp-6); } .stack-8>*+*{ margin-top:var(--sp-8); }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
/* responsive 2-column split: stacks on tablet/mobile, side-by-side on desktop.
   minmax(0,…) stops long content from blowing out the track. */
.two-col{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
@media (min-width:921px){ .two-col{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.eyebrow{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:var(--brand-text); }
.muted{ color:var(--text-dim); } .mute2{ color:var(--text-mute); }
.display-title{ font-family:var(--font-display); font-size:var(--fs-3xl); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--surface-2); --fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.7rem 1.15rem; border-radius:var(--radius-pill); font-weight:600; font-size:var(--fs-sm);
  background:var(--bg); color:var(--fg); border:1px solid var(--border);
  transition:transform var(--t-fast), background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }
.btn--primary:hover{ filter:brightness(1.06); }
.btn--accent{ background:var(--accent); color:var(--brand-contrast); border-color:transparent; }
.btn--ghost{ background:transparent; }
.btn--soft{ background:var(--brand-soft); color:var(--brand-text); border-color:transparent; }
.btn--block{ width:100%; }
.btn--sm{ padding:.45rem .8rem; font-size:var(--fs-xs); }
.btn--lg{ padding:.9rem 1.5rem; font-size:var(--fs-md); }
.btn--icon{ width:42px; height:42px; padding:0; border-radius:var(--radius-pill); }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- chips / segmented / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:.32rem .7rem; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border); font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); }
.chip.is-on{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }

.seg{ display:inline-flex; padding:4px; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); }
.seg__opt{ padding:.4rem .85rem; border-radius:var(--radius-pill); font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); transition:var(--t); }
.seg__opt.is-on{ background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-sm); }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:.26rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:600; background:var(--surface-3); color:var(--text-dim); }
.badge--win{ background:color-mix(in srgb,var(--win) 18%,transparent); color:var(--win); }
.badge--draw{ background:color-mix(in srgb,var(--draw) 20%,transparent); color:var(--draw); }
.badge--loss{ background:color-mix(in srgb,var(--loss) 18%,transparent); color:var(--loss); }
.badge--open{ background:var(--brand-soft); color:var(--brand-text); }
.badge--locked{ background:var(--surface-3); color:var(--text-mute); }
.badge--live{ background:color-mix(in srgb,var(--loss) 16%,transparent); color:var(--loss); }
.badge--live::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--loss); animation:pulse 1.3s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.points-badge{ font-variant-numeric:tabular-nums; padding:.26rem .6rem; border-radius:var(--radius-sm);
  background:var(--brand-soft); color:var(--brand-text); font-weight:700; font-size:var(--fs-xs); }

/* ---------- cards / panels ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.card--pad{ padding:var(--sp-6); }
.card__head{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--border); }
.card__title{ font-size:var(--fs-lg); font-weight:700; }
.card__body{ padding:var(--sp-6); }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); }
.input,.select{ width:100%; padding:.78rem .95rem; border-radius:var(--radius-sm); background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); transition:border-color var(--t), box-shadow var(--t), background var(--t); }
.input::placeholder{ color:var(--text-mute); }
.input:focus,.select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.help{ font-size:var(--fs-xs); color:var(--text-mute); }
.help--err{ color:var(--loss); }
.form-grid{ display:grid; gap:var(--sp-4); }

/* ---------- app shell ---------- */
.appshell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; min-height:100dvh; }
.sidebar{ position:sticky; top:0; align-self:start; height:100vh; height:100dvh; display:flex; flex-direction:column;
  border-right:1px solid var(--border); z-index:var(--z-header); }
.sidebar__brand{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-5); }
.brand-mark{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem;
  background:var(--grad-brand); color:var(--brand-contrast); flex:none; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); line-height:1; }
.brand-sub{ font-size:var(--fs-xs); color:var(--text-dim); }
[data-design="stadium"] .brand-name,[data-design="stadium"] .brand-sub{ color:var(--brand-contrast); }
.nav{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); overflow-y:auto; flex:1; }
.nav__sec{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-mute);
  padding:var(--sp-4) var(--sp-3) var(--sp-2); font-weight:700; }
.nav__item{ display:flex; align-items:center; gap:var(--sp-3); padding:.72rem .8rem; border-radius:var(--radius-sm);
  color:var(--text-dim); font-weight:600; font-size:var(--fs-sm); transition:var(--t); position:relative; }
.nav__item:hover{ background:var(--surface-2); color:var(--text); }
.nav__item.is-active{ background:var(--brand-soft); color:var(--brand-text); }
.nav__ic{ width:20px; text-align:center; font-size:1.05rem; opacity:.9; flex:none; }
.nav__badge{ margin-left:auto; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums; }
.sidebar__foot{ padding:var(--sp-4); border-top:1px solid var(--border); display:flex; align-items:center; gap:var(--sp-3); }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:var(--z-header); display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--gutter); border-bottom:1px solid var(--border); min-height:68px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); }
.topbar__head{ min-width:0; }
.topbar__title{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__sub{ font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.content{ padding:var(--sp-7) var(--gutter) var(--sp-10); flex:1; }
.content__inner{ max-width:var(--maxw); margin-inline:auto; }

.menu-btn{ display:none; }

/* user pill */
.userpill{ display:flex; align-items:center; gap:var(--sp-3); padding:.4rem; border-radius:var(--radius-pill);
  border:1px solid transparent; }
.userpill:hover{ background:var(--surface-2); border-color:var(--border); }
.avatar{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700;
  color:var(--brand-contrast); background:var(--grad-brand); font-size:var(--fs-sm); }
.avatar--lg{ width:56px; height:56px; font-size:var(--fs-lg); }
.avatar--xl{ width:74px; height:74px; font-size:var(--fs-xl); }
.avatar--xxl{ width:92px; height:92px; font-size:2rem; }
.avatar--img{ overflow:hidden; background:var(--surface-2); }
.avatar--img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- auth ---------- */
.auth{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth__aside{ position:relative; padding:clamp(2rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:space-between;
  background:var(--grad-brand); color:var(--brand-contrast); overflow:hidden; }
[data-design="aurora"] .auth__aside{ background:
  radial-gradient(60vmax 50vmax at 0 0, hsl(var(--brand-h) var(--brand-s) 40% / .8), transparent 60%),
  radial-gradient(50vmax 50vmax at 100% 100%, hsl(var(--accent-h) var(--accent-s) 44% / .7), transparent 60%),
  hsl(var(--brand-h) 40% 8%); }
.auth__aside-deco{ position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0); background-size:26px 26px; }
.auth__quote{ font-family:var(--font-display); font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.08; max-width:18ch; }
.auth__panel{ display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,4vw,3rem); }
.auth__card{ width:100%; max-width:430px; }
.auth__tabs{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.auth__tab{ flex:1; padding:.6rem; border-radius:var(--radius-sm); font-weight:600; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border); }
.auth__tab.is-on{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }
.divider{ display:flex; align-items:center; gap:var(--sp-3); color:var(--text-mute); font-size:var(--fs-xs); margin:var(--sp-4) 0; }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:var(--border); }

/* ---------- match card ---------- */
.match{ border-radius:var(--radius); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.match:hover{ box-shadow:var(--shadow); }
.match__meta{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--text-dim); flex-wrap:wrap; }
.match__group{ font-weight:700; color:var(--text); }
.match__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); }
.team{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.team--home{ justify-content:flex-end; text-align:right; flex-direction:row-reverse; }
.team__flag{ font-size:1.7rem; line-height:1; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.flagimg{ width:28px; height:21px; border-radius:4px; object-fit:cover; flex:none; vertical-align:middle;
  box-shadow:0 1px 3px rgba(0,0,0,.3); background:var(--surface-3); }
.flagimg--lg{ width:52px; height:39px; border-radius:8px; box-shadow:var(--shadow-sm); }
.flagimg--blank{ display:inline-grid; place-items:center; }
.pick .flagimg--lg{ margin-bottom:2px; }
.team__name{ font-weight:700; min-width:0; line-height:1.15; overflow-wrap:anywhere; hyphens:auto; }
.team__name small{ display:block; font-weight:500; color:var(--text-mute); font-size:var(--fs-xs); }
.scorebox{ display:flex; align-items:center; gap:var(--sp-2); }
.score{ width:52px; height:52px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:1.4rem;
  border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  -moz-appearance:textfield; font-variant-numeric:tabular-nums; transition:var(--t); }
.score::-webkit-outer-spin-button,.score::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.score:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.score:disabled{ opacity:1; background:transparent; }
.score-sep{ color:var(--text-mute); font-weight:700; }
.score-actual{ display:grid; place-items:center; min-width:64px; }
.score-actual b{ font-family:var(--font-display); font-size:1.5rem; font-variant-numeric:tabular-nums; }
.match__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--border); font-size:var(--fs-xs); }
.match.is-correct{ border-color:color-mix(in srgb,var(--win) 50%, var(--border)); }
.kick-countdown{ font-variant-numeric:tabular-nums; }

/* ---------- bonus picks ---------- */
.pick-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
.pick{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--sp-4); border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface-2); transition:var(--t); text-align:center; }
.pick:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.pick.is-sel{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft); }
.pick__flag{ font-size:2.1rem; }
.pick__name{ font-weight:700; font-size:var(--fs-sm); }
.podium-pick{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(3,1fr); }
.podium-slot{ text-align:center; }
.podium-slot__rank{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); margin-bottom:6px; }

/* ---------- leaderboard ---------- */
.podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:var(--sp-4); margin-bottom:var(--sp-7); }
.podium__step{ border-radius:var(--radius); padding:var(--sp-5) var(--sp-4); text-align:center; background:var(--surface);
  box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.podium__step--1{ padding-block:var(--sp-7); border-top:4px solid var(--gold); }
.podium__step--2{ border-top:4px solid var(--silver); }
.podium__step--3{ border-top:4px solid var(--bronze); }
.medal{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#1a1205;
  font-size:1.2rem; box-shadow:var(--shadow-sm); }
.medal--1{ background:radial-gradient(circle at 30% 25%, #ffe79a, var(--gold) 60%, var(--gold-2)); }
.medal--2{ background:radial-gradient(circle at 30% 25%, #fff, var(--silver) 60%, var(--silver-2)); }
.medal--3{ background:radial-gradient(circle at 30% 25%, #f4c89c, var(--bronze) 60%, var(--bronze-2)); }
.podium__name{ font-weight:700; }
.podium__pts{ font-family:var(--font-display); font-size:var(--fs-2xl); font-variant-numeric:tabular-nums; }

.lb{ display:flex; flex-direction:column; }
.lb__row{ display:grid; grid-template-columns:44px 1fr auto auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); transition:background var(--t); }
.lb__row:last-child{ border-bottom:none; }
.lb__row:hover{ background:var(--surface-2); }
.lb__row.is-me{ background:var(--brand-soft); }
.lb__row.is-me::after{ content:attr(data-you); margin-left:8px; font-size:var(--fs-xs); color:var(--brand-text); font-weight:700; }
.rank{ font-size:var(--fs-lg); color:var(--text-mute); font-variant-numeric:tabular-nums; text-align:center; display:block; }
.rank-medal{ font-size:1.5rem; line-height:1; text-align:center; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.lb__user{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.lb__user>div{ min-width:0; }
.lb__user b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb__badges{ display:flex; gap:4px; margin-top:5px; flex-wrap:nowrap; align-items:center; }
.bmini{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border); flex:none; }
.bmini svg{ width:13px; height:13px; }
.bmini--gold{ border-color:#e7b53d; background:rgba(240,193,75,.18); }
.bmini--silver{ border-color:#b9c2cf; background:rgba(207,214,224,.20); }
.bmini--bronze{ border-color:#cf8f53; background:rgba(207,143,83,.18); }
.lb__pts{ font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; font-size:var(--fs-lg); }
.lb__row--tap{ cursor:pointer; }
.podium__step.lb__row--tap{ cursor:pointer; }
/* Live Match Center */
.lmc-card{ border:1px solid var(--loss); box-shadow:0 0 22px -10px var(--loss); }
.lmc{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--surface-2); }
.lmc__head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.lmc__t{ display:flex; align-items:center; gap:8px; min-width:0; font-weight:700; }
.lmc__t--h{ justify-content:flex-end; text-align:right; } .lmc__t--a{ justify-content:flex-start; }
.lmc__score{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.lmc__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.lmc__min{ font-weight:700; color:var(--loss); }
.lmc__status{ text-align:center; margin-top:8px; font-weight:700; font-size:var(--fs-sm); }
.lmc--exact{ border-color:var(--win); background:color-mix(in srgb, var(--win) 12%, var(--surface-2)); }
.lmc--exact .lmc__status{ color:var(--win); }
.lmc--good .lmc__status{ color:var(--brand-text); }
.lmc--miss .lmc__status, .lmc--none .lmc__status{ color:var(--text-mute); }
/* 2nd-half flash tip */
.flash{ margin-top:10px; border-top:1px dashed var(--border); padding-top:10px; }
.flash__q{ text-align:center; font-weight:800; margin-bottom:8px; }
.flash__opts{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; }
.flash-opt{ border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:9px 10px; font:inherit; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.flash-opt:hover{ border-color:var(--brand); }
.flash-opt.is-on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-text); }
.flash__hint{ text-align:center; font-size:var(--fs-xs); color:var(--text-mute); margin-top:8px; }
/* anonymous player stat card (leaderboard tap) */
.lbstat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.lbstat{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 8px; }
.lbstat__v{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); line-height:1.1; }
.lbstat__l{ font-size:var(--fs-xs); color:var(--text-mute); margin-top:3px; }
.lb__delta{ font-size:var(--fs-xs); width:56px; text-align:right; }
.delta-up{ color:var(--win); } .delta-down{ color:var(--loss); } .delta-flat{ color:var(--text-mute); }

/* ---------- stats ---------- */
.stat{ padding:var(--sp-5); border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.stat__label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:700; }
.stat__value{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px; }
.stat__hint{ font-size:var(--fs-xs); color:var(--text-mute); margin-top:4px; }
.bar{ height:10px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.bar__fill{ height:100%; border-radius:inherit; background:var(--grad-brand); transition:width var(--t-slow); }
.barrow{ display:grid; grid-template-columns:120px 1fr 48px; align-items:center; gap:var(--sp-3); }
.barrow__label{ font-size:var(--fs-sm); color:var(--text-dim); }
.barrow__val{ font-variant-numeric:tabular-nums; font-weight:700; text-align:right; font-size:var(--fs-sm); }
.spark{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.spark__bar{ flex:1; border-radius:5px 5px 0 0; background:var(--brand-soft); min-height:4px; transition:height var(--t-slow); position:relative; }
.spark__bar.is-best{ background:var(--grad-brand); }

/* ---------- bracket ---------- */
.bracket{ display:flex; gap:var(--sp-6); overflow-x:auto; padding-bottom:var(--sp-4); }
.bround{ display:flex; flex-direction:column; justify-content:space-around; gap:var(--sp-4); min-width:230px; }
.bround__title{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
  font-weight:700; text-align:center; margin-bottom:var(--sp-2); }
.tie{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-3); display:flex; flex-direction:column; gap:6px; }
.tie__team{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; }
.tie__team .team__flag{ font-size:1.2rem; }
.tie__score{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.tie__team.is-win{ color:var(--brand-text); }
.tie__team.is-tbd{ color:var(--text-mute); font-style:italic; }

/* ---------- swatches (theme picker) ---------- */
.swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--sp-3); }
.swatch{ aspect-ratio:1; border-radius:var(--radius-sm); border:2px solid var(--border); position:relative; overflow:hidden; transition:var(--t); }
.swatch:hover{ transform:translateY(-2px) scale(1.04); }
.swatch.is-on{ border-color:var(--text); box-shadow:0 0 0 3px var(--brand-soft); }
.swatch.is-on::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); }

.design-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.design-card{ border:2px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); cursor:pointer; transition:var(--t); background:var(--surface-2); }
.design-card.is-on{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.design-card__prev{ height:74px; border-radius:var(--radius-sm); margin-bottom:var(--sp-3); position:relative; overflow:hidden; }

/* ---------- group overview (standings cards) ---------- */
.grp-card{ overflow:hidden; padding:0; }
.grp-card__head{ background:var(--grad-brand); color:var(--brand-contrast); font-family:var(--font-display);
  font-weight:800; letter-spacing:.04em; padding:.55rem var(--sp-4); text-shadow:0 1px 2px rgba(0,0,0,.22); }
.grp-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.grp-table th{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); font-weight:700; padding:7px 8px; text-align:center; }
.grp-table th.grp-th-team{ text-align:left; }
.grp-table td{ padding:8px; border-top:1px solid var(--border); text-align:center; font-variant-numeric:tabular-nums; }
.grp-table .grp-team{ text-align:left; }
.grp-team{ display:flex; align-items:center; gap:8px; font-weight:600; }
.grp-team span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-team .flagimg{ width:24px; height:18px; flex:none; }
.grp-rank{ color:var(--text-mute); font-weight:700; width:24px; position:relative; }
.grp-rank.is-q{ color:var(--brand-text); }
.grp-rank.is-q::before{ content:''; position:absolute; left:0; top:5px; bottom:5px; width:3px; border-radius:2px; background:var(--brand); }
.grp-pts{ font-weight:800; color:var(--brand-text); }

/* ---------- match calendar (compact, one line per match) ---------- */
.cal-list{ padding:0; overflow:hidden; }
.cal-day{ position:sticky; top:0; z-index:1; background:var(--surface-2); color:var(--brand-text); font-weight:800;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; padding:.5rem var(--sp-4); border-bottom:1px solid var(--border); scroll-margin-top:76px; }
.cal-day--today{ background:var(--brand-soft); border-left:3px solid var(--brand); }
.cal-row{ display:grid; grid-template-columns:1fr 72px 1fr 74px; align-items:center; gap:var(--sp-3);
  padding:.5rem var(--sp-4); border-bottom:1px solid var(--border); font-size:var(--fs-sm); }
.cal-row:last-child{ border-bottom:none; }
.cal-home{ display:flex; align-items:center; justify-content:flex-end; gap:8px; font-weight:600; text-align:right; min-width:0; }
.cal-away{ display:flex; align-items:center; gap:8px; font-weight:600; min-width:0; }
.cal-home .flagimg,.cal-away .flagimg{ width:24px; height:18px; flex:none; }
.cal-mid{ display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--text-dim); font-weight:700; }
/* finished: football icon pinned to the left edge of the cell, score next to it, one row */
.cal-row--finished .cal-mid{ justify-content:flex-start; }
.cal-tag{ font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; text-align:right; }
@media (max-width:560px){
  .cal-row{ grid-template-columns:1fr 60px 1fr; }
  .cal-tag{ display:none; }
  .cal-home .flagimg,.cal-away .flagimg{ width:20px; height:15px; }
}

/* ---------- table ---------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; }
.table--results{ min-width:0; }
.rr-match{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:600; }
.rr-match .flagimg{ width:22px; height:16px; }
.rr-match b{ font-variant-numeric:normal; }
.table th{ text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); font-weight:700; }
.table td{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--surface-2); }

/* ---------- empty / hint ---------- */
.empty{ text-align:center; padding:var(--sp-9) var(--sp-5); color:var(--text-dim); }
.empty__ic{ font-size:2.6rem; margin-bottom:var(--sp-3); }
.lock-note{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); color:var(--text-mute); }

/* ---------- hero band (dashboard) ---------- */
.hero-band{ border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.4rem); position:relative; overflow:hidden; }
/* keep hero titles legible over the brand gradient regardless of the chosen colour scheme */
.hero-band .display-title{ text-shadow:0 1px 2px rgba(0,0,0,.22); }
.hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-6); align-items:center; }

/* ---------- toast ---------- */
.toast-stack{ position:fixed; bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)); right:var(--sp-5); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-3); max-width:min(92vw,360px); }
.toast{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:var(--sp-4);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:var(--sp-3); animation:toast-in .3s var(--ease-out); }
.toast__ic{ font-size:1.2rem; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
.toast--success{ border-left:4px solid var(--win); } .toast--error{ border-left:4px solid var(--loss); }
.toast--info{ border-left:4px solid var(--brand); }

/* ---------- modal / drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(5,6,14,.55); backdrop-filter:blur(4px); z-index:var(--z-overlay); animation:fade .2s; }
@keyframes fade{ from{opacity:0} }
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:var(--gutter); }
.modal__card{ width:100%; max-width:560px; max-height:88vh; overflow:auto; animation:pop .3s var(--ease-out); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.sheet{ animation:slide .3s var(--ease-out); }
@keyframes slide{ from{ transform:translateX(-100%); } }

/* mobile menu scrim */
.menu-scrim{ display:none; }

/* design-card preview thumbnails (use active theme hues) */
.design-card__prev{ background:var(--surface-3); }
.design-card[data-design] .design-card__prev,
[data-prev="aurora"]{ background:radial-gradient(120% 120% at 0 0, hsl(var(--brand-h) 60% 22%), hsl(var(--accent-h) 55% 12%)); }
[data-prev="aurora"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:10px; height:22px; border-radius:8px;
  background:hsl(var(--brand-h) 30% 90% / .14); backdrop-filter:blur(4px); border:1px solid hsl(var(--brand-h) 40% 90% / .2); }
[data-prev="stadium"]{ background:var(--grad-brand); }
[data-prev="stadium"]::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.12) 14px 16px); }
[data-prev="editorial"]{ background:#fff; border:1px solid #e7e7ea; }
[data-prev="editorial"]::after{ content:"Aa"; position:absolute; left:12px; bottom:6px; font-family:var(--font-display);
  font-size:1.6rem; color:hsl(var(--brand-h) var(--brand-s) 42%); }
[data-prev="editorial"]::before{ content:""; position:absolute; left:12px; top:14px; width:42px; height:4px; border-radius:3px; background:hsl(var(--brand-h) var(--brand-s) 46%); }

/* ============================================================
   PROMO / LANDING + LOGIN + JOIN
   ============================================================ */
.brand-mark--img{ background:#fff; padding:5px; }
.brand-mark--img img{ object-fit:contain; }

/* toggle switch (admin: activate/deactivate company) */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{ width:46px; height:27px; border-radius:999px; background:var(--surface-3); position:relative; transition:background var(--t); flex:none; }
.switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--t); }
.switch input:checked + .switch__track{ background:var(--win); }
.switch input:checked + .switch__track::after{ transform:translateX(19px); }
.switch input:focus-visible + .switch__track{ box-shadow:0 0 0 4px var(--brand-soft); }
/* notification settings: full-width rows, label left / switch right, grouped */
.notif-row{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; padding:9px 2px; }
.notif-row .switch__label{ flex:1; }
.notif-row.is-disabled{ cursor:default; }
.notif-types{ border:1px solid var(--border); border-radius:12px; padding:2px 12px; transition:opacity var(--t); }
.notif-types .notif-row + .notif-row{ border-top:1px solid var(--border); }
.notif-types.is-off{ opacity:.5; }
.switch__label{ font-size:var(--fs-sm); font-weight:600; }
.admin-co.is-inactive{ opacity:.55; }
.admin-co__head{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; }
.admin-co__head:hover{ opacity:.82; }
.admin-co__meta{ min-width:0; display:flex; flex-direction:column; }
.admin-co__meta b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-co__sw{ margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none; }
.btn-danger{ color:var(--loss); }
.btn-danger:hover{ border-color:var(--loss); background:color-mix(in srgb, var(--loss) 12%, transparent); }
textarea.input{ resize:vertical; font-family:var(--font-body); line-height:1.45; }
.roster-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.roster-row:last-child{ border-bottom:none; }
.podium__medal{ font-size:2.4rem; line-height:1; margin-bottom:2px; }

/* prominent language switch (SK / EN) */
.lang-switch{ flex:none; }
.lang-switch .seg__opt{ padding:.45rem .75rem; font-weight:700; letter-spacing:.02em; }

.promo{ min-height:100vh; min-height:100dvh; }
.promo__bar{ position:sticky; top:0; z-index:var(--z-header); display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); padding:var(--sp-4) var(--gutter); flex-wrap:nowrap;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.promo__bar-actions{ display:flex; align-items:center; gap:var(--sp-2); flex:none; flex-wrap:nowrap; }
.promo__bar-actions .btn{ white-space:nowrap; }
.promo__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); cursor:pointer; min-width:0; }
.promo__brand b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.promo__brand .brand-mark{ width:38px; height:38px; font-size:1.2rem; }

.promo__hero, .promo__anon, .promo__cta{
  position:relative; overflow:hidden; color:var(--brand-contrast);
  background:var(--grad-brand); border-radius:var(--radius-lg); }
.promo__hero::after, .promo__anon::after, .promo__cta::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(40vmax 40vmax at 88% -20%, rgba(255,255,255,.22), transparent 60%),
            repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.05) 26px 28px); }
.promo__hero{ margin:var(--sp-6) var(--gutter) 0; }
.promo__hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,6vw,5rem) clamp(1.2rem,4vw,3.5rem); }
.promo__hero .eyebrow{ color:var(--brand-contrast); opacity:.9; }
.promo__title{ font-size:clamp(2.2rem,6vw,4.2rem); max-width:18ch; margin-top:var(--sp-3); }
.promo__lead{ font-size:clamp(1.05rem,2.2vw,1.4rem); max-width:46ch; margin-top:var(--sp-4); opacity:.95; }
.promo__hero .btn--primary{ background:var(--brand-contrast); color:var(--brand); }
.promo__hero .btn--ghost{ border-color:color-mix(in srgb,var(--brand-contrast) 60%,transparent); color:var(--brand-contrast); }
.promo__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.5rem); margin-top:var(--sp-8); }
.promo__facts div{ display:flex; flex-direction:column; }
.promo__facts b{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; }
.promo__facts span{ font-size:var(--fs-sm); opacity:.85; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }

.promo__section{ max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) 0; }
.promo__head{ margin-bottom:var(--sp-6); }
.promo__head h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin-top:6px; }
.promo__body{ font-size:var(--fs-lg); color:var(--text-dim); max-width:62ch; line-height:1.6; }

.promo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.promo-step{ position:relative; }
.promo-step__n{ position:absolute; top:-14px; right:18px; font-family:var(--font-display); font-weight:900; font-size:3.4rem;
  line-height:1; color:var(--brand-soft); }
.promo-step__ic{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--brand-soft); color:var(--brand-text); margin-bottom:var(--sp-3); }
.promo-step__ic .ic{ width:24px; height:24px; }
.promo-step h3{ font-size:var(--fs-lg); margin-bottom:6px; }

.score-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:.7rem 0; border-bottom:1px solid var(--border); }
.score-row:last-child{ border-bottom:none; }
.score-row .points-badge{ font-size:var(--fs-sm); }

.promo__anon, .promo__cta{ text-align:center; padding:clamp(2rem,5vw,3.5rem); }
.promo__anon > *, .promo__cta > *{ position:relative; z-index:1; }
.promo__anon h2, .promo__cta h2{ font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:var(--sp-3); }
.promo__anon p, .promo__cta p{ max-width:60ch; margin-inline:auto; opacity:.95; }
.promo__anon-ic{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.18); margin-bottom:var(--sp-4); }
.promo__anon-ic .ic{ width:30px; height:30px; }

.promo-deadlines{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.promo-dl{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.promo-dl .ic{ color:var(--brand-text); flex:none; margin-top:2px; }

.promo__footer{ text-align:center; color:var(--text-mute); padding:var(--sp-9) var(--gutter); margin-top:var(--sp-7);
  border-top:1px solid var(--border); font-size:var(--fs-sm); }

/* login + join centered card */
.promo--auth{ display:flex; flex-direction:column; }
.auth-card-wrap{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:clamp(1.5rem,5vw,3.5rem) var(--gutter); }
.auth-card-wrap .auth__card{ width:100%; max-width:460px; }
.join__qr{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.join__qr img{ border-radius:12px; background:#fff; padding:6px; flex:none; }
.join__url{ display:block; font-size:var(--fs-xs); color:var(--text-dim); word-break:break-all; margin-top:4px; }

/* multi-step join wizard */
.join-steps{ display:flex; gap:6px; justify-content:center; margin-bottom:var(--sp-4); }
.join-steps span{ width:28px; height:4px; border-radius:2px; background:var(--border-strong); transition:background var(--t); }
.join-steps span.is-on{ background:var(--brand); }

.qr-scan{ position:relative; width:100%; max-width:300px; aspect-ratio:1/1; margin:0 auto var(--sp-4);
  border-radius:var(--radius-md); overflow:hidden; background:#000; border:1px solid var(--border-strong); }
.qr-scan video{ width:100%; height:100%; object-fit:cover; display:block; }
.qr-scan__frame{ position:absolute; inset:16%; border:2px solid rgba(255,255,255,.92); border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28); }
.qr-scan__hint{ position:absolute; left:8px; right:8px; bottom:8px; text-align:center; color:#fff;
  font-size:var(--fs-xs); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.qr-scan--off{ background:var(--surface-2); display:grid; place-items:center; aspect-ratio:16/10; }
.qr-scan__off{ display:grid; justify-items:center; gap:var(--sp-2); padding:var(--sp-5); text-align:center; color:var(--text-mute); }
.qr-scan__off .ic{ width:34px; height:34px; }

.join-or{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-4) 0; color:var(--text-mute); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.join-or::before,.join-or::after{ content:""; flex:1; height:1px; background:var(--border); }

/* compact step-1 (QR scan) card — fits without scrolling, camera reads as part of the card */
.auth-card-wrap--center{ align-items:center; padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
.auth__card--scan{ max-width:360px; padding:var(--sp-5); }
.auth__card--scan .join-steps{ margin-bottom:var(--sp-3); }
.join-scan__head{ text-align:center; margin-bottom:var(--sp-3); }
.join-scan__head .display-title{ font-size:var(--fs-xl); line-height:1.1; }
.join-scan__head .help{ margin-top:4px; }
.auth__card--scan .qr-scan{ max-width:188px; aspect-ratio:1/1; margin:0 auto var(--sp-3); }
.auth__card--scan .qr-scan__frame{ inset:12%; box-shadow:0 0 0 100vmax rgba(0,0,0,.22); }
.join-scan__form{ display:flex; gap:var(--sp-2); align-items:stretch; }
.join-scan__form .input{ flex:1; min-width:0; }
.join-scan__form .btn{ flex:none; white-space:nowrap; }
.join-scan__foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); }
.join-scan__foot .btn{ padding-left:.6rem; padding-right:.6rem; }
.join-err{ display:none; margin-bottom:var(--sp-3); }
.join-err.show{ display:block; animation:toast-in .2s var(--ease-out); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
}
@media (max-width: 920px){
  .appshell{ grid-template-columns:1fr; }
  /* drawer must sit ABOVE the scrim, and be OPAQUE + un-blurred so the menu is crisp.
     Subtle slide-in + fade. */
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:280px; max-width:84vw;
    transform:translateX(-100%) translateZ(0); opacity:0; will-change:transform,opacity;
    transition:transform .34s var(--ease-out), opacity .34s var(--ease-out);
    box-shadow:var(--shadow-lg); z-index:90; }
  .appshell.nav-open .sidebar{ transform:translateX(0); opacity:1; background:var(--bg-2);
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* scrim: always present in DOM, fades in/out (so closing animates too); below the drawer */
  .menu-scrim{ display:block; opacity:0; pointer-events:none; animation:none; z-index:60;
    transition:opacity .3s var(--ease); }
  .appshell.nav-open .menu-scrim{ opacity:1; pointer-events:auto; }
  .menu-btn{ display:inline-flex; }
  .swatches{ grid-template-columns:repeat(6,1fr); }
  .design-cards{ grid-template-columns:1fr; }
  .auth{ grid-template-columns:1fr; }
  .auth__aside{ display:none; }
}
@media (max-width: 760px){
  /* keep the topbar on a single row */
  .topbar{ flex-wrap:nowrap; gap:var(--sp-2); min-height:60px; }
  .topbar__head{ flex:1; }
  .topbar__title{ font-size:var(--fs-lg); }
  .topbar__sub{ display:none; }
  .userpill b{ display:none; }            /* avatar only — saves width */
  .userpill{ padding:.25rem; }
  .topbar__palette{ display:none; }       /* settings still reachable via the avatar */
  .lang-switch .seg__opt{ padding:.35rem .5rem; font-size:var(--fs-xs); }
}
@media (max-width: 680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .podium{ grid-template-columns:1fr 1fr 1fr; gap:var(--sp-2); }
  .podium__step{ padding:var(--sp-4) var(--sp-2); }
  .podium__step--1{ padding-block:var(--sp-5); }
  .podium__pts{ font-size:var(--fs-xl); }
  .podium .avatar--lg{ width:44px; height:44px; font-size:var(--fs-md); }
  .podium .avatar--xl{ width:56px; height:56px; font-size:var(--fs-lg); }
  .podium .avatar--xxl{ width:66px; height:66px; font-size:var(--fs-xl); }
  .swatches{ grid-template-columns:repeat(6,1fr); }
  .podium-pick{ grid-template-columns:1fr; }
  .lb__row{ grid-template-columns:34px 1fr auto; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); }
  .lb__delta{ display:none; }
  .card__head,.card__body,.card--pad{ padding:var(--sp-4); }
  .card__head{ padding-inline:var(--sp-4); }
  .col-md{ display:none; }                 /* hide matchday column on phones */
  .table th,.table td{ padding:10px 8px; }
  .table--results th:first-child,.table--results td:first-child{ padding-left:var(--sp-4); }
  .rr-match{ gap:5px; }
  .rr-match .flagimg{ width:20px; height:15px; }
  .content{ padding-top:var(--sp-5); padding-bottom:var(--sp-9); }
  .score{ width:46px; height:46px; font-size:1.2rem; }
  .match__meta{ font-size:11px; }
  .hero-band{ padding:var(--sp-5) var(--sp-4); }
  .display-title{ font-size:1.9rem; }
  /* bigger tap targets for chips/segmented on touch */
  .seg__opt{ padding:.5rem .8rem; }
  .chip{ padding:.42rem .75rem; }
  .nav__item{ padding:.85rem .8rem; }
  .promo-steps,.promo-deadlines{ grid-template-columns:1fr; }
  .promo__facts{ gap:1.4rem 2rem; }
}
@media (max-width: 420px){
  .swatches{ grid-template-columns:repeat(4,1fr); }
  .promo__brand b{ display:none; }       /* keep the bar on one row on tiny phones */
  .lang-switch .seg__opt{ padding:.35rem .45rem; }
  .team__name{ font-size:var(--fs-sm); }
  .match__row{ gap:var(--sp-2); }
  .score{ width:42px; height:42px; font-size:1.1rem; }
  .medal{ width:38px; height:38px; font-size:1rem; }
  .stat__value{ font-size:2rem; }
}

/* ============================================================
   DASHBOARD "TODAY" PANEL · TIP ANIMATIONS · ONBOARDING · TRANSITIONS
   (added: today/untipped/countdown, mini tip animations, tutorial,
    local-time label, view transitions — all theme-aware & responsive)
   ============================================================ */
.stack-3>*+*{ margin-top:var(--sp-3); }

/* ---- today panel ---- */
.today-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1.5fr 1fr 1fr; margin-top:var(--sp-6); }
.today-card .card__body{ padding-top:var(--sp-4); }
.today-card--center .card__body{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:148px; }
.today-list{ display:flex; flex-direction:column; }
.today-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3);
  padding:.55rem .4rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none;
  border-radius:var(--radius-sm); transition:background var(--t); }
.today-row:last-child{ border-bottom:none; }
.today-row:hover{ background:var(--surface-2); }
.today-row__t{ color:var(--text-dim); font-weight:700; font-size:var(--fs-sm); }
.today-row__m{ display:flex; align-items:center; gap:6px; min-width:0; }
.today-row__m .flagimg{ width:22px; height:auto; }
.big-num{ font-family:var(--font-display); font-size:3rem; font-weight:800; line-height:1; color:var(--brand-text); }
.big-num--ok{ color:#16a34a; }
.cd{ font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:800; font-size:2.1rem;
  line-height:1; color:var(--brand-text); letter-spacing:.02em; }
.cd.is-locked{ color:var(--text-mute); font-size:1.35rem; }
.today-tz{ display:flex; align-items:center; gap:6px; margin-top:var(--sp-3); }
.today-tz .ic{ width:15px; height:15px; flex:none; }
@media (max-width:900px){ .today-grid{ grid-template-columns:1fr; } .today-card--center .card__body{ min-height:0; padding-block:var(--sp-5); } }

/* ---- mini tip-pick animations ---- */
@keyframes score-bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.16); } 100%{ transform:scale(1); } }
.score--bump{ animation:score-bump .22s var(--ease-out); }
@keyframes saved-flash{ 0%{ box-shadow:0 0 0 0 var(--brand-soft); } 28%{ box-shadow:0 0 0 4px var(--brand-soft); border-color:var(--brand); } 100%{ box-shadow:0 0 0 0 transparent; } }
.match--saved{ animation:saved-flash 1s var(--ease-out); }
@keyframes badge-pop{ 0%{ transform:scale(.65); opacity:.3; } 60%{ transform:scale(1.14); } 100%{ transform:scale(1); opacity:1; } }
.badge--pop{ animation:badge-pop .34s var(--ease-out); }

/* ---- onboarding tutorial ---- */
.tut{ text-align:center; padding:var(--sp-3) var(--sp-2) var(--sp-2); }
.tut__top{ display:flex; align-items:center; gap:var(--sp-2); }
.tut__ic{ width:66px; height:66px; margin:var(--sp-2) auto var(--sp-4); display:grid; place-items:center;
  border-radius:50%; background:var(--brand-soft); color:var(--brand-text); animation:pop .4s var(--ease-out); }
.tut__ic .ic{ width:30px; height:30px; }
.tut__title{ font-family:var(--font-display); font-size:var(--fs-2xl); margin:0 0 var(--sp-3); }
.tut__body{ color:var(--text-dim); margin:0 auto var(--sp-5); max-width:44ch; line-height:1.55; }
.tut__dots{ display:flex; gap:8px; justify-content:center; margin-bottom:var(--sp-5); }
.tut__dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); transition:background var(--t), width var(--t); }
.tut__dots span.is-on{ width:22px; border-radius:4px; background:var(--brand); }
.tut__nav{ display:flex; align-items:center; gap:var(--sp-3); }
.tut__nav .u-right{ margin-left:auto; }

/* ---- view-enter transitions ---- */
@keyframes view-enter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.content__inner{ animation:view-enter .3s var(--ease-out); }
.promo, .auth-card-wrap{ animation:view-enter .34s var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  .content__inner,.promo,.auth-card-wrap,.score--bump,.match--saved,.badge--pop,.tut__ic{ animation:none !important; }
}

/* ---- approaching tip-lock: dashboard countdown urgency ---- */
@keyframes cd-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@keyframes urgent-glow{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 4px var(--brand-soft); } }
@keyframes crit-glow{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--loss) 32%, transparent); } }
.today-card--urgent{ border-color:var(--brand); animation:urgent-glow 1.8s var(--ease) infinite; }
.today-card--crit{ border-color:var(--loss); animation:crit-glow 1s var(--ease) infinite; }
.cd.cd--urgent{ color:var(--brand-text); animation:cd-pulse 1.8s var(--ease) infinite; }
.cd.cd--crit{ color:var(--loss); animation:cd-pulse .9s var(--ease) infinite; }

/* ---- match overview: finished & in-progress (tipping closed) highlight ---- */
.match--finished, .match--live{ position:relative; }
.match--finished::before, .match--live::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; }
.match--finished::before{ background:var(--brand); opacity:.7; }
.match--live{ border-color:color-mix(in srgb, var(--loss) 40%, var(--border)); }
.match--live::before{ background:var(--loss); animation:live-bar 1.4s var(--ease) infinite; }
@keyframes live-bar{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .today-card--urgent,.today-card--crit,.cd--urgent,.cd--crit,.match--live::before{ animation:none !important; }
}

/* ---- match calendar: finished / live / soon highlights ---- */
.cal-row--finished{ background:hsl(var(--brand-h) 16% 50% / .06); }
.cal-row--finished .cal-mid b{ color:var(--text); }
.cal-row--soon{ box-shadow:inset 3px 0 0 0 var(--brand); }
.cal-row--soon .cal-mid{ color:var(--brand-text); font-weight:700; }
.cal-row--live{ box-shadow:inset 3px 0 0 0 var(--loss); background:color-mix(in srgb, var(--loss) 7%, transparent); }
.cal-live{ display:inline-flex; align-items:center; gap:5px; color:var(--loss); font-weight:800; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; }
.cal-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--loss); animation:pulse 1.3s infinite; }
/* calendar live: blinking dot before the score + match minute below it (no "live" text) */
.cal-livebox{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.05; }
.cal-livebox .cal-score{ display:inline-flex; align-items:center; gap:5px; }
.cal-livebox .cal-min{ font-size:10px; font-weight:800; color:var(--loss); margin-top:2px; font-variant-numeric:tabular-nums; }
/* global live dot — blinking red dot for any in-progress match */
.live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--loss); flex:none;
  vertical-align:middle; margin-right:3px; animation:pulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce){ .cal-live::before,.live-dot{ animation:none !important; } }

/* ============================================================
   BADGES (Stats card) — minted-coin medallions, theme-aware
   ============================================================ */
.bdg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:var(--sp-4); }
.bdg{ position:relative; text-align:center; padding:var(--sp-5) var(--sp-3) var(--sp-3); border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface-2); overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.bdg:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.bdg-chip{ position:absolute; top:8px; left:8px; width:20px; height:20px; display:grid; place-items:center; font-size:11px; font-weight:800;
  color:#0a7d34; background:hsl(146 55% 45% / .18); border:1px solid hsl(146 55% 45% / .35); border-radius:999px; }
.bdg-lock{ position:absolute; top:8px; right:8px; color:var(--text-mute); opacity:.65; }
.bdg-lock .ic{ width:14px; height:14px; }

.bmedal{ --ring:conic-gradient(from 218deg,#777,#fff,#999,#eee,#777);
  width:76px; height:76px; margin:0 auto 10px; position:relative; border-radius:50%; padding:6px;
  background:repeating-conic-gradient(rgba(0,0,0,.2) 0deg 1.7deg, rgba(255,255,255,.06) 1.7deg 3.4deg), var(--ring);
  box-shadow:0 8px 16px -8px #000, inset 0 0 0 1px rgba(255,255,255,.2), inset 0 0 0 5px rgba(0,0,0,.18); }
.bmedal::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.6), transparent 40%, transparent 62%, rgba(255,255,255,.22)); mix-blend-mode:screen; opacity:.65; }
.bmedal__core{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; position:relative; overflow:hidden;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.045) 0deg 6deg, transparent 6deg 12deg), radial-gradient(circle at 38% 30%, #2a2730, #14121a 80%);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.6), inset 0 -2px 6px rgba(255,255,255,.05); }
.bmedal__core::before{ content:""; position:absolute; top:-32%; left:-12%; width:124%; height:62%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.bmedal__icon svg{ width:34px; height:34px; display:block; filter:drop-shadow(0 1px .5px rgba(0,0,0,.7)) drop-shadow(0 -.5px .4px rgba(255,255,255,.4)); }
.bdg--gold .bmedal{ --ring:conic-gradient(from 218deg,#9a7414,#ffe9a0,#c8951a,#fff6d2,#b8860b,#ffe9a0,#9a7414); }
.bdg--silver .bmedal{ --ring:conic-gradient(from 218deg,#7c8696,#ffffff,#aab3c2,#eef2f8,#8a93a3,#ffffff,#7c8696); }
.bdg--bronze .bmedal{ --ring:conic-gradient(from 218deg,#7c4a22,#e6b483,#a55f2c,#f3cda1,#8a542a,#e6b483,#7c4a22); }
.bdg.is-locked .bmedal{ filter:grayscale(.85) brightness(.72); }
.bdg.is-locked .bmedal__icon svg{ opacity:.6; }
.bdg.is-earned.bdg--gold{ border-color:hsl(44 80% 55% / .4); }
.bdg-name{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); }
.bdg-desc{ color:var(--text-dim); font-size:var(--fs-xs); margin-top:3px; line-height:1.4; min-height:30px; }
.bdg-tier{ display:inline-block; margin-top:8px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 9px; border-radius:999px; }
.bdg--gold .bdg-tier{ color:#caa033; background:hsl(44 80% 55% / .14); }
.bdg--silver .bdg-tier{ color:#9aa3b2; background:hsl(214 18% 70% / .16); }
.bdg--bronze .bdg-tier{ color:#b97b48; background:hsl(28 60% 50% / .16); }
.bdg-prog{ height:6px; border-radius:99px; background:var(--surface-3); margin-top:10px; overflow:hidden; }
.bdg-prog i{ display:block; height:100%; background:var(--grad-brand); }
.bdg-plabel{ font-size:10px; color:var(--text-dim); margin-top:5px; font-weight:600; }

/* ---- Goal Rush (feature-flagged daily game) ---- */
.gr-stepper{ display:flex; align-items:center; gap:8px; }
.gr-stepper .btn--icon{ width:46px; height:46px; font-size:22px; font-weight:800; padding:0; }
.gr-input{ width:84px; height:56px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:1.7rem;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  -moz-appearance:textfield; font-variant-numeric:tabular-nums; }
.gr-input::-webkit-outer-spin-button,.gr-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gr-num{ font-family:var(--font-display); font-weight:800; font-size:4rem; line-height:1;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gr-bar{ height:20px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; margin-top:12px; }
.gr-bar i{ display:block; height:100%; width:0; background:var(--grad-brand); border-radius:999px; transition:width .6s var(--ease-out); }

/* ---- highlighted nav item (e.g. a new game until it launches) ---- */
.nav__item--hot{ background:var(--brand-soft); animation:nav-hot 1.9s var(--ease) infinite; }
.nav__item--hot .nav__ic{ color:var(--brand-text); }
.nav__new{ margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--brand); color:var(--brand-contrast); border-radius:999px; padding:2px 7px; line-height:1.5; }
@keyframes nav-hot{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:inset 0 0 0 1.5px var(--brand); } }
@media (prefers-reduced-motion: reduce){ .nav__item--hot{ animation:none !important; } }

/* football icon on finished calendar matches */
.cal-mid .ic.cal-ball{ width:14px; height:14px; flex:none; margin:0; color:var(--brand-text); }

/* ---- champion / winner card: golden light travelling around the border ---- */
@property --gr-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes gr-spin{ to{ --gr-ang:360deg; } }
.lb__row.is-champion, .podium__step--1{ position:relative; isolation:isolate; }
.lb__row.is-champion{ box-shadow:0 0 18px -6px rgba(243,193,75,.6); }
.podium__step--1{ box-shadow:0 0 26px -8px rgba(243,193,75,.6); }
.lb__row.is-champion::after, .podium__step--1::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--gr-ang),
    transparent 0deg, rgba(255,246,210,.15) 8deg, #fff6d2 26deg, #f3c14b 40deg, #fff6d2 54deg, rgba(255,246,210,.15) 74deg, transparent 90deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:gr-spin 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .lb__row.is-champion::after, .podium__step--1::after{ animation:none; } }

/* champion card: gently zoom the text content (nickname + points) in and out */
@keyframes champ-zoom{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
.lb__row.is-champion .lb__user b, .lb__row.is-champion .lb__pts,
.podium__step--1 .podium__name, .podium__step--1 .podium__pts{
  display:inline-block; transform-origin:center; animation:champ-zoom 1.8s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce){
  .lb__row.is-champion .lb__user b, .lb__row.is-champion .lb__pts,
  .podium__step--1 .podium__name, .podium__step--1 .podium__pts{ animation:none; }
}

/* ---- interactive affordance: classic hand cursor on clickable items ---- */
button, .btn, summary, label.switch, [role="button"],
.nav__item, .chip, .seg__opt, .pick, .today-row, .swatch, .design-card, .userpill, .tab, .lang-switch .seg__opt,
a[href], a[data-act],
[data-act]:not(input):not(select):not(textarea):not(form){ cursor:pointer; }
button:disabled, .btn:disabled, [disabled]{ cursor:not-allowed; }