/* ガチバトル ピック提案（テスト） v3
   - base.css のテーマ変数に合わせる（ライトテーマ）
   - 候補は S/A/B/C/D セクションで分割
   - BAN/PICK枠を小さく
*/

.ranked-pick-suggest-body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
}

.ranked-pick-suggest{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter) 24px;
}

.rps-topbar{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom: 12px;
}
.rps-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}
.rps-badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(79,70,229,.12);
  border: 1px solid rgba(79,70,229,.25);
  color: var(--text);
  font-size: 12px;
  margin-left: 8px;
  vertical-align: 2px;
}
.rps-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.rps-btn{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.rps-btn:hover{ border-color: rgba(79,70,229,.35); }
.rps-btn-ghost{
  background: rgba(255,255,255,.70);
}

.rps-controls{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.rps-control{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.rps-control-wide{ flex: 1; min-width: 240px; }
.rps-control label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.rps-control select, .rps-control input{
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.80);
  color: var(--text);
  padding: 0 10px;
  outline: none;
}
.rps-control input::placeholder{ color: rgba(75,85,99,.75); }
.rps-control select:focus, .rps-control input:focus{
  box-shadow: var(--focus);
  border-color: rgba(79,70,229,.35);
}

.rps-candidates{
  border-radius: var(--radius-card);
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.rps-candidates-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.rps-candidates-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.rps-candidates-note{
  font-size: 12px;
  color: var(--muted);
}

.rps-tabs{
  display:flex;
  gap: 8px;
  align-items:center;
}
.rps-tab{
  border: 1px solid var(--border);
  background: rgba(79,70,229,.06);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
}
.rps-tab:hover{ border-color: rgba(79,70,229,.35); }
.rps-tab.is-active{
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.35);
}

.rps-rank-sections{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.rps-rank-section{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(79,70,229,.03);
  padding: 10px;
}
.rps-rank-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rps-rank-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 1000;
}
.rps-rank-badge{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(79,70,229,.14);
  border: 1px solid rgba(79,70,229,.28);
}
.rps-rank-desc{
  font-size: 12px;
  color: var(--muted);
}

.rps-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.rps-card{
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 9px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display:flex;
  gap: 10px;
  align-items: center;
}
.rps-card:hover{ border-color: rgba(79,70,229,.35); }
.rps-card.is-disabled{
  opacity: .40;
  cursor: not-allowed;
}
.rps-card-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  flex: 0 0 auto;
}

.rps-card-main{
  min-width: 0;
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.rps-card-name{
  font-weight: 1000;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.rps-card-sub{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.rps-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  color: var(--text);
  font-weight: 800;
}
.rps-rank{
  font-weight: 1100;
  letter-spacing: .5px;
}

/* --- Stage --- */
.rps-stage{
  display:flex;
  gap: 12px;
  align-items: stretch;
}

.rps-side{
  width: 300px;
  border-radius: var(--radius-card);
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.rps-side-blue{ box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(79,70,229,.18); }
.rps-side-red{ box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(239,68,68,.18); }

.rps-side-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rps-team-pill{
  font-weight: 1000;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
}
.rps-team-pill-blue{ background: rgba(79,70,229,.10); border:1px solid rgba(79,70,229,.20); }
.rps-team-pill-red{ background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.18); }
.rps-team-meta{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.rps-slot-group{ margin-top: 10px; }
.rps-slot-title{
  font-size: 12px;
  color: var(--muted);
  margin: 8px 2px;
  font-weight: 900;
}

/* 枠を小さく */
.rps-slots{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rps-slot{
  position: relative;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
  padding: 7px 7px 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.rps-slot:hover{ border-color: rgba(79,70,229,.30); }
.rps-slot.is-focus{
  box-shadow: var(--focus);
  border-color: rgba(79,70,229,.35);
}
.rps-slot.is-filled{ background: rgba(79,70,229,.03); }

.rps-slot-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.rps-slot-badge{
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
}
.rps-slot-step{
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

/* 小さく */
.rps-slot-icon,
.rps-slot-placeholder{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display:block;
  margin: 0 auto;
}
.rps-slot-icon{
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.rps-slot-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.03);
  border: 1px dashed rgba(0,0,0,.18);
  color: rgba(75,85,99,.85);
  font-weight: 1100;
  letter-spacing: .6px;
}

.rps-slot-name{
  text-align:center;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 1000;
  min-height: 16px;
}

.rps-center{
  flex: 1;
  border-radius: var(--radius-card);
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rps-center-header{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  text-align:center;
  font-weight: 900;
}

.rps-map-card{
  width: min(420px, 100%);
  border-radius: 18px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
  padding: 12px;
}
.rps-map-top{
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.rps-map-name{
  font-size: 16px;
  font-weight: 1100;
}
.rps-map-sub{
  font-size: 12px;
  color: var(--muted);
}

.rps-map-image-wrap{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.rps-map-image{
  display:block;
  width:100%;
  height:auto;
}
.rps-map-image-fallback{
  padding: 44px 14px;
  text-align:center;
  color: var(--muted);
  font-weight: 1000;
}

.rps-center-hint{
  text-align:center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 800;
}

@media (max-width: 980px){
  .rps-stage{ flex-direction: column; }
  .rps-side{ width: 100%; }
}


/* 余計な表示（ラベル/名前）を強制OFF（古いHTMLが残ってもOK） */
.rps-slot .rps-slot-top,
.rps-slot .rps-slot-name{
  display:none !important;
}

/* 枠をさらに小さく */
.rps-slots{ gap: 6px; }

.rps-slot.rps-slot-compact{
  padding: 4px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 画像もさらに小さく */
.rps-slot.rps-slot-compact .rps-slot-icon,
.rps-slot.rps-slot-compact .rps-slot-placeholder{
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.rps-slot.rps-slot-compact .rps-slot-placeholder{
  font-size: 16px;
}

/* BANは灰色（画像をグレースケール） */
.rps-slot.is-ban.is-filled .rps-slot-icon{
  filter: grayscale(1) brightness(0.85);
  opacity: 0.85;
}

/* BAN枠の背景も少し灰色寄せ */
.rps-slot.is-ban{
  background: rgba(0,0,0,.02);
}



/* ラベル類は完全に消す（HTMLに残っていてもOK） */
.rps-slot .rps-slot-top,
.rps-slot .rps-slot-name{ display:none !important; }

/* BAN: 3枠を「つなげた」縦ストリップにする */
#rps-blue-bans,
#rps-red-bans{
  display:flex !important;
  flex-direction: column;
  gap: 0 !important;

  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

/* PICK: 3枠を「つなげた」縦ストリップにする */
#rps-blue-picks,
#rps-red-picks{
  display:flex !important;
  flex-direction: column;
  gap: 0 !important;

  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* 各枠：境界線だけで区切る（つながって見える） */
#rps-blue-bans .rps-slot,
#rps-red-bans  .rps-slot,
#rps-blue-picks .rps-slot,
#rps-red-picks  .rps-slot{
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
  background: transparent !important;

  display:flex;
  align-items:center;
  justify-content:center;
}
#rps-blue-bans .rps-slot:last-child,
#rps-red-bans  .rps-slot:last-child,
#rps-blue-picks .rps-slot:last-child,
#rps-red-picks  .rps-slot:last-child{
  border-bottom: 0 !important;
}

/* 画像サイズ：もっと小さく */
#rps-blue-bans .rps-slot-icon,
#rps-red-bans  .rps-slot-icon,
#rps-blue-bans .rps-slot-placeholder,
#rps-red-bans  .rps-slot-placeholder{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

#rps-blue-picks .rps-slot-icon,
#rps-red-picks  .rps-slot-icon,
#rps-blue-picks .rps-slot-placeholder,
#rps-red-picks  .rps-slot-placeholder{
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

/* BANは灰色（強めに） */
#rps-blue-bans .rps-slot-icon,
#rps-red-bans  .rps-slot-icon{
  filter: grayscale(1) brightness(.80) contrast(.95);
  opacity: .85;
}

/* フォーカスは分かりやすく */
#rps-blue-bans .rps-slot.is-focus,
#rps-red-bans  .rps-slot.is-focus,
#rps-blue-picks .rps-slot.is-focus,
#rps-red-picks  .rps-slot.is-focus{
  box-shadow: 0 0 0 3px rgba(79,70,229,.22) !important;
  position: relative;
  z-index: 2;
}

/* 余白を詰めて全体をコンパクトに */
.rps-slot-group{ margin-top: 8px !important; }


/* ===== v7 layout fix: 左 青 / 中 マップ / 右 赤（デスクトップ） ===== */

.ranked-pick-suggest{
  max-width: 1120px;
}

/* 3カラム */
.rps-board{
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  grid-template-areas: "blue map red";
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.rps-side-blue{ grid-area: blue; }
.rps-side-red{  grid-area: red; }
.rps-map-section{ grid-area: map; }

/* モバイル：青→赤→マップ（要望順） */
@media (max-width: 980px){
  .rps-board{
    grid-template-columns: 1fr;
    grid-template-areas:
      "blue"
      "red"
      "map";
  }
  .rps-side{ width: 100% !important; }
}

/* サイド内：BAN/PICK を2列にして “ちゃんとした” 見た目に */
.rps-side{
  width: auto !important; /* 300px固定を打ち消す */
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head head"
    "ban pick";
  gap: 10px;
}

.rps-side .rps-side-header{ grid-area: head; margin-bottom: 0; }
.rps-side .rps-slot-group:nth-of-type(1){ grid-area: ban; margin-top: 0; }
.rps-side .rps-slot-group:nth-of-type(2){ grid-area: pick; margin-top: 0; }

/* 赤は外側にBANが来るように列を反転 */
.rps-side-red{
  grid-template-areas:
    "head head"
    "pick ban";
}

/* タイトルは小さく */
.rps-slot-title{
  margin: 4px 2px 6px !important;
  font-size: 11px;
  letter-spacing: .3px;
}

/* マップは中心で大きめに */
.rps-map-section{
  padding: 12px;
}
.rps-map-card{
  width: min(520px, 100%);
}

/* ピック完了で候補＆検索を隠す */
#rps-root.is-complete #rps-candidates{ display:none !important; }
#rps-root.is-complete #rps-search-wrap{ display:none !important; }


/* ===== v8: マップ表示ON/OFF + さらにコンパクトな候補 + フォーカス見やすく ===== */

/* マップ非表示時：2カラム(青/赤) */
#rps-root.hide-map .rps-board{
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "blue red";
}
#rps-root.hide-map .rps-map-section{
  display:none !important;
}

/* スロット：カード感ゼロ（画像+縁取りだけ） */
#rps-blue-bans .rps-slot,
#rps-red-bans  .rps-slot,
#rps-blue-picks .rps-slot,
#rps-red-picks  .rps-slot{
  padding: 2px !important;
}

.rps-slot-icon{
  border: 2px solid rgba(0,0,0,.14);
  box-shadow: none !important;
}

.rps-slot.is-focus .rps-slot-icon{
  border-color: rgba(79,70,229,.85) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.22) !important;
}

.rps-slot.is-focus{
  background: rgba(79,70,229,.06) !important;
}

/* 候補カード：もっと小さく（名前+おすすめ度だけ） */
.rps-grid{
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 8px;
}

.rps-card{
  padding: 6px;
  border-radius: 12px;
  gap: 8px;
}

.rps-card-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.rps-card-name{
  font-size: 12px;
}

.rps-card-sub{
  display:none !important; /* v7のサブ行（勝率等）を消す */
}

.rps-card-reco{
  font-size: 12px;
  color: var(--muted);
  font-weight: 1000;
}

/* タブ：2つだけ前提でも崩れない */
.rps-tabs{ gap: 6px; }


/* ===== v9: 余白潰し / 候補をもっと小さく / S-A-B-C-D を色分け / 検索位置移動 ===== */

/* 上部の検索を使わない（念のため） */
#rps-search-wrap{ display:none !important; }

/* サイド内グリッド：1fr じゃなく auto で “赤枠の余白” を殺す */
.rps-side{
  grid-template-columns: auto auto !important;
  justify-content: space-between;
}

/* 各グループ自体も幅を最小化 */
.rps-slot-group{
  width: fit-content;
}
.rps-slot-group .rps-slots{
  width: fit-content;
}

/* 青：BANは外側(左)、PICKは内側(右) */
.rps-side-blue .rps-slot-group:nth-of-type(1){ justify-self: start; }
.rps-side-blue .rps-slot-group:nth-of-type(2){ justify-self: end; }

/* 赤：BANは外側(右)、PICKは内側(左) */
.rps-side-red .rps-slot-group:nth-of-type(1){ justify-self: end; }
.rps-side-red .rps-slot-group:nth-of-type(2){ justify-self: start; }

/* スロット：さらにカード感を消してアイコンだけ */
#rps-blue-bans .rps-slot,
#rps-red-bans  .rps-slot,
#rps-blue-picks .rps-slot,
#rps-red-picks  .rps-slot{
  padding: 2px !important;
}

/* フォーカスをもっと分かりやすく */
.rps-slot.is-focus .rps-slot-icon,
.rps-slot.is-focus .rps-slot-placeholder{
  box-shadow: 0 0 0 3px rgba(79,70,229,.35) !important;
  border-color: rgba(79,70,229,.95) !important;
}
.rps-slot.is-focus{
  background: rgba(79,70,229,.08) !important;
}

/* 候補ヘッダ：検索を右に */
.rps-candidates-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rps-candidates-left{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.rps-candidates-right{
  display:flex;
  align-items:center;
  gap: 8px;
}
.rps-candidates-search-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
}
.rps-candidates-search{
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.80);
  padding: 0 10px;
  outline: none;
  min-width: 220px;
}
.rps-candidates-search:focus{
  box-shadow: var(--focus);
  border-color: rgba(79,70,229,.35);
}

/* 候補カード：もっと小さく（名前 + おすすめだけ） */
.rps-grid{
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
}
.rps-card{
  padding: 5px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}
.rps-card-icon{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.rps-card-name{
  font-size: 12px !important;
}
.rps-card-reco{
  font-size: 12px;
  color: var(--muted);
  font-weight: 1000;
}

/* ランク色分け（見た瞬間わかる） */
.rps-rank-section{ background: rgba(0,0,0,.01); }

.rps-rank-section.rps-rank-SS{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.26);
}
.rps-rank-section.rps-rank-SS .rps-rank-badge{
  background: rgba(220,38,38,.20);
  border-color: rgba(220,38,38,.34);
}

.rps-rank-section.rps-rank-S{
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.20);
}
.rps-rank-section.rps-rank-S .rps-rank-badge{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.28);
}

