:root {
  --color-bg: #030407;
  --color-cyan: #2ee6ff;
  --color-magenta: #ff2ee6;
  --color-danger: #ff3b3b;
  --color-hp-ok: #2ee6ff;
  --color-hp-low: #ff3b3b;
  --font-main: "Consolas", "Menlo", "Courier New", monospace;
  --color-lyric-divider: #8a4bff;
  /* 歌詞は1行表示(main.jsのfitLyricLineFontSize()が実測ベースで文字が
     入り切るようフォントサイズを縮小するため、複数行ぶんの高さは不要)。
     BATTLE AREAは固定heightのままにして(canvas内部解像度とワールド座標の
     ズレを避けるため)、曲名/クレジット/歌詞1行の3段が収まる高さのみ確保。
     実機で歌詞が読みにくくなった報告を受け、BATTLE AREA最大化よりも
     曲名/クレジット/歌詞が常に読めることを優先してclamp下限・vh係数を
     戻した(58px/15vh/92px -> 80px/18vh/110px)。 */
  --lyric-bar-height: clamp(80px, 18vh, 110px);
  --font-display: "Chakra Petch", "Futura", "Century Gothic", sans-serif;
  --font-ui: "Rajdhani", "Futura", "Century Gothic", sans-serif;
}

/* DISPLAY FONT(見出し専用): orientation warning英語タイトル/MISSION FAILED
   ・MISSION COMPLETE/PAUSEDのみに使用する角ばったsci-fiディスプレイ書体。
   UI FONT(ボタン/ラベル専用): RESUME/RESTART/QUIT/RETRY/CONTINUE/
   ARTIST PAGE、および各種stats・RANKラベルに使用する引き締まった技術的
   書体。どちらもGoogle Fonts正規配布元(Chakra Petch/Rajdhani、SIL Open
   Font License)から取得したlatinサブセットのみを自己ホストし(不要な
   全weight/全言語グリフは含めない)、production実行時に外部CDNへは一切
   通信しない。stats等の数値(DATA VALUE)は既存のvar(--font-main)
   monospaceを維持し、桁が揃った読みやすさを優先する。 */
@font-face {
  font-family: "Chakra Petch";
  src: url("assets/fonts/chakra-petch-700.woff2?v=20260814c") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("assets/fonts/rajdhani-600.woff2?v=20260814c") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("assets/fonts/rajdhani-700.woff2?v=20260814c") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* iOS Safariのテキスト選択メニュー(「コピー」「選択部分を検索」
   「調べる」)対策。上のグローバル*{user-select:none}だけでは実機で
   このメニュー自体は出てしまう(選択"成立"は防げてもコールアウトの表示は
   別経路のため、-webkit-touch-calloutを個別に持つ要素にしか効かなかった)。
   #game-root配下の全要素に対して明示的に!importantで指定し、HUD/PAUSE/
   RESULT/SURVIVE/歌詞/タイトル画面等どの子要素でも確実に上書きされる
   ようにする。ARTIST PAGEボタン(.artist-page-button、RESULT画面限定)は
   通常タップ(ページ遷移)は引き続き有効なまま、長押しでの文字選択/
   コピーだけをここで禁止する
   (別途pointer-events/touch-actionは変更しない)。 */
#game-root,
#game-root * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  overflow: hidden;
  font-family: var(--font-main);
  color: #e8fbff;
}

#game-root {
  position: relative;
  width: 100vw;
  /* dvh未対応環境向けのフォールバック(先に書く。dvhが使える環境では
     次の宣言で上書きされる)。properties単位でしか解釈できないブラウザは
     dvh宣言そのものを無視して直前の値を保持するため、フォールバックが
     ないとheightがautoのまま(=レイアウト全体が潰れる)事故を防ぐ。 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
}

/* バトル領域: LYRIC BARの高さ分を除いた残り全部。この要素の実描画サイズが
   そのままゲームのワールド座標(state.worldWidth/worldHeight)になるので、
   ここを縮めるだけで自機/敵/弾の可動範囲は自動的に追従する。
   *セレクタで user-select:none は全体に効いているが、iOS Safariは
   -webkit-touch-callout:none を個別に指定しない限り長押しコールアウト
   (テキスト選択/共有メニュー等)を出してしまうため、ここで明示する。
   LYRIC BAR(#lyric-bar、ARTIST PAGEリンク含む)は#battle-areaの外側の
   兄弟要素なのでこの指定の影響を受けない。 */
#battle-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== HUD ===== */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* iPhone横持ちのノッチ/ダイナミックアイランドを避けるセーフエリア対応。
     左paddingはALEXANDRE LIFEが「画面左上」であることを直感的に読める
     よう14px->7pxへ短縮(画面の真の端には接触しない、safe-areaは維持)。 */
  padding: calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0
    calc(7px + env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 20;
  text-shadow: 0 0 6px rgba(46, 230, 255, 0.8);
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--color-cyan);
  opacity: 0.85;
}

.hp-bar {
  width: 38vw;
  max-width: 260px;
  height: 10px;
  border: 1px solid rgba(46, 230, 255, 0.6);
  background: rgba(46, 230, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(46, 230, 255, 0.4) inset;
}

.hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #0aa, var(--color-hp-ok));
  transition: width 0.15s linear, background 0.3s linear;
}

.hp-fill.low {
  background: linear-gradient(90deg, #a00, var(--color-hp-low));
}

/* BARRIER Lv.3到達で最大HPが恒久的に2倍(200%)になっている間だけ付与する
   (Hud.js参照)。バー自体の物理サイズは変えず、金色系のグラデーション+
   淡いglowで「通常の満タンではなく、強化された満タン」であることを
   一目で区別できるようにする。.lowと同時に付与されることはない
   (200%化後は常にhp=maxHpのため、ratioが0.3以下になることはない)。 */
.hp-fill.doubled {
  background: linear-gradient(90deg, #b8860b, #ffd75e);
  box-shadow: 0 0 8px rgba(255, 215, 94, 0.7);
}

/* ALEXIA CODE ARTEMIS(PHASE 2項目22)。ダメージ計算自体が無効化される
   完全無敵状態であることを、巨大なHP数値ではなく明示的なinvincibleフラグ
   経由でHUDへ反映する(main.jsのupdateHudInvincibleState参照)。
   .doubled(BARRIER Lv.3の200%化)より一段明るい金色+常時glowで区別する。 */
.hp-fill.infinite {
  background: linear-gradient(90deg, #d4af37, #fff3c4);
  box-shadow: 0 0 12px rgba(255, 243, 196, 0.9);
}

.hp-text {
  font-size: 11px;
  color: #b9f7ff;
  min-width: 62px;
}

.hp-text.infinite {
  color: #fff3c4;
  text-shadow: 0 0 6px rgba(255, 215, 94, 0.85);
}

/* 次期統合修正PART3: ARTEMIS INFINITY SUITの「∞」記号を"HP"接頭辞より
   明確に大きく見せつつ、LIFEゲージ(.hp-bar、高さ10px)の縦幅は超えない
   範囲に収める。line-height:1+inline-flex中央揃えで、フォントの内部
   余白(ascender/descender分)によって縦幅が10pxを超えないよう制御する。 */
.hp-infinity-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
}

/* LIFEバーとPLAYER STATUS(CHARGE/WEAPON HEAT/BARRIER)を縦に並べるための
   列コンテナ。幅固定を持たないため、align-items:stretch(既定)により
   hp-bar(38vw/max260px)の実際の幅にそのままplayer-statusも揃う(=ズレなく
   「LIFEバー直下」に収まる、ピクセル値の当てずっぽうを避けるための構造)。 */
.hud-player-bar-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* PLAYER STATUS(項目23): CHARGE 2セル+WEAPON HEATゲージ+BARRIER READY
   バッジを横一列にまとめた、LIFEバー直下の統合エリア。情報を画面へ散らさず、
   かつ1行に収まる高さに抑えて画面を過密にしない。 */
.player-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.charge-shot-pips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.charge-shot-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232, 214, 255, 0.9);
  box-shadow: 0 0 6px rgba(201, 160, 255, 0.8);
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
}

.charge-shot-pip.spent {
  background: rgba(120, 110, 140, 0.4);
  box-shadow: none;
}

.charge-shot-pips.cooldown .charge-shot-pip {
  animation: charge-shot-pip-pulse 0.9s ease-in-out infinite;
}

@keyframes charge-shot-pip-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.85;
  }
}

/* WEAPON HEATゲージ(項目4〜6)。通常SHOT連射・CHARGE SHOTどちらの発射でも
   熱が上がり、満タンでOVERHEAT(赤発光+点滅)になる。撃っていない間は
   自然に減衰する(TrialSystem.js側のtp.heat/tp.overheatedを読むだけの
   見た目専用要素)。 */
.weapon-heat-gauge {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.weapon-heat-icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffcf6b, #ff6b3b);
  box-shadow: 0 0 4px rgba(255, 140, 60, 0.7);
}

.weapon-heat-track {
  flex: 1 1 auto;
  height: 4px;
  min-width: 24px;
  border: 1px solid rgba(255, 178, 107, 0.4);
  background: rgba(255, 178, 107, 0.08);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(255, 178, 107, 0.2) inset;
}

.weapon-heat-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffcf6b, #ff6b3b);
  transition: width 0.1s linear;
}

/* OVERHEAT/CHARGE BLASTER 2 COOLDOWNどちらも「武装ロック中」として同じ
   赤系の強調表示を共有する(項目2: 通常時は控えめ、ロック中だけ強く)。
   太めの枠+強いpulseで目立たせ、どちらのlockかはHUD側の
   #weapon-lock-label(main.jsが同期)のテキストで区別する。 */
.weapon-heat-gauge.overheated .weapon-heat-track,
.weapon-heat-gauge.weapon-cooldown .weapon-heat-track {
  border-width: 2px;
  border-color: rgba(255, 60, 60, 0.9);
}

.weapon-heat-gauge.overheated .weapon-heat-fill,
.weapon-heat-gauge.weapon-cooldown .weapon-heat-fill {
  background: #ff3b3b;
  animation: weapon-heat-overheat-pulse 0.5s ease-in-out infinite;
}

@keyframes weapon-heat-overheat-pulse {
  0%,
  100% {
    box-shadow: 0 0 4px 1px rgba(255, 59, 59, 0.6);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(255, 59, 59, 0.95);
  }
}

/* BARRIER READYバッジ(項目17)。tp.barrierStock>0の間だけ表示する
   コンパクトな盾アイコン。文字は使わず(項目17: 大きなテキストは追加しない)、
   小さな図形+発光のみで「今バリアを持っている」ことを伝える。 */
