/* ============================================================
   3x3 PORTAL — shared design system (WTA-components × vlr-density × multi-color)
   確定済みデザインシステム。色は :root の変数＋ html[data-skin] で切替。
   方針: 説明文を置かない / データで自明にする / LIVE非依存。
   ============================================================ */

:root{
  /* ===== SKIN (placeholder colors — easy to swap) ===== */
  --canvas:#f4f6f8;          /* cool off-white page bg (NOT beige) */
  --canvas-accent:#eef1f5;
  --panel:#ffffff;
  --panel-2:#eef1f5;
  --ink:#15131d;             /* dark data surfaces + primary text  */
  --ink-soft:#5b5566;
  --accent:#ff2d8e;          /* PRIMARY (active / stage / links) — Electric */
  --accent2:#15c7bd;         /* SECONDARY (stage / more-links)    */
  --accent-ink:#ffffff;
  --energy:#caff00;          /* electric lime — 注目/今日のハイライト（LIVEではない） */
  --up:#11b66a;
  --down:#e0405f;
  --line:#e7e2da;
  --r-pill:9999px; --r-card:16px; --r-panel:24px; --r-s:8px;
  /* ===== end SKIN ===== */

  /* ===== LEAGUE COLORS (functional category coding) ===== */
  --lg-exe:#2f6bff; --lg-super:#e0218a; --lg-united:#16b67a; --lg-rbl:#00bcd4; --lg-3xs:#ff7ab8; --lg-japan:#1b2f6b;

  --shadow-soft:0 16px 36px -22px color-mix(in srgb, var(--ink) 50%, transparent);
  --shadow-nav:0 10px 24px -12px color-mix(in srgb, var(--ink) 42%, transparent);

  /* team emblem palette (monograms only — no real logos) */
  --em-1:#e8643c; --em-2:#2e8bc0; --em-3:#1f9d6b; --em-4:#d4435f;
  --em-5:#6c4bd6; --em-6:#e0a418; --em-7:#1b9aaa; --em-8:#b8392b;
  --em-9:#3949ab; --em-10:#0f9d77; --em-11:#5d6d7e; --em-12:#c0567a;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Barlow','Zen Kaku Gothic New',system-ui,sans-serif;
  font-weight:500;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;}
input{font:inherit;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:5px;}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 16px;}

/* ---------- type helpers ---------- */
.display{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;line-height:.86;}
.display-en{font-family:'Bebas Neue','Barlow Condensed',sans-serif;font-weight:400;letter-spacing:.01em;}
.label{font-family:'Martian Mono','Barlow Condensed',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:500;}
.label-jp{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;letter-spacing:.22em;font-size:11px;}

/* ====================================================================
   STAGE — colored canvas behind nav + hero
   ==================================================================== */
.stage{
  position:relative;isolation:isolate;overflow:hidden;padding-bottom:22px;
}
/* メニュー展開中だけ stage を main(z-index:2) より前に出す＝fixedドロップダウンを最前面に */
.stage:has(.navpill.open){z-index:5;}
.stage{
  background:
    radial-gradient(120% 95% at 90% -12%, color-mix(in srgb, var(--accent2) 60%, white) 0%, transparent 50%),
    linear-gradient(205deg, var(--accent) 0%, var(--accent2) 100%);
}
.stage::after{
  content:"";position:absolute;z-index:0;width:280px;height:280px;right:-80px;top:54px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--accent-ink) 16%, transparent);
}

