/**
 * BOLANDILA Interactive Game Template
 * Theme CSS
 *
 * Role of this file:
 * - Defines global CSS variables
 * - Applies typography and visual language
 * - Styles reusable visual primitives
 * - Keeps the premium/golden/magical look consistent
 *
 * Note:
 * Values here mirror config/theme.php.
 * Later JS can override selected variables dynamically if needed.
 */
/*
|--------------------------------------------------------------------------
| Local font: Rubik
|--------------------------------------------------------------------------
| Font files are expected in /fonts, while this CSS file is in /css.
| Therefore paths start with ../fonts/
*/

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
:root {
    /*
    |--------------------------------------------------------------------------
    | Typography
    |--------------------------------------------------------------------------
    */

    --game-font-family: "Rubik", Arial, sans-serif;
    --game-base-font-size: 18px;
    --game-base-font-size-mobile: 17px;
    --game-title-font-size: 32px;
    --game-title-font-size-mobile: 25px;
    --game-button-font-size: 18px;
    --game-line-height: 1.35;
    --game-letter-spacing: 0.01em;

    /*
    |--------------------------------------------------------------------------
    | Colors
    |--------------------------------------------------------------------------
    */

    --color-gold: #f6c84c;
    --color-gold-dark: #9c6b12;
    --color-gold-light: #ffe58a;

    --color-dark: #070707;
    --color-surface-dark: rgba(5, 5, 8, 0.72);

    --color-text: #fff7d6;
    --color-text-muted: rgba(255, 247, 214, 0.78);

    --color-danger: #ff5252;
    --color-success: #ffe27a;

    --color-overlay-dark: rgba(0, 0, 0, 0.54);
    --color-overlay-strong: rgba(0, 0, 0, 0.72);

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

    --stage-background-color: #070707;
    --stage-background-size: cover;
    --stage-background-position: center center;

    --blur-fill-filter: blur(22px);
    --blur-fill-scale: 1.12;
    --blur-fill-opacity: 0.82;

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

    --title-top: 5.5%;
    --title-left: 6%;
    --title-right: 6%;
    --title-color: var(--color-gold-light);
    --title-font-weight: 700;
    --title-text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85);
    --title-glow: 0 0 18px rgba(246, 200, 76, 0.32);

    /*
    |--------------------------------------------------------------------------
    | Text boxes
    |--------------------------------------------------------------------------
    */

    --text-box-width: 86%;
    --text-box-max-height: 36vh;
    --text-box-max-height-mobile: 34vh;
    --text-box-padding: 18px 18px;
    --text-box-padding-mobile: 16px 15px;

    --text-box-background: rgba(5, 5, 8, 0.64);
    --text-box-border: 1px solid rgba(246, 200, 76, 0.82);
    --text-box-border-radius: 18px;
    --text-box-backdrop-filter: blur(12px);
    --text-box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42), 0 0 24px rgba(246, 200, 76, 0.14);

    /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------
    */

    --button-min-height: 48px;
    --button-padding: 12px 22px;
    --button-border-radius: 999px;
    --button-gap: 10px;

    --button-primary-background: linear-gradient(135deg, #ffe58a 0%, #f6c84c 42%, #9c6b12 100%);
    --button-primary-color: #140f05;
    --button-primary-border: 1px solid rgba(255, 229, 138, 0.88);
    --button-primary-shadow: 0 10px 28px rgba(246, 200, 76, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.34);

    --button-outline-background: rgba(0, 0, 0, 0.20);
    --button-outline-color: var(--color-gold-light);
    --button-outline-border: 1px solid rgba(246, 200, 76, 0.9);
    --button-outline-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), inset 0 0 18px rgba(246, 200, 76, 0.08);

    /*
    |--------------------------------------------------------------------------
    | Restart button
    |--------------------------------------------------------------------------
    */

    --restart-button-top: max(14px, env(safe-area-inset-top));
    --restart-button-right: max(14px, env(safe-area-inset-right));
    --restart-button-width: 42px;
    --restart-button-height: 42px;
    --restart-button-background: rgba(5, 5, 8, 0.55);
    --restart-button-border: 1px solid rgba(246, 200, 76, 0.78);
    --restart-button-border-radius: 999px;
    --restart-button-backdrop-filter: blur(10px);
    --restart-button-shadow: 0 8px 24px rgba(0, 0, 0, 0.42), 0 0 16px rgba(246, 200, 76, 0.18);
    --restart-icon-width: 22px;
    --restart-icon-height: 22px;

    /*
    |--------------------------------------------------------------------------
    | Modals
    |--------------------------------------------------------------------------
    */

    --modal-width: 84%;
    --modal-max-height: 70vh;
    --modal-background: rgba(5, 5, 8, 0.76);
    --modal-border: 1px solid rgba(246, 200, 76, 0.88);
    --modal-border-radius: 22px;
    --modal-padding: 22px 18px;
    --modal-backdrop-filter: blur(14px);
    --modal-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), 0 0 32px rgba(246, 200, 76, 0.18);
    --modal-overlay-background: rgba(0, 0, 0, 0.58);

    /*
    |--------------------------------------------------------------------------
    | Banners
    |--------------------------------------------------------------------------
    */

    --banner-background: rgba(5, 5, 8, 0.70);
    --banner-border: 1px solid rgba(246, 200, 76, 0.78);
    --banner-border-radius: 16px;
    --banner-padding: 14px 16px;
    --banner-color: var(--color-text);
    --banner-backdrop-filter: blur(12px);
    --banner-shadow: 0 12px 34px rgba(0, 0, 0, 0.46), 0 0 18px rgba(246, 200, 76, 0.12);

    /*
    |--------------------------------------------------------------------------
    | Items
    |--------------------------------------------------------------------------
    */

    --item-transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
    --item-success-glow: 0 0 34px rgba(246, 200, 76, 0.72);

    /*
    |--------------------------------------------------------------------------
    | Level 6 scale marker
    |--------------------------------------------------------------------------
    */

    --scale-marker-width: 22px;
    --scale-marker-height: 34px;
    --scale-marker-background: linear-gradient(180deg, #ffe58a 0%, #f6c84c 55%, #9c6b12 100%);
    --scale-marker-border: 1px solid rgba(255, 229, 138, 0.95);
    --scale-marker-border-radius: 12px 12px 4px 4px;
    --scale-marker-shadow: 0 0 24px rgba(246, 200, 76, 0.72), 0 6px 18px rgba(0, 0, 0, 0.42);
    --scale-marker-transition: left 160ms ease, transform 160ms ease, filter 160ms ease;

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

    --screen-fade-duration: 420ms;
    --background-blur-duration: 460ms;
    --box-fade-duration: 280ms;

    --cursor-glow-size: 26px;
    --cursor-glow-background: radial-gradient(circle, rgba(246, 200, 76, 0.55) 0%, rgba(246, 200, 76, 0.16) 42%, rgba(246, 200, 76, 0) 72%);

    /*
    |--------------------------------------------------------------------------
    | Z-index system
    |--------------------------------------------------------------------------
    */

    --z-background-blur: 1;
    --z-stage-background: 2;
    --z-stage-overlay: 3;
    --z-screen-content: 10;
    --z-banner-layer: 35;
    --z-restart-button: 45;
    --z-modal-layer: 60;
    --z-effects-layer: 70;
    --z-debugger: 90;
}

