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

/* =========================
   BASE LAYOUT
========================= */
body {
    min-height: 100vh;
    background-color: black;
    color: whitesmoke;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}

body:not(.battle-view-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/speedballgo-bg-logo-spaced.f5e0a3b4637d.png");
    background-repeat: repeat;
    background-size: 117px auto;
    background-position: 18px 18px;
    opacity: 0.045;
}

body > nav,
body > main,
body > footer {
    position: relative;
    z-index: 1;
}

nav {
    padding: 1rem;
    background-color: #aeaa7e;
    color: white;
    font-size: 2rem;
}

main {
    flex-grow: 1;
    display: block;
    padding: 20px;
}

/* =========================
   LINKS
========================= */
a {
    text-decoration: none;
    color: #f5d76e;
}

a:hover {
    opacity: 0.85;
}

/* =========================
   TITLE
========================= */
.title {
    text-align: center;
    font-size: 2.8rem;
    margin: 20px 0;
    color: #f5d76e;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    justify-content: top;
}

.title::after {
    content: "";
    display: block;
    width: 200px;
    height: 3px;
    background: linear-gradient(to right, transparent, #c9a227, transparent);
    margin: 10px auto 0;
}

/* =========================
   GRID (5 per row)
========================= */
@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

body {
    background:
        radial-gradient(circle at top, rgba(80,80,120,0.15), transparent 40%),
        radial-gradient(circle at bottom, rgba(120,80,40,0.12), transparent 40%),
        linear-gradient(to bottom, #050505, #111111);

    color: white;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    padding: 10px;
}

/* =========================
   CARD WRAPPER
========================= */
.card {
    width: 100%;
    max-width: 220px;
    height: 370px;
    perspective: 1000px;
    position: relative;

    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* =========================
   FLIP CONTAINER
========================= */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

/* FLIP ACTION */
.card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* =========================
   FRONT + BACK BASE
========================= */
.card-front,
.card-back {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    backface-visibility: hidden;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start; /* KEY FIX */
    overflow: hidden;
}

/* =========================
   FRONT SIDE
========================= */
.card-front {
    background: #111;
    border: 2px solid #c9a227;

    display: flex;
    flex-direction: column;

    height: 100%;
}

/* IMAGE */
.card-image {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* INFO */
.card-info {
    height: 25%;              /* 🔥 prevents overflow */
    padding: 6px;
    text-align: center;
    color: #f5d76e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.card-name,
.card-number {
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
}

/* =========================
   BACK SIDE
========================= */
.card-back {
    background: #111;
    border: 2px solid #c9a227;
    transform: rotateY(-180deg);
    padding: 0;
}

/* BACK IMAGE (pushed to top) */
.card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    align-self: flex-start;
}

/* =========================
   HOVER EFFECT (SAFE)
========================= */
.card:hover {
    transform: translateY(-8px) scale(1.05);

    box-shadow: 0 0 25px rgba(201,162,39,0.35),
                0 0 60px rgba(201,162,39,0.15);
}



.card-back-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* background image */
.card-back-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* overlay info */
.card-back-info {
    position: relative;
    z-index: 1;
    color: #f5d76e;
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 10px;

    color: #f5d76e;
    background: rgba(0, 0, 0, 0.55); /* makes text readable */
}

.card-back-info h3 {
    color: #f5d76e;
    margin-bottom: 5px;
}

.card-duplicate {
    color: #c9a227;
    font-weight: bold;
    margin-top: 5px;
}


.card-number-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.card-number {
    margin: 0;
}

/* badge now behaves like inline element (NOT absolute) */
.card-count-badge {
    width: 26px;
    height: 26px;

    background: #f5d76e;
    color: black;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: bold;

    box-shadow: 0 0 6px rgb(247, 244, 244);
}
/*########################################################################*/

.posts-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}

.post {
    width: 100%;
    max-width: 600px;
    background: #111;
    border: 1px solid #c9a227;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.posts-title {
    text-align: center;
    font-size: 2.5rem;
    color: #f5d76e;
    margin-bottom: 20px;
}

.home-container {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 20px;
}

.home-container h1 {
    font-size: 2.5rem;
    color: #f5d76e;
    max-width: 1000px;
}

.home-container p {
    font-size: 1.2rem;
    color: #ccc;
    max-width: 600px;
}

.home-container a {
    color: #81dbb8;
    font-weight: bold;
}

.home-container a:hover {
    opacity: 0.8;
}

.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 20px;
}

.auth-container h1 {
    color: #f5d76e;
    font-size: 2.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #111;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #c9a227;
    width: 500px;
}

.auth-form input {
    padding: 10px;
    border: none;
    border-radius: 6px;
}

.auth-form button {
    padding: 10px;
    background: #44B78B;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    font-weight: bold;
}

.auth-form button:hover {
    opacity: 0.85;
}

.page-center {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
    padding: 20px;
}

.page-top {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: top;
    text-align: center;
    gap: 15px;
    padding: 20px;
}

.page-top h1 {
    color: #f5d76e;
    font-size: 2.5rem;
}

.page-center h1 {
    color: #f5d76e;
    font-size: 2.5rem;
}

.page-center p {
    color: #ccc;
    font-size: 1.2rem;
}

.page-center a {
    color: #81dbb8;
    font-weight: bold;
}

.page-center a:hover {
    opacity: 0.8;
}

.profile-container {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 20px;
}

.profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid #c9a227;
    object-fit: cover;
    background: #111;
}

.profile-container h1 {
    color: #f5d76e;
    font-size: 2rem;
}

.profile-container h2 {
    color: #aaa;
    font-size: 1.2rem;
}

.profile-container p {
    color: #ccc;
}

.profile-action-status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ddd;
    background: rgba(255, 255, 255, 0.08);
}

.auth-form {
    width: 350px;
    background: #111;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #c9a227;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    color: #f5d76e;
    font-size: 0.9rem;
}

.auth-form input {
    padding: 8px;
    border-radius: 6px;
    border: none;
}

.auth-form .errorlist {
    color: #ff6b6b;
    font-size: 0.8rem;
}

.register-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 44px 18px;
}

.register-panel {
    width: min(980px, 100%);
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(245, 215, 110, 0.08), rgba(68, 183, 139, 0.05)),
        #101014;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.register-heading {
    padding: 30px 34px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.register-kicker {
    color: #81dbb8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.register-heading h1 {
    margin: 7px 0;
    color: #f5d76e;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.register-heading p {
    max-width: 560px;
    margin: 0;
    color: #c9c9d3;
    font-size: 1rem;
}

.register-form.auth-form {
    width: 100%;
    max-width: none;
    padding: 28px 34px 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.register-form .form-group {
    gap: 7px;
}

.register-form .form-group label {
    color: #f5d76e;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.register-form input,
.register-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #f6f6f6;
    outline: none;
}

.register-form input:focus,
.register-form select:focus {
    border-color: #f5d76e;
    box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.14);
}

.register-form select option {
    background: #121217;
    color: #f6f6f6;
}

.phone-group {
    grid-column: span 2;
}

.phone-input-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 10px;
}

.register-submit {
    width: min(260px, 100%);
    min-height: 46px;
    margin-top: 24px;
    align-self: flex-start;
    border-radius: 8px;
    background: linear-gradient(135deg, #44b78b, #2d966e);
    box-shadow: 0 10px 24px rgba(68, 183, 139, 0.22);
}

.form-errors {
    padding: 10px 12px;
    border: 1px solid rgba(255, 107, 107, 0.45);
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.12);
    color: #ffb4b4;
}

.login-page {
    align-items: flex-start;
}

.login-panel {
    width: min(560px, 100%);
}

.login-form.register-form {
    display: grid;
    gap: 18px;
}

.login-form .register-submit {
    width: 100%;
}

.auth-helper-link {
    justify-self: end;
    color: #81dbb8;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.auth-helper-link:hover {
    color: #f5d76e;
}

.auth-status-panel {
    display: grid;
    gap: 1rem;
    padding: 28px 34px 34px;
    color: #c9c9d3;
    line-height: 1.65;
}

.auth-status-panel p {
    margin: 0;
}

.auth-status-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.login-footer {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 34px 30px;
    color: #c9c9d3;
}

.login-footer a {
    color: #81dbb8;
    font-weight: 800;
    text-decoration: none;
}

.login-footer a:hover {
    color: #f5d76e;
}

@media (max-width: 720px) {
    .register-page {
        padding: 22px 12px;
    }

    .register-heading,
    .register-form.auth-form {
        padding-left: 18px;
        padding-right: 18px;
    }

    .register-grid,
    .phone-input-row {
        grid-template-columns: 1fr;
    }

    .phone-group {
        grid-column: auto;
    }

    .login-footer {
        flex-direction: column;
        align-items: center;
        padding-left: 18px;
        padding-right: 18px;
    }
}

.contact-panel {
    width: min(760px, 100%);
}

.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 22px 34px 0;
}

.contact-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(245, 215, 110, 0.3);
    border-radius: 999px;
    background: rgba(245, 215, 110, 0.08);
    color: #f5d76e;
    font-weight: 800;
    text-decoration: none;
}

.contact-socials a:hover {
    border-color: rgba(129, 219, 184, 0.55);
    color: #81dbb8;
    opacity: 1;
}

.form-success {
    margin: 18px 34px 0;
    padding: 10px 12px;
    border: 1px solid rgba(68, 183, 139, 0.45);
    border-radius: 8px;
    background: rgba(68, 183, 139, 0.12);
    color: #bff4df;
}

.form-success p {
    margin: 0;
}

.contact-form .contact-type,
.contact-form .contact-message {
    grid-column: span 2;
}

.register-form textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #f6f6f6;
    outline: none;
    resize: vertical;
}

.register-form textarea:focus {
    border-color: #f5d76e;
    box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.14);
}

@media (max-width: 720px) {
    .contact-socials,
    .form-success {
        margin-left: 18px;
        margin-right: 18px;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-form .contact-type,
    .contact-form .contact-message {
        grid-column: auto;
    }
}

.shop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.ranking-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.shop-subtitle {
    font-size: 3rem;
    margin-bottom: 40px;
    color: #f5d76e;
}

/* =========================
   DAILY BUTTON
========================= */
.daily-reward-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.daily-reward-button {
    width: 800px;
    height: 800px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* =========================
   DAILY INFO BOX
========================= */
.daily-info-box {
    text-align: center;
    max-width: 660px;
}

.cards-collection-text {
    text-align: center;
    max-width: 1060px;
    color: #c9c9c7;
}

.cards-section {
    width: min(1500px, 96%);
    margin: auto;
}

.collection-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,255,255,0.03));
    box-shadow: 0 0 30px rgba(0,0,0,0.22);
}

.collection-eyebrow {
    color: #f5d76e;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.collection-hero h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
}

.collection-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.75rem;
}

.collection-summary div,
.collection-stat-card {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
}

.collection-summary div {
    padding: 0.85rem 1rem;
}

.collection-summary span,
.collection-stat-top span {
    display: block;
    color: rgba(255,255,255,0.68);
    font-size: 0.72rem;
}

.collection-summary strong {
    display: block;
    margin-top: 0.35rem;
    color: #f5d76e;
    font-size: 1rem;
}

.collection-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.collection-stat-card {
    padding: 0.85rem;
}

.collection-stat-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.collection-stat-top strong {
    color: #f5d76e;
    font-size: 0.85rem;
}

.collection-stat-count {
    margin-top: 0.45rem;
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
}

.collection-stat-bar {
    height: 7px;
    margin-top: 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.collection-stat-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5d76e, #44B78B);
}

@media (max-width: 760px) {
    .collection-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-summary {
        grid-template-columns: 1fr;
    }
}

/* text styling */
.daily-info-box h2 {
    color: #f5d76e;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.daily-info-box p {
    font-size: 0.9rem;
    opacity: 0.85;
    color: #ddd;
}

.daily-reward-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.daily-reward-button:hover {
    transform: scale(1.1);
}

.hint-text {
    opacity: 0.6;
    font-size: 0.9rem;
}


/* =========================
   OVERLAY ANIMATION
========================= */
.card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

.card-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.card-popup {
    text-align: center;
    color: #f5d76e;
    transform: scale(0.8);
    transition: 0.3s ease;
}

.card-overlay.show .card-popup {
    transform: scale(1);
}

.card-popup img {
    width: 260px;
    border-radius: 12px;
}

.reveal-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block; /* important for proper scaling */
}

.reveal-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(245, 215, 110, 0.6);
}

.click-hint {
    font-size: 0.9rem;
    opacity: 0.7;
}

.pack-counter {
    position: absolute;
    top: 10px;
    right: 10px;

    background: rgba(0,0,0,0.7);
    color: #f5d76e;

    padding: 5px 10px;

    font-weight: bold;
    font-size: 14px;
}

.starter-pack-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.starter-pack-button img {
    width: 420px;
    height: 520px;

    cursor: pointer;

    transition: transform 0.2s ease, filter 0.2s ease;
}

.starter-pack-button img:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.starter-pack-button img:active {
    transform: scale(0.95);
}

/* ========================================
   SHOP LAYOUT
======================================== */

.shop-container {
    width: 100%;
    max-width: 400px;

    margin: auto;
    padding: 40px 20px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
}

/* ========================================
   PACK SECTIONS
======================================== */

.shop-pack-section,


/* hover */
.shop-pack-section:hover,
.daily-reward-wrapper:hover {

    transform: translateY(-8px) scale(1.03);

    box-shadow:
        0 0 25px rgba(201,162,39,0.45),
        0 0 60px rgba(201,162,39,0.15);

    border-color: #c9a227;
}

/* ========================================
   PACK BUTTONS
======================================== */

.shop-pack-button,
.daily-reward-button {

    width: 180px;
    height: 380px;

    margin: auto;

    cursor: pointer;

    position: relative;

    z-index: 5;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

/* important */
.shop-pack-button img,
.daily-reward-button img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    pointer-events: none;
}

/* hover effect */
.shop-pack-button:hover,
.daily-reward-button:hover {

    transform: scale(1.08);
    filter: brightness(1.1);
}

/* click effect */
.shop-pack-button:active,
.daily-reward-button:active {

    transform: scale(0.96);
}

/* ========================================
   TITLES
======================================== */

.shop-pack-title {

    color: #f5d76e;

    font-size: 1.7rem;

    margin-top: 18px;
    margin-bottom: 8px;

    font-weight: bold;
}

.shop-pack-title2 {

    color: #ffffff;

    font-size: 1.5rem;
    text-align: center;
    margin-top: 18px;
    margin-bottom: 8px;

    font-weight: bold;
}

/* ========================================
   DESCRIPTION
======================================== */

.shop-pack-desc {

    color: #ddd;

    font-size: 0.95rem;

    line-height: 1.5;

    margin-top: 10px;
}

/* ========================================
   PRICE
======================================== */

.shop-pack-price {

    color: #c9a227;

    font-size: 1.15rem;

    font-weight: bold;

    margin-top: 10px;
}

/* ========================================
   OVERLAY
======================================== */