.rps-rank-section.rps-rank-A{
  background: rgba(245,158,11,.06);
  border-color: rgba(245,158,11,.22);
}
.rps-rank-section.rps-rank-A .rps-rank-badge{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.28);
}

.rps-rank-section.rps-rank-B{
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.20);
}
.rps-rank-section.rps-rank-B .rps-rank-badge{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.26);
}

.rps-rank-section.rps-rank-C{
  background: rgba(59,130,246,.06);
  border-color: rgba(59,130,246,.18);
}
.rps-rank-section.rps-rank-C .rps-rank-badge{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.26);
}

.rps-rank-section.rps-rank-D{
  background: rgba(107,114,128,.06);
  border-color: rgba(107,114,128,.18);
}
.rps-rank-section.rps-rank-D .rps-rank-badge{
  background: rgba(107,114,128,.14);
  border-color: rgba(107,114,128,.26);

.rps-rank-section.rps-rank-E{
  background: rgba(156,163,175,.05);
  border-color: rgba(156,163,175,.18);
}
.rps-rank-section.rps-rank-E .rps-rank-badge{
  background: rgba(156,163,175,.12);
  border-color: rgba(156,163,175,.26);
}

}


/* ===== v10 fixes ===== */

/* 候補の自動非表示：is-complete ではなく hide-candidates で制御 */
#rps-root.is-complete #rps-candidates{ display:block !important; }
#rps-root.hide-candidates #rps-candidates{ display:none !important; }

