:root {
    --layer-title: 10;
    --layer-game: 20;
    --layer-modal: 30;
    --layer-toast: 40;
    --overlay-close-duration: 160ms;
    --primary: #ffd54f;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #eee;
    --gold: #ffc107;
    --danger: #ff5252;
    --success: #66bb6a;
    --boss-color: #e040fb;
    --btn-blue: #2979ff;
    /* 게임 화면 밝은 톤 (아주 살짝 어둡게) */
    --game-bg: #ebebeb;
    --game-card: #f5f5f5;
    --game-card-border: #d5d5d5;
    --game-text: #2a2a2a;
    --game-text-muted: #5a5a5a;

    --color-white: #fff;
    --color-black: #000;
    --neutral-900: #222;
    --neutral-800: #333;
    --neutral-600: #555;
    --neutral-400: #888;
    --ui-surface-forest: #173d32;

    /* Shared text, answer and field colors; artwork retains its own palette. */
    --ui-text-on-art: #fff5dc;
    --ui-text-label: #fff2d8;
    --ui-text-warm: #fff6df;
    --ui-field-bg: #fff6dd;
    --ui-answer-blue: #b9e2ff;
    --ui-answer-ink: #216ba4;
    --ui-text-shadow: #103324;
    --ui-field-border: #bdba8b;
    --menu-ink: #243626;
    --popup-header-padding: 4px;
    --popup-header-icon-size: 40px;
    --popup-header-min-height: calc(44px + var(--popup-header-padding) * 2);

    /* Modal Theme */
    --modal-header-bg: rgba(0, 0, 0, 0.15);
    --modal-border-gold: rgba(255, 215, 130, 0.18);
    --modal-btn-border: rgba(231, 189, 105, 0.9);
    --modal-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    --modal-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --modal-btn-gradient-start: rgba(255, 214, 120, 0.95);
    --modal-btn-gradient-end: rgba(214, 140, 45, 0.95);
    --modal-btn-text: rgba(20, 15, 10, 0.92);
}

* {
    box-sizing: border-box;
    touch-action: manipulation;
    scrollbar-color: rgba(155, 180, 162, 0.7) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 1px solid rgba(11, 39, 28, 0.65);
    border-radius: 999px;
    background: rgba(155, 180, 162, 0.7);
}

html,
body {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    font-size: clamp(16px, 4vw, 24px); /* 화면 크기에 비례하여 확대 */
}

html {
    background: var(--ui-surface-forest);
    color-scheme: dark;
    overscroll-behavior: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    font-family: system-ui, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: clamp(16px, 4vw, 24px); /* 화면 크기에 비례하여 확대 */
    margin: 0;
    padding: 0;
    background: linear-gradient(-45deg, #0a0a0a, #1a1a1a, #0a0a0a, #2a2a2a);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-color);
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

/* Paint the entire installed window while JS sizes only the game frame.
   The browser decides whether that window includes the Android cutout. */
:root[data-installed-app='true'] {
    height: 100%;
    min-height: 0;
    max-height: none;
}

:root[data-installed-app='true'] body {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    background: var(--ui-surface-forest);
    animation: none;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ensure no horizontal overflow */
* {
    max-width: 100%;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--btn-blue) !important;
    outline-offset: 3px;
}
[hidden] {
    display: none !important;
}