/* ==================================================================
   S51 ゲームモーダル（プレイ/ヒントタブ）
   docs/miraiiparkx/specs/game/S51-ゲームモーダル.md のFigma実データに準拠。
   暗号入力（#expansion-overlay）は今回のスコープ外のため popup-game.css の
   スタイルをそのまま流用する（このファイルでは扱わない）。
================================================================== */

/* 表示/非表示は game-modal.js が style.display を直接切り替える
   （popup-game.css の #game-overlay がID指定のためクラスより詳細度が高く、
   クラスの付け外しだけでは勝てないので、popup-game.js と同じくインラインスタイルで制御する）。 */
.gm-overlay {
    /* 初期状態は非表示。game-modal.js が showGamePopup/closeGamePopup で
       style.display を直接切り替える（popup-game.css の #game-overlay と
       同じidを使わないようにしたため、ここでは詳細度を気にせずそのまま指定できる）。 */
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--parkx-space-16);
    /* オーバーレイ自体はスクロールさせない。高さが収まらない場合は
       .gm-box 内部だけがスクロールするようにする。 */
    overflow: hidden;
}

.gm-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 852px;
    /* タブ/暗号入力ボタン（高さ38px + 余白16px）が .gm-box の上端からはみ出して
       重なる分の余白。モーダル自体の高さは .gm-box（内容）に合わせて決まり、
       .gm-overlay の justify-content:center で全体を画面中央に置く。 */
    padding-top: 54px;
}

/* 「スマホを横向きにすると...」のスピーチカードはSP専用（Figma実データ準拠）。
   PCでは常に非表示にしておき、SPのメディアクエリ側でのみ表示する。 */
.gm-modal .parkx-speech-card {
    display: none;
}

.gm-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* 最大サイズは620px。画面が低い場合はそれより縮む
      （.gm-modal の padding-top:54px + .gm-overlay の上下padding 16px*2 分を差し引く）。 */
    height: 620px;
    max-height: calc(100vh - 86px);
    /* dvh対応ブラウザではURLバーの表示/非表示で変わる実際のビューポート高に追従させる
       （100vhは常にURLバー非表示時の高さ基準になり、表示中は箱がはみ出しうるため）。
       未対応ブラウザ向けに上のvh版をフォールバックとして残す。 */
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    background: #fff7e8;
    border: 2px solid var(--parkx-color-primary);
    border-radius: var(--parkx-radius-md);
}

/* 「やっぱりやめる」は常にオーバーレイ（画面）の左上に固定表示する（Figma実データ準拠）。
   S52暗号入力オーバーレイ（z-index:1150）よりも常に手前に表示し続ける必要があるため、
   他のどのレイヤーよりも高いz-indexにしている（Figma実データでもS52側に同じボタンが
   重ねて配置されているだけで、実質1つのボタンとして常時操作できる想定）。 */
.gm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-4);
    position: fixed;
    top: var(--parkx-space-16);
    left: var(--parkx-space-16);
    z-index: 1201;
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    padding: var(--parkx-space-4) var(--parkx-space-8) var(--parkx-space-4) var(--parkx-space-4);
    color: #fff;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    cursor: pointer;
}

.gm-back-btn img {
    width: 12px;
    height: 24px;
    transform: scaleX(-1);
}

/* SP横向き時、プレイタブをフルスクリーン化した際に右下に表示する「ヒント」ボタン。
   押してもヒントタブへは切り替わらず、.gm-landscape-guide の案内を表示するだけ
   （Figma実データ準拠）。PC・SP縦向きでは常に非表示
   （表示は本ファイル末尾の landscape メディアクエリでのみ行う）。 */
.gm-landscape-hint-btn {
    display: none;
    align-items: center;
    gap: var(--parkx-space-8);
    position: fixed;
    right: var(--parkx-space-16);
    bottom: var(--parkx-space-16);
    z-index: 1001;
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    padding: var(--parkx-space-4) var(--parkx-space-8);
    color: #fff;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    letter-spacing: 1.4px;
    cursor: pointer;
}

.gm-landscape-hint-btn img {
    width: 12px;
    height: 24px;
}

/* SP横向き・プレイタブで「ヒント」ボタンを押した時に表示する案内モーダル
   （Figma実データ準拠）。表示/非表示は game-modal.js が style.display を
   直接切り替える（#expansion-overlay と同じ方式）。 */
.gm-landscape-guide {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: var(--parkx-space-16);
    background: rgba(0, 0, 0, 0.7);
}

.gm-landscape-guide__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-32);
    width: 328px;
    max-width: 100%;
    padding: var(--parkx-space-32) var(--parkx-space-24) var(--parkx-space-16);
    background: #fff7e8;
    border: 2px solid var(--parkx-color-primary);
    border-radius: var(--parkx-radius-md);
}

