/* =========================================================================
   2026 World Cup prediction — dark "prediction engine" theme.
   Deep near-black field, neon-green accent, glowing data, staged reveals.
   ========================================================================= */
:root {
  --bg: #0d1210;
  --bg-2: #121815;
  --card: #161d19;
  --card-2: #1d2621;
  --ink: #eef2ef;
  --soft: #9aa49e;
  --faint: #69736c;
  --line: #283029;
  --line-2: #3a443d;
  --accent: #2fc77f;
  --accent-soft: rgba(47,199,127,.13);
  --accent-dim: #1c7d50;
  --glow: rgba(47,199,127,.42);
  --home: #5c9ce6;
  --draw: #d9a73f;
  --away: #e87154;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans); color: var(--ink); line-height: 1.62;
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(64rem 38rem at 50% -12rem, rgba(47,199,127,.13), transparent 72%),
    radial-gradient(50rem 34rem at 88% 8%, rgba(92,156,230,.06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
.boot { padding: 30vh 1rem; text-align: center; color: var(--faint); }
.wrap { max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(1.1rem,.4rem+2.4vw,2.6rem); }

/* ---- header ----------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(13,18,16,.85); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); }
.brand .mk {
  width: 20px; height: 20px; border: 1.5px solid var(--accent);
  border-radius: 50%; position: relative; flex: none;
  box-shadow: 0 0 12px var(--glow);
}
.brand .mk::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--accent);
}
.site-head .meta { font-family: var(--mono); font-size: .72rem; color: var(--faint); }

/* ---- reveal animations ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(14px);
  animation: rise .7s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.layer { margin-bottom: 2.8rem; }
.layer[hidden] { display: none; }
.layer-in { animation: layerIn .85s var(--ease) both; }
@keyframes layerIn {
  from { opacity: 0; transform: translateY(30px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .layer-in { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- block heading ---------------------------------------------------- */
.block-k {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: .55rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .55rem;
}
.block-k::before {
  content: ""; width: 7px; height: 7px; background: var(--accent);
  border-radius: 50%; box-shadow: 0 0 10px var(--glow); flex: none;
}

/* ---- launch hero ------------------------------------------------------ */
.launch {
  min-height: calc(100vh - 61px);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center;
}
.launch::before {
  content: ""; position: absolute; z-index: 0;
  width: min(82rem,164vw); aspect-ratio: 1; border-radius: 50%;
  left: 50%; top: 52%; transform: translate(-50%,-50%);
  background: radial-gradient(circle,
    rgba(47,199,127,.16), rgba(47,199,127,.05) 42%, transparent 67%);
  pointer-events: none;
}
.launch-inner { position: relative; z-index: 1; max-width: 42rem;
  padding: 2rem 0; animation: rise .9s var(--ease) both; }
.lk {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--accent); margin-bottom: 1.5rem;
}
.lh {
  font-size: clamp(2.9rem,1.3rem+7.6vw,6.4rem); font-weight: 850;
  letter-spacing: -.045em; line-height: 1.02; margin-bottom: 1.35rem;
  text-shadow: 0 0 44px rgba(47,199,127,.22);
}
.ls {
  font-size: clamp(1rem,.95rem+.45vw,1.2rem); color: var(--soft);
  max-width: 27ch; margin: 0 auto 2.9rem; line-height: 1.7;
}
.launch-btn {
  position: relative; font-family: var(--sans); font-size: 1.22rem;
  font-weight: 800; letter-spacing: .02em; color: #06120c; cursor: pointer;
  border: none; border-radius: 14px; padding: 1.15rem 3.4rem;
  background: linear-gradient(180deg, #43e093, #21a566);
  display: inline-flex; align-items: center; gap: .65rem;
  box-shadow: 0 0 0 1px rgba(47,199,127,.4),
              0 16px 50px -10px var(--glow), 0 0 60px -16px var(--glow);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.launch-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  border: 2px solid var(--accent); pointer-events: none;
  animation: launchPulse 2.5s var(--ease) infinite;
}
@keyframes launchPulse {
  0% { opacity: .6; transform: scale(1); }
  70%,100% { opacity: 0; transform: scale(1.26); }
}
.launch-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--accent),
              0 22px 60px -10px var(--glow), 0 0 80px -14px var(--glow);
}
.launch-btn:active { transform: translateY(-1px); }
.launch-btn .arr { font-weight: 600; transition: transform .24s var(--ease); }
.launch-btn:hover .arr { transform: translateX(6px); }
.launch-btn:disabled::after { display: none; }
.ld { font-family: var(--mono); font-size: .73rem; color: var(--faint);
  margin-top: 1.7rem; }
.launch.igniting { animation: ignite .5s var(--ease) forwards; }
@keyframes ignite {
  60% { opacity: .4; }
  to { opacity: 0; transform: scale(1.09); }
}

/* ---- monte-carlo simulation stage ------------------------------------- */
.sim-stage {
  position: fixed; inset: 0; z-index: 50; background: #080b09;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; animation: simIn .55s var(--ease) both;
}
.sim-stage[hidden] { display: none; }
.sim-stage.done { animation: simOut .7s var(--ease) both; }
@keyframes simIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes simOut { to { opacity: 0; } }
.sim-grid {
  position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(47,199,127,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,199,127,.08) 1px, transparent 1px);
  background-size: 46px 46px; animation: gridMove 2.4s linear infinite;
}
@keyframes gridMove { to { transform: translate(46px,46px); } }
.sim-scan {
  position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(47,199,127,.16), transparent);
  animation: scan 1.6s linear infinite;
}
@keyframes scan { 0% { top: -34%; } 100% { top: 100%; } }
.sim-stage.locked .sim-grid,
.sim-stage.locked .sim-scan { animation-play-state: paused; opacity: .3; }