.card-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.85);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transition: 0.2s ease;

    z-index: 9999;
}

.card-overlay.show {

    opacity: 1;
    visibility: visible;
}

/* ========================================
   POPUP CARD
======================================== */

.card-popup {

    position: relative;

    text-align: center;

    animation: popupReveal 0.25s ease;
}

.card-popup img {

    width: 320px;
    max-width: 90vw;

    border-radius: 18px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* interactive hover */
.card-popup img:hover {

    transform: scale(1.05);

    box-shadow:
        0 0 25px rgba(255,255,255,0.2),
        0 0 50px rgba(201,162,39,0.35);
}

/* ========================================
   PACK COUNTER
======================================== */

.pack-counter {

    position: absolute;

    top: 10px;
    right: 10px;

    background: rgba(0,0,0,0.8);

    color: #f5d76e;

    padding: 6px 12px;

    border-radius: 12px;

    font-size: 0.95rem;
    font-weight: bold;

    border: 1px solid #c9a227;
}

/* ========================================
   CLICK HINT
======================================== */

.click-hint {

    color: #ddd;

    margin-top: 18px;

    font-size: 0.95rem;

    animation: pulse 1.5s infinite;
}

/* ========================================
   BUTTONS
======================================== */

.card-popup button {

    margin-top: 20px;

    padding: 10px 24px;

    border: none;

    border-radius: 12px;

    background: #c9a227;

    color: black;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s ease;
}

.card-popup button:hover {

    transform: scale(1.05);

    background: #f5d76e;
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes popupReveal {

    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {

    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* =========================
   SHOP CONTAINER
========================= */
.shop-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* =========================
   DAILY REWARD
========================= */
.daily-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.daily-reward-button img {
    width: 180px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.daily-reward-button img:hover {
    transform: scale(1.08);
}

/* =========================
   STARTER PACK (2 COLUMN)
========================= */
.starter-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

/* LEFT IMAGE */
.starter-image {
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.starter-image img {
    width: 100%;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.starter-image:hover img {
    transform: scale(1.05);
}

/* RIGHT INFO */
.starter-info {
    width: 420px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 20px;
    text-align: left;
}

.starter-info h2 {
    margin-bottom: 10px;
    color: #f5d76e;
}

.starter-info .price {
    font-weight: bold;
    margin-bottom: 10px;
    color: #c9a227;
}

.starter-info p {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

/* =========================
   PACK ROW (3 PACKS)
========================= */
.pack-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* =========================
   PACK BOX
========================= */
.shop-pack-section {
    width: 240px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-pack-section:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.shop-pack-section img {
    width: 120px;
    margin-bottom: 10px;
}

.shop-pack-section h2 {
    margin: 10px 0 5px;
    color: #f5d76e;
}

.shop-pack-section p {
    font-size: 14px;
    opacity: 0.85;
}

/* =========================
   OVERLAY
========================= */
.card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 9999;
}

.card-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* =========================
   POPUP
========================= */
.card-popup {
    text-align: center;
    animation: popupReveal 0.25s ease;
}

.card-popup img {
    width: 320px;
    border-radius: 18px;
}

/* =========================
   PACK COUNTER
========================= */
.pack-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: #f5d76e;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: bold;
}

/* =========================
   CLICK HINT
========================= */
.click-hint {
    margin-top: 15px;
    opacity: 0.7;
    animation: pulse 1.5s infinite;
}

/* =========================
   BUTTON
========================= */
.card-popup button {
    margin-top: 20px;
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    background: #c9a227;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

.card-popup button:hover {
    transform: scale(1.05);
    background: #f5d76e;
}

.daily-reward-button {
    width: 280px;   /* bigger container */
    height: 380px;
    border: 1px solid rgba(255, 255, 255, 0.266);
    border-radius: 26px;
}

.daily-reward-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================
   POINTS HUD
========================= */

.points-hud {
    position: fixed;
    top: 600px;
    right: 30px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 22px;

    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #c9a227;
    border-radius: 18px;

    z-index: 9999;

    backdrop-filter: blur(6px);

    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.35);

    animation: pointsFloat 3s ease-in-out infinite;
}

.points-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.points-text {
    color: gold;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.spotlight-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(245,215,110,0.28);
    background:
        linear-gradient(135deg, rgba(245,215,110,0.08), rgba(9,13,10,0.92)),
        rgba(9,13,10,0.92);
    box-shadow: 0 0 26px rgba(213,181,82,.12);
}

.spotlight-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg,#d8bb58,#5dd8a0,#6ea7ff,#d8bb58);
    background-size: 260% 260%;
    animation: seasonalBorderShift 4.5s linear infinite;
    mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.spotlight-wrapper::after {
    content: "";
    position: absolute;
    inset: auto -15% 0;
    height: 2px;
    background: linear-gradient(90deg,transparent,#f5d76e,transparent);
    animation: seasonalSweep 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes seasonalBorderShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 260% 50%; }
}

@keyframes seasonalSweep {
    0%, 100% { transform: translateX(-35%); opacity: .2; }
    50% { transform: translateX(35%); opacity: .9; }
}

.spotlight-kicker {
    display: inline-flex;
    margin-bottom: 0.55rem;
    color: #86e0b7;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.spotlight-criteria {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.15rem 0 0.7rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(245,215,110,0.25);
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    color: #f5d76e;
    font-weight: 800;
}

.spotlight-criteria small {
    color: #95a39a;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.spotlight-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.spotlight-club-badge {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.shop-countdown {
    margin: 0 0 0.85rem;
    color: #95a39a;
    font-weight: 700;
    text-transform: uppercase;
}

.shop-countdown strong,
.monthly-header small strong {
    color: #f5d76e;
    font-weight: 900;
}

.pack-theme,
.pack-description {
    max-width: 520px;
    margin: 0.4rem auto;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    text-align: center;
}

.pack-theme strong {
    color: #f5d76e;
}

.buy-points-link {
    padding: 0.45rem 0.7rem;
    border: 1px solid #c9a227;
    border-radius: 8px;
    background: #c9a227;
    color: #080808;
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Floating animation */
@keyframes pointsFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0px);
    }

}

/* =========================
   GLOBAL
========================= */

/* =========================
   NAVBAR
========================= */
/* =========================
   NAVBAR + FOOTER FONT
========================= */

.navbar,
.navbar a,
.nav-dropdown-toggle,
.logout-form button,
.footer,
.footer a {
    font-family: 'Orbitron', sans-serif;
}

.navbar {

    position: relative;
    top: 0;

    z-index: 9999;

    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 8px 40px;

    background: #1d1d1d;

    backdrop-filter: blur(10px);

    border-bottom: 1px solid #c9a227;

    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.08);
}

/* NAV SECTIONS */

.nav-left,
.nav-right {

    display: flex;
    align-items: center;
    gap: 28px;

    flex: 1;
}

.nav-right {
    justify-content: flex-end;
}

.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-nav-toggle {
    display: none;
}

.navbar .mobile-notification-bell {
    display: none;
}

/* LINKS */

.navbar a {

    color: white;
    text-decoration: none;

    font-size: 0.95rem;
    letter-spacing: 1px;

    transition: 0.25s ease;
}

.nav-dropdown {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 0.35rem 0;

    margin: -0.35rem 0;
}

.nav-dropdown-toggle {

    background: transparent;

    border: none;

    color: white;

    font-size: 0.95rem;

    letter-spacing: 1px;

    cursor: pointer;

    padding: 0;
}

.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown:hover .nav-dropdown-toggle {

    color: gold;

    text-shadow:
        0 0 12px gold;
}

.nav-dropdown-menu {

    position: absolute;

    top: 100%;
    left: 50%;

    min-width: 170px;

    padding: 0.45rem;

    background: rgba(15,15,15,0.96);

    border: 1px solid rgba(255,215,0,0.25);

    border-radius: 10px;

    box-shadow:
        0 12px 28px rgba(0,0,0,0.35);

    opacity: 0;

    pointer-events: none;

    transform: translate(-50%, 8px);

    transition: 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {

    opacity: 1;

    pointer-events: auto;

    transform: translate(-50%, 0);
}

.nav-dropdown-menu a {

    display: block;

    padding: 0.65rem 0.75rem;

    border-radius: 7px;

    white-space: nowrap;
}

.nav-dropdown-menu a:hover {

    background: rgba(255,215,0,0.1);
}

.navbar a:hover {

    color: gold;
    text-shadow:
        0 0 12px gold;
}

/* LOGO */

.main-logo {

    width: 72px;
    height: auto;

    transition: 0.35s ease;
}

.main-logo:hover {

    transform: scale(1.05);

    filter:
        drop-shadow(0 0 10px rgb(0, 0, 0));
}

/* LOGOUT BUTTON */

.logout-form button {

    background: transparent;
    border: 1px solid gold;

    color: gold;

    padding: 10px 18px;

    border-radius: 12px;

    cursor: pointer;

    font-family: inherit;

    transition: 0.25s ease;
}

.logout-form button:hover {

    background: gold;
    color: black;

    box-shadow:
        0 0 18px gold;
}

/* =========================
   MAIN
========================= */

.main-content {

    min-height: 80vh;

    padding: 30px;
}

/* =========================
   FOOTER
========================= */

.footer {

    margin-top: 80px;

    background: linear-gradient(
        to top,
        #000000,
        #0b0b0b
    );

    border-top: 1px solid rgba(255,255,255,0.08);

    padding: 60px 20px;
}

.footer-content {

    max-width: 1200px;

    margin: auto;

    text-align: center;
}

/* FOOTER LOGO */

.footer-logo {

    width: 120px;

    margin-bottom: 15px;

    opacity: 0.95;
}

/* FOOTER TEXT */

.footer-title {

    font-size: 1.6rem;

    color: gold;

    margin-bottom: 10px;
}

.footer-text {

    color: #cccccc;

    margin-bottom: 30px;
}

/* FOOTER LINKS */

.footer-links {

    display: flex;
    justify-content: center;
    gap: 28px;

    flex-wrap: wrap;

    margin-bottom: 30px;
}

.footer-links a {

    color: white;
    text-decoration: none;

    transition: 0.25s ease;
}

.footer-links a:hover {

    color: gold;
}

/* COPYRIGHT */

.copyright {

    color: #777;

    font-size: 0.85rem;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

    .navbar {

        flex-direction: column;
        gap: 10px;

        padding: 10px 14px;
    }

    .nav-left,
    .nav-right {

        justify-content: center;
        flex-wrap: wrap;
    }

    .main-logo {

        width: 72px;
    }

}

/* =========================
   POSTS
========================= */

.post-link {

    text-decoration: none;
    color: inherit;

    display: block;
}

.post {

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 20px;

    padding: 25px;

    margin-bottom: 35px;

    transition: 0.3s ease;

    cursor: pointer;
}

.post:hover {

    transform: translateY(-6px);

    border-color: gold;

    box-shadow:
        0 0 25px rgba(255,215,0,0.15);
}

.post-image {

    width: 100%;

    border-radius: 14px;

    margin-bottom: 20px;
}

.post-date {

    opacity: 0.7;

    margin-bottom: 12px;
}

/* =========================
   SINGLE POST
========================= */

/* =========================
   SINGLE POST (FIXED)
========================= */

.single-post-section {
    max-width: 900px;
    margin: auto;
    padding: 40px 20px;
}

.single-post {
    background: rgba(255,255,255,0.03);
    border-radius: 25px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.08);
}

.single-post-image {
    width: 100%;
    max-height: 1000px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 30px;
}

.single-post-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #f5d76e;
}

.single-post-date {
    opacity: 0.6;
    margin-bottom: 35px;
}

.single-post-body {
    line-height: 1.9;
    font-size: 1.08rem;
}

/* =========================
========================= */

.opening-pack {

    width: 340px;

    cursor: pointer;

    transition: 0.25s ease;

    animation:
        floatingPack 2s ease-in-out infinite;
}

.opening-pack:hover {

    transform: scale(1.05);
}

.open-hint {

    margin-top: 25px;

    font-size: 1.2rem;

    opacity: 0.8;
}

.bundle-opening-title {
    margin: 0 0 18px;
    color: var(--accent);
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    text-align: center;
    text-transform: uppercase;
}

@keyframes floatingPack {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.pack-burst {

    animation:
        burstOpen 0.7s forwards;
}

@keyframes burstOpen {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* =========================
   OVERLAYS (GLOBAL FIX)
========================= */

.confirm-overlay,
.opening-overlay,
.card-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.92);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.25s ease;

    z-index: 9999;
}

.confirm-overlay.show,
.opening-overlay.show,
.card-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#openingOverlay {
    display: none; /* HARD HIDE by default */
}

#openingOverlay.show {
    display: flex;
}
.pack-page {
    min-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.big-pack {
    width: 260px;
    max-width: 80vw;
    cursor: pointer;
    transition: 0.3s ease;
}


.opening-pack {
    width: 280px;
    max-width: 75vw;

    cursor: pointer;

    animation: floatPack 2s ease-in-out infinite;
}

@keyframes floatPack {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.card-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#packImage {
    width: 220px;
    max-width: 70vw;
    border-radius: 12px;
}

/* =========================
   MAIN PURCHASE BUTTON
========================= */

.purchase-btn {
    margin-top: 25px;

    padding: 14px 30px;

    background: linear-gradient(135deg, #d4af37, #b8860b);

    color: #0a0a0a;

    font-weight: 700;
    font-size: 1rem;

    border: none;
    border-radius: 14px;

    cursor: pointer;

    transition: 0.25s ease;

    box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}

.purchase-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.confirm-buttons button {
    padding: 12px 26px;

    border-radius: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;

    border: none;
}

/* YES BUTTON */
#confirmYes {
    background: linear-gradient(135deg, #c9a227, #c9a227);
    color: white;
}

#confirmYes:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #c9a227;
}

/* NO BUTTON */
#confirmNo {
    background: rgba(255, 255, 255, 0.08);
    border-color: #c9a227;;
    color: white;
}

#confirmNo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #c9a227;
}

.opening-pack {
    width: 260px;

    max-width: 75vw;

    cursor: pointer;

    animation: floatPack 2s ease-in-out infinite;

    filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));
}

@keyframes floatPack {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.toast-error {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff3b3b;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    z-index: 99999;
}
/* =========================
   TOAST NOTIFICATIONS
========================= */

.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);

    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 0, 0, 0.6);

    color: white;

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

    font-size: 0.95rem;

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;

    z-index: 99999;

    backdrop-filter: blur(8px);
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-color: rgba(0, 255, 120, 0.6);
}

.toast.error {
    border-color: rgba(255, 60, 60, 0.7);
}

.points-text {
    transition: 0.25s ease;
}

.back-btn {
    position: relative;
    top: 20px;
    left: 20px;

    padding: 10px 16px;

    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #c9a227;
    text-decoration: none;

    font-size: 0.95rem;

    border-radius: 10px;

    backdrop-filter: blur(8px);

    transition: 0.25s ease;

    z-index: 9999;
}

