/* =========================================================
   仏教シューター UI / レイアウト（ジョイスティック版・完全版）
   ※レイアウトの行構成はそのまま：1)情報 2)ボスHP 3)プレイ画面 4)操作系
   ・両端の見切れ防止のため、各行に左右パディング（safe-area対応）
   ・スマホでも左右が絶対に見切れないように max-width と余白を調整
   ・ジョイスティック左／Aゲージ＋A/Sボタン右（AゲージはA左端〜S右端いっぱい）
   ========================================================= */

/* -------- Base / Reset -------- */
:root{
  --edge-pad: clamp(10px, 4vw, 20px);     /* 各行 左右の余白 */
  --row-gap:  10px;                       /* 行間（2行目と3行目は詰め気味に） */
  --ui-bg: rgba(20,20,30,.78);
  --ui-border: rgba(255,255,255,.12);

  /* 操作系サイズ */
  --joy-size-min: 140px;
  --joy-size-max: 220px;
  --btn-diam-min: 64px;
  --btn-diam-max: 88px;
  --btn-gap: clamp(10px, 2.4vw, 16px);

  /* ゲージ高 */
  --gauge-h: 12px;
}

@media (pointer:coarse){
  :root{
    --edge-pad: clamp(12px, 5vw, 24px);   /* スマホは少し広め */
  }
}

html,body{
  margin:0; padding:0;
  background:#0b0f1a; color:#e5e7eb;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior:none;
}

/* 画面全体の縦積み（1列目〜4列目） */
#page{
  display:grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--row-gap);
  min-height: 100dvh;
}

/* 行の左右余白（見切れ防止 & safe-area） */
.row-pad{
  padding-left: calc(var(--edge-pad) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--edge-pad) + env(safe-area-inset-right, 0px));
}

/* ---------- 1行目：タイム / スコア / 残機 / ショット名 / サウンド ---------- */
#topBar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
}
#info, #mode{
  background: var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:10px;
  padding:6px 10px;
  font-size: 14px;
}
#lives{
  display:flex; align-items:center; gap:6px;
  background: var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:10px;
  padding:4px 8px;
  min-height: 28px;
}
/* lives の緑丸表示がある場合でも落ち着いた表示に */
#lives .life{
  inline-size:14px; block-size:14px; border-radius:50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset;
  background: #10b981; opacity:.9;
}
#lives .life:not(.on){ opacity:.25; background:transparent; }

#muteBtn{
  appearance:none; cursor:pointer;
  background: linear-gradient(180deg,#1f2937,#0f172a);
  border:1px solid rgba(255,255,255,.2);
  color:#e5e7eb; font-weight:700;
  border-radius:10px; padding:6px 12px;
}

/* ---------- 2行目：ラスボスHPバー（出現まで非表示） ---------- */
#bossbarWrap{
width: 100%;
box-sizing: border-box;
}
#bossbar{
  margin: 0 auto;                 /* 中央寄せ */
  inline-size: min(960px, 100%);
  height: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-top:none; border-radius:0 0 10px 10px;
  overflow:hidden;
  opacity: 0;                      /* 初期は非表示（JSで1に） */
  transition: opacity .25s ease;
}
#bossbar .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7);
  opacity: 0;                      /* 初期は非表示（JSで1に） */
  transition: width .2s linear, opacity .25s ease;
}

/* ---------- 3行目：プレイ画面（キャンバス） ---------- */
/* 見切れ防止：左右余白を含むコンテナに入れて最大幅を制限 */
#stageWrap{
  display:block;
}
#game{
  display:block;
  inline-size: min(960px, 100%);
  block-size: auto;
  aspect-ratio: 16 / 9;          /* 960x540 に合わせる */
  margin: 0 auto;                /* 中央寄せ */
  background:#070910;
  image-rendering: pixelated;
  touch-action:none;
}

/* ---------- 4行目：操作系（左：ジョイスティック／右：Aゲージ＋A/S） ---------- */
#controlsRow{
  display:grid;
  grid-template-columns: 1fr auto;   /* 左は可変、右は内容幅 */
  align-items:center;
  gap: 12px;
}