/* マップ非表示は「セクションごと」完全に消す（CSSで確実に） */
#rps-root.hide-map .rps-map-section{
  display:none !important;
}

/* スマホ：青と赤を横2列（mapは下に全幅） */
@media (max-width: 980px){
  .rps-board{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "map map";
    gap: 10px;
  }
  #rps-root.hide-map .rps-board{
    grid-template-areas: "blue red" !important;
  }

  /* スマホはサイドのヘッダを少し詰める */
  .rps-side-header{
    gap: 8px;
  }
}

/* ランク色分けが見えるように枠線を強める（セクションにclassが付く前提） */
.rps-rank-section{
  border: 1px solid rgba(0,0,0,.08);
}
.rps-rank-section .rps-rank-badge{
  border: 1px solid rgba(0,0,0,.10);
}

/* 候補カード：数値だけ（ラベルなし） */
.rps-card-reco{
  line-height: 1.1;
}


/* ===== v11: BAN外側 / PICK内側（デスクトップ&スマホ） ===== */

/* side grid を “明示的” に BAN/PICKで配置（nth-of-type依存をやめる） */
.rps-side{
  grid-template-columns: auto auto !important;
  gap: 10px;
}

.rps-side-blue{
  grid-template-areas:
    "head head"
    "ban pick" !important;
}
.rps-side-red{
  grid-template-areas:
    "head head"
    "pick ban" !important;
}

