/* ==========================================
   1. フォント
   ========================================== */
/* orbitron-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/orbitron-v35-latin-500.woff2') format('woff2');
}

/* orbitron-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/orbitron-v35-latin-700.woff2') format('woff2');
}

/* orbitron-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/orbitron-v35-latin-900.woff2') format('woff2');
}


/* ==========================================
   2. CSS変数（テーマカラーと共通設定）
   ========================================== */
:root {
    --color-bg: #050505;
    
    /* メインカラー (青) */
    --color-primary: #3498db;
    --color-primary-rgb: 52, 152, 219;
    
    /* デンジャーカラー (赤) */
    --color-danger: #e74c3c;
    --color-danger-rgb: 231, 76, 60;
    
    /* サクセスカラー (緑) */
    --color-success: #2ecc71;
    --color-success-rgb: 46, 204, 113;
    
    /* コンボ・アクセント (オレンジ) */
    --color-combo: #f39c12;
    
    /* テキストカラー */
    --text-main: #ffffff;
    --text-dim: #aaaaaa;

    /* --- Z-index --- */
    /* レイヤー0: 背景 */
    --z-bg: -10;

    /* レイヤー1: ゲームプレイ中UI・演出（10〜90） */
    --z-overlay: 10;    /* 各種オーバーレイの暗転背景 */
    --z-msg: 30;        /* ゲーム内メッセージ・コンボ演出 */
    --z-ui: 50;         /* 常時表示システムUI */

    /* レイヤー2: フルスクリーンスクリーン（100〜290） */
    --z-ach: 100;       /* 実績画面 */
    --z-home: 200;      /* ホーム画面 */
    --z-opt: 250;       /* オプション画面 */

    /* レイヤー3: 通知・トースト（300〜） */
    --z-unlock: 300;    /* 実績解除のポップアップ通知 */
    --z-toast: 310;     /* バージョン更新内容トースト */
    --z-notice: 1500;   /* メンテナンスのポップアップ通知 */

    /* レイヤー4: スプラッシュスクリーン（1000） */
    --z-splash: 1000;   /* スプラッシュ画面 */
}


/* ==========================================
   3. Z-Index 階層表
   ==========================================
    【Global Z-Index】 (画面全体の重なり順と拡張用空き枠)
     -10 : var(--z-bg)      (背景 / バスケットボール)
       0 : [Base Canvas]    (ゲームプレイ画面本体 ※指定なし)
      10 : var(--z-overlay) (オーバーレイ背景 / 暗転)
      [20付近：拡張枠（暗転のすぐ上に置きたい背景演出など）]
      30 : var(--z-msg)     (ゲーム内エフェクト / テキスト)
      [40付近：拡張枠（コンボ文字より手前に出したいエフェクトなど）]
      50 : var(--z-ui)      (ゲーム内HUD / 常時表示ボタン)
      [60〜90：拡張枠（ゲームプレイ中にHUDの手前に出す一時的なUIなど）]
     100 : var(--z-ach)     (アチーブメント画面)
      [110〜190：拡張枠（ショップ画面やランキング画面など、ホームの下層画面）]
     200 : var(--z-home)    (ホーム画面)
      [210〜240：拡張枠（ホーム画面の上に被せるイベントポップアップなど）]
     250 : var(--z-opt)     (オプション画面)
      [260〜290：拡張枠（ゲーム終了時の詳細リザルト統計画面など）]
     300 : var(--z-unlock)  (実績解除のポップアップ通知)
     310 : var(--z-toast)   (バージョン更新内容トースト)

     1000: var(--z-splash)  (スプラッシュ画面)
     1500: var(--z-notice)  (メンテナンスのポップアップ通知)
    
    【Local Z-Index】 (特定の親要素内でのみ有効な重なり順)
       5 : .home-navbar     (ホーム画面内で手前)
       2 : .home-nav-btn    (ナビバー内でさらに手前)
   ========================================== */


