/* ==========================================================================
   RYUHEIDOU / unitygame.css — Unity Play のゲームを遊ぶページ（/games/<slug>/play/、build7.js）
   appframe.css と一緒に読む（ページ自体は動かさない、の部分を共有）。

   .ugame          ページの残りの高さを埋める箱。[ステージ][操作バー] の縦並び
   .ugame__stage   ゲームの枠を置く場所。size コンテナにして、枠を「入るいちばん大きい比率どおりの箱」にする
   .ugame__box     16:9（横長）/ 9:16（縦長）の枠。最初はポスター、押されたら iframe が入る
   .is-full        画面全体に広げた状態（タッチ端末で始めたとき・全画面ボタン）。
                   Fullscreen API が使えない iPhone でも、これだけで画面を覆う
   ========================================================================== */

/* ページ自体は動かさない（矢印キー・スペースでページがスクロールしてゲームがずれないように） */
html:has(.ugame), html:has(.ugame) body { overflow: hidden; overscroll-behavior: none; height: 100dvh; }

.ugame {
    --ar-w: 16;
    --ar-h: 9;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-h) - var(--tab-h));
    background: var(--paper-3);
}

.ugame[data-orient="portrait"] { --ar-w: 9; --ar-h: 16; }

.ugame__stage {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--sp-3);
    container-type: size;
    display: grid;
    place-items: center;
}

.ugame__box {
    position: relative;
    width: min(100cqw, 100cqh * var(--ar-w) / var(--ar-h));
    aspect-ratio: var(--ar-w) / var(--ar-h);
    overflow: hidden;
    /* 中のポスターを枠の大きさに合わせるため、枠自身もコンテナにする（cq 単位は枠が基準になる） */
    container-type: size;
    background: #111;
    border: var(--border-thick);
    box-shadow: var(--shadow);
}

.ugame__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ----- 始める前：サムネイルとボタン ----------------------------------- */
.ugame__poster { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.ugame__poster-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; filter: blur(22px) saturate(1.2) brightness(.8); transform: scale(1.2);
}
.ugame__poster-body {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    text-align: center;
}
.ugame__poster-thumb {
    width: auto;
    height: min(42cqh, 260px);
    aspect-ratio: 1;
    object-fit: cover;
    border: var(--border-thick);
    box-shadow: var(--shadow);
}
.ugame[data-orient="portrait"] .ugame__poster-thumb { height: auto; width: min(60cqw, 260px); }
.ugame__start { font-size: var(--fs-md, 1rem); }
.ugame__hint {
    max-width: 30em;
    padding: var(--sp-1) var(--sp-2);
    background: var(--paper-2);
    border: var(--border);
    font-size: var(--fs-xs);
    line-height: 1.6;
}
.ugame__hint--touch, .ugame__hint--pconly { display: none; }

/* スマホ幅の横長の枠は低いので、説明は省いてボタンを優先する */
@container (max-height: 280px) {
    .ugame__poster-body { gap: var(--sp-2); padding: var(--sp-2); }
    .ugame__hint--pc, .ugame__hint--touch { display: none !important; }
}

@media (pointer: coarse) {
    .ugame__hint--pc { display: none; }
    .ugame__hint--touch { display: block; }
    /* キーボード専用のゲームは、タッチ端末では起動させない */
    .ugame[data-pc-only] .ugame__start,
    .ugame[data-pc-only] .ugame__hint--touch,
    .ugame[data-pc-only] .ugame__full { display: none; }
    .ugame[data-pc-only] .ugame__hint--pconly { display: block; }
}

