/* =================================================================================================
   SOCOSTARS — interface layer
   Loaded after styles.css, on purpose. styles.css keeps every structural rule for the ~490 class
   names the views generate; this file replaces the *look* of them: tokens, shell, primitives,
   motion. Nothing here changes layout in a way a view depends on, and nothing here hides content
   (no rule sets display:none on anything that carries a figure).

   Identity: a night-sky intelligence console. Ink navy ground, starlight gold accent, tabular
   numbers everywhere a number is meant to be compared, and motion that acknowledges an action
   rather than carrying meaning.
   ================================================================================================= */

:root {
  /* Ground */
  --bg: #eaeff8;
  --surface: #ffffff;
  --surface-muted: #f4f7fc;
  --surface-2: #fbfcff;
  --sidebar: #070d1b;
  --sidebar-soft: #111c33;

  /* Ink */
  --text: #0f1a2e;
  --muted: #67758e;
  --muted-2: #97a3b8;
  --line: #e2e8f2;

  /* Brand */
  --orange: #f08036;
  --orange-deep: #cf5c18;
  --orange-soft: #fff1e6;
  --gold: #ffc04d;
  --gold-soft: #fff6e0;

  /* Data */
  --blue: #5468f0;
  --blue-soft: #eef0ff;
  --green: #12a375;
  --green-soft: #e4f8f0;
  --yellow: #cf9420;
  --yellow-soft: #fff7e5;
  --red: #dd5468;
  --red-soft: #ffeef1;

  /* Shape */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --ring: 0 0 0 3px rgba(240,128,54,.26);

  --shadow: 0 1px 2px rgba(15,26,46,.05), 0 10px 26px -12px rgba(15,26,46,.16);
  --shadow-lg: 0 2px 6px rgba(15,26,46,.06), 0 30px 60px -24px rgba(15,26,46,.3);
  --shadow-brand: 0 10px 26px -10px rgba(240,128,54,.55);

  --tap: 44px;
  --topbar-h: 68px;
  --tabs-h: 62px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  color-scheme: light;
}

body.dark {
  --bg: #070d1b;
  --surface: #0e1728;
  --surface-muted: #131e33;
  --surface-2: #101a2c;
  --sidebar: #050a15;
  --text: #e8eefb;
  --muted: #93a1b9;
  --muted-2: #6b7a93;
  --line: #1e2a42;
  --orange-soft: #322112;
  --gold-soft: #33280f;
  --blue-soft: #1b2144;
  --green-soft: #102e26;
  --yellow-soft: #302713;
  --red-soft: #351a20;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 34px 66px -26px rgba(0,0,0,.72);
  color-scheme: dark;
}
body.dark .topbar { background: rgba(7,13,27,.82); }

/* ---- Base ----------------------------------------------------------------------------------- */

body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--orange); color: #fff; }

/* Every figure that exists to be compared lines up. */
.stat-value, .data-table td, .data-table th, .health-row time, .detail-scorebox, .mc-scorebox,
.score-num, .prob-ring, .confidence, time, .stat-foot, .mc-prob-row strong, .market-box strong,
.factor-value, .home-mover-row strong, .reader-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted-2); border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Anchor jumps must clear the sticky bar instead of hiding the heading behind it. */
[id], .section-block, .page-card { scroll-margin-top: calc(var(--topbar-h) + 18px); }

/* No global `scroll-behavior: smooth` here, deliberately. The app passes an explicit behaviour at
   each of its own call sites (nav clicks ask for smooth, repaintCurrentSurface restores a reader's
   position with no behaviour, which must be instant). A global smooth silently animated the
   restore too, so a background repaint could glide the page under the reader — and if that glide
   was interrupted the position was simply lost. */

/* ---- Shell: sidebar ------------------------------------------------------------------------ */

#app-shell { display: flex; }

.sidebar {
  width: 258px; flex: 0 0 258px; padding: 22px 14px 18px; position: relative; z-index: 30;
  background:
    radial-gradient(680px 320px at 80% -10%, rgba(240,128,54,.16), transparent 62%),
    radial-gradient(420px 420px at 10% 108%, rgba(84,104,240,.16), transparent 70%),
    var(--sidebar);
  border-right: 1px solid rgba(255,255,255,.055);
}
/* A quiet starfield. Purely decorative, and it never sits over a control. */
.sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 68% 22%, rgba(255,196,77,.85), transparent),
    radial-gradient(1.1px 1.1px at 41% 38%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 82% 51%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 15% 64%, rgba(255,196,77,.6), transparent),
    radial-gradient(1.3px 1.3px at 57% 79%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 88% 91%, rgba(255,255,255,.4), transparent);
  animation: soco-twinkle 9s ease-in-out infinite;
}
.sidebar > * { position: relative; z-index: 1; }
@keyframes soco-twinkle { 0%,100% { opacity: .35; } 50% { opacity: .7; } }