/* ==========================================
   4. ベース設定・基本タグ
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--color-bg);
    display: flex; justify-content: center; align-items: center;
    min-height: 100dvh; font-family: 'Orbitron', sans-serif;
    overflow: hidden; user-select: none;
    touch-action: none;
    -webkit-text-size-adjust: 100%;
}

canvas {
    display: block;
    width: 100%; 
    height: 100%;
    background: radial-gradient(circle at 50% 100%, #0d1b2a 0%, #000000 100%);
}

h1 { font-size: 38px; color: var(--color-primary); text-shadow: 0 0 20px var(--color-primary); margin-bottom: 5px; font-weight: 900; }
h2 { font-size: 50px; margin-bottom: 10px; color: var(--color-danger); text-shadow: 0 0 20px var(--color-danger); }

/* Web標準ハイライトの無効化（スマホ対策） */
button, 
.home-nav-btn, 
.main-btn, 
.overlay {
    -webkit-user-select: none; 
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================
   5. ベースコンポーネント（共通部品）
   ========================================== */
/* メインボタンのベーススタイルと派生 */
.main-btn {
    padding: 15px 30px; font-size: 20px; font-family: 'Orbitron', sans-serif;
    background: transparent; color: #fff; border: 2px solid var(--color-primary);
    border-radius: 50px; cursor: pointer; text-transform: uppercase;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4), inset 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    transition: all 0.2s; font-weight: 700; letter-spacing: 2px; width: 100%;
}
.main-btn:hover { background: var(--color-primary); box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.8); }
.main-btn:active { transform: scale(0.95); }

.main-btn.btn-red { border-color: var(--color-danger); box-shadow: 0 0 15px rgba(var(--color-danger-rgb), 0.4), inset 0 0 15px rgba(var(--color-danger-rgb), 0.2); }
.main-btn.btn-red:hover { background: var(--color-danger); box-shadow: 0 0 30px rgba(var(--color-danger-rgb), 0.8); }

