/* ==================================== */
/* 🌐 Global Styles */
/* ==================================== */
body {
    font-family: 'Orbitron', sans-serif;
    background-color: #0d0d1e;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

/* ==================================== */
/* 🌌 Space Background Animations (★点滅に変更) */
/* ==================================== */
@keyframes star-blink {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.2; }
}
.stars {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 200vh;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}
.stars.layer1 {
    background-image: radial-gradient(circle at 10% 20%, #fff 1px, transparent 1px), radial-gradient(circle at 30% 70%, #fff 1px, transparent 1px), radial-gradient(circle at 50% 50%, #fff 1px, transparent 1px), radial-gradient(circle at 70% 30%, #fff 1px, transparent 1px), radial-gradient(circle at 90% 80%, #fff 1px, transparent 1px);
    background-size: 100px 100px;
    animation: star-blink 4s linear infinite; /* ★変更 */
}
.stars.layer2 {
    background-image: radial-gradient(circle at 15% 85%, #fff 1.5px, transparent 1.5px), radial-gradient(circle at 45% 15%, #fff 1.5px, transparent 1.5px), radial-gradient(circle at 65% 75%, #fff 1.5px, transparent 1.5px);
    background-size: 180px 180px;
    animation: star-blink 6s linear infinite; /* ★変更 */
}
.stars.layer3 {
    background-image: radial-gradient(circle at 20% 60%, #fff 2px, transparent 2px), radial-gradient(circle at 80% 20%, #fff 2px, transparent 2px);
    background-size: 250px 250px;
    animation: star-blink 8s linear infinite; /* ★変更 */
}

/* ==================================== */
/* 🎮 Game Container (★重要変更箇所) */
/* ==================================== */
.game-container {
    background-color: rgba(18, 18, 30, 0.9);
    border-radius: 15px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.3) inset;
    width: 90vw;
    max-width: 800px;
    height: 90vh;
    max-height: 900px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: box-shadow 0.5s ease-in-out;
    
    /* ★変更: Gridレイアウトで重ね合わせと中央配置を両立 */
    display: grid;
    /* ★追加: グリッドのサイズを明示的に定義 */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 30px;
}

/* ==================================== */
/* 🖥️ Screen Layouts & Transitions */
/* ==================================== */
.game-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    
    grid-area: 1 / 1 / 2 / 2; /* 全てのスクリーンを同じグリッドセルに配置 */
    opacity: 0;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
    visibility: hidden;
    pointer-events: none;
    /* ★ 画面自体がはみ出さないように */
    overflow: hidden; 
}

.game-screen.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 各画面の縦方向の配置調整 */
#title-screen { justify-content: space-evenly; }
#mode-select-screen { justify-content: center; }
#quiz-screen { 
    justify-content: flex-start; /* ★ 変更: space-between から変更 */
    gap: 10px; 
    overflow-y: auto; /* ★ 修正: クイズ画面全体がはみ出た場合にスクロール */
    overflow-x: hidden;
}
#final-screen { justify-content: center; gap: 10px; }