.back-btn:hover {
    transform: translateX(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: #c9a227;
}

/* =========================
   CINEMATIC BACKGROUND
========================= */
.cinematic-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,215,0,0.15), transparent 60%);
    animation: bgPulse 1.2s ease-in-out infinite;
}

@keyframes bgPulse {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 0.4; }
}

/* =========================
   PACK AAA FLOAT
========================= */
.opening-pack {
    width: 280px;
    z-index: 10;

    animation:
        floatPack 2.5s ease-in-out infinite,
        packGlow 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255,215,0,0.3));
}

@keyframes packGlow {
    0% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.2)); }
    50% { filter: drop-shadow(0 0 35px rgba(255,215,0,0.6)); }
    100% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.2)); }
}

/* =========================
   LIGHT BURST FLASH
========================= */
.light-burst {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 70%);
    opacity: 0;
}

.light-burst.active {
    animation: burstFlash 0.8s ease-out forwards;
}

@keyframes burstFlash {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 900px; height: 900px; opacity: 0; }
}

/* =========================
   SHOCKWAVE RING
========================= */
.shockwave {
    position: absolute;
    border: 2px solid rgba(255,215,0,0.6);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    opacity: 0;
}

.shockwave.active {
    animation: shockwaveAnim 1s ease-out;
}

@keyframes shockwaveAnim {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(8); opacity: 0; }
}

/* =========================
   SCREEN SHAKE (AAA FEEL)
========================= */
.shake {
    animation: screenShake 0.6s ease-in-out;
}

@keyframes screenShake {
    0% { transform: translate(0,0); }
    20% { transform: translate(-6px, 4px); }
    40% { transform: translate(6px, -4px); }
    60% { transform: translate(-4px, 3px); }
    80% { transform: translate(4px, -3px); }
    100% { transform: translate(0,0); }
}

.particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: gold;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
}

.leaderboard {
    max-width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 18px;

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 12px;

    transition: 0.2s ease;
}

.leaderboard-row:hover {
    transform: scale(1.02);
    border-color: gold;
}

.rank {
    font-weight: bold;
    color: gold;
}

.score {
    color: #f5d76e;
    font-weight: bold;
}

.collector-rank {
    color: gold;
    font-size: 1.2rem;
    font-weight: bold;
}

/* =========================
   LEADERBOARD SORT TOGGLE
========================= */

.leaderboard-sort {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 20px 0 40px;
    gap: 10px;

    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 16px;

    border: 1px solid rgba(201, 162, 39, 0.2);

    backdrop-filter: blur(8px);
}

/* BUTTON STYLE */
.sort-pill {
    padding: 10px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;

    color: #ccc;

    transition: 0.25s ease;

    position: relative;
}

/* HOVER EFFECT */
.sort-pill:hover {
    color: #f5d76e;
    transform: translateY(-2px);
}

/* ACTIVE STATE */
.sort-pill.active {
    color: #0a0a0a;

    background: linear-gradient(135deg, #d4af37, #b8860b);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.35),
        inset 0 0 8px rgba(255, 255, 255, 0.2);
}

/* ACTIVE GLOW UNDERLINE */
.sort-pill.active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);

    width: 40%;
    height: 2px;

    background: gold;
    border-radius: 2px;

    box-shadow: 0 0 10px gold;
}

/* =========================================
   BUNDLE SECTION
========================================= */

.shop-subtitle {
    text-align: center;
}

/* CENTER THE ENTIRE BUNDLE */
#buyBundle {
    max-width: 700px;
    margin: 40px auto;
    text-align: center;
    width: 400px;
    padding: 40px 30px;

    border-radius: 24px;

    transition: 0.25s;
}

/* BIGGER IMAGE */
#buyBundle img {
    width: 420px;
    max-width: 100%;

    display: block;
    margin: 0 auto 25px auto;

    transition: transform 0.25s ease;
}

/* HOVER EFFECT */
#buyBundle:hover {
    transform: translateY(-6px);
}

#buyBundle:hover img {
    transform: scale(1.04);
}

/* TITLE */
#buyBundle .shop-pack-title {
    font-size: 2rem;
    margin-bottom: 12px;
}

/* PRICE */
#buyBundle .shop-pack-price {
    font-size: 1.3rem;
    margin-bottom: 20px;
}

/* DESCRIPTION */
#buyBundle p {
    text-align: center;
    line-height: 1.7;
    font-size: 1.05rem;
}

.bundle-title {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 20px;
}

.shop-tabs {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin: 1rem auto 2rem;
    flex-wrap: wrap;
}

.shop-tab {
    min-width: 150px;
    padding: 0.85rem 1.2rem;
    border: 1px solid rgba(245,215,110,0.35);
    border-radius: 999px;
    background: rgba(10,14,11,0.78);
    color: #f5d76e;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
}

.shop-tab.active {
    background: linear-gradient(135deg,#f5d76e,#c9a227);
    color: #111;
    box-shadow: 0 0 22px rgba(245,215,110,0.22);
}

.theme-picker-form {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.theme-picker-form:before {
    content: "Table design";
    color: #aaa;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.theme-select {
    position: relative;
    min-width: 230px;
}

.table-theme-picker,
.battle-actions,
.battle-setup-tray,
.battle-setup-form,
.setup-control,
.deck-actions,
.host-panel,
.room-actions,
.ladder-preview-actions,
.ladder-preview-actions form {
    overflow: visible;
}

/* Keep setup-page table-design menus above the later footer stacking layer. */
body > main:has(.table-theme-picker) {
    z-index: 2;
}

.battle-setup-tray {
    max-width: 760px;
    margin: 0 auto 2rem;
    padding: 1rem;
    border: 1px solid rgba(245,215,110,0.22);
    border-radius: 10px;
    background: rgba(8,12,9,0.86);
}

.battle-setup-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 0.85rem;
    align-items: end;
}

.setup-control {
    display: grid;
    gap: 0.35rem;
}

.setup-control-label {
    color: #aaa;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.setup-ai-count select {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem;
    border: 1px solid rgba(245,215,110,0.28);
    border-radius: 8px;
    background: #090d0a;
    color: #fff;
}

.mode-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 48px;
    padding: 4px;
    border: 1px solid rgba(245,215,110,0.28);
    border-radius: 8px;
    background: #090d0a;
    cursor: pointer;
}

.mode-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mode-option {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0 0.55rem;
    border-radius: 6px;
    color: #8d968f;
    font: 800 0.68rem 'Orbitron', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.mode-switch input:not(:checked) ~ .mode-option.normal,
.mode-switch input:checked ~ .mode-option.energy {
    background: linear-gradient(135deg,#f5d76e,#c9a227);
    color: #111;
    box-shadow: 0 0 14px rgba(245,215,110,0.2);
}

.mode-switch:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.setup-energy-lock {
    color: #ffb86b;
    font-size: 0.68rem;
}

.setup-action-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.setup-action-row .btn {
    justify-content: center;
}

.setup-action-row .btn[disabled] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.theme-select-button,
.theme-select-option {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.42rem;
    border: 1px solid #3d493f;
    border-radius: 7px;
    background: #080d0a;
    color: #e8eee9;
    text-align: left;
    cursor: pointer;
}

.theme-select-button img,
.theme-select-option img {
    width: 58px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
    background: #020402;
}

.theme-select-button span,
.theme-select-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 0.68rem 'Orbitron', sans-serif;
}

.theme-select-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 80;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(420px, 90vw);
    padding: 0.4rem;
    border: 1px solid #3d493f;
    border-radius: 8px;
    background: #07100b;
    box-shadow: 0 16px 30px rgba(0,0,0,0.55);
}

.theme-select-menu[hidden] {
    display: none !important;
}

.theme-select-option.selected {
    border-color: #d0ad43;
    background: #15170d;
    color: #f5d76e;
}

@media (max-width: 760px) {
    .battle-setup-form {
        grid-template-columns: 1fr;
    }

    .theme-select-menu {
        left: 0;
        right: auto;
        grid-template-columns: 1fr;
        width: min(100%, 90vw);
    }
}

.shop-packs-panel[hidden],
.shop-customization-content[hidden] {
    display: none !important;
}

.shop-customization-content {
    max-width: 1440px;
    margin: 2rem auto 0;
    padding: 0 1rem 3rem;
}

.customization-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.customization-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(245,215,110,0.22);
    border-radius: 9px;
    background: rgba(8,12,9,0.86);
}

.customization-menu h2 {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    color: #f5d76e;
    font: 800 0.9rem 'Orbitron', sans-serif;
    text-transform: uppercase;
}

.customization-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.25rem 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid #26342d;
    border-radius: 7px;
    background: #101712;
}

.custom-preview {
    grid-row: 1 / 4;
    display: grid;
    place-items: center;
    width: 54px;
    height: 42px;
    overflow: hidden;
    border-radius: 6px;
    background: #050806;
}

.custom-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-preview.frame-preview {
    width: 42px;
    height: 42px;
    overflow: visible;
    justify-self: center;
}

.profile-frame {
    --frame-a:#d0ad43;
    --frame-b:#fff1a0;
    --frame-c:#7d5a13;
    --frame-glow:rgba(208,173,67,.36);
    --frame-pattern:linear-gradient(135deg,var(--frame-a),var(--frame-b),var(--frame-c));
    position:relative;
    padding:8px;
    border-radius:50%;
    background:var(--frame-pattern);
    box-shadow:0 0 0 2px rgba(0,0,0,.75),0 0 24px var(--frame-glow);
}

.profile-frame:before {
    content:"";
    position:absolute;
    inset:3px;
    z-index:1;
    border:1px solid rgba(255,255,255,.36);
    border-radius:50%;
    pointer-events:none;
}

.profile-frame:after {
    content:"";
    position:absolute;
    inset:-5px;
    z-index:0;
    border-radius:50%;
    background:radial-gradient(circle at 32% 18%,rgba(255,255,255,.45),transparent 22%),radial-gradient(circle at 72% 76%,var(--frame-glow),transparent 34%);
    pointer-events:none;
}

.frame-preview i {
    position:relative;
    z-index:2;
    display:block;
    width:26px;
    height:26px;
    border:3px solid #080b09;
    border-radius:50%;
    background:#6f7b74;
}

.frame-gold-circuit{--frame-a:#8b6917;--frame-b:#f5d76e;--frame-c:#fff4a8;--frame-glow:rgba(245,215,110,.42);--frame-pattern:repeating-conic-gradient(from 12deg,#f5d76e 0 12deg,#8b6917 12deg 18deg,#fff4a8 18deg 24deg)}
.frame-emerald-pulse{--frame-a:#0f6f47;--frame-b:#63d68d;--frame-c:#b6ffd0;--frame-glow:rgba(99,214,141,.42);--frame-pattern:linear-gradient(135deg,#0f6f47,#63d68d 52%,#0d2f22)}
.frame-ruby-flare{--frame-a:#681313;--frame-b:#e44e4e;--frame-c:#ffc2b8;--frame-glow:rgba(228,78,78,.42);--frame-pattern:conic-gradient(from 45deg,#3b0c0c,#e44e4e,#ffc2b8,#7e1b1b,#3b0c0c)}
.frame-sapphire-ice{--frame-a:#174d8b;--frame-b:#78c9ff;--frame-c:#dff6ff;--frame-glow:rgba(120,201,255,.45);--frame-pattern:linear-gradient(160deg,#092b55,#78c9ff,#f2fbff,#174d8b)}
.frame-violet-neon{--frame-a:#4d188b;--frame-b:#d274ff;--frame-c:#55d4ff;--frame-glow:rgba(210,116,255,.45);--frame-pattern:repeating-conic-gradient(#d274ff 0 10deg,#241034 10deg 20deg,#55d4ff 20deg 30deg)}
.frame-sunset-halo{--frame-a:#b44a24;--frame-b:#ffcf5e;--frame-c:#ff7a59;--frame-glow:rgba(255,122,89,.45);--frame-pattern:linear-gradient(135deg,#512414,#ff7a59,#ffcf5e,#7e2e52)}
.frame-mono-steel{--frame-a:#3e4646;--frame-b:#d9e0df;--frame-c:#171d1d;--frame-glow:rgba(217,224,223,.24);--frame-pattern:repeating-linear-gradient(45deg,#111 0 7px,#d9e0df 7px 10px,#3e4646 10px 18px)}
.frame-aqua-wave{--frame-a:#0d6670;--frame-b:#58efe0;--frame-c:#1256a1;--frame-glow:rgba(88,239,224,.42);--frame-pattern:radial-gradient(circle at 25% 20%,#c8fff8 0 12%,transparent 13%),conic-gradient(#1256a1,#58efe0,#0d6670,#1256a1)}
.frame-rose-glass{--frame-a:#7d295d;--frame-b:#ff9fd8;--frame-c:#ffe2f2;--frame-glow:rgba(255,159,216,.38);--frame-pattern:linear-gradient(145deg,rgba(255,226,242,.95),#ff9fd8,#7d295d)}
.frame-champion-star{--frame-a:#1e2a38;--frame-b:#f2d36b;--frame-c:#6fe0ff;--frame-glow:rgba(242,211,107,.48);--frame-pattern:conic-gradient(from 18deg,#f2d36b,#1e2a38,#6fe0ff,#f2d36b,#fff3a1,#1e2a38)}

.emote-preview {
    color: #f5d76e;
    font-size: 1.35rem;
    font-weight: 800;
}

.skin-preview {
    height: 72px;
}

.skin-preview img {
    object-fit: contain;
}

.customization-item strong {
    min-width: 0;
    overflow: hidden;
    color: #e8eee9;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customization-item small {
    color: #d8bb58;
    font: 700 0.62rem 'Orbitron', sans-serif;
    text-transform: uppercase;
}

.customization-item form {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    margin: 0;
}

.customization-item button {
    min-width: 70px;
    padding: 0.42rem 0.5rem;
    border: 1px solid #d0ad43;
    border-radius: 5px;
    background: #b99631;
    color: #080a08;
    font: 800 0.58rem 'Orbitron', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.customization-item button:disabled {
    border-color: #344139;
    background: #1a211c;
    color: #718078;
    cursor: default;
}

.custom-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #8a968e;
    font-size: 0.75rem;
}

.customization-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.customization-card {
    display: grid;
    gap: 0.65rem;
    min-height: 190px;
    padding: 1.35rem;
    border: 1px solid rgba(245,215,110,0.22);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(14,19,15,0.96), rgba(8,10,8,0.96));
    color: #e8eee9;
    text-decoration: none;
    align-content: start;
    transition: 0.2s ease;
}

.customization-card:hover {
    border-color: rgba(245,215,110,0.5);
    transform: translateY(-2px);
}

.customization-card span {
    color: #8d9891;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.customization-card h2 {
    margin: 0;
    color: #f5d76e;
    font-size: 1.1rem;
}

.customization-card p {
    margin: 0;
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
}

@media (max-width: 760px) {
    .customization-menu-grid {
        grid-template-columns: 1fr;
    }

    .customization-menu {
        grid-template-columns: 1fr;
    }

    .customization-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .customization-item form {
        grid-column: 2;
        grid-row: 3;
    }

    .customization-grid {
        grid-template-columns: 1fr;
    }

    .shop-tab {
        min-width: 0;
        flex: 1 1 140px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .customization-menu-grid {
        grid-template-columns: 1fr;
    }

    .customization-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customization-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pro-page {
    padding: 2rem;
    color: white;
}
.pro-profile-back{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 1rem;padding:.55rem .8rem;border:1px solid #665a31;border-radius:6px;background:#111712;color:#efd36d;font:700 .7rem 'Orbitron',sans-serif;text-decoration:none;text-transform:uppercase}
.pro-profile-back:hover,.pro-profile-back:focus-visible{border-color:#efd36d;background:#1b2118;color:#fff;outline:none}

/* ================= HERO ================= */
.pro-hero {
    display: flex;
    align-items: center;

    justify-content: flex-start; /* 🔥 IMPORTANT */
    
    gap: 32px; /* small controlled spacing */

    width: fit-content; /* prevents stretching full width */
    margin: 20px auto;  /* centers the whole block as a unit */
}

.pro-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    border: 2px solid gold;
}

.pro-name {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.pro-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pro-badge {
    padding: 5px 10px;
    background: #222;
    border-radius: 12px;
    font-size: 0.8rem;
}

.pro-badge.active {
    background: green;
}

.pro-badge.inactive {
    background: rgb(61, 60, 60);
}

/* ================= HIGHLIGHTS ================= */
.pro-highlight-stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 2rem auto;
    text-align: center;
}

.highlight-card {
    background: #151515;
    padding: 1rem;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #222;
}

.highlight-card .value {
    font-size: 1.5rem;
    font-weight: bold;
    color: gold;
}

/* ================= SECTIONS ================= */
.pro-section {
    margin-bottom: 2rem;
        margin-top:40px;
    padding:28px;

    background:
        linear-gradient(
            145deg,
            rgb(40, 39, 39),
            rgba(9, 9, 9, 0.619)
        );

    border:1px solid rgba(255, 255, 255, 0);
    border-radius:22px;

    backdrop-filter:blur(8px);
}

.pro-section-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-left: 4px solid gold;
    padding-left: 10px;
}

/* ================= GRID STATS ================= */
.pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.stat-card {
    background: #121212;
    padding: 0.8rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #1f1f1f;
}

.stat-card b {
    color: gold;
}

/* ================= CARDS ================= */
.card-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.card-img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.card-img:hover {
    transform: scale(1.05);
}

.featured-card {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
}

.featured-card-img {
    width: 220px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transform: scale(1.05);
}

.featured-card-stats {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);

    font-family: "Poppins", "Segoe UI", sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.6;
    color: #eaeaea;
}


.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sort-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    max-width: 80vw;
}

.sort-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    background: #222;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
}


.rank-sort-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffd700;
    letter-spacing: 1px;
}

.rank-sort-row {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.rank-sort-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-label {
    font-size: 12px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    color: #aaa;
    text-align: center;
}

.sort-pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #ddd;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
    width: fit-content;
}

.sort-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.sort-pill.active {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: black;
    font-weight: bold;
}

.rank-sort-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

/* HORIZONTAL LAYOUT */
.rank-sort-horizontal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* GROUP BOX */
.rank-sort-group {
    padding: 10px;
    border-radius: 12px;
    min-width: 220px;
}

/* GROUP LABEL */
.group-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* ROW OF PILLS */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* BASE PILL */
.sort-pill {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.06);
    transition: 0.2s;
    border: 1px solid transparent;
}

.sort-pill:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.12);
}

/* ACTIVE STATE (GOLD GAME FEEL) */
.sort-pill.active {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: black;
    font-weight: 700;
}

/* CATEGORY COLORS */
.rank-sort-group.national {
    border: 1px solid #c9a3278f;
}

.rank-sort-group.world {
    border: 1px solid #c9a3278f;
}

.rank-sort-group.performance {
    border: 1px solid #c9a3278f;
}

.sort-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sort-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    max-width: 80vw;
}

.sort-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    background: #222;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
}

.rank-sort-container {
    background: rgba(21, 21, 21, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 25px;
    backdrop-filter: blur(8px);

    /* CENTER THE ENTIRE CONTAINER CONTENT */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rank-sort-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 14px;
    letter-spacing: 1px;
    text-align: center;
}

/* HORIZONTAL LAYOUT */
.rank-sort-horizontal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    /* CENTER GROUPS */
    justify-content: center;
    align-items: flex-start;
}

/* GROUP BOX */
.rank-sort-group {
    padding: 10px;
    border-radius: 12px;
    min-width: 220px;
}

/* GROUP LABEL */
.group-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
    color: #aaa;
    text-align: center;
}

/* ROW OF PILLS */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    /* CENTER PILLS */
    justify-content: center;
}

