/**
 * 共通 UI シェル — 各ゲームの style.css より前に読み込む
 */
:root {
    --ui-z-feedback: 20000;
    --ui-z-home: 30000;
    --ui-z-overlay: 40000;
    --ui-hit-min: 48px;
    /*
     * ホームと同じ上辺（.home-btn の top と一致）。
     * コンテンツの padding-left は safe-area のみ。ヘッダー行はホームの右側から始めるため
     * padding-inline-start に --ui-header-indent を使う（下のルール）。
     */
    --ui-header-indent: calc(
        max(12px, env(safe-area-inset-left, 0px)) + var(--ui-hit-min) + 8px - env(safe-area-inset-left, 0px)
    );
    /* ランチャー等 scaler 非ラップ時のフォールバック。ゲーム内は scaler.js が上書き */
    --scaler-base-w: 390px;
    --scaler-base-h: 844px;
    --scaler-scale: 1;
}

body:has(.home-btn) #game-container,
body:has(.home-btn) .app-container {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* ホームボタンと同じ上位置（本文をボタン下に押し下げない） */
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * 共通 UI クローム（全ゲーム）
 * 1行目：ホーム右から開始 → タイトル中央 → へるぷは右端
 * 2行目：じかん・ステージ・スコア（1行・折り返しなし）
 * 3行目：やりなおし・ステージえらび（1行・折り返しなし）
 */
#game-container.game-shell > .ui-chrome {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline-end: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: 4px;
    box-sizing: border-box;
}

.ui-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline-start: var(--ui-header-indent);
    min-height: var(--ui-hit-min);
    box-sizing: border-box;
}

.ui-title-row__spacer {
    min-width: 0;
    pointer-events: none;
}

.ui-game-title {
    flex: 1;
    margin: 0;
    font-size: clamp(1.05rem, 5vmin, 1.45rem);
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
}

.ui-title-row__trail {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: var(--ui-hit-min);
}

.ui-chrome-btn.ui-chrome-btn--help {
    min-width: var(--ui-hit-min);
    min-height: var(--ui-hit-min);
    padding: 0 10px;
    border-radius: 50%;
    font-size: clamp(1rem, 4.2vmin, 1.25rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-stats-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    min-height: 36px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-stats-row > * {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.ui-actions-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-actions-row > .ui-chrome-btn {
    flex: 0 1 auto;
    min-width: 0;
}

.ui-chrome-btn {
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(0.72rem, 3vmin, 0.82rem);
    padding: 8px 12px;
    border-radius: 14px;
    border: none;
    background: #546e7a;
    color: #fff;
    box-shadow: 0 3px 0 #37474f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    white-space: nowrap;
}

.ui-chrome-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.ui-chrome-btn.secondary {
    background: #78909c;
    box-shadow: 0 3px 0 #546e7a;
    color: #fff;
}

.ui-help-text {
    margin: 0 0 16px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
    color: #37474f;
}

/* ルートランチャー（.home-btn なし）の .app-container は index.html 側で
   padding-top（固定ヘッダー＋safe-area）を指定するため、ここでは上書きしない */
body:not(:has(.home-btn)) .app-container {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.home-btn {
    position: fixed;
    z-index: var(--ui-z-home) !important;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: auto;
    min-width: var(--ui-hit-min);
    min-height: var(--ui-hit-min);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* #game-container 単体(100)より詳細度が高く、縦持ち flex 列を既定に固定する */
#game-container.game-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    /* 日本語ラベルの無駄な1文字改行を抑える（word-break: break-all は使わない） */
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
}

.playfield {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes ui-modal-pop {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.ui-overlay,
.overlay {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--ui-z-overlay) !important;
}

.ui-overlay.is-hidden,
.ui-overlay.hidden,
.overlay.is-hidden,
.overlay.hidden {
    display: none !important;
}

.ui-dialog,
.overlay-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px 20px;
    max-width: min(92vw, 360px);
    width: 100%;
    max-height: min(85dvh, 560px);
    overflow: auto;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    animation: ui-modal-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ui-dialog__title,
.overlay-title {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.ui-btn,
.overlay-btn {
    display: block;
    width: 100%;
    min-height: var(--ui-hit-min);
    font-family: inherit;
    font-weight: 700;
    padding: 14px;
    border-radius: 18px;
    border: none;
    font-size: 1.05rem;
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.ui-btn:active,
.overlay-btn:active {
    transform: translateY(2px);
}

.ui-btn--secondary,
.overlay-btn.secondary {
    background: #b0bec5;
    box-shadow: 0 4px 0 #78909c;
    color: #333;
}

.feedback {
    z-index: var(--ui-z-feedback) !important;
}

/* §7.12: .hidden と併せて JS から is-hidden も切替可能に（オーバーレイ以外の画面切替にも単独で有効） */
.is-hidden {
    display: none !important;
}