/* warp-speed streak lines — the sense of velocity */
.sim-streaks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sim-streaks i {
  position: absolute; height: 1px; width: 16vw; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 5px var(--glow); opacity: .62;
  animation: streak linear infinite;
}
@keyframes streak {
  from { transform: translateX(-20vw); }
  to   { transform: translateX(122vw); }
}
.sim-streaks i:nth-child(1) { top: 9%;  width: 23vw; animation-duration: .54s; animation-delay: -.05s; }
.sim-streaks i:nth-child(2) { top: 21%; width: 14vw; animation-duration: .78s; animation-delay: -.31s; }
.sim-streaks i:nth-child(3) { top: 33%; width: 30vw; animation-duration: .46s; animation-delay: -.12s; }
.sim-streaks i:nth-child(4) { top: 44%; width: 12vw; animation-duration: .9s;  animation-delay: -.6s;  }
.sim-streaks i:nth-child(5) { top: 56%; width: 25vw; animation-duration: .58s; animation-delay: -.4s;  }
.sim-streaks i:nth-child(6) { top: 67%; width: 17vw; animation-duration: .7s;  animation-delay: -.2s;  }
.sim-streaks i:nth-child(7) { top: 78%; width: 33vw; animation-duration: .5s;  animation-delay: -.34s; }
.sim-streaks i:nth-child(8) { top: 88%; width: 13vw; animation-duration: .84s; animation-delay: -.07s; }
.sim-streaks i:nth-child(9) { top: 97%; width: 20vw; animation-duration: .62s; animation-delay: -.5s;  }
.sim-stage.locked .sim-streaks { opacity: 0; transition: opacity .35s var(--ease); }

/* lock shockwave ring */
.sim-shock {
  position: absolute; left: 50%; top: 50%;
  width: 62vmin; height: 62vmin; margin: -31vmin 0 0 -31vmin;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.sim-stage.locked .sim-shock { animation: simShock .8s var(--ease); }
@keyframes simShock {
  0%   { transform: scale(0); opacity: .9; }
  70%  { opacity: .45; }
  100% { transform: scale(1.3); opacity: 0; }
}
.sim-core { position: relative; z-index: 1; text-align: center;
  width: min(92vw,34rem); }
.sim-k {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--accent); margin-bottom: 1.3rem;
}
.sim-counter {
  font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: clamp(3.4rem,2rem+8vw,6.6rem); color: #fff;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px var(--glow);
}
.sim-total { font-family: var(--mono); font-size: .82rem; color: var(--faint);
  margin-top: .55rem; }
.sim-status { font-family: var(--mono); font-size: .85rem; color: var(--accent);
  margin: 1.5rem 0 1.1rem; min-height: 1.2em; }
.sim-cap { font-family: var(--mono); font-size: .72rem; color: var(--faint);
  line-height: 1.6; margin-bottom: .85rem; }
