:root {
    --brand-color: #245c35;
    --brand-color-alt: #2d7443;
    --brand-color-hover: #1b4528;
    --brand-color-bright: #31834a;
    --brand-rgb: 36, 92, 53;
    --brand-alt-rgb: 45, 116, 67;
    --brand-accent-rgb: 67, 160, 92;
    --brand-text-soft: #bde1c8;
    --brand-text-soft-alt: #cbe9d2;

    --chart-bar-red: rgba(120, 40, 40, .92);
    --chart-bar-dark: rgba(14, 14, 14, .92);
    --chart-ticks: rgba(220, 230, 225, .72);
    --chart-grid: rgba(255, 255, 255, .08);
    --chart-tooltip-bg: rgba(16, 20, 28, .94);
    --chart-tooltip-border: rgba(255, 255, 255, .08);
    --chart-tooltip-title: #fff;
    --chart-tooltip-body: #d9e1e2;

    --tone-100: #fff;
    --tone-18: rgba(255, 255, 255, .18);
    --tone-16: rgba(255, 255, 255, .16);
    --tone-14: rgba(255, 255, 255, .14);
    --tone-12: rgba(255, 255, 255, .12);
    --tone-10: rgba(255, 255, 255, .10);
    --tone-08: rgba(255, 255, 255, .08);
    --tone-07: rgba(255, 255, 255, .07);
    --tone-06: rgba(255, 255, 255, .06);
    --tone-05: rgba(255, 255, 255, .05);
    --tone-045: rgba(255, 255, 255, .045);
    --tone-04: rgba(255, 255, 255, .04);
    --tone-035: rgba(255, 255, 255, .035);
    --tone-03: rgba(255, 255, 255, .03);
    --tone-025: rgba(255, 255, 255, .025);
    --tone-02: rgba(255, 255, 255, .02);
    --tone-015: rgba(255, 255, 255, .015);
    --tone-00: rgba(255, 255, 255, 0);

    --shade-100: #000;
    --shade-80: rgba(0, 0, 0, .8);
    --shade-55: rgba(0, 0, 0, .55);
    --shade-34: rgba(0, 0, 0, .34);
    --shade-32: rgba(0, 0, 0, .32);
    --shade-30: rgba(0, 0, 0, .30);
    --shade-24: rgba(0, 0, 0, .24);
    --shade-20: rgba(0, 0, 0, .20);
    --shade-16: rgba(0, 0, 0, .16);

    --dark-bg: #121212;
    --card-bg: #1e1e1e;
    --surface-900: #10151d;
    --surface-800: #111720;
    --surface-glass: rgba(15, 20, 28, .86);
    --surface-glass-strong: rgba(15, 20, 28, .94);
    --surface-card: rgba(16, 21, 29, .88);
    --brand-gradient: linear-gradient(135deg, var(--brand-color-alt), var(--brand-color));
    --brand-highlight-bg: rgba(var(--brand-rgb), .14);
    --hero-bg-filter: brightness(.55) contrast(1.12) saturate(1.02);

    --text-main: #e0e0e0;
    --text-strong: var(--tone-100);
    --text-primary: #edf3ee;
    --text-secondary: #aab7ba;
    --line-soft: var(--tone-08);
    --line-mid: var(--tone-10);
    --line-strong: var(--tone-16);
    --bg-soft: var(--tone-04);
    --bg-soft-hover: var(--tone-08);

    --palette-001: #05080d;
    --palette-002: #0b1118;
    --palette-003: #0d1117;
    --palette-004: #0f141d;
    --palette-005: #111823;
    --palette-006: #131a24;
    --palette-007: #2855aa;
    --palette-008: #2a2a2a;
    --palette-009: #2aa96b;
    --palette-010: #2f7d52;
    --palette-011: #333;
    --palette-012: #3f7edf;
    --palette-013: #74e095;
    --palette-014: #7a2525;
    --palette-015: #7cc196;
    --palette-016: #7f2525;
    --palette-017: #7f8d91;
    --palette-018: #849095;
    --palette-019: #8f9ca0;
    --palette-020: #8fa2a0;
    --palette-022: #9aa7aa;
    --palette-021: #9a9a9a;
    --palette-023: #9adbb8;
    --palette-024: #a23636;
    --palette-025: #b1bec0;
    --palette-026: #b23d3d;
    --palette-027: #b8e2c2;
    --palette-028: #c4d0d2;
    --palette-029: #c7ecd1;
    --palette-030: #c9efd3;
    --palette-031: #c9f0d6;
    --palette-032: #d5dee0;
    --palette-033: #d5f4de;
    --palette-034: #d6dfda;
    --palette-035: #d8a83a;
    --palette-036: #d8e3dc;
    --palette-037: #d8f8e2;
    --palette-038: #d95368;
    --palette-039: #d9f8e4;
    --palette-040: #dbe5df;
    --palette-041: #dbe8dc;
    --palette-042: #dff6e6;
    --palette-043: #e8edf3;
    --palette-044: #e8f7ec;
    --palette-045: #e9eef0;
    --palette-046: #e9f0eb;
    --palette-047: #e9f7ed;
    --palette-048: #e9f8ed;
    --palette-049: #e9fff1;
    --palette-050: #ebf8ef;
    --palette-051: #ecf3ed;
    --palette-052: #ecf6ee;
    --palette-053: #eef8f2;
    --palette-054: #eefcf1;
    --palette-055: #f0f5ff;
    --palette-056: #f3bf67;
    --palette-057: #f4fff6;
    --palette-058: #f5fff7;
    --palette-059: #f6fff8;
    --palette-060: #f7d36d;
    --palette-061: #f7ddb0;
    --palette-062: #ff6b81;
    --palette-063: #ffb7c1;
    --palette-064: #ffced7;
    --palette-065: #ffd7dd;
    --palette-066: #ffde75;
    --palette-067: #ffeeb7;
    --palette-068: #ffefba;
    --palette-074: rgba(0, 0, 0, .04);
    --palette-075: rgba(0, 0, 0, .16);
    --palette-076: rgba(0, 0, 0, .18);
    --palette-078: rgba(0, 0, 0, .34);
    --palette-079: rgba(0, 0, 0, .35);
    --palette-081: rgba(0, 0, 0, .42);
    --palette-069: rgba(0, 0, 0, 0.1);
    --palette-070: rgba(0, 0, 0, 0.14);
    --palette-071: rgba(0, 0, 0, 0.22);
    --palette-072: rgba(0, 0, 0, 0.32);
    --palette-073: rgba(0, 0, 0, 0.78);
    --palette-077: rgba(0, 0, 0, .26);
    --palette-080: rgba(0, 0, 0, .38);
    --palette-082: rgba(108, 117, 125, .18);
    --palette-083: rgba(108, 117, 125, .34);
    --palette-087: rgba(11, 15, 22, .84);
    --palette-088: rgba(11, 17, 24, 0.88);
    --palette-084: rgba(110, 255, 160, .10);
    --palette-085: rgba(115, 255, 160, .14);
    --palette-086: rgba(116, 127, 140, 0.16);
    --palette-089: rgba(12, 18, 24, 0.9);
    --palette-090: rgba(12, 18, 26, 0.96);
    --palette-091: rgba(12, 18, 26, 0.98);
    --palette-092: rgba(13, 17, 23, 0.9);
    --palette-097: rgba(14, 19, 27, .74);
    --palette-094: rgba(141, 155, 170, .10);
    --palette-095: rgba(141, 155, 170, .16);
    --palette-096: rgba(141, 155, 170, .18);
    --palette-093: rgba(141, 155, 170, 0.18);
    --palette-098: rgba(15, 20, 28, 0.64);
    --palette-099: rgba(15, 20, 28, 0.78);
    --palette-102: rgba(16, 21, 29, .94);
    --palette-101: rgba(16, 21, 29, 0.78);
    --palette-100: rgba(160, 43, 43, 0.2);
    --palette-105: rgba(17, 23, 32, 0.9);
    --palette-104: rgba(17, 23, 32, 0.9);
    --palette-103: rgba(173, 184, 187, 0.62);
    --palette-107: rgba(18, 18, 18, .72);
    --palette-109: rgba(18, 24, 34, 0.9);
    --palette-108: rgba(18, 18, 18, 0.9);
    --palette-106: rgba(183, 54, 79, .22);
    --palette-111: rgba(19, 26, 37, 0.82);
    --palette-112: rgba(19, 27, 33, .95);
    --palette-110: rgba(190, 126, 34, .20);
    --palette-113: rgba(204, 224, 210, .72);
    --palette-115: rgba(216, 168, 58, .16);
    --palette-116: rgba(216, 168, 58, .18);
    --palette-114: rgba(216, 168, 58, 0.18);
    --palette-117: rgba(217, 83, 104, .08);
    --palette-118: rgba(217, 83, 104, .10);
    --palette-119: rgba(217, 83, 104, .16);
    --palette-120: rgba(217, 83, 104, .18);
    --palette-121: rgba(217, 83, 104, .28);
    --palette-122: rgba(220, 53, 69, 0.14);
    --palette-123: rgba(220, 53, 69, 0.28);
    --palette-124: rgba(220, 53, 69, 0.34);
    --palette-125: rgba(220, 53, 69, .045);
    --palette-126: rgba(220, 53, 69, .07);
    --palette-127: rgba(220, 53, 69, .18);
    --palette-128: rgba(220, 53, 69, .22);
    --palette-129: rgba(224, 224, 224, .78);
    --palette-130: rgba(224, 224, 224, 0.9);
    --palette-131: rgba(224, 224, 224, 0.9);
    --palette-132: rgba(227, 236, 230, .68);
    --palette-133: rgba(227, 236, 230, .75);
    --palette-134: rgba(234, 240, 236, .72);
    --palette-135: rgba(237, 243, 238, .36);
    --palette-136: rgba(237, 243, 238, .46);
    --palette-137: rgba(237, 243, 238, .56);
    --palette-138: rgba(237, 243, 238, .58);
    --palette-139: rgba(237, 243, 238, .62);
    --palette-140: rgba(237, 243, 238, .64);
    --palette-141: rgba(237, 243, 238, .66);
    --palette-142: rgba(237, 243, 238, .68);
    --palette-143: rgba(237, 243, 238, .72);
    --palette-145: rgba(237, 243, 238, .78);
    --palette-146: rgba(237, 243, 238, .82);
    --palette-144: rgba(237, 243, 238, .75);
    --palette-147: rgba(244, 249, 245, .84);
    --palette-153: rgba(255, 193, 7, .09);
    --palette-154: rgba(255, 193, 7, .10);
    --palette-155: rgba(255, 193, 7, .26);
    --palette-148: rgba(255, 193, 7, 0.12);
    --palette-149: rgba(255, 193, 7, 0.16);
    --palette-150: rgba(255, 193, 7, 0.22);
    --palette-151: rgba(255, 193, 7, 0.32);
    --palette-163: rgba(255, 255, 255, .1);
    --palette-164: rgba(255, 255, 255, .15);
    --palette-165: rgba(255, 255, 255, .16);
    --palette-166: rgba(255, 255, 255, .20);
    --palette-168: rgba(255, 255, 255, .82);
    --palette-169: rgba(255, 255, 255, 0.9);
    --palette-156: rgba(255, 255, 255, 0.04);
    --palette-157: rgba(255, 255, 255, 0.06);
    --palette-152: rgba(255, 193, 7, .08);
    --palette-167: rgba(255, 255, 255, .8);
    --palette-158: rgba(255, 255, 255, 0.065);
    --palette-159: rgba(255, 255, 255, 0.07);
    --palette-160: rgba(255, 255, 255, 0.09);
    --palette-161: rgba(255, 255, 255, 0.12);
    --palette-162: rgba(255, 255, 255, 0.14);
    --palette-170: rgba(27, 69, 40, .32);
    --palette-171: rgba(3, 6, 10, .18);
    --palette-172: rgba(3, 6, 10, .28);
    --palette-173: rgba(3, 6, 10, .60);
    --palette-174: rgba(3, 6, 10, .72);
    --palette-175: rgba(3, 6, 10, .82);
    --palette-176: rgba(3, 6, 10, 0.9);
    --palette-178: rgba(42, 169, 107, .08);
    --palette-179: rgba(42, 169, 107, .16);
    --palette-180: rgba(42, 169, 107, .18);
    --palette-181: rgba(42, 169, 107, .24);
    --palette-177: rgba(42, 169, 107, 0.18);
    --palette-184: rgba(5, 8, 12, .22);
    --palette-185: rgba(5, 8, 12, .58);
    --palette-186: rgba(5, 8, 12, .80);
    --palette-187: rgba(5, 8, 12, .88);
    --palette-183: rgba(59, 130, 246, .55);
    --palette-182: rgba(59, 130, 246, 0);
    --palette-188: rgba(61, 181, 102, .20);
    --palette-192: rgba(69, 139, 255, .12);
    --palette-194: rgba(69, 139, 255, .30);
    --palette-189: rgba(69, 139, 255, 0.22);
    --palette-190: rgba(69, 139, 255, 0.36);
    --palette-191: rgba(69, 139, 255, .05);
    --palette-193: rgba(69, 139, 255, .18);
    --palette-197: rgba(8, 11, 15, 0.9);
    --palette-198: rgba(8, 11, 15, .86);
    --palette-199: rgba(8, 11, 15, .88);
    --palette-200: rgba(8, 11, 15, 0.9);
    --palette-201: rgba(8, 12, 18, .38);
    --palette-195: rgba(80, 160, 255, .10);
    --palette-196: rgba(85, 170, 112, .22);
    --palette-203: rgba(9, 13, 19, .84);
    --palette-204: rgba(9, 16, 24, 0.22);
    --palette-202: rgba(90, 170, 255, .08);

    --radius-xl: 32px;
    --shadow-lg: 0 24px 70px var(--shade-30);
}

