/**
 * Tango Puzzle Game - Dopamine Edition Styles (Clean & Responsive)
 * 
 * 機能概要:
 * - PC/スマホ両対応のレスポンシブなUIレイアウト
 * - セルタップ時のジューシーなバウンス (.cell.pop)
 * - ポコポコ飛び出すスコアポップアップ (.score-popup, .score-popup.combo, .score-popup.special)
 * - スコア加算時のスコアボックスバウンス (.score-box.bump)
 * - 行・列完成時の瞬間的な光彩アニメーション (恒常的な色付きは完全排除)
 * - 画面端被りを防ぐコンボバッジのセンタリング配置
 * - 柔軟なステータス領域とランクバッジ表示 (.status, .rank-badge)
 * - タイムアタックのタイマーバウンス & デンジャー発光
 */

/* 全画面エフェクトCanvas */
#fx-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
}

/* ゲーミング・ネオンアクセント */
.dopamine-mode .container {
    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.2), 0 0 25px rgba(0, 184, 148, 0.12);
    border: 1px solid rgba(108, 92, 231, 0.2);
    transition: transform 0.05s ease, box-shadow 0.2s ease;
}

/* ビートパルス */
.beat-pulse {
    animation: beat-zoom 0.12s ease-out;
}

@keyframes beat-zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* HUDステータスタグ表示エリア (盤面上で絶対被らない安全配置) */
.hud-pill-container {
    width: 100%;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    pointer-events: none;
    z-index: 5;
}

.hud-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    animation: pill-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.15s, opacity 0.15s;
}

@keyframes pill-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.hud-pill.stage-pill {
    background: var(--cell-bg);
    color: var(--text);
    border: 1px solid var(--control-border);
}

.hud-pill.combo-pill {
    background: linear-gradient(135deg, #ff7675, #fab1a0);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(255, 118, 117, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hud-pill.mult-pill {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(241, 196, 15, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hud-pill.bump {
    animation: pill-bump 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hud-pill.combo-pill.holding {
    animation: combo-holding-pulse 0.9s ease-in-out infinite alternate;
    box-shadow: 0 0 16px rgba(255, 118, 117, 0.95), 0 0 8px #ffeaa7;
    border: 1px solid #ffeaa7;
}

@keyframes combo-holding-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.08); filter: brightness(1.35); }
}

.hud-pill.combo-pill.broken {
    background: linear-gradient(135deg, #d63031, #2d3436) !important;
    animation: combo-pill-shatter 0.4s ease forwards !important;
}

@keyframes combo-pill-shatter {
    0% { transform: scale(1.2) rotate(0deg); opacity: 1; }
    30% { transform: scale(1.3) rotate(-6deg); }
    60% { transform: scale(0.9) rotate(6deg); }
    100% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
}

@keyframes pill-bump {
    0% { transform: scale(1); }
    50% { transform: scale(1.22); filter: brightness(1.2); }
    100% { transform: scale(1); }
}

/* ポコポコ飛び出すスコアポップアップ (左右ランダム放物線バウンス) */
.score-popup {
    position: fixed;
    pointer-events: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(108, 92, 231, 0.7);
    z-index: 1000;
    animation: score-pop-float 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    white-space: nowrap;
}

.score-popup.combo {
    font-size: 1.5rem;
    color: #ffeaa7;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 14px #fdcb6e;
}

.score-popup.special {
    font-size: 1.8rem;
    color: #55efc4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 18px #00b894;
}

@keyframes score-pop-float {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx, 0px) * 0.4), -24px) scale(1.3) rotate(var(--rot, 0deg));
    }
    60% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx, 0px) * 0.8), -36px) scale(1.1) rotate(calc(var(--rot, 0deg) * 0.8));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px)), -48px) scale(0.85) rotate(var(--rot, 0deg));
    }
}

/* スコアボックスの受取バウンス */
.score-box.bump {
    animation: score-bump-bounce 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes score-bump-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.22); background-color: #fdcb6e; color: #2d3436; }
    100% { transform: scale(1); }
}