/* ---------- floating pill nav ---------- */
.topbar{position:relative;z-index:30;padding:12px 0;}
.navpill{position:relative;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:var(--r-pill);padding:7px 7px 7px 18px;box-shadow:var(--shadow-nav);}
.brand{display:inline-flex;align-items:baseline;gap:1px;flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;line-height:1;letter-spacing:.005em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.brand .bjp{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:17px;letter-spacing:.005em;color:var(--accent);}
.brand:hover{opacity:.82;}
/* モバイル: ドロップダウンは fixed（親 .stage の overflow:hidden で切られないように） */
.navlinks{position:fixed;top:72px;left:16px;right:16px;z-index:60;display:none;flex-direction:column;gap:6px;background:var(--panel);border-radius:var(--r-card);padding:8px;box-shadow:var(--shadow-soft);}
.navpill.open .navlinks{display:flex;animation:navdrop .18s ease;}
@keyframes navdrop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.ham[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);}
.navlinks a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.03em;padding:11px 14px;border-radius:var(--r-pill);color:var(--ink-soft);}
.navlinks a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);}
.navact{display:flex;align-items:center;gap:6px;}
/* search merged into the nav bar (1本に統合) */
.navsearch{display:flex;align-items:center;gap:9px;flex:1;min-width:60px;margin-left:auto;background:var(--panel-2);border-radius:var(--r-pill);padding:9px 15px;}
.navsearch svg{width:17px;height:17px;color:var(--ink-soft);flex:0 0 auto;}
.navsearch input{flex:1;border:0;background:none;font-size:14px;font-weight:600;color:var(--ink);min-width:0;}
.navsearch input::placeholder{color:var(--ink-soft);font-weight:500;}
.iconbtn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--ink);background:var(--panel-2);position:relative;}
.iconbtn:hover{background:color-mix(in srgb,var(--accent) 16%, var(--panel-2));}
.iconbtn svg{width:18px;height:18px;}
.bell-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--energy);border:1.5px solid var(--panel);}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:14px 0 40px;}
.hero .kicker{color:color-mix(in srgb,var(--accent-ink) 82%, transparent);display:block;margin-bottom:10px;}
.hero h1{margin:0;color:var(--accent-ink);font-size:clamp(56px,17vw,112px);}
.hero .daterange{display:block;margin-top:4px;color:color-mix(in srgb,var(--accent-ink) 90%, transparent);font-size:clamp(24px,7vw,44px);line-height:1;}
.herostats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.hstat{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--accent-ink);border-radius:var(--r-pill);padding:6px 13px 6px 11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;}
.hstat .num{font-size:15px;}
.hstat--ghost{background:color-mix(in srgb,var(--accent-ink) 92%, transparent);color:var(--ink);}

/* ---------- search bar (人軸の入口を主役格に) ---------- */
.searchwrap{position:relative;z-index:1;margin-top:6px;padding-bottom:38px;}  /* main(-24px)に scopes が被らないよう余白確保 */
.searchbar{display:flex;align-items:center;gap:11px;background:var(--panel);border-radius:var(--r-pill);padding:13px 18px;box-shadow:var(--shadow-soft);max-width:580px;}
.searchbar svg{width:20px;height:20px;color:var(--ink-soft);flex:0 0 auto;}
.searchbar input{flex:1;border:0;background:none;font-size:16px;font-weight:600;color:var(--ink);min-width:0;}
.searchbar input::placeholder{color:var(--ink-soft);font-weight:500;}
.searchbar kbd{font-family:'Martian Mono',monospace;font-size:10px;color:var(--ink-soft);border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--panel-2);}
.scopes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-width:580px;}
.scope{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent-ink) 90%, transparent);color:var(--ink);}
.scope:hover{background:#fff;}

/* ====================================================================
   MAIN — chalk content rising over the colored stage
   ==================================================================== */
main{position:relative;z-index:2;background:var(--canvas);border-radius:26px 26px 0 0;margin-top:-24px;padding:26px 0 6px;}

.block{margin-bottom:26px;}
.blockhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px;}
.blockhead .label{color:var(--ink-soft);display:block;margin-bottom:5px;}
.blockhead h2{margin:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(24px,6vw,34px);line-height:1;}
.blockhead .more{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,var(--accent2) 82%, var(--ink));white-space:nowrap;}