body {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cookie-banner {
    z-index: 2000;
    display: none;
}

.u-fit-content {
    height: fit-content;
}

.u-thumb-cover {
    object-fit: cover;
}

.u-mr-1rem {
    margin-right: 1rem;
}

.u-max-w-280 {
    max-width: 280px;
}

.u-radius-16 {
    border-radius: 16px;
}

.table-col-rank {
    width: 64px;
}

.table-col-rank-wide {
    width: 70px;
}

.table-col-role {
    width: 130px;
}

.table-col-points {
    width: 110px;
}

.hero-bg-vars {
    --bg-low: var(--hero-bg-low);
    --bg-high: var(--hero-bg-high);
}

.hero-src-high {
    --src-high: var(--card-src-high);
}

.stat-fill {
    width: var(--stat-width, 0%);
}

.gd-photo-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--shade-24);
}

.gd-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gd-rank-grid {
    grid-template-columns: repeat(var(--gd-rank-columns, 4), minmax(0, 1fr));
}

.toast-stack {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 24px));
    z-index: 1080;

    display: grid;
    gap: 10px;
}

/* Base toast */
.toastx {
    --tint: var(--brand-rgb); /* fallback = brand green */
    --fg: var(--palette-131);

    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;

    padding: 12px 12px 12px 14px;
    border-radius: 14px;

    color: var(--fg);
    background: radial-gradient(900px 140px at 10% 0%, rgba(var(--tint), .20), transparent 60%),
    var(--palette-107);
    border: 1px solid var(--tone-10);
    box-shadow: 0 18px 55px var(--shade-55),
    0 2px 0 var(--tone-04) inset;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    animation: toastx-in .22s ease-out both;
}

