*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none; /* 意図しないスクロール・ジェスチャーを無効化 */
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: radial-gradient(circle at top, #1a2a3a, #050814 60%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画面全体を使うラッパー（子は縦1列。横並びだと #game-container 以外が幅を奪って枠が潰れる） */
#game-wrapper {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/*
  論理 480×720（2:3）をビューポートに内接して最大表示＝キャンバスを等倍スケールしたのと同じ。
*/
#game-container {
  position: relative;
  container-type: size;
  width: min(100vw, calc(100vh * 2 / 3));
  width: min(100vw, calc(100dvh * 2 / 3));
  max-width: 100vw;
  aspect-ratio: 2 / 3;
  max-height: 100vh;
  max-height: 100dvh;
  flex-shrink: 0;
  overflow: hidden;
}

/* キャンバス自体の論理サイズは属性 width/height=480/720 に固定。
   表示サイズのみ CSS でスケーリングする。 */
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* キャンバス上のスクロールを完全に無効化 */
  will-change: transform;
}

/* 衝突時：ダメージに応じた画面端フラッシュ（キャンバス直上・HUDより下） */
#screen-edge-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.06s ease-out;
}

/* UI オーバーレイ（ターン表示など） */
#ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  gap: 8px;
}

#score-indicator {
  background: rgba(0, 0, 0, 0.6);
  color: #ffdf7a;
  padding: 1.2cqh 3cqw;
  border-radius: 999px;
  font-size: 3.5cqw;
  font-weight: bold;
  letter-spacing: 0.05em;
  box-shadow: 0 0.3cqh 1cqw rgba(0,0,0,0.5);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.1s ease-out;
}

/* スコア更新時のパルスアニメーション */
.score-pulse {
  animation: score-indicator-pulse 0.25s ease-out;
}

@keyframes score-indicator-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: #fff; }
  100% { transform: scale(1); }
}

#turn-indicator {
  background: rgba(0, 0, 0, 0.6);
  color: #f5f5f5;
  padding: 1.2cqh 2.5cqw;
  border-radius: 999px;
  font-size: 3.2cqw;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* スコアバランスメーター */
/* 
  スコアバランスメーター 
*/
#score-meter-container {
  width: 90%;
  height: 3cqh;
  background: #1a1a1a;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 0.4cqw solid rgba(255, 255, 255, 0.2);
  margin-top: 0.6cqh;
  pointer-events: none;
  box-shadow: 0 0 2cqw rgba(0, 0, 0, 0.6);
}

#score-meter-bar {
  display: flex;
  width: 100%;
  height: 100%;
}

#score-meter-fill-human {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #112233, #2bd2ff);
  transition: width 0.4s ease-out;
  box-shadow: inset 0 0 1.5cqw rgba(43, 210, 255, 0.3);
}

#score-meter-fill-cpu {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #ff4f4f, #331111);
  transition: width 0.4s ease-out;
  box-shadow: inset 0 0 1.5cqw rgba(255, 79, 79, 0.3);
}

#score-meter-marker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1cqw;
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 0 1.5cqw rgba(255, 255, 255, 1);
  z-index: 2;
  transition: left 0.4s ease-out;
}

/* 持ち球と得点のコンテナ */
#shots-status-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96%;
  gap: 2cqw;
  pointer-events: none;
  margin-top: 0.6cqh;
}

.shots-dots {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5cqw;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.shots-dots:first-of-type {
  justify-content: flex-start;
}

.shot-dot {
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  border: 0.3cqw solid rgba(255, 255, 255, 0.45);
  box-sizing: border-box;
  flex-shrink: 1;
  transition: all 0.3s ease;
}

.shot-dot.human {
  background: #2bd2ff;
  box-shadow: 0 0 10px rgba(43, 210, 255, 0.95), 0 0 3px #fff;
}

.shot-dot.cpu {
  background: #ff4f4f;
  box-shadow: 0 0 10px rgba(255, 79, 79, 0.95), 0 0 3px #fff;
}

.shot-dot.empty {
  background: rgba(40, 45, 60, 0.85);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* リザルト画面オーバーレイ */
#result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* ボス撃破ガチャ（リザルトより手前） */
.boss-gacha-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(60, 40, 100, 0.5),
    rgba(0, 0, 0, 0.94)
  );
  z-index: 60;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.boss-gacha-panel {
  max-width: 92%;
  width: 42rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqh;
  padding: 2cqh 3cqw 2.5cqh;
  text-align: center;
}

.boss-gacha-panel h2 {
  margin: 0;
  font-size: 5.5cqw;
  color: #ffcf4a;
  text-shadow: 0 0 18px rgba(255, 207, 74, 0.45);
}

.boss-gacha-hint {
  margin: 0;
  font-size: 3.2cqw;
  color: rgba(200, 220, 255, 0.92);
  line-height: 1.45;
  min-height: 2.8em;
}

.boss-gacha-reel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqh;
  padding: 1.5cqh 0;
}