/* BASE PILL */
.sort-pill {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.06);
    transition: 0.2s;
    border: 1px solid transparent;
}

.sort-pill:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.12);
}

/* ACTIVE STATE */
.sort-pill.active {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: black;
    font-weight: 700;
}

/* CATEGORY COLORS */
.rank-sort-group.national {
    border: 1px solid #c9a3278f;
}

.rank-sort-group.world {
    border: 1px solid #c9a3278f;
}

.rank-sort-group.performance {
    border: 1px solid #c9a3278f;
}


.section-divider {
    width: 60%;
    margin: 50px auto;
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        
        rgba(255, 255, 255, 0.7),
        transparent
    );
}

/* =========================
   OPEN CHECKLIST
========================= */

.open-checklist{
    margin-top:40px;
    padding:28px;

    background:
        linear-gradient(
            145deg,
            rgb(40, 39, 39),
            rgba(9, 9, 9, 0.619)
        );

    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;

    backdrop-filter:blur(8px);
}

.open-checklist-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:22px;
    color:white;
}

.open-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
}

.open-item{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-radius:16px;

    font-weight:600;
    font-size:16px;

    transition:0.25s ease;
}

.open-item.success{
    background:
        linear-gradient(
            135deg,
            rgba(0,255,120,0.16),
            rgba(0,255,120,0.05)
        );

    border:1px solid rgba(0,255,120,0.25);
}

.open-item.failed{
    background:
        linear-gradient(
            135deg,
            rgba(255,60,60,0.14),
            rgba(255,60,60,0.04)
        );

    border:1px solid rgba(255,60,60,0.20);
}

.open-item .icon{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:18px;
    font-weight:900;
}

.open-item.success .icon{
    background:rgba(0,255,120,0.18);
    color:#4dff9f;
}

.open-item.failed .icon{
    background:rgba(255,60,60,0.16);
    color:#ff7676;
}

/* =========================
   TWO TABLE LAYOUT
========================= */
.pro-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    width: 100%;
    align-items: start;
}

/* Mobile */
@media (max-width: 900px) {
    .pro-ranking-grid {
        grid-template-columns: 1fr;
    }
}

/* Each side */
.ranking-side {
    width: 100%;
}

/* =========================
   HOMEPAGE
========================= */
.homepage {
    width: 100%;
}

/* =========================
   HERO SLIDER
========================= */
.hero-slider {
    position: relative;

    width: 100%;
    height: 88vh;

    overflow: hidden;

    border-radius: 24px;

    margin-bottom: 5rem;

    box-shadow:
        0 0 40px rgba(0,0,0,0.5);
}

/* =========================
   HERO SLIDES
========================= */
.hero-slide {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    padding: 4rem;

    background-size: cover;
    background-position: center;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.03);

    transition:
        opacity 0.8s ease,
        transform 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
}

/* =========================
   HERO CONTENT
========================= */
.hero-content {
    max-width: 700px;

    z-index: 2;
}

.hero-tag {
    display: inline-block;

    padding: 0.5rem 1rem;

    margin-bottom: 1.5rem;

    border:
        1px solid rgba(255,215,0,0.4);

    border-radius: 999px;

    background:
        rgba(255,215,0,0.08);

    color: var(--accent);

    font-size: 0.85rem;
    letter-spacing: 2px;
}

.hero-content h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);

    line-height: 1.05;

    margin-bottom: 1.5rem;

    text-shadow:
        0 0 25px rgba(0,0,0,0.7);
}

.hero-description {
    font-size: 1.15rem;

    line-height: 1.8;

    color: rgba(255,255,255,0.85);

    margin-bottom: 2.5rem;

    max-width: 600px;
}

/* =========================
   HERO BUTTONS
========================= */
.hero-buttons,

.hero-btn {
    padding: 1rem 1.8rem;

    border-radius: 14px;

    text-decoration: none;

    font-size: 0.95rem;
    letter-spacing: 1px;

    transition: 0.25s ease;

    border:
        1px solid transparent;
}

/* PRIMARY */
.primary-btn {
    background:
        linear-gradient(
            135deg,
            #ffd700,
            #ffb700
        );

    color: black;

    font-weight: 700;

    box-shadow:
        0 0 20px rgba(255,215,0,0.35);
}

.primary-btn:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 0 30px rgba(255,215,0,0.55);
}

/* SECONDARY */
.secondary-btn {
    background:
        rgba(255,255,255,0.06);

    color: whitesmoke;

    border:
        1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(8px);
}

.secondary-btn:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,215,0,0.4);

    color: var(--accent);

    box-shadow:
        0 0 20px rgba(255,215,0,0.15);
}

/* =========================
   SLIDER CONTROLS
========================= */
.slider-controls {
    position: absolute;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 0.7rem;

    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.4);

    cursor: pointer;

    transition: 0.25s ease;
}

.slider-dot.active {
    background: var(--accent);

    box-shadow:
        0 0 15px var(--accent);
}

/* =========================
   SECTION HEADER
========================= */
.section-header {
    text-align: center;

    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.7rem;

    margin-bottom: 1rem;
}

.section-header p {
    opacity: 0.75;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;
}

/* =========================
   FEATURES SECTION
========================= */
.features-section {
    margin-bottom: 6rem;
}

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 2rem;
}

/* =========================
   FEATURE CARD
========================= */
.feature-card {
    position: relative;

    overflow: hidden;

    padding: 2rem;

    border-radius: 22px;

    background:
        rgba(20,20,20,0.7);

    backdrop-filter: blur(10px);

    border:
        1px solid rgba(255,255,255,0.06);

    transition: 0.3s ease;

    box-shadow:
        0 0 20px rgba(0,0,0,0.2);
}

.feature-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(255,215,0,0.2);

    box-shadow:
        0 0 35px rgba(255,215,0,0.08);
}

/* GLOW EFFECT */
.feature-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,0,0.12),
            transparent 70%
        );

    top: -60px;
    right: -60px;

    opacity: 0;

    transition: 0.4s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 2.5rem;

    margin-bottom: 1.2rem;
}

.feature-card h3 {
    margin-bottom: 1rem;

    font-size: 1.3rem;
}

.feature-card p {
    opacity: 0.78;

    line-height: 1.7;
}

/* =========================
   CTA SECTION
========================= */
.cta-section {
    margin-bottom: 4rem;
}

.cta-box {
    position: relative;

    overflow: hidden;

    text-align: center;

    padding: 5rem 2rem;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,0.12),
            rgba(255,255,255,0.03)
        );

    border:
        1px solid rgba(255,215,0,0.15);

    backdrop-filter: blur(12px);

    box-shadow:
        0 0 40px rgba(255,215,0,0.08);
}

.cta-box::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,0,0.1),
            transparent 70%
        );

    top: -150px;
    left: -100px;
}

.cta-box h2 {
    font-size: clamp(2rem, 5vw, 4rem);

    margin-bottom: 1rem;
}

.cta-box p {
    opacity: 0.8;

    margin-bottom: 2rem;

    font-size: 1.1rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {

    .hero-slider {
        height: auto;
        min-height: 80vh;
    }

    .hero-slide {
        padding: 2rem;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons,
.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    flex-shrink: 0;
}

/* IMPORTANT: stop stretching */
.cta-buttons .hero-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: auto;          /* prevents full stretch */
    min-width: 200px;     /* keeps consistent button size */
}


    .section-header h2 {
        font-size: 2rem;
    }

}

.main-container {
    background: rgba(20,20,20,0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 0 40px rgba(255,215,0,0.08);
}

/* =========================
   FEATURE CARD LINKS
========================= */
.feature-card-link {
    text-decoration: none;
    color: inherit;
    padding-bottom: 20px;
    display: block;
}

.feature-card-link:hover .feature-card {
    transform:
        translateY(-8px)
        scale(1.02);

    border-color:
        rgba(255,215,0,0.25);

    box-shadow:
        0 0 35px rgba(255,215,0,0.12);
}

/* =========================
   NEWS PAGE
========================= */
.news-page {
    width: min(1100px, 95%);
    margin: auto;

    padding: 2rem 0 5rem 0;
}

/* =========================
   HEADER
========================= */
.news-header {
    text-align: center;

    margin-bottom: 4rem;
}

.news-header h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);

    margin-bottom: 1rem;
}

.news-header p {
    opacity: 0.75;

    font-size: 1.05rem;
}

/* =========================
   POSTS CONTAINER
========================= */
.news-posts {
    display: flex;
    flex-direction: column;

    gap: 3rem;
}

/* =========================
   SINGLE POST
========================= */
.news-post {
    background:
        rgba(20,20,20,0.72);

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius: 24px;

    overflow: hidden;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 25px rgba(0,0,0,0.2);

    transition: 0.3s ease;
}

.news-post:hover {
    border-color:
        rgba(255,215,0,0.15);

    box-shadow:
        0 0 35px rgba(255,215,0,0.08);
}

/* =========================
   IMAGE
========================= */
.news-image {
    width: 100%;
    max-height: 400px;

    object-fit: cover;

    display: block;
}

/* =========================
   CONTENT
========================= */
.news-content {
    padding: 1.25rem;
}

/* =========================
   TITLE
========================= */
.news-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);

    margin-bottom: 1rem;

    line-height: 1.2;
}

/* =========================
   DATE
========================= */
.news-date {
    color: var(--accent);

    opacity: 0.8;

    margin-bottom: 2rem;

    font-size: 0.9rem;

    letter-spacing: 1px;
}

/* =========================
   BODY
========================= */
.news-body {
    text-align: left;

    line-height: 2;

    font-size: 1.05rem;

    color: rgba(255,255,255,0.88);
}

.news-body p {
    margin-bottom: 1.5rem;
}

/* =========================
   EMPTY STATE
========================= */
.empty-news {
    text-align: center;

    padding: 4rem 2rem;

    background:
        rgba(20,20,20,0.65);

    border-radius: 24px;

    border:
        1px solid rgba(255,255,255,0.06);
}

.empty-news h2 {
    margin-bottom: 1rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

    .news-content {
        padding: 1.5rem;
    }

    .news-body {
        font-size: 1rem;
        line-height: 1.8;
    }

}

/* =========================
   RULES PAGE
========================= */
.rules-page {
    width: min(1200px, 95%);
    margin: auto;

    padding-bottom: 5rem;
}

