/* ==========================================================================
   Ring of Light Pinball - スマホ＆アプリ内ブラウザ（X/LINE等）完全対応スタイル
   ========================================================================== */

body {
    margin: 0;
    padding: 0;
    background-image: url('night_ring.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* ★画像と混ぜ合わせる色：初期状態を「ほぼ真っ黒」にします */
    background-color: #404040; 
    
    /* ★画像と背景色を掛け合わせて暗くする魔法のプロパティ */
    background-blend-mode: multiply;
    
    /* ★ジャックポット時のフワッとした変化用アニメーション設定 */
    transition: background-color 0.5s ease;

    font-family: sans-serif;
    min-height: 100vh;
    min-height: 100dvh; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

/* 🎉 ジャックポット中にJavaScriptから付与するクラス */
body.jackpot-bg {
    /* 背景色を白（#ffffff）にすると、画像本来の明るさ（100%）になります */
    background-color: #ffffff;
}

/* ==========================================================================
   モバイル操作の最適化（ズーム・選択・ハイライトを完全封鎖）
   ========================================================================== */

/* ゲームに関わる全要素に一括適用 */
html, 
body, 
#game-container, 
#game-canvas, 
#launch-btn, 
.control-guide-area {
    /* 1. タッチ操作の挙動制御（これが最強の設定） */
    touch-action: none; 
    
    /* 2. テキスト選択やメニューの出現を防止 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    
    /* 3. タップ時の青いハイライト（Android/iOS共通）を消去 */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* 補足：HTMLとBODYはスクロールも禁止 */
html, body {
    overflow: hidden;
    overscroll-behavior: none; /* iOSのバウンスも禁止 */
}

/* X等のヘッダー隙間対策の仕上げ */
body.is-twitter-browser .score-board {
    margin-top: -60px; /* 実機で見て -30px〜-35px でピッタリならこの数値 */
}

/* ==========================================================================
   スコアボード
   ========================================================================== */
.score-board {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 計算しやすいよう固定値で指定 */
    z-index: 999999 !important; 
    
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(10, 17, 40, 0.95);
    margin-top: env(safe-area-inset-top);
}

.score-item {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.score-item span {
    font-size: 15px;
}

.score-item.current { color: #D2D7DA; }
.score-item.high    { color: #E60012; }
.score-item.time    { color: #0068B7; }

/* 総経過時間全体のラッピング（カッコと文字の調整） */
.score-item.time .total-wrap {
    font-size: 0.75em;       /* 通常の文字より少し小さくする（縮小度はお好みで） */
    color: #8a94a6;          /* 主張しすぎない落ち着いたネイビーグレー */
    font-weight: normal;     /* 数字の太字（Bold）を解除してスッキリ見せる */
    margin-left: 4px;        /* 残り時間との間に少しだけ隙間を作る */
}

/* カウントアップする数字単体をさらに細かく調整したい場合（任意） */
#total-time {
    /* 必要に応じてフォント色や太さを個別に変えたい場合はここに書けます */
}


/* =============================
   ゲーム台コンテナ（プランA：16:9 完全レターボックス方式）
   ============================= */
#game-container {
    position: relative;
    /* スコアボード(40px)＋セーフエリアの分だけ上にマージンを空ける */
    margin: calc(40px + env(safe-area-inset-top)) auto 0 auto; 

    /* ★ 縦横比を「完全な16:9」にロック */
    aspect-ratio: 9 / 16;
    
    /* ★【ここが超重要】 
       width: 100% を指定すると横幅が画面いっぱいに固定されてしまいます。
       「縦100dvhから諸々を引いた高さ」をベースに、16:9（高さの56.25%）で横幅を自動計算させます。
    */
    height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: 800px; /* PC用などの最大縦幅 */
    width: auto;       /* 横幅は高さに合わせて16:9を維持するように自動決定 */
    max-width: 100vw;  /* 万が一横がはみ出るのを防ぐガード */
    
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    flex-shrink: 1; 
    
    /* Xブラウザ等でツールバーの開閉によるサイズ変化を滑らかに */
    transition: height 0.2s ease-out;
}



/* 中身のCanvasや背景もコンテナの拡縮に追従させる */
#game-bg, #game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#game-bg {
    z-index: 1;
}

/* canvas要素自体の強制引き伸ばし対策 */
#game-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}


/* ==========================================================================
   発射ボタン（16:9の盤面底レイアウトに最適化）
   ========================================================================== */
#launch-btn {
    position: absolute;
    /* ★ パーセンテージにすることで、SE2など狭い画面でも正しく追従 */
    bottom: 18%; 
    right: 11%;
    
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #ff4757;
    color: white;
    border: 2px solid #ffffff;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    z-index: 99999;
}


/* ==========================================================================
   操作ガイドエリア（16:9の盤面底レイアウトに最適化）
   ========================================================================== */
.control-guide-area {
    position: absolute;
    /* ★ パーセンテージでフリッパーの下部に完全に固定 */
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 20%; /* ゲーム画面全体の高さに対する割合にする */
    pointer-events: none;
    display: flex;
    justify-content: space-between; 
    padding: 0 15px; 
    box-sizing: border-box;
    z-index: 99998;
}

/* 左右の操作ガイド表示 */
.control-guide {
    width: 44%; 
    height: 90%; /* エリア内に綺麗に収める */
    background: rgba(255, 255, 255, 0.12); 
    border: 2px solid rgba(255, 255, 255, 0.25); 
    border-radius: 20px 20px 0 0;
    
    display: flex;
    align-items: center; /* 文字を上下中央に */
    justify-content: center;
    
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
}


/* ==========================================================================
   リretryボタン ＆ オーバーレイ
   ========================================================================== */
#retry-btn {
    position: absolute;
    top: 74%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FB8500;
    color: #ffffff;
    border: none;
    padding: 10px 42px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 6px 20px rgba(251, 133, 0, 0.5);
    z-index: 10000;
    cursor: pointer;
    white-space: nowrap;
}

#gameover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 9999;
}

#gameover-overlay.show { opacity: 1; }

.go-text {
    font-size: 48px;
    color: #FFB703;
    font-weight: bold;
    text-shadow: 0 0 10px #fff;
}


/* ==========================================================================
   演出用エフェクトスタイル（タイム延長 ＆ スコア加算ポップアップ）
   ========================================================================== */

/* タイム延長ポップアップ全体のデザイン */
.time-extend-popup {
    position: absolute;
    top: 40%;               /* 画面中央よりやや上 */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;        /* 文字の大きさ */
    font-weight: bold;
    color: #0068B7;         /* 青系 */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 2px 2px 4px #000; /* 光彩と影 */
    font-family: sans-serif;
    pointer-events: none;   /* クリックを邪魔しない */
    z-index: 9999;          /* 一番手前に表示 */
    animation: timePopupAnim 1.0s ease-out forwards; /* 1.0秒で消える */
}

/* タイム用の浮き上がりアニメーション */
@keyframes timePopupAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -20%) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2); /* 最初は少し大きく */
    }
    30% {
        transform: translate(-50%, -50%) scale(1.0); /* 標準サイズに落ち着く */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8); /* 上に登りながら小さく消える */
    }
}

/* スコア加算ポップアップ全体のデザイン */
.score-up-popup {
    position: absolute;
    top: 60px;              /* スコア数字の少し下 */
    left: 10%;
    transform: translateX(-50%);
    font-size: 28px;        /* タイム延長よりは少し小さめ */
    font-weight: bold;
    color: #D2D7DA;
    text-shadow: 0 0 8px rgba(255, 51, 102, 0.8), 1px 1px 2px #000;
    font-family: sans-serif;
    pointer-events: none;
    z-index: 9998;          /* タイム延長(+30s)よりは一歩奥 */
    animation: scorePopupAnim 0.8s ease-out forwards; 
}

/* スコア用の下方向落下・フェードアウトアニメーション */
@keyframes scorePopupAnim {
    0% {
        opacity: 0;
        transform: translate(-10%, 0) scale(0.7);
    }
    20% {
        opacity: 1;
        transform: translate(-10%, -10px) scale(1.1); /* 少し下に弾むように */
    }
    100% {
        opacity: 0;
        transform: translate(-10%, -35px) scale(0.9); /* 下に向かって溶けるように消える */
    }
}