.boss-gacha-reel-ring {
  width: min(38vw, 200px);
  height: min(38vw, 200px);
  border-radius: 50%;
  padding: 0.5rem;
  background: conic-gradient(
    from 220deg,
    #ffcf4a,
    #7cf1ff,
    #c78cff,
    #ff7bac,
    #ffcf4a
  );
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.12),
    0 0 28px rgba(124, 241, 255, 0.25);
  animation: boss-gacha-ring-spin 2.8s linear infinite;
}

.boss-gacha-reel.is-stopped .boss-gacha-reel-ring {
  animation-play-state: paused;
}

@keyframes boss-gacha-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.boss-gacha-reel-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #0a0e18;
  border: 3px solid rgba(0, 0, 0, 0.35);
}

.boss-gacha-reel-img.boss-gacha-flash {
  animation: boss-gacha-pop 0.45s ease-out;
}

@keyframes boss-gacha-pop {
  0% {
    transform: scale(0.88);
    filter: brightness(1.6);
  }
  55% {
    transform: scale(1.06);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.boss-gacha-reel-name {
  font-size: 4.2cqw;
  font-weight: 800;
  color: #fff;
  min-height: 1.35em;
  letter-spacing: 0.02em;
  transition: transform 0.08s ease-out;
}

.boss-gacha-result {
  flex-direction: column;
  align-items: center;
  gap: 0.6cqh;
  margin-top: 0.5cqh;
}

.boss-gacha-result-img {
  width: min(28vw, 120px);
  height: min(28vw, 120px);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffcf4a;
  box-shadow: 0 0 16px rgba(255, 207, 74, 0.35);
}

.boss-gacha-result-name {
  font-size: 4cqw;
  font-weight: 900;
  color: #7cf1ff;
}

.boss-gacha-result-nick {
  font-size: 3cqw;
  color: rgba(255, 255, 255, 0.75);
}

#boss-gacha-ok-btn {
  margin-top: 1cqh;
}

/* 先攻発表・フィールド選択（ゲーム枠内） */
#first-turn-overlay,
#field-select-overlay,
#player-count-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 25;
  pointer-events: auto;
}

.player-count-btn-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2cqh, 18px);
  width: 100%;
  margin: clamp(8px, 1.5cqh, 16px) 0;
}

.player-count-main-btn {
  width: 100%;
  min-height: clamp(52px, 14cqh, 88px);
  font-size: clamp(1rem, 4.2cqw, 1.35rem);
  font-weight: 800;
}

#btn-player-count-back {
  margin-top: clamp(10px, 2cqh, 16px);
  width: 100%;
}

/* タイトル：ゲーム枠＝論理 480×720 に対し「一つの倍率」で全体を拡大縮小（タイトルだけ cqw が変わる表現を避ける） */
#title-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.88);
  z-index: 25;
  pointer-events: auto;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  container-type: size;
  container-name: title-screen;
}

/* 480×720 のとき 16px 相当になるよう幅・高さのどちらか狭い方に合わせる＝全体が等倍ズーム */
.title-unified-scale-root {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 極小枠でも読める下限。上限制は幅・高さの短い方（＝480:720 内接と同じ比率） */
  font-size: max(9px, min(calc(100cqw / 30), calc(100cqh / 45)));
}

.title-overlay-surface {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0.35em 0.45em;
  overflow: hidden;
}

.title-footer {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0.5em 0.6em max(0.35em, env(safe-area-inset-bottom, 0));
  text-align: center;
  font-size: 0.88em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(210, 225, 245, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}

.ranking-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 28;
  pointer-events: auto;
  padding: 2cqh 2cqw;
  box-sizing: border-box;
}

.ranking-panel {
  width: min(96%, 30rem);
  max-height: 88cqh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ranking-hint {
  font-size: 3.2cqw;
  color: #ccc;
  margin-bottom: 2cqh;
  text-align: center;
}

.ranking-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5cqh;
  margin-bottom: 2cqh;
  padding: 0 1.5cqw;
  pointer-events: auto;
}

.ranking-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5cqw;
}

.ranking-tab-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #aaa;
  padding: 0.8cqh 2.5cqw;
  border-radius: 6px;
  font-size: 3.2cqw;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.ranking-tab-btn.active {
  background: #ffdf7a;
  color: #000;
  border-color: #ffdf7a;
  box-shadow: 0 0 1.5cqw rgba(255, 223, 122, 0.4);
  font-weight: bold;
}

.ranking-list-container {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1cqh 0.5cqw;
  scrollbar-width: thin;
}

.ranking-stage-group {
  margin-bottom: 2.5cqh;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  overflow: hidden;
}

.ranking-stage-title {
  color: #ffdf7a;
  font-size: 3.6cqw;
  font-weight: bold;
  padding: 1cqh 2cqw;
  background: rgba(255, 223, 122, 0.1);
}