/* ==================================== */
/* 📝 Text Styles (★サイズアップ) */
/* ==================================== */
h1, .main-title {
    color: #00ffff;
    font-size: clamp(2.5em, 7vw, 4em);
    margin: 0;
    text-shadow: 0 0 15px #00ffff, 0 0 20px #00ffff;
    letter-spacing: 3px;
    animation: neon-flicker 1.5s infinite alternate;
}
@keyframes neon-flicker {
    from { text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; opacity: 1; }
    to { text-shadow: 0 0 10px #00ffff, 0 0 15px #00ffff; opacity: 0.9; }
}

.subtitle {
    font-size: clamp(1em, 2vw, 1.2em);
    color: #c0c0c0;
    margin: 0;
}

.section-title {
    font-size: clamp(1.8em, 5vw, 2.5em); /* ★サイズアップ */
    color: #00ffff;
    margin: 0;
}

/* ==================================== */
/* 🚀 Buttons (★サイズアップ) */
/* ==================================== */
button {
    background-color: rgba(0, 170, 255, 0.8);
    color: #fff;
    border: 1px solid #00aaff;
    padding: 12px 25px; /* ★サイズアップ */
    border-radius: 8px;
    cursor: pointer;
    font-size: clamp(1em, 2.5vw, 1.4em); /* ★サイズアップ */
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}
button:hover {
    background-color: #0077cc;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.8);
}
button:disabled {
    background-color: #3a3a4a;
    border-color: #555;
    box-shadow: none;
    cursor: not-allowed;
    color: #888;
}
.start-btn {
    background-color: #00ff00;
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}
.start-btn:hover { background-color: #00cc00; }

.mode-btn, .difficulty-btn, .lang-btn {
    margin: 5px;
    background-color: #33334f;
    border: 1px solid #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}
.mode-btn.active, .difficulty-btn.active, .lang-btn.active {
    background-color: #00aaff;
    border-color: #00aaff;
    box-shadow: 0 0 15px #00ffff;
    transform: scale(1.05);
}
.answer-btn {
    font-size: 2em; /* ★サイズアップ */
    padding: 15px 40px; /* ★サイズアップ */
    margin: 5px;
    min-width: 150px; /* ★サイズアップ */
}
#hint-button {
    background-color: #ff8c00;
    border-color: #ff8c00;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
    margin-top: 10px;
}
#hint-button:hover { background-color: #cc7000; }

/* ==================================== */
/* 🧩 UI Components (★サイズアップ) */
/* ==================================== */
.selection-group { margin-bottom: 5px; text-align: center; }
.selection-group label {
    font-size: 1.4em; /* ★サイズアップ */
    color: #00ffff;
    margin-bottom: 10px;
    display: block;
}

.quiz-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1.2em; /* ★サイズアップ */
    color: #00ffff;
    flex-shrink: 0; /* ★ ヘッダーは縮小させない */
}
.question-area {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 30px; /* ★枠を大きく */
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* overflow-y: auto; */ /* ★ 修正: スクロールを削除 */
    flex-shrink: 1; /* ★ 縮小を許可 */
    min-height: 50px; /* ★ 最小高さを追加 */
}
#question-text {
    font-size: clamp(1.4em, 3.5vw, 2.0em); /* ★サイズアップ */
    text-shadow: 0 0 5px #00ffff;
    width: 100%;
    text-align: left;
    word-break: break-word; /* 改行を制御 */
    margin: 0;
}
.answer-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* ★ 回答欄は縮小させない */
}
.answer-buttons { display: flex; justify-content: center; gap: 20px; }

#result-feedback, #hint-display-area {
    border-radius: 8px;
    padding: 15px 20px; /* ★枠を大きく */
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    overflow-y: auto; /* ★ はみ出し防止のためスクロールを追加 */
    max-height: 150px;  /* ★ 変更: 25% から 150px (固定値) に変更 */
    flex-shrink: 0;   /* ★ これらは縮小させない */
}

#result-feedback.visible, #hint-display-area.visible {
    opacity: 1;
    visibility: visible;
}

#result-feedback {
    background-color: rgba(0, 0, 0, 0.7);
    word-break: break-word;
}
#hint-display-area {
    background-color: rgba(50, 50, 0, 0.7);
    border: 1px solid orange;
    color: #ffda6a;
    word-break: break-word;
}
#feedback-message { font-size: 1.8em; color: #00ffff; margin: 0 0 10px 0; }
#explanation-text { font-size: 1.3em; margin: 0; }

.rank-box { margin: 0; text-align: center; }
#final-result-title { font-size: 2.2em; color: #00ff00; margin: 0; }
.rank-label { font-size: 1.2em; color: #00ffff; margin: 0; }
#rank-display {
    font-size: 3.5em;
    color: #ff00ff;
    text-shadow: 0 0 20px #ff00ff;
    margin: 0;
}
#final-message { font-size: 1.2em; margin: 0; text-align: center; }
#try-again-button { background-color: #ff6600; border-color: #ff6600; }
#try-again-button:hover { background-color: #cc5200; }