/* ---------- league filter pills ---------- */
.pillrow{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pillrow::-webkit-scrollbar{display:none;}
/* 横スクロール可能なときだけ右端をフェード＝「まだ続く」の合図 */
.pillrow.is-scrollable{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);}
.fpill{flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;padding:8px 15px;border-radius:var(--r-pill);background:var(--panel);color:var(--ink-soft);border:1.5px solid var(--line);white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.fpill:hover{border-color:color-mix(in srgb,var(--accent) 50%, var(--line));color:var(--ink);}
.fpill[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

/* ====================================================================
   LAYOUT
   ==================================================================== */
.grid2{display:grid;gap:16px;}
.col-rail{display:grid;gap:14px;align-content:start;}

/* shared pills / chips */
.lgpill{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-pill);color:var(--lg);border:1px solid color-mix(in srgb,var(--lg) 42%, transparent);background:color-mix(in srgb,var(--lg) 12%, var(--panel));white-space:nowrap;}
.sched .lgpill,.spotcard .lgpill{color:color-mix(in srgb,var(--lg) 65%, white);border-color:color-mix(in srgb,var(--lg) 55%, transparent);background:color-mix(in srgb,var(--lg) 24%, transparent);}

.spill{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;}
.spill--next{background:var(--energy);color:var(--ink);}            /* 次の試合/今日のハイライト */
.spill--soon{border:1px solid color-mix(in srgb,var(--accent-ink) 30%, transparent);color:color-mix(in srgb,var(--accent-ink) 84%, transparent);}
.spill--done{background:color-mix(in srgb,var(--accent-ink) 12%, transparent);color:color-mix(in srgb,var(--accent-ink) 66%, transparent);}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink);}

.emblem{width:24px;height:24px;border-radius:7px;background:var(--em);color:var(--accent-ink);display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;flex:0 0 auto;}

/* ---------- dense schedule (ink panel) ---------- */
.sched{background:var(--ink);color:var(--accent-ink);border-radius:var(--r-panel);padding:6px 6px 12px;}
.dayhead{display:flex;align-items:center;gap:9px;padding:13px 12px 9px;}
.dayhead .dh-d{font-family:'Bebas Neue',sans-serif;font-size:22px;line-height:1;color:var(--accent-ink);}
.dayhead .dh-jp{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:13px;color:color-mix(in srgb,var(--accent-ink) 88%, transparent);}
.dayhead .dh-en{font-family:'Martian Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--accent-ink) 50%, transparent);}
.dayhead .dh-count{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;color:color-mix(in srgb,var(--accent-ink) 60%, transparent);border:1px solid color-mix(in srgb,var(--accent-ink) 20%, transparent);border-radius:var(--r-pill);padding:1px 9px;}

.mrow{display:flex;align-items:stretch;color:inherit;border-top:1px solid color-mix(in srgb,var(--accent-ink) 9%, transparent);}
.mrow:hover{background:color-mix(in srgb,var(--accent-ink) 6%, transparent);}
.lbar{flex:0 0 3px;width:3px;border-radius:3px;background:var(--lg);margin:7px 0;}
.mrow-body{flex:1;min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"time mid side" "time meta meta";column-gap:10px;row-gap:3px;padding:8px 12px;align-items:center;}
.m-time{grid-area:time;align-self:center;}
.m-time .t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;line-height:1.05;letter-spacing:.01em;font-variant-numeric:tabular-nums;display:block;}
.m-time .ti{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:color-mix(in srgb,var(--accent-ink) 45%, transparent);}
.m-mid{grid-area:mid;min-width:0;}
.m-team{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:2px 0;}
.m-team .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-team .sc{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;line-height:1;font-variant-numeric:tabular-nums;}
.m-team .sc.mut{color:color-mix(in srgb,var(--accent-ink) 42%, transparent);}
.m-team.win .nm{color:var(--accent-ink);}
.m-team.lose .nm,.m-team.lose .sc{color:color-mix(in srgb,var(--accent-ink) 55%, transparent);}
.m-side{grid-area:side;display:flex;flex-direction:column;align-items:flex-end;gap:3px;align-self:center;}
.m-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:color-mix(in srgb,var(--accent-ink) 60%, transparent);min-width:0;}
.m-meta .sep{opacity:.4;}
.m-meta .vn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- filters (league pills + team select) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.teamsel{position:relative;display:inline-flex;}
.teamsel select{appearance:none;-webkit-appearance:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 32px 8px 15px;cursor:pointer;}
.teamsel select:hover{border-color:color-mix(in srgb,var(--accent) 50%, var(--line));}
.teamsel::after{content:"";position:absolute;right:14px;top:calc(50% - 3px);width:7px;height:7px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);pointer-events:none;}
/* mobile: pill行とチーム選択を縦に積む（負マージンの pillrow が select と被るのを防ぐ） */
@media(max-width:560px){
  .filterbar{flex-direction:column;align-items:stretch;}
  .filterbar>.pillrow{width:calc(100% + 32px);}
  .filterbar>.teamsel{width:100%;}
  .filterbar>.teamsel select{width:100%;}
}