.toastx::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: rgba(var(--tint), .95);
    box-shadow: 0 0 0 1px rgba(var(--tint), .25);
}

.toastx__title {
    font-weight: 650;
    letter-spacing: .2px;
    font-size: .95rem;
    margin-bottom: 2px;
    color: var(--palette-131);
}

.toastx__msg {
    color: var(--palette-129);
    line-height: 1.35;
}

.toastx__close {
    appearance: none;
    border: 0;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--tone-06);
    cursor: pointer;

    display: grid;
    place-items: center; /* Center the pseudo-element */
}

.toastx__close::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;

    /* Draw the X icon via mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") center / contain no-repeat;

    opacity: .85;
}

.toastx__close {
    color: var(--palette-130);
}

.toastx__close:hover {
    background: var(--tone-10);
    transform: translateY(-1px);
}

/* progress bar (autohide) */
.toastx__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--tint), .95), rgba(var(--tint), .25));
    transform-origin: left;
    animation: toastx-bar 5s linear forwards;
    opacity: .9;
}

/* Variants */
.toastx--success {
    --tint: var(--brand-rgb);
}

/* brand green */
.toastx--info {
    --tint: 125, 196, 148;
}

/* Soft mint tone */
.toastx--warning {
    --tint: 255, 193, 7;
}

