:root {
    /* Dark Helbreath / Diablo-inspired theme. Brown token names are retained for compatibility. */
    --rpg-brown-darkest: #030507;
    --rpg-brown-dark: #070a0e;
    --rpg-brown-medium: #101821;
    --rpg-brown-base: #1a2631;
    --rpg-brown-light: #2b3945;
    --rpg-brown-lighter: #465563;
    --rpg-gold: #c7a85a;
    --rpg-gold-dark: #8b6e2f;
    --rpg-gold-light: #f1d891;
    --rpg-danger: #a63b36;
    --rpg-warning: #b8873a;
    --rpg-hp-fill: #9d1f1b;
    --rpg-hp-shadow: #3f0908;
    --rpg-mp-fill: #2159b8;
    --rpg-mp-shadow: #0a2047;
    --rpg-sp-fill: #b78d29;
    --rpg-sp-shadow: #503812;
    --hud-width: 1024px;
    --rpg-parchment: #e8ddc1;
    --rpg-leather: #5e4a25;
    --rpg-shadow: rgba(0, 0, 0, 0.84);
    --rpg-highlight: rgba(199, 168, 90, 0.28);
    --rpg-bg: var(--rpg-brown-darkest);
    --rpg-bg-elevated: var(--rpg-brown-dark);
    --rpg-surface: var(--rpg-brown-medium);
    --rpg-surface-2: var(--rpg-brown-base);
    --rpg-line: var(--rpg-leather);
    --rpg-text: var(--rpg-parchment);
    --rpg-text-muted: rgba(244, 228, 193, 0.72);
    --rpg-gold-light-rgb: 244, 208, 63;
    --rpg-radius-sm: 4px;
    --rpg-radius: 6px;
    --rpg-radius-lg: 8px;
    --rpg-font-ui: 'Georgia', 'Times New Roman', serif;
    --rpg-font-title: 'Georgia', 'Times New Roman', serif;
    --custom-cursor: auto;
}

body {
    margin: 0;
    padding: 0;
    color: var(--rpg-parchment);
    min-height: 100vh;
    background-color: #020305;
    font-family: 'Georgia', 'Times New Roman', serif;
    position: relative;
    cursor: var(--custom-cursor);
}

html {
    background: #020305;
    cursor: var(--custom-cursor);
}

body.game-input-guard-active #app,
body.game-input-guard-active #game-wrapper,
body.game-input-guard-active #game-container,
body.game-input-guard-active .draggable-dialog {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

body.game-input-guard-active input,
body.game-input-guard-active textarea,
body.game-input-guard-active select,
body.game-input-guard-active [contenteditable="true"],
body.game-input-guard-active [data-allow-user-select="true"] {
    user-select: text;
    -webkit-user-select: text;
}

/* Override browser default cursor behavior for all HTML elements */
*, *::before, *::after {
    cursor: var(--custom-cursor) !important;
}

/* Specific overrides for interactive elements that browsers change cursor for */
a, button, input, select, textarea, label,
[role="button"], [role="link"], [tabindex],
.draggable-dialog-header, .button {
    cursor: var(--custom-cursor) !important;
}

.draggable-dialog-header:active {
    cursor: var(--custom-cursor) !important;
}

.button:disabled {
    cursor: var(--custom-cursor) !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.22));
    pointer-events: none;
    transition: opacity 220ms ease;
}

body.ambient-backdrop-active::before {
    opacity: 1;
}

#app::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.22));
    pointer-events: none;
    transition: opacity 220ms ease;
}

#app.ambient-backdrop-active::before {
    opacity: 1;
}

#app.ambient-backdrop-active > #game-wrapper,
#app.ambient-backdrop-active > #hud-bar {
    position: relative;
    z-index: 2;
}

.ambient-backdrop-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transform: scale(var(--ambient-backdrop-cover-scale, 1.32));
    transform-origin: center center;
    filter:
        blur(var(--ambient-backdrop-blur, 28px))
        brightness(var(--ambient-backdrop-brightness, 0.9))
        saturate(var(--ambient-backdrop-saturation, 0.95));
    transition: opacity 220ms ease;
}