/* ---------- PICKUP — 注目の試合（開いた瞬間に意味ある情報） ---------- */
.pickup{position:relative;overflow:hidden;background:var(--ink);color:var(--accent-ink);border-radius:var(--r-panel);padding:18px 18px 20px;border-left:5px solid var(--lg);margin-bottom:26px;}
.pickup::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--lg) 50%, transparent), transparent 70%);}
.pickup>*{position:relative;z-index:1;}
.pk-kick{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:var(--energy);border-radius:var(--r-pill);padding:3px 11px;margin-bottom:12px;}
.pk-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.pk-title{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(21px,5.2vw,30px);line-height:1.1;margin:0;}
.pk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:color-mix(in srgb,var(--accent-ink) 55%, transparent);margin-bottom:14px;}
.pk-meta .sep{opacity:.35;}
.pk-stake{background:color-mix(in srgb,var(--accent-ink) 9%, transparent);border-left:3px solid var(--energy);border-radius:0 var(--r-card) var(--r-card) 0;padding:11px 14px;font-size:14px;line-height:1.6;margin-bottom:13px;}
.pk-stake b{color:var(--energy);font-weight:700;}
.pk-teams{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px;}
.pk-foot{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;}
.pk-foot .linkpill{margin-top:0;}

/* ---------- 直近の試合 — 大きいカード ---------- */
.gcards{display:grid;gap:12px;}
@media(min-width:600px){.gcards{grid-template-columns:1fr 1fr;}}
.gcard{display:block;width:100%;text-align:left;font:inherit;background:var(--panel);border-radius:var(--r-card);box-shadow:var(--shadow-soft);border-top:4px solid var(--lg);padding:14px 15px;color:inherit;cursor:pointer;}
.gc-top{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.gc-date{font-family:'Bebas Neue',sans-serif;font-size:21px;color:var(--ink);line-height:1;}
.gc-date small{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--ink-soft);margin-left:5px;}
.gc-side{margin-left:auto;display:flex;align-items:center;gap:7px;}
.gcard h3{margin:0 0 4px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.01em;line-height:1.12;}
.gc-sub{font-size:12px;color:var(--ink-soft);margin-bottom:11px;}
.gc-prev{display:flex;align-items:center;gap:4px;}
.gc-prev .pe{width:22px;height:22px;border-radius:6px;background:var(--em);color:#fff;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;flex:0 0 auto;}
.gc-prev .more{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.06em;color:var(--ink-soft);margin-left:5px;}
.gcard .chev{color:var(--ink-soft);}
/* light team chips under gcard (expand) */
.gcards .rnd-teams{padding:11px 4px 2px;}
.gcards .rnd-teams .grp{color:var(--ink-soft);}
.gcards .rnd-teams .tchip{background:var(--panel-2);border-color:var(--line);color:var(--ink);}
.gcards .rnd-teams .tchip:hover{border-color:var(--em);background:color-mix(in srgb,var(--em) 16%, var(--panel-2));}

/* ---------- schedule: round/tournament unit (3x3の試合単位=ラウンド大会) ---------- */
.m-rnd{grid-area:mid;min-width:0;}
.m-rnd .rn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-rnd .rs{font-size:11.5px;color:color-mix(in srgb,var(--accent-ink) 62%, transparent);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-rnd .rs b{color:var(--accent-ink);font-weight:700;}
.m-rnd .rs .w{color:var(--energy);font-weight:700;}            /* 優勝チーム */
/* collapsed preview: which teams are in this round */
.rprev{display:flex;align-items:center;gap:3px;margin-top:6px;}
.rprev .pe{width:19px;height:19px;border-radius:5px;background:var(--em);color:#fff;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.01em;flex:0 0 auto;}
.rprev .more{font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.06em;color:color-mix(in srgb,var(--accent-ink) 52%, transparent);margin-left:4px;}

/* round wrapper + expand (どのチームが出るか→展開→クリックで詳細) */
.rnd{border-top:1px solid color-mix(in srgb,var(--accent-ink) 9%, transparent);}
.rnd:first-of-type{border-top:0;}
.rnd .mrow{border-top:0;cursor:pointer;width:100%;text-align:left;font:inherit;background:none;color:inherit;display:flex;align-items:stretch;}
.rnd a.mrow{text-decoration:none;}
.m-side .reslink{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--accent2) 82%, var(--ink));}
.rnd a.mrow:hover .reslink{text-decoration:underline;text-underline-offset:3px;}
.chev{width:16px;height:16px;color:color-mix(in srgb,var(--accent-ink) 55%, transparent);transition:transform .18s;flex:0 0 auto;}
.rnd [aria-expanded="true"] .chev{transform:rotate(180deg);}
.rnd-teams{display:none;flex-wrap:wrap;gap:6px;padding:2px 14px 13px 18px;}
.rnd.open .rnd-teams{display:flex;}
.rnd-teams .grp{flex:0 0 100%;font-family:'Martian Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--accent-ink) 45%, transparent);margin:2px 0 1px;}
.tchip{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--accent-ink) 8%, transparent);border:1px solid color-mix(in srgb,var(--accent-ink) 13%, transparent);border-radius:var(--r-pill);padding:4px 12px 4px 5px;color:var(--accent-ink);}
.tchip .pe{width:21px;height:21px;border-radius:6px;background:var(--em);color:#fff;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;flex:0 0 auto;}
.tchip .tn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;white-space:nowrap;}
.tchip.win{background:color-mix(in srgb,var(--energy) 22%, transparent);border-color:color-mix(in srgb,var(--energy) 55%, transparent);}
.tchip:hover{border-color:var(--em);background:color-mix(in srgb,var(--em) 26%, transparent);}
/* 展開した試合カード内の「大会詳細へ」導線 */
.rnd-teams .evlink{flex:0 0 100%;display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--energy);text-decoration:none;}
.rnd-teams .evlink:hover{text-decoration:underline;text-underline-offset:3px;}
.rnd-teams .evlink svg{width:13px;height:13px;}

