.gh-fullscreen-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 2px solid #f3ddb3;
    border-radius: 999px;
    background: #fff8e8;
    color: #8b693f;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 #e6c58f;
    white-space: nowrap;
    touch-action: manipulation;
}

.jd-wrap:fullscreen,
.jd-wrap.gh-simulated-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-radius: 0;
    overflow: auto;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

@media (orientation: landscape) and (max-height: 600px) {
    .jd-wrap:fullscreen,
    .jd-wrap.gh-simulated-fullscreen { overflow: hidden; }
    .jd-wrap:fullscreen .jd-main,
    .jd-wrap.gh-simulated-fullscreen .jd-main { height: 100%; gap: 5px; }
    .jd-wrap:fullscreen .jd-hud,
    .jd-wrap.gh-simulated-fullscreen .jd-hud { flex-wrap: nowrap; }
    .jd-wrap:fullscreen .jd-game-row,
    .jd-wrap.gh-simulated-fullscreen .jd-game-row { display: flex; height: calc(100dvh - 62px); gap: 7px; }
    .jd-wrap:fullscreen .jd-canvas-wrap,
    .jd-wrap.gh-simulated-fullscreen .jd-canvas-wrap { width: auto; height: 100%; aspect-ratio: 360 / 560; flex: 0 0 auto; }
    .jd-wrap:fullscreen .jd-shop,
    .jd-wrap.gh-simulated-fullscreen .jd-shop { display: block; width: 205px; height: 100%; margin: 0; overflow-y: auto; padding: 7px; }
    .jd-wrap:fullscreen .jd-status,
    .jd-wrap.gh-simulated-fullscreen .jd-status { display: none; }
}
.gh-fullscreen-icon { font-size: 1.2rem; vertical-align: -0.08em; }
.gh-fullscreen-label { margin-left: 4px; font-size: .75rem; }

.gh-game-shell {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: contain;
}
.gh-game-shell button,
.gh-game-shell canvas,
.gh-game-shell [role="button"] {
    touch-action: manipulation;
}

@media (max-width: 600px) {
    .bb-wrap, .sd-wrap, .bk-wrap, .mb-wrap, .fx-wrap {
        padding: 12px 6px;
        border-radius: 18px;
    }
    .bb-main, .sd-main, .bk-main, .mb-main, .fx-main { gap: 8px; }
    .bb-hud, .sd-hud, .bk-hud, .mb-hud, .fx-hud { gap: 5px; }
    .bb-panel, .sd-panel, .bk-panel, .mb-panel, .fx-panel {
        padding: 4px 8px;
        border-width: 1px;
        border-radius: 10px;
        box-shadow: 0 2px 0 #e6c58f;
    }
    .bb-panel h3, .sd-panel h3, .bk-panel h3, .mb-panel h3, .fx-panel h3 {
        margin-bottom: 2px;
        font-size: .56rem;
    }
    .bb-panel p, .sd-panel p, .bk-panel p, .mb-panel p, .fx-panel p { font-size: 1rem; }
    .bb-mute, .sd-mute, .bk-mute, .mb-mute, .fx-mute,
    .bb-reset, .sd-reset, .bk-reset, .mb-reset, .fx-reset,
    .gh-fullscreen-btn {
        min-width: 36px;
        width: auto;
        height: 36px;
        padding: 0 9px;
        font-size: .78rem;
        box-shadow: 0 2px 0 rgba(130,90,45,.28);
    }
    .gh-fullscreen-label { display: none; }
    .bb-items-row, .sd-items-row, .mb-items-row { gap: 5px; }
    .bb-item-slot { width: 46px; height: 46px; }
    .bb-guide-btn, .sd-char-btn, .mb-char-btn { padding: 6px 10px; font-size: .7rem; }
    .bb-tray { min-height: 76px; gap: 10px; }
    .bb-hint, .sd-hint, .bk-hint, .mb-hint, .fx-hint { font-size: .72rem; }
    .bb-status, .sd-status, .bk-status, .mb-status, .fx-status { font-size: .78rem; }
    .fx-canvas-wrap { width: min(calc(100vw - 16px), calc((100dvh - 136px) * .64285)); }
}

:is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap):fullscreen,
:is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap).gh-simulated-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-radius: 0;
    overflow: auto;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}
body.gh-body-game-fullscreen { overflow: hidden !important; }

:is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap):fullscreen .gh-fullscreen-btn,
:is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap).gh-simulated-fullscreen .gh-fullscreen-btn {
    background: #ffe0b5;
    border-color: #e2a85f;
}

.sd-wrap:fullscreen .sd-canvas-wrap,
.sd-wrap.gh-simulated-fullscreen .sd-canvas-wrap {
    width: min(calc(100vw - 16px), calc((100dvh - 150px) * .5625));
}
.bk-wrap:fullscreen .bk-canvas-wrap,
.bk-wrap.gh-simulated-fullscreen .bk-canvas-wrap {
    width: min(calc(100vw - 16px), calc((100dvh - 136px) * .64285));
}
.fx-wrap:fullscreen .fx-canvas-wrap,
.fx-wrap.gh-simulated-fullscreen .fx-canvas-wrap {
    width: min(calc(100vw - 16px), calc((100dvh - 136px) * .64285));
}
.mb-wrap:fullscreen .mb-board-wrap,
.mb-wrap.gh-simulated-fullscreen .mb-board-wrap,
.bb-wrap:fullscreen .bb-board-wrap,
.bb-wrap.gh-simulated-fullscreen .bb-board-wrap {
    width: min(calc(100vw - 16px), calc(100dvh - 190px));
}

