/* ==========================================================================
   目次 (INDEX) 
   --------------------------------------------------------------------------
   [SECTION-VARIABLES] : 全体の共通変数設定 (z-index, カラー)
   [SECTION-BASE]      : 根幹レイアウト (body, canvas, デバッグ)
   [SECTION-HUD]       : プレイ中UI (スコア, 残機, 武器情報)
   [SECTION-SCREENS]   : 各種全画面 (スタート, リザルト, コンフィグ)
   [SECTION-CREDIT]    : スタッフロール演出
   [SECTION-ANIMATION] : アニメーション定義 (@keyframes)
   ========================================================================== */


/* ==========================================================================
   [SECTION-VARIABLES] : VARIABLES & THEME
   ========================================================================== */
:root {
    /* --- LAYER MANAGEMENT (z-index) --- */
    --z-base: 0;
    --z-game-canvas: 10;
    --z-screen-overlay: 100;
    --z-ui-hud: 150;
    --z-config-system: 200;

    /* --- COLORS (VOID-CIRCUIT THEME) --- */
    --color-bg: #111;
    --color-black: #000;
    --color-white: #fff;
    --color-cyan: #0ff;
    --color-magenta: #f0f;
    --color-yellow: #ff0;
    --color-gold: #ffd700;
    --color-crt-blue: #000088;
    --color-gray-dark: #444;
    --color-gray-light: #888;
}


/* ==========================================================================
   [SECTION-BASE] : BASE LAYOUT & CANVAS
   ========================================================================== */
body {
    margin: 0;
    height: 100dvh;
    background-color: var(--color-bg);
    color: var(--color-white);
    font-family: 'Press Start 2P', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

a {
    color: #0FF;
    text-decoration: underline;
}

#game-container {
    container-type: size;
    position: relative;
    width: 95vw; 
    height: 80dvh;
    max-width: calc(80dvh * 2 / 3);
    max-height: 80dvh;
    aspect-ratio: 2 / 3;
    background: var(--color-black);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    margin: auto; 
    overflow: hidden;
}

/* ゲーム画面とイコライザーの両方にドット絵風のレンダリングを適用 */
canvas, 
#eq-overlay-canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

canvas {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    touch-action: none;
    z-index: var(--z-game-canvas);
}

#debug-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    padding: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: #0f0; /* デバッグ用のグリーン */
    font-family: monospace;
    font-size: 9px;
    border: 1px solid #0f0;
    pointer-events: none;
    display: none;
}


/* ==========================================================================
   [SECTION-HUD] : HEADS-UP DISPLAY (プレイ中UI)
   ========================================================================== */
/* UIレイヤー：Canvasの真上に配置 */
#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3cqw; 
    box-sizing: border-box;
    z-index: var(--z-ui-hud);
    display: block; 
    pointer-events: none; 
}

#score-display, 
#hi-score-display {
    position: absolute;
    top: 3cqw;
    font-size: 2.5cqw;
    color: var(--color-white);
    text-shadow: 0.4cqw 0.4cqw 0px var(--color-black);
    line-height: 1;
    white-space: nowrap;
}

#score-display { left: 3cqw; }
#hi-score-display { right: 3cqw; }

.counter-stop {
    color: var(--color-gold) !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

#lives-display {
    position: absolute;
    top: 6cqw;
    left: 3cqw;
    color: var(--color-white);
    font-size: 3cqw;
    text-shadow: 2px 2px 0px var(--color-black);
    pointer-events: none;
}

/* 武器情報全体のコンテナ */
#weapon-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 3cqw;
    right: 3cqw;
    text-align: right;
    pointer-events: none;
}

#weapon-display {
    font-size: 3cqw;
    color: var(--color-cyan);
    text-shadow: 0 0 1cqw rgba(0, 255, 255, 0.7);
    margin-bottom: 0.5cqw;
}

#weapon-display.mode-wide {
    color: var(--color-magenta);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

#weapon-hint {
    font-size: 1.8cqw;
    color: rgba(255, 255, 255, 0.4);
    animation: weapon-blink 2s infinite;
}

#version-display {
    position: absolute;
    bottom: 1cqw;
    right: 1cqw;
    font-size: 1.5cqw;
    color: var(--color-gray-dark);
}