.ambient-backdrop-canvas.is-active {
    opacity: 1;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: auto;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

#app.fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
    background: #000000;
}

#game-wrapper {
    width: var(--hud-width);
    height: 576px;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border: 3px solid var(--rpg-gold-dark);
    box-shadow:
        0 0 0 1px #000000,
        0 0 18px rgba(199, 168, 90, 0.35),
        0 18px 48px rgba(0, 0, 0, 0.7);
    box-sizing: content-box;
}

#game-wrapper.fullscreen {
    position: relative;
    inset: auto;
    width: var(--hud-width);
    height: 576px;
    background: #000000;
    border: none;
    box-shadow: none;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-container canvas {
    display: block;
    border: none;
    box-shadow: none;
}

#game-container.fullscreen {
    position: relative;
    inset: auto;
    background: transparent;
    width: 100%;
    height: 100%;
}

body.ambient-backdrop-active #app.fullscreen,
body.ambient-backdrop-active #game-wrapper.fullscreen,
body.ambient-backdrop-active #game-container.fullscreen,
#app.ambient-backdrop-active.fullscreen,
#app.ambient-backdrop-active #game-wrapper.fullscreen,
#app.ambient-backdrop-active #game-container.fullscreen {
    background: transparent;
}

#game-container canvas.fullscreen {
    display: block;
    margin: 0 !important;
}

#app.fullscreen #hud-bar {
    position: fixed;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 12000;
    opacity: 0.86;
    pointer-events: auto;
    width: min(1030px, calc(100vw - 20px));
}

#app.fullscreen .Toastify__toast-container {
    z-index: 30000;
}

.spritePosition {
    margin: 10px 0 0 10px;
    font-size: 0.8em;
}

.button {
    width: 140px;
    margin: 10px;
    padding: 10px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%),
        linear-gradient(180deg, var(--rpg-brown-light) 0%, var(--rpg-brown-dark) 100%);
    color: var(--rpg-parchment);
    border: 2px solid var(--rpg-leather);
    border-radius: 4px;
    transition: all 0.2s;
    font-family: 'Georgia', serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px var(--rpg-shadow);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 4px var(--rpg-shadow);

    &:hover {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%),
            linear-gradient(180deg, var(--rpg-brown-lighter) 0%, var(--rpg-brown-base) 100%);
        border-color: var(--rpg-gold);
        color: var(--rpg-gold-light);
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.6),
            0 0 12px rgba(199, 168, 90, 0.28);
    }

    &:active {
        background: linear-gradient(180deg, var(--rpg-brown-medium) 0%, var(--rpg-brown-dark) 100%);
        box-shadow: 
            inset 0 2px 4px var(--rpg-shadow),
            0 1px 2px var(--rpg-shadow);
        transform: translateY(1px);
    }

    &:disabled {
        opacity: 0.5;
        background: linear-gradient(180deg, var(--rpg-brown-dark) 0%, var(--rpg-brown-darkest) 100%);
        border-color: var(--rpg-brown-dark);
        color: rgba(244, 228, 193, 0.4);
        box-shadow: none;
    }
}