.toastx--error {
    --tint: 255, 99, 132;
}

/* Animations */
@keyframes toastx-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes toastx-bar {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .toastx {
        animation: none;
    }

    .toastx__bar {
        animation: none;
    }

    .toastx__close {
        transition: none;
    }
}

/* --- Typography & Branding --- */
@media (max-width: 400px) {
    #next-game-img {
        height: 620px !important;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100% !important;
        display: block;
    }

}

@media (max-width: 550px) {
    .game-detail-pricing {
        flex-direction: column;
        align-items: normal !important;
    }

    .game-detail-pricing-btn {
        width: 100%;
        margin-top: 1rem;
    }
}

.btn {
    align-content: center;
}

.text-brand {
    color: var(--brand-color) !important;
}

.bg-brand {
    background-color: var(--brand-color) !important;
}

/* --- Buttons --- */
.btn-brand {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--tone-100);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-brand:hover {
    background-color: var(--brand-color-hover);
    border-color: var(--brand-color-hover);
    color: var(--tone-100);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4);
}

.btn-outline-brand {
    color: var(--brand-color);
    border-color: var(--brand-color);
}

.btn-outline-brand:hover {
    background-color: var(--brand-color);
    color: var(--tone-100);
}


/* --- Hero Section (main banner) --- */
.hero-section {
    position: relative;
    padding: 100px 0;
    margin-bottom: 3rem;
    border-bottom: 4px solid var(--brand-color);
}