/* group の割当 */
.rps-side .rps-side-header{ grid-area: head; }
.rps-side .rps-slot-group.rps-group-ban{ grid-area: ban; }
.rps-side .rps-slot-group.rps-group-pick{ grid-area: pick; }

/* スマホも同じ思想。青/赤を横2列で固定（mapはONなら下、OFFなら消える） */
@media (max-width: 980px){
  .rps-board{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "map map";
  }
  #rps-root.hide-map .rps-board{
    grid-template-areas: "blue red" !important;
  }
}


/* =========================
   v11.2 Mobile-first controls + turn emphasis
   ========================= */

/* Narrow screens (smartphone / iPad Slide Over) */
@media (max-width: 980px){
  /* Controls: stack dropdowns vertically */
  .rps-controls{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .rps-control{
    min-width: 0 !important;
    width: 100%;
  }
  .rps-control select,
  .rps-control input{
    width: 100%;
  }

  /* Move undo/redo/reset under controls (JS adds .is-in-controls when moved) */
  .rps-topbar-right.is-in-controls{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
  }
  .rps-topbar-right.is-in-controls .rps-btn{
    width: 100%;
  }
}

/* Turn emphasis */
#rps-root.turn-blue .rps-side-blue{
  box-shadow: var(--shadow-card), inset 0 0 0 2px rgba(79,70,229,.45);
}
#rps-root.turn-blue .rps-side-red{
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(239,68,68,.12);
  opacity: .92;
}
#rps-root.turn-red .rps-side-red{
  box-shadow: var(--shadow-card), inset 0 0 0 2px rgba(239,68,68,.45);
}
#rps-root.turn-red .rps-side-blue{
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(79,70,229,.12);
  opacity: .92;
}