/* ---------- players panel (人軸) ---------- */
.plist{display:grid;gap:0;}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line);color:inherit;}
.prow:first-child{border-top:0;}
.prow .pemb{width:32px;height:32px;border-radius:9px;background:var(--em);color:var(--accent-ink);display:grid;place-items:center;font-family:'Bebas Neue',sans-serif;font-size:15px;flex:0 0 auto;}
.prow .pn{min-width:0;}
.prow .pn .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.prow .pn .sub{display:block;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prow .pv{text-align:right;white-space:nowrap;}
.prow .pv .n{font-family:'Bebas Neue',sans-serif;font-size:21px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.prow .pv .k{font-family:'Martian Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- SNS 導線 / 各リーグ公式チャンネル ---------- */
.footsns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.footsns a{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:6px 12px;border-radius:var(--r-pill);background:var(--panel);border:1.5px solid var(--line);color:var(--ink-soft);}
.footsns a:hover{border-color:var(--accent);color:var(--ink);}
.footsns svg{width:14px;height:14px;color:var(--lg);}
.footchan{display:grid;gap:9px;margin:0 0 18px;max-width:560px;}
.chrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.chname{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);min-width:120px;border-left:3px solid var(--lg);padding-left:9px;}
.chrow a{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;}
.chrow a:hover{border-color:var(--lg);color:var(--ink);}
.chrow a svg{width:13px;height:13px;color:var(--lg);}
.watch{display:inline-flex;align-items:center;gap:5px;color:inherit;}
.watch svg{width:12px;height:12px;}

/* ---------- rail panels (chalk) ---------- */
.panel{background:var(--panel);border-radius:var(--r-panel);padding:16px 16px 18px;box-shadow:var(--shadow-soft);}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px;}
.panel-head .label{color:var(--ink-soft);display:block;margin-bottom:5px;}
.panel-head h2{margin:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:20px;line-height:1.05;}
.panel-head .more{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);white-space:nowrap;}