.draggable-dialog {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
        radial-gradient(120% 100% at 50% 0%, rgba(31, 43, 53, 0.95), rgba(5, 7, 10, 0.96) 72%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 2px solid rgba(94, 74, 37, 0.95);
    border-radius: 8px;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(241, 216, 145, 0.14),
        inset 0 0 0 1px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(199, 168, 90, 0.2);
    min-width: 200px;
    user-select: none;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.draggable-dialog[data-dialog-id="main-dialog"] {
    min-width: 270px;
}

.draggable-dialog[data-dialog-id="camera-map-dialog"] {
    min-width: 300px;
}

.draggable-dialog[data-dialog-id="monster-dialog"] {
    min-width: 420px;
}

.draggable-dialog[data-dialog-id="minimap-dialog"] {
    width: fit-content;
    min-width: 0;
    max-width: 90vw;
}

.draggable-dialog[data-dialog-id="minimap-dialog"] .draggable-dialog-content {
    padding: 0;
    overflow: hidden;
    display: block;
    line-height: 0;
}

.draggable-dialog[data-dialog-id="minimap-dialog"] img {
    display: block;
    width: auto;
    height: auto;
}

.draggable-dialog[data-dialog-id="connect-dialog"] {
    min-width: 312px;
    max-width: min(340px, calc(100vw - 40px));
    padding: 5px;
    border: 0;
    border-radius: 13px;
    overflow: visible;
    background:
        linear-gradient(180deg, #c7a85a 0%, #2c2d27 4%, #10151b 9%, #05070a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 170, 0.38),
        inset 0 0 0 1px rgba(7, 5, 3, 0.86),
        inset 0 0 0 2px rgba(124, 95, 34, 0.5),
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 22px 60px rgba(0, 0, 0, 0.82),
        0 0 42px rgba(0, 0, 0, 0.7);
}

.draggable-dialog[data-dialog-id="connect-dialog"] .draggable-dialog-header {
    position: relative;
    z-index: 1;
    min-height: 18px;
    padding: 5px 12px;
    border: 0;
    border-radius: 9px 9px 0 0;
    color: #f7e7ac;
    background:
        linear-gradient(180deg, rgba(255, 238, 183, 0.16), rgba(94, 71, 28, 0.04)),
        radial-gradient(120% 140% at 50% 0%, rgba(47, 50, 53, 0.98), rgba(12, 13, 15, 0.99) 72%);
    font-family: var(--rpg-font-title);
    font-size: 16px;
    text-transform: uppercase;
    box-shadow:
        inset 0 0 0 1px rgba(199, 168, 90, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.68),
        0 1px 0 rgba(0, 0, 0, 0.7);
    text-shadow:
        0 1px 0 #000000,
        0 0 10px rgba(199, 168, 90, 0.28);
}

.draggable-dialog[data-dialog-id="connect-dialog"] .draggable-dialog-content {
    position: relative;
    z-index: 1;
    padding: 14px 16px 14px;
    border-radius: 0 0 9px 9px;
    background:
        linear-gradient(90deg, rgba(255, 230, 152, 0.08), transparent 9%, transparent 91%, rgba(255, 230, 152, 0.08)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 6px),
        radial-gradient(120% 80% at 50% -18%, #22252a 0%, #121417 54%, #07080a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(199, 168, 90, 0.36),
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        inset 0 8px 28px rgba(0, 0, 0, 0.74);
}

.draggable-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--rpg-gold) 20%, 
        var(--rpg-gold) 80%, 
        transparent 100%);
    opacity: 0.5;
}

.draggable-dialog-header {
    padding: 14px 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%),
        linear-gradient(180deg, #1b2630 0%, #0b1016 100%);
    border-bottom: 2px solid rgba(94, 74, 37, 0.95);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    user-select: none;
    color: var(--rpg-gold);
    text-shadow: 
        1px 1px 2px var(--rpg-shadow),
        0 0 8px rgba(212, 175, 55, 0.3);
    letter-spacing: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.75);
}


.draggable-dialog-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar styling for RPG theme */
.draggable-dialog-content::-webkit-scrollbar {
    width: 10px;
}

.draggable-dialog-content::-webkit-scrollbar-track {
    background: #030507;
    border-radius: 4px;
}

.draggable-dialog-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2d3842 0%, #101820 100%);
    border: 1px solid var(--rpg-leather);
    border-radius: 4px;
}

.draggable-dialog-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #465563 0%, #1a2631 100%);
    border-color: var(--rpg-gold);
}

.draggable-dialog-content .button {
    margin: 0;
    width: 100%;
}