.ranking-entry-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(2.8rem, max-content) auto;
  align-items: center;
  gap: 0 0.5cqw;
  padding: 0.8cqh 2cqw;
  font-size: 3.2cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ranking-entry-row:last-child { border-bottom: none; }

.ranking-rank {
  color: #888;
  font-size: 0.9em;
  font-weight: bold;
}
.rank-1 .ranking-rank { color: #ffd700; text-shadow: 0 0 1cqw rgba(255,215,0,0.4); }
.rank-2 .ranking-rank { color: #c0c0c0; }
.rank-3 .ranking-rank { color: #cd7f32; }

.ranking-name-cell {
  min-width: 0;
  padding: 0 0.5cqw 0 1cqw;
}

.ranking-player-name {
  color: #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ranking-level {
  text-align: center;
  font-size: 0.82em;
  color: #9fd4ff;
  white-space: nowrap;
}

.ranking-score-val {
  text-align: right;
  color: #fff;
  font-family: monospace;
  padding-left: 0.5cqw;
}

.ranking-entry-meta {
  font-size: 0.72em;
  color: #666;
  margin-top: 0.15em;
}

.ranking-error {
  min-height: 1.2em;
  font-size: 3cqw;
  color: #ff9a9a;
  margin: 0 0 1cqh;
}

#btn-ranking-close {
  flex-shrink: 0;
  margin-top: 0.5cqh;
}

/* マッチ決着時のランキング登録ダイアログ（ゲーム枠内。fixed は viewport 基準でズレる） */
.ranking-register-overlay {
  position: absolute;
  inset: 0;
  z-index: 65;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0))
    max(12px, env(safe-area-inset-right, 0))
    max(12px, env(safe-area-inset-bottom, 0))
    max(12px, env(safe-area-inset-left, 0));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.ranking-register-dialog {
  width: min(92%, 22rem);
  /* コンテナ（2:3 ゲーム枠）の高さ基準。vw/vh は画面全体になり枠からはみ出す */
  max-height: min(96%, calc(100% - 16px));
  max-height: min(96cqh, calc(100cqh - 16px));
  overflow-y: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.ranking-register-dialog h2 {
  margin-bottom: 1.2cqh;
}

.ranking-register-summary {
  margin: 0 0 1.4cqh;
  font-size: 3.4cqw;
  line-height: 1.55;
  color: rgba(230, 240, 255, 0.95);
  white-space: pre-line;
}

.ranking-register-name-label {
  display: block;
  text-align: left;
  font-size: 3cqw;
  margin-bottom: 0.5cqh;
  color: rgba(200, 220, 255, 0.85);
}

.ranking-register-name-input {
  width: 100%;
  padding: 1.2cqh 2.5cqw;
  border-radius: 2cqw;
  border: 0.15cqw solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 20, 40, 0.92);
  color: #fff;
  font-size: 3.6cqw;
  box-sizing: border-box;
  margin-bottom: 1cqh;
}

.ranking-register-status {
  min-height: 1.3em;
  font-size: 3cqw;
  color: #9de8c8;
  margin: 0 0 1.2cqh;
}

.ranking-register-actions {
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  margin-bottom: 0.5cqh;
}

.ranking-register-close-btn {
  width: 100%;
  margin-top: 0.5cqh;
}

/* プレイヤー交代：盤面を見せる（全面暗幕なし。タッチはここで受けて誤操作防止） */
#turn-transition-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 25;
  pointer-events: auto;
}

#field-select-panel h2 {
  font-size: 6cqw;
  margin-bottom: 1.5cqh;
  color: #ffcf4a;
}

#turn-transition-panel p {
  margin: 3cqh 0;
  font-size: 4cqw;
  line-height: 1.6;
}

#first-turn-pick-row {
  display: none;
  flex-direction: column;
  gap: 1.2cqh;
  width: 88%;
  max-width: none;
  margin: 0.8cqh 0 2cqh;
}

#first-turn-pick-row .first-turn-pick-btn {
  width: 100%;
}

#first-turn-pick-row .first-turn-pick-btn.selected {
  outline: 0.6cqw solid #ffcf4a;
  outline-offset: 0.4cqw;
}

.field-select-actions {
  display: flex;
  flex-direction: row;
  gap: 2cqw;
  margin-top: 2.5cqh;
  align-items: stretch;
}

.field-select-actions .turn-order-btn {
  flex: 1;
  min-width: 0;
}

#btn-game-start {
  margin-top: 2.5cqh;
}

/* --- フィールド選択リスト --- */
.field-select-panel-wide {
  max-width: none;
  width: 94%;
  max-height: 88cqh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.field-select-hint {
  font-size: 3cqw;
  opacity: 0.88;
  margin: 0 0 1.5cqh;
  line-height: 1.4;
}

.field-select-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  padding-right: 1cqw;
}