.gm-landscape-guide__character {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.gm-landscape-guide__text {
    margin: 0;
    width: 100%;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.36px;
    color: var(--parkx-color-text);
}

.gm-landscape-guide__close-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    height: 43px;
    padding: var(--parkx-space-4) var(--parkx-space-8) var(--parkx-space-4) var(--parkx-space-12);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    color: #fff;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    letter-spacing: 1.4px;
    cursor: pointer;
}

.gm-landscape-guide__close-btn img {
    width: 12px;
    height: 24px;
}

/* タブと暗号入力ボタンは .gm-box の兄弟要素（.gm-modal の子）のため、
   position:absolute の基準は .gm-modal になる。.gm-modal 側に padding-top:54px
   （ボタンの高さ38px + 余白16px）を確保してあるので、ここでは top:0 でよい
   （.gm-box の上端から常に16pxの余白ができる）。 */
.gm-tabs {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    background: var(--parkx-color-surface);
    border-radius: var(--parkx-radius-xs);
    overflow: hidden;
    z-index: 1;
}

.gm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 120px;
    height: 38px;
    border: 1px solid var(--parkx-color-border);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: var(--parkx-color-text-muted);
    cursor: pointer;
}

.gm-tab.tab_select {
    background: var(--parkx-color-sponsor);
    border-color: var(--parkx-color-sponsor);
    color: #fff;
}

.gm-code-btn {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-4);
    background: var(--parkx-color-success);
    border: 1px solid var(--parkx-color-success);
    border-radius: 4px;
    padding: var(--parkx-space-4) var(--parkx-space-16) var(--parkx-space-4) var(--parkx-space-4);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    cursor: pointer;
}

.gm-code-btn img {
    width: 32px;
    height: 29px;
    object-fit: contain;
}

/* CLEARバッジ（仮実装）。Figma実データの「クリア済みの場合」バリアント準拠で、
   ボタン左上に既存の badge-clear.png（回転済みリボン画像）を重ねて表示する。 */
.gm-code-btn img.gm-code-btn__clear-badge {
    display: none;
    position: absolute;
    top: -10px;
    left: -12px;
    width: 48px;
    height: auto;
    z-index: 1;
}

.gm-code-btn.is-cleared {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-border-inactive);
    cursor: not-allowed;
}

.gm-code-btn.is-cleared img.gm-code-btn__clear-badge {
    display: block;
}

.gm-content {
    display: none;
    width: 100%;
}

.gm-content--play {
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    padding: var(--parkx-space-24);
}

.gm-content--description {
    flex-direction: column;
    align-items: center;
    padding: var(--parkx-space-32) var(--parkx-space-32) var(--parkx-space-24);
    gap: var(--parkx-space-32);
}

/* ---------------------------------------------------------------- */
/* プレイタブ（ゲームiframe） */
/* ---------------------------------------------------------------- */
.gm-content--play .scratch {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    border-radius: var(--parkx-radius-xs);
    overflow: hidden;
    background: #000;
}

/* スクロール導線スペーサーはSP横向きプレイ時のみ表示（下部の landscape
   メディアクエリで有効化）。それ以外（PC・縦向き・ヒントタブ）は非表示。 */
.gm-play-scroll-spacer {
    display: none;
}

.gm-content--play .scratch iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---------------------------------------------------------------- */
/* ヒントタブ（説明） */
/* ---------------------------------------------------------------- */
.gm-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
    padding-bottom: var(--parkx-space-24);
    border-bottom: 1px solid var(--parkx-color-border);
}

.gm-heading__title {
    margin: 0;
    font-size: var(--parkx-text-xl);
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--parkx-color-text);
    text-align: center;
}

.gm-heading__meta {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
}

#description_flames {
    display: flex;
    align-items: center;
}

#description_flames img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin: 0 -2.4px;
}

.gm-tab-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parkx-space-32);
    width: 100%;
    box-sizing: border-box;
    padding: 0 48px;
}

.gm-premium-panel {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    background: var(--parkx-color-surface);
    border-radius: var(--parkx-radius-xs);
    padding: 0 var(--parkx-space-8);
}

.gm-premium-panel__job {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
    padding-right: var(--parkx-space-8);
    border-right: 1px solid var(--parkx-color-border);
}

/* Figma実データ準拠：avatarは「64x32の枠(スロット)」+「64x64の窓(クリップ)」の
   2重構造になっている。窓を枠の下端にそろえて配置すると、窓の上半分(32px)が
   枠からはみ出る。窓の中では画像を幅104px相当に拡大し、上に少しだけ・下は大きく
   クリップして上半身だけが見えるようにする。 */