.sim-odds { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
.sim-odds.racing { display: block; position: relative; }
.sim-odds.racing .sim-row {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform .24s cubic-bezier(.22,.86,.3,1);
  will-change: transform;
}
.sim-odds.no-anim .sim-row { transition: none; }
.sim-row {
  display: grid; grid-template-columns: 1.3rem 4.6rem 1fr 3.6rem;
  gap: .7rem; align-items: center; border-radius: 6px; padding: .16rem .1rem;
  font-family: var(--mono); font-size: .82rem; color: var(--soft);
}
.sim-row.lead {
  background: linear-gradient(90deg, rgba(47,199,127,.13), rgba(47,199,127,0) 74%);
}
.sim-row .sr-rk { color: var(--faint); transition: color .3s var(--ease); }
.sim-row.lead .sr-rk { color: var(--accent); }
.sim-row.lead .sr-tm { color: #fff; text-shadow: 0 0 13px var(--glow); }
.sim-row .sr-tm { font-family: var(--sans); font-weight: 600; color: var(--ink);
  text-align: left; }
.sim-row .sr-bar { height: 7px; background: rgba(255,255,255,.06);
  border-radius: 4px; overflow: hidden; }
.sim-row .sr-bar i { display: block; height: 100%; background: var(--accent);
  border-radius: 4px; box-shadow: 0 0 10px var(--glow);
  transition: width .2s var(--ease); }
.sim-row.lead .sr-bar i { box-shadow: 0 0 16px var(--glow), 0 0 5px var(--accent); }
.sim-row .sr-pc { color: #fff; text-align: right;
  transition: color .3s var(--ease); }
.sim-row.up .sr-rk { animation: simRise .4s var(--ease); }
.sim-row.down .sr-rk { animation: simFall .36s var(--ease); }
.sim-row.up .sr-bar i { animation: simBarFlash .38s var(--ease); }
@keyframes simRise {
  0% { transform: scale(2.1); color: var(--accent); }
  100% { transform: scale(1); }
}
@keyframes simFall {
  0% { transform: scale(.55); opacity: .3; }
  100% { transform: scale(1); }
}
@keyframes simBarFlash {
  0%, 100% { filter: none; }
  42% { filter: brightness(1.95); }
}
/* a new team entering the top 8 — the cast visibly churns */
.sim-row.swap { animation: simSwapRow .5s var(--ease); }
.sim-row.swap .sr-tm { animation: simSwapTm .42s var(--ease); }
@keyframes simSwapRow {
  0% { background-color: rgba(47,199,127,.24); }
  100% { background-color: transparent; }
}
@keyframes simSwapTm {
  0% { opacity: 0; transform: translateX(-7px); }
  100% { opacity: 1; transform: none; }
}
.sim-bar { height: 3px; background: rgba(255,255,255,.07); border-radius: 2px;
  overflow: hidden; }
.sim-bar i { display: block; height: 100%; width: 0; background: var(--accent);
  box-shadow: 0 0 12px var(--glow); }
.sim-stage.locked .sim-core { animation: lockFlash .62s var(--ease); }
@keyframes lockFlash {
  0%   { transform: scale(.955); filter: brightness(2.6); }
  45%  { transform: scale(1.055); filter: brightness(1.4); }
  100% { transform: scale(1); filter: none; }
}

/* ---- predict console -------------------------------------------------- */
.pconsole {
  border: 1px solid var(--accent-dim); border-radius: 12px;
  background: var(--accent-soft); padding: 1.2rem 1.45rem; margin: 1.4rem 0 2rem;
  position: sticky; top: 72px; z-index: 12;
}
.pc-row { display: flex; align-items: center; gap: .7rem; }
.pc-spin {
  width: 15px; height: 15px; flex: none;
  border: 2px solid rgba(47,199,127,.25); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pc-status { font-weight: 700; color: var(--accent); font-size: .92rem; }
.pc-step { margin-left: auto; color: var(--soft); font-family: var(--mono);
  font-size: .78rem; }
.pc-bar { height: 4px; background: rgba(47,199,127,.16); border-radius: 2px;
  margin-top: .75rem; overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: 2px; box-shadow: 0 0 10px var(--glow);
  transition: width .7s var(--ease); }
.pconsole.done .pc-spin { animation: none; }
.pconsole.done .pc-status { color: var(--ink); }

/* ---- honesty ---------------------------------------------------------- */
.honesty {
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--card);
  padding: 2.3rem 2.4rem; margin: 1rem 0 3rem;
}
.honesty .h-k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem;
}
.honesty dl { display: grid; gap: 1rem; }
@media (min-width: 720px) { .honesty dl { grid-template-columns: 1fr 1fr; gap: 1.2rem 2.6rem; } }
.honesty dt { font-weight: 700; font-size: .92rem; margin-bottom: .2rem;
  color: var(--ink); }
.honesty dd { font-size: .86rem; color: var(--soft); }

/* ---- groups grid ------------------------------------------------------ */
.groups-grid {
  display: grid; gap: 1rem; margin-bottom: 2.8rem;
  grid-template-columns: repeat(auto-fill, minmax(286px,1fr));
}
.gcard {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 13px;
  padding: 1.55rem 1.65rem; cursor: pointer;
  display: flex; flex-direction: column; gap: .75rem;
  animation: cardIn .6s var(--ease) both;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease), background .25s var(--ease);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.gcard:hover {
  border-color: var(--accent); transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: 0 18px 40px -20px #000, 0 0 30px -10px var(--glow);
}
.gcard .gc-head { display: flex; align-items: baseline; gap: .55rem; }
.gcard .gc-id {
  font-family: var(--mono); font-size: 1.95rem; font-weight: 700;
  color: var(--accent); letter-spacing: -.05em; line-height: .9;
  text-shadow: 0 0 18px var(--glow);
}
.gcard .gc-label { font-family: var(--mono); font-size: .7rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.gcard .gc-teams { font-size: 1.02rem; font-weight: 700; line-height: 1.55;
  letter-spacing: -.01em; }
.gcard .gc-qual {
  font-size: .8rem; color: var(--soft); border-top: 1px solid var(--line);
  padding-top: .65rem; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
}
.gcard .gc-qual .go { font-family: var(--mono); color: var(--accent);
  font-weight: 600; flex: none; transition: transform .25s var(--ease); }
.gcard:hover .gc-qual .go { transform: translateX(3px); }

/* ---- champion ranking ------------------------------------------------- */
.champ {
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--card);
  padding: 2.3rem 2.4rem; margin-bottom: 1.8rem;
}
.champ .c-k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem;
}
.champ-list { display: grid; gap: 0 2.8rem; grid-template-columns: 1fr; }
@media (min-width: 660px) {
  .champ-list { grid-template-columns: 1fr 1fr; grid-auto-flow: column;
    grid-template-rows: repeat(6, auto); }
}
.champ-row {
  display: grid; grid-template-columns: 1.5rem 5rem 1fr 3rem;
  gap: .8rem; align-items: center; font-size: .92rem; padding: .52rem 0;
}
.champ-row .cr-rk { font-family: var(--mono); color: var(--faint);
  text-align: center; font-size: .82rem; }
