/* ヘッダー全体を2段のグリッドレイアウトに変更し、大幅にスペースを削減 */
#ui-overlay {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr !important; /* スコア枠の桁数確保のため少し広めに */
    grid-template-rows: 45px 45px !important; /* 高さを45pxの2段に固定 */
    gap: 6px !important;
    padding: 8px 10px !important;
    height: auto !important;
    align-items: stretch !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 10;
    background: var(--color-accent-primary);
    /* Cloud Decorations */
    background-image:
        radial-gradient(circle at 20% 120%, white 40px, transparent 41px),
        radial-gradient(circle at 50% 130%, white 60px, transparent 61px),
        radial-gradient(circle at 80% 120%, white 40px, transparent 41px),
        /* Stars */
        radial-gradient(circle at 10% 20%, var(--color-star) 2px, transparent 3px),
        radial-gradient(circle at 90% 30%, var(--color-star) 2px, transparent 3px),
        radial-gradient(circle at 40% 10%, var(--color-star) 3px, transparent 4px);
}

/* .score-groupのラッパーを解除し、中身を直接グリッドに参加させる */
.score-group {
    display: contents !important;
}

/* 各アイテムの配置指定（スコアとベストは左端で縦積み、その他も2段に配置） */
.best-container   { grid-column: 1; grid-row: 1; }
.score-container  { grid-column: 1; grid-row: 2; }
.lives-container  { grid-column: 2; grid-row: 1; }
.stage-container  { grid-column: 2; grid-row: 2; }
.target-container { grid-column: 3; grid-row: 1; }
#pause-btn        { grid-column: 3; grid-row: 2; }

/* ボックス内の余白と文字サイズを最適化 */
.hud-item, #pause-btn {
    background: var(--theme-uiStatBoxBg) !important;
    backdrop-filter: blur(5px) !important;
    border: 2px solid var(--theme-uiStatBoxBorder) !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif !important;
    font-weight: 800 !important;
}

/* スコア枠内の配置も他と統一 */
.score-group .hud-item {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding-right: 15px !important;
    padding-left: 10px !important;
}
.score-group .hud-item .label {
    margin: 0 0 2px 0 !important;
    text-align: right !important;
    width: 100%;
}
.score-group .hud-item .value {
    text-align: right !important;
    font-size: 1.1rem !important;
    width: 100%;
}

/* スマホ向けの微調整 */
@media (max-width: 450px) {
    #ui-overlay { grid-template-rows: 40px 40px !important; gap: 4px !important; padding: 6px !important; }
    .hud-item .label { font-size: 0.6rem !important; }
    .hud-item .value, .score-group .hud-item .value { font-size: 0.95rem !important; }
}

#bgm-selector {
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    color: var(--color-text-main);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    max-width: 130px;
    text-overflow: ellipsis;
}

#pause-btn {
    z-index: 1000 !important;
    transition: all 0.2s;
}

#pause-btn:active {
    background: #fdfdfd !important;
    transform: scale(0.95) !important;
}

#score-val, #best-val, #lives-val, #stage-val, #target-count {
    font-variant-numeric: tabular-nums;
}

/* 画面幅が狭い端末用（スマホ）の文字サイズ微調整 */
@media (max-width: 600px) {
    .hud-item .value { font-size: 1rem !important; }
    .hud-item .label { font-size: 0.6rem !important; }
    .score-group .hud-item { flex-direction: column; min-width: 0; }
}

/* =========================================
   ヘッダーUI フォント・レイアウト・色の最終調整
   ========================================= */

/* 1. 全体へのフォント適用と基本設定 */
#ui-overlay, #ui-overlay * {
    font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif !important;
}

/* 2. ラベル（BEST, SCORE, LIVES 等） */
.hud-item .label {
    color: var(--color-text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* 3. 数値（0, 36,270 等） */
.hud-item .value {
    color: var(--color-text-main) !important;
    font-weight: 800 !important;
}