.barrier-ready-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barrier-ready-icon {
  display: block;
  width: 12px;
  height: 13px;
  background: linear-gradient(180deg, #bfe3ff, #4fa8ff);
  clip-path: polygon(50% 0%, 100% 22%, 100% 55%, 50% 100%, 0% 55%, 0% 22%);
  box-shadow: 0 0 6px rgba(79, 168, 255, 0.9);
  animation: barrier-ready-pulse 1.6s ease-in-out infinite;
}

@keyframes barrier-ready-pulse {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

.hud-score {
  flex-direction: column;
  align-items: flex-end;
}

#score-text {
  font-size: 16px;
  color: var(--color-magenta);
  letter-spacing: 2px;
}

/* VANTA SPEAR HP(項目10)。画面右上、ALEXANDRE HP(左上)と同じ行に
   space-betweenで配置される。SCORE(hud-score)と排他表示(trial中は
   SCOREを常に隠すため、実際に同時に見えることはない)。row-reverseで
   DOM順(label→bar→text)のまま見た目だけ右詰めに反転させ、ALEXANDRE HP
   (左詰め: label→bar→text)と左右対称に見えるようにする。ALEXANDRE HPの
   hp-bar(38vw/260px)より明確に小さいバー幅にしてあるのは、667px幅の
   ランドスケープ画面でも両方のHPゲージが画面中央で衝突しないようにする
   ため(実測で確認済み)。 */
.hud-boss {
  flex-direction: row-reverse;
}

.hud-label-boss {
  color: #ff9a9a;
}

.hp-bar-boss {
  width: 22vw;
  max-width: 128px;
}

.hp-fill-boss {
  background: linear-gradient(90deg, #a00, #ff5566);
}

.hp-fill-boss.low {
  background: linear-gradient(90deg, #800, #ff2e2e);
}

#boss-hp-text {
  min-width: 46px;
  color: #ffc9c9;
}

/* ===== Overlay screens (title / gameover) ===== */
.overlay-screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, rgba(10, 20, 30, 0.92) 0%, rgba(0, 0, 0, 0.97) 75%);
  text-align: center;
  padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  overflow-y: auto;
}

.overlay-screen.hidden {
  display: none;
}

/* タイトル画面のみ、背景動画を「主役」として見せるため共通の暗い
   radial-gradientを上書きし、ごく薄い黒のみに留める(全面暗転は禁止)。
   overflow:hiddenは背景動画がobject-fit:coverではみ出す分を切り取るため。 */
#title-screen {
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* タイトル背景動画。canvasへの毎フレーム描画ではなく、ネイティブ<video>を
   そのまま背景レイヤーとして使う(パフォーマンス配慮)。z-index:-1で
   常にタイトル画面のテキスト/ボタンより下に沈める。タップ判定を奪わない
   ようpointer-events:noneも必須。 */
.title-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* iOS Safari等で音声の自動再生が拒否された場合だけ表示するオープニング
   演出(項目「iOS Safari 初回タップ画面」)。「設定画面」に見えないよう
   ボタン風の四角いUIは使わず、画面中央の2行テキストのみとする。背景動画は
   透過越しに見え続ける(このオーバーレイ自身は背景を持たない)。画面全体を
   タップ領域にするためinset:0のまま何もクリップしない。z-index:46で
   #title-bottom-ui(z-index:auto、.overlay-screenのz-index:40より上)を
   確実に覆い、表示中はSTARTボタン等への誤タップを構造的に防ぐ(このタップは
   常にこの要素自身がイベントターゲットになり、下のボタンへは届かない)。 */
#audio-unlock-overlay {
  position: absolute;
  inset: 0;
  z-index: 46;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

#audio-unlock-overlay.hidden {
  display: none;
}

#audio-unlock-overlay.fading {
  opacity: 0;
}

.tap-line1,
.tap-line2 {
  margin: 0;
  text-align: center;
  color: #eafffe;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 26px rgba(46, 230, 255, 0.5);
  animation: tap-pulse 2.4s ease-in-out infinite;
}

.tap-line1 {
  font-size: clamp(26px, 7.2vw, 46px);
  font-weight: 700;
}

.tap-line2 {
  font-size: clamp(14px, 3.6vw, 20px);
  letter-spacing: 2px;
  opacity: 0.88;
}

@keyframes tap-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* タイトルUI一式を画面下部へまとめる。#title-screen自体は(他のoverlay-screen
   と同じく).overlay-screenのflex中央寄せを持ったままだが、この要素を
   position:absoluteにすることでその中央寄せの影響を受けずに独立して
   下端付近へ配置できる。動画の主要領域(ALEXANDRE走行シーン、画面中央〜
   上部)にはUIを一切重ねない。safe-area-inset-bottomも加味する。
   ALEXIA/サブタイトル/STARTを大きく拡大したことで、この塊自体が画面高の
   おおよそ35〜45%を使う「タイトル画面らしい」存在感を持つようになる
   (項目4〜6、ピクセル固定の高さは指定せず内容物の拡大だけで達成する)。
   初期状態はvisibility:hidden+opacity:0で完全に非表示にし(項目1、
   「透けて見える」ことを防ぐためdisplay:noneではなくvisibility:hiddenを
   使い、#revealed付与時にopacity/transformのトランジションを効かせる)、
   PLEASE TAP SCREENへの初回タップでmain.jsが.revealedを付与する。 */
.title-bottom-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(12px, 4vh, 34px) + env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  visibility: hidden;
}

.title-bottom-ui.revealed {
  visibility: visible;
}

.game-logo {
  margin: 0;
  /* 画面幅のおおよそ35〜55%を占める大きさへ拡大(項目4)。レスポンシブに
     clampで制御し、画面外へはみ出さない。 */
  font-size: clamp(38px, 13vw, 118px);
  letter-spacing: clamp(4px, 1.2vw, 10px);
  color: #eafffe;
  text-shadow:
    0 0 8px var(--color-cyan),
    0 0 24px var(--color-cyan),
    0 0 46px var(--color-magenta),
    0 2px 10px rgba(0, 0, 0, 0.85);
  /* 登場演出(項目3): opacity 0→1 + scale 0.94→1.0。他の子要素より先に
     完了させ、続けてサブタイトル/STARTが遅延つきでフェードインする。 */
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.title-bottom-ui.revealed .game-logo {
  opacity: 1;
  transform: scale(1);
}

.game-subtitle {
  margin: 0;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--color-cyan);
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* タイトル画面のクレジット行(「Music by Arther Alexandre」)。曲名
   (LOST HER IN THE RAIN)はゲーム開始前には出さない方針のため、ここでは
   Music byの一行のみを表示する。項目5により「中」サイズへ拡大(ALEXIA
   ほど大きくはしないが、以前の11pxより明確に読みやすいサイズにする)。 */
.title-credit {
  margin: 0;
  font-size: clamp(14px, 3.2vw, 22px);
  letter-spacing: 1.5px;
  color: #b9c8d8;
  opacity: 0.85;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

/* .game-subtitle/.title-credit/.title-status/START/RELOAD/controls-hintは
   ALEXIA本体より少し遅れてフェードインする(項目3「短い delay の後に
   続く」)。translateYの小さな移動も添えて、単純なopacityだけより動きを
   感じられるようにする。 */
.game-subtitle,
.title-credit,
.title-status,
.title-bottom-ui .cyber-button,
.controls-hint {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease-out 0.2s, transform 0.35s ease-out 0.2s;
}

.title-bottom-ui.revealed .game-subtitle,
.title-bottom-ui.revealed .title-credit,
.title-bottom-ui.revealed .title-status,
.title-bottom-ui.revealed .cyber-button,
.title-bottom-ui.revealed .controls-hint {
  opacity: 1;
  transform: translateY(0);
}

/* READYゲート中(LOADING.../UNDER DEVELOPMENT/LOAD ERROR)のステータス文字。
   STARTボタンの代わりにこの位置へ表示する。 */
.title-status {
  margin-top: 4px;
  padding: 12px 34px;
  font-family: var(--font-main);
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--color-cyan);
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.title-status.hidden {
  display: none;
}

/* START/RELOADは.title-bottom-ui内ではgapで十分な間隔が付くため、
   .cyber-button共通のmargin-topは打ち消しておく(他画面のRESTART/RETRY等
   のcyber-buttonには影響しない、#title-screenスコープの上書き)。 */
#title-screen .title-bottom-ui .cyber-button {
  margin-top: 4px;
}

.cyber-button {
  margin-top: 8px;
  padding: 12px 34px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  font-family: var(--font-main);
  font-size: 15px;
  letter-spacing: 3px;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(46, 230, 255, 0.5), 0 0 2px rgba(46, 230, 255, 0.8) inset;
  cursor: pointer;
  animation: pulse-glow 1.6s ease-in-out infinite;
}

.cyber-button:active {
  background: rgba(46, 230, 255, 0.2);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(46, 230, 255, 0.5), 0 0 2px rgba(46, 230, 255, 0.8) inset; }
  50% { box-shadow: 0 0 20px rgba(46, 230, 255, 0.9), 0 0 4px rgba(46, 230, 255, 1) inset; }
}

.controls-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #8fd8e8;
  opacity: 0.9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

.gameover-title {
  margin: 0;
  font-size: clamp(30px, 8vw, 56px);
  letter-spacing: 6px;
  color: var(--color-danger);
  text-shadow: 0 0 10px var(--color-danger), 0 0 30px rgba(255, 59, 59, 0.6);
}

/* ===== SURVIVE開始演出 ===== */
#survive-intro {
  background: #000;
}

.survive-text {
  margin: 0;
  /* 「SURVIVE【mm:ss】」は元の「SURVIVE」単体よりかなり長くなるため、
     667px幅でも折り返し・文字切れが起きないようフォントサイズ/文字間隔を
     詰めてある。必要ならスペースの位置で2行に自然に折り返す
     (word-break:keep-allで単語やブラケットの途中では折り返さない)。 */
  font-size: clamp(30px, 8.5vw, 84px);
  letter-spacing: 4px;
  line-height: 1.2;
  font-weight: 700;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  animation: survive-flash 1.8s ease-in-out 1;
}

#survive-time {
  display: inline-block;
}

