/* ================================================================
   ポケモンカードゲーム シールド戦シミュレーター
   テーマ: ストームエメラルダ — ダーク × エメラルド
   アーキテクチャ: モバイルファースト (base = mobile, min-width で上書き)
   ================================================================ */

/* ─── 1. デザイントークン ─── */
:root {
  /* 背景・サーフェス */
  --bg:        #080b14;
  --bg-s1:     #0f1421;
  --bg-s2:     #161c2e;
  --bg-s3:     #1e2540;

  /* ボーダー */
  --border-dim:    rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.11);
  --border-bright: rgba(255,255,255,0.22);

  /* テキスト (WCAG AA 準拠の十分なコントラスト) */
  --text:       #edf1fa;
  --text-sub:   #9aa5c8;
  --text-muted: #6b7899;

  /* ブランド */
  --brand:       #00e0a0;
  --brand-dim:   rgba(0,224,160,0.14);
  --brand-glow:  rgba(0,224,160,0.30);

  /* アクセント */
  --gold:        #ffc847;
  --gold-dim:    rgba(255,200,71,0.15);

  /* 状態色 */
  --ok:      #3fb950;
  --ok-bg:   rgba(63,185,80,0.12);
  --warn:    #f85149;
  --warn-bg: rgba(248,81,73,0.12);

  /* レアリティカラー (バッジ・グロー共通) */
  --rc:       #7a8090;
  --ru:       #4b93d1;
  --rr:       #c8a43c;
  --rrr:      #e08a3c;
  --rar:      #a24bd1;
  --rsr:      #e84393;
  --rsar:     #ff3b8b;
  --rur:      #ffd700;
  --rstadium: #00e0a0;

  /* スペーシング */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:20px; --sp6:24px; --sp7:32px; --sp8:48px;

  /* 角丸 */
  --r-sm:5px; --r-md:9px; --r-lg:14px; --r-xl:22px;

  /* トランジション */
  --tx: 160ms ease;
}

/* ─── 2. リセット & ベース ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* 横スクロール完全封鎖 */
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 横スクロール完全封鎖 */
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-s2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: var(--sp2) var(--sp3);
  transition: background var(--tx), border-color var(--tx);
}
button:hover:not(:disabled) {
  background: var(--bg-s3);
  border-color: var(--border-bright);
}
button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

input, select {
  font: inherit;
  background: var(--bg-s1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp2) var(--sp3);
  transition: border-color var(--tx);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

/* ─── 3. ユーティリティ ─── */
.btn-primary {
  background: var(--brand);
  color: #080b14;
  border-color: transparent;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: #00f0ad;
  box-shadow: 0 0 16px var(--brand-glow);
  border-color: transparent;
}

/* ─── 4. トースト ─── */
#toast-root {
  position: fixed;
  bottom: var(--sp6);
  right: var(--sp4);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp2);
  z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  padding: var(--sp3) var(--sp4);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border-bright);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  animation: toast-in 280ms ease forwards;
  pointer-events: all;
  word-break: break-all;
}
.toast--info { background: var(--bg-s3); color: var(--text); }
.toast--ok   { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.toast--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

@keyframes toast-in {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes toast-out {
  to { opacity:0; transform:translateY(10px); }
}
.toast--leaving { animation: toast-out 220ms ease forwards; }

/* ─── 5. トップバー ─── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp2);
  padding: var(--sp2) var(--sp3);
  background: rgba(8,11,20,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--sp2);
  flex: 1;
  min-width: 0;
}
.topbar__set-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}
.topbar__title-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--brand-dim);
  color: var(--brand);
  border: 1px solid rgba(0,224,160,0.3);
  padding: 2px 6px;
  border-radius: 99px;
  white-space: nowrap;
}
.topbar__actions {
  display: flex;
  gap: var(--sp2);
  align-items: center;
  flex-wrap: wrap;
}
.badge {
  background: var(--bg-s3);
  color: var(--text);           /* text-sub → text */
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  border: 1px solid var(--border-bright);
  white-space: nowrap;
}

/* ─── 6. ホーム画面 ─── */
.hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: flex-end;
  background:
    url('https://www.pokemon-card.com/ex/m6/assets/images/hero-csoaskwi.jpg')
    center 30% / cover no-repeat,
    var(--bg-s2);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,11,20,0.25) 0%,
    rgba(8,11,20,0.10) 30%,
    rgba(8,11,20,0.92) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--sp4) var(--sp4) var(--sp6);
}
.hero__ptcg-logo {
  height: 22px;
  width: auto;
  margin-bottom: var(--sp3);
  filter: drop-shadow(0 1px 8px rgba(0,0,0,0.9)) brightness(0) invert(1);
}
.hero__title {
  font-size: clamp(26px, 7vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
  margin-bottom: var(--sp2);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--brand) 0%, #ffd700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-panel {
  padding: var(--sp5) var(--sp4) var(--sp7);
  display: flex;
  flex-direction: column;
  gap: var(--sp6);
}
.home-section__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp3);
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp3);
}
.series-card {
  padding: var(--sp3) var(--sp4);
  border-radius: var(--r-lg);
  border: 2px solid var(--border);
  background: var(--bg-s1);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--tx), background var(--tx), transform var(--tx);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.series-card:hover {
  border-color: var(--border-bright);
  background: var(--bg-s2);
  transform: translateY(-2px);
}
.series-card.is-active {
  border-color: var(--brand);
  background: var(--brand-dim);
  color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 4px 20px var(--brand-glow);
}
.series-card__sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-sub);
  margin-top: 3px;
}

