/* =========================
   ui.panels.css（A/Bパネル周り）
   ========================= */

/* =========================
   7) B側 数字＋ドラON/OFFの並び
   ========================= */
#panelB .open-num-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0;
}
#panelB .open-num-grid .btn{ width: 100%; }
#panelB .btn-dragon{ white-space: nowrap; }


/* =========================
   8) B側中央寄せ
   ========================= */
#panelB{
  display: flex;
  align-items: center;
}
#panelB > #b-open-block{
  width: 100%;
  display: flex;
  justify-content: center;
}


/* =====================================================================
   10) Aパネル 2カラム（確実に効く版）
   ===================================================================== */
#panelA{
  display: block;
  width: 100%;

  /* 見出し高さと、見出し→数字の間隔（左右揃え基準） */
  --a-open-head-h: 56px;
  --a-open-after-head-gap: 12px;
  --a-open-head-offset: calc(var(--a-open-head-h) + var(--a-open-after-head-gap));

  /* 親幅ベースで自動スケール（機種分岐なし） */
  container-type: inline-size;

  /* カラム間 / グリッド間隔 */
  --a-col-gap: clamp(12px, 4cqw, 24px);
  --a-gap: clamp(8px, 1.8cqw, 14px);

  /* 2カラム合計 = 6セル + (左右各2ギャップ=4ギャップ) + カラム間gap が必ず収まるように */
  --a-cell: clamp(
    40px,
    calc((100cqw - var(--a-col-gap) - (var(--a-gap) * 4)) / 6),
    56px
  );

  /* 右列幅（3セル+2ギャップ） */
  --a-3col-wide: calc(var(--a-cell) * 3 + var(--a-gap) * 2);
}

/* cqw未対応環境用の保険 */
@supports not (width: 1cqw){
  #panelA{
    --a-col-gap: clamp(12px, 4vw, 24px);
    --a-gap: clamp(8px, 1.8vw, 14px);
    --a-cell: clamp(
      40px,
      calc((100vw - var(--a-col-gap) - (var(--a-gap) * 4)) / 6),
      56px
    );
    --a-3col-wide: calc(var(--a-cell) * 3 + var(--a-gap) * 2);
  }
}

#panelA .a-two-col{
  display: grid;
  grid-template-columns: var(--a-3col-wide) var(--a-3col-wide);
  grid-template-rows: auto auto;

  /* ★ここをこれにする */
  grid-template-areas:
    "head head"
    "open right";

  column-gap: var(--a-col-gap);
  row-gap: var(--a-open-after-head-gap);

  justify-content: center;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* ====== ★修正：a-box-head は「1回だけ」に統一（上書き事故を止める） ====== */
#panelA .a-box-head{
  grid-area: head;
  width: 100%;
  min-width: 0;

  /* タイトル左・トグル右 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  height: var(--a-open-head-h);
  gap: 10px;
  padding: 0 10px;
}
/* ====== ★修正ここまで ====== */


/* 左：オープン枠 */
#panelA .a-open-box{
  grid-area: open;
  justify-self: center;
  border-radius: 18px;
  display: flex;
  flex-direction: column;

  width: var(--a-3col-wide);
  min-width: 0;
}

/* （★修正：ここにあった「見出し（2段）」の .a-box-head 定義は削除）
   理由：上の .a-box-head を column に戻してしまい、端末差で表示が崩れる原因になるため */

#panelA .a-box-title{
  margin-bottom: 0;
  text-align: center;
  line-height: 1.1;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* 左：1〜9 */
#panelA #a-open-num-grid{
  display: grid;
  grid-template-columns: repeat(3, var(--a-cell));
  gap: var(--a-gap);
  justify-content: center;

  /* ★ ヘッダー行は row-gap で揃えるので margin-top は不要 */
  margin-top: 0;
}

#panelA #a-open-num-grid .btn{
  width: var(--a-cell);
  height: var(--a-cell);
  min-height: var(--a-cell);

  border-radius: 14px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}

/* 右：通常/攻撃の箱（幅固定） */
#panelA #a-right-normal,
#panelA #a-right-attack{
  grid-area: right;
  justify-self: start;
  width: var(--a-3col-wide);
  min-width: 0;
}

/* 右：通常（3本縦） */
#panelA .a-right-box{
  display: grid;
  grid-template-rows: repeat(3, var(--a-cell));
  gap: var(--a-gap);
  align-content: start;
  justify-items: stretch;

  /* ★ Gridで揃えるので padding-top は不要 */
  padding-top: 0;

  width: var(--a-3col-wide);
}