.main-btn.btn-white { border-color: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1); background: #000; }
.main-btn.btn-white:hover { background: #222; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }

.main-btn.btn-gray { border-color: #888888; box-shadow: 0 0 15px rgba(136, 136, 136, 0.2), inset 0 0 15px rgba(136, 136, 136, 0.1); color: #ccc; }
.main-btn.btn-gray:hover { background: #555; box-shadow: 0 0 30px rgba(136, 136, 136, 0.5); color: #fff; }

.main-btn.btn-green { border-color: var(--color-success); box-shadow: 0 0 15px rgba(var(--color-success-rgb), 0.2), inset 0 0 15px rgba(var(--color-success-rgb), 0.1); }
.main-btn.btn-green:hover { background: var(--color-success); box-shadow: 0 0 30px rgba(var(--color-success-rgb), 0.5); }

.main-btn.btn-x { border-color: #0b9e3a; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1); background: #000; }
.main-btn.btn-x:hover { background: #076325; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }


/* ==========================================
   6. メインレイアウト（ゲームコンテナ）
   ========================================== */
#game-container {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    box-sizing: border-box;
    margin: auto;
    width: 100%;
    max-width: 450px; max-height: 95dvh;
    aspect-ratio: 450 / 800;
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    box-shadow: 0 0 80px rgba(var(--color-primary-rgb), 0.2);
    overflow: hidden;
    will-change: transform;
}

@media (max-width: 480px) {
    #game-container {
        width: 100vw; height: 100dvh;
        max-width: none; max-height: none;
        aspect-ratio: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* 背景オブジェクト */
.bg-basketball {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 320px; height: 320px; opacity: 0.12; z-index: var(--z-bg); pointer-events: none; user-select: none;
    filter: blur(2px); animation: floatBall 6s ease-in-out infinite;
}
@keyframes floatBall {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    50% { transform: translate(-50%, -54%) rotate(12deg); }
}


/* ==========================================
   7-1. スプラッシュスクリーン（全体）
   ========================================== */
/* 親コンテナ（ベース） */
#splash-screen {
    /* 既存の .overlay を上書きし、フェードアウト可能にする */
    display: flex !important; 
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: var(--z-splash);
    
    /* 背景 */
    background-color: var(--color-bg, #050505);
    background-image: 
        linear-gradient(90deg, rgba(52, 152, 219, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(52, 152, 219, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(52, 152, 219, 0.12) 0%, transparent 80%);
    background-size: 32px 32px, 32px 32px, cover;
    
    /* フェードアウト用のアニメーション設定 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

/* 親コンテナ（アクティブ状態） */
#splash-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: default;
}

/* 親コンテナ（ロード完了後専用） */
#splash-screen.active.ready { cursor: pointer; }

/* ==========================================
   7-2. スプラッシュスクリーン（中央エリア）
   （プロンプト＆ローディング）
   ========================================== */
/* 中央配置用ラッパー */
.splash-prompt {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    width: 100%;
}

/* ローディング中 */
.splash-progress {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: block;
    transform: rotate(-90deg);

    /* 四角い枠の除去 */
    overflow: visible;
    background: transparent;
    border: none;
    outline: none;
}

.splash-bg {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 2.5;
}

.splash-bar {
    stroke: var(--color-primary, #3498db);
    stroke-width: 3;
    stroke-dasharray: 100;
    stroke-dashoffset: 100; /* 初期値100 ＝ ゲージが空の状態 */
    transition: stroke-dashoffset 0.4s ease-out;
    filter: drop-shadow(0 0 6px var(--color-primary, #3498db));
}

/* ロード完了後 */
.splash-prompt p {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 4px;
    margin: 15px 0 0 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
    animation: cyberPulseBlueGlow 2s infinite alternate ease-in-out;
}

/* ==========================================
   7-3. スプラッシュスクリーン（最下部エリア）
   ========================================== */
/* クレジットコンテナ */
.splash-credits {
    margin-top: auto;
    margin-bottom: 6vh;
    text-align: center;
    font-family: sans-serif;
    letter-spacing: 2px;
}

/* 上下段共通 */
.splash-credits p {
    color: var(--text-dim, #aaaaaa);
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
    margin: 0;
    text-shadow: none;
}

/* 上段 */
.splash-credits p:first-child {
    margin-bottom: 6px;
}

/* ==========================================
   7-4. スプラッシュスクリーン（条件分岐での画面）
   （プレイの途中データがある場合）
   ========================================== */
/* レジュームコンテナ */
.splash-resume-container {
    width: 100%;
    max-width: 320px;
    animation: resumeFadeUp 0.4s ease-out forwards;
}

/* レジュームボックス */
.splash-resume-box {
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.15), inset 0 0 15px rgba(52, 152, 219, 0.05);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
}

.resume-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--color-primary, #3498db);
    letter-spacing: 2px;
    margin: 0 0 6px 0;
    text-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.resume-subtitle {
    font-size: 13px;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin: 0 0 18px 0;
    opacity: 0.9;
}

/* ステータス表示パネル */
.resume-stats-panel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 18px;
}

.resume-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #f39c12;
    text-shadow: 0 0 6px rgba(243, 156, 18, 0.4);
}

.resume-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
}

/* 注意書き */
.resume-warning {
    font-size: 12px;
    line-height: 1.5;
    color: #cccccc;
    margin: 0 0 20px 0;
}

.warning-highlight {
    display: block;
    font-size: 11px;
    color: #f39c12;
    margin-top: 4px;
}

/* ボタングループ */
.resume-btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.resume-btn-group .main-btn {
    flex: 1;
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    height: auto !important;
}

/* ==========================================
   7-5. スプラッシュスクリーン（キーフレーム）
   ========================================== */
/* パルスアニメーション */
@keyframes cyberPulseBlueGlow {
    0% {
        opacity: 0.4;
        text-shadow: 0 0 4px rgba(52, 152, 219, 0.4);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(52, 152, 219, 0.9), 0 0 20px rgba(52, 152, 219, 0.5);
    }
}

/* フェードアップアニメーション */
@keyframes resumeFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================
   8. HUD（プレイ中常に表示されるUI群）
   ========================================== */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; padding: 12px; color: var(--text-main);
}

.hud {
    display: flex; justify-content: space-between;
    gap: 8px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    width: 100%;
}

.score-box, .time-box {
    background: rgba(255,255,255,0.05); padding: 8px 12px;
    border-radius: 8px; backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.score-box { width: 170px; }
.time-box { width: 170px; }

/* HUD用HOW TOボタン（HOW TO PLAYで使用中） */
.hud-how-to-btn {
    display: none; 
    pointer-events: auto; 
    cursor: pointer; 
    font-size: 14px; 
    padding: 0 20px; 
    margin: 0; 
    min-height: 0; 
    width: auto;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    background: transparent;
    border-radius: 50px;
    transition: all 0.2s;
    border: 2px solid var(--color-success);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 0 15px rgba(var(--color-success-rgb), 0.1);
}
.hud-how-to-btn:hover { background: rgba(46, 204, 113, 0.5); box-shadow: 0 0 20px rgba(var(--color-success-rgb), 0.5); }
.hud-how-to-btn:active { transform: scale(0.95); }

/* コンボ表示 */
#combo-display {
    position: absolute; top: 80px; left: 15px; font-size: 18px; color: var(--color-combo); opacity: 0;
    transition: opacity 0.3s; text-shadow: 0 0 10px var(--color-combo);
}
#combo-display.active { opacity: 1; animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

/* アチーブメントボタン */
#achievement-btn {
    position: absolute; top: 65px; left: 15px; width: 44px; height: 44px;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%; font-size: 20px; display: flex; justify-content: center; align-items: center;
    cursor: pointer; pointer-events: auto; z-index: var(--z-ui); backdrop-filter: blur(4px);
    box-shadow: 0 0 10px rgba(0,0,0,0.5); color: white; transition: all 0.2s;
}
#achievement-btn:hover { background: rgba(255, 255, 255, 0.2); }
#achievement-btn:active { transform: scale(0.9); }

/* オプションボタン */
#gear-btn {
    position: absolute; top: 65px; right: 15px; width: 44px; height: 44px;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%; font-size: 20px; display: flex; justify-content: center; align-items: center;
    cursor: pointer; pointer-events: auto; z-index: var(--z-ui); backdrop-filter: blur(4px);
    box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: all 0.2s;
}
#gear-btn:hover { background: rgba(255, 255, 255, 0.2); }
#gear-btn:active { transform: scale(0.9); }
#gear-btn.hidden { opacity: 0; pointer-events: none; }

/* 歯車アニメーション */
@keyframes spin-gear { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
.spin-anim { animation: spin-gear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* HUDの表示制御 */
body.hyde-hud .score-box,
body.hyde-hud .time-box,
body.hyde-hud .hud-how-to-btn,
body.hyde-hud #combo-display {
    display: none !important;
}


/* ==========================================
   9. 各種スクリーン（オーバーレイ画面）
   ========================================== */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column;
    justify-content: center; align-items: center; opacity: 0;
    pointer-events: none; transition: opacity 0.2s; backdrop-filter: blur(10px);
    z-index: var(--z-overlay); padding: 30px; text-align: center;
}
.overlay.active { opacity: 1; pointer-events: auto; }

/* オプション画面 */
#options-screen { z-index: var(--z-opt); background: rgba(0, 0, 0, 0.9); }

/* 実績画面 */
#achievement-screen { z-index: var(--z-ach); background: rgba(0, 0, 0, 0.95); padding: 20px 15px; justify-content: flex-start; }
#achievement-screen h2 { font-size: 32px; margin-bottom: 20px; margin-top: 10px; }
.ach-list {
    width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto; max-height: 65vh; padding-right: 5px; margin-bottom: 0;
}
.ach-list::-webkit-scrollbar { width: 5px; }
.ach-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 5px; }
.ach-item {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 12px; display: flex; gap: 15px; align-items: center;
    opacity: 0.5; filter: grayscale(100%); transition: all 0.3s;
}
.ach-item.unlocked { opacity: 1; filter: grayscale(0%); background: rgba(var(--color-success-rgb), 0.1); border-color: rgba(var(--color-success-rgb), 0.4); }
.ach-item-icon { font-size: 28px; width: 40px; text-align: center; }
.ach-item-info { display: flex; flex-direction: column; flex-grow: 1; text-align: left; }
.ach-item-title { font-size: 14px; font-weight: bold; color: #fff; }
.ach-item-desc { font-size: 10px; color: var(--text-dim); margin-top: 4px; line-height: 1.3; }
.ach-item-date { font-size: 10px; color: var(--color-success); margin-top: 4px; text-align: right; font-weight: bold; }
#ach-back-btn { margin-top: 17px; margin-bottom: 17px; padding: 15px 20px; }

/* トレーニング画面 */
.training-overlay {
    background: rgba(0,0,0,0.7); 
    backdrop-filter: blur(5px);
}

/* HOW TOポップアップ */
.howto-popup {
    position: relative;
    width: 95%; max-width: 500px; padding: 20px 30px; 
    background: rgba(15,15,15,0.95); 
    border: 2px solid var(--color-success); border-radius: 12px; 
    box-shadow: 0 0 25px rgba(var(--color-success-rgb), 0.4);
}
#close-howto-btn {
    position: absolute; top: 8px; right: 8px; display: flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: none; border: none;
    color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.instructions {
    width: 100%; max-width: 460px; margin: 0; padding: 0;
    background: none; border: none; border-radius: 12px;
    font-size: 14px; color: #ccc; line-height: 2; text-align: left;
}
.instructions-title {
    font-weight: bold; color: var(--color-success);
    margin-bottom: 8px; text-align: center; letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(var(--color-success-rgb), 0.5);
}

/* 画面内のUI要素・レイアウト */
.highscore-display {
    font-size: 16px; color: var(--color-success); text-shadow: 0 0 10px rgba(var(--color-success-rgb), 0.4);
    margin-top: 30px; margin-bottom: 20px; line-height: 1.4; }

#title-stage-name { color: #888; }
#title-highscore-date { font-size: 14px; color: #888; }

.btn-group { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; width: 100%; max-width: 300px; }
.btn-group button { margin-bottom: 0; }

/* フッター */
.subtitle {
    position: absolute; bottom: 15px; width: 100%; display: flex;
    justify-content: space-between; padding: 0 20px; font-size: 10px; color: #666; letter-spacing: 1px;
    left: 0; box-sizing: border-box; pointer-events: none;
}
.subtitle .ver-text, .subtitle .about-link { pointer-events: auto; cursor: pointer; }
.subtitle .about-link { text-decoration: underline; }

/* 注意書き */
.notice-box {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(93, 93, 94, 0.45); 
    padding: 15px; border-radius: 8px; font-size: 11px; color: #888;
    text-align: center; margin-top: 55px; margin-bottom: 10px; line-height: 1.6; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto;
}

/* 音量コントロールUI */
.vol-container { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vol-row {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 10px; border-radius: 25px; width: 100%;
}
.vol-label { font-size: 13px; font-weight: bold; color: #fff; width: 35px; text-align: left; flex-shrink: 0; }
.vol-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.4);
    color: #fff; border-radius: 50%; width: 28px; height: 28px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: 0.2s; flex-shrink: 0; font-size: 16px;
}
.vol-btn:hover { background: rgba(255,255,255,0.2); }
.vol-btn:active { transform: scale(0.9); }
.mute-btn { border-radius: 10px; width: 34px; border-color: rgba(255,255,255,0.2); }
.mute-btn.muted { background: rgba(var(--color-danger-rgb), 0.2); border-color: rgba(var(--color-danger-rgb), 0.5); color: #ff6b6b; }
.mute-btn:hover { background: rgba(255,255,255,0.2); }
.vol-slider { flex-grow: 1; margin: 0 4px; accent-color: var(--color-primary); cursor: pointer; height: 6px; min-width: 0; }

/* データ同期グループ全体の設定 */
#data-sync-group {
    display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; 
    width: 100%; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#data-sync-group.hidden { display: none; }
#data-sync-group .main-btn {
    display: flex; flex-direction: row; justify-content: center; align-items: center; 
    gap: 8px; flex: 0 0 auto; width: 130px; height: 50px; padding: 0 10px; margin: 0; 
    font-size: 13px; white-space: nowrap; 
}


/* ==========================================
   10. ポップアップ通知系・メッセージ
   ========================================== */
/* ヒットテキスト */
#message-container {
    position: absolute; top: 40%; left: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: var(--z-msg);
}
.popup-msg {
    font-size: 50px; font-weight: 900; text-transform: uppercase; opacity: 0; transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    paint-order: stroke fill;
    -webkit-text-stroke: 6px color-mix(in srgb, currentColor, #000 30%);
    pointer-events: none; position: absolute;
}
.popup-msg.show { opacity: 1; transform: translateY(0) scale(1); }

/* ポップアップ通知のコンテナ共通設定 */
#achievement-popup-container,
#notice-popup-container {
    position: absolute; top: 15px; left: 0; width: 100%; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* Z-indexを指定 */
#achievement-popup-container { z-index: var(--z-unlock); }
#notice-popup-container { z-index: var(--z-notice); }

/* ポップアップ通知の本体共通設定 */
.sys-popup {
    border-radius: 12px; padding: 10px 20px;
    display: flex; align-items: center; gap: 12px;
    transform: translateY(-100px); opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 90%; max-width: 350px;
}
.sys-popup.show { transform: translateY(0); opacity: 1; }
.sys-popup-icon { font-size: 24px; }
.sys-popup-text { display: flex; flex-direction: column; text-align: left; }
.sys-popup-title { font-size: 14px; font-weight: bold; }
.sys-popup-desc { font-size: 10px; }

/* 派生（実績用） */
.sys-popup.type-achievement {
    background: rgba(var(--color-success-rgb), 0.9);
    border: 2px solid #fff; color: #fff;
    box-shadow: 0 0 15px rgba(var(--color-success-rgb), 0.6);
}

/* 派生（メンテナンス用） */
.sys-popup.type-notice {
    background: rgba(243, 156, 18, 0.95);
    border: 2px solid #f9e79f; color: #000;
    box-shadow: 0 0 20px rgba(225, 144, 13, 0.8);
}

/* バージョン更新内容のトースト */
#version-toast {
    position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(var(--color-primary-rgb), 0.9); color: #fff; padding: 8px 16px; padding-right: 42px; border-radius: 8px;
    font-size: 11px; font-weight: bold; letter-spacing: 1px; opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; text-align: left; line-height: 1.4;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.6); z-index: var(--z-toast);
}
#version-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.toast-progress-container {
    position: absolute;
    top: 8px;        /* トースト上部のpadding(8px)に合わせる */
    right: 10px;     /* 右端からの位置 */
    width: 14px;     /* サークルの大きさ */
    height: 14px;
}
.toast-progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 左回転（反時計回り） */
}
.toast-progress-circle .stroke-bg {
    stroke: rgba(255, 255, 255, 0.25); /* 薄い背景円 */
    stroke-width: 4;
}
.toast-progress-circle .stroke-bar {
    stroke: #ffffff; /* 残り時間を示す進捗線の色 */
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
/* トーストが表示された時（.show が付いた時）にアニメーションを開始 */
#version-toast.show .stroke-bar {
    /* main.js側のsetTimeoutに合わせる */
    animation: toast-countdown-anim 4s linear forwards;
}
@keyframes toast-countdown-anim {
    from {
        stroke-dashoffset: 0;   /* 満タン */
    }
    to {
        stroke-dashoffset: 100; /* 空っぽ */
    }
}