/* Center header: readable banner */
.rps-center-header{
  font-weight: 1000;
  letter-spacing: .2px;
}
#rps-root.turn-blue .rps-center-header{
  background: rgba(79,70,229,.10);
  border: 1px solid rgba(79,70,229,.22);
}
#rps-root.turn-red .rps-center-header{
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
}

/* Map subtitle: no map_id; keep compact */
.rps-map-sub{
  word-break: keep-all;
}

/* Slightly larger map image on narrow screens */
@media (max-width: 980px){
  .rps-map-image-wrap{
    min-height: 180px;
  }
}

/* ===== v19 compact/sticky pick flow ===== */
.ranked-pick-suggest{
  padding-top: 10px;
}

.rps-topbar{
  align-items: center;
  margin-bottom: 8px;
}

.rps-sub{
  display: none;
}

.rps-topbar-right{
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.rps-btn{
  padding: 8px 10px;
  min-height: 36px;
}

.rps-controls{
  position: sticky;
  top: 62px;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.rps-control{
  min-width: 0 !important;
}

.rps-control label{
  font-size: 11px;
}

.rps-control select,
.rps-control input{
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

.rps-control-actions{
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.rps-control-actions .rps-btn{
  width: 100%;
  box-shadow: none;
  font-size: 12px;
}

.rps-board{
  position: sticky;
  top: 126px;
  z-index: 70;
  grid-template-columns: 1fr minmax(220px, .9fr) 1fr;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

#rps-root.hide-map .rps-board{
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rps-side{
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "head"
    "ban"
    "pick" !important;
  gap: 6px !important;
  padding: 8px;
  background: #fff !important;
}

.rps-side-red{
  grid-template-areas:
    "head"
    "ban"
    "pick" !important;
}

.rps-side-header{
  margin-bottom: 0;
}

.rps-team-pill{
  padding: 4px 8px;
  font-size: 11px;
}

.rps-team-meta{
  font-size: 11px;
}

.rps-slot-group{
  width: 100% !important;
}

.rps-slot-title{
  margin: 0 2px 4px !important;
  font-size: 10px;
}

#rps-blue-bans,
#rps-red-bans,
#rps-blue-picks,
#rps-red-picks{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#rps-blue-bans .rps-slot,
#rps-red-bans .rps-slot,
#rps-blue-picks .rps-slot,
#rps-red-picks .rps-slot{
  min-width: 0;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  padding: 2px !important;
  background: #fff !important;
}

#rps-blue-bans .rps-slot:last-child,
#rps-red-bans .rps-slot:last-child,
#rps-blue-picks .rps-slot:last-child,
#rps-red-picks .rps-slot:last-child{
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
}

#rps-blue-bans .rps-slot-icon,
#rps-red-bans .rps-slot-icon,
#rps-blue-bans .rps-slot-placeholder,
#rps-red-bans .rps-slot-placeholder{
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

#rps-blue-picks .rps-slot-icon,
#rps-red-picks .rps-slot-icon,
#rps-blue-picks .rps-slot-placeholder,
#rps-red-picks .rps-slot-placeholder{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.rps-map-section{
  padding: 8px;
}

.rps-map-card{
  padding: 8px;
  border-radius: 14px;
}

.rps-map-image-wrap{
  min-height: 0;
}

.rps-map-image[hidden]{
  display: none !important;
}

.rps-map-image-wrap[hidden]{
  display: none !important;
}

.rps-center-header,
.rps-center-hint{
  margin: 0 0 6px;
}

.rps-candidates{
  padding: 10px;
}

.rps-candidates-header{
  margin-bottom: 8px;
}

.rps-rank-sections{
  gap: 8px;
}

.rps-rank-section{
  padding: 8px;
}

@media (max-width: 980px){
  .rps-topbar{
    display: block;
  }

  .rps-topbar-right{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  .rps-controls{
    top: 108px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rps-control-actions{
    grid-column: 1 / -1;
  }

  .rps-board{
    top: 230px;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "blue red"
      "map map";
  }

  #rps-root.hide-map .rps-board{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "blue red" !important;
  }

  .rps-side{
    padding: 7px;
  }

  .rps-side-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 520px){
  .rps-controls{
    top: 104px;
  }

  .rps-board{
    top: 214px;
  }

  .rps-control label,
  .rps-team-meta{
    display: none;
  }

  .rps-control select,
  .rps-control input{
    height: 32px;
    font-size: 12px;
  }

  .rps-btn{
    min-height: 32px;
    padding: 7px 8px;
  }

  .rps-team-pill{
    font-size: 10px;
  }

  #rps-blue-bans .rps-slot-icon,
  #rps-red-bans .rps-slot-icon,
  #rps-blue-bans .rps-slot-placeholder,
  #rps-red-bans .rps-slot-placeholder{
    width: 26px !important;
    height: 26px !important;
  }

  #rps-blue-picks .rps-slot-icon,
  #rps-red-picks .rps-slot-icon,
  #rps-blue-picks .rps-slot-placeholder,
  #rps-red-picks .rps-slot-placeholder{
    width: 30px !important;
    height: 30px !important;
  }
}

#rps-root.turn-blue .rps-side-red,
#rps-root.turn-red .rps-side-blue{
  opacity: 1 !important;
}