@keyframes survive-flash {
  0% { color: #ffffff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.8); }
  15% { color: #ff3b3b; text-shadow: 0 0 20px rgba(255, 59, 59, 0.9); }
  30% { color: #ffffff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.8); }
  45% { color: #ff3b3b; text-shadow: 0 0 20px rgba(255, 59, 59, 0.9); }
  60% { color: #ffffff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.8); }
  80% { color: #ff3b3b; text-shadow: 0 0 20px rgba(255, 59, 59, 0.9); }
  100% { color: #ffffff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.8); }
}

.gameover-score {
  font-size: 16px;
  letter-spacing: 2px;
  color: #e8fbff;
}

/* ===== RAZOR WRAITHトライアル: RESULT画面(項目13〜19、全面刷新) =====
   タイトル画面と同じオープニング動画を背景に再利用し(項目13・14)、
   画面全体を使った大きなレイアウトへ拡大する(項目15・16)。背景の上でも
   文字が読めるよう、全面を覆う黒overlayは使わずtext-shadow+部分的な
   backing(.result-content)だけで可読性を確保する(項目17)。 */
#trial-result-screen {
  /* .overlay-screenの既定(暗いradial-gradient)を上書きし、背景動画を
     主役として見せる(#title-screenと同じ考え方)。overflow:hiddenは
     動画がobject-fit:coverではみ出す分を切り取るため。 */
  background: rgba(4, 6, 12, 0.32);
  overflow: hidden;
  justify-content: center;
}

.result-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* 見出し〜RANK〜数値〜ボタン〜THANK YOUまで、RESULT画面の全要素を単一の
   flex columnに収め、gapひとつで縦間隔を一括管理する(以前はTHANK YOUだけ
   position:absoluteの独立レイヤーで最下部に固定していたが、CONTINUEボタン
   表示時などコンテンツが伸びるケースでこの通常フローと競合し、行間が
   詰まって見える/重なる原因になっていたため統合した)。 */
.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* THANK YOU直前にあった重複「Music by」表記(.artist-page-credit)を削除した
     ぶん、gapを広げて空いた縦スペースを再配分する(死んだ空白として放置
     しない)。あわせてmargin-topでブロック全体をわずかに下寄せし、
     見出しが画面中央より上に偏りすぎないようにする(タイトルを画面中央
     まで落とすほどの移動はしない)。 */
  gap: clamp(12px, 2.4vh, 22px);
  margin-top: clamp(4px, 1.6vh, 16px);
  padding: 12px 16px;
  max-width: 92vw;
}

/* MISSION FAILED / MISSION COMPLETE。DISPLAY FONT(Chakra Petch 700)を
   orientation warning/PAUSEDと共通で使い、状態を示す色(赤=FAILED/
   シアン=COMPLETE)の意味はそのまま維持する。他のDISPLAY FONT要素と
   同じ軽いskewで書体ファミリーとしての一体感を出す。 */
.result-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8.5vw, 64px);
  letter-spacing: 6px;
  transform: skewX(-4deg);
  transform-origin: center;
  color: var(--color-danger);
  text-shadow: 0 0 10px var(--color-danger), 0 0 30px rgba(255, 59, 59, 0.6), 0 2px 10px rgba(0, 0, 0, 0.9);
}

#trial-result-title.mission-complete {
  color: var(--color-cyan);
  text-shadow: 0 0 10px var(--color-cyan), 0 0 30px rgba(46, 230, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* RANK: 「押せないステータス表示」であることを一目で伝えるため、ボタン
   (角丸矩形/枠線/背景)とは全く異なる、四隅のコーナーブラケットのみで
   囲むHUD readout風デザインへ変更(項目12)。PAUSEDのブラケット
   (.pause-bracket)と同じ視覚言語を再利用し、画面をまたいだ一貫性を出す。 */
.rank-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
}

.rank-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-magenta);
}

.rank-bracket.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.rank-bracket.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.rank-bracket.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.rank-bracket.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.rank-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(13px, 2.2vw, 18px);
  letter-spacing: 3px;
  color: #e8fbff;
}

.rank-value {
  font-family: var(--font-ui);
  font-size: clamp(24px, 4.2vw, 36px);
  font-weight: 700;
  color: var(--color-magenta);
  text-shadow: 0 0 10px rgba(255, 46, 230, 0.9);
}

.result-stats {
  list-style: none;
  margin: 0;
  padding: 10px 22px;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vh, 8px);
  min-width: min(320px, 78vw);
  background: rgba(4, 6, 12, 0.4);
  border-radius: 4px;
}

.result-stats li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(14px, 2.1vw, 18px);
  letter-spacing: 1.5px;
  color: #f2fbff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.result-stat-label {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-cyan);
  opacity: 0.9;
}

/* RETRY/CONTINUE/ARTIST PAGEを横一列に整理し(項目14)、下の
   .result-actions .cyber-button / .artist-page-button ルールで
   3つとも同一width/height/paddingへ統一する(役割差は色のみで表現、
   RETRY=primaryのシアン、CONTINUE=secondary/specialの控えめトーン、
   ARTIST PAGE=外部リンクのマゼンタ)。 */
.result-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 16px);
}

/* RETRY/CONTINUE(.cyber-button系)とARTIST PAGE(独立した<a>要素)の
   寸法をここで統一する。ベースの.cyber-button/.artist-page-buttonが
   個別に持っていたmin-width/min-height/paddingの差異を、同じwidth/
   height/paddingの角度カット矩形へ揃える(項目14「RETRYとCONTINUEで
   サイズが違う状態は避ける」)。 */
.result-actions .cyber-button,
.result-actions .artist-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 26vw, 190px);
  height: clamp(42px, 9vh, 50px);
  padding: 0 10px;
  margin-top: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(13px, 2vw, 16px);
  letter-spacing: 2px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.artist-page-button {
  border: 1px solid var(--color-magenta);
  border-radius: 3px;
  background: rgba(255, 46, 230, 0.16);
  color: #ffeaff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 46, 230, 0.35);
  /* RETRY等(.cyber-button、1.6s周期)より明確に緩やかな2秒周期。
   * 「速い点滅」にならないよう、box-shadowの発光+わずかな拡大縮小
   * (1.00→1.04→1.00)だけに留める(項目33)。RESULT表示直後に少し間を
   * 置いてから始まるよう遅延させ、RESULT自体の出現と動きが重ならない
   * ようにする。*/
  animation: artist-page-attention 2s ease-in-out 0.5s infinite;
}

.artist-page-button:active {
  background: rgba(255, 46, 230, 0.3);
}

@keyframes artist-page-attention {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 46, 230, 0.35); }
  50% { transform: scale(1.04); box-shadow: 0 0 20px rgba(255, 46, 230, 0.7); }
}

/* CONTINUEボタン(MISSION FAILED時のみ、main.jsがhiddenクラスを制御)。
   表示は常に「CONTINUE」のみで統一し(項目15、CODE REQUIREDのヒントは
   HTML上に存在しない)、コード要否はCONTINUE押下後の既存ロジック
   (main.jsのhasContinueAccess()分岐、今回変更なし)で初めて判明する。
   ロック状態による見た目の差もつけない(押す前から分かってしまう
   ヒントを一切出さないため)。 */

/* CONTINUE ACCESSコード入力画面。#trial-result-screenの上に重ねて表示する
   (DOM順で後ろにあるため、同じz-indexでも自然に最前面へ来る)。 */
#continue-code-screen {
  background: rgba(2, 4, 10, 0.88);
}

.code-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
  padding: clamp(20px, 4vh, 36px) clamp(24px, 6vw, 56px);
  border: 1px solid var(--color-cyan);
  border-radius: 6px;
  background: rgba(6, 10, 22, 0.75);
  box-shadow: 0 0 24px rgba(46, 230, 255, 0.3);
  max-width: 92vw;
}

.code-title {
  margin: 0;
  font-size: clamp(20px, 4.5vw, 30px);
  letter-spacing: 5px;
  color: #eafffe;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 24px rgba(46, 230, 255, 0.6);
}

.code-label {
  margin: 0;
  font-size: clamp(11px, 2.4vw, 14px);
  letter-spacing: 3px;
  color: var(--color-cyan);
  opacity: 0.85;
}

/* 追加統合修正(Cloudflare公開/課金仕様指示PART10): CONTINUE ACCESSの
   コード入力とPURCHASE ¥300ボタンを区切るための最小限の見出し。 */
.continue-purchase-divider {
  margin: 0;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--color-cyan);
  opacity: 0.5;
}

.code-input {
  width: min(80vw, 360px);
  min-height: 52px;
  padding: 10px 16px;
  font-family: var(--font-main);
  font-size: clamp(16px, 3.6vw, 22px);
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  color: #eafffe;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--color-cyan);
  border-radius: 3px;
  outline: none;
}

.code-input:focus {
  box-shadow: 0 0 10px rgba(46, 230, 255, 0.6);
}

.code-denied {
  margin: 0;
  font-size: clamp(13px, 3vw, 17px);
  letter-spacing: 3px;
  color: var(--color-danger);
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}

.code-actions {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  flex-wrap: wrap;
  justify-content: center;
}

.code-actions .cyber-button {
  min-height: 46px;
  min-width: 130px;
}

/* CODE ACCEPTED(緑系、.code-deniedの赤系と対になる成功フィードバック、
   PHASE 2項目9〜10・20)。 */
.code-accepted {
  color: #6dffb0;
  text-shadow: 0 0 10px rgba(109, 255, 176, 0.7);
}

/* CODE ACTIVATEボタン(orientation-warning、PHASE 2項目9)。
   「TURN YOUR DISPLAY TO LANDSCAPE」文言の下に控えめに配置する
   (ow-contentの通常フローに乗せるだけで、独自のposition:absoluteは
   使わない)。 */
.code-activate-button {
  margin-top: clamp(4px, 1vh, 10px);
  min-height: 40px;
  min-width: 160px;
  font-size: clamp(11px, 2.2vw, 14px);
}

/* #code-activate-screenは#continue-code-screenと全く同じ.code-panel構造を
   使い回すが、#game-rootの外(bodyの直接の子、index.html参照)に配置されて
   いるため、.overlay-screen既定のposition:absoluteだけでは正しい祖先に
   紐付かない。#orientation-warningと同じposition:fixed;inset:0で明示的に
   全画面へ固定する。 */
#code-activate-screen {
  position: fixed;
  inset: 0;
  /* #orientation-warning(z-index:100)より上に出す(landscape時に正しく
     最前面へ出すため)。次期統合修正PART9により、portrait中はメディア
     クエリ側(下記@media (orientation: portrait)ブロック)でこの画面
     自体をvisibility:hiddenにするため、z-indexが高くてもportrait中に
     入力フォームが操作可能になることはない。 */
  z-index: 150;
  /* 実機フィードバック: 画面下寄せ(旧align-items:flex-end)ではCODE
     ACTIVATEパネルが画面中央に来ないとの指摘を受け、幅を問わず常に
     画面の水平・垂直中央へ配置する仕様に統一した(667×375専用の背景
     動画露出対応=パネルの縮小・透過は下記メディアクエリ側で別途維持)。
     ゲームプレイ画面自体の「中央下揃え」(667×375専用)とは無関係。 */
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.55);
}

/* 次期統合修正PART9: CODE ACTIVATE専用に.code-panelを縦方向へ大きく圧縮
   する(#continue-code-screen側の共有.code-panelスタイルは無改造のまま、
   #code-activate-screenの子孫だけを上書きする)。文字サイズも一段小さく、
   paddingも削減して、背景動画の可視面積を優先する。入力欄/ACTIVATEボタン
   自体の最小タップサイズ(概ね36px以上)は操作性のため維持する。 */