.field-select-item {
  text-align: left;
  width: 100%;
  padding: 1.5cqh 3cqw;
  border-radius: 2.5cqw;
  border: 0.4cqw solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f5f5;
  cursor: pointer;
  display: flex;
  flex-direction: row; /* 横並びにする */
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.field-select-info {
  display: flex;
  flex-direction: column;
  gap: 0.4cqh;
  flex: 1;
}

.field-select-scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 2.8cqw;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.6cqh 1.2cqw;
  border-radius: 1.5cqw;
  min-width: 22cqw;
}

.score-label {
  opacity: 0.6;
  font-size: 2.4cqw;
  margin-right: 0.5cqw;
}

.score-val {
  font-weight: bold;
  color: #fff;
}

.score-crown {
  font-size: 4cqw;
  filter: drop-shadow(0 0 0.5cqw #ffcf4a);
  margin-top: 2px;
}

.field-select-item.selected {
  border-color: #ffcf4a;
  box-shadow: 0 0 2cqw rgba(255, 207, 74, 0.3);
  background: rgba(255, 207, 74, 0.08);
}

.field-select-name {
  font-weight: 800;
  font-size: 3.8cqw;
  color: #ffcf4a;
}

.field-select-meta {
  font-size: 2.8cqw;
  opacity: 0.8;
}

/* --- ステージエディター --- */
#stage-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #050814;
  display: none;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

#stage-editor-layout {
  display: grid;
  grid-template-columns: 80px 1fr 300px;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  gap: 15px;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  #stage-editor-layout {
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr;
  }
  #stage-editor-toolbar {
    grid-column: 1 / -1;
    flex-direction: row !important;
    height: auto !important;
  }
}

#stage-editor-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px 5px;
  background: rgba(15, 25, 45, 0.95);
  border-radius: 12px;
  border: 1px solid rgba(255, 207, 74, 0.25);
  height: 100%;
}

.stage-editor-toolbar-label {
  font-size: 0.7rem;
  color: #a8c4e8;
  margin-bottom: 5px;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

@media (max-width: 900px) {
  .stage-editor-toolbar-label {
    writing-mode: horizontal-tb;
  }
}

#stage-editor-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  overflow: hidden;
  padding: 10px;
}

#stage-editor-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 480 / 720;
  touch-action: none;
  cursor: crosshair;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  background: #10233b;
}

#stage-editor-sidebar {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  background: rgba(10, 18, 32, 0.95);
  border-radius: 15px;
  border: 1px solid rgba(255, 207, 74, 0.2);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.editor-tool-btn {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(40, 60, 90, 0.8);
  color: #e8f0ff;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
}

.editor-tool-btn.selected {
  border-color: #ffcf4a;
  background: rgba(255, 207, 74, 0.2);
  color: #ffcf4a;
  box-shadow: 0 0 10px rgba(255, 207, 74, 0.3);
}

.editor-tool-btn.danger {
  border-color: rgba(255, 100, 100, 0.5);
  color: #ffaaaa;
  margin-top: auto;
}

/* ギミック用カラー */
.editor-tool-btn[data-tool="sand"].selected {
  border-color: #ffd27c;
  background: rgba(160, 120, 40, 0.4);
  color: #ffd27c;
  box-shadow: 0 0 10px rgba(160, 120, 40, 0.6);
}
.editor-tool-btn[data-tool="ice"].selected {
  border-color: #7ce8ff;
  background: rgba(40, 130, 200, 0.4);
  color: #7ce8ff;
  box-shadow: 0 0 10px rgba(40, 130, 200, 0.6);
}
.editor-tool-btn[data-tool="heal"].selected {
  border-color: #7cff9d;
  background: rgba(40, 180, 80, 0.4);
  color: #7cff9d;
  box-shadow: 0 0 10px rgba(40, 180, 80, 0.6);
}

#stage-editor-sidebar h3 {
  margin: 12px 0 8px;
  font-size: 0.95rem;
  color: #ffcf4a;
}

#stage-editor-sidebar h3:first-child {
  margin-top: 0;
}

.editor-label {
  display: block;
  font-size: 0.72rem;
  color: #9cb8d8;
  margin-top: 8px;
  margin-bottom: 4px;
}

.editor-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0b1424;
  color: #f5f5f5;
  font-size: 0.9rem;
}

.editor-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.editor-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* エディター内のみ、巨大な Viewport 単位を上書き */
#stage-editor-sidebar .turn-order-btn {
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  line-height: 1.25;
  height: auto;
  min-height: 0;
  flex: none;
}

#result-panel {
  background: linear-gradient(135deg, #0a1428 0%, #1a2a4a 100%);
  border: 0.4cqw solid #ffcf4a;
  border-radius: 6cqw;
  padding: 5cqw;
  text-align: center;
  color: #f5f5f5;
  box-shadow: 0 0 10cqw rgba(255, 207, 74, 0.5);
  width: 88%;
  max-width: none;
}