.rank-table-container { 
    width: 90%; 
    margin-top: 10px; 
    overflow-y: auto; /* ★ テーブルもはみ出たらスクロール */
}
.rank-table { width: 100%; border-collapse: collapse; font-size: clamp(0.8em, 2vw, 1em); } /* ★サイズアップ */
.rank-table th, .rank-table td { border: 1px solid rgba(0, 255, 255, 0.5); padding: 8px; text-align: center; }
.rank-table th { background-color: rgba(0, 255, 255, 0.2); color: #00ffff; }
.rank-table .rank-s td { color: #ff00ff; font-weight: bold; }
.rank-table .rank-a td { color: #00ff00; }

/* ==================================== */
/* 🏆 Rank Animations */
/* ==================================== */
@keyframes rank-s-glow {
    0% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3) inset; border-color: rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.7) inset; border-color: rgba(255, 215, 0, 1); }
    100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3) inset; border-color: rgba(255, 215, 0, 0.5); }
}
.s-rank-celebration { animation: rank-s-glow 1.5s infinite; }
@keyframes rank-a-sparkle {
    0%, 100% { text-shadow: 0 0 20px #ff00ff; }
    50% { text-shadow: 0 0 30px #ffffff, 0 0 40px #ff00ff; }
}
#rank-display.a-rank-sparkle { animation: rank-a-sparkle 1s infinite; }

/* ==================================== */
/* 📞 Responsive Adjustments */
/* ==================================== */
@media (max-width: 480px) {
    .game-container { padding: 15px; }
    .answer-buttons { flex-direction: column; width: 100%; gap: 10px; }
    .answer-btn { width: 90%; margin: 0 auto; }
    #hint-button { width: 90%; margin: 10px auto 0; }
}


/* ==================================== */
/* ★★★ シューティング背景アニメーション (2セット・縦長修正) ★★★ */
/* ==================================== */

/* アニメーションのコンテナ */
#shooting-bg-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; /* ゲームコンテナ(z-index: 1)の背面 */
    pointer-events: none;
    overflow: hidden;
    /* 初期状態では非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

/* body.shooting-active クラスが付いた時に表示 */
body.shooting-active #shooting-bg-container {
    opacity: 1;
    visibility: visible;
}

/* 1. 戦闘機 (共通スタイル) (★3倍に拡大) */
.shooter-player {
    position: absolute; 
    left: 10vw; 
    width: 15px; /* 1ドットのサイズ (5px * 3) */
    height: 15px; /* 1ドットのサイズ (5px * 3) */
    /* box-shadow: X Y 色 (★すべて3倍) */
    box-shadow: 
        0px 0px #fff, 15px 0px #fff,
        -15px 15px #44f, 0px 15px #fff, 15px 15px #fff, 30px 15px #44f,
        -15px 30px #fff, 0px 30px #44f, 15px 30px #44f, 30px 30px #fff,
        /* 機首 (赤) */
        0px 45px #f00, 15px 45px #f00,
        /* 翼 (白) */
        -30px 15px #fff, -45px 15px #fff, 45px 15px #fff, 60px 15px #fff;
}

/* 2. 敵 (共通スタイル) (★5倍・縦長に修正) */
.shooter-enemy {
    position: absolute; 
    right: 10vw; 
    width: 25px; /* 1ドットのサイズ (5px * 5) */
    height: 25px; /* 1ドットのサイズ (5px * 5) */
    /* box-shadow: X Y 色 (★すべて5倍 + 縦長化) */
    box-shadow: 
        /* 頭部 */
        0px 0px #808, 25px 0px #808,
        -25px 25px #808, 0px 25px #222, 25px 25px #222, 50px 25px #808,
        /* 目 (赤) */
        -25px 0px #f00, 50px 0px #f00,
        /* 翼 (紫) */
        -50px 0px #808, -75px -25px #808, 75px 0px #808, 100px -25px #808,
        
        /* ★ここから胴体・しっぽ (縦長化) */
        0px 50px #222, 25px 50px #222,
        -25px 75px #808, 0px 75px #222, 25px 75px #222, 50px 75px #808,
        0px 100px #222, 25px 100px #222,
        0px 125px #808, 25px 125px #808,
        0px 150px #222, 25px 150px #222,
        0px 175px #808, 25px 175px #808;
}

/* 3. ビーム (戦闘機・黄色) (共通スタイル) */
.player-beam {
    position: absolute;
    width: 70px; 
    height: 15px; 
    background-color: #ff0;
    box-shadow: 0 0 15px #ff0; 
    /* 位置 (機首から発射) */
    top: 42px; /* (45 - (15-9)/2) */
    left: 75px; 
    opacity: 0;
}

/* 4. ビーム (敵・赤色) (共通スタイル) */
.enemy-beam {
    position: absolute;
    width: 80px; 
    height: 80px; 
    border-radius: 50%;
    background-color: #f00;
    box-shadow: 0 0 15px #f00; 
    /* 位置 (頭部から発射) */
    top: -15px; /* (0 - (80-50)/2) */
    right: 125px; 
    opacity: 0;
}

/* ==================================== */
/* ★ 機体・ビームの個別設定 (★上段も可動に変更) */
/* ==================================== */

/* --- 上段セット (★可動) --- */
.shooter-player-1 {
    animation: move-player-1 2s infinite alternate ease-in-out; /* ★アニメーション追加 */
}
.shooter-enemy-1 {
    animation: move-enemy-1 2.5s infinite alternate ease-in-out; /* ★アニメーション追加 */
}
.player-beam-1 {
    animation: shoot-player 1.2s linear infinite;
    animation-delay: 0.8s; /* タイミングずらし */
}
.enemy-beam-1 {
    animation: shoot-enemy 1.0s linear infinite;
    animation-delay: 1.0s; /* タイミングずらし */
}

/* --- 下段セット (可動) --- */
.shooter-player-2 {
    animation: move-player-2 2s infinite alternate ease-in-out; /* ★名前変更 */
}
.shooter-enemy-2 {
    animation: move-enemy-2 2.5s infinite alternate ease-in-out; /* ★名前変更 */
}
.player-beam-2 {
    animation: shoot-player 1.2s linear infinite;
    animation-delay: 0.2s;
}
.enemy-beam-2 {
    animation: shoot-enemy 1.0s linear infinite;
    animation-delay: 0.5s;
}


/* アニメーション定義 */
/* ★上段の動き */
@keyframes move-player-1 {
    from { top: 15vh; }
    to { top: 35vh; }
}
@keyframes move-enemy-1 {
    from { top: 10vh; }
    to { top: 30vh; }
}

/* ★下段の動き (名前変更) */
@keyframes move-player-2 {
    from { top: 60vh; } /* 下段で動かす */
    to { top: 80vh; }
}
@keyframes move-enemy-2 {
    from { top: 55vh; } /* 下段で動かす */
    to { top: 85vh; }
}
@keyframes shoot-player {
    0% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(80vw); } /* 画面右外へ */
}
@keyframes shoot-enemy {
    0% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-80vw); } /* 画面左外へ */
}