.seed-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp2);
}
.seed-row input { width: 100%; max-width: 260px; }
.seed-row .hint { font-size: 11px; color: var(--text-sub); }

.home-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}
.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp3);
  width: 100%;
  padding: var(--sp4) var(--sp6);
  font-size: 17px;
  font-weight: 900;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand) 0%, #00b8d9 100%);
  color: #080b14;
  border: none;
  box-shadow: 0 4px 20px var(--brand-glow);
  transition: transform var(--tx), box-shadow var(--tx), background var(--tx);
  letter-spacing: 0.02em;
}
.home-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--brand-glow);
  background: linear-gradient(135deg, #00f0ad 0%, #00ccee 100%);
}
.home-cta:disabled {
  background: var(--bg-s3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
}
.home-cta__label { font-size: 17px; }
.home-cta__arrow { font-size: 20px; transition: transform var(--tx); }
.home-cta:hover:not(:disabled) .home-cta__arrow { transform: translateX(4px); }
.home-cta__hint { font-size: 12px; color: var(--text-muted); }

/* ─── 6.5 横スクロールラッパー ─── */
/*
 * .scroll-wrap でラップすることで、右端にフェード+矢印を表示して
 * 「横にスクロールできる」ことをユーザーに明示する。
 */
.scroll-wrap {
  position: relative;
  overflow: hidden;   /* 子要素がはみ出さないよう封じる */
}
/* 右端グラデーション: コンテンツが続いていることを示す */
.scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 52px;
  background: linear-gradient(to right, transparent 0%, var(--bg-s1) 75%);
  pointer-events: none;
  z-index: 10;
  transition: opacity 200ms;
}
/* 右端矢印アイコン */
.scroll-wrap::before {
  content: '›';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  pointer-events: none;
  z-index: 11;
  animation: scroll-arrow 1.8s ease-in-out infinite;
}
@keyframes scroll-arrow {
  0%, 100% { opacity: 0.35; transform: translateY(-50%) translateX(0); }
  50%       { opacity: 1.00; transform: translateY(-50%) translateX(4px); }
}
/* axis-bar 用: 右端の幅が狭くてよい */
.scroll-wrap--axis::after  { width: 36px; }
.scroll-wrap--axis::before { right: 6px; font-size: 16px; }

/* ─── 7. 開封画面 ─── */
.match-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp2) var(--sp3);
  /* 右端のラッパー矢印のぶん右パディングを追加 */
  padding-right: 52px;
  background: var(--bg-s1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーをあえて表示してスクロール可能を示す (mobile非表示は維持) */
  scrollbar-width: thin;
  scrollbar-color: var(--bg-s3) transparent;
}
.match-tabs::-webkit-scrollbar       { height: 3px; }
.match-tabs::-webkit-scrollbar-track { background: transparent; }
.match-tabs::-webkit-scrollbar-thumb { background: var(--bg-s3); border-radius: 99px; }