#result-panel h2 {
  margin: 0 0 4cqh;
  font-size: 8cqw;
  color: #ffcf4a;
  text-shadow: 0 0 4cqw rgba(255, 207, 74, 0.6);
  font-weight: 900;
}

#result-scores {
  display: flex;
  flex-direction: column;
  gap: 2cqh;
  margin-bottom: 5cqh;
  padding: 3cqw;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3cqw;
}

.result-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.result-score-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35cqh;
  min-width: 0;
}

.result-score-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.result-survival-count {
  display: none;
  font-size: 2.85cqw;
  font-weight: 800;
  color: #b3d7ff;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  transform-origin: 100% 50%;
}

.result-survival-count.is-zero {
  opacity: 0.62;
}

.result-score-row:nth-child(2) .result-survival-count {
  color: #ffc8d8;
}

.result-survival-count.result-survival-count-ding-human {
  animation: result-survival-count-pulse-human 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-survival-count.result-survival-count-ding-cpu {
  animation: result-survival-count-pulse-cpu 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes result-survival-count-pulse-human {
  0% {
    transform: scale(1);
    color: #b3d7ff;
  }
  45% {
    transform: scale(1.12);
    color: #e8fbff;
    text-shadow: 0 0 0.8cqw rgba(43, 210, 255, 0.65);
  }
  100% {
    transform: scale(1);
    color: #b3d7ff;
    text-shadow: none;
  }
}

@keyframes result-survival-count-pulse-cpu {
  0% {
    transform: scale(1);
    color: #ffc8d8;
  }
  45% {
    transform: scale(1.12);
    color: #ffe8f0;
    text-shadow: 0 0 0.8cqw rgba(255, 140, 160, 0.65);
  }
  100% {
    transform: scale(1);
    color: #ffc8d8;
    text-shadow: none;
  }
}

.result-score-row .label {
  font-size: 4cqw;
  color: #ccc;
}

.result-score-row .value {
  display: inline-block;
  font-size: 8cqw;
  font-weight: 900;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  transform-origin: 50% 55%;
  vertical-align: baseline;
}

.result-score-row .unit {
  font-size: 3cqw;
  margin-left: 1cqw;
  color: #aaa;
}

/* リザルト：残留加点のたびに得点数字が弾ける */
@keyframes result-score-bump-human {
  0% {
    transform: scale(1);
    filter: brightness(1);
    color: #fff;
    text-shadow: none;
  }
  40% {
    transform: scale(1.32);
    filter: brightness(1.45);
    color: #e8fbff;
    text-shadow: 0 0 1cqw #7ae8ff, 0 0 2.6cqw rgba(43, 210, 255, 0.85);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
    color: #fff;
    text-shadow: none;
  }
}

@keyframes result-score-bump-cpu {
  0% {
    transform: scale(1);
    filter: brightness(1);
    color: #fff;
    text-shadow: none;
  }
  40% {
    transform: scale(1.32);
    filter: brightness(1.45);
    color: #ffe8f0;
    text-shadow: 0 0 1cqw #ff9ab0, 0 0 2.6cqw rgba(255, 120, 140, 0.85);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
    color: #fff;
    text-shadow: none;
  }
}

.result-score-row .value.result-score-pop-human {
  animation: result-score-bump-human 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-score-row .value.result-score-smooth-pulse {
  animation: result-score-tick-pulse 0.12s ease-out;
}

@keyframes result-score-tick-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

#result-round-summary {
  font-size: 4.5cqw;
  font-weight: 700;
  color: #c5d8f0;
  margin-bottom: 1.5cqh;
  min-height: 1.2em;
  line-height: 1.35;
}

.result-match-score {
  font-size: 10cqw;
  font-weight: 900;
  font-family: "Courier New", Courier, monospace;
  color: #ffcf4a;
  letter-spacing: 0.08em;
  margin-bottom: 2.5cqh;
  text-shadow: 0 0 4cqw rgba(255, 207, 74, 0.5);
}

#result-winner-text {
  font-size: 10cqw;
  font-weight: 900;
  margin-bottom: 5cqh;
  color: #ff8a4a;
  text-shadow: 0 0 6cqw rgba(255, 138, 74, 0.8);
  animation: winner-pulse 1s infinite alternate;
}

#result-winner-text.match-final-champion {
  color: #7affc8;
  text-shadow: 0 0 6cqw rgba(122, 255, 200, 0.65);
}

@keyframes winner-pulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.1); filter: brightness(1.2); }
}

#result-ok-btn {
  border: none;
  outline: none;
  padding: 3cqh 6cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffcf4a, #ff8a4a);
  color: #222;
  font-size: 4.5cqw;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0.8cqh 0 #b35900;
  transition: transform 0.1s, box-shadow 0.1s;
}

#result-ok-btn:hover {
  filter: brightness(1.2);
}

