:root {
    --font-family-body: var(--font-rubik), "Rubik", Helvetica, sans-serif;
    --font-family-montserrat: var(--font-montserrat), "Montserrat", sans-serif;
    --z: 1
}

@media (min-width:2560px) {
    :root {
        --z: 1.25;
        zoom: 1.25
    }
}

@media (min-width:3840px) {
    :root {
        --z: 1.5;
        zoom: 1.5
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
button {
    font-family: var(--font-family-body)
}

input {
    font-weight: 700
}

html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #179eb18c #0a192099;
    width: 100%;
    max-width: 100%;
    overflow-x: clip
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-track {
    background: #0a192099;
    border-radius: 999px
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#20e4ff8c 0%, #179eb1bf 100%) padding-box padding-box;
    border: 2px solid #0a192099;
    border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#20e4ffd9 0%, #179eb1 100%) padding-box padding-box
}

::-webkit-scrollbar-thumb:active {
    background: #20e4ff padding-box padding-box
}

::-webkit-scrollbar-corner {
    background: 0 0
}

.main {
    z-index: 0;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: min(1352px, 100%);
    margin: 0 auto;
    display: flex;
    position: relative
}

.body {
    --page-inline: 0px;
    font-family: var(--font-family-body);
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: calc(100dvh/var(--z));
    background-color: #0a1920;
    flex-direction: column;
    padding: 0;
    display: flex;
    overflow-x: clip
}

@media (max-width:1024px) {
    .body {
        --page-inline: 12px;
        padding: 0 12px
    }
}

@media (max-width:480px) {
    .body {
        --page-inline: 8px;
        padding: 0 8px
    }
}

.bodyApp {
    z-index: 1;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative
}

#borderCanvas {
    border: 1px solid #ddd;
    width: 100%;
    height: 400px
}

@media (prefers-color-scheme:dark) {
    :root {
        --foreground: #ededed
    }
}

body {
    width: 100%;
    max-width: 100%;
    color: var(--foreground);
    background: var(--background);
    font-family: var(--font-family-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

@media (prefers-color-scheme:dark) {
    html {
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark
    }
}

html.route-actual-case-opening-page {
    --z: 1;
    zoom: 1;
    background-color: #0a1920
}

html.route-secret-case-page {
    --z: 1;
    zoom: 1
}

body.body.route-actual-case-opening-page {
    background-color: #0a1920;
    padding-bottom: 0
}

body.body.route-actual-case-opening-page main.main {
    background: 0 0 !important
}

@media (max-width:1024px) {
    body.body.route-actual-case-opening-page main.main {
        padding-bottom: 0
    }
}

:root {
    --sk-dark-1250: #040809;
    --sk-dark-1200: #050a0b;
    --sk-dark-1150: #050b0d;
    --sk-dark-1100: #060d0f;
    --sk-dark-1050: #071013;
    --sk-dark-1000: #071115;
    --sk-dark-950: #0a1317;
    --sk-dark-900: #0c1619;
    --sk-dark-850: #0f181b;
    --sk-dark-800: #111a1e;
    --sk-dark-750: #131d20;
    --sk-dark-700: #161f22;
    --sk-dark-650: #182125;
    --sk-dark-600: #1a2427;
    --sk-dark-550: #1d2629;
    --sk-light-400: #474e51;
    --sk-light-350: #61676a;
    --sk-light-300: #898d8f;
    --sk-light-250: #a3a7a8;
    --sk-light-200: #cacccd;
    --sk-light-150: #f2f2f3;
    --sk-light-100: #fff;
    --sk-cyan-500: #51cfd6;
    --sk-cyan-450: #74d8de;
    --sk-cyan-400: #96e2e7;
    --sk-cyan-350: #b9ecef;
    --sk-cyan-50: #dcf5f7;
    --sk-rarity-grey: #596570;
    --sk-rarity-grey-blue: #2f506f;
    --sk-rarity-blue: #2a3880;
    --sk-rarity-purple: #4a2780;
    --sk-rarity-pink: #701a74;
    --sk-rarity-red: #7b282d;
    --sk-rarity-yellow: #ce8b3a;
    --sk-stat-online: #bfff4a;
    --sk-stat-users: #d6519a;
    --sk-stat-cases: #7951d6;
    --sk-stat-upgrades: #d65153;
    --sk-brand-mark: #179eb1;
    --sk-surface-page: var(--sk-dark-1000);
    --sk-surface-raised: var(--sk-dark-850);
    --sk-surface-hover: var(--sk-dark-700);
    --sk-text-primary: var(--sk-light-150);
    --sk-text-muted: var(--sk-light-300);
    --sk-text-on-accent: var(--sk-dark-1000);
    --sk-accent: var(--sk-cyan-500);
    --sk-accent-hover: var(--sk-cyan-450)
}

.halloween-module-scss-module__2Wk3EG__theme {
    --sk-home-background: #0c0a10;
    --sk-banner-fade-rgb: 33 28 41;
    --sk-footer-art: url(/halloween/footer-skeletons.webp);
    --sk-footer-glow: radial-gradient(circle, #ffc64b99 0%, #e8a33861 20%, #d98b2524 43%, transparent 68%);
    --sk-cyan-500: #f5a15b;
    --sk-cyan-450: #ffb778;
    --sk-cyan-400: #ffc78f;
    --sk-cyan-350: #ffdbb7;
    --sk-cyan-50: #fff0df;
    --sk-brand-mark: #f5a15b;
    --sk-dark-1250: #0c0a10;
    --sk-dark-1200: #100d15;
    --sk-dark-1150: #120f18;
    --sk-dark-1100: #15111b;
    --sk-dark-1050: #17131e;
    --sk-dark-1000: #19151f;
    --sk-dark-950: #1b1722;
    --sk-dark-900: #1e1926;
    --sk-dark-850: #211c29;
    --sk-dark-800: #241e2c;
    --sk-dark-750: #292230;
    --sk-dark-700: #2e2637;
    --sk-dark-650: #332b3d;
    --sk-dark-600: #382f43;
    --sk-dark-550: #3e344a;
    --sk-surface-page: var(--sk-dark-1000);
    --sk-surface-raised: var(--sk-dark-850);
    --sk-surface-hover: var(--sk-dark-700);
    --sk-text-on-accent: #19151f;
    --sk-accent: var(--sk-cyan-500);
    --sk-accent-hover: var(--sk-cyan-450);
    background: #0c0a10;
}

:root {
    --sk-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sk-font-family-display: "Interstellar", var(--sk-font-family);
    --sk-font-weight-medium: 500;
    --sk-font-weight-semibold: 600;
    --sk-font-weight-bold: 700;
    --sk-font-size-button-lg: 16px;
    --sk-line-height-button-lg: 22px;
    --sk-font-size-button-md: 15px;
    --sk-line-height-button-md: 20px;
    --sk-font-size-button-sm: 14px;
    --sk-line-height-button-sm: 20px;
    --sk-font-size-nav: 16px;
    --sk-line-height-nav: 20px
}