.gm-premium-panel__avatar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 64px;
    height: 32px;
    flex-shrink: 0;
    overflow: visible;
}

.gm-premium-panel__avatar-window {
    display: block;
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    flex-shrink: 0;
}

.gm-premium-panel__avatar-window img {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 104px;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
}

.gm-premium-panel__job-name {
    margin: 0;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--parkx-color-text);
}

.gm-premium-panel__company {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-8);
    flex: 1 0 0;
    min-width: 0;
}

.gm-premium-panel__company-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--parkx-radius-full);
    background: #fff;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.gm-premium-panel__company-logo img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.gm-premium-panel__company-name {
    margin: 0;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    letter-spacing: 0.42px;
    color: var(--parkx-color-text);
}

.gm-thumb-container {
    display: flex;
    align-items: center;
    gap: var(--parkx-space-32);
    width: 100%;
}

.gm-thumb {
    width: 234.667px;
    height: 176px;
    flex-shrink: 0;
    border-radius: var(--parkx-radius-xs);
    overflow: hidden;
}

.gm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-description {
    flex: 1 0 0;
    min-width: 0;
    align-self: stretch;
    display: block;
    margin: 0;
    background: var(--parkx-color-surface);
    border-radius: var(--parkx-radius-xs);
    padding: var(--parkx-space-16);
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    line-height: 2;
    overflow-wrap: break-word;
    letter-spacing: 0.42px;
    color: var(--parkx-color-text);
}

.gm-play-btn {
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* SP対応（top.css / parkx-ui.css と同じ1024pxブレークポイントに合わせる）
   Figma実データではSPは横幅が狭くタブと暗号入力ボタンを同じ高さに並べられないため、
   PCのような重ね配置ではなく「タブ→モーダル箱→暗号入力ボタン」の縦並びにする
   （Figma実データのSP版もタブは箱の上、暗号入力ボタンは箱の下に離れて配置されている）。 */
/* ---------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    /* Figma実データ（SP）ではモーダル箱は画面幅いっぱいに表示されるため、
       オーバーレイの左右パディングをなくす。上下は「やっぱりやめる」ボタン
       （position:fixed; top:16px;）と重ならないよう、上下とも同じ余白にする。 */
    .gm-overlay {
        padding: 64px 0;
    }

    .gm-modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--parkx-space-12);
        padding: 0;
    }

    .gm-tabs {
        position: static;
        transform: none;
        order: 1;
    }

    .gm-box {
        order: 2;
        /* Figma実データ（SP）ではPCのような固定620pxではなく、
           タブごとの中身に合わせた高さになる（ヒントタブ478px相当/プレイタブは
           ゲーム画面のアスペクト比に応じた高さ）。
           max-heightは.gm-overlayの上下パディング(64px*2)+タブ(38px)+
           暗号入力ボタン(38px)+スピーチカード(88px)+間の余白(12px*3)を
           差し引いた値にする。これより大きいと、コンテンツ全体が
           .gm-overlayのjustify-content:centerで上にはみ出し、
           「やっぱりやめる」ボタンにタブが被ってしまうため。 */
        height: auto;
        max-height: calc(100vh - 328px);
        /* dvh対応ブラウザではURLバーの表示/非表示に追従させる（フォールバックは上のvh版）。 */
        max-height: calc(100dvh - 328px);
    }

    /* Figma実データ（SP）ではモーダル箱の下に「スマホを横向きにすると
       プレイしやすくなるよ」のキャラクター吹き出しが先、暗号入力ボタンが
       その下に表示される（既存の .parkx-speech-card をそのまま流用）。 */
    .gm-modal .parkx-speech-card {
        display: flex;
        order: 3;
        width: 100%;
        margin: 0;
        padding: 0 var(--parkx-space-16);
        box-sizing: border-box;
    }

    .gm-code-btn {
        /* PC用のposition:absoluteのままだと.gm-box内での重なりがおかしくなるため
           静的配置に戻す必要があるが、staticのままだと位置決めの基準祖先が
           居なくなり、子のCLEARバッジ（position:absolute）が.gm-box基準の
           おかしな位置にずれてしまう。relativeにしてバッジの基準をこのボタン
           自身のまま維持しつつ、通常の flex 配置（order）には従わせる。 */
        position: relative;
        top: auto;
        right: auto;
        order: 4;
    }

    .gm-content--play {
        /* 親(.gm-box)がSPではheight:auto（中身に合わせるサイズ）になるため、
           PC用の flex:1（残り領域を埋める）のままだと高さの基準が無く0に
           潰れてしまう。中身（.scratchのaspect-ratio）に合わせて高さが
           決まるようにする。 */
        flex: none;
        min-height: 0;
        padding: var(--parkx-space-16);
    }

    .gm-content--play .scratch {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 804 / 572;
    }

    .gm-content--description {
        padding: var(--parkx-space-16) var(--parkx-space-16) var(--parkx-space-24);
        gap: var(--parkx-space-16);
    }

    .gm-tab-content {
        padding: 0;
    }

    .gm-heading__title {
        font-size: var(--parkx-text-lg);
        letter-spacing: 2px;
    }

    /* Figma実データ（SP）では職業/企業が横並びではなく上下に並ぶ。 */
    .gm-premium-panel {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: var(--parkx-space-8);
        padding: var(--parkx-space-12) var(--parkx-space-16);
    }

    .gm-premium-panel__job {
        width: 100%;
        padding-right: 0;
        padding-bottom: var(--parkx-space-8);
        border-right: none;
        border-bottom: 1px solid var(--parkx-color-border);
    }

    .gm-premium-panel__company {
        width: 100%;
    }

    .gm-thumb-container {
        flex-direction: column;
        align-items: center;
        gap: var(--parkx-space-16);
    }

    .gm-thumb {
        width: 234.667px;
    }

    .gm-description {
        width: 100%;
        padding: var(--parkx-space-12) var(--parkx-space-16);
        line-height: 1.7;
    }
}