/* ==========================================
   11-1. ホーム画面 (新規追加)
   ========================================== */
/* 青黒い背景のグラデーション */
#home-screen {
    /* 画面全体を青黒いサイバー風のグラデーションで塗りつぶす */
    background: radial-gradient(circle at center, #0a1b35 0%, #02050a 100%);
    
    /* 他の画面や既存のUI（右上ボタン等）の上に確実に表示するための指定 */
    z-index: var(--z-home);
    
    /* 画面内を縦並び（列）のレイアウトにする */
    display: flex;
    flex-direction: column;
    
    /* 中身を左右の中央に配置する */
    align-items: center;
    
    /* 将来的に画面下部へ要素を追加した際、ナビバーの裏に隠れないための安全な余白 */
    padding-bottom: 80px;
    
    /* paddingを含めたサイズ計算を行い、画面外への見切れを防ぐ */
    box-sizing: border-box;
}

/* 中央のコンテンツエリア */
.home-content {
    /* 上下の空いたスペースをすべてこのエリアで吸収し、ナビバーを一番下へ押しやる */
    flex: 1;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 画面横幅いっぱいを使用する */
    width: 100%;
}

/* 最下部のナビゲーションバー */
.home-navbar {
    /* 親要素(#home-screen)のpadding等の制約を無視し、画面に対して絶対配置する */
    position: absolute;
    bottom: 0;   /* 画面の最下端にピタッと吸着させる */
    left: 0;     /* 画面の左端に吸着 */
    right: 0;    /* 画面の右端に吸着 */
    
    /* widthを100%に広げつつ、最大幅(450px)を超えた場合は画面中央に配置する */
    margin: 0 auto;
    max-width: 450px;
    
    /* 内部のボタンを横並びにするためのFlexbox設定 */
    display: flex;
    
    /* 6つのボタンを等間隔で配置する（今回はボタン幅が100%を6等分するため実質隙間ゼロ） */
    justify-content: space-evenly;
    
    /* ボタンをナビバーの「下側」に揃えて配置し、上へ飛び出させる */
    align-items: flex-end;
    
    /* ★変更：ナビバーの高さをボタンの「約9割」に設定
       (最小50px 〜 画面幅の15vw 〜 最大68px) */
    height: clamp(50px, 15vw, 68px);
    
    /* ナビバー自体の背景色（少し透明にして重さを軽減） */
    background: rgba(10, 27, 53, 0.6);
    
    /* ナビバーの上辺にだけ、うっすらと青いボーダーライン（ネオン風）を引く */
    border-top: 1px solid rgba(52, 152, 219, 0.3);
    
    /* ★変更：ボタンの角丸(25%)のカーブに合わせ、上辺の左右だけを16px丸める */
    border-radius: 16px 16px 0 0;
    
    /* ボタンが一番下の線に完全にめり込まないよう、下に少しだけクッション（隙間）を作る */
    padding: 0 0 4px 0;
    
    /* ナビバーの背景を通してみえる景色をぼかす（ガラスエフェクト） */
    backdrop-filter: blur(8px);
    
    /* 外側へのドロップシャドウと、内側への光の反射（立体感）を追加 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(52, 152, 219, 0.05);
    
    /* ホーム画面内のコンテンツ（中央に置く文字など）より手前に表示させる */
    z-index: 5;
}