/* 左：ジョイスティック */
#joypad{
  position: relative;
  width: clamp(var(--joy-size-min), 38vw, var(--joy-size-max));
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 35%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--ui-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  margin-left: 0;   /* 左端に寄せる */
}
#joypad .ring{
  position:absolute; inset:10%;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.18);
}
#joypad .knob{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  inline-size: 36%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.18) inset;
  touch-action:none;
}

/* 右：Aゲージ + A/Sボタン */
#abGroup{
  justify-self: end;                 /* 右寄せ（ご指定） */
  display:flex;
  flex-direction:column;
  align-items: stretch;
  gap: 10px;
  min-width: clamp(240px, 42vw, 360px);  /* 右側が見切れないよう余裕幅 */
  max-width: min(92vw, 420px);
}

/* Aゲージ：A左端〜S右端いっぱい = 親（abGroup）の幅いっぱい */
#asGauge{
  display:flex; align-items:center; gap:8px;
  background: var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:10px;
  padding:6px 8px;
  inline-size: 100%;                 /* 親幅いっぱい */
  min-inline-size: 220px;
}
#asGauge .bar{
  position:relative;
  flex:1;
  block-size: var(--gauge-h);
  background: rgba(255,255,255,.12);
  border-radius:999px; overflow:hidden;
}
#asGaugeFill{
  position:absolute; inset:0 auto 0 0;
  inline-size: 0%;
  background: linear-gradient(90deg,#22d3ee,#a78bfa);
  transition: inline-size .12s linear, width .12s linear;
}
#asGaugeText{
  font-weight:900; font-size:12px; letter-spacing:.06em; opacity:.9;
}

/* A/Sボタン横並び（間に余白） */
#buttons{
  display:flex;
  gap: var(--btn-gap);
  justify-content: space-between;
}
#btnA, #btnS{
  appearance:none; cursor:pointer;
  inline-size: clamp(var(--btn-diam-min), 12vw, var(--btn-diam-max));
  block-size:  clamp(var(--btn-diam-min), 12vw, var(--btn-diam-max));
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color:#111; font-weight:900; font-size: 18px;
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.18) inset;
  touch-action:none;
}
#btnA:active,#btnS:active{ transform: translateY(1px) scale(.98); }