/* 先攻後攻ルーレット・選択（タイプ選択のあと） */
#roulette-overlay,
#turn-order-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  z-index: 12;
  pointer-events: auto;
}

#turn-order-overlay {
  z-index: 13;
}

/* 
  共通パネルスタイル
  px, rem を廃止し、cqw/cqh でスケーリング
*/
.pre-game-panel {
  width: 90%;
  max-width: none;
  background: linear-gradient(160deg, #0d1830 0%, #152a48 100%);
  border: 0.4cqw solid rgba(255, 207, 74, 0.55);
  border-radius: 4cqw;
  padding: 5cqw 4cqw;
  text-align: center;
  color: #f5f5f5;
  box-shadow: 0 2cqh 8cqw rgba(0, 0, 0, 0.65);
}

.pre-game-panel h2 {
  margin: 0 0 2cqh;
  font-size: 6cqw;
  color: #ffcf4a;
  font-weight: 900;
  text-shadow: 0 0 3cqw rgba(255, 207, 74, 0.35);
}

.pre-game-panel p {
  margin: 0 0 2cqh;
  font-size: 3.8cqw;
  line-height: 1.5;
}

#roulette-face {
  margin: 3cqh 0;
  font-size: 8cqw;
  font-weight: 900;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3cqw;
  background: rgba(0, 0, 0, 0.35);
  border: 0.2cqw solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.04em;
}

#roulette-hint {
  font-size: 3.2cqw;
  opacity: 0.9;
  margin-bottom: 0;
}

#turn-order-human-buttons {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

/* タイトルパネル（index の #title-panel のみ使用） */
#title-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

#game-title {
  color: #ffcf4a;
  text-shadow: 0 0 0.12em rgba(255, 207, 74, 0.85),
    0 0 0.35em rgba(255, 207, 74, 0.35);
  width: 100%;
  text-align: center;
  font-weight: 900;
}

/* タイトル：パネルは広く。ボタンは固定気味＋下に予備域（将来ボタン追加用） */
#title-overlay #title-panel.pre-game-panel {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0.45em 0.5em;
  border: 0.12em solid rgba(255, 207, 74, 0.55);
  border-radius: 0.55em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.15em 0.45em rgba(0, 0, 0, 0.65);
}

#title-overlay #game-title {
  flex-shrink: 0;
  font-size: 2.75em;
  margin: 0.15em 0 0.35em;
  line-height: 1.06;
}

/* ボタンは残り高さを均等分割（タイトルと同じ em 基準＝一体スケール） */
#title-overlay .title-menu-block {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding-bottom: 0.25em;
  align-items: stretch;
  overflow: hidden;
}

#title-overlay .title-menu-buttons {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-height: 0;
  justify-content: space-evenly;
  align-items: stretch;
  overflow: hidden;
}

#title-overlay .title-panel-slogan {
  flex-shrink: 0;
  margin: 0;
  padding: 0.32em 0.45em;
  text-align: center;
  font-size: 1.45em;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  color: #fff;
  background: #c62828;
  border-radius: 0.4em;
  box-shadow: 0 0.12em 0 rgba(0, 0, 0, 0.35);
}

#title-overlay .title-menu-block .turn-order-btn {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 0.15em 0.5em;
  font-size: 2em;
  line-height: 1.15;
  border-radius: 0.45em;
  box-shadow: 0 0.2em 0 #8a5a00;
  font-weight: 800;
}

#title-overlay .title-menu-block .turn-order-btn.secondary {
  box-shadow: 0 0.2em 0 #0d5a7a;
}

.title-menu-block {
  display: flex;
  flex-direction: column;
  gap: 3cqh;
  width: 100%;
  max-width: min(100%, 18rem);
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

.title-menu-sub.title-menu-block {
  max-width: min(100%, 18rem);
}

.turn-order-btn {
  width: 100%;
  border: none;
  border-radius: 3cqw;
  padding: 2.5cqh 3cqw;
  font-size: 4cqw;
  font-weight: 800;
  cursor: pointer;
  color: #0d1830;
  line-height: 1.4;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.turn-order-btn.primary {
  background: linear-gradient(180deg, #ffe082 0%, #ffcf4a 40%, #e6a020 100%);
  box-shadow: 0 4px 0 #8a5a00;
}

.turn-order-btn.secondary {
  background: linear-gradient(180deg, #b8e8ff 0%, #2bd2ff 45%, #1a8fc4 100%);
  color: #0a1a28;
  box-shadow: 0 4px 0 #0d5a7a;
}

.turn-order-btn:active {
  transform: translateY(2px);
  filter: brightness(0.95);
}

#turn-order-cpu-thinking,
#turn-order-cpu-result {
  display: none;
  font-size: 4cqw;
  font-weight: 700;
  margin-top: 1.5cqh;
}

#first-turn-result {
  font-size: 8cqw;
  margin: 3cqh 0;
  color: #ffcf4a;
  font-weight: 900;
  text-shadow: 0 0 3cqw rgba(255, 207, 74, 0.4);
  line-height: 1.2;
}

#shot-select-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end; /* 下端に配置 */
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  z-index: 30;
  pointer-events: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

#shot-select-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 66cqh;
  border-radius: 2.5cqw 2.5cqw 0 0;
  display: flex;
  flex-direction: column;
  padding: 0.5cqh max(1cqw, env(safe-area-inset-right, 0))
    max(0.8cqh, env(safe-area-inset-bottom, 0)) max(1cqw, env(safe-area-inset-left, 0));
  background: linear-gradient(
    to bottom,
    rgba(10, 20, 40, 0.6) 0%,
    rgba(10, 20, 40, 0.98) 100%
  );
  border: none;
  box-shadow: 0 -0.8cqh 4cqw rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(0.5cqw);
  overflow: hidden;
}

#shot-select-title {
  margin: 0.3cqh 0;
  font-size: 4.4cqw;
  color: #ffcf4a;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 1cqw rgba(255, 207, 74, 0.5);
  flex-shrink: 0;
  padding: 0 0.5cqw;
}