#code-activate-screen .code-panel {
  gap: clamp(5px, 1vh, 9px);
  padding: clamp(10px, 1.8vh, 16px) clamp(16px, 3.5vw, 30px);
}

#code-activate-screen .code-title {
  font-size: clamp(15px, 2.8vw, 20px);
  letter-spacing: 3px;
}

#code-activate-screen .code-label {
  font-size: clamp(9px, 1.6vw, 11px);
}

#code-activate-screen .code-input {
  min-height: 38px;
  padding: 6px 14px;
  font-size: clamp(13px, 2.6vw, 17px);
}

#code-activate-screen .code-actions .cyber-button {
  min-height: 36px;
  min-width: 104px;
}

/* 667×375のような幅の狭いlandscape機種向け修正。中央揃え自体は上記の
   #code-activate-screen基本ルールで幅を問わず適用済みのため、ここでは
   パネルの縮小・背景透過(動画を見せる)だけを追加する。 */
@media (orientation: landscape) and (max-width: 700px) {
  /* ユーザー指摘: 667×375では.code-panel(入力フォーム)が背景動画に映る
     ALEXANDREの顔を覆い隠してしまう。対応は2段構え。
     1) パネル自体の縦方向footprint(gap/縦padding/フォントサイズ)を
        ベース値(#code-activate-screen .code-panel、上記)から約30%
        圧縮し、動画の見える面積を広げる。横方向のpadding/入力欄幅は
        変更しない。入力欄・ボタンのmin-heightだけは実タップ操作性を
        壊さない下限(32px前後)までに留め、それ以上は縮めない。
     2) パネル背景・画面全体の暗幕(#code-activate-screen既定の
        background)の不透明度を下げ、パネルの背後・周囲の動画が
        透けて見えるようにする。border/box-shadow/text-shadowは
        無改造のまま(可読性はcyan発光で確保する)。
     844×390/932×430はこのブロックの外(max-width:700pxを満たさない)
     なので一切影響しない。 */
  #code-activate-screen {
    background: rgba(2, 4, 10, 0.28);
  }

  #code-activate-screen .code-panel {
    gap: clamp(4px, 0.7vh, 6px);
    padding: clamp(7px, 1.3vh, 11px) clamp(16px, 3.5vw, 30px);
    background: rgba(6, 10, 22, 0.38);
  }

  #code-activate-screen .code-title {
    font-size: clamp(12px, 2.2vw, 15px);
  }

  #code-activate-screen .code-label {
    font-size: clamp(7px, 1.2vw, 9px);
  }

  #code-activate-screen .code-input {
    min-height: 32px;
    padding: 4px 14px;
  }

  #code-activate-screen .code-actions .cyber-button {
    min-height: 32px;
  }
}

/* CODE ACTIVATE背景動画(追加仕様項目1)。#code-activate-screenがposition:
   fixedのため、この子要素も同じ祖先基準でinset:0いっぱいに敷ける。
   .code-panel(z-index:auto、通常フロー)より確実に背面へ沈めるため
   z-index:-1+pointer-events:noneを指定する(入力UIは常にこの上に乗る)。 */
.code-activate-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* MODE SELECT(PHASE 2項目19)。STARTボタン押下直後、SURVIVE演出の前に
   #title-screen上へ重ねて表示する(既存のoverlay-screenパターンを流用)。 */
#mode-select-screen {
  background: rgba(2, 4, 10, 0.9);
}

.mode-select-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 2vh, 18px);
  padding: clamp(20px, 4vh, 36px) clamp(24px, 6vw, 56px);
  border: 1px solid var(--color-cyan);
  border-radius: 6px;
  background: rgba(6, 10, 22, 0.75);
  box-shadow: 0 0 24px rgba(46, 230, 255, 0.3);
  max-width: 92vw;
  width: min(90vw, 420px);
}

.mode-select-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: clamp(20px, 4.5vw, 30px);
  letter-spacing: 5px;
  color: #eafffe;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 24px rgba(46, 230, 255, 0.6);
}

.mode-select-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 14px;
}

.mode-select-name {
  font-size: clamp(13px, 3vw, 17px);
  letter-spacing: 2px;
}

.mode-select-lock-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--color-danger);
  opacity: 0.85;
}

/* 未解放(entitlement/CODEどちらも無い)状態: 選択不可を明示するが、
   存在自体は常に見せる(項目19、ボタンを消したり隠したりはしない)。 */
.mode-select-option.locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.mode-select-option:not(.locked) .mode-select-lock-label {
  display: none;
}

/* REWARDS画面(追加仕様項目2〜7)。GAME CLEAR後、RESULTより先に挟む
   overlay。#trial-result-screenと同じ「背景動画を主役として見せる」
   考え方(暗いradial-gradientではなく薄い黒のみ)。 */
#rewards-screen {
  background: rgba(4, 6, 12, 0.32);
  overflow: hidden;
  justify-content: center;
}

/* 動画終了後は`ended`のままpause状態で最終フレームを保持する(main.js側で
   currentTimeを巻き戻すコードを書かない)。z-index:-1+pointer-events:none
   で.rewards-content/.reward-checkout-panelより必ず背面に置く。 */
.rewards-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.rewards-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 20px);
  padding: 12px 16px;
  max-width: 92vw;
}

.rewards-title {
  margin: 0;
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 6px;
  color: #eafffe;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 26px rgba(46, 230, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.9);
}

.rewards-list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(86vw, 460px);
  max-height: 46vh;
  overflow-y: auto;
}

.reward-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-cyan);
  border-radius: 4px;
  background: rgba(6, 10, 22, 0.75);
  box-shadow: 0 0 16px rgba(46, 230, 255, 0.25);
}

.reward-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.reward-item-title {
  font-size: clamp(13px, 3vw, 16px);
  letter-spacing: 2px;
  color: #eafffe;
}

.reward-item-desc {
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: 1.5px;
  color: var(--color-cyan);
  opacity: 0.85;
}

.reward-item-action {
  margin-top: 0;
  flex-shrink: 0;
  min-width: 120px;
  padding: 10px 18px;
  font-size: 13px;
}

/* ACQUIRED(FREE取得済み)/PURCHASED(PAID購入済み)は再取得不可の押せない
   ステータス表示にする(.mode-select-option.lockedと同じ「灰色化+
   cursor:not-allowed」パターン、点滅アニメーションも止める)。 */
.reward-item-action.reward-done {
  opacity: 0.55;
  cursor: not-allowed;
  animation: none;
}

.rewards-actions {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  flex-wrap: wrap;
  justify-content: center;
}

.rewards-actions .cyber-button {
  min-height: 46px;
  min-width: 150px;
}

/* PAID報酬のcheckoutインターフェース(項目5)。.rewards-content全体の上に
   重ねる別レイヤー(#rewards-screen自身がposition基準)。 */
.reward-checkout-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.88);
}

.reward-checkout-panel.hidden {
  display: none;
}

.reward-checkout-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  padding: clamp(20px, 4vh, 32px) clamp(24px, 6vw, 48px);
  border: 1px solid var(--color-cyan);
  border-radius: 6px;
  background: rgba(6, 10, 22, 0.85);
  box-shadow: 0 0 24px rgba(46, 230, 255, 0.3);
  max-width: 88vw;
  text-align: center;
}

.reward-checkout-title {
  margin: 0;
  font-size: clamp(16px, 3.6vw, 22px);
  letter-spacing: 3px;
  color: #eafffe;
}

.reward-checkout-price {
  margin: 0;
  font-size: clamp(20px, 4.4vw, 28px);
  letter-spacing: 2px;
  color: var(--color-cyan);
  text-shadow: 0 0 10px var(--color-cyan), 0 0 24px rgba(46, 230, 255, 0.5);
}

.reward-checkout-status {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: 2px;
  color: #ffd27a;
  text-shadow: 0 0 10px rgba(255, 210, 122, 0.6);
}

.reward-checkout-actions {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  flex-wrap: wrap;
  justify-content: center;
}

.reward-checkout-actions .cyber-button {
  min-height: 46px;
  min-width: 150px;
}

/* SUIT ACQUISITION 全画面プレゼンテーション(次期統合修正PART J)。
   #rewards-screenの上に完全に被さる独立オーバーレイ(#reward-checkout-panel
   と同じ「REWARDS全体の上に重ねる別レイヤー」の考え方)。添付イラストを
   無加工のままフル画面背景として敷き、下に暗いグラデーションを重ねて
   タイトル/CONTINUEボタンの可読性を確保する。価格は一切表示しない。 */
#suit-acquired-screen {
  /* 追加統合修正PART27-30の実機検証で発覚: .overlay-screen既定のz-index:40
     のままだと、CODE ACTIVATE経由(#code-activate-screen、z-index:150)で
     開いた場合にこの画面がその背後に隠れ、CONTINUEボタンを押せなくなる
     (REWARDS経由の場合は#rewards-screenが#code-activate-screenより
     手前にあり問題が表面化しなかった)。#orientation-warning(z-index:100)
     を含む既存の全overlay-screenより確実に手前へ出すよう明示指定する。 */
  z-index: 160;
  background: #04060c;
  overflow: hidden;
  justify-content: center;
}

.suit-acquired-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.suit-acquired-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
  padding: clamp(20px, 4vh, 36px) clamp(20px, 5vw, 40px);
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(2, 4, 10, 0.15) 0%, rgba(2, 4, 10, 0.82) 62%, rgba(2, 4, 10, 0.92) 100%);
  border-radius: 8px;
}

.suit-acquired-name {
  margin: 0;
  font-size: clamp(20px, 5vw, 32px);
  letter-spacing: 4px;
  color: #eafffe;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 26px rgba(46, 230, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.9);
}

.suit-acquired-status {
  margin: 0;
  font-size: clamp(15px, 3.6vw, 20px);
  letter-spacing: 3px;
  color: #ffd27a;
  text-shadow: 0 0 10px rgba(255, 210, 122, 0.6);
}

.suit-acquired-content .cyber-button {
  margin-top: clamp(4px, 1vh, 10px);
  min-height: 46px;
  min-width: 160px;
}

/* THANK YOU FOR PLAYING！！(項目18)。以前はposition:absoluteで画面最下部
   に独立配置していたが、CONTINUEボタン表示等で.result-content側の通常
   フローが伸びると位置固定のこの要素と競合し、行間が詰まる/重なる原因に
   なっていた。.result-content内の通常フロー最後の要素へ統合し、他の
   見出し/RANK/数値/ボタンと同じgapの管理下に置くことで、構造的に重なりが
   起きないようにする(小さなfooter文字にはしない、という原方針は維持)。
   今回、最後までプレイしたユーザーへの感謝がより明確に伝わるよう、
   文字サイズを1段階拡大(20-32px -> 24-38px)し、直前のボタン列との間隔を
   .result-content共通のgapに加えてmargin-topでさらに広げた(他の要素同士
   の間隔=共通gapはそのまま変更していないため、THANK YOUの前後だけが
   相対的にゆったりした余白を持つ形になり、周囲との重なりも発生しない)。 */