/* --------- 共通ボタンスタイル（他UI） --------- */
.btn{
  appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.15);
  background:#111827; color:#e5e7eb;
  padding:10px 14px; border-radius:12px; font-weight:700;
}
.btn.primary{ background:linear-gradient(180deg,#1f2937,#0f172a); border-color:rgba(255,255,255,.2); }

/* ---------- オーバーレイ系（タイトル／選択／結果） ---------- */
.overlay{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:100;
}
.overlay[hidden]{ display:none !important; }
.panel{
  background: var(--ui-bg);
  backdrop-filter: blur(6px);
  border:1px solid var(--ui-border);
  border-radius:16px;
  padding:20px;
  max-inline-size: min(740px, 94vw);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.title{font-weight:800;font-size:clamp(22px,5.5vw,40px);text-align:center;letter-spacing:.02em;}
.subtitle{opacity:.9;text-align:center;margin:6px 0 12px;}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* キャラクター選択：テキストのみ（画像や丸スウォッチは使わない前提） */
.chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.card{
  border:1px solid rgba(255,255,255,.12);
  background:#0f172a; color:#e5e7eb;
  border-radius:12px; padding:12px; cursor:pointer;
}
.card .row{display:flex;align-items:center;gap:8px;font-weight:700;}
.card .desc{opacity:.9;font-size:13px;margin-top:6px;}
.card .swatch, .card img.char{ display:none !important; } /* 明示的に非表示 */

/* ---------- 小さめ画面での見切れ対策 ---------- */
@media (max-width: 480px){
  #topBar, #bossbarWrap, #controlsRow, #stageWrap{
    /* 各行に左右余白を加算（safe-area含む） */
    padding-left: calc(var(--edge-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--edge-pad) + env(safe-area-inset-right, 0px));
  }
  /* 右側見切れ対策：右側塊に最大幅を設定済みだが、さらに収まり優先 */
  #abGroup{ max-width: 88vw; }
  #asGauge{ min-inline-size: 200px; }
}

/* ---------- Desktop 微調整 ---------- */
@media (pointer:fine){
  #joypad{ max-width: 260px; }
  #abGroup{ min-width: 280px; max-width: 420px; }
}

/* ---------- ボスバーとキャンバスの間隔は狭める（ご指定） ---------- */
#bossbarWrap{ margin-top: 0; }
#stageWrap{ margin-top: 0; }

/* ---------- 画像のドラッグや長押しメニュー抑制 ---------- */
img,a,button,[draggable]{ -webkit-user-drag:none; }
canvas{ touch-action:none; -webkit-touch-callout:none; }

/* ---------- アクセント ---------- */
.big{ font-size:clamp(22px,5vw,36px); font-weight:900; text-align:center; }

/* ---------- 旧D-PadがHTMLに残っていても非表示にして影響を消す ---------- */
#dpad{ display:none !important; }

/* === Aゲージ／A・Sボタンの右端に少し余白を追加（レイアウト不変） === */
:root{
  /* 右端の最小余白（“少し”の見た目：12〜20px程度） */
--edge-gap: clamp(12px, 3vw, 20px);
}

/* 右寄せされている各要素の右側だけ内側に寄せる */
#asGauge,
#btnA,
#btnS{
margin-inline-end: max(var(--edge-gap), env(safe-area-inset-right, 0px));
}

/* 4行目コンテナ名のバリエーションにも安全に余白（存在するものだけ効く） */
#controlsRow,
#controlRow,
#padRow{
padding-right: max(var(--edge-gap), env(safe-area-inset-right, 0px));
box-sizing: border-box;
}

 /* =========================================
    スマホ見切れ対策（レイアウト不変・右端余白）
    - 各行に左右セーフエリア分のパディング
    - Aゲージ/ABグループの右端余白と幅の上限
    - ジョイスティックのサイズをAB群に概ね揃える
   ========================================= */
 @media (pointer:coarse){
   :root{
     /* 端の余白（未定義でも動く） */
     --edge-gap: clamp(12px, 3.5vw, 24px);
     /* ABボタンとゲージ高さの目安（既存値があればそちら優先） */
     --ab-size: var(--ab-size, clamp(56px, 14vw, 76px));
     --ab-gap:  var(--ab-gap,  clamp(8px,  3.5vw, 14px));
     --gauge-h: var(--gauge-h, clamp(22px, 4.5vw, 30px));
   }

   /* 1〜3列目＆4列目の左右にセーフエリア＋余白を付与（見切れ防止） */
   #hudRow,
   #bossbarWrap,
   #gameRow,
   #controlsRow{
     padding-left:  max(var(--edge-gap), env(safe-area-inset-left, 0px));
     padding-right: max(var(--edge-gap), env(safe-area-inset-right, 0px));
     box-sizing: border-box;
     max-width: 100vw; /* 物理幅を超えない */
   }

   /* 2列目のボスバー自体も物理幅内に収める */
   #bossbar{
     max-inline-size: 100%;
   }

   /* 4列目：右側のABクラスターは“右寄せ”のまま、行内に必ず収める */
   #abCluster{
     margin-left: auto;                /* 右寄せ（既存の配置は維持） */
     inline-size: calc(var(--ab-size)*2 + var(--ab-gap)); /* A+S の合計幅 */
     max-inline-size: min(100%, calc(100vw - 2*var(--edge-gap)));
   }

   /* AゲージはABクラスター幅にフィット（右端に寄り過ぎない） */
   #asGauge{
     inline-size: 100%;
     block-size: var(--gauge-h);
     margin-inline-end: 0;  /* 以前の余白上書き（はみ出し防止） */
   }

   /* 4列目全体は“左右２カラム”を維持しつつ、はみ出さない */
   #controlsRow{
     display:flex; 
     justify-content: space-between;
     align-items: center;
     gap: clamp(10px, 3.5vw, 18px);
   }

   /* 左カラム：ジョイスティックのサイズ調整
      - 上端がAゲージ付近、下端がASボタン下端くらいの高さを目安に */
   #joystick{
     inline-size: min(38vw, 260px);
     block-size: calc(var(--gauge-h) + var(--ab-size) + var(--ab-gap));
     touch-action: none;
   }

   /* === ジョイスティックを右方向へ1.5倍（左端固定） === */
   #joystick, .joystick, #dpad{
    transform-origin: left center;
    transform: scaleX(1.5);
  }

   /* 3列目のプレイ画面も左右余白分だけ内側で収める（横見切れ防止） */
  #game{
     max-inline-size: 100%;
     display:block;
     margin-inline: auto;
   }
 }

 /* === Mobile only: D-Pad & A/S ボタン拡大 + 端の見切れ防止 === */