/* ==================================================================
   S52 暗号入力
   docs/miraiiparkx/specs/game/S52-暗号入力.md のFigma実データに準拠。
   S51ゲームモーダルの上に重ねる別レイヤーのオーバーレイ（S51自体は裏で開いたまま）。
================================================================== */
.gm-secret-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1150;
    align-items: center;
    justify-content: center;
    padding: var(--parkx-space-16);
    background: rgba(0, 0, 0, 0.7);
}

.gm-secret-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-32);
    width: 440px;
    max-width: 100%;
    padding: var(--parkx-space-32) var(--parkx-space-24) var(--parkx-space-16);
    background: #fff7e8;
    border: 2px solid var(--parkx-color-primary);
    border-radius: var(--parkx-radius-md);
}

.gm-secret-card__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
    width: 100%;
}

.gm-secret-card__icon {
    width: 44px;
    height: 40px;
    object-fit: contain;
}

.gm-secret-card__title {
    margin: 0;
    width: 100%;
    font-size: var(--parkx-text-lg);
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.6px;
    color: var(--parkx-color-text);
}

.gm-secret-card__desc {
    margin: 0;
    width: 100%;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.36px;
    color: var(--parkx-color-text);
}

.gm-secret-card__error {
    margin: 0;
    width: 100%;
    font-size: var(--parkx-text-xs);
    font-weight: 700;
    text-align: center;
    color: var(--parkx-color-danger, #d9534f);
}

.gm-secret-card__boxes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gm-secret-box {
    width: 52px;
    height: 52px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--parkx-color-border);
    border-radius: var(--parkx-radius-xs);
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-xl);
    letter-spacing: 0.84px;
    text-align: center;
    color: var(--parkx-color-text);
    box-sizing: border-box;
}

/* 未入力（プレースホルダー「_」表示中）はFigma実データ準拠で薄いグレー・一回り小さい
   フォントサイズにする。入力済みの数字は通常の文字色・フォントサイズで表示する。 */
.gm-secret-box:placeholder-shown {
    font-size: var(--parkx-text-lg);
    color: var(--parkx-color-inactive);
}

/* 暗号が違っていた場合、決定後は入力欄の枠を赤くしてエラーメッセージと合わせて示す
   （.gm-secret-card__boxes.is-errorはgame-modal.jsがshowSecretError/hideSecretErrorで
   切り替える）。 */
