/* =========================
   base.css（ベース＋共通UI）
   game.css（整理済みフル）
   ========================= */

/* =========================
   0) Tokens
   ========================= */
:root {
  --grad1: #e0f1ff;
  --grad2: #f6e9ff;
  --grad3: #fff7e4;
  --ink: #0f1b2e;
  --muted: #6a7b93;
  --primary: #5b8cff;
  --ghost: #eef3ff;
  --panel: rgba(255, 255, 255, .7);
  --line: rgba(15, 27, 46, .08);

  --dm-text: #ffffff;
  --dm-outline: rgba(0, 0, 0, .25);
  --dm-bg: none;
  --dm-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* =========================
   1) Reset / Base
   ========================= */
* { box-sizing: border-box }
html, body { height: 100% }

body {
  margin: 0;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* =========================
   2) Background
   ========================= */
.bg-gradient{
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--grad1), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, var(--grad2), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, var(--grad3), transparent 55%),
    #ffffff;
  z-index: -2;
}
.bg-noise{
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* =========================
   3) Layout
   ========================= */
.battle-shell {
  max-width: 100%;
  margin: 8px auto;
  padding: clamp(8px, 2vw, 16px);
}
.head h1 { font-size: clamp(20px, 4.5vw, 28px); margin: 0 0 4px }
.head .sub { color: var(--muted); margin: 0 0 16px }

/* =========================
   4) Utilities
   ========================= */
.hidden { display: none !important; }
.tab-panel.hidden { display: none !important; }

/* =========================
   5) Controls (Attack / Discard)
   ========================= */
.row.tab-discard {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.attack-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0,1fr));
}
.attack-row .btn { height: 48px; width: 100%; font-weight: 600 }

/* =========================
   6) Log
   ========================= */
/* ✅ 修正：log-card も “カード化” しない（見た目はページ側で管理） */
.log-card{
  padding: 12px;
  margin-top: 0;
  overflow: visible;
  position: relative;
}

/* =========================
   Log Title（中央固定＋装飾ライン）上品版
========================= */
.log-card h3{
  margin: 0 0 16px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: 1.25rem;
  font-weight: 500;           /* ← 太字やめ */
  letter-spacing: .12em;
  text-align: center;
}

/* 左右の装飾ライン（中心が少し濃く、外側にフェード） */
.log-card h3::before,
.log-card h3::after{
  content: "";
  height: 1px;
  align-self: center;

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(15,27,46,.18) 18%,
    rgba(15,27,46,.32) 50%,
    rgba(15,27,46,.18) 82%,
    transparent 100%
  );
}

/* 左右で向きを揃える（見た目の均一化） */
.log-card h3::after{
  transform: scaleX(-1);
}

/* ログ本文（太字なし・少しだけ大きめ） */
.log{
  min-height: 120px;
  max-height: 36vh;
  overflow: auto;
  font-size: 1.02rem;
  font-weight: 400;          /* ← 太字なし */
  letter-spacing: .05em;
  line-height: 1.6;

  white-space: pre-wrap;
  padding: 10px 12px 12px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-break: break-word;
}

/* dvh対応端末では、ログの高さ揺れを軽減 */
@supports (height: 1dvh){
  .log{
    max-height: 36dvh;
  }
}
/* =========================
   7) Footer
   ========================= */
/* ✅ 修正：フッターも上の余白で “分断” しない */
.foot{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 0;
}
.foot button { font-size: 1rem; line-height: 1.2; }
.foot .btn.small { height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 700; }

/* =========================
   8) Modal（1本化）
   ========================= */
.modal{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.42);
  z-index: 10000;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
.modal.hidden, .modal[hidden]{ display:none !important; }

.modal .modal-body{
  width: min(92vw, 420px);
  max-height: 80vh; overflow:auto;
  background:#fff; border-radius:16px; padding:20px;
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}