.result-thank-you {
  margin: 0;
  margin-top: clamp(6px, 1.8vh, 16px);
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(24px, 4.6vw, 38px);
  font-weight: 600;
  letter-spacing: 3px;
  color: #eafffe;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 24px rgba(46, 230, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* ===== Touch controls ===== */
#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* 左親指専用の上下操作領域。画面左18%のみとし、ALEXANDRE本体(trial中は
   画面幅40%付近に表示、拡大後のスプライト幅を考慮した位置)を指で
   隠さないようにする。#battle-area内なのでLYRIC BARへは侵入しない。 */
#move-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 18%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* EMERGENCY EVADEボタン。move-zone(左18%、高さ100%の縦ドラッグ操作領域)の
   「幅方向の中心」(9% - ボタン半径)に配置し、move-zoneの右端寄り/外寄り
   ではなく操作領域内に明確に収まるようにする(旧配置はleft4%で見た目上
   パネルから外れ気味だったための修正)。bottomはfire-buttonの12%より
   下げてscreen最下部寄りの、親指が自然に止まる位置にする。ALEXANDRE本体
   (trial中は画面幅40%付近に表示)・HPバー(画面左上)・BARRIERバッジ・
   LYRIC BAR(#battle-area外の別セクション)のいずれとも重ならない。
   DOM順でmove-zoneより後ろに置かれる(=スタッキング上は上)ため、ボタン
   自体のタップはボタンだけが受け取る。move-zone側はpointerdown時に
   setPointerCapture()するため、ドラッグ中に指がボタン上を通過しても
   move-zoneが引き続き全イベントを受け取り続け、ボタンのclickは発火しない
   (InputManager.js参照、この位置変更でも競合しない)。 */
#evade-button {
  position: absolute;
  left: calc(9% - 36px + env(safe-area-inset-left));
  bottom: calc(6% + env(safe-area-inset-bottom));
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease-out;
}

#evade-button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("assets/images/ui/emergency_evade_button.png?v=20260814c");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(255, 46, 230, 0.45));
  pointer-events: none;
  transition: filter 0.1s ease-out;
}

/* ACTIVE(EVADE発動中、tp.evadeVisualTimer>0): 強めのglowで「今まさに
   発動している」ことを一目で伝える。新規画像は使わず、既存アイコンへの
   filter/transformのみ。 */
#evade-button.active {
  transform: scale(1.08);
}
#evade-button.active::before {
  filter: drop-shadow(0 0 16px rgba(255, 46, 230, 0.95)) brightness(1.3);
}

/* COOLDOWN(tp.evadeCooldownTimer>0): opacityを下げ、彩度も落として
   「今は使えない」ことを示す(既存のfire-button.weapon-lockedと同じ
   考え方)。点滅は使わない。 */
#evade-button.cooldown {
  opacity: 0.4;
  cursor: not-allowed;
}
#evade-button.cooldown::before {
  filter: grayscale(0.6) brightness(0.6);
}

/* OVERHEAT-LOCKED(Cloudflare公開前最終修正指示PART7で再修正、tp.overheated):
   OVERHEAT中に不可能なのはDASH長押しOVERDRIVEの再チャージだけであり、
   短押しの通常DASHはOVERHEAT中でも1.0秒間隔で使用可能(updatePlayerDash、
   TrialSystem.js参照)。そのため、ボタン全体を「押しても無駄」に見せる
   opacity低下・cursor:not-allowedは付けない(通常DASHボタンとして押せる
   ことが伝わる外観を維持する)。OVERDRIVE用のchargeが不可であることは、
   充填リング(#dash-charge-ring、tp.overheated中はupdateDashChargeRingが
   hidden化)とアイコンの赤系トーン(このfilterのみ)で表現し、ボタン自体の
   押下可否には触れない。overheat解除で自動的にこのクラスが外れ、通常
   アイコン外観に戻る。 */
#evade-button.overheat-locked::before {
  filter: grayscale(0.5) sepia(0.8) saturate(3) hue-rotate(-40deg) brightness(0.85);
}

/* クールダウン残り秒数(例: "3.2")。ボタン中央下寄りへ小さく重ねる。
   既存HUD(HPバー/BARRIERバッジ/LYRIC BAR)を一切邪魔しない位置に留める。 */
.evade-cooldown-label {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  color: #ff8ae6;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

#fire-button {
  position: absolute;
  right: calc(4% + env(safe-area-inset-right));
  bottom: calc(12% + env(safe-area-inset-bottom));
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-magenta);
  font-family: var(--font-main);
  font-size: 13px;
  letter-spacing: 2px;
  box-shadow: none;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease-out;
  /* 長押しでテキスト選択/全選択/Safariのコールアウト(画像保存等のメニュー)が
     出ないようにする。*要素に既にuser-select:noneは設定済みだが、
     -webkit-touch-calloutはSHOTボタンで明示的に無効化しておく。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 押下フィードバック: 画像自体に円形の外周が含まれているため、ボタン側で
   別の円やクロスヘアを重ねることはしない(押下時はわずかに縮小+
   ::before側のdrop-shadowを強めるだけ)。 */
#fire-button.active {
  transform: scale(0.94);
}

/* SHOTアイコン: 添付の弾丸シルエットPNG(円形の外周込み)をそのまま使用する。
   以前はCSS/SVGで描いていたブラスター形状/弾丸シルエットを廃止し、指定の
   画像アセットへ差し替えた。画像自体に円形の外周が含まれているため、
   #fire-button側の背景円/枠線は持たない(このimg相当の背景1枚だけで
   ボタンの見た目が完結する)。background-image(CSSの背景画像)として
   描画するため実DOMの<img>タグ/altテキストを持たず、iOS Safariの長押し
   選択/ルーペ/コールアウトの対象になり得ない。縦横比はbackground-size:
   containで維持し(引き伸ばさない)、ボタン枠からはみ出さない。ボタンの
   アクセシビリティ上の意味はaria-label="shot"(index.html)でそのまま
   維持する。#fire-button自体がdisplay:flexで中央寄せ済みのため、この
   疑似要素1つだけで自動的にボタン中央に収まる。 */
#fire-button::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  background-image: url("assets/images/ui/shot_bullet.png?v=20260814c");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px rgba(255, 46, 230, 0.5));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.08s ease-out;
}

#fire-button.active::before {
  filter: drop-shadow(0 0 16px rgba(255, 46, 230, 0.95)) brightness(1.15);
}

#fire-button.active {
  background: rgba(255, 46, 230, 0.45);
  box-shadow: 0 0 30px rgba(255, 46, 230, 0.95);
  transform: scale(0.9); /* 押した瞬間の軽い視覚フィードバック */
}

/* OVERHEAT/CHARGE BLASTER 2 COOLDOWN中のSHOTボタン無効化表示。
   「そこにボタンはあるが今は使えない」ことを一目で伝えるため、
   opacityを下げ、アイコンの彩度/明度を落とし、薄い赤みを重ねる。
   ボタン自体は非表示にせず、点滅アニメーションも使わない(項目1の
   明示的な禁止事項)。押下しても反応していないように見せるため、
   .active状態の光る/縮むフィードバックもこの状態では打ち消す。 */
#fire-button.weapon-locked {
  opacity: 0.42;
  cursor: not-allowed;
  background: radial-gradient(circle, rgba(255, 40, 40, 0.16), rgba(255, 40, 40, 0) 70%);
}

#fire-button.weapon-locked::before {
  filter: grayscale(0.65) brightness(0.55) drop-shadow(0 0 3px rgba(255, 59, 59, 0.55));
}

#fire-button.weapon-locked.active {
  transform: none;
  background: transparent;
  box-shadow: none;
}

#fire-button.weapon-locked.active::before {
  filter: grayscale(0.65) brightness(0.55) drop-shadow(0 0 3px rgba(255, 59, 59, 0.55));
}

/* OVERHEAT/CHARGE BLASTER 2 COOLDOWN中だけ表示する赤いデジタルカウント
   ダウン(項目3〜5)。SHOTボタンの真上に配置し、ボタンが今使えない理由と
   復帰までの残り時間を同じ場所で伝える。表示は「OVERHEAT」または
   「COOLDOWN」のラベル1行+「05:00」形式の数字1行のみ(文字を増やしすぎ
   ない)。どちらのlockでも同じ赤で統一し(WEAPON HEATゲージ側の強調表示と
   揃える)、ラベルの文言だけで区別する。main.js側は毎フレームtextContentを
   書き換えるだけの見た目専用要素で、当たり判定には一切関与しない。 */
.weapon-lock-label {
  position: absolute;
  right: calc(4% + env(safe-area-inset-right));
  bottom: calc(12% + env(safe-area-inset-bottom) + 118px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  width: 130px;
}

/* 「OVER HEAT!」(10文字)が旧width:104pxの箱に収まりきらず「OVER/HEAT!」の
   2行へ折り返してしまっていたバグの修正。white-space:nowrapで折り返し
   自体を禁止し、親.weapon-lock-labelのwidthも104->130pxへ広げて余裕を
   持たせる(667/844/932px landscapeいずれもCOOL TIMEと重ならないことを
   確認済み)。 */
.weapon-lock-title {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ff4b4b;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.85);
  white-space: nowrap;
}

.weapon-lock-countdown {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ff3b3b;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.95), 0 0 3px rgba(255, 220, 220, 0.6);
  font-variant-numeric: tabular-nums;
}

/* DASH長押しOVERDRIVE中(次期統合修正PART E)だけ表示する最小限の視覚
   フィードバック。#weapon-lock-labelと同じ位置・構造で、色だけ黄金/
   シアン系(weapon-locked=falseな「有利な」状態であることが直感的に
   分かるよう、警告色の赤とは明確に区別する)。大掛かりなHUD再設計は
   行わず、既存の仕組みをそのまま踏襲したバッジ1つの追加のみ。 */