#panelA .a-right-box .btn{
  width: 100% !important;
  height: var(--a-cell);
  min-height: var(--a-cell);
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#panelA .a-right-box #to-attack{
  padding: 0 !important;
}


/* =========================
   11) 攻撃グリッド（右側切替時）
   ========================= */
#panelA .a-attack-grid{
  display: grid;
  grid-template-columns: repeat(3, var(--a-cell));
  grid-template-rows: repeat(3, var(--a-cell));
  gap: var(--a-gap);
  justify-content: start;
}

#panelA .a-attack-grid .btn{
  width: var(--a-cell);
  height: var(--a-cell);
  padding: 0;
}

#panelA .a-attack-grid .a-tech{
  grid-column: 1 / 4;
  grid-row: 2;
  width: 100% !important;
  height: var(--a-cell);
}


/* =========================
   12) ターン終了：ready状態
   ========================= */
#end-turn-btn.turn-ready{
  background:#32c96a !important;
  color:#fff !important;
  border-color:#32c96a !important;
}


/* =====================================================================
   13) Aオープン捨て（差し替え版）
   ===================================================================== */
#a-open-num-grid button[data-open-num]{
  position: relative;
}

#a-open-num-grid button.open-pressing{
  background:#22c55e !important;
  color:#fff !important;
  border-color:#16a34a !important;
}

#a-open-num-grid:has(button.open-pressing) button[data-open-num]:not(.open-pressing){
  opacity: .28;
}

#a-open-num-grid:has(button[data-open-num]:active) button[data-open-num]:not(:active){
  opacity: .28;
}

/* ポップ（白）：ボタンと同サイズ */
#a-open-num-grid button[data-open-num]::after{
  content: attr(data-open-num);
  position: absolute;
  left: 50%;
  top: calc(-1 * (var(--a-cell) + 6px));
  transform: translateX(-50%) translateY(4px);

  width: var(--a-cell);
  height: var(--a-cell);
  min-width: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;

  opacity: 0;
  transition: opacity .08s ease, transform .08s ease, background .08s ease, color .08s ease;
}

#a-open-num-grid button.open-pressing::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#panelA #a-open-num-grid button.open-pressing.open-dragon-active{
  background: #ffffff !important;
  color: #52b788 !important;
  border: 2px solid #a3d9b1 !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ドラ赤：同サイズ＆少し上へ */
#panelA #a-open-num-grid button.open-pressing.open-dragon-active::after{
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #dc2626;
  top: calc(-1 * (var(--a-cell) + 16px));
}


/* =====================================================================
   14) A攻撃（A/A'/B/C/D/E）のフリックUI
   ===================================================================== */
#panelA .a-attack-grid button[data-attack],
#panelA .a-attack-grid button[data-attack-type]{
  position: relative;
}

#panelA .a-attack-grid button.atk-pressing{
  background:#22c55e !important;
  color:#fff !important;
  border-color:#16a34a !important;
}

#panelA .a-attack-grid:has(button.atk-pressing) button[data-attack]:not(.atk-pressing),
#panelA .a-attack-grid:has(button.atk-pressing) button[data-attack-type]:not(.atk-pressing){
  opacity: .28;
}

#panelA .a-attack-grid:has(button[data-attack]:active) button[data-attack]:not(:active),
#panelA .a-attack-grid:has(button[data-attack-type]:active) button[data-attack-type]:not(:active){
  opacity: .28;
}

#panelA .a-attack-grid button[data-attack]::after{ content: attr(data-attack); }
#panelA .a-attack-grid button[data-attack-type]::after{ content: attr(data-attack-type); }

/* ポップ（白）：ボタンと同サイズ */
#panelA .a-attack-grid button[data-attack]::after,
#panelA .a-attack-grid button[data-attack-type]::after{
  position: absolute;
  left: 50%;
  top: calc(-1 * (var(--a-cell) + 6px));
  transform: translateX(-50%) translateY(4px);

  width: var(--a-cell);
  height: var(--a-cell);
  min-width: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;

  opacity: 0;
  transition: opacity .08s ease, transform .08s ease, background .08s ease, color .08s ease;
  z-index: 5;
}

#panelA .a-attack-grid button.atk-pressing::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#panelA .a-attack-grid button.atk-pressing.atk-dragon-active{
  background: #ffffff !important;
  color: #52b788 !important;
  border: 2px solid #a3d9b1 !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ドラ赤：同サイズ＆少し上へ */