/* 浮遊ポップアップテキスト (NICE! / GREAT!) - 盤面中央上部に大きく表示 */
.floating-text {
    position: fixed;
    pointer-events: none;
    font-weight: 900;
    font-size: 1.75rem;
    font-family: 'Nunito', sans-serif;
    color: #ffeaa7;
    text-shadow: 0 0 14px rgba(255, 234, 167, 0.9), 0 3px 6px rgba(0, 0, 0, 0.6);
    z-index: 1001;
    animation: float-up-fade 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    white-space: nowrap;
}

@keyframes float-up-fade {
    0% { opacity: 0; transform: translate(-50%, 15px) scale(0.6) rotate(-3deg); }
    25% { opacity: 1; transform: translate(-50%, -5px) scale(1.25) rotate(2deg); }
    75% { opacity: 1; transform: translate(-50%, -12px) scale(1.1) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -24px) scale(0.9) rotate(0deg); }
}

.floating-text.combo-break {
    color: #ff4757;
    font-size: 2.1rem;
    text-shadow: 0 0 18px rgba(255, 71, 87, 0.95), 0 3px 8px rgba(0, 0, 0, 0.85);
    animation: float-break-fade 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes float-break-fade {
    0% { opacity: 0; transform: translate(-50%, 15px) scale(0.7) rotate(-5deg); }
    20% { opacity: 1; transform: translate(-50%, -5px) scale(1.35) rotate(4deg); }
    70% { opacity: 1; transform: translate(-50%, -10px) scale(1.2) rotate(-2deg); }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(0.8) rotate(0deg); }
}

/* セルの弾力・ジューシーアニメーション */
.cell.pop {
    animation: cell-jelly 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cell-jelly {
    0% { transform: scale(0.82); }
    50% { transform: scale(1.2); }
    75% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* 行・列完成時の瞬間ドミノ波打ち (恒常的な色付きは一切なし) */
.cell.domino-wave {
    animation: domino-flash-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes domino-flash-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); box-shadow: 0 0 15px rgba(253, 203, 110, 0.8); }
    100% { transform: scale(1); box-shadow: none; }
}

/* タイムアタック・タイマーのボーナスバウンス */
.timer.bounce {
    animation: timer-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--accent) !important;
    color: white !important;
}

@keyframes timer-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* タイムアタック・デンジャー発光 */
.time-bar.danger-glow {
    box-shadow: 0 0 15px var(--danger), 0 0 30px var(--danger);
    animation: danger-flash 0.3s infinite alternate;
}

@keyframes danger-flash {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ステータス欄の高さ柔軟化 & ランクバッジ */
.status {
    min-height: 2.5em;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.5);
    animation: rank-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes rank-appear {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* 画面シェイク */
.screen-shake-light {
    animation: shake-light 0.15s ease-out;
}

.screen-shake {
    animation: shake-heavy 0.3s ease-out;
}

@keyframes shake-light {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    75% { transform: translate(3px, -2px); }
}

@keyframes shake-heavy {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-6px, 4px) rotate(-1deg); }
    40% { transform: translate(6px, -4px) rotate(1deg); }
    60% { transform: translate(-4px, 2px) rotate(-0.5deg); }
    80% { transform: translate(4px, -2px) rotate(0.5deg); }
}

/* サウンド切り替えボタン */
.sound-toggle-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.2s, transform 0.1s;
}

.sound-toggle-btn:hover {
    color: var(--primary);
    transform: scale(1.1);
}

/* ペナルティ演出: スコアボックスの激しい潰れ */
.score-box.penalty-cut {
    animation: score-penalty-squash 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #d63031 !important;
    color: #ffffff !important;
}

@keyframes score-penalty-squash {
    0% { transform: scale(1); }
    30% { transform: scale(1.3, 0.7) rotate(-3deg); }
    60% { transform: scale(0.9, 1.1) rotate(2deg); }
    100% { transform: scale(1); }
}