/* ==========================================================================
   [SECTION-SCREENS] : SCREENS & OVERLAYS (スタート・設定・ボタンなど)
   ========================================================================== */
/* 画面共通レイアウト */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-screen-overlay);
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

/* タイトル・スタート画面 */
#start-screen h1 {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-cyan);
    text-shadow: 3px 3px var(--color-magenta);
    margin: 0;
}

#start-screen p {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 20px;
}

/* リザルト（結果）画面 */
.mission-header {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    background: var(--color-cyan);
    color: #000;
    padding: 2px 8px;
    display: inline-block;
    margin-bottom: 10px;
}

.result-msg {
    color: var(--color-cyan);
    font-size: 16px;
    margin-bottom: 15px;
    text-shadow: 0 0 5px var(--color-cyan);
}

.stats-container {
    margin: 15px 0;
    padding: 10px;
    border-top: 1px double var(--color-cyan);
    border-bottom: 1px double var(--color-cyan);
    font-size: 10px;
    text-align: left;
    line-height: 1.8;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    width: 220px;
}

.stats-label { color: var(--color-gray-light); }
.stats-value { color: var(--color-white); }

/* 汎用共有ボタン */
#share-btn {
    display: none; 
    margin-top: 80px;
    padding: 12px 24px;
    background-color: var(--color-black); 
    color: var(--color-white);
    border: 1px solid var(--color-white); 
    border-radius: 4px;
    font-family: 'Arial Black', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#share-btn:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}

/* ──────────────────────────────────────────────────────────────────────────
   🔧 CONFIG SCREEN (設定画面アイテム)
   ────────────────────────────────────────────────────────────────────────── */
/* コンフィグ画面 */
#config-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-config-system);
    background: var(--color-crt-blue);
    color: var(--color-white);
    padding: 20px 15px;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#config-screen p {
    text-align: center;
    width: 100%;
    line-height: 1.6;
}

#config-menu {
    width: 90%;
    margin-top: 10px;
}

/config-menu .menu-space {
    height: 20px; /* 元の<BR>と同じくらいの好みの高さに調整してください */
    transition: height 0.4s ease;
}

#config-open-btn {
    position: absolute;
    bottom: 4cqw;
    left: 4cqw;
    z-index: var(--z-ui-hud);
    cursor: pointer;
}

#config-open-btn span {
    font-size: 2.5cqw;
    color: var(--color-gray-light);
    border: 1px solid var(--color-gray-light);
    padding: 1cqw 1.5cqw;
}

.config-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 8px 0;
    font-size: 10px;
    padding: 5px 8px;
    box-sizing: border-box;
    white-space: nowrap;
    
    /* アニメーションを滑らかにするための仕込み */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    max-height: 40px; 
    opacity: 1;
    overflow: hidden; 
}

#config-menu .menu-space {
    height: 20px; /* 元の<BR>と同じくらいの好みの高さに調整してください */
    transition: height 0.4s ease;
}

/* ホバー・アクティブ状態 */
.config-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.config-item.active {
    background: var(--color-white);
    color: var(--color-black);
}

/* 選択中の値の点滅（通常） */
.config-item.active:not(.danger) .value {
    animation: blink 0.5s infinite; 
}

/* 警告状態（SURE?） */
.config-item.active.danger {
    background: #f00 !important;
    color: #fff !important;
}

.config-item.active.danger .value {
    animation: blink-fast-anim 0.2s infinite; /* 高速点滅を確実に適用 */
}

.config-item .inner-val {
    display: inline-block;
    width: 5.5rem;        
    text-align: center;   
    font-variant-numeric: tabular-nums; /* 数字・符号の道連れズレを防止 */
}

/* ──────────────────────────────────────────────────────────────────────────
   🎵 AUDIO EQUALIZER CONTAINER & BGM TITLE (同期表示システム)
   ────────────────────────────────────────────────────────────────────────── */
#eq-container {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 500px;
    z-index: 10;
    background: rgba(15, 10, 0, 0.75);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
    text-align: center;
    padding: 2.5cqw 3.5cqw;
    container-type: inline-size;
    
    /* 🌟 イコライザー全体をじんわり出現させる（JSの表示制御と連動） */
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
    display: none;
}