@media (pointer:coarse) {
  /* D-Pad を 1.5倍（左端固定のまま） */
  #dpad {
    /* 既存の size 指定があっても上書きされるように直接サイズを指定 */
    width: calc((var(--dpad-size, 140px)) * 1.5);
    height: calc((var(--dpad-size, 140px)) * 1.5);
    transform-origin: left center;
    /* もし translateY(-50%) を既に使っている場合はそのまま効きます（transform をここでは追加しません） */
  }

  /* A/S ボタンを 1.25倍（見切れ防止のため右へ少し余白も足す） */
  #btnA, #btnS {
    width: calc((var(--ab-size, 72px)) * 1.25);
    height: calc((var(--ab-size, 72px)) * 1.25);
    font-size: clamp(14px, 4.5vw, 18px);
  }

  /* 右端の見切れ防止（安全域＋少し余白） */
  #controlRow4 {
    padding-right: max(16px, env(safe-area-inset-right, 0px) + 12px);
    padding-left:  max(12px, env(safe-area-inset-left,  0px) + 8px);
  }

  /* Aゲージの最大幅も A/S の拡大に追従（A左端〜S右端相当） */
  #asGauge {
    max-inline-size: min(96vw, calc((var(--ab-size, 72px) * 1.25 * 2) + 24px));
  }
}

/* === Mobile only: ジョイスティックを 1.5倍に（A/S は現状維持）=== */
@media (pointer:coarse){
  /* 既存の --joy-size が無い場合は 140px を既定値にして 1.5倍 */
  :root{
    --joy-size-base: var(--joy-size, 140px);
    --joy-size-mobile: calc(var(--joy-size-base) * 1.5);
  }

  /* ジョイスティック本体（想定されるID/クラスをすべてカバー） */
  #joystick,
  .joystick,
  .joy,
  .joypad,
  #dpad.joystick {
    width: var(--joy-size-mobile);
    height: var(--joy-size-mobile);
    aspect-ratio: 1 / 1;
    max-inline-size: min(46vw, var(--joy-size-mobile)); /* 画面見切れ防止 */
    transform-origin: left center; /* 左寄せのまま拡大 */
  }

  /* ノブ（つまみ）も親サイズに追従して拡大 */
  #joystick .knob,
  .joystick .knob,
  .joy .knob,
  .joypad .knob,
  #dpad.joystick .knob {
    width: calc(var(--joy-size-mobile) * 0.44);
    height: calc(var(--joy-size-mobile) * 0.44);
  }

  /* 4列目の左右安全域を少し確保（右は既に対応済みなので左のみ微増） */
  #controlRow4{
    padding-left: max(14px, env(safe-area-inset-left, 0px) + 10px);
  }
}

/* === Aゲージ色のフォールバック（環境差吸収） === */
#asGaugeFill{
  background: linear-gradient(90deg,#22d3ee,#a78bfa);
}

/* === トースト画面ボタンの文字サイズを統一（a.btn も button.btn も同一） === */
#results .btn,
#results a.btn{
  font-size: 16px;   /* 「もう一度」と同一に */
  line-height: 1.1;
}

/* a要素が何らかの上位ルールで無効化されていた場合の保険 */
#results a.btn{
  pointer-events: auto;
}