@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

html,
body,
#app {
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

:root {
    --font-family-base: 'Manrope', 'Segoe UI', sans-serif;
    --font-family-display: 'Chakra Petch', 'Segoe UI', sans-serif;

    --font-size-100: 12px;
    --font-size-200: 13px;
    --font-size-300: 14px;
    --font-size-400: 16px;
    --font-size-500: 18px;
    --font-size-600: 22px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.55;
    --letter-spacing-caps: 0.08em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --color-surface-0: #070b12;
    --color-surface-1: #0d1420;
    --color-surface-2: #111b2a;
    --color-surface-3: #162335;
    --color-surface-4: #1c2b40;
    --color-overlay-scrim: rgba(3, 7, 12, 0.72);

    --color-border-subtle: #213349;
    --color-border-default: #2a4160;
    --color-border-strong: #3a5a84;
    --color-focus-ring: rgba(68, 166, 255, 0.35);

    --color-text-strong: #f3f8ff;
    --color-text-soft: #cfdae8;
    --color-text-muted: #93a6bd;
    --color-text-disabled: #627389;

    --color-accent-blue-400: #44a6ff;
    --color-accent-blue-500: #2e8fe6;
    --color-accent-blue-600: #2373b8;
    --color-accent-yellow-400: #ffd24a;
    --color-accent-yellow-500: #e9be3e;

    --color-success: #4fd18b;
    --color-warning: #f0b84a;
    --color-danger: #e16b74;
    --color-info: #63b3ff;
    --color-inactive-bg: #1a2330;
    --color-inactive-fg: #7c8b9f;

    --color-success-soft-bg: rgba(79, 209, 139, 0.14);
    --color-success-soft-border: rgba(79, 209, 139, 0.36);
    --color-danger-soft-bg: rgba(225, 107, 116, 0.14);
    --color-danger-soft-border: rgba(225, 107, 116, 0.36);
    --color-warning-soft-bg: rgba(233, 190, 62, 0.18);
    --color-warning-soft-border: rgba(233, 190, 62, 0.4);

    --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.32);
    --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.42);

    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 280ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    --portal-max-width: 1360px;
    --panel-padding: var(--space-4);
    --row-height: 44px;
    --control-height: 36px;
    --density-scale: 1;
}

.density-compact {
    --density-scale: 0.9;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    background:
        radial-gradient(1150px 700px at 12% -18%, rgba(68, 166, 255, 0.2), rgba(68, 166, 255, 0) 60%),
        radial-gradient(900px 600px at 88% 118%, rgba(35, 115, 184, 0.2), rgba(35, 115, 184, 0) 64%),
        linear-gradient(175deg, var(--color-surface-1) 0%, var(--color-surface-0) 78%);
    color: var(--color-text-soft);
}

#app {
    position: relative;
    overflow: hidden;
}

#appInner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

#hitmap-overlay-canvas {
    display: block;
}

#app-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#appInner.is-hidden {
    display: none;
}

#lobby {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: auto;
    padding: var(--panel-padding);
    background: var(--color-overlay-scrim);
    backdrop-filter: blur(9px);
}

#lobby.is-hidden {
    display: none;
}

#lobbyMount {
    min-height: 100%;
    max-width: var(--portal-max-width);
    margin: 0 auto;
}