.gm-secret-card__boxes.is-error .gm-secret-box {
    border-color: var(--parkx-color-danger, #d9534f);
}

.gm-secret-submit {
    min-width: 92px;
    padding: var(--parkx-space-12) var(--parkx-space-20);
    background: var(--parkx-color-success);
    border: 1px solid var(--parkx-color-success);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-secret-submit:disabled {
    background: var(--parkx-color-inactive);
    border-color: var(--parkx-color-border-inactive);
    color: var(--parkx-color-border-inactive);
    cursor: default;
}

/* ==================================================================
   S53 スタンプゲット
   docs/miraiiparkx/specs/game/S53-スタンプゲット.md のFigma実データに準拠。
   S52暗号入力の成功後に表示する演出画面（S51の上に重ねる別レイヤー）。
   背景の放射状の星演出は、実データの複雑なベクター装飾の代わりに
   中央から広がる黄色いradial-gradientで簡易的に再現している
   （仕様書の「未確定事項」に演出秒数・スキップ可否が挙がっており、
   本格的なLottie/CSSアニメーションは今後の実装課題）。
================================================================== */
.gm-stamp-overlay {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1150;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-32);
    padding: var(--parkx-space-16);
    /* Figma実データの背景（node 7884:33508）をそのまま画像として使用。
       黄色い放射状の星演出がPNG1枚に焼き込まれているため、CSSでの再現ではなく
       画像をそのままcoverで敷く。 */
    background-color: #ffcb4d;
    background-image: url('/static/img/parkx/game/stamp-get-bg.png');
    background-size: cover;
    background-position: center;
}

.gm-stamp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-24);
    width: 596px;
    max-width: 100%;
    padding: 48px 96px var(--parkx-space-16);
    background: var(--parkx-color-surface);
    border: 1px solid var(--parkx-color-border-strong);
    border-radius: var(--parkx-radius-md);
    box-sizing: border-box;
}

.gm-stamp-card__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-16);
}

.gm-stamp-card__title {
    margin: 0;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 8px;
    white-space: nowrap;
    color: var(--parkx-color-text);
}

.gm-stamp-card__title span {
    color: #66a836;
}

.gm-stamp-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 2.857px solid #e94d3a;
    border-radius: 50%;
    box-sizing: border-box;
}

.gm-stamp-card__badge img {
    width: 50px;
    height: 50px;
}

.gm-stamp-card__label {
    background: #ffcb4d;
    border: 1px solid #f2bc44;
    border-radius: var(--parkx-radius-xl, 32px);
    padding: var(--parkx-space-12) var(--parkx-space-24);
    font-size: var(--parkx-text-xs);
    font-weight: 900;
    letter-spacing: 2.4px;
    text-align: center;
    color: #33280e;
    white-space: nowrap;
}

.gm-stamp-card__counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-8);
    width: 100%;
    padding: var(--parkx-space-24) var(--parkx-space-16) var(--parkx-space-16);
    border-top: 1px solid #e6d8c2;
    box-sizing: border-box;
}

.gm-stamp-card__counter-title {
    margin: 0;
    font-size: var(--parkx-text-sm);
    font-weight: 700;
    letter-spacing: 2.8px;
    text-align: center;
    color: var(--parkx-color-text);
}

.gm-stamp-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 4px;
}

.gm-stamp-list__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.6px;
    height: 33.6px;
    border: 1.2px dashed #ede5d6;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.36px;
    color: #ede5d6;
}

.gm-stamp-list__item--filled {
    border-style: solid;
    border-color: #e94d3a;
}

.gm-stamp-list__item--filled img {
    width: 21px;
    height: 21px;
}

.gm-stamp-close-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-stamp-close-btn img {
    width: 12px;
    height: 24px;
}

/* 【Figma node 7882:34239】大阪版はこの後に応援メッセージモーダルへ進むため
   「応援メッセージをおくる」表記に変わる（game-modal.js の showStampGet が
   gmPendingOuenMessage を見て付け外しする）。Figma実データの一色指定で
   共通トークンに対応が無いため、この用途限定でハードコードする。 */
.gm-stamp-close-btn.gm-stamp-close-btn--yell {
    background: #3274b3;
    border-color: #3274b3;
}

/* ==================================================================
   S54 バッジゲット
   docs/miraiiparkx/specs/game/S54-バッジゲット.md のFigma実データに準拠。
   S53「閉じる」の後、新規バッジ（銅/銀/金）獲得時に表示する演出画面
   （S53と同じくS51の上に重ねる別レイヤー）。
================================================================== */
.gm-badge-overlay {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1150;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: var(--parkx-space-16);
    /* Figma実データの背景（紺色の放射状の星演出）をそのまま画像として使用
       （S53の背景と同じ理由で、CSSでの再現ではなく画像をcoverで敷く）。 */
    background-color: #0a0a3c;
    background-image: url('/static/img/parkx/game/badge-get-bg.png');
    background-size: cover;
    background-position: center;
}

.gm-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

.gm-badge-content__title {
    margin: 0;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 11.2px;
    text-align: center;
    text-shadow: 0 0 36px #00003b;
    white-space: nowrap;
    color: #fff;
}

.gm-badge-content__title rt {
    font-size: 12px;
    letter-spacing: 2.4px;
}

.gm-badge-content__title-get {
    color: #fe0;
}

.gm-badge-content__medal {
    width: 192px;
    height: 192px;
}

.gm-badge-content__medal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gm-badge-next-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-badge-next-btn img {
    width: 12px;
    height: 24px;
}

