/* ============================================================
   dashboard.css
   ============================================================ */
:root {
  /* === lol_matchup 統一カラーパレット === */
  --bg:          #080b11;
  --bg2:         #141c2e;
  --bg3:         #1a2438;
  --panel:       #0f1520;
  --surface:     #0f1520;
  --surface2:    #141c2e;
  --surface3:    #1a2438;
  --border:      #1e2d45;
  --border-glow: #253d65;
  --gold:        #c89b3c;
  --gold2:       #f0d060;
  --blue:        #0bc4e3;
  --blue-dim:    rgba(11,196,227,0.12);
  --red:         #e84057;
  --lose:        #e84057;
  --green:       #0acf83;
  --win:         #0acf83;
  --text:        #ccd4e0;
  --text-bright: #e8f0f8;
  --text-dim:    #6a7d96;
  --text2:       #6a7d96;
  --text3:       #3d4f65;
  --challenger:  #f4d03f;
  --grandmaster: #e8614a;
  --master:      #9b59b6;
  --diamond:     #5dade2;
  --emerald:     #2ecc71;
  --platinum:    #76d7c4;
  --gold-rank:   #d4ac0d;
  --silver:      #aab7b8;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  background:var(--bg); color:var(--text);
  font-family:'Noto Sans JP',sans-serif; font-size:12px;
  overflow:hidden;
}

body::before {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(11,196,227,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,196,227,0.025) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none; z-index:0;
}

/* ===== 16:9 CANVAS ===== */
.wrapper {
  position:relative; z-index:1;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}
.canvas {
  width:100%; height:100%;
  max-width:calc(100vh * 16 / 9);
  max-height:calc(100vw * 9 / 16);
  display:grid;
  grid-template-rows:48px 1fr 0.9fr;
  grid-template-columns:1fr 1fr 52px;
  gap:8px; padding:10px;
}

/* no-rank時はresizeハンドルを隠す */
.canvas.no-rank .rank-panel          { display:none; }
.canvas.no-rank .resize-handle-rank  { display:none; }

/* ===== HEADER ===== */
header {
  grid-column:1/-1; grid-row:1;
  display:flex; align-items:center; gap:18px;
  padding:0 16px;
  background:var(--panel); border:1px solid var(--border);
  border-top:2px solid var(--gold);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.logo {
  font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700;
  color:var(--gold); letter-spacing:3px;
}
.logo span { color:var(--blue); }

.live-badge {
  display:flex; align-items:center; gap:6px;
  background:rgba(232,64,87,0.15); border:1px solid rgba(232,64,87,0.5);
  padding:3px 10px; font-family:'Rajdhani',sans-serif;
  font-size:11px; font-weight:600; color:var(--red); letter-spacing:2px;
}
.live-dot {
  width:5px; height:5px; background:var(--red); border-radius:50%;
  animation:pulse 1.5s infinite;
}
.not-in-game-badge {
  display:flex; align-items:center;
  background:rgba(74,96,128,0.15); border:1px solid rgba(74,96,128,0.4);
  padding:3px 10px; font-family:'Rajdhani',sans-serif;
  font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:2px;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)}
}
.header-stats { display:flex; gap:24px; }
.hstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.hstat-val { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600; color:var(--text-bright); }