.match-tabs > button {
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.match-tabs > button.is-active {
  background: var(--brand-dim);
  color: var(--brand);
  border-color: rgba(0,224,160,0.4);
}

.composition-pill {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.comp-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 99px;
  border: 1px solid var(--border-bright);
  background: var(--bg-s3);
  color: var(--text);        /* text-sub → text に格上げ (黒背景での可読性) */
  white-space: nowrap;
}
/* レアリティ別バッジカラー */
.comp-badge[data-r="R"]       { border-color:var(--rr);  color:var(--rr); }
.comp-badge[data-r="RR"]      { border-color:var(--rrr); color:var(--rrr); }
.comp-badge[data-r="AR"]      { border-color:var(--rar); color:var(--rar); }
.comp-badge[data-r="SR"]      { border-color:var(--rsr); color:var(--rsr); }
.comp-badge[data-r="SAR"]     { border-color:var(--rsar); color:var(--rsar); }
.comp-badge[data-r="UR"]      { border-color:var(--rur); color:var(--rur); }
.comp-badge[data-r="STADIUM"] { border-color:var(--rstadium); color:var(--rstadium); }

.price-badge {
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(255,200,71,0.35);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.tab-price {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 3px;
}

/* パックリスト (モバイル: 縦積み) */
.pack-list {
  padding: var(--sp2) var(--sp3);
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}
.pack-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-dim);
  background: var(--bg-s1);
}
.pack-row__label {
  flex-shrink: 0;
  width: 34px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-sub);     /* muted → sub */
  letter-spacing: 0.04em;
}
.pack-row__cards {
  display: flex;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
/* パック内カード: 横幅いっぱいに均等配置 */
.pack-row__cards .card {
  flex: 1;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 63 / 88;
}
.pack-row__summary {
  display: none; /* モバイルでは非表示 */
}

/* ─── 8. カード ─── */
/*
 * デフォルト (モバイル含む共通): overflow:hidden で確実にコンテンツを閉じ込める。
 * サイズはコンテキスト依存 (pool-grid ではグリッド幅に従い、pack-row では flex で決まる)。
 * ホバー拡大はデスクトップ専用 (@media hover:hover min-width:769px で付与)。
 */
.card {
  position: relative;
  display: block;            /* inline-block をやめて block に統一 */
  border-radius: var(--r-sm);
  background: var(--bg-s2);
  cursor: pointer;
  overflow: hidden;          /* ← 常にhidden。拡大はz-indexで対応 */
  transition: transform var(--tx), box-shadow var(--tx);
}

/* 固定サイズ (パック行などデスクトップ用) */
.card--md { width: 84px;  height: 118px; }
.card--sm { width: 68px;  height: 95px; }

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}

/* レアリティグロー */
.card[data-rarity="R"]       { box-shadow: 0 0  8px rgba(200,164,60,0.50); }
.card[data-rarity="RR"]      { box-shadow: 0 0 12px rgba(224,138,60,0.60); }
.card[data-rarity="AR"]      { box-shadow: 0 0 14px rgba(162,75,209,0.60); }
.card[data-rarity="SR"]      { box-shadow: 0 0 18px rgba(232,67,147,0.70); }
.card[data-rarity="SAR"]     { box-shadow: 0 0 22px rgba(255,59,139,0.75); }
.card[data-rarity="UR"]      { box-shadow: 0 0 26px rgba(255,215,0,0.90); animation: ur-pulse 2.4s ease-in-out infinite; }
.card[data-rarity="STADIUM"] { box-shadow: 0 0 12px rgba(0,224,160,0.55); }

@keyframes ur-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,215,0,0.80); }
  50%      { box-shadow: 0 0 40px rgba(255,215,0,0.95), 0 0 70px rgba(255,215,0,0.20); }
}
@keyframes fade-in {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:none; }
}

/* カード内バッジ類 */
.card__rarity {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: var(--rarity-color, #666);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  pointer-events: none;
  line-height: 1.4;
}
.card__pack {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 8px;
  padding: 1px 3px;
  border-radius: 3px;
  pointer-events: none;
}
.card__selected {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--brand);
  color: #080b14;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
}

/* プール枚数バッジ (左上): poolCount ありのカード専用 */
.card__pool-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
}
/* 未選択: 黒半透明+白文字でカード画像に重ねても読めるよう保証 */
.card__pool-badge--avail {
  background: rgba(0,0,0,0.68);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.20);
}
/* 一部選択中: ブランドカラーで選択進捗を表示 */
.card__pool-badge--partial {
  background: var(--brand);
  color: #080b14;
  box-shadow: 0 0 6px var(--brand-glow);
}
/* 上限到達: ゴールドで満杯を表示 */
.card__pool-badge--maxed {
  background: var(--gold);
  color: #080b14;
}