/* ==================================================================
   S55 認定証授与
   docs/miraiiparkx/specs/game/S55-認定証授与.md のFigma実データに準拠。
   S54バッジゲット（金バッジ）の後に表示する演出画面
   （S53/S54と同じくS51の上に重ねる別レイヤー）。
================================================================== */
.gm-certificate-overlay {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1150;
    align-items: center;
    justify-content: center;
    gap: 64px;
    padding: var(--parkx-space-16);
    /* S53/S54と同じ理由で、背景（放射状の星演出）はCSSで再現せずFigma実データの
       画像をそのままcoverで敷く。tier（銅/銀/金）ごとに色違いの画像があり、
       game-modal.js の showCertificate が background-image/-color を差し替える。
       ここでの値はJS適用前のデフォルト（銅）。 */
    background-color: #4a2c12;
    background-image: url('/static/img/parkx/game/certificate-bg-scene-bronze.png');
    background-size: cover;
    background-position: center;
}

.gm-certificate-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-24);
}

.gm-certificate-content__title {
    margin: 0;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 11.2px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.gm-certificate-card {
    position: relative;
    width: 440px;
    height: 311.3px;
}

.gm-certificate-card__bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.gm-certificate-card__username {
    position: absolute;
    left: 50%;
    top: 112.2px;
    transform: translateX(-50%);
    font-weight: 900;
    font-size: 16.5px;
    letter-spacing: 1.65px;
    color: #000;
    white-space: nowrap;
}

.gm-certificate-actions {
    display: flex;
    gap: var(--parkx-space-24);
}

.gm-certificate-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-12) var(--parkx-space-20);
    background: var(--parkx-color-surface-subtle);
    border: 1px solid var(--parkx-color-border-strong);
    border-radius: 4px;
    color: var(--parkx-color-text);
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-certificate-save-btn__label {
    display: inline-block;
}

.gm-certificate-next-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-certificate-next-btn img {
    width: 12px;
    height: 24px;
}

/* 表彰状の見返しは「とじる」表示で、次に進む矢印を出さない。
   hidden 属性だけでは common.css の img 指定に打ち消されるため CSS でも消し、
   矢印ぶんだけ狭めてある右パディングを左と揃える。 */
.gm-certificate-next-btn.is-viewer {
    padding-right: var(--parkx-space-20);
}

.gm-certificate-next-btn.is-viewer img {
    display: none;
}

/* ==================================================================
   S56 コンテンツ解放
   docs/miraiiparkx/specs/game/S56-コンテンツ解放.md のFigma実データ（旧仕様の
   銅/銀/金バリアント）に準拠。S54バッジゲット（銅/銀）またはS55認定証授与（金）
   の後に表示する演出画面（S53/S54/S55と同じくS51の上に重ねる別レイヤー）。
================================================================== */
.gm-unlock-overlay {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1150;
    align-items: center;
    justify-content: center;
    padding: var(--parkx-space-16);
    /* S53/S54/S55と同じ理由で、背景（緑の放射状の星演出）はCSSで再現せず
       Figma実データの画像をそのままcoverで敷く。 */
    background-color: #1f4a12;
    background-image: url('/static/img/parkx/game/unlock-bg.png');
    background-size: cover;
    background-position: center;
}

.gm-unlock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--parkx-space-24);
    max-width: 712px;
    padding: 48px 96px;
    background: #fff;
    border: 1px solid var(--parkx-color-border-strong);
    border-radius: var(--parkx-radius-md);
}

.gm-unlock-card__title {
    margin: 0;
    font-weight: 900;
    font-size: 40px;
    letter-spacing: 8px;
    color: var(--parkx-color-text);
    text-align: center;
    white-space: nowrap;
}

.gm-unlock-card__title-get {
    color: #66a836;
}

.gm-unlock-card__description {
    margin: 0;
    font-weight: 700;
    font-size: var(--parkx-text-sm);
    line-height: 28px;
    letter-spacing: 2.8px;
    color: var(--parkx-color-text);
    text-align: center;
}

.gm-unlock-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--parkx-space-8);
    padding: var(--parkx-space-4) var(--parkx-space-12) var(--parkx-space-4) var(--parkx-space-20);
    background: var(--parkx-color-info);
    border: 1px solid var(--parkx-color-info);
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--parkx-text-md);
    letter-spacing: 1.6px;
    cursor: pointer;
}

.gm-unlock-cta-btn__label {
    /* rubyと地の文字が混在するため、inline-flexの直接の子にはしない
       （.gm-certificate-save-btn__labelと同じ理由）。 */
    display: inline-block;
}

.gm-unlock-cta-btn img {
    width: 12px;
    height: 24px;
}