/* ===== PANEL ===== */
.panel {
  background:var(--panel); border:1px solid var(--border);
  padding:10px 12px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.panel.gold-top { border-top:2px solid var(--gold); }
.panel.blue-top { border-top:2px solid var(--blue); }
.panel-title {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600;
  color:var(--blue); letter-spacing:2px; text-transform:uppercase;
  margin-bottom:8px; display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.panel-title::before { content:''; width:2px; height:12px; background:var(--blue); }
.corner-deco {
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-left:14px solid transparent; border-top:14px solid var(--border-glow);
}

/* ===== GRID POSITIONS ===== */
.team-panel          { grid-row:2; }
#blueTeamPanel       { grid-column:1; }
#redTeamPanel        { grid-column:2; }

/* ===== BAN PANEL ===== */
#banPanel {
  grid-column:3; grid-row:2;
  display:flex; flex-direction:column; align-items:center;
  gap:0; padding:8px 4px;
}
.ban-section {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; flex:1; width:100%;
}
.ban-team-label {
  font-family:'Rajdhani',sans-serif; font-size:7px;
  font-weight:700; letter-spacing:1px; text-align:center;
  line-height:1.2; margin-bottom:2px;
}
.ban-team-label.bl { color:var(--blue); }
.ban-team-label.rd { color:var(--red); }
.ban-icons { display:flex; flex-direction:column; gap:3px; align-items:center; }
.ban-icon {
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  overflow:hidden; flex-shrink:0;
  position:relative;
}
.ban-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.ban-icon-empty {
  width:26px; height:26px; border-radius:50%;
  border:1px dashed rgba(255,255,255,0.1);
  flex-shrink:0;
}
.ban-divider {
  width:70%; height:1px; background:var(--border);
  flex-shrink:0; margin:4px 0;
}

/* ===== BOTTOM ROW (grid + resizable) ===== */
/* canvas と同じ column 構成で BLUE TEAM / RED TEAM+BAN に正確に揃える */
.bottom-row {
  grid-row:3; grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr 52px;
  column-gap:8px;
  min-height:0; overflow:hidden;
}
.bottom-left {
  grid-column:1;
  display:flex; gap:0; min-height:0; overflow:hidden;
}
.bottom-right {
  grid-column:2 / -1;
  display:flex; gap:0; min-height:0; overflow:hidden;
}
.bottom-left .panel,
.bottom-right .panel { min-width:0; overflow:hidden; }
/* グループ内横幅比率 */
.builds-panel  { flex:3 1 0; }
.ejg-panel     { flex:1 1 0; }
.ai-panel      { flex:1 1 0; }
.matchup-panel { flex:1 1 0; }
.resize-handle {
  width:5px; background:transparent;
  cursor:col-resize; flex-shrink:0; position:relative;
}
.resize-handle::after {
  content:''; position:absolute; top:15%; bottom:15%; left:2px;
  width:1px; background:var(--border);
}
.resize-handle:hover::after,
.resize-handle.dragging::after { background:var(--gold); }

/* ===== TEAM / PLAYERS ===== */
.team-label {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:6px; padding-bottom:5px; flex-shrink:0;
}
.team-label.bl { color:var(--blue); border-bottom:1px solid rgba(11,196,227,0.25); }
.team-label.rd { color:var(--red);  border-bottom:1px solid rgba(232,64,87,0.25); }

/* ===== 検索プログレスバー ===== */
.search-prog-track {
  width:100%; height:3px; background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden; margin-bottom:10px;
}
.search-prog-fill {
  height:100%; width:0%; background:var(--blue);
  border-radius:2px;
}
.search-prog-msg {
  font-size:11px; color:var(--text-dim); text-align:center;
  letter-spacing:0.5px; font-family:'Rajdhani',sans-serif;
}
.players { display:flex; flex-direction:column; gap:4px; flex:1; }
.player-row {
  display:flex; align-items:center; gap:6px; padding:4px 6px;
  background:rgba(255,255,255,0.02); border:1px solid transparent;
  cursor:pointer; transition:all 0.15s; flex:1;
}
.player-row:hover { background:rgba(11,196,227,0.05); border-color:rgba(11,196,227,0.2); }
.player-row.me    { background:rgba(200,155,60,0.07); border-color:rgba(200,155,60,0.3); }
.champ-icon {
  width:32px; height:32px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--border);
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.champ-icon img { width:100%; height:100%; object-fit:cover; }
.pinfo { flex:1; min-width:0; }
.pname { display:flex; align-items:baseline; gap:4px; font-size:12px; color:var(--text-bright); overflow:hidden; }
.pname-inner { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.p-level { font-size:8px; color:var(--text-dim); flex-shrink:0; font-family:'Rajdhani',sans-serif; }
.player-row.me .pname { color:var(--gold); font-weight:500; }
.pchamp { font-size:10px; color:var(--text-dim); }
.rank-badge {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600;
  padding:1px 6px; border:1px solid; white-space:nowrap; flex-shrink:0;
}
.rank-CHALLENGER   { color:var(--challenger); border-color:rgba(244,208,63,0.4); background:rgba(244,208,63,0.07); }
.rank-GRANDMASTER  { color:var(--grandmaster);border-color:rgba(232,97,74,0.4);  background:rgba(232,97,74,0.07); }
.rank-MASTER       { color:var(--master);      border-color:rgba(155,89,182,0.4); background:rgba(155,89,182,0.07); }
.rank-DIAMOND      { color:var(--diamond);     border-color:rgba(93,173,226,0.4); background:rgba(93,173,226,0.07); }
.rank-EMERALD      { color:var(--emerald);     border-color:rgba(46,204,113,0.4); background:rgba(46,204,113,0.07); }
.rank-PLATINUM     { color:var(--platinum);    border-color:rgba(118,215,196,0.4);background:rgba(118,215,196,0.07); }
.rank-GOLD         { color:var(--gold-rank);   border-color:rgba(212,172,13,0.4); background:rgba(212,172,13,0.07); }
.rank-SILVER       { color:var(--silver);      border-color:rgba(170,183,184,0.4);background:rgba(170,183,184,0.07); }
.rank-UNRANKED     { color:var(--text-dim);    border-color:rgba(74,96,128,0.4);  background:rgba(74,96,128,0.07); }
.winrate-col { text-align:right; flex-shrink:0; }
.wr-num { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--green); display:block; }
.wr-sub { font-size:10px; color:var(--text-dim); }

/* ===== MY RANK ===== */
.rank-body { display:flex; align-items:center; gap:12px; padding:8px 0; flex-shrink:0; }
.rank-emblem {
  width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:radial-gradient(circle,rgba(200,155,60,0.15) 0%,transparent 70%);
  border:2px solid rgba(200,155,60,0.35); border-radius:50%;
}
.rank-tier { font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; color:var(--gold); line-height:1; }
.rank-lp   { font-family:'Rajdhani',sans-serif; font-size:14px; color:var(--text); margin-top:1px; }
.rank-record { font-size:10px; color:var(--text-dim); margin-top:2px; }
.rank-record .w { color:var(--green); }
.rank-record .l { color:var(--red); }
.lp-change {
  margin-left:auto; flex-shrink:0;
  font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700;
  padding:3px 10px; border:1px solid rgba(64,200,122,0.4);
  background:rgba(64,200,122,0.1); color:var(--green);
}
.lp-change.neg { border-color:rgba(232,64,87,0.4); background:rgba(232,64,87,0.1); color:var(--red); }
.recent-strip { display:flex; gap:2px; margin-top:4px; flex-shrink:0; }
.gpill { height:5px; flex:1; border-radius:1px; }
.gpill.win { background:var(--green); } .gpill.loss { background:var(--red); }
.mini-lp-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:8px; flex-shrink:0; }
.mstat { background:var(--bg3); border:1px solid var(--border); padding:5px 6px; text-align:center; }
.mstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.mstat-val { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--text-bright); }
.mstat-val.pos { color:var(--green); } .mstat-val.neg { color:var(--red); }
.team-avg-bar { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.avg-bar-track { flex:1; height:6px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.avg-bar-fill { height:100%; opacity:0.7; transition:width 0.5s; }
.avg-bar-fill.blue { background:var(--blue); }
.avg-bar-fill.red  { background:var(--red); }
.avg-bar-label { font-family:'Rajdhani',sans-serif; font-size:12px; }
.avg-bar-label.blue { color:var(--blue); }
.avg-bar-label.red  { color:var(--red); }

/* ===== BUILDS ===== */
.builds-scroll {
  display:flex; gap:7px; overflow-x:auto; overflow-y:hidden;
  flex:1; padding-bottom:4px; align-items:stretch;
}
.builds-scroll::-webkit-scrollbar { height:3px; }
.builds-scroll::-webkit-scrollbar-track { background:var(--bg3); }
.builds-scroll::-webkit-scrollbar-thumb { background:var(--border-glow); }
.build-card {
  flex-shrink:0; width:200px; background:var(--bg3); border:1px solid var(--border);
  padding:10px; cursor:pointer; transition:border-color 0.2s;
  display:flex; flex-direction:column;
  align-self:stretch; /* 横並びで高さを揃える */
}
.build-card:hover { border-color:var(--gold); box-shadow:0 0 16px rgba(200,155,60,0.12); }
.bc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.bc-num  { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:1px; }
.bc-wr   { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:var(--green); }
.bc-wr.low { color:var(--red); }
.items-row { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:6px; }
.rune-block { display:flex; flex-direction:column; gap:3px; flex:1; } /* flex:1でbc-metaを下に押し下げる */
.item-icon {
  width:28px; height:28px; background:var(--bg2); border:1px solid var(--border);
  border-radius:3px; overflow:hidden; position:relative; cursor:help;
}
.item-icon img { width:100%; height:100%; object-fit:cover; }
.item-icon:hover::after {
  content:attr(data-tip); position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  background:#000; border:1px solid var(--border-glow);
  padding:3px 7px; font-size:10px; color:var(--text-bright);
  white-space:nowrap; z-index:20; pointer-events:none;
}
.spells-row { display:flex; gap:3px; align-items:center; }
.spell-icon {
  width:22px; height:22px; background:var(--bg2); border:1px solid var(--border);
  border-radius:2px; overflow:hidden;
}
.spell-icon img { width:100%; height:100%; object-fit:cover; }
.spell-label { font-size:10px; color:var(--text-dim); margin-left:4px; }
.rune-path-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.rune-row { display:flex; gap:3px; align-items:center; }
.ri {
  width:18px; height:18px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  overflow:hidden; flex-shrink:0;
}
.ri img { width:100%; height:100%; object-fit:cover; }
.ri-lg {
  width:24px; height:24px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  overflow:hidden; flex-shrink:0;
}
.ri-lg img { width:100%; height:100%; object-fit:cover; }
.ri.ks { width:24px; height:24px; border-color:var(--gold); }
.ri-ks {
  width:30px; height:30px; border-radius:50%;
  background:var(--bg2); border:2px solid var(--gold);
  overflow:hidden; flex-shrink:0;
}
.ri-ks img { width:100%; height:100%; object-fit:cover; }
.rune-divider { height:1px; background:var(--border); margin:2px 0; }
.bc-meta {
  display:flex; justify-content:space-between; padding-top:5px; margin-top:6px;
  border-top:1px solid var(--border); font-size:10px; color:var(--text-dim);
}
.bc-kda { font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--text); }

/* ===== BUILD CARD: MATCH LIST ===== */
.bc-match-list {
  margin-top:6px;
  max-height:110px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.bc-match-list::-webkit-scrollbar { width:3px; }
.bc-match-list::-webkit-scrollbar-track { background:transparent; }
.bc-match-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.bc-match-row {
  display:flex; align-items:center; gap:4px;
  padding:2px 0;
  border-bottom:1px solid rgba(26,42,69,0.5);
  flex-shrink:0;
}
.bc-match-row:last-child { border-bottom:none; }
.bc-match-badge {
  font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700;
  padding:1px 4px; border-radius:2px; flex-shrink:0; min-width:20px; text-align:center;
}
.bc-match-badge.win  { background:rgba(64,200,122,0.15); color:var(--green); }
.bc-match-badge.loss { background:rgba(232,64,87,0.12);  color:var(--red); }
.bc-match-champs { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.match-champ-row { display:flex; align-items:center; gap:2px; }
.match-champ-label {
  font-size:8px; color:var(--text-dim); width:18px; flex-shrink:0;
  font-family:'Rajdhani',sans-serif;
}
.match-champ-icon {
  width:18px; height:18px; border-radius:2px; object-fit:cover;
  border:1px solid transparent;
}
.match-champ-icon.ally  { border-color:rgba(70,130,255,0.5); }
.match-champ-icon.enemy { border-color:rgba(220,60,60,0.5); }
.bc-match-kda {
  font-family:'Rajdhani',sans-serif; font-size:10px;
  color:var(--text-dim); flex-shrink:0; white-space:nowrap;
}

/* ===== LP CHART ===== */
.lp-chart-wrap { flex:1; position:relative; min-height:0; }
#lpCanvas { width:100%; height:100%; display:block; }
.lp-tooltip {
  position:absolute; background:rgba(4,7,15,0.95);
  border:1px solid var(--border-glow); padding:5px 9px;
  font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--text-bright);
  pointer-events:none; display:none; white-space:nowrap; z-index:10;
}
.lp-bottom-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:7px; flex-shrink:0; }
.lbstat { background:var(--bg3); border:1px solid var(--border); padding:5px 8px; }
.lbstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.lbstat-val { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; color:var(--text-bright); }
.lbstat-val.pos { color:var(--green); } .lbstat-val.neg { color:var(--red); }

/* ===== SKELETON ===== */
.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite; border-radius:2px;
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-glow); }