@media (orientation: landscape) and (max-height: 600px) {
    :is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap):fullscreen,
    :is(.bb-wrap,.sd-wrap,.bk-wrap,.mb-wrap,.fx-wrap).gh-simulated-fullscreen { overflow: hidden; }

    .sd-wrap:fullscreen .sd-main,
    .sd-wrap.gh-simulated-fullscreen .sd-main,
    .bk-wrap:fullscreen .bk-main,
    .bk-wrap.gh-simulated-fullscreen .bk-main,
    .mb-wrap:fullscreen .mb-main,
    .mb-wrap.gh-simulated-fullscreen .mb-main,
    .fx-wrap:fullscreen .fx-main,
    .fx-wrap.gh-simulated-fullscreen .fx-main {
        display: grid;
        grid-template-columns: minmax(175px, 38vw) auto;
        grid-template-areas: "hud game" "items game" "status game" "hint game";
        justify-content: center;
        align-content: center;
        column-gap: 12px;
        row-gap: 7px;
        height: 100%;
    }
    .sd-wrap:fullscreen .sd-hud, .sd-wrap.gh-simulated-fullscreen .sd-hud,
    .bk-wrap:fullscreen .bk-hud, .bk-wrap.gh-simulated-fullscreen .bk-hud,
    .mb-wrap:fullscreen .mb-hud, .mb-wrap.gh-simulated-fullscreen .mb-hud,
    .fx-wrap:fullscreen .fx-hud, .fx-wrap.gh-simulated-fullscreen .fx-hud { grid-area: hud; }
    .sd-wrap:fullscreen .sd-items-row, .sd-wrap.gh-simulated-fullscreen .sd-items-row,
    .mb-wrap:fullscreen .mb-items-row, .mb-wrap.gh-simulated-fullscreen .mb-items-row { grid-area: items; }
    .sd-wrap:fullscreen .sd-canvas-wrap, .sd-wrap.gh-simulated-fullscreen .sd-canvas-wrap,
    .bk-wrap:fullscreen .bk-canvas-wrap, .bk-wrap.gh-simulated-fullscreen .bk-canvas-wrap,
    .mb-wrap:fullscreen .mb-board-wrap, .mb-wrap.gh-simulated-fullscreen .mb-board-wrap,
    .fx-wrap:fullscreen .fx-canvas-wrap, .fx-wrap.gh-simulated-fullscreen .fx-canvas-wrap {
        grid-area: game;
        width: auto;
        height: calc(100dvh - 16px);
        max-height: 100%;
    }
    .sd-wrap:fullscreen .sd-canvas-wrap, .sd-wrap.gh-simulated-fullscreen .sd-canvas-wrap { aspect-ratio: 360 / 640; }
    .bk-wrap:fullscreen .bk-canvas-wrap, .bk-wrap.gh-simulated-fullscreen .bk-canvas-wrap { aspect-ratio: 360 / 560; }
    .fx-wrap:fullscreen .fx-canvas-wrap, .fx-wrap.gh-simulated-fullscreen .fx-canvas-wrap { aspect-ratio: 360 / 560; }
    .mb-wrap:fullscreen .mb-board-wrap, .mb-wrap.gh-simulated-fullscreen .mb-board-wrap { aspect-ratio: 1; }
    .sd-wrap:fullscreen .sd-status, .sd-wrap.gh-simulated-fullscreen .sd-status,
    .bk-wrap:fullscreen .bk-status, .bk-wrap.gh-simulated-fullscreen .bk-status,
    .mb-wrap:fullscreen .mb-status, .mb-wrap.gh-simulated-fullscreen .mb-status,
    .fx-wrap:fullscreen .fx-status, .fx-wrap.gh-simulated-fullscreen .fx-status { grid-area: status; }
    .sd-wrap:fullscreen .sd-hint, .sd-wrap.gh-simulated-fullscreen .sd-hint,
    .bk-wrap:fullscreen .bk-hint, .bk-wrap.gh-simulated-fullscreen .bk-hint,
    .mb-wrap:fullscreen .mb-hint, .mb-wrap.gh-simulated-fullscreen .mb-hint,
    .fx-wrap:fullscreen .fx-hint, .fx-wrap.gh-simulated-fullscreen .fx-hint { grid-area: hint; }

    .bb-wrap:fullscreen .bb-main,
    .bb-wrap.gh-simulated-fullscreen .bb-main {
        display: grid;
        grid-template-columns: minmax(230px, 41vw) auto;
        grid-template-areas: "hud game" "items game" "tray game" "status game" "hint game";
        justify-content: center;
        align-content: center;
        column-gap: 12px;
        row-gap: 5px;
        height: 100%;
    }
    .bb-wrap:fullscreen .bb-hud, .bb-wrap.gh-simulated-fullscreen .bb-hud { grid-area: hud; }
    .bb-wrap:fullscreen .bb-items-row, .bb-wrap.gh-simulated-fullscreen .bb-items-row { grid-area: items; }
    .bb-wrap:fullscreen .bb-board-wrap, .bb-wrap.gh-simulated-fullscreen .bb-board-wrap {
        grid-area: game;
        width: calc(100dvh - 16px);
    }
    .bb-wrap:fullscreen .bb-tray, .bb-wrap.gh-simulated-fullscreen .bb-tray { grid-area: tray; min-height: 66px; gap: 7px; }
    .bb-wrap:fullscreen .bb-status, .bb-wrap.gh-simulated-fullscreen .bb-status { grid-area: status; }
    .bb-wrap:fullscreen .bb-hint, .bb-wrap.gh-simulated-fullscreen .bb-hint { grid-area: hint; }
}