:root {
  --bg: #070a12;
  --bg-2: #0d1220;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-solid: #111827;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #eef1f8;
  --text-2: #aab3c5;
  --text-3: #6f7a90;
  --gold: #e8c26a;
  --gold-2: #b8913f;
  --cyan: #3fd8d0;
  --blue: #4c8dff;
  --red: #f0505f;
  --good: #3ecf8e;
  --bad: #f0505f;
  --warn: #f2b43c;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(76, 141, 255, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(232, 194, 106, 0.12), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(63, 216, 208, 0.08), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }

/* ---------- ナビゲーション ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 28px;
  background: rgba(7, 10, 18, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.02em; font-size: 16px; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff;
  border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(232, 194, 106, 0.35);
  transition: transform .25s;
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
.brand small { color: var(--text-3); font-weight: 600; font-size: 11px; margin-left: 4px; }
.nav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-weight: 600; white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: #0b0f1a; background: linear-gradient(135deg, var(--gold), #f5dc9e); }
.nav-right { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }

main { max-width: 1440px; margin: 0 auto; padding: 28px; }

/* ---------- 共通部品 ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}
.panel { padding: 20px; }
.panel h3, .sec-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); display: flex; align-items: center; gap: 8px;
}
.sec-title::before, .panel h3::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(var(--gold), var(--cyan));
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 {
  margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -0.01em;
  background: linear-gradient(120deg, #fff 30%, var(--gold) 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head p { margin: 4px 0 0; color: var(--text-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600;
  transition: all .18s; white-space: nowrap;
}
button.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on { background: rgba(232, 194, 106, 0.14); border-color: rgba(232, 194, 106, 0.55); color: var(--gold); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.badge.ad { color: #ffb36b; background: rgba(255, 140, 50, 0.12); }
.badge.ap { color: #9fb6ff; background: rgba(110, 140, 255, 0.14); }
.badge.mixed { color: #e2a6ff; background: rgba(200, 120, 255, 0.12); }
.badge.high { color: var(--good); background: rgba(62, 207, 142, 0.12); }
.badge.medium { color: var(--warn); background: rgba(242, 180, 60, 0.12); }
.badge.low, .badge.none { color: var(--bad); background: rgba(240, 80, 95, 0.12); }
.muted { color: var(--text-3); }
.pos-ico { flex: none; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 18px; }

.search {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); min-width: 260px;
}
.search input { background: none; border: 0; outline: 0; width: 100%; }
.search:focus-within { border-color: rgba(232, 194, 106, 0.6); box-shadow: 0 0 0 4px rgba(232, 194, 106, 0.1); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-2); font-weight: 700; transition: all .18s;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.primary { background: linear-gradient(135deg, var(--gold), #f5dc9e); color: #0b0f1a; border: 0; box-shadow: 0 6px 24px rgba(232, 194, 106, 0.3); }
.btn.primary:hover { filter: brightness(1.08); color: #0b0f1a; }
.btn.sm { padding: 6px 12px; font-size: 12px; }

.ico { border-radius: 8px; border: 1px solid var(--border-strong); background: #0b0f1a; }
.ico.rune { border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.35); padding: 3px; }
.ico.rune.ks { padding: 0; background: none; filter: drop-shadow(0 0 10px rgba(232, 194, 106, 0.35)); }
.ico.tree { border: 0; background: none; }
.ico-wrap { position: relative; display: inline-flex; }
.cimg { border-radius: 12px; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #0b0f1a; }

/* ツールチップ */
#tip {
  position: fixed; z-index: 200; max-width: 300px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(13, 18, 32, 0.96); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.55; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
#tip.show { opacity: 1; transform: none; }
.itip b { color: var(--gold); display: block; margin-bottom: 2px; }
#tip.wide { max-width: 360px; padding: 12px 14px; }
.itip .it-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.itip .it-head img { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-strong); }
.itip .it-head b { font-size: 14px; margin: 0; }
.itip .it-gold { color: #f2c94c; font-weight: 800; font-size: 12px; }
.itip .it-body { color: var(--text-2); font-size: 12.5px; line-height: 1.65; }
.itip .it-body b { display: inline; color: var(--text); margin: 0; }
.itip .it-pas, .itip .it-act { display: inline-block; margin-top: 4px; font-weight: 900; color: var(--gold); }
.itip .it-act { color: var(--cyan); }
.itip .it-physicaldamage { color: #ffb36b; }
.itip .it-magicdamage { color: #9fb6ff; }
.itip .it-truedamage { color: #fff; font-weight: 700; }
.itip .it-healing { color: var(--good); }
.itip .it-shield { color: #d8e0ff; }
.itip .it-speed, .itip .it-status, .itip .it-keywordmajor { color: var(--cyan); }
.itip .it-onhit { color: #f2b43c; }

/* ---------- チャンピオン一覧 ---------- */
.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-row .label { color: var(--text-3); font-size: 12px; font-weight: 700; width: 64px; }
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.ccard {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.ccard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(240px 140px at 50% 0%, rgba(232, 194, 106, 0.22), transparent 70%);
}
.ccard:hover { transform: translateY(-4px); border-color: rgba(232, 194, 106, 0.5); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
.ccard:hover::after { opacity: 1; }
.ccard .cimg { transition: transform .35s; }
.ccard:hover .cimg { transform: scale(1.06); }
.ccard .imgbox { border-radius: 12px; overflow: hidden; position: relative; }
.ccard .pos-strip { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 3px; }
.ccard .pos-strip span { background: rgba(7, 10, 18, 0.78); border-radius: 6px; padding: 3px; display: flex; color: var(--gold); backdrop-filter: blur(6px); }
.ccard .nm { font-weight: 800; font-size: 14px; line-height: 1.25; }
.ccard .tt { font-size: 11px; color: var(--text-3); line-height: 1.3; min-height: 2.6em; }
.ccard .meta { display: flex; gap: 4px; flex-wrap: wrap; }
.count-line { color: var(--text-3); margin: -8px 0 14px; font-size: 12.5px; }

/* 一覧の表 */
.table-wrap { overflow: auto; max-height: calc(100vh - 150px); border-radius: var(--radius); padding: 0; }
.ctable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; white-space: nowrap; }
.ctable th { position: sticky; top: 0; z-index: 2; background: #111827; color: var(--text-2); font-size: 11.5px; font-weight: 800; text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--border-strong); cursor: pointer; user-select: none; }
.ctable th:hover { color: var(--gold); }
.ctable th.sorted { color: var(--gold); }
.ctable td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.ctable tbody tr:hover td { background-color: rgba(255, 255, 255, 0.035); }
.ctable .sticky { position: sticky; left: 0; z-index: 1; background: #0e1320; text-align: left; }
.ctable th.sticky { z-index: 3; background: #111827; }
.ctable td.num { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
/* 5段階評価 ☆◎○△× */
.grade { font-weight: 900; font-size: 14px; text-align: center; }
td.grade { padding: 6px 10px; }
.grade.g5 { color: #0b0f1a; background: linear-gradient(135deg, var(--gold), #f7e2a6); text-shadow: none; }
td.grade.g5 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.grade.g4 { color: var(--gold); background: rgba(232, 194, 106, 0.22); }
.grade.g3 { color: var(--text); background: rgba(232, 194, 106, 0.08); }
.grade.g2 { color: var(--text-2); }
.grade.g1 { color: var(--text-3); }
.bar b.grade { border-radius: 6px; padding: 0 4px; font-size: 13px; }
.tname { display: flex; align-items: center; gap: 8px; font-weight: 800; padding-right: 8px; }
.tname img { width: 32px; height: 32px; border-radius: 8px; }
.tname:hover span { color: var(--gold); }
.tpos { display: inline-flex; gap: 3px; color: var(--gold); }
.keys { display: inline-flex; gap: 2px; }
.keys i { font-style: normal; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: var(--text-3); background: rgba(255, 255, 255, 0.04); opacity: 0.45; }
.keys i.mv { background: rgba(63, 216, 208, 0.22); color: var(--cyan); opacity: 1; }
.keys i.cc { background: rgba(240, 80, 95, 0.25); color: #ff9aa3; opacity: 1; }
.keys i.slow { background: rgba(120, 160, 255, 0.2); color: #a9c0ff; opacity: 1; }
.tspikes { display: inline-flex; gap: 3px; }
.tspikes span { min-width: 22px; padding: 1px 5px; border-radius: 6px; background: rgba(232, 194, 106, 0.14); color: var(--gold); font-weight: 900; font-size: 11px; }

/* ---------- 詳細ページ ---------- */
.hero {
  position: relative; border-radius: 24px; overflow: hidden; min-height: 400px; display: flex; align-items: flex-end;
  border: 1px solid var(--border); margin-bottom: 22px;
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transform: scale(1.02); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 10, 18, 0.96) 0%, rgba(7, 10, 18, 0.7) 45%, rgba(7, 10, 18, 0.15) 100%),
              linear-gradient(0deg, rgba(7, 10, 18, 0.95), transparent 55%);
}
.hero-in { position: relative; z-index: 1; padding: 36px; display: flex; gap: 24px; align-items: flex-end; width: 100%; flex-wrap: wrap; }
.hero-icon { width: 108px; border-radius: 20px; border: 2px solid rgba(232, 194, 106, 0.7); box-shadow: 0 0 40px rgba(232, 194, 106, 0.3); }
.hero h1 { margin: 0; font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.hero .title { color: var(--gold); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 4px; }
.hero .en { color: var(--text-3); font-weight: 600; font-size: 14px; margin-left: 8px; }
.hero-stats { margin-left: auto; display: grid; grid-template-columns: repeat(3, auto); gap: 10px 22px; }
.hero-stats div { text-align: right; }
.hero-stats b { display: block; font-size: 20px; font-weight: 800; }
.hero-stats span { color: var(--text-3); font-size: 11px; font-weight: 700; }
.diff-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.diff-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--surface-2); }
.diff-dots i.on { background: var(--gold); }

.layout-detail { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.skill { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.skill:first-of-type { border-top: 0; padding-top: 0; }
.skill .sicon { position: relative; width: 52px; height: 52px; }
.skill .sicon img { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--border-strong); }
.skill .sicon .k {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: #0b0f1a; border: 1px solid var(--gold-2); color: var(--gold); font-size: 11px; font-weight: 900;
}
.sicon.has-video { cursor: pointer; }
.sicon.has-video::after {
  content: "▶"; position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 8px; color: #0b0f1a; background: var(--cyan); box-shadow: 0 0 10px rgba(63, 216, 208, 0.5);
}
.sicon.has-video:hover img { border-color: var(--cyan); box-shadow: 0 0 16px rgba(63, 216, 208, 0.45); }
#vidpop {
  position: fixed; z-index: 150; padding: 6px; border-radius: 14px; background: rgba(13, 18, 32, 0.97);
  border: 1px solid rgba(63, 216, 208, 0.5); box-shadow: var(--shadow); opacity: 0; transform: scale(0.96); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
#vidpop.show { opacity: 1; transform: none; }
#vidpop .vp-box { position: relative; }
#vidpop video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
#vidpop .vp-load { position: absolute; inset: 0; display: none; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-3); }
#vidpop.loading .vp-load { display: grid; }
.vp-cap { font-size: 12px; font-weight: 800; color: var(--cyan); padding: 6px 4px 2px; }
.skill .sname { font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.skill .sdesc { color: var(--text-2); font-size: 13px; margin-top: 4px; white-space: pre-line; }
.tagcc { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.tagcc.cc { background: rgba(240, 80, 95, 0.14); color: #ff8b96; }
.tagcc.slow { background: rgba(120, 160, 255, 0.14); color: #a9c0ff; }
.tagcc.mv { background: rgba(63, 216, 208, 0.13); color: var(--cyan); }
.tagcc.aa { background: rgba(232, 194, 106, 0.14); color: var(--gold); cursor: help; }
.snums:not(:empty) { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); }
.sn-head { font-size: 10.5px; font-weight: 800; color: var(--text-3); letter-spacing: 0.04em; margin-bottom: 6px; }
.sn-sub { font-size: 11.5px; font-weight: 800; color: var(--gold); margin: 8px 0 4px; }
.sn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sn-table th { text-align: left; font-weight: 700; color: var(--text-2); padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.sn-table td { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 0; }
.sn-meta { font-size: 11.5px; color: var(--text-3); margin-top: 6px; font-weight: 600; }
.r-ap { color: #9fb6ff; }
.r-ad { color: #ffb36b; }
.r-hp { color: var(--good); }
td.beast { color: var(--gold); font-weight: 900; font-size: 15px; }
.cdline { color: var(--text-3); font-size: 11.5px; font-weight: 600; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 78px 1fr 28px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.bar .track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.bar b { text-align: right; color: var(--text); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.runepage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.runecol { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.runecol .rh { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.runecol .rl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.build-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.build-row .arrow { color: var(--text-3); font-size: 18px; }
.build-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.build-block:first-child { border-top: 0; padding-top: 0; }
.build-block .lbl { font-size: 11.5px; font-weight: 800; color: var(--text-3); letter-spacing: 0.06em; }
.item-name { font-size: 11px; color: var(--text-2); text-align: center; max-width: 64px; line-height: 1.25; margin-top: 4px; }
.item-col { display: flex; flex-direction: column; align-items: center; }

.mlist { display: flex; flex-direction: column; gap: 8px; }
.mitem { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; transition: background .15s; }
.mitem:hover { background: var(--surface-2); }
.mitem img { width: 44px; height: 44px; border-radius: 10px; }
.mitem .mn { font-weight: 800; font-size: 13px; }
.mitem .mt { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.m-bad .mitem img { box-shadow: 0 0 0 2px rgba(240, 80, 95, 0.6); }
.m-good .mitem img { box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.6); }
.m-syn .mitem img { box-shadow: 0 0 0 2px rgba(76, 141, 255, 0.7); }
.spikes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.spike { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-2); }
.spike .lv { font-weight: 900; color: var(--gold); font-size: 12px; padding: 2px 0; border-radius: 6px; background: rgba(232, 194, 106, 0.1); text-align: center; }
.tips li { margin-bottom: 8px; color: var(--text-2); }
.tips { padding-left: 18px; margin: 0; }
.skins { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.skins figure { margin: 0; flex: none; width: 120px; scroll-snap-align: start; }
.skins img { width: 120px; height: 218px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.skins figcaption { font-size: 11px; color: var(--text-2); margin-top: 4px; line-height: 1.3; }
.note { font-size: 12px; color: var(--text-3); line-height: 1.55; }
.src-list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12.5px; }

/* ---------- ドラフト ---------- */
.draft { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.team-col { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; }
.team-col h2 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.team-col.blue h2 { color: var(--blue); }
.team-col.red h2 { color: var(--red); }
.bans { display: flex; gap: 6px; }
.ban { width: 40px; height: 40px; border-radius: 9px; border: 1px dashed var(--border-strong); position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.3); }
.ban img { width: 100%; height: 100%; filter: grayscale(1) brightness(0.6); }
.ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 46%, var(--red) 46%, var(--red) 54%, transparent 54%); opacity: 0; }
.ban.filled::after { opacity: 0.9; }
.ban.active, .slot.active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 194, 106, 0.2), 0 0 24px rgba(232, 194, 106, 0.25); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(232, 194, 106, 0.08), 0 0 32px rgba(232, 194, 106, 0.35); } }
.slot {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; min-height: 74px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden;
}
.slot .sbg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: 0.28; }
.blue .slot .sbg { mask-image: linear-gradient(90deg, transparent, #000 60%); }
.red .slot .sbg { mask-image: linear-gradient(270deg, transparent, #000 60%); }
.slot > * { position: relative; }
.slot .simg { width: 56px; height: 56px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.slot .simg img { width: 100%; height: 100%; }
.slot .sn { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.slot .ssub { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.slot .ssub .ico { width: 20px; height: 20px; border-radius: 5px; }
.slot .ssub .ico.rune { width: 22px; height: 22px; padding: 0; }
.slot .posbtns { display: flex; gap: 2px; margin-top: 5px; }
.slot .posbtns button { background: none; border: 0; padding: 2px; color: var(--text-3); border-radius: 4px; display: flex; }
.slot .posbtns button.on { color: var(--gold); background: rgba(232, 194, 106, 0.12); }
.slot .x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--text-3); font-size: 14px; }
.slot .x:hover { color: var(--red); }

.step-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.step-bar .now { font-weight: 900; font-size: 18px; }
.step-bar .now.blue { color: var(--blue); }
.step-bar .now.red { color: var(--red); }
.step-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.step-dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--surface-2); }
.step-dots i.b { background: rgba(76, 141, 255, 0.35); }
.step-dots i.r { background: rgba(240, 80, 95, 0.35); }
.step-dots i.ban.b, .step-dots i.ban.r { height: 4px; margin-top: 1px; }
.step-dots i.done.b { background: var(--blue); }
.step-dots i.done.r { background: var(--red); }
.step-dots i.cur { outline: 2px solid var(--gold); outline-offset: 1px; }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px; }
.pick-tile { position: relative; border: 0; padding: 0; background: none; border-radius: 10px; transition: transform .15s; }
.pick-tile img { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border); }
.pick-tile span { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-tile:hover { transform: translateY(-2px); }
.pick-tile:hover img { border-color: var(--gold); box-shadow: 0 0 16px rgba(232, 194, 106, 0.35); }
.pick-tile.taken { opacity: 0.22; pointer-events: none; filter: grayscale(1); }

.rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rec {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; padding: 10px; border-radius: 14px; align-items: center;
  border: 1px solid var(--border); background: rgba(0, 0, 0, 0.18); text-align: left; transition: all .15s;
}
.rec:hover { border-color: rgba(232, 194, 106, 0.55); background: rgba(232, 194, 106, 0.05); }
.rec img.ci { width: 54px; height: 54px; border-radius: 10px; }
.rec .rn { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.rec .rw { font-size: 11.5px; color: var(--text-2); line-height: 1.4; margin-top: 3px; }
.rec .rw .p { color: var(--good); }
.rec .rw .n { color: var(--bad); }
.rec .rs { text-align: right; }
.rec .rs b { font-size: 18px; font-weight: 900; color: var(--gold); display: block; line-height: 1; }
.rec .rs span { font-size: 10px; color: var(--text-3); }
.rec .kit { display: flex; gap: 3px; margin-top: 5px; align-items: center; }
.rec .kit .ico { width: 20px; height: 20px; border-radius: 5px; }
.rec .kit .ico.rune { width: 22px; height: 22px; padding: 0; }

/* ---------- 評価 ---------- */
.eval-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.eval-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.eslot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); position: relative; }
.eslot .pl { color: var(--text-3); display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.eslot button.pickbtn { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--border-strong); background: rgba(0, 0, 0, 0.3); padding: 0; overflow: hidden; color: var(--text-3); font-size: 22px; }
.eslot button.pickbtn img { width: 100%; height: 100%; }
.eslot .en { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; min-height: 1.2em; }
.blue-t .eslot.filled { border-color: rgba(76, 141, 255, 0.45); }
.red-t .eslot.filled { border-color: rgba(240, 80, 95, 0.45); }

.mecheck { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-2); font-size: 12px; font-weight: 800; padding: 4px 6px; border-radius: 8px; }
.mecheck .box, .me-guide .box {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-strong); display: grid; place-items: center;
  font-size: 16px; font-weight: 900; line-height: 1; color: #0b0f1a; transition: all .15s; flex: none;
}
.mecheck:hover { color: var(--gold); }
.mecheck:hover .box { border-color: var(--gold); }
.mecheck.on { color: var(--gold); }
.mecheck.on .box { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 194, 106, 0.5); }
.me-guide { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; font-size: 13px; color: var(--text-2); background: rgba(232, 194, 106, 0.07); border: 1px solid rgba(232, 194, 106, 0.3); }
.me-guide .box { background: var(--gold); border-color: var(--gold); }
.me-guide b { color: var(--gold); }
.eslot.me { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(232, 194, 106, 0.25), 0 0 24px rgba(232, 194, 106, 0.2); }
.me-hint { padding: 14px 18px; margin-bottom: 18px; color: var(--text-2); font-size: 13px; border-color: rgba(232, 194, 106, 0.3); }
.me-panel { margin-bottom: 18px; border-color: rgba(232, 194, 106, 0.45); background: linear-gradient(160deg, rgba(232, 194, 106, 0.08), var(--surface) 40%); }
.me-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.me-head > img { width: 60px; height: 60px; border-radius: 14px; border: 2px solid var(--gold); box-shadow: 0 0 24px rgba(232, 194, 106, 0.3); }
.me-score { margin-left: auto; text-align: right; }
.me-score span { display: block; font-size: 11px; font-weight: 800; color: var(--text-3); }
.me-score b { font-size: 34px; font-weight: 900; line-height: 1; }
.me-sub { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-2); margin: 0 0 8px; }
.me-vs { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.me-vs img { width: 52px; height: 52px; border-radius: 12px; }
.me-vs .vs { font-weight: 900; color: var(--text-3); font-size: 12px; }
.me-phase { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
.me-phase > div { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.me-phase b { display: block; font-size: 11px; margin-bottom: 2px; }
.watch { display: flex; flex-direction: column; gap: 8px; }
.watch-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.watch-row img { width: 34px; height: 34px; border-radius: 8px; }
.watch .wn { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.watch .wn b { color: var(--gold); }
.watch .wcd { font-size: 11px; color: var(--text-3); }
.watch .wtag { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(240, 80, 95, 0.14); color: var(--bad); }
.watch .wt { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.watch .wt .s { color: var(--text-3); font-size: 11px; }
.watch-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 2px; }
.lane-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12px; color: var(--text-2); margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.lane-stat > b { color: var(--text); font-size: 11.5px; }
.lane-stat .s { font-size: 10.5px; color: var(--text-3); }
/* ルーン（キーストーン）とサモナースペル */
.ks-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.ks-row { display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; gap: 8px; }
.ks-who { font-size: 12px; font-weight: 800; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; cursor: pointer; }
.ks-chip img { border-radius: 50%; }
.ks-chip small { font-size: 10.5px; font-weight: 800; }
.ks-chip.on { border-color: var(--gold); color: var(--text); box-shadow: 0 0 0 1px var(--gold) inset; font-weight: 800; }
.ks-sp { display: inline-flex; gap: 3px; }
.ks-src { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.ks-best { font-size: 12px; color: var(--text-2); }
.ks-spells { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 11px; color: var(--text-3); }
.ks-sp-opt { display: inline-flex; align-items: center; gap: 3px; }
.ks-sync { font-size: 11.5px; color: var(--text-2); }
.ks-sync.warn { color: var(--bad); }
@media (max-width: 560px) {
  .ks-row { grid-template-columns: 1fr auto auto; }
  .ks-who { grid-column: 1 / -1; }
}
.trade { display: flex; flex-direction: column; gap: 10px; }
.trade-how { display: flex; flex-direction: column; gap: 4px; }
.trade-how > div:first-of-type { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
.trade-how .wt { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.trade-t { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.trade-t th, .trade-t td { padding: 6px 4px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.trade-t tr:first-child th { border-top: 0; font-size: 11px; color: var(--text-3); }
.trade-t th { font-weight: 800; color: var(--text-2); width: 24%; }
.trade-t .s { font-size: 10.5px; color: var(--text-3); font-weight: 400; line-height: 1.45; }
.timeline { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--border); padding-left: 12px; }
.tl { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr); gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5; position: relative; }
.tl::before { content: ""; position: absolute; left: -17px; top: 6px; width: 8px; height: 8px; border-radius: 50%; }
.tl.me::before { background: var(--gold); }
.tl.opp::before { background: var(--bad); }
.tl .lv { font-weight: 900; color: var(--text); }
.tl .who { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl.me .who { color: var(--gold); }
.tl.opp .who { color: #ff8b96; }
.me-advice { margin-top: 10px; font-size: 12px; color: var(--text-2); padding: 8px 10px; border-radius: 10px; background: rgba(242, 180, 60, 0.08); border: 1px solid rgba(242, 180, 60, 0.25); }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.plan-ph { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.plan-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 13px; }
.plan-h b { color: var(--gold); font-size: 14px; }
.plan-st { flex: none; font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
.plan-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.plan-cmp > div { display: grid; grid-template-columns: 58px 1fr 26px; gap: 6px; align-items: center; font-size: 11px; color: var(--text-3); }
.plan-cmp span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-cmp em { font-style: normal; font-weight: 800; color: var(--text-2); text-align: right; }
.pl-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 3px; }
.plan-ph ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; display: flex; flex-direction: column; gap: 4px; }
.pl-me { color: var(--gold); font-weight: 800; }
.pl-opp { color: #ff8b96; font-weight: 800; }
.refcard.me { border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(232, 194, 106, 0.4); }
.me-tag { font-size: 10.5px; font-weight: 900; color: #0b0f1a; background: var(--gold); padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }
.verdict { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 22px 26px; margin-bottom: 18px; }
.verdict .side { font-weight: 900; font-size: 15px; letter-spacing: 0.08em; }
.verdict .side.b { color: var(--blue); }
.verdict .side.r { color: var(--red); text-align: right; }
.verdict .big { font-size: 44px; font-weight: 900; line-height: 1; }
.tug { grid-column: 1 / -1; height: 14px; border-radius: 7px; display: flex; gap: 2px; overflow: hidden; }
.tug .tb { background: var(--blue); border-radius: 7px 3px 3px 7px; }
.tug .tr { background: var(--red); border-radius: 3px 7px 7px 3px; flex: 1; }
.parts { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.lane-row { display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.lane-row:first-of-type { border-top: 0; }
.lane-row img { width: 44px; height: 44px; border-radius: 10px; }
.lane-row .lb { color: var(--blue); }
.lane-row .lr { color: var(--red); }
.div-bar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); }
.div-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text-3); border-radius: 1px; }
.div-bar .f { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.lane-row .why { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.lane-row .why .s { color: var(--text-3); }
.lane-score { font-weight: 900; font-size: 13px; }
.lane-detail { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; }
.lane-detail svg { flex: none; }
.lane-detail .why { margin-top: 0; }
.lvwrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.phase-list { display: flex; flex-direction: column; gap: 2px; }
.phase-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.phase-row b { white-space: nowrap; }
.plan { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(232, 194, 106, 0.07); border: 1px solid rgba(232, 194, 106, 0.25); font-size: 12.5px; line-height: 1.65; color: var(--text-2); }
.plan b { display: block; color: var(--gold); margin-bottom: 4px; font-size: 12px; }

.chart-wrap { position: relative; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.warn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.warn-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); }
.warn-list .w::before { content: "⚠"; color: var(--warn); }
.warn-list .g::before { content: "✓"; color: var(--good); font-weight: 900; }

.refcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.refcard { padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.refcard .rbg { position: absolute; inset: 0; background-size: cover; background-position: center 18%; opacity: 0.16; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.refcard > * { position: relative; }
.refcard .rh { display: flex; gap: 10px; align-items: center; }
.refcard .rh img { width: 46px; height: 46px; border-radius: 10px; }
.refcard.b { border-color: rgba(76, 141, 255, 0.35); }
.refcard.r { border-color: rgba(240, 80, 95, 0.35); }
.refcard .tip { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.refcard .alert { font-size: 11.5px; color: #ff8b96; background: rgba(240, 80, 95, 0.08); border-radius: 8px; padding: 6px 8px; }

/* モーダル */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(3, 5, 10, 0.7); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.modal { width: min(860px, 100%); max-height: 86vh; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: rgba(13, 18, 32, 0.97); }
.modal .picker-grid { max-height: 60vh; }


.empty { padding: 30px; text-align: center; color: var(--text-3); }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
  .draft { grid-template-columns: 1fr 1fr; }
  .team-col { position: static; max-height: none; overflow: visible; }
  .draft .center { grid-column: 1 / -1; order: -1; }
  .layout-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  main { padding: 16px; }
  .nav { padding: 10px 16px; gap: 12px; }
  .nav-right { display: none; }
  .brand small { display: none; }
  .grid-2, .grid-3, .eval-teams, .runepage, .draft { grid-template-columns: minmax(0, 1fr); }
  .nav-links { min-width: 0; }
  .nav-links a { padding: 6px 10px; }
  .brand { font-size: 0; gap: 0; }
  .eslot { padding: 8px 2px; min-width: 0; }
  .eslot .pl span, .eslot .pl { font-size: 0; }
  .eslot .pl .pos-ico { width: 14px; height: 14px; }
  .eslot .en { font-size: 10px; word-break: break-all; }
  .mecheck { flex-direction: column; gap: 2px; font-size: 9px; padding: 2px 0; white-space: nowrap; letter-spacing: -0.02em; }
  .me-guide { font-size: 12px; align-items: flex-start; }
  .rec-list { grid-template-columns: minmax(0, 1fr); }
  .lane-row { grid-template-columns: 20px 36px minmax(0, 1fr) 36px; gap: 8px; }
  .lane-row img { width: 36px; height: 36px; }
  .lvwrap { grid-template-columns: minmax(0, 1fr); }
  .lane-detail { flex-direction: column; gap: 6px; }
  .verdict { padding: 16px; }
  .verdict .big { font-size: 34px; }
  .page-head .row { flex-wrap: wrap; }
  .hero-in { padding: 20px; }
  .hero-stats { margin-left: 0; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .hero-stats div { text-align: left; }
  .champ-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .search { min-width: 0; width: 100%; }
  .eval-team { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .eslot button.pickbtn { width: 48px; height: 48px; }
  .verdict { grid-template-columns: 1fr 1fr; }
  .verdict .mid { display: none; }
}
.pos-rate { font-size: 11px; color: var(--text-3); font-weight: 700; }

/* 試合統計（op.gg） */
.badge.tier { font-variant-numeric: tabular-nums; }
.badge.t1 { color: #1a1206; background: var(--gold); }
.badge.t2 { color: var(--good); background: rgba(62, 207, 142, 0.14); }
.badge.t3 { color: var(--text-2); background: var(--surface-2); }
.badge.t4, .badge.t5 { color: var(--bad); background: rgba(240, 80, 95, 0.12); }
.wr { font-variant-numeric: tabular-nums; font-weight: 700; }
.wr-hi { color: var(--good); }
.wr-lo { color: var(--bad); }
.mwr { font-size: 11.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mwr.good { color: var(--good); background: rgba(62, 207, 142, 0.12); }
.mwr.bad { color: var(--bad); background: rgba(240, 80, 95, 0.12); }
.grid-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-vs .mitem { grid-template-columns: 36px 1fr; gap: 9px; padding: 6px; }
.grid-vs .mitem img { width: 36px; height: 36px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--border); }
.stat-table thead th { color: var(--text-3); font-weight: 700; font-size: 11px; }
.stat-table tbody th { text-align: left; font-weight: 800; white-space: nowrap; }
.stat-table td:first-of-type { font-weight: 800; }
.b-rate { font-weight: 600; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.skord { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.sk-row { display: grid; grid-template-columns: 20px repeat(15, minmax(18px, 1fr)); gap: 3px; align-items: center; }
.sk-row b { font-size: 12px; color: var(--text-2); }
.sk-row i { font-style: normal; height: 20px; border-radius: 4px; background: var(--surface-2); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; color: #1a1206; }
.sk-row i.on { background: var(--gold); }
.vs-stat { font-size: 12px; color: var(--text-2); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.vs-stat.good b { color: var(--good); }
.vs-stat.bad b { color: var(--bad); }
@media (max-width: 760px) {
  .grid-vs { grid-template-columns: minmax(0, 1fr); }
  .stat-table { font-size: 11.5px; }
}

/* マイピック: 防御・貫通アイテムの選択肢 */
.ci-row { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); margin-bottom: 6px; border: 1px solid transparent; }
.ci-row.hot { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232, 194, 106, 0.25) inset; }
.ci-head { font-size: 12px; color: var(--text-2); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ci-head b { color: var(--text); }
.ci-tag { font-size: 10.5px; font-weight: 800; color: var(--gold); background: rgba(232, 194, 106, 0.12); padding: 1px 6px; border-radius: 6px; }
.ci-item { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.ci-item small { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ci-core { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ボットレーン 2vs2 */
.duo-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: center; }
.duo { display: flex; gap: 4px; }
.duo-img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.duo-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.duo-rows > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duo-rows span { font-size: 11px; color: var(--text-3); font-weight: 700; }
.duo-rows b { font-size: 12.5px; }
.duo-rows small { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }

/* ガンク力 */
.gk-jg { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.gk-jg img { width: 40px; height: 40px; border-radius: 10px; }
.gk-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.gk-bar i { display: block; height: 100%; border-radius: 4px; }
.gk-v { font-size: 12px; width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.gk-lanes { display: flex; flex-direction: column; gap: 8px; }
.gk-lane { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; color: var(--text-2); }
.gk-pair { display: flex; flex-direction: column; gap: 3px; }
.gk-pair small { width: 48px; font-size: 10.5px; font-weight: 800; flex: none; }

/* ピック評価: ドラッグでレーン入れ替え */
.eslot.filled .pickbtn { touch-action: none; cursor: grab; }
.eslot.dragging { opacity: 0.45; }
.eslot.drop { outline: 2px dashed var(--gold); outline-offset: 2px; }
.drag-ghost { position: fixed; left: 0; top: 0; width: 56px; height: 56px; border-radius: 12px; pointer-events: none; z-index: 1000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); border: 2px solid var(--gold); }
@media (max-width: 760px) {
  .duo-rows { grid-template-columns: minmax(0, 1fr); }
}
.ci-item { width: 72px; }
.ci-name { font-size: 10px; line-height: 1.25; color: var(--text-2); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* コンボ */
.combos { display: grid; gap: 10px; }
.combo { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.cb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.cb-lv { font-size: 10.5px; font-weight: 800; color: var(--gold); background: rgba(232, 194, 106, 0.12); padding: 1px 6px; border-radius: 6px; }
.cb-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.cb-step { position: relative; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; display: inline-grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--border-strong); }
.cb-step img { width: 100%; height: 100%; display: block; }
.cb-step b { position: absolute; left: 1px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.cb-step sub { position: absolute; right: 2px; top: 0; font-size: 10px; font-weight: 900; color: var(--gold); text-shadow: 0 0 3px #000; }
.cb-step.aa { font-size: 11px; font-weight: 900; color: var(--text-2); }
.cb-arrow { color: var(--text-3); font-size: 13px; }
.cb-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.clash { font-size: 10.5px; font-weight: 800; color: var(--warn); background: rgba(242, 180, 60, 0.12); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.ci-best { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.ci-why { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 2px; }
.def-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-left: 8px; padding-left: 10px; border-left: 1px dashed var(--border-strong); }
.def-slot span { font-size: 10px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.plan-extra { border-color: rgba(232, 194, 106, 0.35); }
.plan-extra .plan-h b { color: var(--gold); }
.pl-ico { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin: 0 4px 0 2px; }
.pl-sec { display: inline-block; font-size: 10.5px; font-weight: 900; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.start-row { gap: 5px; margin-top: 10px; align-items: center; }
.mini-lbl { font-size: 10.5px; font-weight: 800; color: var(--text-3); margin-right: 2px; }
.def-slot.hot .ico { box-shadow: 0 0 0 2px var(--gold); border-radius: 8px; }

/* ドラフト: マイチャンピオン */
.pool-bar { padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.pool-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pool-h b { color: var(--gold); }
.pool-h .muted { font-size: 11px; }
.pool-h .pool-clear { margin-left: auto; }
.pool-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pool-item { position: relative; }
.pool-item.taken { opacity: 0.3; filter: grayscale(1); }
.pool-pick { border: 0; padding: 0; background: none; display: block; cursor: pointer; }
.pool-pick img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-strong); display: block; transition: transform .15s; }
.pool-pick:hover img { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 194, 106, 0.35); }
.pool-rm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--surface-solid); color: var(--text-2); font-size: 11px; line-height: 18px; padding: 0; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 0 0 1px var(--border-strong); }
.pool-item:hover .pool-rm { opacity: 1; }
@media (hover: none) { .pool-rm { opacity: 1; } }
.pool-add { width: 44px; height: 44px; border-radius: 10px; border: 1px dashed var(--gold); background: rgba(232, 194, 106, 0.06); color: var(--gold); font-size: 22px; cursor: pointer; }
.pool-add:hover { background: rgba(232, 194, 106, 0.14); }
.pick-tile.in-pool img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.pick-tile.in-pool::after { content: "✓"; position: absolute; top: 3px; right: 5px; font-weight: 900; color: #1a1206; background: var(--gold); border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; }
.rec-sec { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--gold); margin-top: 4px; }
.rec-sec.muted { color: var(--text-3); font-weight: 600; }
.rec.mine { border-color: rgba(232, 194, 106, 0.45); background: rgba(232, 194, 106, 0.05); }
.rec[data-plan] { cursor: default; opacity: 0.85; }
.mine-tag { font-size: 9.5px; font-weight: 900; color: #1a1206; background: var(--gold); border-radius: 5px; padding: 1px 5px; }

/* ピック評価: レーン入れ替え */
.team-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.team-h h3 { margin: 0; }
.team-h .autolane { margin-left: auto; }
.swap-hint { font-size: 11.5px; font-weight: 800; color: var(--gold); }
.pickwrap { position: relative; }
.swapbtn { position: absolute; top: -7px; right: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text-2); font-size: 12px; line-height: 1; padding: 0; cursor: pointer; }
.swapbtn:hover { color: var(--gold); border-color: var(--gold); }
.eslot.swap-src { outline: 2px solid var(--gold); outline-offset: 2px; }
.eslot.swap-src .swapbtn { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.eslot.swap-target { outline: 2px dashed rgba(232, 194, 106, 0.6); outline-offset: 2px; cursor: pointer; }
.eslot.swap-target .pickbtn { border-color: var(--gold); }
@media (max-width: 760px) {
  .swapbtn { top: -6px; right: -6px; width: 18px; height: 18px; font-size: 10px; }
  .team-h .autolane { font-size: 11px; padding: 4px 8px; }
}
.heal-pair { display: flex; align-items: center; gap: 3px; }
.heal-pair .arrow { color: var(--text-3); font-size: 12px; }

/* ドラフト: 事前ピック・レーン予約・自分の枠 */
.empty-slot { cursor: pointer; }
.empty-slot:hover { border-color: rgba(232, 194, 106, 0.4); }
.slot.pretarget { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(63, 216, 208, 0.18); }
.slot .lane-res { margin-top: 6px; }
.slot .lane-res button { opacity: 0.55; }
.slot .lane-res button.on { opacity: 1; }
.slot .lane-res button:hover { opacity: 1; color: var(--text); }
.mybtn { position: absolute; right: 8px; bottom: 6px; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, 0.35); color: var(--text-3); cursor: pointer; }
.mybtn:hover { color: var(--gold); border-color: var(--gold); }
.mybtn.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.slot.myslot { border-color: rgba(232, 194, 106, 0.6); }
.lock { font-size: 11px; margin-right: 3px; }
.my-turn { display: inline-block; font-size: 11px; font-weight: 900; color: #1a1206; background: var(--gold); border-radius: 6px; padding: 2px 8px; margin-bottom: 4px; }
.pool-lanes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pool-lane { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: var(--text); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; cursor: help; }
.pool-lane .pos-ico { color: var(--gold); }
.pool-lane.zero { color: var(--text-3); opacity: 0.6; }
.pool-lane.zero .pos-ico { color: var(--text-3); }

/* アイテムのツールチップ: 素材ツリー */
.itip .it-tree { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.itip .it-tree-h { font-size: 11px; font-weight: 800; color: var(--text-3); margin-bottom: 6px; }
#tip.wide { max-width: 420px; }
/* 素材ツリー（縦の階層） */

/* アイテムの固定ポップアップ（クリックで表示、×で閉じる） */
#itempin { position: fixed; z-index: 120; width: min(440px, calc(100vw - 16px)); overflow-x: hidden; max-height: min(78vh, 720px); overflow-y: auto; padding: 14px 16px; border-radius: 14px; background: rgba(13, 18, 32, 0.98); border: 1px solid var(--border-strong); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); font-size: 12.5px; color: var(--text); display: none; }
#itempin.show { display: block; }
#itempin .pin-x { position: sticky; top: 0; float: right; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--text-2); font-size: 15px; cursor: pointer; z-index: 1; }
#itempin .pin-x:hover { color: var(--text); border-color: var(--gold); }
[data-tip-item] { cursor: pointer; }
#itempin .pin-back { font-size: 11px; font-weight: 800; color: var(--gold); background: none; border: 1px solid var(--border-strong); border-radius: 6px; padding: 3px 8px; margin-bottom: 8px; cursor: pointer; }

/* 素材ツリー（ゲーム内ショップ風: 上の完成品から下の素材へ枝分かれ） */
.itip .tr-root { display: flex; justify-content: center; padding-bottom: 2px; }
.itip .tr-node { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 3px; }
.itip .tr-kids { display: flex; justify-content: center; position: relative; padding-top: 7px; }
.itip .tr-kids::before { content: ""; position: absolute; top: 0; left: 50%; height: 7px; border-left: 1px solid var(--border-strong); }
.itip .tr-kids > .tr-node { padding-top: 7px; }
.itip .tr-kids > .tr-node::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--border-strong); }
.itip .tr-kids > .tr-node:first-child::before { left: 50%; }
.itip .tr-kids > .tr-node:last-child::before { right: 50%; }
.itip .tr-kids > .tr-node:only-child::before { display: none; }
.itip .tr-kids > .tr-node::after { content: ""; position: absolute; top: 0; left: 50%; height: 7px; border-left: 1px solid var(--border-strong); }
.itip .tr-n { display: flex; flex-direction: column; align-items: center; width: var(--tw, 66px); text-align: center; border-radius: 6px; padding: 2px 0; cursor: pointer; }
.itip .tr-n:hover { background: rgba(255, 255, 255, 0.05); }
.itip .tr-n.root { cursor: default; }
.itip .tr-n img { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-strong); }
.itip .tr-n.root img { width: 34px; height: 34px; border-color: var(--gold); }
.itip .tr-n small { font-size: 10px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.itip .tr-s { font-size: 9.5px; line-height: 1.25; color: var(--text-2); }
.itip .tr-e { font-size: 9px; font-weight: 800; color: var(--cyan); }
.itip.tr-compact .tr-s, .itip.tr-compact .tr-e { display: none; }
.itip .tr-n img { max-width: calc(var(--tw, 66px) - 8px); height: auto; aspect-ratio: 1; }
.itip .tr-s { overflow-wrap: anywhere; }

/* ドラフト: LoL クライアントとの連携 */
.lcu-btn.on { border-color: var(--good); color: var(--good); }
.lcu-stat { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.lcu-stat.live { color: var(--good); }
.lcu-stat.live::before { content: "● "; animation: pulse-dot 1.2s infinite; }
.lcu-stat.ok { color: var(--cyan); }
.lcu-stat.warn { color: var(--warn); }
.lcu-stat.err { color: var(--bad); }
@keyframes pulse-dot { 50% { opacity: 0.3; } }

.sdesc.official { color: var(--text); }
.r-etc { color: var(--cyan); }
.lcu-stat a { color: var(--gold); text-decoration: underline; font-weight: 800; }
.ext-guide { max-width: 640px; gap: 14px; }
.ext-guide .btn.primary { align-self: flex-start; text-decoration: none; }
.eg-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.eg-steps code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 5px; color: var(--text); }
.eg-steps ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }

/* フッター（プライバシーポリシー・Riot の定型文） */
.site-foot { max-width: 1440px; margin: 0 auto; padding: 24px 28px 36px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--border); }
.site-foot a { color: var(--text-2); }
.site-foot p { margin: 8px 0 0; line-height: 1.6; }
/* ショートトレードのコンボ */
.sc-row { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.sc-row:last-of-type { border-bottom: 0; }
.sc-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sc-seq b { font-size: 12.5px; margin-left: 4px; }
.sc-seq small { font-size: 11px; font-weight: 700; }
.sc-none { font-size: 12.5px; color: var(--text-2); padding: 6px 0; }
.sc-none b { color: var(--bad); }
/* マイピックのコア（1〜2つ目は対面、3〜5つ目は構成） */
.core-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.core-tag { font-size: 10px; font-weight: 800; color: var(--text-3); white-space: nowrap; cursor: help; }
.core-tag.lane { color: var(--gold); }
.core-tag.comp { color: var(--blue); }
.lcu-old { font-size: 12px; color: var(--bad); }
.ks-sync.warn a, .lcu-stat a[data-ext-guide] { font-weight: 800; }
.cb-tip { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.cb-tip b { display: inline-block; font-size: 10.5px; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0 4px; margin-right: 6px; }
/* 試合中モード */
.live-panel { border-color: rgba(232, 194, 106, 0.45); margin-bottom: 18px; }
.lv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; margin-bottom: 12px; }
.lv-head > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lv-badge { font-size: 11.5px; font-weight: 900; color: var(--bad); }
.lv-time { font-size: 22px; font-variant-numeric: tabular-nums; }
.lv-vs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .lv-grid { grid-template-columns: 1fr; } }
.lv-objs, .lv-focuses { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-obj, .lv-focus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.lv-obj small, .lv-focus small { color: var(--text-3); font-size: 10.5px; }
.lv-obj.soon { box-shadow: 0 0 0 1px var(--gold) inset; }
.lv-obj.up { box-shadow: 0 0 0 1px var(--bad) inset; }
.lv-focus img { width: 22px; height: 22px; border-radius: 50%; }
.lv-buy { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.lv-buy .s { font-size: 11.5px; color: var(--text-2); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lv-pen { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.lv-trade { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.live-panel .plan-ph { margin: 0; }
/* 獣判定の対象スキン */
.beast-skins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.beast-skin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 8px; background: var(--surface-2); font-size: 12px; font-weight: 700; }
.beast-skin-chip img { width: 28px; height: 50px; object-fit: cover; border-radius: 5px; }
.skins figure { position: relative; }
.skins figure.beast-skin img { box-shadow: 0 0 0 2px var(--gold); }
.beast-mark { position: absolute; top: 6px; left: 6px; z-index: 1; font-size: 10.5px; font-weight: 900; color: #1a1408; background: var(--gold); border-radius: 999px; padding: 2px 7px; }
.tl-kill { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 800; }
.tl-kill.me { color: var(--good); }
.tl-kill.opp { color: var(--bad); }
.vs-marks { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-left: -8px; opacity: 0.9; }
.me-vs .vs-marks img { width: 18px; height: 18px; border-radius: 4px; box-shadow: none; }
.me-vs .vs-marks img.sum { width: 14px; height: 14px; }
/* マイピックのボットレーン 2vs2 */
.duo-vs { flex-wrap: wrap; }
.duo-pair { display: inline-flex; align-items: center; gap: 4px; }
.duo-pair img { width: 46px; height: 46px; border-radius: 10px; }
.duo-pair img.is-me { box-shadow: 0 0 0 2px var(--gold); }
.duo-sub { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.beast-skin-chip small { font-size: 10px; color: var(--text-3); margin-left: 4px; }
.beast-mark.mid { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.pl-focus { white-space: nowrap; font-weight: 800; color: var(--text); cursor: help; }
/* スパイクの比較（Lv・名前・キルライン・説明） */
.spike-t { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.spike-t th { text-align: left; font-size: 10.5px; color: var(--text-3); font-weight: 800; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.spike-t td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); line-height: 1.5; }
.spike-t .sk-lv { font-weight: 900; white-space: nowrap; color: var(--text); }
.spike-t .sk-who { white-space: nowrap; font-weight: 800; }
.spike-t tr.me .sk-who { color: var(--gold); }
.spike-t tr.opp .sk-who { color: var(--bad); }
.spike-t .sk-kill { white-space: nowrap; font-weight: 800; cursor: help; }
.spike-t .sk-kill.me { color: var(--good); }
.spike-t .sk-kill.opp { color: var(--bad); }
@media (max-width: 560px) { .spike-t .sk-kill { white-space: normal; } }
.lv-gold { font-size: 11.5px; color: var(--text-2); margin: 3px 0 0 46px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* 購入順（試合前）と次に買うもの（試合中） */
.buy-plan { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.buy-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.buy-step { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.buy-step small { font-size: 9.5px; color: var(--text-3); white-space: nowrap; }
.buy-step small.buy-cum { font-size: 9px; opacity: .75; }
.buy-step.comb small:first-child { color: var(--accent, var(--text-2)); }
.buy-icons { display: inline-flex; gap: 3px; align-items: center; }
.buy-list { display: flex; flex-direction: column; gap: 4px; }
.buy-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.buy-row .buy-lbl { min-width: 92px; white-space: nowrap; }
.buy-row.done { opacity: 0.5; }
.buy-row.skip { opacity: 0.35; }
.buy-row.skip .buy-lbl { text-decoration: line-through; }
.buy-row.now { color: var(--text); font-weight: 800; }
.buy-row.now .buy-lbl { color: var(--gold); }
.buy-row.adapt .buy-lbl { color: var(--blue); cursor: help; }
.buy-row .got img { opacity: 0.35; }
.buy-wrap { display: flex; gap: 10px; align-items: flex-start; }
.buy-wrap > .buy-list, .buy-wrap > .s { flex: 1; min-width: 0; }
.final-build { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-left: 10px; border-left: 1px solid var(--border); }
.fb-head { font-size: 10px; font-weight: 800; color: var(--text-3); cursor: help; }
.fb-slot { display: flex; align-items: center; gap: 4px; }
.fb-tag { font-size: 10px; font-weight: 800; color: var(--text-3); cursor: help; min-width: 14px; text-align: right; }
.fb-slot.got img { opacity: 0.35; }
.fb-slot.adapt .fb-tag { color: var(--blue); }
.fb-slot.over { opacity: 0.35; }
.fb-slot.over img { filter: grayscale(1); }
/* 試合中モードの追加の欄 */
.lv-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.lv-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.lv-combo .cb-seq { display: inline-flex; align-items: center; gap: 2px; }
.lv-combo small { font-size: 11px; color: var(--text-2); cursor: help; }
.lv-team { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.lv-lanes { display: flex; flex-direction: column; gap: 5px; }
.lv-lane { display: grid; grid-template-columns: 34px auto 34px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.lv-lane-pos { font-weight: 900; color: var(--text-3); font-size: 11px; }
.lv-lane-ic { display: inline-flex; align-items: center; gap: 2px; }
.lv-lane-ic img { width: 20px; height: 20px; border-radius: 50%; }
.lv-lane-ic small { font-size: 9.5px; color: var(--text-3); margin: 0 2px; }
.lv-lane small { color: var(--text-2); font-size: 11px; }
/* 練習ドリル */
#drillsec { scroll-margin-top: 80px; }
.drills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.drill { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.dr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dr-head b { font-size: 13px; }
.dr-type { font-size: 10.5px; font-weight: 900; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0 5px; }
.dr-conf { font-size: 10px; color: var(--text-3); border: 1px dashed var(--border); border-radius: 4px; padding: 0 4px; }
.dr-goal { font-size: 12px; color: var(--text-2); }
.dr-steps { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text); line-height: 1.55; }
.dr-pass { font-size: 11.5px; color: var(--text-2); }
.dr-pass b { color: var(--good); margin-right: 6px; }
/* ローム・ガンク注意報 */
.lv-alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--text); background: var(--surface-2); border-left: 4px solid var(--text-3); }
.lv-alert b { font-weight: 900; }
.lv-alert small { flex-basis: 100%; color: var(--text-2); font-size: 11px; }
.lv-alert.high { border-left-color: var(--bad); }
.lv-alert.high b { color: var(--bad); }
.lv-alert.mid { border-left-color: var(--gold); }
.lv-alert.mid b { color: var(--gold); }
.lv-alert.low { border-left-color: var(--good); }
.lv-alert.low b { color: var(--good); }
/* 試合中の通知（今の状態とタイムライン） */
.lv-status { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
/* いま優先する行動（試合中モードの左上に大きく） */
.lv-prio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); border-left: 5px solid var(--gold); cursor: help; }
.lv-prio-k { flex-basis: 100%; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-3); }
.lv-prio b { font-size: 26px; font-weight: 900; line-height: 1.2; color: var(--gold); }
.lv-prio > span:not(.lv-prio-k) { font-size: 13px; color: var(--text); }
.lv-prio small { flex-basis: 100%; font-size: 11px; color: var(--text-2); }
.lv-prio.good { border-left-color: var(--good); }
.lv-prio.good b { color: var(--good); }
.lv-prio.bad { border-left-color: var(--bad); }
.lv-prio.bad b { color: var(--bad); }
/* 勝てる時間帯（横軸は試合時間） */
.win-time { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 2px; border-radius: 8px; background: var(--surface-2); cursor: help; }
.win-row { display: flex; align-items: center; gap: 8px; }
.win-lbl { width: 72px; flex: none; font-size: 10.5px; font-weight: 800; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-bar { position: relative; flex: 1; display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.win-bar i { display: block; height: 100%; }
.win-bar i.wg { background: var(--good); }
.win-bar i.wb { background: var(--bad); }
.win-bar i.we { background: var(--border-strong); }
.win-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--text); box-shadow: 0 0 0 1px var(--bg, #000); }
.win-ticks { position: relative; flex: 1; height: 13px; font-size: 9.5px; color: var(--text-3); }
.win-ticks span { position: absolute; transform: translateX(-50%); }
.win-ticks span:first-child { transform: none; }
.win-ticks span:last-child { transform: translateX(-100%); }
.lv-feed { display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
.lv-feed-row { display: grid; grid-template-columns: 38px 64px 1fr; gap: 6px; font-size: 11.5px; color: var(--text-2); align-items: baseline; }
.lv-feed-t { font-variant-numeric: tabular-nums; color: var(--text-3); }
.lv-feed-k { font-weight: 900; font-size: 10.5px; }
.lv-feed-row.good .lv-feed-k { color: var(--good); }
.lv-feed-row.bad .lv-feed-k { color: var(--bad); }
.lv-feed-row.mid .lv-feed-k { color: var(--gold); }
/* 集団戦の要人（役割バッジ） */
.tf-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0; }
.tf-side { font-size: 10.5px; font-weight: 900; color: var(--text-3); min-width: 28px; }
.tf-champ { display: inline-flex; align-items: center; gap: 2px; cursor: help; }
.tf-tag { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 0 3px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.tf-tag.t-火力 { color: var(--bad); border-color: var(--bad); }
.tf-tag.t-仕掛け, .tf-tag.t-突撃 { color: var(--gold); border-color: var(--gold); }
.tf-tag.t-タンク, .tf-tag.t-守り { color: var(--blue); border-color: var(--blue); }
.tf-tag.t-fed { color: #fff; background: var(--bad); border-color: var(--bad); }
/* 試合中モード: 1画面に収める3列（状況 / レーン / マクロ） */
.live-panel { padding: 12px 14px; }
.live-panel .lv-head { margin-bottom: 8px; }
.live-panel .lv-time { font-size: 20px; }
.lv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .lv-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lv-grid3 { grid-template-columns: 1fr; } }
.lv-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.live-panel .me-sub { margin: 0 0 4px; font-size: 11.5px; }
.live-panel .spike-t td { padding: 3px 4px; font-size: 11.5px; }
.live-panel .lv-feed { max-height: 120px; }
.lv-phase { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.lv-phase .plan-st { flex: none; }
.lv-line { font-size: 12px; color: var(--text-2); line-height: 1.5; cursor: help; }
.lv-watches { display: flex; flex-direction: column; gap: 3px; }
.lv-watch { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: help; }
.lv-watch img { width: 22px; height: 22px; border-radius: 5px; }
.lv-watch small { color: var(--text-3); font-size: 10.5px; }
.dmg-t { display: inline-block; font-size: 10px; font-weight: 900; padding: 0 4px; border-radius: 3px; margin: 0 2px; color: #fff; }
.dmg-t.ad { background: #cf6d2a; }
.dmg-t.ap { background: #5f7bf0; }
.dmg-t.mixed { background: #2aa88f; }
#livepanel .live-panel { margin-bottom: 14px; }
.live-panel .s { font-size: 11.5px; font-weight: 400; color: var(--text-2); }
/* ピック評価のスロットの印 */
.ebadges { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; }
.e-rng, .e-time { font-size: 10px; font-weight: 800; padding: 0 4px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-2); cursor: help; }
.e-time { color: var(--gold); border-color: var(--gold); }
.e-mu { font-size: 10px; font-weight: 900; color: var(--text-3); cursor: help; }
.e-mu.up { color: var(--good); }
.e-mu.down { color: var(--bad); }
.team-sum { font-size: 11px; color: var(--text-3); margin-left: 6px; }
/* 試合評価 */
.rv-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .rv-wrap { grid-template-columns: 1fr; } }
.rv-side { display: flex; flex-direction: column; gap: 6px; max-height: 80vh; overflow-y: auto; }
.rv-item { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; color: var(--text); text-decoration: none; }
.rv-item:hover, .rv-item.on { background: var(--surface-2); }
.rv-item img { width: 36px; height: 36px; border-radius: 8px; }
.rv-item .s { font-size: 11px; color: var(--text-3); }
.rv-item b.win, .rv-result.win { color: var(--good); }
.rv-item b.lose, .rv-result.lose { color: var(--bad); }
.rv-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rv-head > img { width: 64px; height: 64px; border-radius: 12px; }
.rv-result { font-size: 20px; font-weight: 900; }
.rv-head .s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.rv-teams { display: flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.rv-teams img { width: 24px; height: 24px; border-radius: 50%; }
.rv-teams span { margin: 0 4px 0 8px; }
.rv-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.rv-drills { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-t td small { font-size: 10.5px; }
.rv-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-cores span { display: inline-flex; flex-direction: column; align-items: center; font-size: 10.5px; color: var(--text-3); }
.rv-feed { max-height: 180px; }
/* 劣勢時の立ち回り */
.lv-behind { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.lv-behind b { display: inline-block; min-width: 46px; margin-right: 6px; font-size: 10.5px; color: var(--bad); }
.rv-advice { margin-bottom: 16px; }
.rv-adv { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.6; }
.rv-adv .s { font-size: 11.5px; color: var(--text-2); }
.rv-adv .mini-lbl { margin-right: 6px; }
.rv-champs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.rv-champs img { width: 22px; height: 22px; border-radius: 50%; vertical-align: -6px; margin-right: 4px; }
.rv-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.rv-vs-v { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
.rv-vs-v.good { color: var(--good); border-color: var(--good); }
.rv-vs-v.bad { color: var(--bad); border-color: var(--bad); }
.rv-list li.good::marker { color: var(--good); }
.rv-list li.bad::marker { color: var(--bad); }
.rv-vs-v.mid { color: var(--gold); border-color: var(--gold); }
.rv-lanes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.rv-lanes span.me { color: var(--text); font-weight: 800; }
/* 試合評価: 上のまとめ（試合中モードと同じ見た目）と、下の評価全体と分析 */
.rv-sum .lv-head > div:first-child { align-items: center; }
.rv-sum .rv-me { width: 28px; height: 28px; border-radius: 6px; vertical-align: -8px; margin-right: 6px; }
.rv-sum-t { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 4px; }
.rv-sum .rv-list { font-size: 12px; }
.rv-detail { margin-bottom: 16px; }
.rv-dh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rv-dh h3 { margin: 0; }
.rv-dh .rv-teams { margin-top: 0; }
.rv-ic { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin-right: 2px; }
.rv-note { font-size: 11.5px; color: var(--text-3); }
.rv-sum .lv-head > div:first-child > span:nth-child(2) { display: inline-flex; align-items: center; white-space: nowrap; }
.rv-sum .rv-me { vertical-align: middle; }
/* 段階評価（S〜D） */
.rv-g { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 13px; font-weight: 900; line-height: 1; border: 1px solid currentColor; }
.rv-g.gS { color: var(--gold); background: rgba(232, 194, 106, 0.14); }
.rv-g.gA { color: var(--good); }
.rv-g.gB { color: var(--cyan); }
.rv-g.gC { color: #f0a050; }
.rv-g.gD { color: var(--bad); }
.rv-g.gN { color: var(--text-3, #6b7488); border-style: dashed; font-weight: 700; }
.rv-grades { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.rv-g-total { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--text-2); flex-shrink: 0; }
.rv-g-total .rv-g { min-width: 36px; height: 36px; font-size: 20px; border-radius: 8px; }
.rv-g-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-g-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); }
.rv-g-chip .rv-g { min-width: 20px; height: 20px; font-size: 12px; }
/* 改善点と次からやること */
.rv-steps { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.rv-steps li::marker { color: var(--bad); font-weight: 800; }
.rv-step-i { color: var(--text-2); }
.rv-step-a { margin-top: 2px; color: var(--text); line-height: 1.6; }
.rv-step-g { margin-top: 2px; color: var(--gold); }
.rv-steps .mini-lbl { margin-right: 6px; }
.rv-gsec { margin-bottom: 16px; }
.rv-gsec .rv-grades { margin: 0 0 10px; }
.rv-gsec h3 { margin: 0 0 6px; }
.rv-gt td:nth-child(2) { text-align: center; }
.rv-gt td:nth-child(3) { text-align: left; font-size: 12px; }
.rv-g-sub { display: inline-flex; gap: 8px; margin-right: 8px; }
.rv-g-sub .rv-g { min-width: 18px; height: 18px; font-size: 11px; }
#livepanel .live-panel { margin-top: 16px; }
/* 試合評価のリザルト（ゲーム内の試合後の画面と同じ並び） */
.rv-board { margin-bottom: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rv-board .note { margin: 0; }
@media (max-width: 860px) { .rv-board { overflow-x: auto; } }
.rv-board-t { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 880px; }
.rv-board-t td { padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.rv-board-t tr + tr td { border-top: 1px solid var(--border); }
.rv-board-t .s { font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.rv-board-t .num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rv-bt-h th { text-align: left; padding: 2px 6px 6px; font-size: 15px; font-weight: 800; }
.rv-bt-h .tn { margin-right: 10px; }
.rv-bt.ally .rv-bt-h .tn, .rv-bt.ally .rv-bt-h .tk { color: var(--blue); }
.rv-bt.enemy .rv-bt-h .tn, .rv-bt.enemy .rv-bt-h .tk { color: var(--red); }
.rv-bt-h b { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.rv-bt-h b.win { color: var(--good); }
.rv-bt-h b.lose { color: var(--bad); }
.rv-bt-h .tg { color: var(--text-2); }
.rv-bt-h .s { font-size: 11.5px; font-weight: 600; text-align: right; }
.rv-bt-c th { font-size: 10.5px; color: var(--text-3); font-weight: 700; padding: 0 6px 2px; text-align: left; }
.rv-bt-c th:nth-child(n+6) { text-align: right; }
.rv-board-t tr.me td { background: rgba(232, 194, 106, 0.1); }
.rv-board-t b.me { color: var(--gold); }
.rv-brune { position: relative; }
.rv-brune .ks img { width: 28px; height: 28px; display: block; }
.rv-brune .sub { position: absolute; right: 2px; bottom: 2px; }
.rv-brune .sub img { width: 14px; height: 14px; display: block; background: var(--surface-2); border-radius: 50%; }
.rv-bsp { display: flex; flex-direction: column; gap: 2px; }
.rv-bsp img { width: 18px; height: 18px; border-radius: 3px; display: block; }
.rv-bi-empty.sp { width: 18px; height: 18px; }
.rv-bn { display: flex; align-items: center; gap: 8px; }
.rv-bn .lv { width: 18px; text-align: right; font-weight: 800; font-size: 14px; }
.rv-bn .rv-bc { width: 36px; height: 36px; border-radius: 50%; }
.rv-bme { font-size: 10px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 0 5px; margin-left: 6px; }
.rv-bi { display: flex; gap: 2px; }
.rv-bi img { width: 26px; height: 26px; border-radius: 4px; display: block; }
.rv-bi-empty { display: inline-block; width: 26px; height: 26px; border-radius: 4px; background: var(--surface-2); }
.rv-bk { text-align: right; }
.rv-bk b { font-size: 13.5px; letter-spacing: 0.5px; }
.rv-bd { text-align: right; }
.rv-bd span { display: block; height: 4px; background: var(--surface-2); border-radius: 2px; margin: 2px 0 0 auto; width: 90px; }
.rv-bd span i { display: block; height: 100%; background: var(--bad); border-radius: 2px; }