/* ==================================================================
   S52/S53/S54/S55/S56 SP調整
   S52/S53/S54/S55/S56のPC向け基本スタイルより後（ファイルの下）に置く必要がある
   （同じセレクタ・詳細度の場合、メディアクエリの有無に関わらず
   ソース順で後にある方が勝つため、SP用の上書きは対応するPC向け
   基本スタイルの定義より後ろに書かないと無視されてしまう）。
================================================================== */
@media screen and (max-width: 1024px) {
    .gm-secret-card {
        width: 100%;
        max-width: 361px;
        gap: var(--parkx-space-16);
    }

    .gm-secret-card__icon {
        width: 35px;
        height: 32px;
    }

    .gm-secret-card__title {
        font-size: var(--parkx-text-md);
    }

    .gm-secret-submit {
        font-size: var(--parkx-text-sm);
        letter-spacing: 1.4px;
    }

    .gm-stamp-card {
        width: 100%;
        max-width: 361px;
        padding: 48px var(--parkx-space-32) var(--parkx-space-16);
    }

    .gm-stamp-card__title {
        font-size: 28px;
        letter-spacing: 5.6px;
    }

    .gm-stamp-card__counter-title {
        font-size: var(--parkx-text-xs);
        letter-spacing: 2.4px;
    }

    .gm-stamp-list {
        max-width: 184px;
    }

    .gm-stamp-close-btn {
        font-size: var(--parkx-text-sm);
        letter-spacing: 1.4px;
    }

    /* S54: SP版Figmaフレーム未確定（仕様書の「未確定事項」参照）のため、
       PC版(56px/11.2px)をそのまま縮小すると8文字+レタースペーシングで
       SP幅(390px前後)に収まらずはみ出す。折り返しを許可しつつ縮小する。 */
    .gm-badge-content {
        gap: 40px;
    }

    .gm-badge-content__title {
        font-size: 32px;
        letter-spacing: 4px;
        white-space: normal;
    }

    .gm-badge-content__medal {
        width: 144px;
        height: 144px;
    }

    .gm-badge-next-btn {
        font-size: var(--parkx-text-sm);
        letter-spacing: 1.4px;
    }

    /* S55: SP版Figmaフレーム未確定（S54と同様）のため、タイトルはS54と同じ縮小率に揃え、
       認定書カードは幅328px（画面幅390px前後に収まる値）に縮小し、ユーザー名の位置・
       文字サイズもカードと同じ比率（328/440）で追従させる。 */
    .gm-certificate-overlay {
        gap: 40px;
    }

    .gm-certificate-content__title {
        font-size: 32px;
        letter-spacing: 4px;
    }

    .gm-certificate-card {
        width: 328px;
        height: 232px;
    }

    .gm-certificate-card__username {
        top: 83.5px;
        font-size: 12.3px;
        letter-spacing: 1.2px;
    }

    .gm-certificate-actions {
        gap: var(--parkx-space-16);
    }

    .gm-certificate-save-btn,
    .gm-certificate-next-btn {
        font-size: var(--parkx-text-sm);
        letter-spacing: 1.4px;
        padding-left: var(--parkx-space-12);
        padding-right: var(--parkx-space-12);
    }

    /* S56 SP版（figma_sp: 7990:44361）実データ準拠。 */
    .gm-unlock-card {
        width: 100%;
        max-width: 361px;
        padding: 48px var(--parkx-space-16);
    }

    .gm-unlock-card__title {
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 5.6px;
        white-space: normal;
    }

    .gm-unlock-cta-btn {
        font-size: var(--parkx-text-sm);
        letter-spacing: 1.4px;
        padding: var(--parkx-space-4) var(--parkx-space-8) var(--parkx-space-4) var(--parkx-space-12);
    }
}