/* =========================
   9) Buttons（緑基調 1本化）
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:12px;
  border:2px solid #32c96a;
  background:#fff; color:#32c96a;
  font-weight:700; cursor:pointer;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn:hover{
  background:#eafff3;
  box-shadow:0 0 10px rgba(50,201,106,.35);
  transform:translateY(-1px);
}
.btn:active{ transform: translateY(1px); }
.btn.ghost{ background: var(--ghost); }
.btn.small{ padding: 8px 10px; border-radius: 10px; font-size: .92rem; }

.btn.is-disabled, .btn[disabled]{
  background:#f4f5f4; color:#8a948a; border-color:#c0c8c0;
  cursor:not-allowed; box-shadow:none; opacity:.8;
}
.btn:focus-visible{
  outline:3px solid rgba(50,201,106,.45); outline-offset:2px;
}

/* ターン終了（緑基調） */
#end-turn-btn{
  height:48px; padding:0 18px; border-radius:12px;
  border:2px solid #32c96a; background:#fff; color:#32c96a; font-weight:700;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  cursor: not-allowed;
}
#end-turn-btn:not([disabled]) { cursor: pointer; }
#end-turn-btn:hover:not([disabled]){
  background:#eafff3; box-shadow:0 0 10px rgba(50,201,106,.35); transform: translateY(-1px);
}
#end-turn-btn[disabled]{
  background:#f4f5f4; color:#8a948a; border-color:#c0c8c0; cursor:not-allowed; box-shadow:none;
}
#end-turn-btn:active{ transform: translateY(1px); }
#end-turn-btn:focus-visible{
  outline:3px solid rgba(50,201,106,.45); outline-offset:2px;
}

/* =========================
   10) Defense Buttons
   ========================= */
#defense-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  grid-auto-rows:1fr;
}
#defense-buttons .btn{ min-height:48px; border-radius:12px; font-weight:700; }
#defense-buttons .btn[data-defense=""]{
  background:#fff;
  border-color:#d9534f;
  color:#d9534f;
}

/* =========================
   11) Responsive（ズレ防止の最終安定化：統合済み）
   - スマホのvh揺れ対策
   - スマホ時のタブ/攻撃グリッドを最終決定
   ========================= */
@media (max-width: 480px){

  /* 外枠：上下の押し広げを抑える */
  .battle-shell{
    margin: 8px auto;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  }

  /* タブ：スマホは2列＋中央下 */
  .row.tab-discard{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: auto auto;
  }

  /* ★修正：技ボタンの“2列ぶち抜き”はタブ内にいる時だけ */
  .row.tab-discard #to-attack{
    grid-column: 1 / 3;
    justify-self: center;
    width: min(320px, 100%);
    height: 50px;
  }

  /* 攻撃：スマホは4列 */
  .attack-row{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  /* 防御：詰まりすぎ防止 */
  #defense-buttons .btn{
    min-height: 44px;
  }

  /* ログ：端末対応状況で安定化 */
  @supports (height: 1dvh){
    .log{ max-height: 34dvh; }
  }
  @supports not (height: 1dvh){
    .log{ max-height: 34vh; }
  }
}

@media (min-width: 900px) and (orientation: landscape){

  :root{
    --keyart-ar: 0.70703125;
    --ui-pad: 24px;
  }

  @supports (height: 100dvh){
    :root{ --keyart-h: 100dvh; }
  }
  @supports not (height: 100dvh){
    @supports (height: 100svh){
      :root{ --keyart-h: 100svh; }
    }
  }
  @supports not (height: 100dvh){
    @supports not (height: 100svh){
      :root{ --keyart-h: 100vh; }
    }
  }

  :root{
    /* ✅ 修正：高さ基準をやめて幅基準にする（左右黒枠が必ず均等＝ズレなし） */
    --keyart-w: min(560px, 100vw);
  }

  html{ background:#000; }
  body{ background: transparent; overflow-x:hidden; }

  .bg-gradient,
  .bg-noise{

    left: 0 !important;
    right: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    top: 0 !important;
    bottom: 0 !important;

    width: var(--keyart-w) !important;

    transform: none !important;

  }

  .battle-shell{
    max-width: calc(var(--keyart-w) - (var(--ui-pad) * 2));
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(8px + env(safe-area-inset-top));
  }
}
body{
  font-family: "Noto Sans JP", sans-serif;
}