body.is-gaming { overflow: hidden; }

.game {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(0, 0, 0, .94);
    display: grid; place-items: center; padding: 10px;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
.game[hidden] { display: none; }

.game__frame {
    width: min(100%, calc((100vh - 120px) * 1.7778));
    display: grid; gap: 10px;
}
.game__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.game__close {
    font-family: var(--font-pixel); font-size: 8px;
    background: var(--panel); color: var(--pink);
    border: 0; padding: 9px 10px; cursor: pointer;
    box-shadow: -3px 0 0 0 var(--pink), 3px 0 0 0 var(--pink), 0 -3px 0 0 var(--pink), 0 3px 0 0 var(--pink);
}

.game__screen {
    position: relative; background: #000;
    box-shadow: -4px 0 0 0 var(--green), 4px 0 0 0 var(--green), 0 -4px 0 0 var(--green), 0 4px 0 0 var(--green);
}
#game-canvas {
    display: block; width: 100%; height: auto;
    image-rendering: pixelated; touch-action: none; cursor: crosshair;
}

.game__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(8px, 2vw, 18px); text-align: center; padding: 12px;
    background: rgba(0, 0, 0, .78);
}
.game__overlay[hidden], .game .px-btn[hidden] { display: none; }
.game__title { font-family: var(--font-pixel); font-size: clamp(12px, 3vw, 26px); color: var(--green); line-height: 1.5; }
.game__text { white-space: pre-line; color: var(--text); font-size: clamp(11px, 1.7vw, 15px); max-width: 90%; }
.game__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Tombol layar sentuh */
.game__pad { display: none; justify-content: space-between; gap: 12px; }
.pad { display: flex; gap: 10px; }
.pad__btn {
    font-family: var(--font-pixel); font-size: 10px;
    width: 64px; height: 54px; border: 0; cursor: pointer;
    background: var(--panel); color: var(--text);
    touch-action: none; user-select: none; -webkit-user-select: none;
    box-shadow: -3px 0 0 0 #444, 3px 0 0 0 #444, 0 -3px 0 0 #444, 0 3px 0 0 #444;
}
.pad__btn--fire { background: var(--green); color: #101010; }
.pad__btn:active { filter: brightness(1.3); }

/* ---------- Mobile ---------- */
.game__tools { display: flex; gap: 10px; }
.game__auto, .game__rotate { display: none; }
.game__auto { color: var(--green); box-shadow: -3px 0 0 0 var(--green), 3px 0 0 0 var(--green), 0 -3px 0 0 var(--green), 0 3px 0 0 var(--green); }
.game__auto.is-off { color: var(--text-2); box-shadow: -3px 0 0 0 #444, 3px 0 0 0 #444, 0 -3px 0 0 #444, 0 3px 0 0 #444; }
.game__rotate { font-family: var(--font-pixel); font-size: 7px; line-height: 1.6; color: var(--yellow); text-align: center; }

@supports (height: 100dvh) {
    .game__frame { width: min(100%, calc((100dvh - 120px) * 1.7778)); }
}

@media (pointer: coarse) {
    .game__pad, .game__auto { display: flex; }
    .game__frame { width: 100%; }
    .game__pad .pad__btn { width: 70px; height: 58px; }
}

/* Portrait: layar kecil, sarankan landscape */
@media (pointer: coarse) and (orientation: portrait) {
    .game__rotate { display: block; }
    .game__label { display: none; }
}

/* Landscape: layar penuh tinggi, kontrol melayang di atas layar */
@media (pointer: coarse) and (orientation: landscape) {
    .game { padding: 0; }
    .game__frame { gap: 4px; width: min(100%, calc((100vh - 38px) * 1.7778)); }
    @supports (height: 100dvh) {
        .game__frame { width: min(100%, calc((100dvh - 38px) * 1.7778)); }
    }
    .game__bar { height: 30px; padding: 0 8px; }
    .game__pad {
        position: fixed; left: 14px; right: 14px; bottom: 14px;
        pointer-events: none; z-index: 2;
    }
    .game__pad .pad__btn { pointer-events: auto; opacity: .72; width: 78px; height: 64px; }
}