.brand-lockup { padding: 2px 10px 26px; }
.brand-mark { box-shadow: 0 8px 22px -6px rgba(240,128,54,.55), inset 0 0 0 1px rgba(255,255,255,.09); }
.brand-name { font-size: 17px; letter-spacing: -.5px; }
.brand-name span { background: linear-gradient(92deg,#ffb066,#ffd79b); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sidebar-section-label { color: #5e6d88; font-size: 9px; letter-spacing: .18em; margin: 18px 0 8px; padding-left: 12px; }

.nav-item { position: relative; border-radius: 11px; padding: 10px 12px; font-size: 12.5px; font-weight: 550; color: #8e9bb2; }
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold), var(--orange)); transform: translateY(-50%);
  transition: height .26s cubic-bezier(.2,.9,.3,1.2);
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:hover::before { height: 40%; }
.nav-item.active { background: linear-gradient(90deg, rgba(240,128,54,.2), rgba(84,104,240,.1)); color: #fff; box-shadow: none; }
.nav-item.active::before { height: 62%; }
.nav-icon { transition: color .2s ease, transform .26s cubic-bezier(.2,.9,.3,1.4); }
.nav-item:hover .nav-icon { transform: translateY(-1px) scale(1.06); }
.nav-item.active .nav-icon { color: var(--gold); }
.nav-count, .nav-new { font-weight: 700; letter-spacing: .02em; }
.nav-count { color: #ffc79c; background: rgba(240,128,54,.2); }
.nav-new { color: #a9b6ff; background: rgba(84,104,240,.28); }

.shortcut-hint { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.data-status { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.075); }
.avatar, .topbar-avatar { background: linear-gradient(140deg, var(--orange), #b8452a); box-shadow: 0 0 0 2px rgba(255,255,255,.1); }

/* ---- Shell: topbar ------------------------------------------------------------------------- */

.topbar {
  height: var(--topbar-h); padding: 0 30px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(15,26,46,.03);
}
.breadcrumbs { font-size: 12.5px; font-weight: 600; }
.crumb-muted { color: var(--muted-2); }
.search-action {
  min-width: 250px; border-radius: 12px; padding: 9px 10px 9px 13px; background: var(--surface-muted);
  border-color: var(--line); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.search-action:hover { border-color: var(--orange); box-shadow: var(--ring); background: var(--surface); }
.search-symbol { color: var(--orange); }
kbd { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 6px; font-size: 9.5px; padding: 3px 6px; }
.top-action.icon-only {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  color: var(--muted); transition: background .2s ease, color .2s ease, transform .2s ease;
}
.top-action.icon-only:hover { background: var(--surface-muted); color: var(--text); transform: translateY(-1px); }
.notification-button { position: relative; }
.topbar-avatar { width: 32px; height: 32px; font-size: 10.5px; }

/* ---- Content rhythm ------------------------------------------------------------------------ */

.content-wrap { max-width: 1460px; padding: 30px 30px 72px; }
.page-heading { align-items: flex-end; margin-bottom: 22px; }
.page-heading h1 { font-size: clamp(23px, 2.3vw, 31px); letter-spacing: -.9px; font-weight: 800; margin: 8px 0 7px; }
.page-heading p { font-size: 12.5px; line-height: 1.6; max-width: 92ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 800; letter-spacing: .2em; color: var(--orange-deep); }
.eyebrow::before { content: '✦'; font-size: 9px; color: var(--gold); }

.grid { gap: 16px; }
.card {
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface); position: relative;
}
.card-pad { padding: 20px 22px; }
.section-head { margin-bottom: 14px; }
.section-head h3 { font-size: 14px; font-weight: 750; letter-spacing: -.25px; }
.section-head p { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.section-title-row { align-items: flex-end; }
.section-title-row h2 { font-size: 16.5px; font-weight: 780; letter-spacing: -.4px; }
.section-title-row p { font-size: 11.5px; color: var(--muted); }
.section-block { margin-top: 26px; }

/* ---- Primitives ---------------------------------------------------------------------------- */

.filter-button, .date-chip, .scenario-pill, .reliability, .mc-move, .status-chip {
  border-radius: 999px; font-weight: 650; letter-spacing: .01em; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* `.confidence` is a bare text label in most views (the model's confidence in a card head), not a
   pill. Filling it painted a light bar across the dark hero, so it stays text — it only gains the
   tabular figures and the green weight it already had. */
.confidence { border: 0; background: transparent; padding: 0; border-radius: 0; }
.filter-button { background: var(--surface); padding: 8px 14px; font-size: 11px; color: var(--muted); }
.filter-button:hover { color: var(--text); border-color: var(--muted-2); transform: translateY(-1px); }
.filter-button.active {
  background: linear-gradient(120deg, var(--orange), #e0631f); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-brand);
}
.date-chip { background: var(--surface-muted); color: var(--muted); }

.text-button, .back-link {
  font-size: 11.5px; font-weight: 650; color: var(--orange-deep); border-radius: 9px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.text-button:hover, .back-link:hover { color: var(--orange); transform: translateX(2px); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }

button, .text-button, .filter-button, .nav-item, .card { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px;
}

/* Rows: the densest pattern on the site — one hover behaviour for all of them. */
.health-row, .reference-card, .form-match, .match-detail-field, .mc-squad-row, .reader-row {
  border-radius: 10px; transition: background .18s ease, transform .18s ease;
}
.health-row:hover, .reference-card:hover, .form-match:hover, .mc-squad-row:hover { background: var(--surface-muted); }
.health-row { padding: 10px 12px; }
.health-row span { font-size: 11.5px; }
.health-row time { font-size: 10px; color: var(--muted); }
.health-list { gap: 2px; }

.reference-note { font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.reference-kicker { color: var(--orange-deep); font-weight: 750; letter-spacing: .12em; }
.market-box {
  border-radius: 13px; border: 1px solid var(--line); background: var(--surface-muted); padding: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.market-box:hover { border-color: var(--orange); transform: translateY(-2px); }
.market-box strong { font-size: 19px; font-weight: 780; letter-spacing: -.5px; }
.h2h-box { border-radius: 13px; border-color: var(--line); }

/* Tinted status pills used across coverage and model cards. These keep the provider's own tinting
   (yellow = scenario, green = reliability) because the colour is the signal. */
.scenario-pill { display: inline-flex; background: var(--yellow-soft); color: var(--yellow); padding: 5px 11px; font-size: 9.5px; border-radius: 999px; }
.reliability { display: inline-block; background: var(--green-soft); color: var(--green); padding: 4px 8px; border-radius: 999px; font-size: 8.5px; }
body.dark .scenario-pill { background: var(--yellow-soft); color: #e0b45c; }
body.dark .reliability { color: #4ecfa4; }

/* ---- Data tables --------------------------------------------------------------------------- */

.table-card { border-radius: var(--radius); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-muted); color: var(--muted);
  font-size: 9.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr { transition: background .16s ease; }
.data-table tbody tr:hover td { background: var(--surface-muted); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Bars and meters ----------------------------------------------------------------------- */

.hp-track, .confidence-bar, .factor-track, .intensity-track, .hm-track, .mini-bar,
.score-bar, .mc-pbar-stack, .carousel-segment-bar, .bar {
  background: var(--surface-muted); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.hp-bar, .confidence-bar-line, .mc-pbar, .mini-bar > span, .score-bar > span, .bar > span {
  border-radius: 999px; background: linear-gradient(92deg, var(--orange), var(--gold));
  transition: width .62s cubic-bezier(.2,.8,.25,1);
}
.factor-track > *, .intensity-track > *, .hm-track > * { border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.25,1); }

/* ---- Form, badges, emblems ----------------------------------------------------------------- */

.form-dot {
  width: 26px; height: 26px; border-radius: 8px; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; color: #fff; letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(15,26,46,.14);
}
.form-dot.w { background: linear-gradient(140deg, #17b384, #0d8a63); }
.form-dot.d { background: linear-gradient(140deg, #b9a24a, #94802f); }
.form-dot.l { background: linear-gradient(140deg, #e2687a, #b83f52); }
.form-dots { gap: 6px; }
.team-emblem { border-radius: 12px; box-shadow: 0 4px 12px -4px rgba(15,26,46,.4); }
.status-dot { box-shadow: 0 0 0 3px rgba(18,163,117,.14); }
.positive { color: var(--green); font-weight: 700; }

/* ---- Empty states -------------------------------------------------------------------------- */

.empty-state { padding: 34px 20px; text-align: center; }
.empty-icon {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center;
  font-size: 19px; color: var(--orange); background: var(--orange-soft);
}
.empty-state h3 { font-size: 14px; margin: 0 0 5px; }
.empty-state p { font-size: 11.5px; color: var(--muted); margin: 0 auto; max-width: 46ch; line-height: 1.6; }

/* ---- Modals and toast ---------------------------------------------------------------------- */

.modal-backdrop { background: rgba(7,13,27,.55); backdrop-filter: blur(6px); padding-top: 12vh; }
.search-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal-search-line { padding: 16px 20px; }
.modal-search-line input { font-size: 14px; }
.search-result { border-radius: 12px; transition: background .16s ease, transform .16s ease; }
.search-result:hover { transform: translateX(2px); }
.toast {
  border-radius: 13px; padding: 13px 17px; font-size: 11.5px; font-weight: 600; z-index: 120;
  background: linear-gradient(150deg, #0f1a2e, #070d1b); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08);
}
.toast.show { transform: translateY(0) scale(1); }
.toast::before { content: '★'; color: var(--gold); margin-right: 9px; }

/* ---- Footer -------------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); margin-top: 44px; padding: 28px 4px 8px; }
.site-footer-group h4 { font-size: 9.5px; letter-spacing: .16em; color: var(--muted-2); }
.site-footer-group a { font-size: 11.5px; color: var(--muted); transition: color .18s ease, transform .18s ease; }
.site-footer-group a:hover { color: var(--orange-deep); transform: translateX(2px); }
.site-footer-brand { margin-top: 6px; font-size: 10.5px; }

.noscript-card { border-radius: var(--radius); }

/* ---- Motion system -------------------------------------------------------------------------- */
/*
   Two rules keep this safe. The entrance animation is applied by render() to a single wrapper,
   never by a background repaint, so a 30-second live poll cannot make the page twitch. And every
   keyframe below ends at the element's resting state, so an interrupted animation still leaves
   readable content behind.
*/
@keyframes soco-view { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes soco-rise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes soco-pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes soco-glow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes soco-sheen { from { background-position: -140% 0; } to { background-position: 240% 0; } }
@keyframes soco-count { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#view-root.view-enter > * { animation: soco-view .42s cubic-bezier(.22,.8,.28,1) both; }
#view-root.view-enter > *:nth-child(2) { animation-delay: .05s; }
#view-root.view-enter > *:nth-child(3) { animation-delay: .1s; }
#view-root.view-enter > *:nth-child(4) { animation-delay: .14s; }
#view-root.view-enter > *:nth-child(n+5) { animation-delay: .18s; }

/* The stagger is capped at eight so a 60-card page never looks like it is loading slowly. */
#view-root.view-enter .grid > .card, #view-root.view-enter .home-section .card { animation: soco-rise .5s cubic-bezier(.22,.8,.28,1) both; animation-delay: .1s; }
#view-root.view-enter .grid > *:nth-child(2), #view-root.view-enter .home-section .card:nth-child(2) { animation-delay: .14s; }
#view-root.view-enter .grid > *:nth-child(3), #view-root.view-enter .home-section .card:nth-child(3) { animation-delay: .18s; }
#view-root.view-enter .grid > *:nth-child(4), #view-root.view-enter .home-section .card:nth-child(4) { animation-delay: .22s; }
#view-root.view-enter .grid > *:nth-child(5), #view-root.view-enter .home-section .card:nth-child(5) { animation-delay: .26s; }
#view-root.view-enter .grid > *:nth-child(n+6), #view-root.view-enter .home-section .card:nth-child(n+6) { animation-delay: .3s; }

.stat-card .stat-value { animation: soco-count .5s cubic-bezier(.22,.8,.28,1) both; }
.prob-ring { position: relative; }
.prob-ring::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(240,128,54,.4), transparent 68%); animation: soco-glow 4.4s ease-in-out infinite; }

/* Loading sheen on skeleton blocks. */
.skeleton-line {
  background: linear-gradient(90deg, var(--surface-muted) 0%, rgba(240,128,54,.16) 45%, var(--surface-muted) 90%);
  background-size: 220% 100%; animation: soco-sheen 1.5s linear infinite; border-radius: 7px;
}

/* ---- Hero ---------------------------------------------------------------------------------- */

.hero-card, .home-hero, .home-hero-feature {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background:
    radial-gradient(760px 340px at 88% -20%, rgba(240,128,54,.28), transparent 60%),
    radial-gradient(520px 420px at 4% 118%, rgba(84,104,240,.24), transparent 68%),
    linear-gradient(150deg, #101c33, #070d1b);
  border: 1px solid rgba(255,255,255,.07); box-shadow: var(--shadow-lg);
}
.hero-card h2, .home-hero h2 { font-weight: 800; letter-spacing: -.7px; }
.home-hero-feature { transition: border-color .3s ease; }
.home-hero-feature:hover { border-color: rgba(240,128,54,.5); }
.home-chip {
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  padding: 6px 12px; font-size: 10px; font-weight: 600; color: #dbe4f3; backdrop-filter: blur(6px);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.home-chip:hover { border-color: var(--gold); background: rgba(255,196,77,.14); transform: translateY(-1px); }

/* ---- Summary cards ------------------------------------------------------------------------- */

.stat-card { border-radius: var(--radius); overflow: hidden; }
.stat-card::after { background: radial-gradient(circle at 30% 30%, var(--orange-soft), transparent 70%); opacity: .9; }
.stat-icon {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px;
  color: var(--orange); background: var(--orange-soft);
}
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.9px; }
.stat-foot { font-size: 10.5px; }
body.dark .stat-card::after { background: radial-gradient(circle at 30% 30%, rgba(240,128,54,.16), transparent 70%); }

/* ---- Fixture cards and rows ---------------------------------------------------------------- */

.match-detail-hero, .mc-hero, .detail-scorebox {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface), var(--surface-muted));
}
.match-slide, .watch-card, .large-match-row, .home-prediction, .home-watch-row, .home-mover-row, .home-intel-card {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease;
}
.match-slide:hover, .watch-card:hover, .large-match-row:hover, .home-prediction:hover,
.home-watch-row:hover, .home-mover-row:hover, .home-intel-card:hover {
  transform: translateY(-3px); border-color: rgba(240,128,54,.45); box-shadow: var(--shadow-lg);
}
.match-date strong { font-weight: 750; }
.vs-pill { border-color: var(--line); color: var(--muted); background: var(--surface-muted); }
.mc-status i, .live-badge i { box-shadow: 0 0 0 3px rgba(221,84,104,.18); }

/* ---- News ---------------------------------------------------------------------------------- */

.news-item { border-radius: 12px; padding: 12px; transition: background .18s ease, transform .18s ease; }
.news-item:hover { background: var(--surface-muted); transform: translateX(2px); }
.news-copy strong a { color: var(--text); text-decoration: none; background-image: linear-gradient(var(--orange), var(--orange)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease; }
.news-copy strong a:hover { background-size: 100% 1.5px; color: var(--orange-deep); }
.news-icon { border-radius: 11px; background: var(--surface-muted); }
.flash-title { font-weight: 780; letter-spacing: -.3px; }

/* ---- Health / coverage / reference rows ---------------------------------------------------- */

.reference-card, .page-card { border-radius: var(--radius); }
.aspect-row, .mc-prob-row, .factor-row { border-radius: 10px; transition: background .18s ease; }
.aspect-row:hover, .mc-prob-row:hover, .factor-row:hover { background: var(--surface-muted); }
.insight-symbol { color: var(--gold); }

/* A grid that lost a column after operator chrome was stripped. */
.grid-1 { grid-template-columns: minmax(0, 1fr); }

/* ---- Plain-language bits ------------------------------------------------------------------- */

/* The pick-of-the-day verdict. Big enough to read at a glance, and it keeps the underdog's share
   underneath so "favoured" can never be mistaken for "will win". */
.plain-verdict { margin-top: 12px; font-size: 13px; color: #dfe7f4; line-height: 1.5; }
.plain-verdict b { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.plain-verdict small { display: block; margin-top: 5px; font-size: 10px; color: #97a7c0; letter-spacing: .01em; }
.home-chip-live { border-color: rgba(255,90,90,.5); background: rgba(255,90,90,.14); color: #ffd7d7; }
.home-chip-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; display: inline-block; margin-right: 6px; animation: soco-live-pulse 2.2s ease-out infinite; }

/* Source links stay quiet: present, reachable, never a badge competing with the data. */
.carousel-source-link { font-size: 10px; color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.carousel-source-link:hover { color: var(--orange-deep); border-bottom-color: var(--orange); }

/* ---- The card spotlight, pointer-tracked (set by soccoSpotlight) --------------------------- */
.card.is-lit {
  background-image: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(240,128,54,.12), rgba(240,128,54,0) 70%);
}
body.dark .card.is-lit { background-image: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(255,192,77,.1), rgba(255,192,77,0) 70%); }

/* ---- Mobile tab bar and back-to-top -------------------------------------------------------- */

#mobile-tabs { display: none; }
#to-top {
  position: fixed; right: 20px; bottom: 22px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(150deg, #16223a, #070d1b); color: #fff; font-size: 17px;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.4);
}
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#to-top:hover { border-color: var(--gold); }

/* ---- Responsive ---------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-wrap { padding: 26px 24px 72px; }
}

@media (max-width: 980px) {
  /* The sidebar becomes a drawer instead of shrinking, so no label is ever truncated. */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 272px; flex: none;
    transform: translateX(-102%); transition: transform .32s cubic-bezier(.22,.8,.28,1);
    box-shadow: var(--shadow-lg); overflow-y: auto; z-index: 60;
  }
  .sidebar.open { transform: none; }
  .mobile-menu { display: grid; place-items: center; font-size: 17px; color: var(--text); }
  #mobile-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(7,13,27,.5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  #mobile-scrim.show { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 16px; gap: 10px; }
  .breadcrumbs { font-size: 11.5px; }
  .search-action { min-width: 0; padding: 9px; }
  .search-action > span:not(.search-symbol), .search-action kbd { display: none; }
  .content-wrap { padding: 20px 15px calc(var(--tabs-h) + 34px); }
  .page-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0,1fr); }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-pad { padding: 16px; }

  #mobile-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(7,13,27,.94); backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  #mobile-tabs .nav-item {
    flex-direction: column; gap: 3px; padding: 7px 2px; min-height: var(--tap);
    font-size: 9.5px; font-weight: 600; border-radius: 12px; justify-content: center; text-align: center;
  }
  #mobile-tabs .nav-item .nav-icon { font-size: 17px; }
  #mobile-tabs .nav-item::before { display: none; }
  #mobile-tabs .nav-item.active { background: rgba(240,128,54,.18); }
  #to-top { bottom: calc(var(--tabs-h) + 16px); }
  .table-card { overflow-x: auto; }
  .data-table { min-width: 620px; }
  .data-table thead th { position: static; }
}

@media (max-width: 620px) {
  .grid { gap: 12px; }
  .content-wrap { padding: 17px 12px calc(var(--tabs-h) + 30px); }
  .page-heading h1 { font-size: 22px; }
  .stat-value { font-size: 23px; }
  .hero-card, .home-hero, .home-hero-feature { border-radius: var(--radius); }
}

/* ---- Motion off ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #view-root.view-enter > *, #view-root.view-enter .grid > *, #view-root.view-enter .home-section .card,
  .stat-card .stat-value, .skeleton-line, .sidebar::before, .prob-ring::before {
    animation: none !important;
  }
  .card, .card:hover, .match-slide, .match-slide:hover, .watch-card, .watch-card:hover,
  .large-match-row, .home-prediction, .home-watch-row, .home-mover-row, .home-intel-card,
  .filter-button, .filter-button:hover, .market-box, .market-box:hover, #to-top {
    transform: none !important; transition: none !important;
  }
  .hp-bar, .confidence-bar-line, .mc-pbar, .mini-bar > span, .score-bar > span, .bar > span,
  .factor-track > *, .intensity-track > *, .hm-track > * { transition: none !important; }
}

@media print {
  .sidebar, .topbar, #mobile-tabs, #to-top, .site-footer, .shortcut-hint { display: none !important; }
  .content-wrap { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* =================================================================================================
   SOCOSTARS — the fun layer

   Five additions, and each one obeys the same rule the rest of the interface does: it may dramatise
   a real value, never invent one. The rail shows fixtures and live scores the page already holds,
   the countdown counts down to a kickoff a provider published, and the constellation counts the
   stars you actually saved.
   ================================================================================================= */

/* ---- Reading progress ----------------------------------------------------------------------- */

#soco-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 130;
  background: linear-gradient(90deg, var(--orange), var(--gold), var(--blue));
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
  transition: transform .12s linear; pointer-events: none;
}

/* ---- Today's rail (the ticker) -------------------------------------------------------------- */

.soco-rail {
  position: sticky; top: var(--topbar-h); z-index: 25; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 46px; overflow: hidden;
  background: linear-gradient(90deg, #0a1220 0%, #101b2f 45%, #0a1220 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #cdd8ea;
}
.soco-rail[hidden] { display: none; }
.rail-tag {
  flex: none; display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,90,90,.16); border: 1px solid rgba(255,90,90,.4); color: #ffd3d3;
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
}
.soco-rail.has-live .rail-tag { display: inline-flex; }
.rail-tag i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; animation: soco-live-pulse 2.2s ease-out infinite; }
.rail-viewport {
  flex: 1; min-width: 0; overflow: hidden;
  /* The edges fade so items do not pop in and out of a hard border. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.rail-track { display: flex; align-items: center; gap: 9px; width: max-content; animation: rail-loop var(--rail-duration, 54s) linear infinite; }
.soco-rail.paused .rail-track { animation-play-state: paused; }
.soco-rail.static .rail-track { animation: none; }
.soco-rail.static .rail-viewport { overflow-x: auto; scrollbar-width: none; }
.soco-rail.static .rail-viewport::-webkit-scrollbar { display: none; }
@keyframes rail-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rail-item {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045); color: #dbe4f3; font-size: 11px; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.rail-item:hover, .rail-item:focus-visible { border-color: var(--gold); background: rgba(255,196,77,.14); transform: translateY(-1px); }
.rail-item.is-live { border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.12); }
.rail-item .rail-league { color: #8fa0ba; font-size: 10px; }
.rail-item .rail-match { font-weight: 650; }
.rail-item .rail-score { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--gold); }
.rail-item .rail-score.is-kick { color: #9fb0c9; font-weight: 600; }
.rail-item .rail-score.roll { animation: digit-roll .7s cubic-bezier(.2,.9,.3,1.3); }
@keyframes digit-roll { 0% { transform: translateY(-60%) scale(.9); opacity: 0; filter: blur(2px); } 60% { transform: translateY(6%) scale(1.06); opacity: 1; filter: none; } 100% { transform: none; } }
.rail-item .rail-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 3px rgba(255,90,90,.2); }
.rail-lead { color: #ffd9a8; border-color: rgba(255,196,77,.3); background: rgba(255,196,77,.1); }
.rail-btn {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: #9fb0c9; font-size: 10px;
  transition: color .2s ease, border-color .2s ease;
}
.rail-btn:hover { color: #fff; border-color: var(--gold); }

/* ---- The constellation: a tally of what you saved ------------------------------------------- */

.soco-constellation {
  width: 100%; display: flex; align-items: center; gap: 7px; margin: 0 4px 12px; padding: 10px 12px;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; background: transparent;
  color: #8593a8; font-size: 10px; text-align: left; transition: border-color .25s ease, color .25s ease;
}
.soco-constellation:hover { border-color: rgba(255,196,77,.5); color: #ffd9a8; }
.soco-constellation .const-stars { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.16); }
.soco-constellation .const-stars b { color: var(--gold); font-weight: 400; text-shadow: 0 0 8px rgba(255,196,77,.5); }
.soco-constellation .const-stars b.pop { animation: star-pop .6s cubic-bezier(.2,.9,.3,1.6); }
@keyframes star-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.5); } 100% { transform: none; } }

/* ---- Focus mode ----------------------------------------------------------------------------- */

body.focus-mode .sidebar,
body.focus-mode .soco-rail,
body.focus-mode .site-footer,
body.focus-mode #mobile-tabs,
body.focus-mode #to-top,
body.focus-mode .search-action,
body.focus-mode #shortcut-trigger,
body.focus-mode .notification-button { display: none !important; }
body.focus-mode .content-wrap { max-width: 900px; padding-top: 40px; }
body.focus-mode .topbar { background: transparent; border-bottom-color: transparent; box-shadow: none; }
body.focus-mode #focus-toggle { color: var(--orange); }

/* ---- Tilt on the pick of the day ------------------------------------------------------------ */

.tilt-host { perspective: 900px; }
.home-hero-feature.tilt {
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
  transition: transform .18s ease-out, box-shadow .25s ease;
  will-change: transform;
}
.home-hero-feature.tilt:hover { box-shadow: 0 26px 50px -24px rgba(0,0,0,.7); }

@media (max-width: 980px) {
  .soco-rail { top: var(--topbar-h); height: 42px; padding: 0 10px; }
  .rail-item { font-size: 10.5px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #soco-progress { transition: none; }
  .rail-track { animation: none !important; }
  .soco-rail .rail-viewport { overflow-x: auto; }
  .soco-constellation .const-stars b.pop, .rail-item .rail-score.roll, .rail-tag i { animation: none !important; }
  .home-hero-feature.tilt, .home-hero-feature.tilt:hover { transform: none !important; }
}

@media print {
  .soco-rail, #soco-progress, .soco-constellation { display: none !important; }
}

/* =================================================================================================
   SOCOSTARS — the device layer

   The interface above is layout-first and device-agnostic. This section adapts it to the two mobile
   platforms people actually use it on, and it is driven by three attributes that app.js sets on
   <html>: data-platform ("ios" | "android" | "other"), data-touch, and data-standalone. CSS cannot
   read a user agent, so the detection lives in JS and the decisions live here.

   Three real defects it fixes, worst first:

     1. SAFE AREAS. --tabs-h padding on the tab bar used env(safe-area-inset-bottom), but without
        viewport-fit=cover on the viewport meta iOS reports every inset as 0. The rule was always
        there and never once applied, so the bottom bar sat under the home indicator.
     2. STICKY HOVER. On a touch screen :hover latches after a tap, so a card stayed lifted and
        tinted until something else was tapped. Touch gets :active feedback instead.
     3. IOS INPUT ZOOM. iOS zooms the whole page when a field with sub-16px text takes focus, which
        left the layout scrolled sideways mid-search.
   ================================================================================================= */

/* ---- Baseline ------------------------------------------------------------------------------------ */

/* iOS inflates body text in landscape unless told otherwise — which silently breaks every table. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A tap should not wait ~300ms to learn whether a double-tap zoom is coming. */
button, [role="button"], summary, select, .nav-item, .filter-button, .rail-item, .rail-btn { touch-action: manipulation; }

/* ---- Touch screens: :active replaces :hover ------------------------------------------------------ */

@media (hover: none) {
  /* Same selectors the reduced-motion block resets: hover decoration is meaningless here and a
     latched one is worse than none. */
  .card:hover, .match-slide:hover, .watch-card:hover, .large-match-row:hover, .home-prediction:hover,
  .home-watch-row:hover, .home-mover-row:hover, .home-intel-card:hover, .filter-button:hover,
  .rail-item:hover, .market-box:hover { transform: none; }
  .card:hover { box-shadow: var(--shadow); border-color: var(--line); }

  /* Give the tap its own acknowledgement, at a size a thumb can actually hit. */
  .nav-item:active, .filter-button:active, .rail-item:active, .rail-btn:active,
  .mobile-menu:active, #theme-toggle:active { transform: scale(.97); }
  .mobile-menu, #theme-toggle, .rail-btn, #soco-rail-pause { min-width: var(--tap); min-height: var(--tap); }
}

/* ---- Safe areas ---------------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* In landscape the notch eats into the left and right edges. */
  .content-wrap {
    padding-left: calc(15px + env(safe-area-inset-left, 0px));
    padding-right: calc(15px + env(safe-area-inset-right, 0px));
  }
  #mobile-tabs {
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  }
  #to-top {
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom, 0px));
  }
  /* The drawer is a full-height column. 100dvh measures the *visible* viewport, so iOS collapsing
     its URL bar can no longer leave the drawer's last row stranded under the tab bar. */
  .sidebar { height: 100dvh; bottom: auto; padding-left: env(safe-area-inset-left, 0px); }
}

/* The page only reaches under the status bar in an installed app, so only there does the top bar
   need to make room. In Safari the inset is 0 and nothing moves. */
html[data-standalone="true"] .topbar { padding-top: env(safe-area-inset-top, 0px); }
html[data-standalone="true"] .sidebar { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }

/* ---- iOS ----------------------------------------------------------------------------------------- */

/* iOS flashes a grey box over everything tappable; on an app-like surface that reads as a bug. */
html[data-platform="ios"] button,
html[data-platform="ios"] a,
html[data-platform="ios"] [role="button"],
html[data-platform="ios"] summary { -webkit-tap-highlight-color: transparent; }

/* Momentum scrolling for the three surfaces that scroll inside the page. */
html[data-platform="ios"] .sidebar,
html[data-platform="ios"] .table-card,
html[data-platform="ios"] .rail-viewport { -webkit-overflow-scrolling: touch; }

/* iOS zooms the page when a field with text under 16px takes focus. */
@media (max-width: 980px) {
  html[data-platform="ios"] input,
  html[data-platform="ios"] select,
  html[data-platform="ios"] textarea { font-size: 16px; }
}

/* A full-bleed viewport can be dragged sideways past its own edge. */
html[data-platform="ios"] body { overscroll-behavior-x: none; }

/* ---- Android ------------------------------------------------------------------------------------- */

/* Chrome for Android keeps its tap highlight; its default grey box says nothing, a brand tint does. */
html[data-platform="android"] button,
html[data-platform="android"] a,
html[data-platform="android"] [role="button"] { -webkit-tap-highlight-color: rgba(240,128,54,.22); }

/* The rail is a transform marquee. Chrome for Android will not promote it to its own compositor
   layer unprompted, and unpromoted it stutters against the surrounding scroll. */
html[data-platform="android"] .rail-track { will-change: transform; }

/* ---- Landscape phones ---------------------------------------------------------------------------- */

/* A phone on its side is about 380px tall before browser chrome: the ticker is the first thing that
   should go, not the last. */
@media (max-height: 460px) and (orientation: landscape) {
  .soco-rail { display: none; }
  #to-top { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  html[data-standalone="false"] .content-wrap { padding-bottom: calc(var(--tabs-h) + 18px); }
}

/* ---- Install affordance (built by app.js) -------------------------------------------------------- */

.soco-install {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px;
  padding: 11px 12px; border-radius: 13px; cursor: pointer; text-align: left;
  border: 1px solid rgba(240,128,54,.4); background: rgba(240,128,54,.12); color: inherit;
  font: inherit; font-weight: 650;
}
.soco-install:hover { background: rgba(240,128,54,.2); }
.soco-install small { display: block; font-weight: 500; color: #93a1b9; font-size: 10.5px; }

.soco-ios-hint {
  position: relative; display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-muted); margin-bottom: 14px;
}
.soco-ios-hint .soco-ios-icon { font-size: 17px; line-height: 1; }
.soco-ios-hint strong { display: block; margin-bottom: 3px; }
.soco-ios-hint p { margin: 0; color: var(--muted); font-size: 12.5px; }
.soco-ios-hint button {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}