.overdrive-label {
  position: absolute;
  right: calc(4% + env(safe-area-inset-right));
  bottom: calc(12% + env(safe-area-inset-bottom) + 118px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  width: 130px;
}

.overdrive-title {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd23b;
  text-shadow: 0 0 6px rgba(255, 210, 59, 0.85);
  white-space: nowrap;
}

.overdrive-countdown {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4be0ff;
  text-shadow: 0 0 10px rgba(75, 224, 255, 0.95), 0 0 3px rgba(220, 250, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

/* BOSS ELIMINATED(項目9〜11)。VANTA SPEAR 2 HP0(FINAL DEATH SEQUENCE
   開始)の瞬間からmain.jsが表示する、画面中央の大きな一時表示。既存の
   FINAL DEATH SEQUENCE本体(Canvas VFX)とは完全に独立したDOMレイヤーで、
   見た目のみ(pointer-events:none、操作には一切関与しない)。opacityは
   main.js側がboss.modeTimerから毎フレーム算出するため、ここではベースの
   見た目(色/フォント/glow)のみを定義する。 */
.boss-eliminated-banner {
  position: absolute;
  inset: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding: 0 16px;
}

.boss-eliminated-banner span {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(34px, 9vw, 88px);
  letter-spacing: clamp(4px, 1.4vw, 12px);
  color: #fff5f5;
  text-shadow: 0 0 12px #ffffff, 0 0 28px rgba(255, 59, 59, 0.95), 0 0 60px rgba(255, 30, 30, 0.75), 0 0 100px rgba(255, 20, 20, 0.5);
  white-space: nowrap;
}

/* チャージゲージ。SHOTボタンの縁を囲むリングとして表示し、チャージ中
   (0.45秒以上の長押し)のみ見えるようにする(main.jsがconic-gradientの
   角度と表示/非表示をtrial.player.charging/holdDurationから毎フレーム
   更新する)。SHOTボタン自体のヒットエリア/挙動には影響しない見た目専用の
   要素。 */
#charge-ring {
  position: absolute;
  right: calc(4% + env(safe-area-inset-right) - 9px);
  bottom: calc(12% + env(safe-area-inset-bottom) - 9px);
  width: 122px;
  height: 122px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#e8d6ff 0deg, rgba(232, 214, 255, 0.15) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px rgba(201, 160, 255, 0.7));
}

/* 次期統合修正PART5: DASH長押しOVERDRIVEのチャージ進捗リング。
   #evade-button(72x72、left: 9%-36px, bottom: 6%)を同心円で取り囲む
   82x82の外周リング(#charge-ring同様のconic-gradient+radial-gradient
   maskで円弧のみ描く手法)。 */
#dash-charge-ring {
  position: absolute;
  left: calc(9% - 41px + env(safe-area-inset-left));
  bottom: calc(6% - 5px + env(safe-area-inset-bottom));
  width: 82px;
  height: 82px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#2ee6ff 0deg, rgba(46, 230, 255, 0.15) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px rgba(46, 230, 255, 0.7));
}

/* CHARGE BLASTER 2 READY(通常CHARGE成立時間の2倍の長押し)。通常CHARGE
   (紫リング)から赤い発光へ切り替え、より強いpulseで「上位チャージが
   成立した」ことを一目で示す。 */
#charge-ring.blaster2-ready {
  animation: charge-blaster2-ready-pulse 0.45s ease-in-out infinite;
}

@keyframes charge-blaster2-ready-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.75));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255, 59, 59, 1));
  }
}

/* 一時停止ボタン(項目35・36で画面上部中央へ再配置)。#hud(ALEXANDRE行/
   VANTA SPEAR 1行、y:4〜21相当)より下、かつVANTA SPEAR 2のHPバー
   (canvas描画、TrialRenderer._drawRazorWraithBossHpBar参照。boss.yは
   trackPlayerYSecondFormによりプレイヤーの固定Y座標へ収束するため、実測
   667/844/932pxいずれもy:48px以降で安定する)より上、という実測で確認済み
   の隙間(y:24px付近〜約45px)へ配置する。横方向はleft:50%の完全中央寄せ
   でも、ボタン自体の実測幅(52〜62px程度)がVANTA SPEAR 1戦闘中の
   ALEXANDRE行/VANTA SPEAR HP行の間隙(667px幅で実測61px)に収まるため
   干渉しない(Playwright実測で667/844/932px×通常/VANTA1/VANTA2の
   全パターンでゼロ交差を確認済み)。以前は画面右端の垂直中央だったが、
   COOL TIME/OVER HEAT!表示(#weapon-lock-label、SHOTボタン付近)に近すぎた
   ため見つけやすい上部中央へ移した。 */
/* PAUSEボタンはamber/orange系(D案A: 細いamber border+amber text+弱めglow)。
   HUD全体のcyanから意図的に外すことで「操作可能なボタン」であることを
   区別しつつ、赤系の危険/警告色とは明確に違うオレンジ系に留める。 */
#pause-button {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 35;
  min-width: 62px;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #ffb02e;
  background: rgba(24, 14, 4, 0.6);
  color: #ffcf7a;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  box-shadow: 0 0 6px rgba(255, 176, 46, 0.35);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#pause-button:active {
  background: rgba(255, 176, 46, 0.3);
}

/* STEALTH CAMOUFLAGE SUIT起動ボタン(PHASE 2項目8、次期統合修正PART A)。
   PAUSEボタンの直下に配置する(#pause-buttonと同じleft:50%/transform
   中心寄せ、topだけ#pause-buttonの高さ+余白ぶん下げる)。entitled
   (trial.mode==="stealth"の間のみ)でない限りmain.js側でhiddenクラスが
   付いたまま。READY/ACTIVE/COOLDOWNの3状態。 */
#stealth-button {
  position: absolute;
  top: calc(24px + 34px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  min-width: 62px;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid var(--color-cyan);
  background: rgba(4, 18, 20, 0.6);
  color: #9dfff0;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  box-shadow: 0 0 6px rgba(46, 230, 255, 0.35);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#stealth-button::before {
  content: "STEALTH";
}

/* ACTIVE(30秒間、tp.stealthActiveTimer>0): 強めのglow+専用ラベルで
   「今まさに完全無敵」であることを一目で伝える。 */
#stealth-button.active {
  border-color: #eafffe;
  background: rgba(46, 230, 255, 0.28);
  box-shadow: 0 0 16px rgba(46, 230, 255, 0.9);
}
#stealth-button.active::before {
  content: "ACTIVE";
}
.stealth-active-label {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  color: #9dfff0;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

/* COOLDOWN(30秒、tp.stealthCooldownTimer>0、次期統合修正PART A項目5): ボタン
   自体をグレーアウトし(disabled属性込み)、CHARGING!ラベル+mm:ss形式の
   countdownをボタン下に2段で表示する。00:00到達でmain.js側が両ラベルを
   隠し.cooldownクラスを外す(READYへ復帰)。 */
#stealth-button.cooldown {
  border-color: #6b7580;
  background: rgba(40, 44, 48, 0.55);
  color: #8b939b;
  box-shadow: none;
  cursor: not-allowed;
}
#stealth-button.cooldown::before {
  content: "STEALTH";
}
.stealth-cooldown-label {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffcf5c;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}
.stealth-cooldown-timer {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  color: #c7ccd1;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}

/* PAUSE画面(cinematic key visual構成)。ボス静止画を画面いっぱいの背景
   レイヤーとして敷き(position:absolute;inset:0)、その上にscrim
   グラデーション、さらにその上にPAUSED(上部)/RESUME・RESTART・QUIT
   (最下部の横一列)を独立してレイヤー表示する。#pause-screen自体は
   .overlay-screenのposition:absolute;inset:0をそのままpositioning
   contextとして使う(子要素を絶対配置で重ねるためoverflow:hiddenを
   追加、ID詳細度でクラスに勝つ)。main.jsのpauseGame()/resumeGame()が
   LYRIC BARの表示/非表示を連動して切り替えるため、PAUSE中は
   #battle-area(延いてはこの#pause-screen)がLYRIC BARぶんの高さも
   含めた画面フル高さを使う。 */
#pause-screen {
  padding: 0;
  overflow: hidden;
}

/* ボス静止画を「PAUSE画面そのものであるキービジュアル」として画面全面に
   敷く(小さなカード/サムネイル化は禁止)。object-fit:coverで画面を
   隙間なく満たし、object-positionを上寄りに調整して頭部・顔(オレンジの
   バイザー)・肩のスパイクが常に見える範囲に収める(実測667/844/932px×
   landscapeいずれでもクロップは主に胸から下の縦方向のみで発生し、
   左右方向のクロップは発生しない=4:3画像より横長のboxのため)。 */
.pause-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  z-index: 0;
}

/* PAUSED周辺の可読性用スクリム(上部)。ごく浅い範囲だけを暗くし、
   頭部の造形自体は隠さない。 */
.pause-scrim-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

/* ボタン行周辺の可読性用スクリム(下部)。画面全体を均一に暗く潰さず、
   ボタンが乗る下部〜中央下寄りだけを段階的に暗くする(上部〜顔まわりは
   明るいまま=ボスの顔が常に見える)。装飾専用レイヤーなのでクリックを
   透過させる。 */
.pause-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.35) 62%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* PAUSED(上部中央、ボスの顔にはかからない)。DISPLAY FONT(Chakra Petch
   700)を使い、orientation warningと同じ書体ファミリーで世界観を統一
   しつつ、グロー・skewはより弱く抑えて控えめなトーンに留める。四隅の
   コーナーブラケットはRESULT画面のRANK表示と同じ視覚言語(「押せない
   ステータス表示」的なHUD readout感)を再利用する。 */
.pause-title-wrap {
  position: absolute;
  top: clamp(10px, 3vh, 22px);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.pause-title-frame {
  position: relative;
  padding: 6px 26px;
}

.pause-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-cyan);
}

.pause-bracket.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.pause-bracket.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.pause-bracket.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.pause-bracket.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.pause-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 6vw, 48px);
  letter-spacing: 8px;
  transform: skewX(-4deg);
  transform-origin: center;
  color: #eafffe;
  text-shadow: 0 0 6px var(--color-cyan), 0 0 16px rgba(46, 230, 255, 0.5);
}

/* RESUME/RESTART/QUIT: 画面最下部に同width/height/gapの横一列(項目8)。
   .cyber-button自体はタイトル/RESULT等でも共有するため、PAUSE画面内
   だけこのスコープでflex行への参加方法とUI FONT(Rajdhani 700)を
   上書きする。margin-topは基準(縦積み用の8px)を打ち消して行内で
   揃える。 */
.pause-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 3vh, 20px);
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: clamp(8px, 2vw, 18px);
  padding: 0 clamp(10px, 3vw, 24px);
}

.pause-actions .cyber-button {
  flex: 1 1 0;
  max-width: 220px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(40px, 9vh, 52px);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(13px, 2.4vw, 18px);
  letter-spacing: 2.5px;
  padding: 0 10px;
}

.cyber-button-secondary {
  border-color: #8fa4b8;
  color: #cfe6f2;
  box-shadow: 0 0 6px rgba(143, 164, 184, 0.35);
  animation: none;
}

.cyber-button-secondary:active {
  background: rgba(143, 164, 184, 0.2);
}

.hidden {
  display: none !important;
}

/* ===== LYRIC BAR =====
   上段(曲名)/中段(クレジット)/下段(歌詞、最大3行)の3段構成。
   横一列に詰め込まず、それぞれ独立した行として確保することで、
   横画面iPhoneでも文字が途中で切れないようにする。 */