/* =========================
   v20 Sticky draft layout fixes
   ========================= */
.ranked-pick-suggest-body .site-header{
  position: static;
}

.rps-controls{
  top: 8px !important;
  z-index: 120 !important;
  background: #fff !important;
  backdrop-filter: none !important;
}

.rps-board{
  top: 74px !important;
  z-index: 110 !important;
  background: #fff !important;
  overflow: hidden;
  isolation: isolate;
}

.rps-side,
.rps-map-section,
.rps-map-card,
.rps-slot-group{
  background: #fff !important;
}

#rps-blue-bans .rps-slot,
#rps-red-bans .rps-slot,
#rps-blue-picks .rps-slot,
#rps-red-picks .rps-slot{
  background: #fff !important;
}

.rps-slot-placeholder{
  background: #fff !important;
}

.rps-candidates{
  position: relative;
  z-index: 1;
  background: #fff !important;
}

@media (max-width: 980px){
  .rps-controls{
    top: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rps-board{
    top: 92px !important;
    border-radius: 14px;
  }

  .rps-side-header{
    flex-direction: row !important;
    align-items: center !important;
  }
}

@media (max-width: 520px){
  .ranked-pick-suggest{
    padding-inline: 8px;
  }

  .rps-controls{
    padding: 6px !important;
    gap: 6px !important;
  }

  .rps-board{
    top: 82px !important;
    gap: 5px !important;
    padding: 5px !important;
  }

  .rps-side{
    padding: 6px !important;
    gap: 5px !important;
  }

  .rps-slot-title{
    display: none;
  }
}

/* =========================
   v21 Stable sticky controls
   ========================= */
.ranked-pick-suggest{
  padding-top: 8px;
}

.rps-topbar{
  position: sticky;
  top: 0;
  z-index: 150;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.rps-topbar-left{
  min-width: 0;
  flex: 1 1 auto;
}

.rps-topbar-right{
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 6px;
}

.rps-topbar-right .rps-btn{
  width: 100%;
  min-height: 34px;
  box-shadow: none;
}

.rps-controls{
  top: 50px !important;
  z-index: 140 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow: visible;
}

.rps-board{
  top: 118px !important;
  z-index: 130 !important;
  overflow: hidden;
}

#rps-root.hide-map .rps-board{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.rps-side{
  min-width: 0;
  opacity: 1 !important;
}

.rps-side,
.rps-map-section,
.rps-map-card,
.rps-candidates{
  position: relative;
}

.rps-candidates{
  z-index: 1;
}

@media (max-width: 980px){
  .rps-topbar{
    top: 0;
    padding: 6px;
  }

  .rps-topbar-left{
    display: none;
  }

  .rps-topbar-right{
    width: 100%;
    flex-basis: 100%;
    margin-top: 0;
  }

  .rps-controls{
    top: 48px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rps-board{
    top: 140px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "blue red"
      "map map" !important;
  }

  #rps-root.hide-map .rps-board{
    grid-template-areas: "blue red" !important;
  }
}

@media (max-width: 520px){
  .rps-topbar-right{
    gap: 5px;
  }

  .rps-topbar-right .rps-btn{
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .rps-controls{
    top: 46px !important;
  }

  .rps-board{
    top: 130px !important;
    border-radius: 14px;
  }
}