/* ペナルティカットの浮遊表示 (カッコなどの記号を完全排除したアーケードスタイル) */
.penalty-cut-popup {
    position: fixed;
    pointer-events: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1002;
    animation: penalty-cut-fall 0.88s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    white-space: nowrap;
}

.penalty-cut-popup .cut-val {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ff4757;
    text-shadow: 0 0 20px rgba(255, 71, 87, 0.95), 0 3px 8px rgba(0, 0, 0, 0.85);
    letter-spacing: -0.5px;
}

.penalty-cut-popup .cut-rate {
    background: linear-gradient(135deg, #d63031, #b71540);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(214, 48, 49, 0.6);
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@keyframes penalty-cut-fall {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px) scale(1.3) rotate(3deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.08) rotate(-2deg);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, 14px) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 35px) scale(0.85) rotate(-3deg);
    }
}


/* --- ドパガキ版 3段トップダッシュボード --- */
/* 段1: Tango MAX と 音量マーク */
.top-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
}

.top-header h1 {
    margin: 0;
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--primary);
    cursor: pointer;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.top-header .sound-toggle-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.2s, transform 0.1s;
}

.top-header .sound-toggle-btn:hover {
    color: var(--primary);
    transform: scale(1.1);
}

/* ダッシュボード行コンテナ */
.dashboard-row {
    width: 100%;
    margin-bottom: 4px;
}

/* 通常モード (タイムアタック以外): スコアと時間を中央で横並びに配置！ */
body:not(.mode-time-attack) .dashboard-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

body:not(.mode-time-attack) .score-panel,
body:not(.mode-time-attack) .time-panel {
    display: contents;
}

/* タイムアタック時: 段2(スコア系) と 段3(時間+時間バー) に展開 (全体で3段構成) */
body.mode-time-attack .dashboard-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.mode-time-attack .score-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

body.mode-time-attack .time-panel {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* スコア系 (Score & Best Score) */
.score-box {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    background: var(--accent);
    padding: 3px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.best-score-box {
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    background: var(--control-border);
    padding: 3px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.best-score-box .reset-best {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.best-score-box .reset-best:hover {
    color: var(--danger);
}

/* 時間と時間のバー */
.timer {
    font-family: 'Nunito', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    background: var(--control-border);
    padding: 3px 10px;
    border-radius: 8px;
    min-width: 50px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.time-bar-container {
    flex: 1;
    height: 8px;
    background: var(--control-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
    display: none;
}

.time-bar {
    height: 100%;
    background: var(--accent);
    width: 100%;
    transition: width 0.1s linear, background-color 0.3s;
}

/* モバイル向けレスポンシブ微調整 */
@media (max-width: 600px) {
    .top-header {
        margin-bottom: 2px;
    }
    .top-header h1 {
        font-size: 1.15rem;
    }
    .top-header .sound-toggle-btn {
        font-size: 1.15rem;
        padding: 2px;
    }
    .dashboard-row {
        margin-bottom: 2px;
    }
    body:not(.mode-time-attack) .dashboard-row {
        gap: 6px;
    }
    body.mode-time-attack .dashboard-row {
        gap: 3px;
    }
    body.mode-time-attack .score-panel {
        gap: 6px;
    }
    body.mode-time-attack .time-panel {
        gap: 6px;
    }
    .score-box {
        font-size: 0.85rem;
        padding: 2px 8px;
    }
    .best-score-box {
        font-size: 0.82rem;
        padding: 2px 6px;
    }
    .timer {
        font-size: 0.85rem;
        padding: 2px 6px;
        min-width: 46px;
    }
    .time-bar-container {
        height: 6px;
    }
    .hud-pill-container {
        margin-bottom: 2px;
        min-height: 20px;
        gap: 4px;
    }
    .hud-pill {
        padding: 2px 7px;
        font-size: 0.72rem;
    }
}