.champ-row .cr-tm { font-weight: 600; letter-spacing: -.01em; }
.champ-row .cr-bar { height: 8px; background: var(--bg-2); border-radius: 4px;
  overflow: hidden; }
.champ-row .cr-bar i {
  display: block; height: 100%; background: var(--accent); border-radius: 4px;
  box-shadow: 0 0 10px var(--glow);
  transform-origin: left; animation: barGrow 1s var(--ease) both;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.champ-row:first-child .cr-bar i {
  background: linear-gradient(90deg, #6bf0ad, var(--accent));
}
.champ-row .cr-pc { font-family: var(--mono); text-align: right;
  font-weight: 600; }

/* ---- bracket ---------------------------------------------------------- */
.bracket-note {
  font-size: .82rem; color: var(--soft); border-left: 2px solid var(--draw);
  padding: .4rem 0 .4rem .9rem; margin-bottom: 1.1rem;
}
.bk-labels { display: flex; min-width: 1160px; margin-bottom: .45rem; }
.bk-labels span {
  flex: 1; text-align: center; font-family: var(--mono); font-size: .67rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--faint);
}
.bk-labels span.mid { flex: 1.3; color: var(--accent); font-weight: 600; }
.bracket { position: relative; overflow-x: auto; overflow-y: hidden;
  padding-bottom: .8rem; margin-bottom: 2.6rem; }
.bk-stage { position: relative; min-width: 1160px; height: 880px; }
.bk-svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.bk-link {
  fill: none; stroke: var(--line-2); stroke-width: 1.4;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.1s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.bk-rounds { position: relative; z-index: 1; display: flex; height: 100%; }
.bk-col { flex: 1; display: flex; flex-direction: column;
  justify-content: space-around; padding: 0 .5rem; }
.bk-col.mid { flex: 1.3; justify-content: center; gap: 1.1rem; }
.bk-tie {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 8px; overflow: hidden; cursor: pointer;
  animation: tieFade .5s var(--ease) both;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.bk-tie:hover {
  border-color: var(--accent); transform: scale(1.04);
  box-shadow: 0 0 24px -6px var(--glow); position: relative; z-index: 2;
}
@keyframes tieFade { from { opacity: 0; } to { opacity: 1; } }
.bk-tielabel {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
  text-align: center; padding: .3rem 0 .14rem;
}
.bk-row { display: flex; justify-content: space-between; gap: .5rem;
  padding: .36rem .62rem; font-size: .78rem; }
.bk-row + .bk-row { border-top: 1px solid var(--line); }
.bk-row .tm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--soft); }
.bk-row .gl { font-family: var(--mono); font-weight: 700; flex: none;
  color: var(--faint); }
.bk-row.w { background: var(--accent-soft); }
.bk-row.w .tm { font-weight: 700; color: var(--ink); }
.bk-row.w .gl { color: var(--accent); }
.bk-foot {
  font-size: .63rem; color: var(--faint); text-align: center;
  padding: .28rem .4rem; border-top: 1px solid var(--line); background: var(--bg-2);
}
.bk-tie.bk-final { border: 1.5px solid var(--accent);
  box-shadow: 0 0 26px -8px var(--glow); }
.bk-champ {
  text-align: center; border-radius: 12px;
  border: 1.5px solid var(--accent); background: var(--card-2);
  padding: 1.5rem 1.3rem; animation: tieFade .5s var(--ease) both;
  box-shadow: 0 0 40px -10px var(--glow), inset 0 0 30px -22px var(--accent);
}
.bk-champ .bc-k { font-family: var(--mono); font-size: .64rem;
  letter-spacing: .04em; color: var(--accent); }
.bk-champ .bc-t {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em;
  margin-top: .3rem; color: #fff; text-shadow: 0 0 22px var(--glow);
}
.bk-champ .bc-p { font-family: var(--mono); font-size: .7rem; color: var(--faint);
  margin-top: .26rem; }

/* ---- crumbs / view head ---------------------------------------------- */
.crumbs {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  font-size: .8rem; color: var(--faint); font-family: var(--mono);
  padding: 1.5rem 0 1.3rem;
}
.crumbs a { color: var(--soft); }
.crumbs a:hover { color: var(--accent); }
.view { padding-bottom: 3.5rem; }
.view-head { margin-bottom: 1.7rem; }
.view-head .vh-k {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent);
}
.view-head h1 { font-size: clamp(1.9rem,1rem+3.6vw,3.1rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.06; margin: .35rem 0 0; }
.view-head .vh-teams { color: var(--soft); margin-top: .45rem; font-size: .94rem; }

/* ---- standings -------------------------------------------------------- */
.standings { width: 100%; border-collapse: collapse; margin-bottom: 2.4rem; }
.standings th {
  text-align: left; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint);
  font-weight: 500; padding: .5rem .8rem; border-bottom: 1.5px solid var(--accent-dim);
}
.standings td { padding: .72rem .8rem; border-bottom: 1px solid var(--line);
  font-size: .94rem; }
.standings .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.standings .rk { color: var(--faint); width: 2.2rem; }
.standings tr.q td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.standings tr.q .rk { color: var(--accent); font-weight: 700; }
.standings tr.q td { background: var(--accent-soft); }
.standings .tag { font-family: var(--mono); font-size: .68rem; color: var(--soft); }
.standings .tag.adv { color: var(--accent); font-weight: 600; }