/* ---------- standings (基準を明示する) ---------- */
.basis{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);background:var(--panel-2);border-radius:var(--r-pill);padding:3px 10px;margin-bottom:10px;}
.basis b{color:var(--accent);}
.standby{font-size:13px;color:var(--ink-soft);line-height:1.65;margin:6px 0 2px;}
.standby a{color:var(--accent);font-weight:700;white-space:nowrap;text-decoration:none;}
.standby a:hover{text-decoration:underline;text-underline-offset:3px;}
.standings{width:100%;}
.standings th{font-family:'Martian Mono',monospace;font-size:8.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);text-align:right;padding:0 0 8px;}
.standings th.l,.standings td.l{text-align:left;}
.standings th.key{color:var(--accent);}                 /* 並べ替えの基準列を強調 */
.standings td{padding:7px 0;border-top:1px solid var(--line);vertical-align:middle;}
.st-rank{font-family:'Bebas Neue',sans-serif;font-size:20px;line-height:1;color:var(--ink);min-width:20px;display:inline-block;}
.st-team{display:flex;align-items:center;gap:8px;min-width:0;}
.st-team .emblem{width:24px;height:24px;}
.st-team .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;}
.st-key{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums;}  /* 基準値 */
.delta{display:inline-flex;align-items:center;justify-content:flex-end;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;}
.delta.up{color:var(--up);} .delta.down{color:var(--down);} .delta.flat{color:var(--ink-soft);}

.tabrow{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.tab{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill);background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);}
.tab[aria-selected="true"]{background:var(--ink);color:var(--accent-ink);border-color:var(--ink);}

/* ---------- 注目カード (文章でなくデータ) ---------- */
.spot{display:grid;gap:10px;}
.spotcard{display:block;background:var(--ink);color:var(--accent-ink);border-radius:var(--r-card);border-left:3px solid var(--lg);padding:12px 13px;}
.spotcard .stake{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--energy);border-radius:var(--r-pill);padding:2px 9px;margin-bottom:9px;}
.spotcard .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:2px 0;}
.spotcard .emblem{width:22px;height:22px;font-size:11px;border-radius:6px;}
.spotcard .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spotcard .rk{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:color-mix(in srgb,var(--accent-ink) 60%, transparent);font-variant-numeric:tabular-nums;}
.spotcard .foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;font-size:11px;color:color-mix(in srgb,var(--accent-ink) 60%, transparent);}

/* ---------- 出場権レース ---------- */
.race li{padding:9px 0;border-top:1px solid var(--line);}
.race li:first-child{border-top:0;padding-top:2px;}
.race-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.race-top .emblem{width:20px;height:20px;font-size:10px;border-radius:5px;}
.race-top .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;}
.race-top .tag{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
.bar{height:6px;border-radius:var(--r-pill);background:var(--panel-2);overflow:hidden;}
.bar .fill{height:100%;border-radius:var(--r-pill);background:var(--accent);}

/* ---------- link pill ---------- */
.linkpill{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;padding:8px 15px;border-radius:var(--r-pill);background:var(--ink);color:var(--accent-ink);}
.linkpill.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.linkpill.ghost:hover{border-color:var(--accent);color:var(--accent);}
.linkpill svg{width:13px;height:13px;}

/* ====================================================================
   PLAYER PAGE
   ==================================================================== */
.pident{position:relative;z-index:1;padding:8px 0 36px;}
.pident .back{display:inline-flex;align-items:center;gap:6px;color:color-mix(in srgb,var(--accent-ink) 80%, transparent);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;}
.pident-main{display:flex;align-items:center;gap:16px;}
.pident .big-em{width:84px;height:84px;border-radius:20px;font-size:34px;flex:0 0 auto;}
.pident h1{margin:0;color:var(--accent-ink);font-size:clamp(40px,11vw,72px);line-height:.9;}
.pident .reading{display:block;font-family:'Martian Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--accent-ink) 70%, transparent);margin-bottom:8px;}
.pchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.pchip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent-ink) 90%, transparent);color:var(--ink);border-radius:var(--r-pill);padding:5px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;}
.pchip .k{color:var(--ink-soft);}