/* 絵文字だけの丸いボタン（角丸スクエア型） */
.home-nav-btn {
    /* 6つのボタンで隙間なく画面横幅(100%)を分割する */
    width: calc(100% / 6);
    
    /* ボタンが大きくなりすぎるのを防ぐ上限サイズ（450px ÷ 6 = 75px） */
    max-width: 75px;
    
    /* 縦横比を1:1に固定し、常に正確な四角形ベースを保つ */
    aspect-ratio: 1 / 1;
    
    /* 画面が狭くても、ブラウザが勝手にボタンを縦長の楕円に潰すのを禁止する */
    flex-shrink: 0;
    
    /* ボタンの下に影を落とし、ナビバーから浮き上がっているように見せる */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    
    /* 枠線が透けすぎないよう、ナビバーより少し濃い背景色を敷く */
    background: rgba(10, 20, 35, 0.6);
    
    /* ボタン自体にも薄いガラスエフェクトをかける */
    backdrop-filter: blur(4px);
    
    /* ボタンを囲むうっすらとした青い枠線 */
    border: 1px solid rgba(52, 152, 219, 0.4);
    
    /* ★正円(50%)ではなく、角丸スクエア型になるように25%を指定 */
    border-radius: 25%;
    
    /* 絵文字をボタンのど真ん中に配置するための設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* マウスを乗せた時に「押せる」ことを示す指マークにする（PC用） */
    cursor: pointer;
    
    /* ボタンの大きさに連動して、中の絵文字も拡大・縮小させる */
    font-size: clamp(20px, 6vw, 30px);
    
    /* ホバーやクリック時の色の変化、へこむ動きを滑らかにする */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* タップした時にブラウザ標準の青い枠線が出るのを消す */
    outline: none;
    
    /* ナビバー(z-index:5)の土台の上に、ボタンを確実に表示させるための設定 */
    z-index: 2;
}