#lyric-bar {
  position: relative;
  flex: 0 0 auto;
  height: var(--lyric-bar-height);
  width: 100%;
  background: rgba(6, 10, 22, 0.86);
  border-top: 1px solid rgba(138, 75, 255, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 3行(title/credit/line)を「なんとなくのgap」ではなく、各行の
     margin-topで固定ルール化する(下記参照)。gapはここでは使わず0にして
     二重計上を避ける。全3行がflex:0 0 auto(コンテンツの高さぶんだけ)に
     揃っているため、ブロック全体の高さが画面サイズや歌詞の文字数に左右
     されず安定し、justify-content:centerでLYRIC BAR内に上下均等に
     収まる(9.3/9.8項)。 */
  gap: 0;
  /* 上下paddingを揃える(9.8項: 上下均等)。safe-area-inset-bottomのみ
     ノッチ端末向けに追加するが、視覚上の基準値は上下とも5pxで統一。 */
  padding: 5px calc(6px + env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom))
    calc(6px + env(safe-area-inset-left));
  overflow: hidden;
  z-index: 25;
}

/* 曲名: LYRIC BAR内で最も大きく、最も存在感のあるテキスト(常に歌詞行より
   大きいことをclampの下限>歌詞側上限の関係で保証する。9.4項の階層要件)。 */
/* LOST HER IN THE RAINだけ、虹色の光がゆっくり横方向へ流れるグラデーション
   テキストにする(歌詞字幕・クレジットは対象外。文字自体の点滅はしない —
   background-positionを連続的に動かすだけ)。background-clip:textはWebKit
   由来の機能でSafariとの親和性が高い。 */
#lyric-bar-title {
  flex: 0 0 auto;
  margin: 0;
  /* 3行共通のline-height方針(9.4項): 曲名は最も大きいぶん詰め気味の
     1.08にして、フォントサイズ差だけで行高が不自然に膨らまないように
     する。虹色グラデーション(background-position)はcolor/背景の描画のみ
     でbox/line-heightには一切影響しない(9.7項)。 */
  line-height: 1.08;
  font-size: clamp(16px, 3.6vh, 20px);
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0.95;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  background-image: linear-gradient(90deg, #ff3b3b, #b23bff, #3b7dff, #3be6ff, #3bff8f, #f3ff3b, #ff3b3b);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: lyric-title-rainbow 7s linear infinite;
}

@keyframes lyric-title-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* クレジット: 3段の中で最も小さく最も控えめ(常に歌詞行より小さいことを
   clampの上限<歌詞側下限(main.jsのLYRIC_LINE_MIN_FONT_PX=11px)の関係で
   保証する。上限を11ではなく10にしているのは、歌詞が最小の11pxまで
   縮んだ場合でも同点にならず必ず歌詞>クレジットを維持するため)。 */
#lyric-bar-credit {
  flex: 0 0 auto;
  /* 曲名→クレジットは関連情報なので近め(3〜5pxルール、9.3項)。 */
  margin-top: 4px;
  line-height: 1.1;
  font-size: clamp(9px, 1.6vh, 10px);
  letter-spacing: 1px;
  color: #b9c8d8;
  opacity: 0.45;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#lyric-bar-line {
  /* flex:1 1 autoをやめてtitle/creditと同じflex:0 0 autoに揃えることが
     今回の主眼(9.2項の原因そのもの): 以前はこの行だけ残り領域を吸収して
     伸び、内部のjustify-content:centerで可変な余白ができていたため、
     クレジットとの間隔が画面高さ依存でバラバラに見えていた。
     flex:0 0 autoにすることで他の2行と同じくコンテンツの高さぶんだけに
     縮み、margin-topの固定値だけで間隔が決まるようになる。width:100%は
     維持する(main.jsのfitLyricLineFontSize()がclientWidthを実際の利用
     可能幅として参照するため、ここをshrink-to-fitにすると測定が壊れる)。 */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* クレジット→歌詞はやや広め(5〜7pxルール、9.3項)。 */
  margin-top: 6px;
  /* main.js側でフォントサイズを11〜15pxの範囲で動的に変えるため、行の
     実測高さも歌詞ブロックごとに変動しうる。min-heightを最大フォント
     ケース(15px×line-height1.15)に固定しておくことで、どの歌詞が
     表示されていてもブロック全体の高さが一定になり、タイトル/クレジット
     の位置が歌詞の文字数で上下にブレなくなる(9.8項の行間安定)。 */
  min-height: 18px;
  /* ベースのフォントサイズ(CSS側の初期値/フォールバック)。実際の表示は
     main.jsのfitLyricLineFontSize()が歌詞の実測幅(scrollWidth)を見て
     LYRIC_LINE_MIN/MAX_FONT_PX(11〜15px)の範囲でインラインstyleを
     上書きする(最長で約25文字の歌詞でも、省略せず必ず1行で全文表示する
     ため)。上限は曲名(常に16px以上)より必ず小さく、下限はクレジット
     (常に10px以下)より必ず大きくなるようmain.js側と揃えている。 */
  font-size: clamp(11px, 2.6vh, 15px);
  letter-spacing: 0.3px;
  color: #f2fbff;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 0 6px rgba(46, 230, 255, 0.35);
  transition: opacity 0.15s ease;
  /* 1行表示。省略記号(text-overflow:ellipsis)は使わない — 常に全文を
     表示する方針のため、はみ出さないようフォントサイズ側で調整する。 */
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

#lyric-bar-line.lyric-fade-out {
  opacity: 0;
}

/* ===== iPhone横持ち等、縦が狭いランドスケープ画面向けの調整 ===== */
@media (orientation: landscape) and (max-height: 500px) {
  #hud {
    padding-top: calc(4px + env(safe-area-inset-top));
  }

  .hud-label {
    font-size: 9px;
  }

  .hp-bar {
    width: 30vw;
    max-width: 200px;
    height: 8px;
  }

  .hud-player-bar-col {
    gap: 2px;
  }

  .player-status {
    gap: 6px;
  }

  .weapon-heat-track {
    height: 3px;
    min-width: 18px;
  }

  .weapon-heat-icon {
    width: 7px;
    height: 7px;
  }

  .barrier-ready-icon {
    width: 10px;
    height: 11px;
  }

  /* VANTA SPEAR HPは667px幅でもALEXANDRE HPと画面中央で衝突しないよう、
     このブレークポイント内でも明確に小さいバー幅を維持する(実測確認済み)。
     .hp-barと同じ詳細度のため、後勝ちにするためここでも明示的に指定する。 */
  .hp-bar-boss {
    width: 20vw;
    max-width: 108px;
    height: 8px;
  }

  .hp-text {
    font-size: 9px;
    min-width: 50px;
  }

  .hp-infinity-glyph {
    font-size: 12px;
  }

  #boss-hp-text {
    min-width: 40px;
  }

  #score-text {
    font-size: 13px;
  }

  #fire-button {
    width: 78px;
    height: 78px;
    bottom: calc(8% + env(safe-area-inset-bottom));
  }

  #fire-button::before {
    width: 72px;
    height: 72px;
  }

  #charge-ring {
    right: calc(4% + env(safe-area-inset-right) - 7px);
    bottom: calc(8% + env(safe-area-inset-bottom) - 7px);
    width: 92px;
    height: 92px;
  }

  .weapon-lock-label {
    bottom: calc(8% + env(safe-area-inset-bottom) + 90px);
    /* 旧78pxでは「OVER HEAT!」(10文字)がnowrap指定と衝突して右へはみ出す
       ため、108pxへ広げる(667/844/932px landscapeで隣接要素と重ならない
       ことを確認済み)。 */
    width: 108px;
  }

  .weapon-lock-countdown {
    font-size: 19px;
  }

  .overdrive-label {
    bottom: calc(8% + env(safe-area-inset-bottom) + 90px);
    width: 108px;
  }

  .overdrive-countdown {
    font-size: 19px;
  }

  .charge-shot-pip {
    width: 7px;
    height: 7px;
  }

  #pause-button {
    top: calc(23px + env(safe-area-inset-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 52px;
    padding: 4px 8px;
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  /* このブレークポイントの実高さ(667/844/932px幅いずれも375〜430px)は
     PAUSE中はLYRIC BARが非表示になり画面フル高さがそのまま使えるため、
     以前ほどの切り詰めは不要。ボス画像は常にinset:0の全面表示(この
     ブレークポイントでの上書きは不要)。PAUSED/ボタン行の余白・
     フォントサイズだけをvh基準で軽く調整する。 */
  .pause-title-wrap {
    top: clamp(6px, 2.4vh, 16px);
  }

  .pause-title {
    font-size: clamp(18px, 7vh, 34px);
    letter-spacing: 4px;
  }

  .pause-actions {
    bottom: clamp(6px, 2vh, 14px);
    gap: clamp(6px, 1.6vw, 12px);
  }

  .pause-actions .cyber-button {
    height: clamp(32px, 8vh, 44px);
    font-size: clamp(11px, 2.4vh, 15px);
    letter-spacing: 1.5px;
    padding: 0 8px;
  }

  .boss-eliminated-banner span {
    font-size: clamp(24px, 11vh, 56px);
    letter-spacing: clamp(3px, 1vh, 8px);
  }

  .game-logo {
    /* ALEXIAはランドスケープ専用ゲーム(#orientation-warning参照)のため、
       実機での主要な検証幅は667/844/932px(いずれもこのメディアクエリの
       対象、横向きスマホの代表的な横幅)になる。横方向の余白は十分ある
       一方、縦方向(375〜430px)は極端に狭いため、幅基準(vw、ベースルール
       側のletter-spacing含む)は維持しつつ、フォントサイズ自体はvh基準で
       「画面幅の概ね35〜55%」に収まる値へ調整し、かつタイトルUI一式が
       縦にはみ出さないようにする。 */
    font-size: clamp(32px, 12vw, 78px);
    letter-spacing: clamp(3px, 1.2vw, 8px);
  }

  .game-subtitle {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .title-credit {
    font-size: clamp(11px, 3.4vh, 16px);
  }

  .title-bottom-ui {
    bottom: calc(clamp(8px, 3vh, 20px) + env(safe-area-inset-bottom));
    gap: 2px;
  }

  .cyber-button {
    padding: 8px 24px;
    font-size: 13px;
    margin-top: 4px;
  }

  .controls-hint {
    margin-top: 10px;
    font-size: 9px;
    line-height: 1.4;
  }

  #title-screen .controls-hint {
    margin-top: 4px;
  }

  .overlay-screen {
    gap: 8px;
  }

  .gameover-title {
    font-size: clamp(22px, 8vh, 40px);
  }

  .result-title {
    font-size: clamp(22px, 9vh, 40px);
    letter-spacing: 4px;
  }

  /* このブレークポイントの実高さ(667/844/932px幅いずれも375〜430px)は
     MISSION FAILED+CONTINUE表示時に要素数が最も多くなるため、#trial-
     result-screen自体の上下paddingを.overlay-screenの既定(20px+safe-
     area)から切り詰め(ID詳細度で.overlay-screenに勝つ)、.result-content
     のgapもここでまとめて縮める。THANK YOUも含めた全要素が単一のgapで
     並ぶため、ここを縮めるだけで全体の縦間隔が一括で詰まり、逆に広げれば
     一括で広がる(個別要素ごとの手動調整が不要な設計)。 */
  #trial-result-screen {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .result-content {
    gap: clamp(7px, 1.8vh, 12px);
    margin-top: clamp(2px, 1vh, 8px);
  }

  .rank-badge {
    padding: 4px 16px;
  }

  .rank-label {
    font-size: clamp(11px, 2.6vh, 14px);
  }

  .rank-value {
    font-size: clamp(18px, 5vh, 26px);
  }

  .result-stats {
    padding: 6px 16px;
  }

  .result-stats li {
    font-size: clamp(12px, 3vh, 14px);
  }

  .result-actions {
    gap: clamp(6px, 1.4vw, 12px);
  }

  .result-actions .cyber-button,
  .result-actions .artist-page-button {
    width: clamp(110px, 24vw, 150px);
    height: clamp(34px, 8vh, 42px);
    font-size: clamp(10px, 2vh, 13px);
    letter-spacing: 1.5px;
  }

  .result-thank-you {
    /* 横画面の低高さ環境(max-height:500px)では、ここが後勝ちして上の基本
       ルール(24-38px)を実質的に無効化してしまっていた(前回の拡大が
       実機のLANDSCAPE専用プレイでは全く反映されていなかった原因)。
       最小値を24pxへ引き上げ、この画面でも確実に基準以上の大きさを
       確保する。margin-top(=他RESULT要素との縦間隔)自体は変更しない。 */
    font-size: clamp(24px, 6vh, 32px);
    margin-top: clamp(4px, 1.2vh, 10px);
  }
}