.card.is-selected {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* 上限到達カード: 暗くして「これ以上追加不可」を視覚的に示す */
.card.is-maxed {
  cursor: default;
}
.card.is-maxed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8,11,20,0.45);
  border-radius: var(--r-sm);
  pointer-events: none;
  z-index: 1;
}
/* バッジ類は暗幕より前面に */
.card.is-maxed .card__pool-badge,
.card.is-maxed .card__rarity,
.card.is-maxed .card__remove-btn {
  z-index: 2;
}

/* 選択解除ボタン (−) */
.card__remove-btn {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  /* タッチデバイスでは常に表示、デスクトップではホバー時のみ */
  opacity: 1;
}
/* デスクトップ: ホバーしていない非選択状態では隠す */
@media (hover: hover) {
  .card__remove-btn { opacity: 0; transition: opacity 150ms; }
  .card:hover .card__remove-btn { opacity: 1; }
}

/* カードホバーツールチップ (デスクトップのみ表示) */
/*
 * カードは hover 時に scale(1.7) で拡大される。
 * tooltip は position:absolute で card の右隣に置くが、
 * カード自身のスケールで一緒に拡大されるため transform:scale(1/1.7) で打ち消す。
 */
.card__tooltip {
  display: none; /* デスクトップのメディアクエリで有効化 */
  position: absolute;
  left: calc(100% + 6px);
  top: 0;
  min-width: 148px;
  background: rgba(8,11,20,0.97);
  border: 1px solid var(--border-bright);
  color: var(--text);
  padding: var(--sp3);
  border-radius: var(--r-md);
  font-size: 11px;
  line-height: 1.6;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  z-index: 9000;
  white-space: nowrap;
  /* カードの scale(1.7) を相殺して等倍で表示 */
  transform: scale(calc(1 / 1.7));
  transform-origin: left top;
}
.card__tooltip .tip-name {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--brand);
}
.card__tooltip .tip-row  { font-family: ui-monospace, monospace; color: var(--text-sub); font-size: 10px; }
.card__tooltip .tip-mono { color: var(--text-muted); font-size: 9px; }

/* ─── 8.5 デッキカウント固定バッジ (モバイル専用) ─── */
/*
 * デッキ構築画面でスクロール中も常に画面下部中央に表示。
 * 「今何枚選んだか」をどこにいても確認できる。
 * デスクトップ (900px+) では右カラムのデッキパネルに大きく表示されるため非表示。
 */
.deck-float-count {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;

  display: flex;
  align-items: baseline;
  gap: 4px;

  background: rgba(8,11,20,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--warn);
  border-radius: 99px;
  padding: 8px 22px 8px 18px;

  box-shadow:
    0 4px 24px rgba(0,0,0,0.65),
    0 0 0 1px rgba(248,81,73,0.15),
    0 0 20px rgba(248,81,73,0.12);

  pointer-events: none;  /* カードクリックを妨げない */
  transition: border-color var(--tx), box-shadow var(--tx);
}
.deck-float-icon {
  font-size: 14px;
  margin-right: 2px;
  opacity: 0.8;
}
.deck-float-num {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
  line-height: 1;
  transition: color var(--tx);
  min-width: 28px;
  text-align: right;
}
.deck-float-max {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 600;
  line-height: 1;
}

/* 40枚ちょうど: 緑に変わって完成を知らせる */
.deck-float-count.is-complete {
  border-color: var(--ok);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.65),
    0 0 0 1px rgba(63,185,80,0.2),
    0 0 24px rgba(63,185,80,0.25);
}
.deck-float-count.is-complete .deck-float-num { color: var(--ok); }

/* 40枚超過: 警告のオレンジ */
.deck-float-count.is-over {
  border-color: var(--gold);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.65),
    0 0 20px rgba(255,200,71,0.20);
}
.deck-float-count.is-over .deck-float-num { color: var(--gold); }

/* デスクトップでは非表示 */
@media (min-width: 900px) {
  .deck-float-count { display: none; }
}

/* ─── 9. デッキ構築画面 ─── */
/* モバイルビュー切替タブ */
.mobile-view-tabs {
  display: flex;
  background: var(--bg-s1);
  border-bottom: 1px solid var(--border);
}
.mobile-view-tabs button {
  flex: 1;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: var(--sp3) var(--sp2);
  font-size: 13px;
  background: transparent;
  color: var(--text-sub);
}
.mobile-view-tabs button.is-active {
  border-bottom-color: var(--brand);
  color: var(--brand);
  font-weight: 700;
}