/* =========================
   HERO SECTION
========================= */
.rules-hero {
    position: relative;

    min-height: 75vh;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    overflow: hidden;

    border-radius: 30px;

    margin-bottom: 4rem;

    background:
        linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
        url("../images/home/slide2x.43930fab1367.jpg");

    background-size: cover;
    background-position: center;

    box-shadow:
        0 0 40px rgba(0,0,0,0.4);
}

.rules-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top,
            rgba(255,215,0,0.12),
            transparent 60%
        );
}

.rules-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    padding: 2rem;
}

.rules-tag {
    display: inline-block;

    padding: 0.6rem 1.2rem;

    border-radius: 999px;

    background:
        rgba(255,215,0,0.08);

    border:
        1px solid rgba(255,215,0,0.3);

    color: var(--accent);

    letter-spacing: 2px;

    margin-bottom: 2rem;
}

.rules-hero h1 {
    font-size: clamp(4rem, 9vw, 7rem);

    margin-bottom: 1rem;

    line-height: 1;
}

.rules-subtitle {
    font-size: 1.2rem;

    opacity: 0.85;

    line-height: 1.8;

    margin-bottom: 2.5rem;
}

/* =========================
   BUTTONS
========================= */
.rules-buttons {
    display: flex;
    gap: 1rem;

    justify-content: center;
    flex-wrap: wrap;
}

.rules-btn {
    text-decoration: none;

    padding: 1rem 2rem;

    border-radius: 16px;

    transition: 0.25s ease;

    font-weight: 600;

    letter-spacing: 1px;
}

.primary-btn {
    background:
        linear-gradient(
            135deg,
            #ffd700,
            #ffb700
        );

    color: black;

    box-shadow:
        0 0 20px rgba(255,215,0,0.35);
}

.primary-btn:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 0 35px rgba(255,215,0,0.55);
}

.secondary-btn {
    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.12);

    color: whitesmoke;

    backdrop-filter: blur(8px);
}

.secondary-btn:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255,215,0,0.3);

    color: var(--accent);
}

/* =========================
   QUICK NAVIGATION
========================= */
.rules-navigation {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 1rem;

    margin-bottom: 5rem;
}

.rule-nav-card {
    text-decoration: none;

    text-align: center;

    padding: 1.3rem;

    border-radius: 18px;

    background:
        rgba(20,20,20,0.75);

    border:
        1px solid rgba(255,255,255,0.06);

    color: whitesmoke;

    transition: 0.25s ease;

    backdrop-filter: blur(8px);
}

.rule-nav-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(255,215,0,0.25);

    color: var(--accent);

    box-shadow:
        0 0 25px rgba(255,215,0,0.1);
}

/* =========================
   RULE SECTIONS
========================= */
.rule-section {
    margin-bottom: 5rem;
}

.rule-section-header {
    margin-bottom: 2rem;
}

.rule-section-tag {
    color: var(--accent);

    letter-spacing: 2px;

    margin-bottom: 0.8rem;

    font-size: 0.85rem;
}

.rule-section-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;
}

/* =========================
   RULE CARD
========================= */
.rule-card {
    background:
        rgba(20,20,20,0.72);

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius: 28px;

    padding: 2.5rem;

    backdrop-filter: blur(12px);

    box-shadow:
        0 0 30px rgba(0,0,0,0.18);

    transition: 0.3s ease;
}

.rule-card:hover {
    border-color:
        rgba(255,215,0,0.15);

    box-shadow:
        0 0 40px rgba(255,215,0,0.08);
}

.rule-card p {
    line-height: 2;

    color: rgba(255,255,255,0.88);

    margin-bottom: 1.5rem;
}

.sub-rule-title {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rule-card-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
}

.rule-card-gallery:last-child {
    margin-bottom: 0;
}

.rule-card-example {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    text-align: center;
}

.rule-card-example img {
    width: 100%;
    height: 205px;
    object-fit: contain;
    border-radius: 8px;
    background: #050605;
}

.rule-inline-preview {
    grid-template-columns: repeat(auto-fit, minmax(190px, 260px));
    margin: 1rem 0 1.5rem;
}

.rule-front-back-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: center;
}

.rule-front-back-preview img {
    height: 188px;
}

.rule-card-example strong {
    color: #f5d76e;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rule-card-example span {
    color: #b8bebc;
    font-size: 0.72rem;
    line-height: 1.35;
}

.rarity-common {
    border-color: rgba(210, 210, 210, 0.22);
}

.rarity-advanced {
    border-color: rgba(68, 183, 139, 0.32);
}

.rarity-epic {
    border-color: rgba(171, 107, 255, 0.34);
}

.rarity-elite {
    border-color: rgba(255, 85, 85, 0.34);
}

.rarity-legend {
    border-color: rgba(245, 215, 110, 0.42);
}

/* =========================
   RULES LIST
========================= */
.rules-list {
    padding-left: 1.5rem;
}

.rules-list li {
    margin-bottom: 1rem;

    line-height: 1.8;

    color: rgba(255,255,255,0.88);
}

/* =========================
   HIGHLIGHT BOX
========================= */
.rule-highlight {
    margin: 2rem 0;

    padding: 2rem;

    border-radius: 22px;

    background:
        rgba(255,215,0,0.06);

    border:
        1px solid rgba(255,215,0,0.15);
}

.rule-highlight h3 {
    margin-bottom: 1rem;

    color: var(--accent);
}

/* =========================
   WARNING BOX
========================= */
.rule-warning {
    margin-top: 2rem;

    padding: 2rem;

    border-radius: 22px;

    background:
        rgba(255,120,0,0.08);

    border:
        1px solid rgba(255,170,0,0.2);
}

.rule-warning h3 {
    color: #ffcc66;

    margin-bottom: 1rem;
}

.rule-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.rule-mode-box {
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
}

.rule-mode-box h3 {
    margin-bottom: 0.9rem;
    color: var(--accent);
}

.rule-mode-box p {
    margin-bottom: 0;
}

.energy-intro-open {
    overflow: hidden;
}

.energy-intro-modal[hidden] {
    display: none;
}

.energy-intro-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.energy-intro-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
}

.energy-intro-card {
    position: relative;
    width: min(560px, 100%);
    padding: 2rem;
    border: 1px solid rgba(255,215,0,0.28);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(26,26,26,0.98), rgba(8,10,18,0.98));
    box-shadow: 0 28px 80px rgba(0,0,0,0.45), 0 0 34px rgba(255,215,0,0.12);
    color: #fff;
}

.energy-intro-kicker {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.energy-intro-card h2 {
    margin-bottom: 0.85rem;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
}

.energy-intro-card p,
.energy-intro-card li {
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
}

.energy-intro-card ul {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.energy-intro-card li {
    margin-bottom: 0.55rem;
}

.energy-intro-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

.energy-intro-link,
.energy-intro-button {
    border: 1px solid rgba(255,215,0,0.35);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.energy-intro-link {
    color: var(--accent);
    background: transparent;
}

.energy-intro-button {
    color: #101010;
    background: var(--accent);
    cursor: pointer;
}

/* =========================
   CARD CLASSES
========================= */
.classes-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 1.5rem;
}

.class-card {
    padding: 2rem;

    text-align: center;

    border-radius: 22px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(20,20,20,0.72);

    transition: 0.25s ease;
}

.class-card:hover {
    transform:
        translateY(-6px);
}

.class-card h3 {
    margin-bottom: 1rem;
}

.common {
    border-color: rgba(180,180,180,0.3);
}

.advanced {
    border-color: rgba(0,140,255,0.3);
}

.epic {
    border-color: rgba(180,0,255,0.3);
}

.elite {
    border-color: rgba(255,80,80,0.3);
}

.legend {
    border-color: rgba(255,215,0,0.4);
}

/* =========================
   POINTS GRID
========================= */
.points-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 1rem;

    margin-top: 2rem;
}

.point-item {
    padding: 1.5rem;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    text-align: center;
}

.point-item span {
    display: block;

    margin-bottom: 0.5rem;

    opacity: 0.75;
}

.point-item strong {
    font-size: 1.4rem;

    color: var(--accent);
}

/* =========================
   FINAL CTA
========================= */
.rules-cta {
    margin-top: 6rem;
}

.rules-cta-box {
    text-align: center;

    padding: 5rem 2rem;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,0.08),
            rgba(255,255,255,0.03)
        );

    border:
        1px solid rgba(255,215,0,0.12);

    box-shadow:
        0 0 40px rgba(255,215,0,0.06);
}

.rules-cta-box h2 {
    font-size: clamp(2rem, 6vw, 4rem);

    margin-bottom: 1rem;
}

.rules-cta-box p {
    opacity: 0.8;

    margin-bottom: 2rem;

    line-height: 1.8;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {

    .rules-hero {
        min-height: 65vh;
    }

    .rule-card {
        padding: 1.5rem;
    }

    .rules-buttons {
        flex-direction: column;
        align-items: center;
    }

    .rules-btn {
        min-width: 220px;

        text-align: center;
    }

}

/* =========================
   DECK BUILDER
========================= */

.deck-builder-page {

    width: min(1600px, 96%);
    margin: auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);

    gap: 1.25rem;

    padding: 2rem 0 4rem;
}

/* =========================
   PANELS
========================= */

.collection-panel,
.deck-panel {

    background: rgba(20,20,20,0.78);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 18px;

    padding: 1.25rem;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 30px rgba(0,0,0,0.25);
}

/* =========================
   HEADERS
========================= */

.panel-header h1,
.deck-header h2 {

    font-size: 1.7rem;

    margin-bottom: 0.5rem;
}

.panel-header p {

    opacity: 0.75;
}

.saved-decks-panel {

    margin-top: 1rem;

    padding: 0.85rem;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    background: rgba(255,255,255,0.03);
}

.saved-decks-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.65rem;
}

.saved-decks-header h2 {

    font-size: 1rem;

    margin: 0;
}

.saved-decks-actions {

    display: flex;

    align-items: center;

    gap: 0.5rem;
}

.saved-decks-actions span {

    color: #ffd700;

    font-size: 0.78rem;
}

#new-deck-btn {

    border: 1px solid rgba(255,215,0,0.35);

    border-radius: 8px;

    background: transparent;

    color: #ffd700;

    padding: 0.35rem 0.55rem;

    cursor: pointer;
}

.saved-decks-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 0.65rem;
}

.saved-deck-btn {

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 8px;

    background: rgba(0,0,0,0.18);

    color: white;

    padding: 0.75rem;

    cursor: pointer;

    text-align: left;

    transition: 0.2s ease;
}

.saved-deck-title,
.saved-deck-count {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.saved-deck-title {

    color: #fff;

    font-size: 0.86rem;

    font-weight: 700;
}

.saved-deck-count {

    margin-top: 0.25rem;

    color: rgba(255,255,255,0.62);

    font-size: 0.65rem;

    font-weight: 700;
}

.saved-deck-score-panel {

    margin-top: 0.7rem;

    padding-top: 0.65rem;

    border-top: 1px solid rgba(255,255,255,0.08);
}

.saved-deck-overall {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.55rem;

    padding: 0.5rem 0.6rem;

    border: 1px solid rgba(255,215,0,0.22);

    border-radius: 8px;

    background: rgba(255,215,0,0.08);
}

.saved-deck-overall span {

    color: rgba(255,255,255,0.74);

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.saved-deck-overall strong {

    color: #ffd700;

    font-family: 'Orbitron', sans-serif;

    font-size: 1rem;
}

.deck-score-low {
    color: #ff5d5d !important;
}

.deck-score-good {
    color: #67d984 !important;
}

.deck-score-great {
    color: #f5d76e !important;
}

.saved-deck-averages {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.4rem;

    color: white;
}

.saved-deck-averages span {

    display: flex;

    flex-direction: column;

    gap: 0.12rem;

    min-width: 0;

    padding: 0.4rem 0.45rem;

    border-radius: 7px;

    background: rgba(255,255,255,0.055);

    color: rgba(255,255,255,0.9);

    font-family: 'Orbitron', sans-serif;

    font-size: 0.78rem;

    font-weight: 700;
}

.saved-deck-averages small {

    overflow: hidden;

    color: rgba(255,255,255,0.54);

    font-family: inherit;

    font-size: 0.52rem;

    font-weight: 600;

    text-overflow: ellipsis;

    text-transform: uppercase;

    white-space: nowrap;
}

.saved-deck-btn:hover,
.saved-deck-btn.active {

    border-color: rgba(255,215,0,0.45);

    background: rgba(255,215,0,0.08);
}

.empty-saved-decks {

    opacity: 0.58;

    font-size: 0.8rem;
}

/* =========================
   SAVED DECK ITEM (wrapper)
========================= */
.saved-deck-item {

    display: flex;

    align-items: stretch;

    gap: 0.25rem;
}

.saved-deck-item .saved-deck-btn {

    flex: 1;

    min-width: 0;
}

/* =========================
   DELETE DECK BUTTON
========================= */
.delete-deck-btn {

    border: 1px solid rgba(255, 80, 80, 0.25);

    border-radius: 8px;

    background: rgba(255, 50, 50, 0.08);

    color: rgba(255, 100, 100, 0.85);

    padding: 0.55rem 0.45rem;

    cursor: pointer;

    font-size: 0.75rem;

    transition: 0.2s ease;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;
}

.delete-deck-btn:hover {

    background: rgba(255, 50, 50, 0.2);

    border-color: rgba(255, 80, 80, 0.5);

    color: rgba(255, 120, 120, 1);
}

.delete-deck-btn:active {

    transform: scale(0.95);
}

/* =========================
   COLLECTION GRID
========================= */

/* =========================
   COLLECTION GRID
========================= */

.collection-grid {

    margin-top: 1.5rem;

    display: grid;

    grid-template-columns:
        repeat(auto-fill, 150px);

    justify-content: start;

    gap: 0.3rem;
}

/* =========================
   CARD
========================= */

.builder-card {

    background: rgba(255,255,255,0.03);

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.05);

    transition: 0.25s ease;

    position: relative;

    width: 150px;

    height: 340px;

    margin: auto;

    display: flex;

    flex-direction: column;
}

.builder-card:hover {

    transform:
        translateY(-4px)
        scale(1.02);

    border-color:
        rgba(255,215,0,0.25);

    box-shadow:
        0 0 20px rgba(255,215,0,0.1);
}

/* =========================
   CARD IMAGE
========================= */

.builder-card img {

    width: 100%;

    height: 210px;

    object-fit: cover;

    flex-shrink: 0;
}

/* =========================
   CARD INFO
========================= */

.builder-card-info {

    padding: 0.7rem;

    height: 75px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;
}

.builder-card-info h3 {

    font-size: 0.8rem;

    line-height: 1.2;

    overflow: hidden;

    display: -webkit-box;

    

    -webkit-box-orient: vertical;
}

.builder-card-info p {

    opacity: 0.7;

    font-size: 0.72rem;

    margin-top: 0.3rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* =========================
   BUTTON
========================= */

.add-card-btn {

    width: calc(100% - 1rem);

    margin: auto 0.5rem 0.5rem;

    border: none;

    border-radius: 10px;

    padding: 0.55rem;

    min-height: 38px;

    background:
        linear-gradient(
            135deg,
            #ffd700,
            #ffb700
        );

    color: black;

    font-size: 0.78rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;

    flex-shrink: 0;
}

/* =========================
   DISABLED BUTTON
========================= */

.disabled-btn {

    background: rgba(255,255,255,0.08);

    color: rgba(255,255,255,0.45);

    cursor: not-allowed;

    box-shadow: none;
}

.disabled-btn:hover {

    transform: none;

    box-shadow: none;
}
/* =========================
   DECK HEADER
========================= */

.deck-header {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    flex-shrink: 0;
}

.deck-name-input {

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 10px;

    padding: 0.65rem 0.75rem;

    color: white;

    outline: none;
}

/* =========================
   STATS
========================= */

.deck-stats {

    margin-top: 0.85rem;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0.45rem;

    flex-shrink: 0;
}

.stat-box {

    background: rgba(255,255,255,0.04);

    border-radius: 8px;

    padding: 0.45rem 0.3rem;

    text-align: center;
}

.stat-box span {

    display: block;

    opacity: 0.7;

    margin-bottom: 0.2rem;

    font-size: 0.65rem;
}

.stat-box strong {

    font-size: 0.85rem;

    color: #ffd700;
}

/* =========================
   DECK AREA
========================= */

.deck-cards-area {

    margin-top: 0.85rem;

    min-height: 0;

    border-radius: 12px;

    border: 2px dashed rgba(255,255,255,0.08);

    padding: 0.55rem;

    overflow-y: auto;

    flex: 1;
}

.empty-text {

    opacity: 0.55;

    text-align: center;

    margin-top: 2rem;
}

/* =========================
   ERRORS
========================= */

.deck-errors {

    margin-top: 0.65rem;

    flex-shrink: 0;
}

#deck-errors-list {

    color: #ff7070;

    padding-left: 1.3rem;
}

#deck-errors-list.success {

    color: #81dbb8;
}