/* 🟢 引っ越してきたBGM曲名の液晶ディスプレイ風スタイリング */
.bgm-title {
    width: 100%;
    text-align: center;       
    font-size: 0.9rem;        
    color: #39ff14;           /* ネオングリーン */
    background: rgba(0, 0, 0, 0.4); 
    
    padding: 8px 0;
    margin: 0 0 15px 0;       /* 下のアナライザータイトルとの隙間 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);    
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    font-weight: bold;
    letter-spacing: 2px;      
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.6); 
    min-height: 1.2em;        

    /* 🌟 イコライザーの展開と同時にフェードインさせるための初期設定 */
    opacity: 0;
    transition: opacity 0.4s ease 0.2s; /* わずかに遅れて浮かび上がらせる演出 */
}

/* 🌟【超重要】BGMテストモード時、コンテナ内の曲名を100%確実に浮き上がらせる */
.bgm-testing-mode #eq-container .bgm-title {
    opacity: 1 !important;
}

.eq-label {
    font-size: 2cqw; 
    color: rgba(255, 215, 0, 0.6);
    margin-bottom: 1.8cqw;
    letter-spacing: 0.5cqw;
}

#eq-overlay-canvas {
    width: 100%;
    height: 20.0cqw; 
}

/* EQ各バンドの文字色（機材感演出） */
.eq-label-low  { color: #ff4500; font-weight: bold; }
.eq-label-mid  { color: #39ff14; font-weight: bold; }
.eq-label-high { color: #00ffff; font-weight: bold; }

/* ──────────────────────────────────────────────────────────────────────────
   🔄 BGM TEST 実行中のレイアウト変形（メニューの開閉アニメーション）
   ────────────────────────────────────────────────────────────────────────── */

/* 🔒 通常時：AUDIO ROOM と EQ3種を完全に畳んで消去しておく */
#config-screen .config-item[data-setting="audio_room"],
#config-screen .config-item[data-setting="eq_low"],
#config-screen .config-item[data-setting="eq_mid"],
#config-screen .config-item[data-setting="eq_high"] {
    max-height: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 1. 🎵 BGMテスト中：ゲーム設定項目（不要なもの）をシュッと縦に畳んで隠す */
#config-screen.bgm-testing-mode .config-item[data-setting="difficulty"],
#config-screen.bgm-testing-mode .config-item[data-setting="lives"],
#config-screen.bgm-testing-mode .config-item[data-setting="extend"],
#config-screen.bgm-testing-mode .config-item[data-setting="reset_score"] {
    max-height: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 2. 🔓 BGMテスト中：隠していたオーディオ系メニューを「ニュッ」と一斉に出現させる */
#config-screen.bgm-testing-mode .config-item[data-setting="audio_room"],
#config-screen.bgm-testing-mode .config-item[data-setting="eq_low"],
#config-screen.bgm-testing-mode .config-item[data-setting="eq_mid"],
#config-screen.bgm-testing-mode .config-item[data-setting="eq_high"] {
    max-height: 40px !important;
    padding: 5px 8px !important; 
    margin: 8px 0 !important;    
    opacity: 1 !important;
    pointer-events: auto;        
}

/* 3. 改行（br）の隙間を排除 */
#config-screen.bgm-testing-mode #config-menu br {
    display: block;
    content: "";
    margin: 0 !important;
    height: 0px !important;
    transition: height 0.4s ease;
}

/* 4. イコライザーコンテナをメニューの最下部にドッキング */
#config-screen.bgm-testing-mode #eq-container {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
}

#config-screen.bgm-testing-mode #config-menu .menu-space {
    height: 0px;
    overflow: hidden; /* 中身がはみ出ないように念のため */
}

/* ==========================================================================
   [SECTION-CREDIT] : STAFF ROLL (スタッフロール画面)
   ========================================================================== */
#credit-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--z-screen-overlay);
    background: var(--color-black);
    font-family: 'DotGothic16', sans-serif;
    box-sizing: border-box;
    text-align: left;
    display: none;
}

#credit-screen h2 {
    color: var(--color-cyan);
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
}

