:root {
--offside-black: #242129;
--primary-color: #D94646;
--base-white: #FFFFFF;
--base-gray: #F6F6F6;
--true-black: #000000;
--sof-dark: #3D3649;
--secondary-line: #EFEFEF;
--passive-tab: #E3E3E3;
--secondary-menu-passive-gray: #BFBFBF;
--reading-gray: #959297;
--on-tap-passive-gray-on-white: #D9D9D9;
--medium-gray: #686868;
--dark-gray: #554F60;
--w-color: #DBFFE3;
--l-color: #FFDBDB;
--d-color: #EFEFEF;
--game-black: #000;
--game-black-soft: #1a1a1a;
--game-black-deep: #121214;
--game-white: #fff;
--game-filter-white: #fff;
--game-text-dark: #333;
--game-text-dark-alt: #444;
--game-text-mid: #555;
--game-text-mid-alt: #666;
--game-text-muted: #888;
--game-text-hint: #999;
--game-text-light: #aaa;
--game-text-faint: #ccc;
--game-border-card: #F0F0F0;
--game-border-subtle: #eee;
--game-border-light: #F5F5F5;
--game-border-input: #E0E0E0;
--game-bg-subtle: #FAFAFA;
--game-bg-light: #F8F8F8;
--game-bg-row: #F7F7F7;
--game-bg-dark: #141414;
--game-bg-dark-alt: #1e1e1e;
--game-bg-near-black: #111;
--game-bg-colgame: #0E1422;
--game-bg-mom: #1a1820;
--game-bg-sm: #130f1e;
--game-bg-cg-icon-start: #3a3a40;
--game-bg-cg-icon-end: #222226;
--game-bg-lg-sphere: #2e2e2e;
--game-accent: #e65147;
--game-accent-glow-sm: rgba(230, 81, 71, 0.4);
--game-accent-glow-lg: rgba(230, 81, 71, 0.6);
--game-red: #e03131;
--game-red-hover: #c92a2a;
--game-red-lose: #d63031;
--game-red-pow: #e63946;
--game-green: #4CAF50;
--game-green-dark: #2E7D32;
--game-green-darkest: #1B5E20;
--game-green-mid: #43A047;
--game-green-bright: #22c55e;
--game-green-win: #2db84b;
--game-green-pale: #E8F5E9;
--game-green-lime: #b6f570;
--game-red-negative: #E53935;
--game-gray-neutral: #9E9E9E;
--game-gold: #d4c18d;
--game-gold-badge-start: #F9E5B0;
--game-gold-badge-end: #E3B168;
--game-gold-bar: #C9A84C;
--game-star: #f5a623;
--game-purple-deep: #4a148c;
--game-pink-light: #FFC2C2;
--game-card-collector-violet: #E2C9FD;
--game-card-collector-yellow: #FFF3CC;
--game-card-collector-blue: #C3F3FF;
--game-card-lineup-purple: #5D556B;
--game-card-reporter-red-e: #8C2525;
--game-card-mom-yellow-s: #FFF8CC;
--game-card-mom-yellow-e: #E8C173;
--game-card-pow-blue-s: #56D1FF;
--game-card-pow-blue-e: #006793;
--game-card-sm-purple-s: #B895BF;
--game-card-sm-purple-e: #7A1BE4;
--game-card-pot-green-s: #CCFFD9;
--game-card-pot-green-e: #73E8AE;
--game-card-gift-purple-s: #9A8BB5;
--game-card-gift-purple-e: #685F76;
--game-card-xi-pink-s: #E7A6C6;
--game-card-xi-pink-e: #C2185B;
}
[data-theme="dark"] {
--base-white: #1E1B25;
--base-gray: #252230;
--true-black: #F0EEF5;
--secondary-line: #38354A;
--passive-tab: #38354A;
--on-tap-passive-gray-on-white: #38354A;
--reading-gray: #B0ADB5;
--secondary-menu-passive-gray: #6B6875;
--medium-gray: #A0A0A0;
--dark-gray: #A09AAB;
--w-color: #1A3B22;
--l-color: #3B1A1A;
--d-color: #38354A;
--game-black-soft: #e8e5f0;
--game-filter-white: #1a1a1a;
--game-text-dark: #d5d2de;
--game-text-dark-alt: #c5c2ce;
--game-text-mid: #b0adb8;
--game-text-mid-alt: #9e9aa8;
--game-text-muted: #807d8a;
--game-text-hint: #706d7a;
--game-border-card: #38354a;
--game-border-subtle: #38354a;
--game-border-light: #2d2a38;
--game-border-input: #3d3a4a;
--game-bg-subtle: #252230;
--game-bg-light: #252230;
--game-bg-row: #1e1b25;
--game-green-pale: #1a3322;
--game-pink-light: #3b2020;
}
.primary-box-shadow {
box-shadow: 0px 2px 2px #00000012;
}
.br-10 {
border-radius: 10px;
}
.br-10-top-corners {
border-radius: 10px 10px 0 0;
}
.br-10-bottom-corners {
border-radius: 0 0 10px 10px;
}
.br-6 {
border-radius: 6px;
}
.br-5 {
border-radius: 5px;
}
.br-3 {
border-radius: 3px;
}
.br-left-5 {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.br-right-5 {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.text-offside-black { color: var(--offside-black) !important; }
.text-primary-color { color: var(--primary-color); }
.text-base-white { color: var(--base-white); }
.text-base-gray { color: var(--base-gray); }
.text-true-black { color: var(--true-black); }
.text-sof-dark { color: var(--sof-dark); }
.text-secondary-line { color: var(--secondary-line); }
.text-passive-tab { color: var(--passive-tab); }
.text-secondary-menu-passive-gray { color: var(--secondary-menu-passive-gray); }
.text-reading-gray { color: var(--reading-gray); }
.text-on-tap-passive-gray-on-white { color: var(--on-tap-passive-gray-on-white); }
.text-medium-gray { color: var(--medium-gray); }
.text-dark-gray { color: var(--dark-gray); }
.bg-base-white { background-color: var(--base-white); }
.bg-base-gray { background-color: var(--base-gray); }
.bg-secondary-line { background-color: var(--secondary-line); }
.bg-on-tap-passive-gray-on-white { background-color: var(--on-tap-passive-gray-on-white); }
.bg-passive-tab { background-color: var(--passive-tab); }
.bg-true-black {
background-color: var(--true-black);
}
.border-bottom-secondary-line { border-bottom: 1px solid var(--secondary-line); }
.border-bottom-base-gray { border-bottom: 1px solid var(--base-gray); }
.border-passive-tab { border : 1px solid var(--passive-tab); }
.barlow-regular-10px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.2;
}
.barlow-medium-10px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.2;
}
.barlow-semibold-10px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.2;
}
.barlow-bold-10px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.2;
}
.barlow-regular-12px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.2;
}
.barlow-medium-12px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.2;
}
.barlow-semibold-12px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.2;
}
.barlow-bold-12px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.2;
}
.barlow-regular-13px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.25;
}
.barlow-medium-13px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.25;
}
.barlow-semibold-13px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.25;
}
.barlow-bold-13px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.25;
}
.barlow-regular-14px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.2;
}
.barlow-medium-14px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.2;
}
.barlow-semibold-14px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.2;
}
.barlow-bold-14px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.2;
}
.barlow-regular-15px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
line-height: 1.2;
}
.barlow-medium-15px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
line-height: 1.2;
}
.barlow-semibold-15px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
line-height: 1.2;
}
.barlow-bold-15px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
line-height: 1.2;
}
.barlow-regular-16px {
font-family: "Barlow", sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
line-height: 1.2;
}
.barlow-medium-16px {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
line-height: 1.2;
}
.barlow-semibold-16px {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-style: normal;
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
line-height: 1.2;
}
.barlow-bold-16px {
font-family: "Barlow", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
line-height: 1.2;
}
.open-sans-regular-10px {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: clamp(0.625rem, 0.7vw, 0.6875rem);
line-height: 1.4;
}
.open-sans-medium-10px {
font-family: "Open Sans", sans-serif;
font-weight: 500;
font-size: clamp(0.625rem, 0.7vw, 0.6875rem);
line-height: 1.4;
}
.open-sans-semibold-10px {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: clamp(0.625rem, 0.7vw, 0.6875rem);
line-height: 1.4;
}
.open-sans-bold-10px {
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: clamp(0.625rem, 0.7vw, 0.6875rem);
line-height: 1.4;
}
.open-sans-regular-12px {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.4;
}
.open-sans-medium-12px {
font-family: "Open Sans", sans-serif;
font-weight: 500;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.4;
}
.open-sans-semibold-12px {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.4;
}
.open-sans-bold-12px {
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
line-height: 1.4;
}
.open-sans-regular-13px {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.4;
}
.open-sans-medium-13px {
font-family: "Open Sans", sans-serif;
font-weight: 500;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.4;
}
.open-sans-semibold-13px {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.4;
}
.open-sans-bold-13px {
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
line-height: 1.4;
}
.open-sans-regular-14px {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.4;
}
.open-sans-medium-14px {
font-family: "Open Sans", sans-serif;
font-weight: 500;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.4;
}
.open-sans-semibold-14px {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.4;
}
.open-sans-bold-14px {
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: clamp(0.875rem, 1vw, 0.9375rem);
line-height: 1.4;
}