.shot-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1cqw;
  padding: 0.3cqh 0.4cqw;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.shot-select-item {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  background: rgba(40, 60, 90, 0.85);
  border: 0.2cqw solid rgba(255, 207, 74, 0.25);
  border-radius: 0.85cqw;
  padding: 0.55cqh 0.9cqw;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1cqw;
  transition: background 0.1s ease;
  text-align: left;
  overflow-x: hidden;
  overflow-y: visible;
}

.shot-select-item:hover {
  border-color: #ffcf4a;
  background: rgba(60, 80, 110, 0.9);
}

.shot-select-item .type-portrait {
  width: 10cqw;
  height: 10cqw;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  overflow: hidden;
  border: 0.25cqw solid rgba(255, 255, 255, 0.3);
  background: #000;
}

.shot-select-item .type-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-select-item .shot-info-main {
  display: flex;
  flex-direction: column;
  gap: 0.35cqh;
  min-width: 0;
  flex: 1;
  overflow: visible;
  align-self: stretch;
}

.shot-select-item .type-name {
  font-size: 4.1cqw;
  font-weight: 900;
  color: #ffcf4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0.15cqh 0.4cqw rgba(0, 0, 0, 0.8);
}

/* グローバル .type-ability-line の nowrap/ellipsis を必ず打ち消す */
.shot-select-item .type-ability-line {
  font-size: 2.9cqw;
  color: #c9e8ff;
  font-weight: 700;
  line-height: 1.38;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 開始前のタイプ選択 UI */
#type-select-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.92));
  z-index: 10;
  pointer-events: auto;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  box-sizing: border-box;
  /* body の touch-action:none を打ち消し、縦スクロール・スワイプを許可 */
  touch-action: pan-y;
}

#type-select-panel {
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    to bottom,
    rgba(5, 10, 22, 0.4) 0%,
    rgba(5, 10, 22, 0.95) 100%
  ); /* 透過させてフィールドを見せる */
  border-radius: 0;
  padding: 0.8cqh 2.5cqw 1cqh;
  color: #f5f5f5;
  box-shadow: none;
  pointer-events: auto;
  touch-action: pan-y;
}

#type-select-panel h2 {
  margin: 0 0 1cqh;
  font-size: 5cqw;
  flex-shrink: 0;
  color: #ffcf4a;
  text-shadow: 0 0 3cqw rgba(255, 207, 74, 0.4);
  text-align: center;
}

#type-select-panel p {
  margin: 0 0 1.5cqh;
  font-size: 3.2cqw;
  line-height: 1.35;
  opacity: 1;
  flex-shrink: 0;
  text-align: center;
}

#cpu-strategy-row {
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
  margin-bottom: 1.5cqh;
  width: 100%;
  flex-shrink: 0;
}

#cpu-strategy-label {
  font-size: 2.8cqw;
  color: #ffffff;
  font-weight: 700;
}

#cpu-strategy-select {
  width: 100%;
  font-size: 2.8cqw;
  padding: 1.5cqh 2.2cqw;
  border-radius: 1.5cqw;
  border: 0.4cqw solid rgba(255, 207, 74, 0.5);
  background: #0b1424;
  color: #f5f5f5;
  cursor: pointer;
  pointer-events: auto;
}

#type-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 1.2cqw;
  margin-bottom: 1.2cqw;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 207, 74, 0.45) rgba(0, 0, 0, 0.25);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#type-list::-webkit-scrollbar {
  width: 10px;
}

#type-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

#type-list::-webkit-scrollbar-thumb {
  background: rgba(255, 207, 74, 0.35);
  border-radius: 5px;
}

#type-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 207, 74, 0.55);
}

