/* MIRAI Design System — theme: DRAMETRIX (中日ドラゴンズ データ分析)
   v3 — ダイナミック・スポーツ報道。 Bright, kinetic, oversized.
   Field = bright porcelain; ink = deep navy; signal = dragon cobalt + flame + gold.
   Type: Anton (condensed display/figures, scoreboard energy) × Zen Kaku Gothic New 900
        (JP headline) × IBM Plex Mono (labels) × Zen Kaku Gothic New (body).
   NPB/中日 公式ロゴ・商標は不使用（非公式）。 Load AFTER base.css. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Dela+Gothic+One&family=IBM+Plex+Mono:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root,
[data-theme="light"]{
  --ds-bg:#eef2f9;            --ds-surface:#ffffff;
  --ds-text:#0a1626;          --ds-text-dim:rgba(10,22,38,.56);
  --ds-line:rgba(10,22,38,.12); --ds-line-soft:rgba(10,22,38,.05);
  --ds-accent:#1c5cf0;        --ds-accent-ink:#ffffff;  --ds-flag:#ff4d17;

  --ds-font-display:'Zen Kaku Gothic New',system-ui,sans-serif; /* JP headline (use wght 900) */
  --ds-font-display-en:'Anton',sans-serif;                       /* big figures / latin display */
  --ds-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ds-font-body:'Zen Kaku Gothic New',system-ui,sans-serif;
  --ds-radius:4px;

  --dr-cobalt:#1c5cf0;  --dr-cobalt-deep:#0a2f8a;  --dr-sky:#48a0ff;
  --dr-flame:#ff4d17;   --dr-gold:#ffb020;          --dr-ink:#0a1626;
  --dr-win:#16a866;     --dr-loss:#ff4d17;          --dr-draw:rgba(10,22,38,.28);
}

/* atmosphere — generative scales/waves in faint cobalt (compose on body via .ds-grid) */
.ds-grid{ background-color:var(--ds-bg);
  background-image:
    radial-gradient(circle at 50% 100%, transparent 60%, rgba(28,92,240,.05) 60% 63%, transparent 63%),
    radial-gradient(circle at 0% 100%,  transparent 60%, rgba(28,92,240,.05) 60% 63%, transparent 63%),
    radial-gradient(circle at 100% 100%,transparent 60%, rgba(28,92,240,.05) 60% 63%, transparent 63%);
  background-size:54px 27px; }
.ds-glow{background-image:none}
.ds-grain::after{opacity:.02}

/* type primitives recolored / re-weighted for sport */
.ds-kicker{color:var(--dr-cobalt);font-weight:600}
.ds-kicker::before{background:var(--dr-flame);opacity:1;width:28px;height:2px}
.ds-display{font-family:var(--ds-font-display);font-weight:900;letter-spacing:-.01em;line-height:.96}
mark.ds-hl::before{background:var(--dr-gold);opacity:.9;height:.28em}
.ds-lede{color:var(--ds-text-dim)}.ds-lede b{color:var(--ds-text);font-weight:700}

.ds-card{background:var(--ds-surface);border-color:var(--ds-line);
  box-shadow:0 26px 64px -34px rgba(10,47,138,.4)}
.ds-mk::before,.ds-mk::after{background:var(--dr-cobalt);opacity:.4}
.ds-btn--primary{background:var(--dr-cobalt)}

/* ---- dynamic-sports components -------------------------------- */
/* oversized scoreboard figure */
.dr-fig{font-family:var(--ds-font-display-en);font-variant-numeric:tabular-nums;line-height:.85;letter-spacing:.01em}

.dr-rank{font-family:var(--ds-font-display-en);line-height:.82;display:inline-flex;align-items:baseline;gap:.06em;color:var(--dr-cobalt)}
.dr-rank .of{font-size:.36em;color:var(--ds-text-dim)}

.dr-wl{display:flex;height:10px;border-radius:0;overflow:hidden;background:var(--ds-line-soft)}
.dr-wl i{display:block;height:100%}
.dr-wl .w{background:var(--dr-win)} .dr-wl .l{background:var(--dr-loss)} .dr-wl .d{background:var(--dr-draw)}

.dr-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dr-table th{font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-text-dim);text-align:right;padding:.5rem .7rem;border-bottom:2px solid var(--ds-text)}
.dr-table th:first-child,.dr-table td:first-child{text-align:left}
.dr-table td{padding:.6rem .7rem;border-bottom:1px solid var(--ds-line-soft);
  font-family:var(--ds-font-display-en);font-size:1.18rem;text-align:right;color:var(--ds-text)}
.dr-table td.name{font-family:var(--ds-font-body);font-weight:700;font-size:.98rem}
.dr-table tbody tr{transition:transform .15s,background .15s}
.dr-table tbody tr:hover{background:color-mix(in srgb,var(--dr-cobalt) 6%,transparent)}
.dr-table tr.me td{background:color-mix(in srgb,var(--dr-gold) 18%,transparent)}
.dr-table tr.me td:first-child{box-shadow:inset 5px 0 0 var(--dr-flame)}

.dr-note{font-family:var(--ds-font-mono);font-size:var(--ds-step--1);color:var(--ds-text-dim);letter-spacing:.03em}

.dr-chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--ds-font-mono);font-weight:600;
  font-size:.74rem;letter-spacing:.04em;padding:.34rem .7rem;border-radius:99px;border:1.5px solid currentColor}

/* motion: scroll reveal (JS toggles .vis) */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.vis{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* diagonal slash divider */
.dr-slash{height:0;border-top:3px solid var(--dr-flame);transform:skewY(-1.4deg);transform-origin:left;margin:0;opacity:.85}