/* 親要素（タイトル画面）の基準位置設定 */
#title-screen {
    position: relative; /* これが入っていないと画面全体の右下に行ってしまう場合があります */
}

/* 右下の文字のスタイル */
.bottom-right-text {
    position: absolute; /* 自由配置モードにする */
    bottom: 20px;       /* 下からどれくらい離すか */
    right: 20px;        /* 右からどれくらい離すか */
    
    color: #ffffff;     /* 文字色（背景に合わせて白など） */
    font-size: 14px;    /* 文字の大きさ */
    font-family: 'Orbitron', sans-serif; /* もしフォントを統一するなら指定 */
    text-align: right;
}

/* 親要素（タイトル画面）の基準位置設定 */
#title-screen {
    position: relative; 
}

/* 右下の注意事項テキストの設定 */
.bottom-right-text {
    position: absolute; /* 自由配置モード */
    
    /* ▼ 位置の調整（数字を変えると動きます） */
    bottom: 15px;       /* 下からの距離 */
    right: 20px;        /* 右からの距離 */
    
    /* ▼ 文字の見た目 */
    color: #ffffff;     /* 文字色（白） */
    font-size: 12px;    /* 文字サイズ（小さめに設定中） */
    text-align: right;  /* 右揃え */
    line-height: 1.5;   /* 行間（複数行あるとき用） */
    opacity: 0.8;       /* 少し透明にして目立ちすぎないようにする（1.0で不透明） */
    
    /* ▼ フォント設定 */
    /* ゲームっぽいフォントを使いたい場合は 'Orbitron' を残す */
    /* 普通の日本語フォントにしたい場合は 'sans-serif' だけにする */
    font-family: 'Orbitron', sans-serif; 
    
    pointer-events: none; /* ゲーム操作の邪魔にならないようにする */
}