:root {
    --bg-deep: #0b1325;
    --bg-mid: #132447;
    --bg-surface: #1b335f;
    --gold: #c9a84c;
    --gold-light: #e8d48b;
    --purple: #f79f88;
    --purple-dim: #c87d69;
    --text-primary: #e8e0d0;
    --text-secondary: #94a4c7;
    --text-muted: #5f7298;
    --success: #4ade80;
    --danger: #ef4444;
    --border: #3e6294;
    --font-display: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    --tm-ui-scale: 1;
    --tm-accent: #f79f88;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--text-primary);
    background-color: var(--bg-deep);
    font-family: var(--font-body);
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* SVG pattern background layer - sits behind the canvas */
#app::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-deep);
    background-image:
        linear-gradient(rgba(11, 19, 37, 0.54), rgba(11, 19, 37, 0.58)),
        url('./assets/bg.jpg'),
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30' stroke='%23466fa3' stroke-width='0.65' fill='none' opacity='0.58'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='1.4' fill='%23366ea8' opacity='0.12'/%3E%3Ccircle cx='30' cy='45' r='1' fill='%23c9a84c' opacity='0.1'/%3E%3Ccircle cx='170' cy='35' r='0.8' fill='%23366ea8' opacity='0.08'/%3E%3Ccircle cx='55' cy='160' r='1.1' fill='%23c9a84c' opacity='0.07'/%3E%3Ccircle cx='150' cy='140' r='0.6' fill='%23366ea8' opacity='0.1'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 34%, rgba(78, 130, 195, 0.12) 0%, rgba(201, 168, 76, 0.05) 36%, transparent 66%);
    background-size:
        100% 100%,
        cover,
        60px 60px,
        200px 200px,
        100% 100%;
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Subtle vignette overlay */
#app::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, var(--bg-deep) 100%);
    opacity: 0.38;
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    transform: scale(var(--tm-ui-scale));
    transform-origin: center center;
}

input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.25);
    outline: none;
}

button:active {
    transform: scale(0.97);
}

button:hover {
    filter: brightness(1.1);
}