/* ホバーエフェクト（PCでマウスを乗せた時や、タップした瞬間） */
.home-nav-btn:hover {
    /* 背景を少し明るい青に変える */
    background: rgba(52, 152, 219, 0.2);
    /* 枠線をメインカラーにして光らせる */
    border-color: var(--color-primary);
    /* 内側と外側に青い光（ネオン）の影を追加する */
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6), inset 0 0 8px rgba(52, 152, 219, 0.3);
}

/* 押し込みエフェクト（指でボタンを押している最中） */
.home-nav-btn:active {
    /* ボタン全体を少し縮小(0.95倍)し、下へ2pxずらして「沈み込む」物理的な動きを再現 */
    transform: scale(0.95) translateY(2px); 
}

/* ==========================================
   11-2. ホーム画面内パネル共通スタイル
   ========================================== */
.home-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* クラスに hidden が付いている時は非表示にする */
.home-panel.hidden {
    display: none;
}

/* ==========================================
   11-3. ホーム専用・レイアウト
   ========================================== */

/* 1. HOME タイトル */
#home-home-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}

/* ==========================================
   11-4. マップ専用・レイアウト
   ========================================== */

/* 1. MAP タイトル */
#home-map-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}
.map-stage-item {
    margin-bottom: 15px;
    width: 100%;
    max-width: 300px;
    text-align: center;
}
.map-stage-select {
    margin-bottom: 5px;
}
.map-stage-score {
    font-size: 14px;
    color: #ccc;
}
.map-stage-date {
    font-size: 12px;
    color: #888;
}

