/* Shared, bounded viewport for maps, training and battle scenes. */
body.game-viewport-page {
    max-width: 720px;
    touch-action: manipulation;
}

.game-viewport {
    width: min(100%, var(--game-viewport-width, 100%));
    max-width: var(--game-viewport-max-width, 680px);
    margin-inline: auto;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.game-viewport a,
.game-viewport button,
.game-viewport [role="button"] {
    touch-action: manipulation;
    pointer-events: auto;
}

/* Safari must never include tutorial pointer layers in touch hit-testing. */
.training_cursor,
.training_cursor img,
.training-prisoners-cursor,
.training-prisoners-cursor img {
    pointer-events: none !important;
    z-index: 30 !important;
}

body.game-viewport-page a[href] {
    touch-action: manipulation;
}

.game-viewport .btn_mini,
.training-bottom-right-action .btn_mini {
    text-align: center !important;
}

.training-bottom-right-action > a {
    text-align: center;
}

.game-viewport--grid {
    --game-viewport-max-width: 680px;
}

.game-viewport--battle {
    --game-viewport-max-width: 620px;
}

/* Stable actor positions shared by the initial and AJAX battle renderers. */
.battle-combatant {
    position: absolute;
    text-align: center;
    z-index: 10;
}

.battle-combatant--player {
    bottom: 35%;
    left: 10%;
    width: 35%;
}

.battle-combatant--enemy {
    bottom: 35%;
    right: 10%;
    width: 35%;
}

.battle-combatant--enemy > center:last-of-type {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.battle-combatant--enemy .hp {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

.game-viewport > .border {
    max-width: none;
}

.game-viewport__scene {
    position: relative;
    width: 100%;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: var(--game-scene-ratio, 336 / 248);
    margin-inline: auto;
    overflow: hidden;
    background-size: cover !important;
    box-sizing: border-box;
}

.game-viewport--mass-battle {
    --game-viewport-max-width: 680px;
}

.training-prisoners-cursor {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    line-height: 0;
    overflow: visible;
    z-index: 2147483000;
    pointer-events: none;
}

.training-prisoners-cursor img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
}

@media (max-width: 380px) {
    .game-viewport {
        max-width: 100%;
    }
}