/* stat grid */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px;}
.statcard{background:var(--panel);border-radius:var(--r-card);box-shadow:var(--shadow-soft);padding:13px 14px;}
.statcard .v{font-family:'Bebas Neue',sans-serif;font-size:38px;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums;}
.statcard .v small{font-size:16px;color:var(--ink-soft);}
.statcard .k{font-family:'Martian Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
@media (max-width:560px){ .statgrid{grid-template-columns:repeat(2,1fr);} }

/* 出場リーグ・大会タグ (表記ゆれを正規化した1人格で串刺し) */
.affil{display:flex;flex-wrap:wrap;gap:8px;}
.affil .lgpill{font-size:12px;padding:5px 11px;}

/* ====================================================================
   FOOTER
   ==================================================================== */
footer{background:var(--canvas);padding:30px 0 40px;border-top:1px solid var(--line);}
.foot-brand{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.04em;margin-bottom:12px;}
.footlinks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.footlinks a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:8px 14px;border-radius:var(--r-pill);background:var(--panel);border:1.5px solid var(--line);color:var(--ink-soft);}
.footlinks a:hover{border-color:var(--accent);color:var(--ink);}
.foot-note{font-family:'Martian Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--ink-soft);line-height:1.6;}
/* 本番フッター: テキストナビ（チップにしない）＋ 短い説明 */
.footnav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:13px;}
.footnav a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.03em;color:var(--ink);text-decoration:none;}
.footnav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.footmeta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (min-width:760px){
  .topbar{padding:18px 0;}
  .navpill{padding:8px 8px 8px 22px;gap:18px;}
  .navlinks{position:static;display:flex;flex-direction:row;gap:4px;background:none;padding:0;box-shadow:none;}
  .navlinks a{font-size:15px;padding:9px 15px;}
  .ham{display:none;}
  .hero{padding:22px 0 56px;}
  .m-time{align-self:start;padding-top:2px;}
}
@media (max-width:759px){ .ham{display:grid;} }
@media (min-width:980px){
  .grid2{grid-template-columns:minmax(0,1fr) 366px;align-items:start;}
}

/* ====================================================================
   ALT COLOR SKINS — structure identical, ONLY color changes.
   ==================================================================== */
html[data-skin="emerald"]{ --accent:#10b981; --accent2:#ff3d8b; --energy:#ecff1f; --canvas:#f1f6f4; --canvas-accent:#ecf3f0; --panel-2:#ecf3ef; }
html[data-skin="aqua"]{    --accent:#06b6c9; --accent2:#fb5fa8; --energy:#d6ff2e; --canvas:#f0f6f7; --canvas-accent:#eaf3f4; --panel-2:#eaf3f4; }
html[data-skin="night"]{   --accent:#ff2d8e; --accent2:#19d3c6; --energy:#c8ff00; --canvas:#eef0f4; --canvas-accent:#e8ecf2; --panel-2:#e8ecf2; }
html[data-skin="night"] .stage{
  background:
    radial-gradient(120% 95% at 88% -12%, color-mix(in srgb,var(--accent) 34%, #16131e) 0%, transparent 56%),
    linear-gradient(205deg,#241f2e 0%, #121017 100%);
}

/* color preview switcher */
.skinbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:200;display:flex;gap:7px;align-items:center;background:#fff;border:1px solid #e7e2da;border-radius:9999px;padding:6px 10px 6px 8px;box-shadow:0 12px 32px -12px rgba(0,0,0,.45);}
.skinbar b{font:700 10px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#5b5566;padding:0 3px;}
.skinbar button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;outline:1px solid #d9d4cc;cursor:pointer;padding:0;}
.skinbar button[aria-pressed="true"]{outline:2px solid #17141f;transform:scale(1.14);}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto;} }