.axis-bar {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp2) var(--sp3);
  padding-right: 40px;  /* scroll-wrap::before の矢印のぶん */
  background: var(--bg-s1);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-sub);
  overflow-x: auto;
  scrollbar-width: none;
}
.axis-bar::-webkit-scrollbar { display: none; }
.axis-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: var(--sp2);
  border-right: 1px solid var(--border);
}
.axis-bar label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--text-sub);
  font-size: 13px;
}
.axis-bar label:has(input:checked) { color: var(--brand); font-weight: 700; }
.axis-bar input[type="radio"] { accent-color: var(--brand); }

/* デッキ構築レイアウト (モバイル: 1カラム) */
.build-layout {
  display: block;            /* gridではなくblockで積む */
  min-height: 60vh;
}

/* タブ表示制御 */
#build-layout-root[data-active-view="pool"] .deck-view  { display: none; }
#build-layout-root[data-active-view="deck"]  .pool-view { display: none; }

/* プールビュー */
.pool-view {
  background: var(--bg-s1);
  border-top: 1px solid var(--border);
  padding: var(--sp3);
  padding-bottom: 80px;  /* フローティングバッジと重ならないよう */
  min-height: 50vh;
}

.pool-section { margin-bottom: var(--sp5); }
.pool-section__heading {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);        /* text-muted より明るいサブカラーに */
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp2);
  margin-bottom: var(--sp3);
}
/* セクション名の前に左ライン装飾 */
.pool-section__heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--brand);
  border-radius: 2px;
  flex-shrink: 0;
}

/* プールグリッド: モバイルでは4列 */
.pool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
/* グリッド内カードはセル幅に収まるようリサイズ */
.pool-grid > .card {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
  flex-shrink: 0;
}
.pool-grid > .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* モバイルではバッジ類を小さく */
.pool-grid .card__pool-badge { font-size: 8px; padding: 1px 3px; }
.pool-grid .card__rarity     { font-size: 7px; padding: 1px 3px; }
.pool-grid .card__remove-btn { width: 16px; height: 16px; font-size: 13px; }

/* デッキビュー (モバイル: 通常フロー) */
.deck-view {
  background: var(--bg-s1);
  border-top: 1px solid var(--border);
  padding: var(--sp3);
  /* フローティングバッジと重ならないよう下部に余白 */
  padding-bottom: 80px;
}

/* ─── 10. デッキパネル ─── */
.deck-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp3);
}
.deck-panel__count {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.deck-panel__count.ok   { color: var(--ok); text-shadow: 0 0 16px rgba(63,185,80,0.5); }
.deck-panel__count.warn { color: var(--warn); }
.deck-panel__count-max  { font-size: 13px; color: var(--text-muted); margin-left: 2px; }
.deck-panel__flags      { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.deck-panel__flags .ok  { color: var(--ok); }
.deck-panel__flags .warn{ color: var(--warn); }

.deck-panel__errors {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn);
  padding: var(--sp2) var(--sp3) var(--sp2) var(--sp5);
  border-radius: var(--r-sm);
  margin: var(--sp2) 0;
  font-size: 12px;
}
.deck-panel__sub-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);        /* muted → sub に格上げ */
  margin: var(--sp4) 0 var(--sp2);
  padding-top: var(--sp3);
  border-top: 1px solid var(--border-dim);
}

/* 基本エネルギー操作グリッド */
.basic-energy-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.basic-energy-cell {
  background: var(--bg-s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  text-align: center;
}
.basic-energy-cell .be-name    { font-size: 8px; color: var(--text-sub); font-weight: 600; }
.basic-energy-cell .be-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}
.basic-energy-cell .be-controls button {
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.4;
}
.basic-energy-cell .be-count {
  font-weight: 700;
  min-width: 14px;
  display: inline-block;
  font-size: 12px;
  text-align: center;
}