#panelA .a-attack-grid button.atk-pressing.atk-dragon-active::after{
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #dc2626 !important;
  top: calc(-1 * (var(--a-cell) + 16px));
}
/* =====================================================================
   15) 防御（A/B/C）のフリックUI
   - 攻撃ドラと同じ色・同じ見た目
   - ポップサイズは防御ボタン枠と同じ大きさ
   - 文言は data-flick-label を表示
   ===================================================================== */
#defense-buttons .btn[data-defense="A"],
#defense-buttons .btn[data-defense="B"],
#defense-buttons .btn[data-defense="C"]{
  position: relative;
  overflow: visible;
}

#defense-buttons .btn.def-pressing{
  background:#22c55e !important;
  color:#fff !important;
  border-color:#16a34a !important;
}

#defense-buttons:has(.btn.def-pressing) .btn[data-defense="A"]:not(.def-pressing),
#defense-buttons:has(.btn.def-pressing) .btn[data-defense="B"]:not(.def-pressing),
#defense-buttons:has(.btn.def-pressing) .btn[data-defense="C"]:not(.def-pressing),
#defense-buttons:has(.btn.def-pressing) .btn[data-defense="D"],
#defense-buttons:has(.btn.def-pressing) .btn[data-defense="E"],
#defense-buttons:has(.btn.def-pressing) .btn[data-defense=""]{
  opacity: .28;
}

#defense-buttons .btn[data-defense="A"]::after,
#defense-buttons .btn[data-defense="B"]::after,
#defense-buttons .btn[data-defense="C"]::after{
  content: attr(data-flick-label);
  position: absolute;
  left: 50%;
  top: calc(-100% - 6px);
  transform: translateX(-50%) translateY(4px);

  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;

  opacity: 0;
  transition: opacity .08s ease, transform .08s ease, background .08s ease, color .08s ease, top .08s ease;
  z-index: 5;
}

#defense-buttons .btn.def-pressing::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#defense-buttons .btn.def-pressing.def-dragon-active{
  background: #ffffff !important;
  color: #52b788 !important;
  border: 2px solid #a3d9b1 !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ドラ赤：攻撃と同じ見た目で少し上へ */
#defense-buttons .btn.def-pressing.def-dragon-active::after{
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #dc2626 !important;
  top: calc(-100% - 16px);
}

/* =========================
   picking状態（薄く）
   ========================= */
#panelA.is-picking button.btn{
  opacity: .35;
  filter: grayscale(.4);
}
#panelA.is-picking button.is-active{
  opacity: 1;
  filter: none;
}

/* =========================
   Aオープン捨て 見出しを1行化（オープン捨て + 通常/1枚）
   ========================= */
#panelA .a-box-title{
  white-space: nowrap;
  text-align: left;
}

/* トグルを右側で崩れないように */
#panelA #discard-toggle{
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =========================
   通常 / 1枚 セグメントUI化
   ========================= */

/* 外枠（緑枠） */
#panelA #discard-toggle{
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 2px;
  background: #ffffff;
}

/* ボタン共通 */
#panelA #discard-toggle .toggle-btn{
  border: none;
  background: #ffffff;
  color: #22c55e;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* active（選択中） */
#panelA #discard-toggle .toggle-btn.active{
  background: #22c55e;
  color: #ffffff;
}

/* hover（任意） */
#panelA #discard-toggle .toggle-btn:not(.active):hover{
  background: #f0fdf4;
}

/* フリック操作用（PC/スマホ共通） */
#panelA #discard-toggle{
  touch-action: pan-y;
  user-select: none;
}

/* =====================================================================
   ★追加：1枚捨て（#a-close-discard）の選択反転
   - 既存の is-active 運用に合わせる（他へ波及しない）
   - JS側で #a-close-discard に is-active を付け外しすれば反転する
   ===================================================================== */
#panelA #a-close-discard.is-active{
  background:#22c55e !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
#a-open-num-grid.is-locked{
  pointer-events:none;
}
/* 1〜9 */
#panelA #a-open-num-grid .btn{
  font-size:20px;
}

/* 右側ボタン */
#panelA .a-right-box .btn{
  font-size:18px;
}

/* 攻撃ボタン */
#panelA .a-attack-grid .btn{
  font-size:19px;
}

/* オープン/クローズ */
#panelA #discard-toggle .toggle-btn{
  font-size:16px;
}

/* ターン終了 */
#end-turn-btn{
  font-size:18px;
}
#back-to-lobby{
  font-size:18px;
}
#panelA #back-to-discard.is-active,
#panelA #back-to-discard.active{
  background:#22c55e !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
#a-kurau.is-active {
  background: #22c55e !important;
  color: #fff !important;
  border-color: #16a34a !important;
}