/**
 * BOLANDILA Interactive Game Template
 * Layout CSS
 *
 * Role of this file:
 * - Defines the full-screen game shell
 * - Defines the internal 9:16 game stage
 * - Handles desktop blurred side background
 * - Defines the main visual layers
 * - Prevents unwanted page scrolling
 */

/*
|--------------------------------------------------------------------------
| Full-screen app shell
|--------------------------------------------------------------------------
*/

.game-shell {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: var(--stage-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
|--------------------------------------------------------------------------
| Desktop / tablet blurred background fill
|--------------------------------------------------------------------------
*/

.background-blur-fill {
    position: absolute;
    inset: 0;
    z-index: var(--z-background-blur);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: var(--blur-fill-filter);
    transform: scale(var(--blur-fill-scale));
    opacity: var(--blur-fill-opacity);
    transition:
        background-image var(--background-blur-duration) ease,
        opacity var(--background-blur-duration) ease,
        filter var(--background-blur-duration) ease;
    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Main 9:16 game stage
|--------------------------------------------------------------------------
*/

.game-stage {
    position: relative;
    z-index: 2;

    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));
    aspect-ratio: 9 / 16;

    overflow: hidden;
    background: var(--stage-background-color);
    isolation: isolate;

    box-shadow:
        0 0 70px rgba(0, 0, 0, 0.72),
        0 0 34px rgba(246, 200, 76, 0.10);
}

/*
|--------------------------------------------------------------------------
| Current stage background
|--------------------------------------------------------------------------
*/

.stage-background {
    position: absolute;
    inset: 0;
    z-index: var(--z-stage-background);

    background-repeat: no-repeat;
    background-size: var(--stage-background-size);
    background-position: var(--stage-background-position);

    transition:
        background-image var(--background-blur-duration) ease,
        filter var(--background-blur-duration) ease,
        transform var(--background-blur-duration) ease,
        opacity var(--background-blur-duration) ease;
}

.game-stage.is-background-blurred .stage-background {
    filter: blur(10px);
    transform: scale(1.035);
}

.game-stage.is-background-darkened .stage-background {
    opacity: 0.86;
}

/*
|--------------------------------------------------------------------------
| Stage overlay
|--------------------------------------------------------------------------
*/

.stage-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-stage-overlay);

    background: transparent;
    opacity: 0;
    transition:
        opacity var(--background-blur-duration) ease,
        background-color var(--background-blur-duration) ease;
    pointer-events: none;
}

.game-stage.is-overlay-dark .stage-overlay {
    background: var(--color-overlay-dark);
    opacity: 1;
}

.game-stage.is-overlay-strong .stage-overlay {
    background: var(--color-overlay-strong);
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Main dynamic content layer
|--------------------------------------------------------------------------
*/

.screen-content {
    position: absolute;
    inset: 0;
    z-index: var(--z-screen-content);

    width: 100%;
    height: 100%;

    overflow: hidden;
    pointer-events: auto;
}

/*
|--------------------------------------------------------------------------
| Banner layer
|--------------------------------------------------------------------------
*/

.banner-layer {
    position: absolute;
    inset: 0;
    z-index: var(--z-banner-layer);

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.banner-layer > * {
    pointer-events: auto;
}

/*
|--------------------------------------------------------------------------
| Modal layer
|--------------------------------------------------------------------------
*/

.modal-layer {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal-layer);

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.modal-layer.is-active {
    pointer-events: auto;
}

/*
|--------------------------------------------------------------------------
| Effects layer
|--------------------------------------------------------------------------
*/

.effects-layer {
    position: absolute;
    inset: 0;
    z-index: var(--z-effects-layer);

    width: 100%;
    height: 100%;

    overflow: hidden;
    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Debugger layer
|--------------------------------------------------------------------------
*/

.debugger-panel {
    position: absolute;
    z-index: var(--z-debugger);

    max-height: 72%;
    overflow: auto;
}

/*
|--------------------------------------------------------------------------
| Persistent restart button
|--------------------------------------------------------------------------
*/

.restart-button {
    position: absolute;
    top: var(--restart-button-top);
    right: var(--restart-button-right);
    z-index: var(--z-restart-button);

    width: var(--restart-button-width);
    height: var(--restart-button-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--restart-button-background);
    border: var(--restart-button-border);
    border-radius: var(--restart-button-border-radius);
    backdrop-filter: var(--restart-button-backdrop-filter);
    -webkit-backdrop-filter: var(--restart-button-backdrop-filter);
    box-shadow: var(--restart-button-shadow);

    transition:
        transform 180ms ease,
        filter 180ms ease,
        opacity 180ms ease,
        box-shadow 180ms ease;
}

.restart-button img {
    width: var(--restart-icon-width);
    height: var(--restart-icon-height);
    object-fit: contain;
    pointer-events: none;
}

.restart-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.restart-button:active {
    transform: translateY(1px) scale(0.98);
}

/*
|--------------------------------------------------------------------------
| Generic positioned screen blocks
|--------------------------------------------------------------------------
*/

.screen-block {
    position: absolute;
    width: var(--text-box-width);
    left: 50%;
    transform: translateX(-50%);
}

.screen-block.is-top-under-title {
    top: 15%;
}

.screen-block.is-center {
    top: 50%;
    transform: translate(-50%, -50%);
}

.screen-block.is-bottom {
    bottom: 7%;
}

.screen-block.is-bottom-high {
    bottom: 13%;
}

/*
|--------------------------------------------------------------------------
| Title positioning
|--------------------------------------------------------------------------
*/

.game-title {
    position: absolute;
    top: var(--title-top);
    left: var(--title-left);
    right: var(--title-right);
    z-index: 2;

    margin: 0;
    pointer-events: none;
}

.game-title.is-hidden {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Main content stack
|--------------------------------------------------------------------------
*/

.content-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: 14px;
}

.content-stack.is-bottom-aligned {
    justify-content: flex-end;
}

.content-stack.is-top-aligned {
    justify-content: flex-start;
}

/*
|--------------------------------------------------------------------------
| Button group positioning
|--------------------------------------------------------------------------
*/

.button-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    width: 100%;
    gap: var(--button-gap);
}

.button-group.is-inline {
    flex-direction: row;
}

.button-group.is-centered {
    align-items: center;
}

.button-group.is-centered .game-button {
    width: auto;
    min-width: 60%;
}

/*
|--------------------------------------------------------------------------
| Full-stage object containers
|--------------------------------------------------------------------------
*/

.full-stage-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.full-stage-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
}

.full-stage-bottom {
    position: absolute;
    left: 7%;
    bottom: 7%;
    width: 86%;
}

/*
|--------------------------------------------------------------------------
| Safe-area handling
|--------------------------------------------------------------------------
*/

@supports (padding: max(0px)) {
    .game-stage {
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}

/*
|--------------------------------------------------------------------------
| Orientation protection
|--------------------------------------------------------------------------
*/

@media (orientation: landscape) and (max-height: 520px) {
    .game-stage {
        height: 100dvh;
        width: calc(100dvh * 9 / 16);
    }
}

/*
|--------------------------------------------------------------------------
| Very small devices
|--------------------------------------------------------------------------
*/

@media (max-width: 360px) {
    .screen-block {
        width: 88%;
    }

    .screen-block.is-top-under-title {
        top: 14%;
    }

    .screen-block.is-bottom {
        bottom: 5.5%;
    }

    .restart-button {
        width: 38px;
        height: 38px;
    }
}

/*
|--------------------------------------------------------------------------
| Screen root
|--------------------------------------------------------------------------
*/

.screen {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}