/* ==========================================
   11-5. アイテム専用・レイアウト
   ========================================== */

/* 1. ITEM タイトル */
#home-items-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}

/* ==========================================
   11-6. ショップ専用・レイアウト
   ========================================== */

/* 1. SHOP タイトル */
#home-shop-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}

/* ==========================================
   11-7. 実績専用・レイアウト
   ========================================== */

/* 1. ACHIEVMENTS タイトル */
#home-ach-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}

/* ==========================================
   11-8. オプション専用・レイアウト
   ========================================== */

/* 1. OPTIONS タイトル */
#home-options-panel h2 {
    color: #fff;
    text-shadow: 0 0 20px #fff;
    margin-top: 50px;
    margin-bottom: 10px;
}

/* 2. 全体の幅を、元のオプション画面の最大幅に合わせる */
#home-options-panel .vol-container,
#home-options-panel .btn-group {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 3. ボタン同士の隙間：BACK TO TITLE の下の余白は不要（罫線側で制御するため） */
#home-options-panel #home-opt-title-btn {
    width: 100%;
    margin-bottom: 0;
}

/* 4. データ同期グループ：元の #data-sync-group と全く同じ余白・罫線を設定 */
#home-options-panel #home-data-sync-group {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタン間の隙間を少し広げて調整 */
    width: 100%;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上部の白い区切り線を復活 */
}

/* 5. EXPORT / IMPORT ボタン：元の .main-btn.btn-x のサイズ感に合わせる */
#home-options-panel #home-data-sync-group .main-btn {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 130px;
    height: 50px; /* 元のボタンの高さに固定 */
    padding: 0 10px;
    margin: 0;
    font-size: 13px; /* 元のフォントサイズに合わせる */
    white-space: nowrap;
}


/* ==========================================
   12. フッターのゴーストクリック対策
   ========================================== */
/* 通常時（画面が非アクティブで透明な時）は、フッター全体のクリックを完全に無効化 */
.overlay .subtitle {
    pointer-events: none !important;
}

/* 画面が .active になった時だけ、フッター内の文字やリンクをクリック可能にする */
.overlay.active .subtitle {
    pointer-events: auto !important;
}