.credit-content {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.credit-content p {
    font-size: 14px;
    margin-bottom: 4cqw;
}

.credit-content .small-text {
    font-size: 14px;
    color: var(--color-gray-light); /* タイポ（color: の抜け）を修正 */
}

.credit-content .license-en-text,
.credit-content .license-jp-text {
    line-height: 1.4;
    text-align: justify;
}

.credit-content .license-en-text { font-size: 12px; }
.credit-content .license-jp-text { font-size: 10px; }

.scrolling .credit-content {
    animation: credit-scroll 45s linear forwards;
}

.credit-label {
    color: var(--color-gray-light);
    font-size: 14px;
    margin-bottom: 5px;
}

.credit-name {
    color: var(--color-white);
    font-size: 16px;
}


/* ==========================================================================
   [SECTION-ANIMATION] : KEYFRAMES
   ========================================================================== */
/* 通常点滅（スタート画面、メニュー選択など共有） */
.blink {
    animation: blink 1s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 高速点滅（ニューレコード、危険警告など共有） */
@keyframes blink-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.new-record {
    display: inline-block;
    color: var(--color-yellow) !important;
    font-size: 14px;
    text-shadow: 0 0 8px var(--color-white);
    animation: blink-fast 0.4s infinite;
    margin-top: 10px;
}

/* 残機アップ時の一瞬の点滅 */
@keyframes extend-blink-effect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 武器ヒント用のゆるやかな点滅 */
@keyframes weapon-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* クレジットスクロール */
@keyframes credit-scroll {
    0% { transform: translateY(80vh); }
    100% { transform: translateY(-100%); }
}

/* ==========================================================================
   [CINEMATIC-HTML] : 全画面
   ========================================================================== */
#fullscreen-kv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500; /* Canvas(10)やHUD(150)を完全に置き去りにして最前面へ */
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.0s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 文字全体のコンテナ（中央配置・ネオン発光） */
.fullscreen-text-container {
    text-align: center;
    z-index: 510;
    font-family: 'Press Start 2P', cursive;
    pointer-events: none;
}

.fullscreen-title {
    font-size: 3vw; /* ブラウザ幅に美しく比例 */
    min-size: 20px;
    color: #FFD700;
    text-shadow: 
        -2px -2px 0 #000,  2px -2px 0 #000,
        -2px  2px 0 #000,  2px  2px 0 #000, /* 👈 まず文字の周りを真っ黒で強固にフチ取る */
        0 0 15px rgba(255, 215, 0, 0.9),    /* 👈 その外側を強い金色の光で包む */
        0 0 30px rgba(255, 128, 0, 0.7);    /* 👈 さらに広範囲をオレンジの光で包む */
    margin: 0 0 20px 0;
    letter-spacing: 2px;
}

.fullscreen-subtitle {
    font-size: 1.5vw;
    min-size: 11px;
    color: #F8F8F8;
    text-shadow: 
        -1.5px -1.5px 0 #000,  1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,  1.5px  1.5px 0 #000, /* 👈 少し細めの黒フチ */
        0 0 10px rgba(255, 255, 255, 0.8);          /* 👈 白い光のエフェクト */
    margin: 0;
    opacity: 0.9;
}

/* 🚀 HTML側のドラマチック自機ワープアニメーション */
#fullscreen-warp-player {
    position: absolute;
    bottom: -100px; /* 最初は画面の下の外側に隠す */
    left: 50%;
    transform: translateX(-50%);
    width: 64px;  /* ドットが綺麗に見えるジャストサイズ（お好みで調整） */
    height: 64px;
    image-rendering: pixelated; /* ドット絵のキレを維持 */
    z-index: 505;
}

/* 自機が動く時のアニメーションクラス（JSから発動） */
.trigger-warp {
    /* 1秒かけて下から定位置(75%)へスッと登場 */
    animation: player-entrance 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards,
               /* 登場から5.5秒後、0.5秒の超絶爆速で宇宙の彼方へ消え去る */
               player-warp-away 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 5.5s forwards;
}

@keyframes player-entrance {
    0% { bottom: -100px; }
    100% { bottom: 20%; } /* 下部20%の黄金比位置で待機 */
}

@keyframes player-warp-away {
    0% { bottom: 20%; transform: translateX(-50%) scale(1); filter: brightness(1); }
    50% { filter: brightness(3); } /* ワープの瞬間エネルギーで輝く */
    100% { bottom: 120vh; transform: translateX(-50%) scale(0.3); opacity: 0; } /* 遥か彼方へ */
}