/* ===== 検索オーバーレイ ===== */
.search-overlay {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}

/* 背景：LoL画像 + 多重オーバーレイ */
.so-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.so-vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 40%, transparent 20%, rgba(4,10,22,0.7) 100%),
    linear-gradient(to bottom, rgba(4,10,22,0.55) 0%, transparent 25%, transparent 65%, rgba(4,10,22,0.9) 100%);
}
.so-tint {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(6,24,48,0.65) 0%, rgba(4,10,22,0.5) 50%, rgba(2,6,18,0.7) 100%);
}
.so-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,155,60,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,155,60,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}

/* パーティクル */
.so-particles { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.so-particle {
  position:absolute; bottom:-10px; background:var(--gold); border-radius:50%;
  opacity:0; animation:so-floatup linear infinite;
}
@keyframes so-floatup {
  0%   { opacity:0;   transform:translateY(0) scale(0.4); }
  12%  { opacity:0.55; }
  88%  { opacity:0.15; }
  100% { opacity:0;   transform:translateY(-110vh) scale(1.2); }
}

/* アプリ一覧ボタン */
.btn-back-home {
  position:absolute; top:1rem; left:1rem; z-index:20;
  display:inline-flex; align-items:center; gap:0.4rem;
  color:var(--gold); opacity:0.7;
  background:rgba(1,10,19,0.6); border:1px solid rgba(200,155,60,0.25); border-radius:2px;
  padding:0.4rem 0.9rem;
  font-family:'Rajdhani',sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:1.5px;
  text-decoration:none; transition:opacity 0.2s, border-color 0.2s, background 0.2s;
}
.btn-back-home:hover { opacity:1; border-color:var(--gold); background:rgba(1,10,19,0.8); }

/* メインコンテンツ：フェードイン */
.so-content {
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:1.5rem 2rem;
  animation:so-enter 0.7s ease both;
}
@keyframes so-enter {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* モニュメント（SVGタクティカルスコープ） */
.so-monument { margin-bottom:0.85rem; }
.so-monument-svg {
  width:90px; height:90px; display:block;
  filter:drop-shadow(0 0 10px rgba(200,155,60,0.3)) drop-shadow(0 0 24px rgba(200,155,60,0.1));
}

/* スクリーンコーナーHUD */
.so-corner-hud {
  position:absolute; z-index:6; pointer-events:none;
  width:22px; height:22px;
  border-color:rgba(200,155,60,0.4); border-style:solid;
  transition:opacity 0.3s;
}
.so-ch-tl { top:10px;   left:10px;  border-width:1.5px 0 0 1.5px; }
.so-ch-tr { top:10px;   right:10px; border-width:1.5px 1.5px 0 0; }
.so-ch-bl { bottom:44px; left:10px;  border-width:0 0 1.5px 1.5px; }
.so-ch-br { bottom:44px; right:10px; border-width:0 1.5px 1.5px 0; }

/* サブタイトル */
.so-sub {
  font-family:'Rajdhani',sans-serif;
  font-size:0.62rem; font-weight:700; letter-spacing:0.55em;
  color:rgba(11,196,227,0.65);
  text-transform:uppercase; margin:0 0 0.28rem;
}

/* メインロゴ */
.so-logo {
  font-family:'Cinzel',serif;
  font-size:clamp(2.4rem,5.5vw,3.8rem); font-weight:900;
  letter-spacing:0.04em; line-height:1.1;
  color:#f0e6d3; margin:0 0 1rem;
  text-shadow:0 0 28px rgba(200,155,60,0.6), 0 0 60px rgba(200,155,60,0.2), 2px 3px 8px rgba(0,0,0,0.95);
}
.so-logo span {
  color:var(--blue);
  text-shadow:0 0 18px rgba(11,196,227,0.7), 0 0 40px rgba(11,196,227,0.3), 2px 3px 8px rgba(0,0,0,0.95);
}

/* 区切り線 */
.so-divider {
  display:flex; align-items:center; gap:1rem;
  width:100%; max-width:420px; margin-bottom:1.2rem;
}
.so-divider span { flex:1; height:1px; }
.so-divider span:first-child { background:linear-gradient(to right, transparent, rgba(200,155,60,0.45)); }
.so-divider span:last-child  { background:linear-gradient(to left,  transparent, rgba(200,155,60,0.45)); }
.so-divider-icon { flex-shrink:0; display:flex; align-items:center; opacity:0.7; }

/* フィールドラベル */
.so-field-label {
  font-family:'Rajdhani',sans-serif;
  font-size:0.68rem; font-weight:600; letter-spacing:0.3em;
  color:rgba(200,170,110,0.6); text-transform:uppercase;
  margin-bottom:0.55rem; text-align:left; width:100%;
}

/* 検索ボックス */
.search-box {
  position:relative; z-index:1;
  width:420px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

/* コーナーティック付きラッパー */
.so-input-outer {
  position:relative; width:100%;
}
.so-corner {
  position:absolute; width:8px; height:8px; z-index:2;
  border-color:var(--gold); border-style:solid; opacity:0.8;
}
.so-corner-tl { top:0;  left:0;  border-width:2px 0 0 2px; }
.so-corner-tr { top:0;  right:0; border-width:2px 2px 0 0; }
.so-corner-bl { bottom:0; left:0;  border-width:0 0 2px 2px; }
.so-corner-br { bottom:0; right:0; border-width:0 2px 2px 0; }

.search-input-wrap {
  width:100%; display:flex; gap:0;
  border:1px solid rgba(200,155,60,0.2);
  background:rgba(4,12,28,0.65);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.search-input-wrap:focus-within {
  border-color:rgba(200,155,60,0.5);
  box-shadow:0 0 0 1px rgba(200,155,60,0.15), 0 6px 28px rgba(200,155,60,0.12);
}

.search-input {
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  padding:13px 16px;
  font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600;
  color:var(--text-bright); letter-spacing:1px;
}
.search-input::placeholder { color:rgba(200,155,60,0.25); font-weight:400; }
.search-hash {
  display:flex; align-items:center; flex-shrink:0;
  color:rgba(200,155,60,0.45); font-family:'Rajdhani',sans-serif;
  font-size:18px; font-weight:600; padding:0 2px;
}
.search-tag-input {
  width:74px; flex-shrink:0; background:transparent; border:none; outline:none;
  padding:13px 8px;
  font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600;
  color:var(--gold); letter-spacing:1px;
}
.search-tag-input::placeholder { color:rgba(200,155,60,0.25); font-weight:400; }

.search-btn {
  background:transparent;
  border:none; border-left:1px solid rgba(200,155,60,0.2);
  padding:0 18px; cursor:pointer;
  color:var(--gold); transition:background 0.15s, color 0.15s;
  display:flex; align-items:center;
}
.search-btn:hover { background:rgba(200,155,60,0.12); color:#f0e6d3; }
.search-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* 検索履歴 */
.search-history {
  width:100%; display:flex; flex-direction:column; gap:4px;
}
.search-history-item {
  display:flex; align-items:center; gap:10px;
  padding:7px 12px;
  background:rgba(4,12,28,0.7); border:1px solid rgba(200,155,60,0.12);
  cursor:pointer; transition:border-color 0.15s, background 0.15s;
  font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600;
  color:var(--text);
}
.search-history-item:hover { border-color:rgba(200,155,60,0.4); background:rgba(4,12,28,0.85); color:#f0e6d3; }
.search-history-icon { color:var(--gold); opacity:0.45; font-size:11px; }

.search-error {
  font-size:12px; color:var(--red);
  min-height:16px; text-align:center; letter-spacing:1px;
}

/* フッター */
.so-footer {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  text-align:center; padding:0.65rem 1rem;
  backdrop-filter:blur(8px); background:rgba(4,10,22,0.6);
  border-top:1px solid rgba(200,155,60,0.08);
}
.so-footer p {
  font-family:'Rajdhani',sans-serif; font-size:0.68rem;
  color:rgba(200,155,60,0.28); letter-spacing:1px; margin:0;
}

/* ===== ヘッダー内検索窓 ===== */
.header-search-wrap {
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
}
.header-summoner-name {
  font-family:'Rajdhani',sans-serif;
  font-size:13px; font-weight:600;
  color:var(--gold); letter-spacing:1px;
  white-space:nowrap;
}
.header-search-inner {
  display:flex; align-items:center;
  border:1px solid var(--border);
  background:var(--bg3);
  transition:border-color 0.2s;
}
.header-search-inner:focus-within {
  border-color:var(--blue);
}
.header-search-input {
  background:transparent; border:none; outline:none;
  padding:4px 10px;
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600;
  color:var(--text-bright); letter-spacing:1px;
  width:120px;
}
.header-search-input::placeholder { color:var(--text-dim); font-weight:400; }
.header-search-hash {
  display:flex; align-items:center; flex-shrink:0;
  color:var(--text-dim); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600;
}
.header-search-tag-input {
  background:transparent; border:none; outline:none;
  padding:4px 6px;
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600;
  color:var(--gold); letter-spacing:1px;
  width:52px; flex-shrink:0;
}
.header-search-tag-input::placeholder { color:var(--text-dim); font-weight:400; }
.header-search-btn {
  background:transparent; border:none; border-left:1px solid var(--border);
  padding:4px 10px; cursor:pointer;
  color:var(--blue); transition:background 0.15s;
  display:flex; align-items:center;
}
.header-search-btn:hover { background:rgba(11,196,227,0.1); }
.header-search-btn:disabled { cursor:not-allowed; opacity:0.6; }
.header-search-spinner {
  width:11px; height:11px;
  border:2px solid rgba(11,196,227,0.3);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:hdr-spin 0.7s linear infinite;
  flex-shrink:0;
}
@keyframes hdr-spin { to { transform:rotate(360deg); } }

/* ===== ヘッダー検索ステータスバー ===== */
.hdr-status-bar {
  position:fixed; top:54px; left:0; right:0; z-index:400;
  display:none; align-items:center; justify-content:center; gap:7px;
  padding:5px 16px;
  background:rgba(4,10,22,0.94);
  border-bottom:1px solid rgba(11,196,227,0.2);
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.5px;
  color:var(--blue); pointer-events:none;
}
.hdr-status-dot {
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:var(--blue); box-shadow:0 0 6px var(--blue);
  animation:hdr-blink 1.2s ease-in-out infinite;
}
@keyframes hdr-blink { 0%,100%{opacity:0.35;} 50%{opacity:1;} }

/* ===== お気に入りボタン ===== */
.header-fav-btn {
  background:transparent; border:1px solid var(--border);
  padding:3px 8px; cursor:pointer;
  font-size:15px; color:var(--text-dim);
  transition:all 0.15s; line-height:1;
  flex-shrink:0;
}
.header-fav-btn:hover { border-color:var(--gold); color:var(--gold); }
.header-fav-btn.fav-active { color:var(--gold); border-color:var(--gold); background:rgba(200,155,60,0.1); }

/* ===== お気に入り履歴スタイル ===== */
.fav-item {
  border-color:rgba(200,155,60,0.3) !important;
  background:rgba(200,155,60,0.05) !important;
}
.fav-star { color:var(--gold) !important; }

/* ===== トースト ===== */
#lc-toast {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  background:rgba(10,16,32,0.95); border:1px solid var(--border-glow);
  color:var(--text-bright); padding:10px 20px;
  font-family:'Rajdhani',sans-serif; font-size:13px; letter-spacing:1px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
  z-index:200; white-space:nowrap;
}
#lc-toast.show { opacity:1; }

/* ===== 最近10試合チャンプ ===== */
.recent-champs {
  display:flex; gap:2px; flex-wrap:nowrap;
  width:200px; flex-shrink:0; overflow:hidden;
  /* 10枚×(18px+2px gap) = 200px 固定 → mastery開始位置が常に揃う */
}
.rc-slot {
  width:18px; flex-shrink:0; position:relative; overflow:hidden; border-radius:2px;
}
.rc-slot img { width:18px; height:18px; object-fit:cover; display:block; border-radius:2px; }
.rc-bar {
  height:3px; width:100%; border-radius:1px 1px 0 0;
}
.rc-bar.rc-win  { background:var(--green); }
.rc-bar.rc-loss { background:var(--red); }

/* ===== pinfo下段（横1行・絶対に折り返さない） ===== */
.pinfo-bottom {
  display:flex; flex-wrap:nowrap; align-items:flex-end;
  gap:6px; margin-top:4px; overflow:hidden; min-width:0;
}

/* mastery + 前回チャンプ を横並びにする行 */
.pinfo-icons-row {
  display:flex; align-items:flex-end; gap:0; flex-shrink:0;
}

/* ===== マスタリーTop3 ===== */
.mastery-champs {
  display:flex; gap:3px; flex-shrink:0; align-items:flex-end;
  border-left:1px solid rgba(255,255,255,0.15); padding-left:6px;
}
.mastery-slot {
  position:relative; width:26px; height:26px; flex-shrink:0; cursor:default;
  margin-bottom:0;
}
.mastery-slot img {
  width:26px; height:26px; object-fit:cover; display:block;
  border-radius:3px; border:1px solid rgba(255,255,255,0.15);
}
.mastery-lvl {
  position:absolute; bottom:0; right:0;
  font-size:8px; font-weight:700; line-height:1;
  background:rgba(0,0,0,0.8); padding:1px 2px;
  border-radius:2px 0 2px 0;
}

/* ===== 前回試合チャンプ ===== */
.last-match-wrap {
  display:flex; flex-shrink:0; align-items:flex-end;
  border-left:1px solid rgba(255,255,255,0.15); padding-left:6px; margin-left:6px;
}
.last-match-champ {
  position:relative; width:26px; height:26px; flex-shrink:0; cursor:default;
  border-radius:3px; overflow:visible;
}
.last-match-champ img {
  width:26px; height:26px; object-fit:cover; display:block;
  border-radius:3px;
}
.last-match-champ.enc-win  img { border:1px solid rgba(64,200,122,0.7); }
.last-match-champ.enc-loss img { border:1px solid rgba(232,64,87,0.7); }
.last-match-label {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:7px; font-weight:700; color:var(--text-dim); white-space:nowrap;
  letter-spacing:0.5px;
}

/* ===== player-rowクリック ===== */
.player-row.clickable { cursor:pointer; }
.player-row.clickable:hover { background:rgba(11,196,227,0.07); border-color:rgba(11,196,227,0.3); }

/* ===== スペル・ルーン列 ===== */
.p-spell-rune-col {
  display:flex; flex-direction:column; gap:2px; flex-shrink:0;
  justify-content:center;
}
.p-spells, .p-runes {
  display:flex; gap:2px;
}
.spell-slot {
  width:18px; height:18px; background:var(--bg2);
  border:1px solid var(--border); border-radius:2px; overflow:hidden; flex-shrink:0;
}
.spell-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.prune-slot {
  width:18px; height:18px; background:var(--bg2);
  border:1px solid var(--border); border-radius:50%; overflow:hidden; flex-shrink:0;
}
.prune-slot.ks-slot { border-color:var(--gold); }
.prune-slot img { width:100%; height:100%; object-fit:cover; display:block; }

/* ===== ポジションアイコン ===== */
.p-position {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.p-position img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0.85);
}

/* ===== OP.GGリンク ===== */
.opgg-link {
  color:inherit; text-decoration:none;
  transition:color 0.15s;
}
.opgg-link:hover { color:var(--blue); text-decoration:underline; }

/* ===== 検索履歴削除ボタン ===== */
.search-history-del {
  font-size:11px; color:var(--text-dim); padding:2px 4px;
  cursor:pointer; transition:color 0.15s; flex-shrink:0;
}
.search-history-del:hover { color:var(--red); }

/* ===== 現チャンプ/レーン成績ブロック ===== */
.perf-block {
  display:grid; grid-template-columns:50px 50px;
  gap:4px; flex-shrink:0; padding:0 4px; align-items:start;
}
.perf-col {
  display:flex; flex-direction:column; align-items:center; width:50px;
}
.perf-label {
  font-size:8px; color:var(--text3); letter-spacing:0.3px;
  white-space:nowrap; margin-bottom:1px;
}
.perf-pct {
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
  line-height:1.1;
}
.perf-pct span { font-size:10px; font-weight:400; opacity:0.8; }
.perf-pct.perf-empty { font-size:14px; color:var(--text3); }
.perf-sub { font-size:8px; color:var(--text2); letter-spacing:0.2px; min-height:10px; }

.perf-good .perf-pct { color:var(--green); }
.perf-mid  .perf-pct { color:var(--text); }
.perf-bad  .perf-pct { color:var(--red); }

/* 自分の行は成績ブロック非表示 */
.player-row.me .perf-block { display:none; }

/* ===== 敵JGスタートパネル ===== */
.ejg-panel { min-width:0; overflow:hidden; }
.ejg-content {
  display:flex; flex-direction:column; flex:1; min-height:0; gap:6px; overflow:hidden;
}
.ejg-placeholder { font-size:11px; color:var(--text-dim); padding:8px 0; }
.ejg-rate-warn {
  font-size:10px; color:var(--gold); background:rgba(200,155,60,0.07);
  border:1px solid rgba(200,155,60,0.22); border-left:2px solid var(--gold);
  padding:4px 8px; letter-spacing:0.3px; flex-shrink:0;
}

/* マップエリア */
.ejg-map-wrap {
  position:relative; flex-shrink:0;
  width:100%; aspect-ratio:1; max-height:55%;
}
.ejg-map-wrap canvas { position:absolute; inset:0; width:100%; height:100%; }

/* チャンプリスト */
.ejg-champ-list {
  display:flex; flex-direction:column; gap:3px;
  overflow-y:auto; flex:1; min-height:0;
}
.ejg-champ-row {
  display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.ejg-champ-icon {
  width:22px; height:22px; border-radius:2px; flex-shrink:0;
  object-fit:cover; background:var(--bg);
}
.ejg-champ-name {
  font-size:10px; color:var(--text2); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ejg-champ-bars { display:flex; gap:2px; align-items:center; }
.ejg-bar {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:1px 4px; border-radius:2px; min-width:24px;
}
.ejg-bar-lbl { font-size:6px; color:var(--text3); letter-spacing:0.2px; }
.ejg-bar-n {
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; line-height:1;
}
.ejg-totals {
  display:flex; gap:4px; flex-shrink:0; padding-top:4px;
  border-top:1px solid var(--border);
}
.ejg-total-chip {
  display:flex; flex-direction:column; align-items:center;
  padding:2px 6px; border-radius:2px; flex:1;
}
.ejg-total-lbl { font-size:7px; color:var(--text3); }
.ejg-total-n {
  font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; line-height:1.1;
}
.ejg-loading { font-size:10px; color:var(--text3); padding:6px 0; }

/* ===== プレイヤー行 新レイアウト ===== */
.player-wr {
  display:flex; flex-direction:column; align-items:flex-end;
  flex-shrink:0; min-width:36px;
}
.wr-num { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; }
.wr-num.pos { color:var(--green); }
.wr-num.neg { color:var(--red); }
.wr-num.neu { color:var(--text-dim); }
.wr-sub { font-size:9px; color:var(--text-dim); }

.player-rank-block {
  display:flex; align-items:center; gap:4px;
  flex-shrink:0; min-width:90px;
}
.rank-icon-wrap { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.rank-tier-icon { width:22px; height:22px; object-fit:contain; }
.rank-text-wrap { display:flex; flex-direction:column; }
.rank-line1 {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
  white-space:nowrap; line-height:1.2;
}
.rank-line2 {
  font-family:'Rajdhani',sans-serif; font-size:10px; color:var(--text-dim);
  line-height:1.2;
}
/* モバイル用コンパクトティア（デスクトップでは非表示） */
.rank-line1-short {
  display:none;
  font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
  white-space:nowrap; line-height:1.1; letter-spacing:.5px;
}
.rank-CHALLENGER  .rank-line1-short { color:var(--challenger); }
.rank-GRANDMASTER .rank-line1-short { color:var(--grandmaster); }
.rank-MASTER      .rank-line1-short { color:var(--master); }
.rank-DIAMOND     .rank-line1-short { color:var(--diamond); }
.rank-EMERALD     .rank-line1-short { color:var(--emerald); }
.rank-PLATINUM    .rank-line1-short { color:var(--platinum); }
.rank-GOLD        .rank-line1-short { color:var(--gold-rank); }
.rank-SILVER      .rank-line1-short { color:var(--silver); }
.rank-BRONZE      .rank-line1-short { color:var(--bronze, var(--text-dim)); }
.rank-IRON        .rank-line1-short { color:var(--iron, var(--text-dim)); }
.rank-UNRANKED    .rank-line1-short { color:var(--text-dim); }
.rank-CHALLENGER  .rank-line1 { color:var(--challenger); }
.rank-GRANDMASTER .rank-line1 { color:var(--grandmaster); }
.rank-MASTER      .rank-line1 { color:var(--master); }
.rank-DIAMOND     .rank-line1 { color:var(--diamond); }
.rank-EMERALD     .rank-line1 { color:var(--emerald); }
.rank-PLATINUM    .rank-line1 { color:var(--platinum); }
.rank-GOLD        .rank-line1 { color:var(--gold-rank); }
.rank-SILVER      .rank-line1 { color:var(--silver); }

/* ===== チャンプアイコン + レベルバッジ ===== */
.champ-icon-wrap {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:0;
}
.lv-badge {
  font-size:7px; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:0.3px;
  color:var(--text-dim); background:var(--bg2); border:1px solid var(--border);
  padding:0 3px; border-radius:2px; white-space:nowrap; margin-top:1px; line-height:1.4;
}

/* ===== AI アドバイス パネル ===== */
.ai-meta-btn {
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  font-size:9px; padding:2px 6px; cursor:pointer; letter-spacing:.5px;
  font-family:'Rajdhani',sans-serif; font-weight:600; transition:all 0.15s;
}
.ai-meta-btn:hover { border-color:var(--blue); color:var(--blue); }
.ai-meta-btn.active { border-color:var(--gold); color:var(--gold); }

.ai-prompt-box {
  background:rgba(4,7,15,0.9); border:1px solid rgba(26,42,69,0.8);
  border-left:2px solid var(--border-glow);
  padding:6px 8px; margin-bottom:6px; flex-shrink:0;
  font-size:9px; color:var(--text-dim); line-height:1.5;
  max-height:90px; overflow-y:auto; white-space:pre-wrap; font-family:monospace;
}

.ai-section {
  display:flex; gap:8px; padding:5px 0;
  border-bottom:1px solid rgba(26,42,69,0.5);
}
.ai-section:last-child { border-bottom:none; }

.ai-num {
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
  border:1px solid; margin-top:1px; background:rgba(0,0,0,0.3);
}

.ai-body {
  flex:1; font-size:11px; line-height:1.65; color:#b8cad8;
}
.ai-body strong { color:var(--text-bright); }

.ai-preamble {
  font-size:10px; color:var(--text-dim); padding:0 0 5px;
  margin-bottom:4px; border-bottom:1px solid rgba(26,42,69,0.4);
  line-height:1.5;
}
.ai-empty { color:var(--text-dim); font-size:11px; padding:8px 0; }
.rank-UNRANKED    .rank-line1 { color:var(--text-dim); }

/* ===== lol_matchup スタイル統一: ボタン角丸 ===== */
header button,
header a,
.ai-meta-btn,
.header-fav-btn,
.header-search-btn {
  border-radius: 6px;
}

/* ===== MATCHUP パネル (グリッド配置) ===== */
/* .matchup-panel は .panel.gold-top と組み合わせて使用 */

.matchup-vs-label {
  font-family: 'Rajdhani', sans-serif; font-size: 9px;
  color: var(--text3); letter-spacing: 0.5px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.matchup-body {
  flex: 1; overflow-y: auto; font-size: 11px; line-height: 1.65;
  color: var(--text); padding: 2px 0;
}
.matchup-body::-webkit-scrollbar { width: 3px; }
.matchup-body::-webkit-scrollbar-track { background: transparent; }
.matchup-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* 見出し — lol_matchup .bubble に準拠 */
.matchup-body h1 {
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  color: #fff; margin: 12px 0 6px; padding-bottom: 4px;
  border-bottom: 2px solid var(--gold); letter-spacing: 1px;
}
.matchup-body h2 {
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  color: #fff; margin: 10px 0 5px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border); letter-spacing: 1px;
}
.matchup-body h3 {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--blue); letter-spacing: 2px; text-transform: uppercase;
  margin: 10px 0 5px;
}
.matchup-body h4 { font-size: 11px; font-weight: 700; color: var(--text); margin: 8px 0 3px; }
.matchup-body h5 { font-size: 10px; font-weight: 700; color: var(--text2); margin: 6px 0 3px; }
.matchup-body h1:first-child, .matchup-body h2:first-child,
.matchup-body h3:first-child, .matchup-body h4:first-child { margin-top: 0; }

.matchup-body p { margin-bottom: 6px; }
.matchup-body p:last-child { margin-bottom: 0; }
.matchup-body strong { color: #f0d060; font-weight: 700; }   /* --gold2 */
.matchup-body em     { color: var(--blue); font-style: normal; }
.matchup-body ul, .matchup-body ol { padding-left: 14px; margin: 4px 0 8px; list-style: none; }
.matchup-body li { position: relative; padding-left: 10px; margin-bottom: 4px; line-height: 1.6; }
.matchup-body li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 1.1em; line-height: 1.6; }
.matchup-body hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.matchup-body blockquote {
  border-left: 2px solid var(--gold); padding: 4px 8px; margin: 6px 0;
  background: rgba(200,155,60,0.08); border-radius: 0 4px 4px 0;
  color: var(--text2); font-size: 10px;
}
.matchup-body table { width: 100%; border-collapse: collapse; font-size: 10px; margin: 6px 0; }
.matchup-body th {
  background: var(--bg3,#1a2438); color: var(--text2);
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 5px; text-align: left; border: 1px solid var(--border);
}
.matchup-body td { padding: 3px 5px; border: 1px solid var(--border); }
.matchup-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* ローディングドット */
.matchup-loading {
  display: flex; align-items: center; gap: 5px; padding: 12px 0;
}
.matchup-dot {
  width: 5px; height: 5px; background: var(--blue);
  border-radius: 50%; animation: matchupBounce 1.2s infinite;
}
.matchup-dot:nth-child(2) { animation-delay: 0.2s; }
.matchup-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes matchupBounce {
  0%,80%,100% { transform:translateY(0); opacity:0.4; }
  40%          { transform:translateY(-5px); opacity:1; }
}

/* 再取得ボタン */
.matchup-regen-btn {
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-dim);
  font-size: 9px; padding: 2px 7px; cursor: pointer;
  letter-spacing: .5px; font-family: 'Rajdhani', sans-serif;
  transition: all 0.15s;
}
.matchup-regen-btn:hover { border-color: var(--blue); color: var(--blue); }

/* チャンプアイコン（インライン）*/
.matchup-body .inline-champ-icon {
  width: 16px; height: 16px; border-radius: 3px;
  vertical-align: middle; margin: 0 2px 1px 0;
  object-fit: cover;
}

/* コードフェンス内データブロック */
.matchup-data-block {
  background: rgba(11,196,227,0.07);
  border: 1px solid rgba(11,196,227,0.18);
  border-radius: 4px; padding: 5px 8px; margin: 4px 0;
  font-family: 'Rajdhani', sans-serif; font-size: 11px;
  color: var(--text); letter-spacing: 0.3px; line-height: 1.6;
}

/* ============================================================
   lolsumoner-inspired VISUAL UPGRADE
   ============================================================ */

/* --- 深みのあるカラーパレット上書き --- */
:root {
  --bg:          #020b15;
  --panel:       #091428;
  --bg2:         #0d1b2a;
  --bg3:         #141e2e;
  --border:      #1e3a5f;
  --border-glow: #2a4d7a;
}

/* --- 背景グリッドをゴールドではなくブルーに --- */
body::before {
  background-image:
    linear-gradient(rgba(11,196,227,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,196,227,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* --- ヘッダー強化 --- */
header {
  background: linear-gradient(90deg, #091428 0%, #051424 50%, #091428 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid rgba(200,155,60,0.12);
  box-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 0 40px rgba(200,155,60,0.04);
}
.logo {
  font-family: 'Cinzel', serif;
  font-size: 18px; letter-spacing: 4px; font-weight: 700;
  text-shadow: 0 0 14px rgba(200,155,60,0.45), 0 0 30px rgba(200,155,60,0.15);
}
.logo span {
  text-shadow: 0 0 10px rgba(11,196,227,0.6), 0 0 25px rgba(11,196,227,0.2);
}

/* --- パネル強化 --- */
.panel.gold-top {
  background: linear-gradient(180deg, rgba(200,155,60,0.03) 0%, transparent 40%);
  box-shadow: 0 0 30px rgba(200,155,60,0.05), 0 4px 20px rgba(0,0,0,0.4);
}
.panel.blue-top {
  background: linear-gradient(180deg, rgba(11,196,227,0.04) 0%, transparent 40%);
  box-shadow: 0 0 30px rgba(11,196,227,0.04), 0 4px 20px rgba(0,0,0,0.4);
}

/* コーナーデコ：ダイヤモンド型へ変更 */
.corner-deco {
  width: 10px; height: 10px;
  border: none;
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  background: transparent;
}

/* --- パネルタイトル強化 --- */
.panel-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  color: rgba(200,155,60,0.85);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(200,155,60,0.12);
  margin-bottom: 10px;
}
.panel-title::before {
  content: '';
  width: 8px; height: 8px; flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
}

/* --- チームラベル：平行四辺形 --- */
.team-label {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  padding: 3px 22px 3px 8px;
  letter-spacing: 3px;
  font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700;
  border-bottom: none; margin-bottom: 8px;
}
.team-label.bl {
  background: linear-gradient(90deg, rgba(11,196,227,0.1) 0%, transparent 100%);
  border-bottom: none;
  border-left: 2px solid var(--blue);
  box-shadow: inset 0 0 20px rgba(11,196,227,0.04);
}
.team-label.rd {
  background: linear-gradient(90deg, rgba(232,64,87,0.1) 0%, transparent 100%);
  border-bottom: none;
  border-left: 2px solid var(--red);
  box-shadow: inset 0 0 20px rgba(232,64,87,0.04);
}

/* --- プレイヤー行強化 --- */
.player-row {
  background: rgba(9,20,40,0.6);
  border: 1px solid rgba(30,58,95,0.5);
  border-left: 2px solid transparent;
  padding: 5px 8px;
}
.player-row:hover {
  background: rgba(11,196,227,0.05);
  border-color: rgba(11,196,227,0.22);
  border-left-color: var(--blue);
  box-shadow: inset 3px 0 16px rgba(11,196,227,0.04);
}
.player-row.me {
  background: rgba(200,155,60,0.06);
  border-color: rgba(200,155,60,0.28);
  border-left-color: var(--gold);
  box-shadow: inset 3px 0 16px rgba(200,155,60,0.05);
}

/* --- ランクバッジ --- */
.rank-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 1px 7px;
}

/* --- チャンプアイコン --- */
.champ-icon {
  border: 1px solid rgba(200,155,60,0.2);
  box-shadow: 0 0 8px rgba(200,155,60,0.08);
}

/* --- スケルトンを深い色で --- */
.skeleton {
  background: linear-gradient(90deg, #091428 25%, #1a2634 50%, #091428 75%);
}

/* --- ライブバッジ強化 --- */
.live-badge {
  background: rgba(232,64,87,0.1);
  border: 1px solid rgba(232,64,87,0.4);
  box-shadow: 0 0 12px rgba(232,64,87,0.15);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  padding: 3px 16px;
}

/* --- ヘッダー統計強化 --- */
.hstat-label {
  font-family: 'Rajdhani', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 1.5px;
}
.hstat-val {
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text-bright);
}

/* --- ビルドカード強化 --- */
.build-card {
  background: linear-gradient(180deg, rgba(200,155,60,0.03) 0%, #091428 100%);
  border-color: rgba(30,58,95,0.8);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.build-card:hover {
  border-color: rgba(200,155,60,0.5);
  box-shadow: 0 0 20px rgba(200,155,60,0.12), 0 4px 20px rgba(0,0,0,0.4);
}

/* --- EJGパネル強化 --- */
.ejg-total-chip {
  background: rgba(9,20,40,0.8);
  border: 1px solid rgba(30,58,95,0.6);
}

/* --- バンパネル --- */
#banPanel {
  background: linear-gradient(180deg, rgba(200,155,60,0.02) 0%, transparent 100%);
}

/* --- scrollbar カスタム --- */
::-webkit-scrollbar-thumb {
  background: rgba(30,58,95,0.8);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(200,155,60,0.3);
}

/* --- ヘッダー検索窓 --- */
.header-search-inner {
  background: rgba(9,20,40,0.8);
  border-color: rgba(30,58,95,0.8);
  border-radius: 0;
}
.header-search-inner:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 10px rgba(11,196,227,0.1);
}

/* --- AIアドバイス・マッチアップパネル本文 --- */
.matchup-body {
  font-size: 11px; line-height: 1.7;
}

/* --- パネル外枠の微細な光彩 (blue-top) --- */
#blueTeamPanel { box-shadow: -2px 0 20px rgba(11,196,227,0.04), 0 0 30px rgba(11,196,227,0.03); }
#redTeamPanel  { box-shadow:  2px 0 20px rgba(232,64,87,0.04),  0 0 30px rgba(232,64,87,0.03); }

/* --- 検索オーバーレイフッター位置修正 --- */
.so-ch-bl { bottom:50px; }

/* ============================================================
   MOBILE 対応（≤820px）：16:9レターボックスを解除し縦積み＋スクロール
   既存デスクトップルールは非変更。JSのinline flexは!importantで上書き。
   ============================================================ */
@media (max-width:820px){
  /* ページ全体をスクロール可能に */
  html,body{ height:auto; overflow-x:hidden; overflow-y:auto; }

  /* 検索オーバーレイ（ランディング）：入力ボックスを画面幅に収める */
  .search-box{ width:min(420px,92vw); }
  .search-overlay{ overflow-y:auto; }

  /* ===== ダッシュボード：16:9固定を解除して縦1カラム ===== */
  .wrapper{ position:relative; height:auto; min-height:100vh; display:block; padding:8px; }
  .canvas{
    max-width:none; max-height:none; width:100%; height:auto;
    display:flex; flex-direction:column; gap:8px; padding:0;
  }

  /* ヘッダー：全幅・折返し・角クリップ解除 */
  header{
    grid-column:auto; grid-row:auto;
    flex-wrap:wrap; gap:10px 14px; padding:10px 12px; min-height:0;
    clip-path:none; border-top:2px solid var(--gold);
  }
  .header-stats{ gap:14px; flex-wrap:wrap; }

  /* チームパネル：縦積み・全幅・内容に応じて伸長 */
  .team-panel,#blueTeamPanel,#redTeamPanel{
    grid-column:auto!important; grid-row:auto!important; width:100%;
    overflow:visible; box-shadow:none;
  }

  /* BANパネル：青5 / 赤5 を「ラベル＋横一列」の2行に分離（10体超えに見えないよう明確化） */
  #banPanel{
    grid-column:auto; grid-row:auto; width:100%;
    flex-direction:column; align-items:stretch;
    gap:4px; padding:6px 8px;
  }
  #banPanel .ban-section{
    flex-direction:row; align-items:center; flex:0 0 auto;
    width:100%; gap:6px;
  }
  #banPanel .ban-team-label{
    margin:0; min-width:30px; flex-shrink:0; text-align:left; font-size:8px; line-height:1;
  }
  #banPanel .ban-icons{
    flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; gap:3px; flex:1;
  }
  #banPanel .ban-icon,#banPanel .ban-icon-empty{ width:20px; height:20px; }
  #banPanel .ban-divider{ display:none; }

  /* 下段：横並びグリッド → 縦積み。JSのinline flexを上書き */
  .bottom-row{
    grid-column:auto; grid-row:auto;
    display:flex; flex-direction:column; gap:8px; overflow:visible; min-height:0;
  }
  .bottom-left,.bottom-right{ flex-direction:column; gap:8px; overflow:visible; }
  .builds-panel,.ejg-panel,.ai-panel,.matchup-panel,.rank-panel{
    flex:none!important; width:100%!important; overflow:visible;
  }
  .bottom-left .panel,.bottom-right .panel{ overflow:visible; }

  /* リサイズハンドルはモバイルで無効化 */
  .resize-handle,.resize-handle-rank{ display:none!important; }

  /* パネル内のグラフ等が潰れないよう最低高さを確保 */
  .lp-chart-wrap{ min-height:160px!important; height:160px; }
  .panel{ min-height:0; }

  /* ===== プレイヤー行：狭い画面向けに再構成＆コンパクト化 ===== */
  .player-row{ gap:5px; padding:3px 5px; align-items:center; }

  /* 過去使用10体ストリップは非表示（場所を取り過ぎるため）。他項目は表示する */
  .recent-champs{ display:none!important; }

  /* サモスペ／ルーンは表示・少し縮小 */
  .p-spell-rune-col{ display:flex; }
  .p-spells,.p-runes{ gap:2px; }
  .spell-slot,.prune-slot{ width:15px; height:15px; }

  /* ポジション：アイコン＋ラベルを表示・縮小 */
  .p-position{ flex-shrink:0; }
  .p-position img{ width:16px; height:16px; }
  .p-position span{ font-size:8px; }

  /* マスタリーTop3は表示・縮小 */
  .mastery-champs{ display:flex; }
  .mastery-slot img{ width:16px; height:16px; }
  .mastery-lvl{ font-size:8px; }

  /* 名前＋下段（マスタリー等）は伸縮、はみ出さない */
  .pinfo{ min-width:0; flex:1; }
  .pname{ font-size:12px; }
  .pinfo-bottom{ gap:4px; flex-wrap:wrap; }

  /* このチャンプ／レーン成績（パフォーマンス枠）はモバイルでは非表示 */
  .perf-block{ display:none; }

  /* チャンプアイコン */
  .champ-icon{ width:30px; height:30px; }
  .lv-badge{ font-size:7px; padding:0 2px; }

  /* 勝率：コンパクト固定幅 */
  .player-wr{ flex-shrink:0; min-width:34px; }
  .wr-num{ font-size:12px; }
  .wr-sub{ font-size:8px; }

  /* ランク：アイコン＋コンパクトティア（DⅡ / EⅡ / -） */
  .rank-line1{ display:none; }
  .rank-line1-short{ display:block; }
  .rank-line2{ font-size:9px; }
  .player-rank-block{ min-width:0; gap:3px; flex-shrink:0; }
  .rank-icon-wrap{ width:20px; height:20px; }
  .rank-tier-icon{ width:20px; height:20px; }
}

/* --- さらに小さい画面（≤430px）の微調整 --- */
@media (max-width:430px){
  .logo{ font-size:17px; letter-spacing:2px; }
  .search-input,.search-tag-input,.search-hash{ font-size:16px; padding-top:12px; padding-bottom:12px; }
  .search-tag-input{ width:62px; }
  header{ padding:8px 10px; }

  /* プレイヤー行をさらに詰める */
  .player-row{ gap:4px; padding:2px 4px; }
  .champ-icon{ width:26px; height:26px; }
  .recent-champs .rc-slot:nth-child(n+8){ display:none; } /* 直近は7件まで表示 */
  .rc-slot img{ width:13px; height:13px; }
  .pname{ font-size:11px; }
  .player-wr{ min-width:30px; }
  .wr-num{ font-size:11px; }
  .rank-icon-wrap,.rank-tier-icon{ width:18px; height:18px; }
  .rank-line1-short{ font-size:12px; }

  /* BANアイコンも一回り小さく */
  #banPanel .ban-icon,#banPanel .ban-icon-empty{ width:18px; height:18px; }
}
.so-ch-br { bottom:50px; }