/* ---- match grid ------------------------------------------------------- */
.match-grid {
  display: grid; gap: .9rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
}
.node {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 13px;
  cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease), background .25s var(--ease);
}
.node:hover {
  border-color: var(--accent); transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: 0 18px 40px -20px #000, 0 0 30px -12px var(--glow);
}
.node-match { padding: 1.3rem 1.4rem; display: grid; gap: .75rem; }
.node-match .nm-top { display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; }
.node-match .nm-teams { font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em; }
.node-match .nm-teams .vs { color: var(--faint); font-weight: 400; margin: 0 .35rem; }
.node-match .nm-date { font-family: var(--mono); font-size: .74rem; color: var(--faint); }
.node-match .nm-foot { display: flex; justify-content: space-between;
  align-items: center; font-size: .78rem; }
.node-match .nm-foot .ml { color: var(--soft); font-family: var(--mono);
  font-size: .74rem; }
.node-match .nm-foot .cta { color: var(--accent); font-weight: 600;
  font-family: var(--mono); }
.node:hover .cta .arr, .node-match:hover .cta { }

/* ---- probability bar -------------------------------------------------- */
.pbar {
  display: flex; height: 28px; border-radius: 7px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.pbar > span {
  display: flex; align-items: center; justify-content: center;
  color: #06120c; font-family: var(--mono); font-size: .75rem; font-weight: 700;
  min-width: 0; white-space: nowrap; width: var(--w);
}
.pbar.anim > span { width: 0; animation: grow .9s var(--ease) forwards; }
@keyframes grow { to { width: var(--w); } }
.pbar .ph { background: var(--home); }
.pbar .pd { background: var(--draw); }
.pbar .pa { background: var(--away); }
.pkey { display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .76rem; color: var(--soft); }
.pkey b { font-family: var(--mono); color: var(--ink); }
.pkey .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: .35rem; vertical-align: middle; }

/* ---- match / knockout detail ----------------------------------------- */
.mv-head { margin-bottom: 1.8rem; }
.mv-head .mv-meta { font-family: var(--mono); font-size: .76rem; color: var(--faint); }
.mv-head h1 {
  font-size: clamp(2rem,1rem+4.4vw,3.5rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05; margin: .4rem 0 .5rem;
}
.mv-head h1 .vs { color: var(--line-2); font-weight: 300; }
.mv-head .mv-elo { display: flex; gap: 1.6rem; font-size: .82rem; color: var(--soft); }
.mv-head .mv-elo b { font-family: var(--mono); color: var(--ink); }
.section { margin-bottom: 2.6rem; }
.verdict {
  font-size: 1.06rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.verdict b { font-weight: 800; color: var(--accent); }
.verdict .cf { color: var(--faint); font-size: .9rem; }

/* score */
.score-wrap { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .score-wrap { grid-template-columns: 200px 1fr;
  align-items: center; } }
.score-hero { text-align: center; }
.score-hero .sh-s {
  font-family: var(--mono); font-size: 3.4rem; font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--accent);
  text-shadow: 0 0 26px var(--glow);
}
.score-hero .sh-l { font-size: .74rem; color: var(--faint); margin-top: .4rem;
  font-family: var(--mono); }
.score-rows { display: grid; gap: .42rem; }
.score-rows .r { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem;
  gap: .7rem; align-items: center; font-size: .82rem; }
.score-rows .r .sc { font-family: var(--mono); font-weight: 600; }
.score-rows .r .tk { height: 6px; background: var(--bg-2); border-radius: 3px;
  overflow: hidden; }
.score-rows .r .tk i { display: block; height: 100%; background: var(--accent);
  box-shadow: 0 0 8px var(--glow); }
.score-rows .r .pc { font-family: var(--mono); color: var(--faint);
  text-align: right; }
.score-extra { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.3rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--soft); }
.score-extra b { font-family: var(--mono); color: var(--ink); }