/* デッキカード一覧 */
.deck-panel__list { margin-top: var(--sp3); }
.deck-panel__list {
  margin-top: var(--sp2);
  /* 薄い背景で視覚的に区切り */
  background: var(--bg-s2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.deck-list-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 28px;
  gap: var(--sp2);
  align-items: center;
  padding: 7px var(--sp3);
  border-bottom: 1px solid var(--border-dim);
  font-size: 12px;
  transition: background var(--tx);
}
.deck-list-row:last-child { border-bottom: none; }
.deck-list-row:hover { background: var(--bg-s3); }
.dlr-count  { font-weight: 900; color: var(--brand); font-size: 13px; }
.dlr-name   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.dlr-rarity {
  font-size: 8px;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.dlr-minus {
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: var(--warn);
  border-color: transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.dlr-minus:hover { background: var(--warn-bg); color: var(--warn); }

/* ─── 11. スクロールバー ─── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--bg-s3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ================================================================
   12. タブレット以上 (min-width: 600px)
   ================================================================ */
@media (min-width: 600px) {
  .hero__content {
    padding: var(--sp6) var(--sp7) var(--sp7);
    max-width: 640px;
  }
  .home-panel {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--sp7) var(--sp5) var(--sp8);
  }
  .home-cta { width: auto; }
  .seed-row { flex-direction: row; align-items: center; }
  .topbar__title { font-size: 14px; }

  .pack-list { padding: var(--sp3) var(--sp5); gap: var(--sp3); }
  .pack-row {
    display: grid;
    grid-template-columns: 70px 1fr 130px;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3) var(--sp4);
  }
  .pack-row__label { width: auto; font-size: 11px; }
  .pack-row__cards { gap: var(--sp2); }
  .pack-row__summary {
    display: flex;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.8;
    flex-direction: column;
    align-items: flex-end;
  }
  /* パック行のカードは固定サイズに戻す */
  .pack-row__cards .card {
    flex: none !important;
    width: 84px !important;
    height: 118px !important;
    aspect-ratio: unset;
  }
  /* プール: 5列に広げる */
  .pool-grid { grid-template-columns: repeat(5, 1fr); gap: var(--sp2); }
}

/* ================================================================
   13. デスクトップ (min-width: 900px)
   ================================================================ */
@media (min-width: 900px) {
  .topbar { padding: var(--sp3) var(--sp5); }
  .topbar__title { font-size: 15px; }

  /* モバイルタブは非表示 */
  .mobile-view-tabs { display: none; }

  /* デッキ構築: 2カラムグリッド */
  .build-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp4);
    padding: var(--sp4) var(--sp5);
    align-items: start;
  }

  /* タブ制御を無効化 (常に両方表示) */
  #build-layout-root[data-active-view="pool"] .deck-view  { display: block; }
  #build-layout-root[data-active-view="deck"]  .pool-view { display: block; }

  .pool-view {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp4);             /* モバイルの80px余白を上書き */
    border-top: 1px solid var(--border);
    min-height: 400px;
  }
  .deck-view {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp4);             /* モバイルの80px余白を上書き */
    border-top: 1px solid var(--border);
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  /* プールグリッド: 固定px幅の auto-fill */
  .pool-grid {
    grid-template-columns: repeat(auto-fill, 68px);
    gap: var(--sp2);
  }
  /* グリッド内カードは固定サイズ */
  .pool-grid > .card {
    width: 68px !important;
    height: 95px !important;
    aspect-ratio: unset;
  }

  /* パック行のカード固定サイズ */
  .pack-row__cards .card {
    width: 84px !important;
    height: 118px !important;
    aspect-ratio: unset;
  }

  .pack-list { padding: var(--sp4) var(--sp5); }
}

/* ================================================================
   14. ホバー効果 (デスクトップ&マウス操作のみ)
   マウスを持つデバイス (hover:hover) かつ min-width:900px で有効化。
   overflow:hidden を override して z-index で重ねる。
   ================================================================ */
@media (hover: hover) and (min-width: 900px) {
  /* プールグリッドとパック行でカードがはみ出せるよう overflow を開放 */
  .pool-view       { overflow: visible; }
  .pool-grid       { overflow: visible; }
  .pack-list       { overflow: visible; }
  .pack-row        { overflow: visible; }
  .pack-row__cards { overflow: visible; }

  /* ホバー時にカードが拡大してはみ出せるよう overflow を開放 */
  .card {
    overflow: visible;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  /* カード内の img は overflow:hidden で確実にクリップ */
  .card img {
    border-radius: var(--r-sm);
  }
  .card:hover {
    transform: scale(1.7);
    z-index: 200;
    box-shadow: 0 12px 36px rgba(0,0,0,0.75) !important;
    transition-delay: 80ms;
  }
  /* ツールチップを有効化 */
  .card__tooltip { display: block; opacity: 0; transition: opacity 180ms 100ms; }
  .card:hover .card__tooltip { opacity: 1; }
}