/* ===== Orientation warning ===== */
/* 背景は添付動画のループ再生(項目25〜29)。#orientation-warning自体の
   background:#000は動画読み込み前/失敗時のフォールバックとして残す。
   テキスト側はvideo上でも高コントラストで読めるよう.ow-contentに
   半透明の背景パネル+強めのtext-shadowを追加する(項目26)。 */
#orientation-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  color: var(--color-cyan);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.orientation-warning-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.ow-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.2vh, 26px);
  max-width: 94vw;
  padding: clamp(16px, 4vh, 32px) clamp(16px, 5vw, 48px);
  background: rgba(2, 4, 10, 0.42);
  border-radius: 8px;
}

/* 英文をメインメッセージとして最も強く見せる。TURN YOUR DISPLAY /
   TO LANDSCAPEの2行を基本としつつ、極端に幅の狭い端末でも横へはみ出さ
   ないようwhite-space:normalのままにしておき(nowrapにしない)、
   万一収まらない場合はブラウザの折り返しに任せる(切れるよりは折り返す
   方を優先、「文字が左右へ切れることは禁止」)。
   鋭く/攻撃的/機械的なハイエンドSFゲームロゴ風のタイポグラフィへ刷新。
   DISPLAY FONT(var(--font-display)、Chakra Petch 700を自己ホスト)を使用。
   Chakra Petch自体が角の切れた造形を持つため、以前のsystem fontベース
   案(skewX -6deg)より弱いskewX(-4deg)で十分「刃物のような」印象になる
   (フォント本来の造形を潰すほどの加工はしない)。カラーは縦方向
   グラデーション(上:白に近いアイスブルー -> 中央:シアン -> 下:濃い
   エレクトリックブルー)。「ネオン文字」ではなく「発光する金属ロゴ」に
   見せるため、text-shadowのぼかし半径を最小限(4px以下)に抑え、暗い
   下方向シャドウ+明るい上方向ハイライトの2層でエッジのコントラストを
   作る。-webkit-text-strokeでごく薄い明るい輪郭線を足し、シャープな
   縁取りにする。 */
/* #orientation-warning p(黒シャドウの汎用フォールバック、下記)より詳細度を
   上げるため、あえて#orientation-warning p.ow-mainとして上書きを確実にする
   (単なる.ow-mainだけだとID+要素セレクタの方が勝ってしまい、赤グロー付き
   のtext-shadowが黒シャドウに潰されてしまう)。
   青系メタリックは廃止し、「鮮やかなREDの金属表面へ白い光がゆっくり走り、
   再びREDへ戻る」質感のため、DEEP RED -> VIVID RED -> PALE RED/PINKISH
   WHITE -> BRIGHT WHITE -> PALE RED -> VIVID RED -> DEEP REDの対称7段
   グラデーションを、テキスト幅より広いbackground-size(220%)で敷き、
   background-positionを往復させる(ow-main-red-sweep)。単純な赤⇔白の
   点滅(色全体が一斉に切り替わる)にはならない。text-shadowもsweepに
   追従させず、red/pink系の控えめなouter glow(2層)に固定して常時発光
   している質感を保つ。アニメーション周期(5s ease-in-out infinite)・
   background-size・skew等の構造自体は変更していない(色のみ置換)。 */
#orientation-warning p.ow-main {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 7vw, 40px);
  line-height: 1.22;
  letter-spacing: clamp(1.5px, 0.55vw, 3.5px);
  transform: skewX(-4deg);
  transform-origin: center;
  background-image: linear-gradient(
    100deg,
    #4a0a0a 0%,
    #c81f2e 16%,
    #ffd6d6 32%,
    #ffffff 50%,
    #ffd6d6 68%,
    #c81f2e 84%,
    #4a0a0a 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.4px rgba(255, 225, 225, 0.4);
  text-shadow: 0 0 5px rgba(230, 46, 46, 0.55), 0 0 14px rgba(255, 143, 143, 0.35);
  animation: ow-main-red-sweep 5s ease-in-out infinite;
}

@keyframes ow-main-red-sweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #orientation-warning p.ow-main {
    animation: none;
    background-position: 30% 50%;
  }
}

.ow-icon {
  display: block;
  height: clamp(64px, 15vh, 118px);
  width: auto;
  max-width: 70vw;
  object-fit: contain;
}

#orientation-warning p {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* 日本語は補足位置付け。英文より明確に小さいが、スマートフォンで十分
   読めるサイズを確保する。必ず1行で収める(2行への折り返し禁止)ため
   white-space:nowrapを使い、320px幅でも収まるようfont-sizeのclamp下限を
   十分に下げてある(実測確認済み)。
   書体はvar(--font-ui)(Rajdhani、日本語グリフはシステムCJKフォントへ
   フォールバックするが、font-weight/letter-spacingは効くため英文より
   細く締まった印象にできる)を使い、font-weightを英文(700)より明確に
   軽い400にすることで「英語より細めのSF調」を実現する。カラーは英文と
   同系統の青白/シアン系(#bfe9ff)+控えめなcyan outer glow。
   #orientation-warning p(黒シャドウの汎用フォールバック、上記)より詳細度を
   上げるため、.ow-mainと同様#orientation-warning p.ow-subとして上書きを
   確実にする。 */
#orientation-warning p.ow-sub {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(11px, 3.6vw, 18px);
  letter-spacing: 1.2px;
  color: #bfe9ff;
  text-shadow: 0 0 5px rgba(46, 230, 255, 0.45), 0 1px 3px rgba(2, 6, 14, 0.8);
  opacity: 0.92;
  white-space: nowrap;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (orientation: portrait) and (max-aspect-ratio: 1/1) {
  #orientation-warning {
    display: flex;
  }
  #game-root {
    visibility: hidden;
  }
  /* 次期統合修正PART9(旧仕様、撤回): 以前はCODE ACTIVATE入力画面を横向き
     専用とし、portrait中は常にvisibility:hiddenでorientation warningへ
     誘導していた。統合修正PART13: 実機で「回転を待たされる」UXが不評
     だったため撤回。ボタンを押した時点(main.jsの#code-activate-buttonクリック
     ハンドラ)でcodeActivateScreenElに.code-activate-forceクラスを付与し、
     このメディアクエリ内でもそのクラスがあれば表示する(下記の
     #code-activate-screen.code-activate-force、詳細度がこの無条件の
     visibility:hiddenより高いため確実に上書きされる)。付与前(=ボタンを
     押す前)はこれまで通りvisibility:hiddenのまま(orientation-warning自体は
     このメディアクエリの外、常時DOMにあるボタンなので影響なし)。 */
  #code-activate-screen {
    visibility: hidden;
  }
  /* ゲームプレイ画面(667×375専用、中央"下"揃え)とは別仕様。中央揃え
     自体は#code-activate-screen基本ルールで既に幅を問わず適用されて
     いるため、ここではvisibility:visibleの上書きのみで足りる。
     実際に横向きへ回転した後は@media(orientation:landscape)側の
     ルールへ自然に引き継がれる(中央揃えは共通、667のみパネル縮小/
     背景透過が追加で乗る)。 */
  #code-activate-screen.code-activate-force {
    visibility: visible;
  }

  /* 追加統合修正PART27-30の実機検証で発覚: #suit-acquired-screenは
     #game-root配下(通常はlandscapeプレイ中のREWARDS経由でのみ表示される
     想定)にあるため、このメディアクエリの#game-root visibility:hiddenを
     そのまま継承してしまい、CODE ACTIVATE成功(portrait中に開く
     #code-activate-screen経由)でACQUIRED画面を表示してもCONTINUEボタンが
     押せなくなっていた(見た目上は#code-activate-screen.code-activate-force
     と同じ理屈で、ここでも明示的にvisibility:visibleへ上書きする必要が
     ある)。非表示時は.hidden(display:none !important)が優先されるため、
     ここでの上書きはACQUIRED画面を実際に表示すべき瞬間にのみ効く。 */
  #suit-acquired-screen {
    visibility: visible;
  }

  /* 物理的にはまだportraitの狭い幅へ、通常サイズ(844/932共有)のパネルを
     そのまま出すと縦に間延びして「縦画面用レイアウトが残っている」ように
     見えてしまう。667×375 landscape側で使っているのと同じ縮小
     (gap/padding/フォント)を、この過渡状態にも適用してコンパクトに保つ。 */
  #code-activate-screen.code-activate-force .code-panel {
    gap: clamp(4px, 0.7vh, 6px);
    padding: clamp(7px, 1.3vh, 11px) clamp(16px, 3.5vw, 30px);
  }
  #code-activate-screen.code-activate-force .code-title {
    font-size: clamp(12px, 2.2vw, 15px);
  }
  #code-activate-screen.code-activate-force .code-label {
    font-size: clamp(7px, 1.2vw, 9px);
  }
  #code-activate-screen.code-activate-force .code-input {
    min-height: 32px;
    padding: 4px 14px;
  }
  #code-activate-screen.code-activate-force .code-actions .cyber-button {
    min-height: 32px;
  }
}