.hero-section::after {
    backdrop-filter: brightness(0.3);
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.hero-section > * {
    z-index: 1;
}

.hires-bg {
    background-image: var(--bg-low);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Cards --- */
.custom-card {
    background-color: var(--card-bg);
    border: 1px solid var(--palette-011);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.custom-card:hover {
    border-color: var(--brand-color);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--brand-color);
    margin-bottom: 1rem;
}

.sort-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: .35rem;
    text-decoration: none;
    color: var(--palette-169);
    cursor: pointer;
}

.sort-link:hover {
    background: var(--tone-10);
    color: var(--tone-100);
}

.sort-link.is-active {
    background: var(--tone-16);
    color: var(--tone-100);
}

.sort-indicator {
    font-size: .75rem;
    opacity: .85;
}

th.th-active {
    color: var(--tone-100);
}


.glass-sweep::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -120%;
    width: 60%;
    height: 140%;
    pointer-events: none;
    transform: rotate(16deg);
    background: linear-gradient(
            90deg,
            transparent 0%,
            var(--tone-00) 20%,
            var(--tone-08) 48%,
            var(--tone-18) 52%,
            var(--tone-00) 80%,
            transparent 100%
    );
    animation: glassSweep 9s linear infinite;
    opacity: .65;
}

@keyframes glassSweep {
    0% {
        left: -140%;
    }
    100% {
        left: 170%;
    }
}