/* =========================
   SAVE BUTTON
========================= */

.save-deck-btn {

    width: 100%;

    margin-top: 0.85rem;

    padding: 0.75rem;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #ffd700,
            #ffb700
        );

    color: black;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;
}

.save-deck-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 0 25px rgba(255,215,0,0.3);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .deck-builder-page {

        grid-template-columns: 1fr;
    }

    .deck-panel {

        position: static;

        max-height: none;

        overflow: visible;
    }

}

@media (max-width: 700px) {

    .collection-grid {

        grid-template-columns:
            repeat(auto-fill, minmax(140px, 1fr));
    }

    .deck-header {

        flex-direction: column;
        align-items: stretch;
    }

}

/* =========================
   DECK CARDS AREA
========================= */

.deck-cards-area {

    margin-top: 0.85rem;

    min-height: 0;

    border-radius: 12px;

    border: 2px dashed rgba(255,255,255,0.08);

    padding: 0.55rem;

    overflow-y: auto;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));

    gap: 0.35rem;

    align-content: flex-start;
}

/* =========================
   MINI CARD
========================= */

.deck-mini-card {

    width: 100%;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 7px;

    overflow: hidden;

    position: relative;

    transition: 0.2s ease;

    min-width: 0;
}

.deck-mini-card:hover {

    transform: translateY(-3px);

    border-color: rgba(255,215,0,0.25);
}

/* =========================
   MINI IMAGE
========================= */

.deck-mini-card img {

    width: 100%;

    height: 68px;

    object-fit: cover;

    display: block;
}

/* =========================
   MINI INFO
========================= */

.deck-mini-info {

    display: none;
}

.deck-mini-info h4 {

    font-size: 0.72rem;

    line-height: 1.2;

    margin-bottom: 0.25rem;

    overflow: hidden;

    display: -webkit-box;


    -webkit-box-orient: vertical;
}

.deck-mini-info p {

    font-size: 0.65rem;

    opacity: 0.65;

    text-transform: capitalize;
}

/* =========================
   REMOVE BUTTON
========================= */

.remove-card-btn {

    position: absolute;

    top: 3px;
    right: 3px;

    width: 18px;
    height: 18px;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,0.75);

    color: white;

    cursor: pointer;

    font-size: 0.6rem;

    transition: 0.2s ease;
}

.remove-card-btn:hover {

    background: crimson;

    transform: scale(1.08);
}

/* dimmed overlay */
.builder-card .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: 0.2s ease;
}

/* when card is selected */
.builder-card.selected {
    border: 2px solid #4caf50;
    transform: scale(1.02);
}

/* already used card (duplicate prevention) */
.builder-card.used {
    opacity: 0.4;
}

/* locked due to rule limit */
.builder-card.locked {
    opacity: 0.25;
    filter: grayscale(1);
    pointer-events: none;
}

.builder-card.locked .card-overlay {
    background: rgba(0,0,0,0.4);
}

.deck-cards-area .builder-card {
    display: none !important;
}

.deck-panel {

    position: sticky;

    top: 1rem;

    align-self: start;

    max-height: calc(100vh - 2rem);

    overflow: hidden;

    display: flex;

    flex-direction: column;
}

@media (max-width: 900px) {

    .deck-panel {

        position: static;

        max-height: none;

        overflow: visible;
    }
}

/* =========================
   COLLECTION DASHBOARD
========================= */

.cards-section .collection-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
    padding: 1.4rem;
    border: 1px solid rgba(255,215,0,0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,255,255,0.035)),
        rgba(20,20,20,0.82);
    box-shadow:
        0 0 30px rgba(0,0,0,0.3),
        inset 0 0 18px rgba(255,215,0,0.04);
    backdrop-filter: blur(10px);
}

.cards-section .collection-eyebrow {
    color: #f5d76e;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.cards-section .collection-hero h1 {
    color: white;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
}

.cards-section .collection-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 0.75rem;
}

.collection-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.2rem;
    flex-wrap: wrap;
}

.collection-action-btn,
.evolve-card-btn {
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5d76e, #c9a227);
    color: #111;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0;
    transition: 0.2s ease;
}

.collection-action-btn {
    padding: 0.75rem 1rem;
}

.collection-action-btn.secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
}

.collection-actions span {
    color: rgba(255,255,255,0.68);
    font-size: 0.86rem;
}

.collection-icon-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
    vertical-align: middle;
}

.collection-icon-value img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.collection-messages {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.collection-messages p {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.collection-messages .success {
    border: 1px solid rgba(68,183,139,0.4);
    background: rgba(68,183,139,0.14);
}

.collection-messages .error {
    border: 1px solid rgba(224,68,68,0.42);
    background: rgba(224,68,68,0.14);
}

.cards-section .collection-summary div,
.cards-section .collection-stat-card {
    border: 1px solid rgba(255,215,0,0.12);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
        rgba(9,9,9,0.72);
}

.cards-section .collection-summary div {
    padding: 0.9rem 1rem;
}

.cards-section .collection-summary span,
.cards-section .collection-stat-top span {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
}

.cards-section .collection-summary strong {
    display: block;
    margin-top: 0.35rem;
    color: #f5d76e;
    font-size: 1rem;
}

.cards-section .collection-summary strong.collection-icon-value {
    display: inline-flex;
    min-height: 28px;
}

.cards-section .collection-summary small {
    display: block;
    margin-top: 0.18rem;
    color: rgba(255,255,255,0.52);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.cards-section .collection-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cards-section .collection-stat-card {
    padding: 0.9rem;
    box-shadow: 0 0 22px rgba(0,0,0,0.18);
    color: white;
    cursor: pointer;
    text-align: left;
    transition: 0.2s ease;
}

.cards-section .collection-stat-card:hover,
.cards-section .collection-stat-card.active {
    border-color: rgba(255,215,0,0.45);
    background:
        linear-gradient(180deg, rgba(255,215,0,0.12), rgba(255,255,255,0.025)),
        rgba(9,9,9,0.78);
    transform: translateY(-2px);
}

.cards-section .collection-stat-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.cards-section .collection-stat-top strong {
    color: #f5d76e;
    font-size: 0.85rem;
}

.cards-section .collection-stat-count {
    margin-top: 0.45rem;
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
}

.cards-section .collection-stat-bar {
    height: 7px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.cards-section .collection-stat-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5d76e, #c9a227);
    box-shadow: 0 0 12px rgba(245,215,110,0.35);
}

.collection-card-hidden {
    display: none !important;
}

.collection-default-hidden {
    display: none;
}

.cards-section #collection-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.85rem;
    padding: 0;
}

@media (min-width: 1200px) {
    .cards-section #collection-card-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.cards-section .collection-card {
    max-width: none;
    height: 278px;
}

.cards-section .collection-card .card-front,
.cards-section .collection-card .card-back {
    border-width: 1px;
    border-radius: 8px;
}

.cards-section .collection-card .card-image {
    position: relative;
    min-height: 0;
    background: #090909;
}

.cards-section .collection-card.collection-trade-locked .card-front {
    border-color: rgba(190, 82, 70, 0.72);
    box-shadow: 0 0 0 1px rgba(190, 82, 70, 0.18);
}

.cards-section .collection-lock-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 199, 89, 0.75);
    border-radius: 50%;
    background: rgba(10, 10, 8, 0.88);
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

.cards-section .collection-lock-icon:before {
    content: "";
    width: 11px;
    height: 8px;
    margin-top: 5px;
    border-radius: 2px;
    background: #f2d06b;
}

.cards-section .collection-lock-icon:after {
    content: "";
    position: absolute;
    top: 5px;
    width: 10px;
    height: 9px;
    border: 2px solid #f2d06b;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.cards-section .collection-card .card-info {
    width: 100%;
    min-height: 82px;
    height: auto;
    gap: 0.36rem;
    padding: 0.55rem;
    background: rgba(7,7,7,0.94);
}

.cards-section .collection-card .card-name {
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.22;
}

.cards-section .collection-card .card-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-width: 0;
}

.cards-section .collection-card .card-name-row .card-name {
    min-width: 0;
    margin: 0;
}

.cards-section .card-info-menu {
    position: relative;
    z-index: 15;
    display: inline-block;
    margin-left: 0;
    vertical-align: middle;
}

.cards-section .collection-card:has(.card-info-menu[open]),
.cards-section .collection-card:has(.card-info-menu[open]) .card-inner,
.cards-section .collection-card:has(.card-info-menu[open]) .card-front,
.cards-section .collection-card:has(.card-info-menu[open]) .card-info {
    overflow: visible;
    z-index: 60;
}

.cards-section .card-info-menu summary {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(245,215,110,0.65);
    border-radius: 50%;
    background: #11150f;
    color: #f5d76e;
    font: 800 0.7rem Arial, sans-serif;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.cards-section .card-info-menu summary::-webkit-details-marker {
    display: none;
}

.cards-section .collection-card.flipped .card-info-menu {
    display: none;
}

.cards-section .card-info-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    z-index: 40;
    display: grid;
    gap: 0.55rem;
    width: min(300px, 84vw);
    padding: 0.65rem;
    border: 1px solid #3f4d42;
    border-radius: 8px;
    background: #080d0a;
    box-shadow: 0 18px 36px rgba(0,0,0,0.55);
    transform: translateX(-50%);
    text-align: left;
}

.cards-section .card-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0;
}

.cards-section .card-mini-stats div {
    display: grid;
    gap: 0.12rem;
    padding: 0.35rem;
    border: 1px solid #26342b;
    border-radius: 5px;
    background: #101712;
}

.cards-section .card-mini-stats dt {
    color: #78877e;
    font-size: 0.52rem;
    text-transform: uppercase;
}

.cards-section .card-mini-stats dd {
    margin: 0;
    color: #e0d18a;
    font: 800 0.68rem 'Orbitron', sans-serif;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cards-section .card-info-note {
    margin: -0.1rem 0 0;
    color: #9aa59e;
    font-size: 0.58rem;
    line-height: 1.35;
}

.cards-section .card-skin-list {
    display: grid;
    gap: 0.35rem;
}

.cards-section .card-skin-list > strong,
.cards-section .card-skin-empty {
    color: #8a968e;
    font-size: 0.58rem;
    text-transform: uppercase;
}

.cards-section .card-skin-empty {
    margin: 0;
}

.cards-section .card-skin-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    margin: 0;
}

.cards-section .card-skin-row img {
    width: 32px;
    aspect-ratio: 2.5 / 3.5;
    object-fit: contain;
    border-radius: 3px;
    background: #050705;
}

.cards-section .card-skin-row span {
    min-width: 0;
    color: #d7ded9;
    font-size: 0.62rem;
}

.cards-section .card-skin-row button {
    padding: 0.32rem 0.42rem;
    border: 1px solid #b99735;
    border-radius: 4px;
    background: #b99735;
    color: #080a08;
    font: 800 0.52rem 'Orbitron', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.cards-section .card-skin-row button:disabled {
    border-color: #3d463f;
    background: #1b211d;
    color: #69746c;
    cursor: default;
}

.cards-section .collection-card .card-number-row {
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cards-section .collection-card .card-number {
    color: #f5d76e;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.collection-owned-badge {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(68,183,139,0.42);
    border-radius: 999px;
    background: rgba(68,183,139,0.12);
    color: #81dbb8;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.collection-evolution-badge {
    align-self: center;
}

.support-card-owned-badge {
    align-self: center;
    margin-top: auto;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    color: rgba(255,255,255,0.62);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

.support-card-owned-badge.owned {
    border-color: rgba(68,183,139,0.42);
    background: rgba(68,183,139,0.12);
    color: #81dbb8;
}

.database-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.1rem 0 1.5rem;
}

.database-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255,215,0,0.28);
    border-radius: 8px;
    background: rgba(255,215,0,0.08);
    color: #f5d76e;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.database-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin: 1.1rem 0 1rem;
}

.database-search {
    display: grid;
    grid-template-columns: auto minmax(220px, 420px) auto;
    align-items: center;
    justify-content: start;
    gap: 0.7rem;
    margin: 0;
}

.database-sort {
    display: grid;
    gap: 0.35rem;
}

.database-search label,
.database-sort label {
    color: rgba(255,255,255,0.68);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.database-search input,
.database-sort select {
    min-height: 42px;
    border: 1px solid rgba(255,215,0,0.24);
    border-radius: 8px;
    background: #101010;
    color: #fff;
    padding: 0 0.85rem;
    font-size: 0.9rem;
}

.database-search span {
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
}

.database-section {
    margin-top: 1.5rem;
}

.database-section-hidden,
.database-card-hidden {
    display: none !important;
}

.database-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.7rem;
}

.database-section-header h2 {
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
}

.database-section-header span {
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
}

.database-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
}

.player-database-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
}

.database-card {
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,215,0,0.14);
    border-radius: 8px;
    background: rgba(0,0,0,0.24);
}

.database-card.is-clickable {
    cursor: pointer;
}

.database-card.is-clickable:hover {
    border-color: rgba(255,215,0,0.46);
    box-shadow: 0 0 18px rgba(255,215,0,0.16);
}