/* rationale */
.rlist { display: grid; }
.ritem {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.ritem:first-child { border-top: none; }
.ritem .rn { font-family: var(--mono); font-size: .82rem; color: var(--accent);
  font-weight: 600; padding-top: .15rem; }
.ritem .rt { font-weight: 700; font-size: .96rem; margin-bottom: .25rem; }
.ritem .rb { font-size: .9rem; color: var(--soft); line-height: 1.72; }

/* news */
.news-note { font-size: .82rem; color: var(--soft);
  border-left: 2px solid var(--draw); padding: .4rem 0 .4rem .9rem;
  margin-bottom: 1.4rem; }
.news-cols { display: grid; gap: 1.8rem; }
@media (min-width: 700px) { .news-cols { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.news-col h4 { font-size: 1rem; margin-bottom: .7rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line); }
.news-col h4 .sd { font-family: var(--mono); font-size: .7rem; color: var(--faint);
  font-weight: 400; }
.brief { font-size: .88rem; color: var(--soft); line-height: 1.78; }
.brief .by { display: block; margin-top: .55rem; font-family: var(--mono);
  font-size: .7rem; color: var(--faint); }
.brief.empty { color: var(--faint); }
.heads { list-style: none; margin-top: .9rem; display: grid; gap: .55rem; }
.heads li { font-size: .82rem; line-height: 1.5; padding-left: .9rem;
  position: relative; }
.heads li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.heads a { color: var(--soft); border-bottom: 1px solid var(--line-2); }
.heads a:hover { color: var(--accent); border-color: var(--accent); }
.heads .src { color: var(--faint); font-family: var(--mono); font-size: .7rem; }

/* ---- deep analysis ---------------------------------------------------- */
.deep-gate {
  text-align: center; border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 2.1rem 2rem; background: var(--bg-2);
}
.deep-gate p { color: var(--soft); font-size: .88rem; max-width: 42ch;
  margin: 0 auto 1.1rem; line-height: 1.7; }
.deep-gate .cost { font-family: var(--mono); color: var(--accent); }
.btn-predict {
  font-family: var(--sans); font-size: 1rem; font-weight: 800;
  color: #06120c; background: linear-gradient(180deg,#43e093,#21a566);
  border: none; padding: .85rem 2.2rem; border-radius: 10px; cursor: pointer;
  box-shadow: 0 10px 30px -12px var(--glow), 0 0 0 1px rgba(47,199,127,.35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-predict:hover { transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px var(--glow), 0 0 0 1px var(--accent); }
.btn-predict:disabled { background: var(--line-2); color: var(--faint);
  cursor: default; transform: none; box-shadow: none; }
.deep-loading {
  color: var(--faint); font-size: .9rem; padding: 1.2rem 0;
  display: flex; align-items: center; gap: .65rem;
}
.deep-loading::before {
  content: ""; width: 15px; height: 15px; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.pl-disc { font-family: var(--mono); font-size: .72rem; color: var(--faint);
  margin-top: 1rem; }
.da-pre { color: var(--soft); font-size: .92rem; margin-bottom: 1.1rem;
  line-height: 1.8; }
.da-sec { padding: 1.15rem 0; border-top: 1px solid var(--line); }
.da-sec:first-child { border-top: none; padding-top: .2rem; }
.da-h {
  font-weight: 800; font-size: 1.02rem; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .55rem; letter-spacing: -.01em;
}
.da-h::before { content: ""; width: 4px; height: 1.05rem; background: var(--accent);
  border-radius: 2px; flex: none; box-shadow: 0 0 8px var(--glow); }
.da-b { font-size: .92rem; color: var(--soft); line-height: 1.88; }
.da-cursor {
  display: inline-block; width: 7px; height: 1em; background: var(--accent);
  vertical-align: -2px; margin-left: 2px; animation: blink 1s step-end infinite;
  box-shadow: 0 0 8px var(--glow);
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- footer ----------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 1.8rem 0 3rem;
  font-size: .78rem; color: var(--faint); }
.footer p { margin-bottom: .4rem; }
.beian { font-size: .74rem; margin-top: .7rem; }
.beian a { color: var(--faint); text-decoration: none; }
.beian a:hover { color: var(--soft); text-decoration: underline; }
.beian .bsep { color: var(--line-2); margin: 0 .55rem; }
.footer code { font-family: var(--mono); font-size: .74rem; color: var(--soft); }

/* ---- head-to-head history --------------------------------------------- */
.h2h-sum {
  display: flex; align-items: baseline; gap: 1rem 1.4rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.hs-big {
  font-family: var(--mono); font-weight: 700; font-size: 2.6rem;
  color: #fff; line-height: 1; text-shadow: 0 0 22px var(--glow);
}
.hs-big span {
  font-family: var(--sans); font-size: .85rem; font-weight: 400;
  color: var(--faint); margin-left: .4rem; text-shadow: none;
}
.hs-meta { font-size: .87rem; color: var(--soft); }
.h2h-bar {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  margin-bottom: .7rem; background: var(--bg-2); border: 1px solid var(--line);
}
.h2h-bar span {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: #07140d; min-width: 0;
}
.h2h-bar .hb-a { background: var(--accent); }
.h2h-bar .hb-d { background: var(--draw); }
.h2h-bar .hb-b { background: var(--away); }
.h2h-legend {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--soft); margin-bottom: 1.5rem;
}
.h2h-legend i {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: .45rem; vertical-align: -1px;
}
.h2h-legend .lg-a { background: var(--accent); }
.h2h-legend .lg-d { background: var(--draw); }
.h2h-legend .lg-b { background: var(--away); }
.h2h-list { display: flex; flex-direction: column; gap: .4rem; }
.h2h-row {
  display: grid;
  grid-template-columns: 6rem 7.6rem 1fr auto;
  gap: .5rem 1rem; align-items: center;
  padding: .72rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-left-width: 3px;
  border-left-color: var(--line-2); border-radius: 9px;
  font-size: .85rem; color: inherit; text-decoration: none;
  cursor: pointer; transition: background .15s var(--ease);
}
.h2h-row:hover { background: var(--card-2); }
.h2h-row.hr-win  { border-left-color: var(--accent); }
.h2h-row.hr-draw { border-left-color: var(--draw); }
.h2h-row.hr-loss { border-left-color: var(--away); }
.hr-dt {
  font-family: var(--mono); font-size: .78rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.hr-tn { color: var(--soft); }
.hr-mt { color: var(--ink); }
.hr-mt b {
  font-family: var(--mono); color: #fff; font-size: .95rem;
  margin: 0 .15rem; font-variant-numeric: tabular-nums;
}
.hr-po {
  margin-left: .55rem; font-size: .72rem; color: var(--draw);
  white-space: nowrap;
}
.hr-vn {
  color: var(--faint); font-size: .78rem; text-align: right;
  white-space: nowrap;
}
.hr-goals {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .28rem .85rem;
  margin-top: .62rem; padding-top: .56rem;
  border-top: 1px solid var(--line); font-size: .78rem;
}
.hg-ic { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.hg { color: var(--soft); white-space: nowrap; }
.hg b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  margin-right: .12rem;
}
.hg-h b { color: var(--accent); }
.hg-a b { color: var(--away); }
.hg .gm {
  font-style: normal; color: var(--faint); font-size: .7rem;
  margin-left: .22rem;
}
.h2h-more { margin-top: .55rem; }
.h2h-more summary {
  cursor: pointer; font-family: var(--mono); font-size: .82rem;
  color: var(--accent); padding: .7rem 0; list-style: none; user-select: none;
}
.h2h-more summary::-webkit-details-marker { display: none; }
.h2h-more summary::before { content: "▸  "; }
.h2h-more[open] summary::before { content: "▾  "; }
.h2h-more .h2h-list { margin-top: .35rem; }
.h2h-src {
  margin-top: 1.1rem; padding: .95rem 1.1rem;
  background: var(--accent-soft); border: 1px solid var(--accent-dim);
  border-radius: 9px; font-size: .77rem; color: var(--soft); line-height: 1.75;
}
.h2h-src a { color: var(--accent); word-break: break-all; }
.h2h-empty { font-size: .96rem; color: var(--ink); margin-bottom: .55rem; }
.h2h-empty b { color: #fff; }
.h2h-note { font-size: .85rem; color: var(--soft); line-height: 1.7; }

/* ---- live: finished matches & actual results -------------------------- */
.node-match.done { border-color: var(--line-2); }
.node-match.done .cta { color: var(--soft); }
.nm-done {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: #fff; background: var(--accent-soft);
  border: 1px solid var(--accent-dim); border-radius: 6px;
  padding: .15rem .5rem;
}
.nm-hit {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  border-radius: 5px; padding: .12rem .42rem; margin-left: auto;
}
.nm-hit.ok { color: var(--accent); background: var(--accent-soft); }
.nm-hit.no { color: var(--away); background: rgba(232,113,84,.14); }
.actual-sec {
  border: 1px solid var(--accent-dim); border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-soft), transparent 62%);
  padding: 1.6rem 1.7rem;
}
.actual-score {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin: .4rem 0 1.3rem;
}
.actual-score .as-tm {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); flex: 1; text-align: center;
}
.actual-score .as-sc {
  font-family: var(--mono); font-weight: 700; flex: none;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); color: #fff;
  letter-spacing: -.02em; text-shadow: 0 0 26px var(--glow);
}
.actual-cmp { display: flex; flex-direction: column; gap: .5rem; }
.ac-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .68rem .9rem; background: var(--card); border-radius: 9px;
  border: 1px solid var(--line); font-size: .86rem;
}
.ac-l {
  font-family: var(--mono); font-size: .76rem; color: var(--faint);
  width: 2.4rem; flex: none;
}
.ac-p { color: var(--soft); }
.ac-a { color: var(--ink); font-weight: 600; }
.rc-chip {
  margin-left: auto; font-family: var(--mono); font-size: .74rem;
  font-weight: 700; border-radius: 6px; padding: .18rem .55rem;
}
.rc-chip.ok { color: var(--accent); background: var(--accent-soft); }
.rc-chip.no { color: var(--away); background: rgba(232,113,84,.14); }
.actual-note {
  margin-top: 1rem; font-size: .82rem; color: var(--soft); line-height: 1.7;
}
.actual-ko { margin-top: 2.3rem; }
.ak-note {
  font-size: .84rem; color: var(--soft); line-height: 1.7;
  margin-bottom: 1rem;
}
.ak-list { display: flex; flex-direction: column; gap: .4rem; }
.ak-row {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem;
  align-items: center; padding: .7rem 1rem;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 9px; font-size: .86rem; color: inherit;
  text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease);
}
.ak-row:hover { background: var(--card-2); }
.ak-dt { font-family: var(--mono); font-size: .78rem; color: var(--faint); }
.ak-mt { color: var(--ink); }
.ak-mt b { font-family: var(--mono); color: #fff; margin: 0 .25rem; }
.ak-ct { color: var(--faint); font-size: .78rem; text-align: right; }
.mlk {
  font-family: var(--mono); font-size: .74rem; color: var(--accent);
  white-space: nowrap; text-decoration: none;
}
.mlk:hover { text-decoration: underline; }

/* ---- custom matchup picker ------------------------------------------- */
.navlink {
  font-family: var(--mono); font-size: .82rem; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.navlink:hover { text-decoration: underline; }
.vs-picker {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin: 1.6rem 0 1.3rem;
}
.vs-pick { flex: 1; min-width: 13rem; }
.vs-pick label {
  display: block; font-family: var(--mono); font-size: .76rem;
  color: var(--faint); margin-bottom: .42rem;
}
.vs-select {
  width: 100%; padding: .8rem .9rem; font-family: var(--sans);
  font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vs-select:focus { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
.vs-vs {
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  padding-bottom: .85rem; flex: none;
}
.vs-go-wrap { text-align: center; }
.vs-msg {
  color: var(--away); font-size: .85rem; margin-top: .7rem; min-height: 1.2em;
}
.vs-loading { max-width: 31rem; margin: 3.4rem auto 2rem; text-align: center; }
.vsl-k {
  font-family: var(--mono); font-size: .76rem; color: var(--accent);
  margin-bottom: 1.1rem;
}
.vsl-teams {
  font-family: var(--sans); font-weight: 700; color: #fff;
  font-size: clamp(1.3rem, 1rem + 2vw, 2rem); margin-bottom: 1.9rem;
}
.vsl-vs {
  font-family: var(--mono); color: var(--accent);
  font-size: .72em; margin: 0 .5rem;
}
.vsl-steps {
  display: flex; flex-direction: column; gap: .7rem;
  text-align: left; margin-bottom: 1.5rem;
}
.vsl-step {
  display: flex; align-items: center; gap: .75rem;
  font-size: .9rem; color: var(--faint);
  transition: color .25s var(--ease);
}
.vsl-step.active { color: #fff; }
.vsl-step.done { color: var(--soft); }
.vsl-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.vsl-detail {
  font-size: .76rem; color: var(--faint); line-height: 1.55;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease);
}
.vsl-step.active .vsl-detail { max-height: 3rem; opacity: 1; }
.vsl-dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--line-2); box-sizing: border-box;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.vsl-step.active .vsl-dot {
  border-color: var(--accent);
  animation: vslPulse 1.1s ease-out infinite;
}
.vsl-step.done .vsl-dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 8px var(--glow);
}
@keyframes vslPulse {
  0% { box-shadow: 0 0 0 0 var(--glow); }
  100% { box-shadow: 0 0 0 7px rgba(47,199,127,0); }
}
.vsl-bar {
  height: 3px; background: var(--line); border-radius: 2px;
  overflow: hidden; margin-bottom: 1.1rem;
}
.vsl-bar i {
  display: block; height: 100%; width: 0; background: var(--accent);
  box-shadow: 0 0 10px var(--glow); transition: width .5s var(--ease);
}
.vsl-err { color: var(--away); font-size: .86rem; margin-bottom: 1rem; }
.vsl-back { display: inline-block; }

/* ---- recent form (last 10 matches) ----------------------------------- */
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-team {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 1.1rem 1.15rem;
}
.ft-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.ft-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: #fff;
}
.ft-rec { font-family: var(--mono); font-size: .76rem; color: var(--soft); }
.ft-sim {
  font-size: .78rem; color: var(--soft); line-height: 1.65;
  padding: .55rem .7rem; background: var(--accent-soft);
  border-radius: 8px; margin-bottom: .75rem;
}
.ft-sim b { color: var(--accent); font-family: var(--mono); }
.ft-sim-none { background: var(--bg-2); color: var(--faint); }
.form-list { display: flex; flex-direction: column; gap: .34rem; }
.form-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem;
  padding: .5rem .65rem; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; font-size: .8rem;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease);
}
.form-row:hover { background: var(--card-2); }
.form-row.sim { border-color: var(--accent-dim); background: var(--accent-soft); }
.form-row.sim:hover { background: var(--card-2); }
.fr-res {
  flex: none; width: 1.55rem; height: 1.55rem; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: .76rem;
}
.fr-res.fr-w { color: #07140d; background: var(--accent); }
.fr-res.fr-d { color: #07140d; background: var(--draw); }
.fr-res.fr-l { color: #fff; background: var(--away); }
.fr-opp { color: var(--ink); font-weight: 600; }
.fr-sc {
  font-family: var(--mono); color: #fff; font-variant-numeric: tabular-nums;
}
.fr-meta { color: var(--faint); font-size: .72rem; margin-left: auto; }
.fr-sim {
  flex-basis: 100%; font-family: var(--mono); font-size: .71rem;
  color: var(--accent); padding-left: 2.1rem;
}
.form-note {
  margin-top: 1rem; font-size: .78rem; color: var(--soft); line-height: 1.7;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 680px) {
  .news-cols { grid-template-columns: 1fr; }
  .score-wrap { grid-template-columns: 1fr; }
  .h2h-row { grid-template-columns: 1fr auto; gap: .25rem .8rem; }
  .hr-dt { grid-row: 1; grid-column: 1; }
  .hr-vn { grid-row: 1; grid-column: 2; }
  .hr-mt { grid-row: 2; grid-column: 1 / -1; }
  .hr-tn { grid-row: 3; grid-column: 1 / -1; font-size: .78rem; }
  .hr-goals { grid-row: 4; }
  .ak-row { grid-template-columns: 1fr auto; gap: .25rem .7rem; }
  .ak-dt { grid-column: 1 / -1; }
  .form-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sim-grid, .sim-scan, .launch-btn::after, .launch.igniting,
  .gcard, .champ-row .cr-bar i, .bk-tie, .bk-champ, .pc-spin,
  .deep-loading::before, .da-cursor { animation: none; }
  .gcard, .bk-tie, .bk-champ { opacity: 1; }
  .champ-row .cr-bar i { transform: none; }
}