/* ----- 読み込み中・失敗 --------------------------------------------- */
.ugame__loading, .ugame__error {
    position: absolute; inset: 0;
    display: none;
    place-content: center; justify-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    background: #111; color: #fff;
    text-align: center;
}
.ugame__loading-label { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; }
.ugame__progress { width: min(60cqw, 320px); height: 14px; border: 2px solid #fff; padding: 2px; }
.ugame__progress span { display: block; width: 0; height: 100%; background: var(--acid); transition: width .2s; }
.ugame__error { font-size: var(--fs-sm); }

.ugame:not([data-state="idle"]) .ugame__poster { display: none; }
.ugame[data-state="loading"] .ugame__loading { display: grid; }
.ugame[data-state="error"] .ugame__error { display: grid; }

/* ----- 下の操作バー -------------------------------------------------- */
.ugame__bar {
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-3);
    height: 48px;
    padding-inline: var(--sp-3);
    background: var(--paper-2);
    border-top: var(--border);
}
.ugame__back, .ugame__full {
    font: 700 var(--fs-xs)/1 var(--font-mono);
    letter-spacing: .1em;
    padding: var(--sp-2) var(--sp-3);
    border: var(--border);
    background: var(--paper-2);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    white-space: nowrap;
}
.ugame__back { justify-self: start; }
.ugame__full { justify-self: end; }
.ugame__back:hover, .ugame__back:focus-visible,
.ugame__full:hover, .ugame__full:focus-visible { background: var(--acid); }
.ugame__back:active, .ugame__full:active { transform: translate(2px, 2px); box-shadow: none; }
.ugame__title { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- 画面全体に広げた状態 ------------------------------------------ */
.ugame__close, .ugame__rotate { display: none; }

/* .column は z-index: 1 で重なりの文脈を作っているので、その中の固定配置だけでは
   タブバー（カラムの外）の下に潜る。広げている間はカラムごと前に出す */
html:has(.ugame.is-full) .column { z-index: 400; }

.ugame.is-full {
    position: fixed;
    inset: 0;
    z-index: 400;           /* タブバー（150）・ドロワー（300）より上 */
    height: 100%;
    background: #000;
}
.ugame:fullscreen { background: #000; }
.ugame.is-full .ugame__stage {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.ugame.is-full .ugame__box { border: 0; box-shadow: none; }
.ugame.is-full .ugame__bar { display: none; }

/* ゲームの UI に重ならないよう、角に小さく・半透明で置く */
.ugame.is-full .ugame__close {
    display: grid; place-items: center;
    position: absolute; z-index: 2;
    top: calc(env(safe-area-inset-top) + 6px);
    right: calc(env(safe-area-inset-right) + 6px);
    width: 34px; height: 34px;
    border: 2px solid #fff; border-radius: 50%;
    background: rgb(0 0 0 / .45); color: #fff;
    font-size: 1.25rem; line-height: 1;
    opacity: .7;
    cursor: pointer;
}
.ugame.is-full .ugame__close:hover, .ugame.is-full .ugame__close:focus-visible { opacity: 1; }

/* 横長のゲームを縦持ちで開いたとき：横向きを促す（そのまま遊ぶこともできる） */
@media (orientation: portrait) {
    .ugame.is-full[data-orient="landscape"]:not(.is-rotate-ok) .ugame__rotate {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
        position: absolute; inset: 0; z-index: 1;
        padding: var(--sp-5);
        background: rgb(0 0 0 / .82); color: #fff;
        text-align: center; font-weight: 700;
    }
}
.ugame__rotate-icon {
    width: 44px; height: 76px;
    border: 3px solid #fff; border-radius: 8px;
    animation: ugame-rotate 2.4s var(--ease, ease) infinite;
}
@keyframes ugame-rotate {
    0%, 25% { transform: rotate(0); }
    50%, 75% { transform: rotate(-90deg); }
    100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .ugame__rotate-icon { animation: none; transform: rotate(-90deg); } }

/* ----- PC（レールが出る幅）の横長ゲーム ------------------------------
   左レールを消し、左レール＋中央カラムのぶんをまとめてゲームの場所にする。
   右レール（メニュー・更新情報）は残す。カラムが左端から始まるので、
   中央寄せで置いているタブバーとドロワーも左寄せにして、カラムと揃える。
   縦長のゲームは 500px カラムに収まるので、いつものレイアウトのまま。 */
@media (min-width: 1180px) {
    html:has(.ugame[data-orient="landscape"]) {
        --col: calc(100vw - var(--rail) - var(--rail-gap));
    }
    html:has(.ugame[data-orient="landscape"]) .shell {
        grid-template-columns: minmax(0, 1fr) var(--rail);
    }
    html:has(.ugame[data-orient="landscape"]) .rail--left { display: none; }
    html:has(.ugame[data-orient="landscape"]) .column { border-left: 0; }
    html:has(.ugame[data-orient="landscape"]) .tabbar { left: 0; transform: none; border-left: 0; }
    html:has(.ugame[data-orient="landscape"]) .drawer { justify-content: start; }
    .ugame__stage { padding: var(--sp-5); }
}