.database-card-link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.database-card-image {
    aspect-ratio: 2.5 / 3.5;
    background: #090909;
    max-height: 230px;
}

.database-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.database-card.is-unowned .database-card-image img {
    filter: grayscale(1);
    opacity: 0.5;
}

.database-card-body {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 0.75rem;
}

.database-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.database-card-top span {
    color: rgba(255,255,255,0.54);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.database-card-top strong {
    color: #f5d76e;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
}

.database-card h3 {
    margin: 0;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.25;
}

.database-card p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.66rem;
    line-height: 1.45;
}

.database-player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.database-player-meta span {
    padding: 0.12rem 0.32rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.database-evolution-badge {
    justify-self: start;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(129,219,184,0.42);
    border-radius: 999px;
    background: rgba(68,183,139,0.12);
    color: #81dbb8;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cards-section .has-card-versions .card-front,
.cards-section .has-card-versions .card-back {
    border-color: #44B78B;
    box-shadow:
        inset 0 0 16px rgba(68,183,139,0.16),
        0 0 16px rgba(68,183,139,0.2);
}

.card-version-preview {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 25;
    width: max-content;
    max-width: 340px;
    padding: 0.65rem;
    border: 1px solid rgba(68,183,139,0.45);
    border-radius: 10px;
    background: rgba(10,10,10,0.96);
    box-shadow: 0 14px 28px rgba(0,0,0,0.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: 0.2s ease;
}

.has-card-versions:hover .card-version-preview {
    opacity: 1;
    transform: translate(-50%, 0);
}

.card-version-preview > span {
    display: block;
    margin-bottom: 0.5rem;
    color: #81dbb8;
    font-size: 0.72rem;
    text-align: center;
    white-space: nowrap;
}

.card-version-stack {
    display: flex;
    gap: 0.45rem;
}

.card-version-thumb {
    width: 58px;
}

.card-version-thumb img {
    width: 100%;
    height: 82px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    display: block;
}

.card-version-thumb small {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.62rem;
    text-align: center;
}

.evolve-card-form {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.55rem;
    border: 1px solid rgba(245,215,110,0.28);
    border-radius: 8px;
    background: rgba(5,5,5,0.86);
}

.evolve-card-btn {
    min-height: 36px;
}

.evolve-card-btn:disabled {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.42);
    cursor: not-allowed;
}

.evolve-card-form span {
    color: rgba(255,255,255,0.68);
    font-size: 0.7rem;
    text-align: center;
}

.empty-evolution-state {
    grid-column: 1 / -1;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    text-align: center;
}

.empty-evolution-state h2 {
    color: #f5d76e;
    margin-bottom: 0.5rem;
}

.empty-evolution-state p {
    color: rgba(255,255,255,0.68);
}

.evolution-reveal-overlay {
    z-index: 10000;
}

.evolution-reveal-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    max-width: min(92vw, 360px);
    padding: 1rem;
    border: 1px solid rgba(245, 215, 110, 0.28);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 12%, rgba(245, 215, 110, 0.15), rgba(8, 8, 8, 0.92) 62%);
    overflow: hidden;
}

.evolution-reveal-card img {
    width: min(270px, 72vw);
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(0,0,0,0.55);
    transition: transform 0.45s ease, filter 0.45s ease;
}

.evolution-reveal-card.is-evolving img {
    transform: scale(1.06);
    filter: brightness(2.4) saturate(1.45);
}

.evolution-reveal-card.is-evolved img {
    animation: evolvedCardArrive 0.55s ease both;
}

.evolution-flash {
    position: absolute;
    inset: -25%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(245,215,110,0.5) 34%, transparent 64%);
}

.evolution-reveal-card.is-evolving .evolution-flash {
    animation: evolutionFlash 0.7s ease-out forwards;
}

.evolution-reveal-instruction,
.evolution-reveal-result {
    position: relative;
    z-index: 3;
    margin: 0;
    color: #f5d76e;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    text-align: center;
    text-transform: none;
}

.evolution-reveal-instruction {
    font-size: 0.95rem;
}

.evolution-reveal-result {
    color: #fff2b8;
    font-size: 0.9rem;
    line-height: 1.4;
}

@keyframes evolutionFlash {
    0% { opacity: 0; transform: scale(0.55) rotate(0deg); }
    35% { opacity: 1; transform: scale(1) rotate(10deg); }
    100% { opacity: 0; transform: scale(1.55) rotate(20deg); }
}

@keyframes evolvedCardArrive {
    0% { transform: scale(0.92); filter: brightness(1.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 760px) {
    .cards-section .collection-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .cards-section .collection-summary {
        grid-template-columns: 1fr;
    }

    .database-controls,
    .database-search {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .database-search input,
    .database-sort select {
        width: 100%;
    }
}

.world-champion{
    position: relative;
    padding: 30px;
    border-radius: 18px;

    border: 2px solid #d4af37;

    background:
        linear-gradient(
            rgba(212,175,55,.08),
            rgba(212,175,55,.02)
        );

    box-shadow:
        0 0 18px rgba(212,175,55,.25),
        inset 0 0 12px rgba(212,175,55,.08);
}

.champion-name{
    color:#d4af37;
    text-shadow:
        0 0 8px rgba(212,175,55,.5),
        0 1px 0 #fff3;
}

.world-champion::before,
.world-champion::after{
    content:"";
    position:absolute;
    width:28px;
    height:28px;
    border-color:#d4af37;
    border-style:solid;
}

.world-champion::before{
    top:10px;
    left:10px;
    border-width:3px 0 0 3px;
    border-radius:10px 0 0 0;
}

.world-champion::after{
    bottom:10px;
    right:10px;
    border-width:0 3px 3px 0;
    border-radius:0 0 10px 0;
}

.champion-title{
    margin:8px 0 18px;

    color:#d4af37;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.9rem;
}

.error-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.error-card {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.1), rgba(201, 162, 39, 0.1));
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 16px;
    padding: 3rem;
}

.error-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: #f5d76e;
    margin-bottom: 1rem;
}

.error-message {
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #f5d76e, #c9a227);
    color: #111;
    box-shadow: 0 4px 15px rgba(245, 215, 110, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 215, 110, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.btn-secondary:hover {
    background: rgba(201, 162, 39, 0.15);
    border-color: #c9a227;
}

/* ─── Reset / base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --gold:    #f5d76e;
  --gold-dk: #c9a227;
  --green:   #44b78b;
  --red:     #e04444;
  --felt:    #1a3a2a;
  --felt-hi: #21482f;
  --rim:     #2e5e3e;
  --ink:     #111;
  --glass:   rgba(20,20,20,0.82);
}

/* ─── Outer wrap ──────────────────────────────────────────────── */
.bv-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 1rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  gap: 0;
}

/* ─── Top bar ─────────────────────────────────────────────────── */
.bv-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(245,215,110,0.12);
}
.bv-topbar-left { display: flex; align-items: baseline; gap: 0.4rem; }
.bv-round-label { color: rgba(255,255,255,0.42); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .1em; }
.bv-round-num   { color: var(--gold); font-family: 'Orbitron', sans-serif; font-size: 1.5rem; }
.bv-topbar-center { text-align: center; }
.bv-game-title  { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: var(--gold); letter-spacing: .15em; text-transform: uppercase; }
.bv-topbar-right { text-align: right; }
.bv-mode-badge  { background: rgba(245,215,110,0.1); border: 1px solid rgba(245,215,110,0.25); border-radius: 999px; color: var(--gold); font-size: 0.7rem; padding: 0.3rem 0.75rem; text-transform: uppercase; }