/* ==================================================================
   SP横向き（プレイタブのみ）
   docs/miraiiparkx/specs/game/S51-ゲームモーダル.md の「SP縦横切替」準拠。
   プレイタブ表示中に横向きにすると、iframe をフルスクリーン化し、
   タブ・暗号入力ボタン・スピーチカード・戻るボタンを隠して
   右下の「ヒント」復帰ボタンのみを表示する。
   ヒントタブ表示中（.gm-modal--play が付いていない）は対象外
   （Figma実データにもヒントタブ用の横向きバリアントは無いため、
   通常のSPレイアウトのまま横幅が広がるだけの表示に留める）。
================================================================== */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .gm-overlay {
        padding: 0;
    }

    /* SP横向きプレイのフルスクリーン（JSが html.gm-fullscreen-play を付与）。
       オーバーレイは読み込み時に body 直下へ移してある（JS）。背景ページを隠して、
       オーバーレイを通常フロー（position:relative）の唯一の本文にする。これで body の高さが
       100lvh になり、ルート（ドキュメント）スクロールが発生して iOS のアドレス
       バーが安定して隠れる。中身＝スペーサー(アドレスバー分)+scratch(可視領域)＝100lvh。 */
    /* html.parkx-dashboard は overflow-y:auto で「明示的スクロールコンテナ」に
       なっており、iOSはこの状態だとアドレスバーを隠さない（既定のドキュメント
       スクロール時のみ隠す）。フルスクリーン時は既定スクロールに戻す。 */
    html.gm-fullscreen-play,
    html.gm-fullscreen-play body {
        overflow: visible;
        height: auto;
    }

    html.gm-fullscreen-play .parkx-page {
        display: none;
    }

    html.gm-fullscreen-play .gm-overlay {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 100lvh;
        overflow: visible;
        align-items: stretch;
        justify-content: flex-start;
    }

    .gm-modal--play {
        width: 100%;
        max-width: none;
        /* 中身（スペーサー+scratch）の高さに合わせる＝可視領域より高くしてスクロールさせる。 */
        height: auto;
    }

    .gm-modal--play .gm-back-btn,
    .gm-modal--play .gm-tabs,
    .gm-modal--play .gm-code-btn,
    .gm-modal--play .parkx-speech-card {
        display: none;
    }

    .gm-modal--play .gm-box {
        width: 100%;
        height: auto;
        max-height: none;
        border: none;
        border-radius: 0;
        background: #000;
    }

    .gm-modal--play .gm-content--play {
        height: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    /* アドレスバー分の高さを持つスクロール導線（表示時のみ高さを持ち、
       アドレスバーが隠れると calc が 0 に縮む）。 */
    .gm-modal--play .gm-play-scroll-spacer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 100%;
        height: calc(100lvh - 100dvh);
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 var(--parkx-space-16);
    }

    .gm-modal--play .gm-play-scroll-spacer__msg {
        margin: 0;
        color: #fff;
        font-size: var(--parkx-text-sm);
        font-weight: 900;
        letter-spacing: 0.05em;
        text-align: center;
        white-space: nowrap;
    }

    .gm-modal--play .gm-content--play .scratch {
        flex: 0 0 auto;
        /* アドレスバー非表示時の最大高さ。バー表示中は可視領域より高くなるため
           スクロール余地が生まれ、上スクロールでバーが確実に隠れて最大化する。 */
        height: 100lvh;
        width: auto;
        max-width: 100%;
        aspect-ratio: 804 / 572;
        margin: 0 auto;
    }

    .gm-modal--play .gm-landscape-hint-btn {
        display: inline-flex;
    }

    /* SP横向き・ヒントタブ表示（プレイタブのフルスクリーン化とは別ケース）。
       ポートレート用の縦積みレイアウト（タブ→箱→暗号ボタン→スピーチカード、
       間の余白込みで箱の外だけで約200px消費）のままだと、横向きの低い
       viewport高（400px前後）ではほとんど箱の中身に高さが残らず窮屈になる。
       横向きは横幅がPCに近く十分あるため、PCと同じ「タブ/暗号ボタンを
       箱の上に重ねる」配置に戻して縦方向の消費を減らす。スピーチカードは
       「スマホを横向きにすると…」という案内文であり、既に横向きの今は
       意味を持たないため非表示にする。 */
    .gm-modal:not(.gm-modal--play) {
        padding-top: 54px;
    }

    .gm-modal:not(.gm-modal--play) .gm-tabs {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .gm-modal:not(.gm-modal--play) .gm-code-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

    .gm-modal:not(.gm-modal--play) .parkx-speech-card {
        display: none;
    }

    .gm-modal:not(.gm-modal--play) .gm-box {
        max-height: calc(100vh - 86px);
        /* dvh対応ブラウザ向け（フォールバックは上のvh版）。 */
        max-height: calc(100dvh - 86px);
    }

    /* 箱の中身も、縦積み(SP)ではなくPCと同じ横並びに戻して更に高さを節約する。 */
    .gm-modal:not(.gm-modal--play) .gm-premium-panel {
        flex-direction: row;
        align-items: center;
        height: 56px;
        padding: 0 var(--parkx-space-8);
    }

    .gm-modal:not(.gm-modal--play) .gm-premium-panel__job {
        width: auto;
        padding-right: var(--parkx-space-8);
        padding-bottom: 0;
        border-right: 1px solid var(--parkx-color-border);
        border-bottom: none;
    }

    .gm-modal:not(.gm-modal--play) .gm-premium-panel__company {
        width: auto;
    }

    .gm-modal:not(.gm-modal--play) .gm-thumb-container {
        flex-direction: row;
        align-items: center;
    }
}