/* おはじきタイプ選択スケーリング - 重複分を削除して統合 */

.type-card {
  position: relative;
  background: radial-gradient(circle at top, rgba(21, 37, 59, 0.8), rgba(11, 20, 36, 0.8));
  border-radius: 2.5cqw;
  padding: 0.8cqw;
  border: 0.2cqw solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5cqw;
  min-width: 0;
  min-height: 0;
  transition: none;
  box-shadow: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  /* pan-y だとブラウザが縦ドラッグを優先しやすい。manipulation でタップを立てやすくしつつ親の縦スクロールは維持 */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.type-card.selected {
  border-color: #ffcf4a;
  box-shadow: inset 0 0 10px rgba(255, 207, 74, 0.3);
  background: radial-gradient(circle at top, rgba(37, 59, 85, 0.9), rgba(20, 31, 51, 0.9));
}

.type-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

.type-card-stock {
  position: absolute;
  left: 0.2cqw;
  top: 0.2cqw;
  padding: 0.25cqw 0.65cqw;
  font-size: 2.6cqw;
  font-weight: 900;
  color: #0b1424;
  background: linear-gradient(135deg, #ffcf4a, #ffb347);
  border-radius: 1cqw;
  box-shadow: 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.45);
  z-index: 4;
  line-height: 1.2;
}

.type-pick-check {
  position: absolute;
  right: 1cqw;
  bottom: 1cqw;
  width: 4.5cqw;
  height: 4.5cqw;
  background: #ffcf4a;
  color: #0b1424;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5cqw;
  font-weight: 900;
  box-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.type-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4cqw;
}

.type-name {
  font-size: 3.5cqw;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.type-ability-line {
  font-size: 2.4cqw;
  color: #a8d4ff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.type-card .type-portrait {
  width: 14cqw;
  height: 14cqw;
  border-radius: 50%;
  overflow: hidden;
  border: 0.6cqw solid rgba(255, 255, 255, 0.2);
  background: #000;
  flex-shrink: 0;
}

.type-card .type-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイプカード内ステータス */
.type-card .type-stats {
  margin-top: 0.8cqw;
  width: 100%;
}

.type-card .stat-row {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 0.2cqw;
}

.type-card .stat-label {
  width: 8cqw;
  font-size: 1.6cqw;
  font-weight: bold;
  color: #ccc;
  text-align: right;
}

.type-card .stat-bar-track {
  flex: 1;
  height: 1.6cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.type-card .stat-bar-fill {
  height: 100%;
  border-radius: 999px;
}

/* 能力発動トースト */
#ability-toast.ability-toast {
  position: absolute;
  left: 50%;
  bottom: 15cqh;
  transform: translateX(-50%);
  min-width: 50cqw;
  max-width: 92cqw;
  padding: 2cqw 3cqw;
  background: linear-gradient(160deg, rgba(20, 36, 58, 0.95), rgba(8, 14, 28, 0.97));
  border: 0.2cqw solid rgba(255, 207, 74, 0.45);
  border-radius: 2.5cqw;
  box-shadow: 0 1.5cqh 5cqw rgba(0, 0, 0, 0.55);
  z-index: 8;
  pointer-events: none;
  text-align: center;
  opacity: 0;
}

.ability-toast-title {
  font-size: 2.8cqw;
  font-weight: 700;
  color: #ffcf7a;
  letter-spacing: 0.02em;
  margin-bottom: 0.8cqw;
}

.ability-toast-ability {
  font-size: 3.2cqw;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.8cqw;
}

.ability-toast-effect {
  font-size: 2.5cqw;
  color: #b8d9ff;
  line-height: 1.4;
}

/* redundant style removed */

#type-select-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4cqw;
  margin-top: 0.8cqh;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 4px);
}

#type-select-count {
  opacity: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#type-select-confirm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 2cqh;
  background: rgba(0, 0, 0, 0.85);
  padding: 5cqw;
  border-radius: 3cqw;
  border: 0.4cqw solid #ffcf4a;
  box-shadow: 0 2cqh 8cqw rgba(0, 0, 0, 0.8);
  z-index: 20;
  align-items: center;
}

#type-select-reset {
  border: none;
  outline: none;
  padding: 1.5cqh 3cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  font-size: 2.8cqw;
  cursor: pointer;
  width: 100%;
}

#type-select-reset:hover {
  background: rgba(255, 255, 255, 0.2);
}

#type-select-ok {
  border: none;
  outline: none;
  padding: 2cqh 6cqw;
  border-radius: 999px;
  background: rgba(255, 207, 74, 0.9);
  color: #0b1424;
  font-size: 3.5cqw;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0.6cqh 2.5cqw rgba(255, 207, 74, 0.4);
}

#type-select-ok:disabled {
  opacity: 0.4;
  cursor: default;
}

#type-select-ok:not(:disabled):hover {
  background: #ffdf7a;
}