/* ─── Error bar ───────────────────────────────────────────────── */
.bv-error-bar {
  background: rgba(224,68,68,.15);
  border: 1px solid rgba(224,68,68,.35);
  border-radius: 8px;
  color: #ff8080;
  padding: 0.7rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* ─── Game Over ───────────────────────────────────────────────── */
.bv-gameover { display: flex; justify-content: center; align-items: center; flex: 1; padding: 4rem 1rem; }
.bv-gameover-inner { text-align: center; max-width: 520px; background: var(--glass); border: 1px solid rgba(245,215,110,0.2); border-radius: 20px; padding: 3rem 2rem; }
.bv-gameover-trophy { font-size: 4rem; margin-bottom: 0.75rem; }
.bv-gameover-title  { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: 2rem; margin-bottom: 0.5rem; }
.bv-gameover-winner { color: #fff; font-size: 1.2rem; margin-bottom: 2rem; }
.bv-gameover-scores { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.bv-go-score        { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0.75rem 1.25rem; min-width: 90px; }
.bv-go-score.human  { border-color: rgba(68,183,139,.4); }
.bv-go-name         { display: block; color: rgba(255,255,255,.65); font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.3rem; }
.bv-go-pts          { display: block; color: var(--gold); font-family: 'Orbitron', sans-serif; font-size: 1.8rem; }
.bv-btn             { display: inline-block; padding: 0.85rem 2rem; border-radius: 8px; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; border: none; transition: all .2s ease; }
.bv-btn-gold        { background: linear-gradient(135deg, var(--gold), var(--gold-dk)); color: var(--ink); box-shadow: 0 4px 15px rgba(245,215,110,.3); }
.bv-btn-gold:hover  { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(245,215,110,.5); }

/* ─── Arena grid ──────────────────────────────────────────────── */
.bv-arena {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ".      top    ."
    "left   table  right"
    ".      bottom .";
  gap: 0.75rem;
  flex: 1;
  align-items: start;
}

/* ─── AI Seats ────────────────────────────────────────────────── */
.bv-seat {
  background: var(--glass);
  border: 1px solid rgba(245,215,110,0.1);
  border-radius: 14px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.bv-seat-top   { grid-area: top; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.bv-seat-left  { grid-area: left; }
.bv-seat-right { grid-area: right; }

.bv-seat-label { font-size: 0.7rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.bv-seat-score { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #fff; }
.bv-seat-score span { font-size: 0.65rem; color: rgba(255,255,255,.5); }

/* AI card backs fanned in hand */
.bv-ai-hand { display: flex; gap: -4px; flex-wrap: wrap; justify-content: center; gap: 3px; }
.bv-ai-hand--vert { flex-direction: column; }
.bv-cb { width: 26px; height: 36px; border-radius: 4px; background: linear-gradient(135deg, #2a4a6e, #1a2e48); border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
.bv-card-overflow { display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: rgba(255,255,255,.6); background: rgba(0,0,0,.3); }

.bv-ai-counts { display: flex; gap: 0.5rem; font-size: 0.65rem; color: rgba(255,255,255,.45); flex-wrap: wrap; justify-content: center; }
.bv-deck-count { color: rgba(255,255,255,.3); }

/* ─── Felt Table ─────────────────────────────────────────────── */
.bv-table {
  grid-area: table;
  background: radial-gradient(ellipse at center, var(--felt-hi) 0%, var(--felt) 70%);
  border: 4px solid var(--rim);
  border-radius: 50% / 30%;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.5),
    0 0 40px rgba(0,0,0,.6),
    0 0 0 8px rgba(20,20,20,.8);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.bv-table::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: inherit;
  pointer-events: none;
}

.bv-table-felt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}

/* Event label in table center */
.bv-table-event {
  text-align: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(245,215,110,.15);
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
}
.bv-event-eyebrow { font-size: 0.6rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .12em; }
.bv-event-name    { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: 1.2rem; margin: 0.2rem 0; }
.bv-event-rule    { font-size: 0.72rem; color: rgba(255,255,255,.55); }

/* Played cards on the table */
.bv-table-played {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.bv-played-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 0.5rem;
  min-width: 90px;
}
.bv-played-slot.is-human { border-color: rgba(68,183,139,.35); }
.bv-played-who   { font-size: 0.62rem; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.bv-played-cards { display: flex; gap: 4px; justify-content: center; }
.bv-played-card  { position: relative; border-radius: 6px; overflow: hidden; width: 52px; border: 1px solid rgba(255,255,255,.1); transition: box-shadow .2s; }
.bv-played-card.winner { border-color: var(--gold); box-shadow: 0 0 10px rgba(245,215,110,.55); }
.bv-played-card img { width: 100%; height: 68px; object-fit: cover; display: block; }
.bv-played-card-name  { font-size: 0.5rem; color: #fff; text-align: center; padding: 1px 2px; background: rgba(0,0,0,.6); line-height: 1.2; }
.bv-played-card-score { font-size: 0.55rem; color: var(--gold); text-align: center; padding: 1px 2px; background: rgba(0,0,0,.4); font-weight: bold; }
.bv-played-total { font-size: 0.65rem; color: rgba(255,255,255,.65); }
.bv-played-total strong { color: var(--gold); }

.bv-table-waiting { color: rgba(255,255,255,.3); font-style: italic; font-size: 0.85rem; }

/* ─── Player Bottom Seat ─────────────────────────────────────── */
.bv-seat-bottom {
  grid-area: bottom;
  background: rgba(10,10,10,.88);
  border: 1px solid rgba(68,183,139,.25);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bv-seat-score-human {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.bv-you-label { color: var(--green); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .1em; }
.bv-you-pts   { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: var(--gold); }

/* Hand area */
.bv-hand-area form { display: flex; flex-direction: column; gap: 0.65rem; }
.bv-hand-label     { font-size: 0.68rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .09em; }
.bv-hand-label strong { color: var(--gold); }

.bv-hand-cards {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,215,110,.3) transparent;
}
.bv-hand-cards--half { flex-wrap: wrap; }

/* Individual playable card */
.bv-card {
  position: relative;
  flex: 0 0 120px;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  padding: 0;
  text-align: left;
  color: #fff;
}
.bv-card:hover { transform: translateY(-6px); border-color: rgba(245,215,110,.5); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.bv-card img   { width: 100%; height: 150px; object-fit: cover; display: block; }
.bv-card-info  { padding: 0.4rem 0.45rem 0.5rem; }
.bv-card-name  { font-size: 0.68rem; line-height: 1.25; margin-bottom: 0.2rem; color: #fff; }
.bv-card-stat  { font-size: 0.72rem; color: var(--gold); font-weight: 700; margin-bottom: 0.15rem; }
.bv-card-cat   { display: inline-block; font-size: 0.58rem; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; }
.bv-card-cat.common   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.bv-card-cat.advanced { background: rgba(68,183,139,.18); color: #44b78b; }
.bv-card-cat.elite    { background: rgba(245,215,110,.18); color: #f5d76e; }
.bv-card-cat.legend   { background: rgba(200,100,255,.2); color: #cc88ff; }

/* Selection ring */
.bv-card-select-ring {
  display: none;
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--gold);
  border-radius: 10px;
  pointer-events: none;
}
.bv-card.selected .bv-card-select-ring { display: block; }
.bv-card.selected { border-color: var(--gold); box-shadow: 0 0 14px rgba(245,215,110,.45); }

/* Pick number badge for doubles */
.bv-card-pick-num {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px; height: 20px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  align-items: center;
  justify-content: center;
}
.bv-card.selected .bv-card-pick-num { display: flex; }

/* Play button */
.bv-play-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.6rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(245,215,110,.3);
}
.bv-play-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.bv-play-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,215,110,.5); }

/* Doubles combined score display */
.bv-doubles-status {
  font-size: 0.75rem;
  color: rgba(255,255,255,.55);
}
.bv-doubles-status strong { color: var(--gold); }

/* Mixed doubles side-by-side layout */
.bv-mixed-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bv-mixed-col   { display: flex; flex-direction: column; gap: 0.4rem; }

/* Player footer */
.bv-player-footer { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bv-deck-pips     { display: flex; gap: 1rem; font-size: 0.68rem; color: rgba(255,255,255,.35); }
.bv-support-strip { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bv-support-thumb { width: 36px; height: 50px; border-radius: 4px; object-fit: cover; border: 1px solid rgba(245,215,110,.2); opacity: .75; cursor: default; }
.bv-support-thumb--field { border-color: rgba(68,183,139,.25); }
.bv-support-thumb:hover { opacity: 1; }

.bv-empty-hand { color: rgba(255,255,255,.3); font-size: 0.8rem; font-style: italic; }

/* ─── Scoreboard strip ────────────────────────────────────────── */
.bv-scoreboard {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 0 0;
  flex-wrap: wrap;
}
.bv-sb-seat {
  background: rgba(20,20,20,.8);
  border: 1px solid rgba(245,215,110,.1);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 110px;
}
.bv-sb-seat.human  { border-color: rgba(68,183,139,.3); }
.bv-sb-name { font-size: 0.72rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; }
.bv-sb-pts  { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: var(--gold); margin-left: auto; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bv-arena {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "top"
      "table"
      "bottom"
      "left"
      "right";
  }
  .bv-seat-left,
  .bv-seat-right { flex-direction: row; justify-content: space-between; }
  .bv-ai-hand--vert { flex-direction: row; }
  .bv-table { border-radius: 16px; min-height: 250px; }
  .bv-mixed-hands { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .bv-topbar { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .bv-topbar-center { grid-column: 1 / -1; order: -1; }
  .bv-card { flex: 0 0 100px; }
  .bv-card img { height: 120px; }
}

.my-team-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    color: #f5d76e;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(245, 215, 110, 0.3);
}

.page-subtitle {
    font-size: 1.1rem;
    color: #888;
}

.decks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.deck-card {
    background: linear-gradient(135deg, rgba(245, 215, 110, 0.05), rgba(201, 162, 39, 0.05));
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 16px;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deck-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(201, 162, 39, 0.2);
}

.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.deck-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: #f5d76e;
    margin: 0;
}

.deck-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.deck-status.valid {
    background: rgba(68, 183, 139, 0.2);
    color: #44B78B;
}

.deck-status.invalid {
    background: rgba(255, 68, 68, 0.18);
    color: #ff7070;
}

.deck-info {
    margin-bottom: 1.5rem;
}

.deck-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #f5d76e;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
}

.deck-composition {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.composition-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.comp-label {
    color: #888;
    font-size: 0.9rem;
}

.comp-value {
    color: #fff;
    font-size: 0.9rem;
}

.deck-actions {
    display: flex;
    gap: 1rem;
}

.btn-select {
    flex: 1;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f5d76e, #c9a227);
    color: #111;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 215, 110, 0.3);
}

.btn-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 215, 110, 0.5);
}

.btn-select.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-select.disabled:hover {
    transform: none;
    box-shadow: none;
}

.deck-errors-small {
    margin-top: 1rem;
    padding-left: 1.2rem;
    color: #ff7070;
    font-size: 0.78rem;
}

.btn-edit {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.btn-edit:hover {
    background: rgba(201, 162, 39, 0.15);
    border-color: #c9a227;
}

.no-decks {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(245, 215, 110, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.no-decks-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-decks h2 {
    font-family: 'Orbitron', sans-serif;
    color: #f5d76e;
    margin-bottom: 1rem;
}

.no-decks p {
    color: #888;
    margin-bottom: 2rem;
}

.back-link {
    text-align: center;
}

.btn-back {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.btn-back:hover {
    color: #f5d76e;
}
.notification-bell{position:relative;display:inline-flex!important;align-items:center;justify-content:center;min-width:28px;font-size:16px!important}.notification-bell strong{position:absolute;top:-6px;right:-7px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:#d7b13f;color:#090b09;font:800 9px Arial,sans-serif}

.reward-toast-stack{position:fixed;right:18px;top:92px;z-index:9999;display:grid;gap:.5rem;width:min(340px,calc(100vw - 28px));pointer-events:none}.reward-toast{padding:.75rem .9rem;border:1px solid #d6b64c;border-radius:7px;background:linear-gradient(135deg,#11180f,#1d2415);color:#f1df91;font:700 .78rem 'Orbitron',sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.45);animation:reward-toast-slide 4.2s ease forwards}@keyframes reward-toast-slide{0%{opacity:0;transform:translateX(115%)}12%,78%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(115%)}}@media(max-width:700px){.reward-toast-stack{top:76px;right:10px;width:calc(100vw - 20px)}.reward-toast{font-size:.68rem}}

.tutorial-overlay[hidden]{display:none!important}
.tutorial-overlay{position:fixed;inset:0;z-index:200000;pointer-events:none}
.tutorial-scrim{position:absolute;inset:0;background:rgba(10,16,12,.42);backdrop-filter:saturate(1.25) brightness(1.08);pointer-events:none}
.tutorial-focus{position:absolute;z-index:2;border:2px solid #f5d76e;border-radius:10px;box-shadow:0 0 0 9999px rgba(10,16,12,.28),0 0 24px rgba(245,215,110,.72);pointer-events:none;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.tutorial-card{position:absolute;z-index:3;display:grid;gap:.65rem;width:min(350px,calc(100vw - 28px));padding:1rem;border:1px solid rgba(245,215,110,.55);border-radius:10px;background:linear-gradient(145deg,#10140f,#080b08);box-shadow:0 18px 50px rgba(0,0,0,.65);color:#dce4df;pointer-events:auto}
.tutorial-card:before{content:"";position:absolute;left:-10px;top:24px;width:18px;height:18px;border-left:1px solid rgba(245,215,110,.55);border-bottom:1px solid rgba(245,215,110,.55);background:#10140f;transform:rotate(45deg)}
.tutorial-kicker{color:#81dbb8;font:800 .62rem 'Orbitron',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.tutorial-card h2{margin:0;color:#f5d76e;font:800 1.05rem 'Orbitron',sans-serif;letter-spacing:0;text-transform:uppercase}
.tutorial-card p{margin:0;color:#c7d2cb;font-size:.86rem;line-height:1.55}
.message-toast-stack{position:fixed;right:18px;bottom:18px;z-index:210000;display:grid;gap:.5rem;width:min(360px,calc(100vw - 24px));pointer-events:none}.message-toast{padding:.78rem .9rem;border:1px solid rgba(245,215,110,.34);border-radius:8px;background:rgba(9,14,10,.96);color:#eef5ef;box-shadow:0 14px 36px rgba(0,0,0,.48);animation:messageToastSlide 3s ease forwards}.message-toast.success{border-color:rgba(91,190,126,.48)}.message-toast.error{border-color:rgba(224,68,68,.55);color:#ffd0d0}.message-toast.info{border-color:rgba(96,160,220,.48)}@keyframes messageToastSlide{0%{opacity:0;transform:translate(28px,18px)}10%,82%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(28px,18px)}}
.tutorial-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
.tutorial-button{min-height:34px;padding:.5rem .75rem;border:1px solid #c9a227;border-radius:6px;background:#c9a227;color:#090b09;font:800 .68rem 'Orbitron',sans-serif;text-transform:uppercase;cursor:pointer}
.tutorial-button.secondary{background:#12160f;color:#f5d76e}
.tutorial-button:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:640px){.tutorial-card{left:14px!important;right:14px!important;top:auto!important;bottom:14px!important;transform:none!important;width:auto}.tutorial-card:before{display:none}.tutorial-focus{border-radius:7px}}

.protected-card-art{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}

.deck-mini-controls{display:flex;flex-wrap:wrap;gap:4px;grid-column:1 / -1}
.deck-mini-controls label,.deck-mini-controls button{display:inline-flex;align-items:center;gap:3px;min-height:22px;padding:2px 5px;border:1px solid rgba(245,215,110,.25);border-radius:4px;background:#10140f;color:#d7ddcf;font-size:.58rem;line-height:1;text-transform:uppercase}
.deck-mini-controls input{margin:0}
.deck-mini-icon{width:14px;height:14px;object-fit:contain;flex:0 0 auto}
.deck-mini-controls b{display:inline-grid;place-items:center;min-width:14px;height:14px;border-radius:50%;background:#d0ad3c;color:#080a08;font-size:.55rem}
.role-controls button{cursor:pointer}
.role-controls button.active{background:#d0ad3c;color:#080a08;border-color:#f3d86c}
.deck-mini-card.has-role{outline:1px solid rgba(245,215,110,.5)}
.deck-list-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin:1rem 0}.deck-list-picker button{min-height:42px;padding:.5rem .4rem;border:1px solid rgba(255,215,0,.24);border-radius:8px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-size:.68rem;font-weight:800;text-transform:uppercase;cursor:pointer}.deck-list-picker button.active{border-color:rgba(255,215,0,.7);background:rgba(255,215,0,.14);color:#ffd700}.builder-card.deck-list-hidden{display:none}.deck-cards-area{display:grid!important;grid-template-columns:1fr!important;gap:.65rem!important}.deck-role-selectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.85rem}.deck-role-selectors label{display:grid;gap:.28rem;min-width:0}.deck-role-selectors span,.deck-list-lane h3{color:rgba(255,255,255,.68);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.deck-role-selectors select{min-width:0;width:100%;padding:.5rem .45rem;border:1px solid rgba(255,215,0,.24);border-radius:7px;background:#0c100d;color:#f5f1df;font-size:.68rem}.deck-list-lane{min-width:0;padding:.55rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.18)}.deck-list-lane h3{margin:0 0 .45rem}.deck-lane-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:.35rem;min-height:74px;align-content:flex-start}.deck-lane-cards .empty-text{grid-column:1/-1;margin:1rem 0}.deck-mini-role-badge{position:absolute;top:4px;left:4px;z-index:3;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;border:1px solid #fff2a0;border-radius:999px;background:rgba(5,8,6,.86);color:#f6d96c;font:800 .54rem 'Orbitron',sans-serif;line-height:1}.deck-mini-role-badge[hidden]{display:none}
.hand-card-body{position:relative}
.role-card-badge{position:absolute;top:4px;left:4px;z-index:4;display:inline-grid;place-items:center;width:28px;height:28px;padding:2px;border-radius:50%;background:rgba(5,8,6,.82);border:1px solid #fff2a0;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.role-card-badge img{width:100%;height:100%;object-fit:contain}
.game-room:not(.energy-mode) .table-role-badge{display:none!important}
.table-card-wrap{position:relative;display:inline-block;flex:0 0 auto}.table-card-wrap>img{display:block}.table-card-wrap .table-role-badge{width:24px;height:24px}.table-card-wrap .role-card-badge img{width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;background:transparent!important}.modal-role-badge{width:30px;height:30px}.modal-role-badge img{width:100%!important;height:100%!important;object-fit:contain!important}
.role-vice_captain{border-radius:6px}.role-tank{border-color:#bfe8ff}
.attribute-card-option{position:relative}
.attribute-energy-cost{position:absolute;top:3px;right:3px;z-index:3;display:inline-grid;grid-template-columns:14px auto;align-items:center;gap:1px;min-width:24px;height:20px;padding:0 3px;border-radius:999px;background:#000;color:#fff;border:0;font:800 10px Arial,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.attribute-energy-cost img{width:14px;height:14px;object-fit:contain;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0}
.score-chip small{display:inline-flex;align-items:center;justify-content:center;gap:2px;color:#7fe3c0;font-size:.62rem;font-weight:800}
.score-chip small img{width:12px;height:12px;object-fit:contain}
.database-type-summary{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.55rem!important;width:100%}.database-type-summary>div{min-width:0;text-align:center}.database-type-summary span{white-space:nowrap}@media(max-width:760px){.database-type-summary{grid-template-columns:repeat(5,minmax(82px,1fr))!important;overflow-x:auto;padding-bottom:.25rem}}
.deck-builder-page{max-width:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(300px,380px);overflow-x:hidden}.collection-panel,.deck-panel{min-width:0;box-sizing:border-box}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.deck-list-picker{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important}.deck-list-picker button{white-space:normal;overflow-wrap:anywhere}.deck-role-selectors{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}.deck-role-selectors select{max-width:100%}@media(max-width:1180px){.deck-builder-page{grid-template-columns:1fr!important;width:min(100%,96vw);padding-left:0;padding-right:0}.deck-panel{position:static!important;max-height:none!important;overflow:visible!important}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media(max-width:520px){.deck-list-picker{grid-template-columns:1fr 1fr!important}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.deck-role-selectors{grid-template-columns:1fr!important}}

.shop-packs-panel{display:grid;width:100%;gap:1.15rem;justify-items:center}.shop-packs-content{max-width:100%}.pack-row.shop-packs-content{row-gap:1.4rem}.starter-wrapper.shop-packs-content,.shop-pack-section.shop-packs-content{margin-block:.2rem}.daily-section.shop-packs-content{width:min(760px,100%);margin:0 auto 1.75rem;align-items:stretch}.daily-box{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:1.25rem;width:100%;cursor:pointer}.daily-box .daily-reward-button{width:190px!important;height:190px!important;margin:0;display:grid;place-items:center}.daily-box .daily-reward-button img{width:100%!important;height:100%!important;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}.daily-box:hover .daily-reward-button img{transform:scale(1.04)}.daily-box .shop-pack-title2{display:grid;align-content:center;min-height:190px;margin:0;padding:1.35rem;border:1px solid rgba(245,215,110,.24);border-radius:12px;background:rgba(255,255,255,.05);text-align:left}.daily-box .shop-pack-title2 h2{margin:0 0 .45rem;color:#f5d76e;font-size:1.55rem;letter-spacing:0;text-transform:uppercase}.daily-box .shop-pack-title2 p{margin:0;color:rgba(255,255,255,.76);font-size:.95rem;line-height:1.55}.pack-row{align-items:stretch}@media(max-width:700px){.daily-box{grid-template-columns:1fr;text-align:center}.daily-box .daily-reward-button{margin:auto}.daily-box .shop-pack-title2{text-align:center;min-height:auto}}

.news-header h1{color:#f5d76e;font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:0;text-transform:uppercase;text-shadow:0 0 18px rgba(245,215,110,.24)}.news-header p{color:#a7b2ac;line-height:1.55;opacity:1}.news-title{color:#f5d76e;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:0;text-transform:uppercase}.news-date{color:#79c79e;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:0;text-transform:uppercase;opacity:1}.news-body{color:#d7dfda;font-size:1rem;line-height:1.85}.news-body p{margin-bottom:1.1rem}.empty-news h2{color:#f5d76e;font-family:'Orbitron',sans-serif;letter-spacing:0;text-transform:uppercase}