/*
|--------------------------------------------------------------------------
| Base typography
|--------------------------------------------------------------------------
*/

body {
    font-family: var(--game-font-family);
    font-size: var(--game-base-font-size);
    color: var(--color-text);

    background: var(--color-dark);
    letter-spacing: var(--game-letter-spacing);
}

/*
|--------------------------------------------------------------------------
| Common text styling inside game UI
|--------------------------------------------------------------------------
*/

.game-title,
.text-box,
.modal-box,
.banner-box,
.game-button {
    font-family: var(--game-font-family);
}

.game-title {
    color: var(--title-color);
    font-size: var(--game-title-font-size);
    font-weight: var(--title-font-weight);
    line-height: 1.08;
    text-align: center;
    text-shadow: var(--title-text-shadow), var(--title-glow);
}

.text-box,
.modal-box,
.banner-box {
    color: var(--color-text);
    line-height: var(--game-line-height);
}

.text-box p,
.modal-box p,
.banner-box p {
    margin: 0 0 0.75em;
}

.text-box p:last-child,
.modal-box p:last-child,
.banner-box p:last-child {
    margin-bottom: 0;
}

.text-box strong,
.modal-box strong,
.banner-box strong {
    color: var(--color-gold-light);
    font-weight: 700;
}

.text-box em,
.modal-box em,
.banner-box em {
    color: var(--color-text-muted);
}

/*
|--------------------------------------------------------------------------
| Focus states
|--------------------------------------------------------------------------
*/

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(255, 229, 138, 0.92);
    outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Selection
|--------------------------------------------------------------------------
*/

::selection {
    background: rgba(246, 200, 76, 0.35);
    color: var(--color-text);
}

/*
|--------------------------------------------------------------------------
| Scrollbar styling for internal boxes
|--------------------------------------------------------------------------
*/

.text-box,
.modal-box,
.banner-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(246, 200, 76, 0.75) rgba(255, 255, 255, 0.08);
}

.text-box::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.banner-box::-webkit-scrollbar {
    width: 7px;
}

.text-box::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
.banner-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.text-box::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.banner-box::-webkit-scrollbar-thumb {
    background: rgba(246, 200, 76, 0.72);
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Mobile typography overrides
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    body {
        font-size: var(--game-base-font-size-mobile);
    }

    .game-title {
        font-size: var(--game-title-font-size-mobile);
    }
}