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

body {
    margin: 0;
    padding: 0;
    
    /* 画面サイズ固定とズレ防止の設定 */
    width: 100%;
    height: 100dvh; 
    position: fixed; 
    top: 0;
    left: 0;

    /* 背景画像の表示設定 */
    background-image: url('night_ring.jpg');
    background-repeat: no-repeat;
    /* ★修正：coverだと画面サイズに合わせて縮小されるため、100% 100% にして引き伸ばしを抑制 */
    background-size: cover;
    /* ★修正：背景を固定しつつ、中央基準で表示させる */
    background-position: center center;
    background-attachment: fixed;
    
    /* 画像を暗くする処理 */
    background-color: #404040; 
    background-blend-mode: multiply;
    
    /* ジャックポット用 */
    transition: background-color 0.5s ease;

    font-family: sans-serif;
    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;
}

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

/* ★全要素に一括適用して、要素間の隙間でのダブルタップ拡大なども完全ブロック */
*, *::before, *::after {
    touch-action: none; 
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* HTMLとBODYはスクロール・バウンス（ゴムのように引っ張る挙動）も禁止 */
html, body {
    overflow: hidden;
    overscroll-behavior: none; 
}

/* 名前入力欄など、操作が必要な場所だけ例外で許可 */
input, textarea {
    touch-action: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

/* 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;     
    margin-left: 4px;        
}

/* ==========================================================================
   ゲーム台コンテナ（アスペクト比完全固定・歪み防止版）
   ========================================================================== */
#game-container {
    position: relative;
    /* スコアボード(40px)＋セーフエリアの分だけ上にマージンを空ける */
    margin: calc(40px + env(safe-area-inset-top)) auto 0 auto; 

    /* 横幅を基準に、常に絶対的な9:16を維持させます */
    width: 100vw;
    height: calc(100vw * 16 / 9);
    
    /* もし縦がはみ出そうになったら、縦幅を基準に9:16に縮小させます */
    max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width: calc(
        (100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16
    );

    /* PCなど大画面用のストッパー */
    @media (min-height: 850px) and (min-width: 450px) {
        width: 400px;
        height: 711px;
    }
    
    aspect-ratio: 9 / 16;
    container-type: inline-size;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    flex-shrink: 1; 
    
    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;
    bottom: 16%; 
    right: 8%;
    
    /* 盤面コンテナの横幅に対する割合（%） */
    width: 14%;
    height: auto;
    aspect-ratio: 1 / 1; 
    
    border-radius: 50%;
    background-color: #ff4757;
    color: white;
    border: 2px solid #ffffff;
    
    /* フォントサイズも盤面幅に連動 */
    font-size: 3.7cqw; 
    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: 21%; 
    pointer-events: none;
    display: flex;
    justify-content: space-between; 
    
    padding: 0 4%; 
    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: 4.2cqw; 
    letter-spacing: 0.3cqw; 
}

/* ==========================================================================
   演出用エフェクトスタイル（タイム延長 ＆ スコア加算ポップアップ）
   ========================================================================== */
.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; 
}

@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;          
    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); }
}