/* 
    -------------------------------------------------------
    BRAWL STARS STYLE LANDING PAGE
    -------------------------------------------------------
*/

:root {
    /* Theme Colors */
    --primary-purple: #4a0e78;
    --primary-blue: #2e65f3;
    --accent-yellow: #ffc107;
    --accent-orange: #ff9800;
    --text-white: #ffffff;
    --soft-black: rgba(0, 0, 0, 0.7);
}

html {
    background: transparent;
}

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

body {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    /* Improved fallback */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: transparent; /* transparent lets #fixed-background blur work */
    color: white;
    /* Ensure text is white on black */

    /* ── ANTI-COPY SECURITY ── */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* 
    FIXED BACKGROUND DIV 
    Separated from body to ensure it NEVER moves on mobile scroll
*/
#fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    pointer-events: none;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    
    /* 40s because it's sliding 2 full screens now */
    animation: slideContinuous 40s linear infinite;
}

/* Panel 2: Flipped horizontally so the left edge perfectly matches Panel 1's right edge */
#fixed-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}

/* Panel 3: Normal again, so when the animation resets to Panel 1 it's invisible */
#fixed-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 200vw;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes slideContinuous {
    0% { transform: scaleY(-1) translateX(0); }
    100% { transform: scaleY(-1) translateX(-200vw); }
}

/* CONTENT WRAPPER */
#page-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--text-white);
    /* No opacity animation — it breaks backdrop-filter on all children */
}

@keyframes fadeInPage {
    to {
        opacity: 1;
    }
}

h1,
h2,
h3,
.btn-text {
    font-family: 'Lilita One', 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Container */
.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

/* HEADER */
header {
    padding: 10px 0;
    margin-bottom: 10px;
}

.logo-img {
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* NEW STATS GRID (User Requested Style) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 10px;
    max-width: 800px;
    margin: 0 auto 30px auto;
    padding: 0 10px;
    /* Optimize Scroll */
    contain: content;
}

.stat-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0);
}

.stat-label {
    font-size: 0.7rem;
    white-space: nowrap;
    color: #e5e7eb;
    /* text-gray-200 */
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 500;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Lilita One', cursive;
}

/* Stats Colors */
.text-green-300 {
    color: #86efac;
}

.text-yellow-300 {
    color: #fde047;
}

/* Specific text colors */

.text-gold {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* MAIN TITLE SECTION */
.main-title {
    margin-bottom: 20px;
}

.main-title h1 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    background: linear-gradient(to bottom, #ffffff 30%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    letter-spacing: 2px;
}

.main-title p {
    font-size: 0.9rem;
    color: #eee;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* REWARDS GRID */
.rewards-container {
    /* Removed background/border to let individual cards pop */
    background: transparent;
    padding: 10px;
    margin-bottom: 40px;
    border: none;
    box-shadow: none;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.reward-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 15px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform, opacity;
    overflow: hidden;
    position: relative;

    /* Entrance Animation */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Shimmer sweep left → right on reward cards */
.reward-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 80%
    );
    animation: cardShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes cardShimmer {
    0%   { left: -120%; }
    45%  { left: 160%; }
    100% { left: 160%; }
}

/* Staggered entrance for cards */
.reward-card:nth-child(1) {
    animation-delay: 0.1s;
}

.reward-card:nth-child(2) {
    animation-delay: 0.15s;
}

.reward-card:nth-child(3) {
    animation-delay: 0.2s;
}

.reward-card:nth-child(4) {
    animation-delay: 0.25s;
}

.reward-card:nth-child(5) {
    animation-delay: 0.3s;
}

.reward-card:nth-child(6) {
    animation-delay: 0.35s;
}

.reward-card:nth-child(7) {
    animation-delay: 0.4s;
}

.reward-card:nth-child(8) {
    animation-delay: 0.45s;
}

.reward-card:nth-child(9) {
    animation-delay: 0.5s;
}

.reward-card:nth-child(10) {
    animation-delay: 0.55s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reward-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 215, 0, 0.5);
    /* Gold border on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2);
}

.reward-card:active {
    transform: scale(0.97);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.reward-image-placeholder {
    width: 100%;
    height: 90px;
    background: transparent;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-image-placeholder img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}

.reward-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    margin-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.reward-status {
    font-size: 0.7rem;
    color: #4caf50;
    opacity: 0.8;
}

/* PLAYER DETAILS SECTION (Hidden by default) */
#player-details-section {
    display: none;
    /* Hidden strictly by default */
    max-width: 500px;
    margin: 40px auto 40px auto;
    /* Reduced top margin to keep continue info visible */
    padding: 0 20px;
}

.glass-panel {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px 20px;
    /* Reduced from 40px padding entirely */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reduced from 20px to pull the continue button up tighter */
    position: relative;
    /* For Back Button */
}

.details-title {
    font-family: 'Lilita One', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: white;
    margin: 15px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.details-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #e5e7eb;
    margin-bottom: 20px;
}

.reward-highlight {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.5);
}

.username-input-container {
    position: relative;
    width: 100%;
}

.username-error {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
    /* Hidden by default */
    font-weight: bold;
}


.floating-reward {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 5px 0;
    /* Reduced from 10px */
    animation: float-reward 3s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

@keyframes float-reward {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }

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



.status-text {
    color: #e0e0e0;
    /* Light gray/White */
    font-family: 'Outfit', sans-serif;
    /* Regular font logic */
    font-size: 0.9rem;
    /* Small */
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 5px;
    /* No effects as requested */
}

.username-input {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.username-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    /* Soft white */
}

.username-input:focus {
    border-color: var(--accent-yellow);
}

.yellow-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-yellow);
    /* Uses the root yellow variable or #ffc107 */
    color: #000;
    font-family: 'Lilita One', cursive;
    font-size: 1.5rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s, filter 0.2s;
    box-shadow: 0 4px 0 #c79100;
    /* 3D effect */
}

.yellow-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.yellow-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* BACK BUTTON */
.back-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.back-btn svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* FOOTER */
footer {
    margin-top: auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* ============================================
   PLAYER STATS PANEL (Real API Results)
   ============================================ */

/* Loading Spinner */
.api-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-yellow);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* VERIFICATION UI */
#verification-ui {
    display: none;
    /* Hidden initially */
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.player-found-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.progress-wrapper {
    width: 100%;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill {
    height: 100%;
    width: 0%;
    /* Green Gradient */
    background: linear-gradient(90deg, #2e7d32, #4caf50);
    border-radius: 12px;
    transition: width 0.1s linear;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* ── REWARD TRANSFER ANIMATION ─────────────────────── */

/* The reward image that floats, then flies into avatar */
.transfer-reward {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 8px 25px rgba(255, 206, 43, 0.7));
    animation: rewardFloat 1.4s ease-in-out infinite;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    transform-origin: center center;
}

/* Gentle floating while loading */
@keyframes rewardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg) scale(1);
        filter: drop-shadow(0 8px 25px rgba(255, 206, 43, 0.7));
    }

    50% {
        transform: translateY(-14px) rotate(4deg) scale(1.07);
        filter: drop-shadow(0 16px 30px rgba(255, 206, 43, 0.9));
    }
}

/* Fired via JS class — flies DOWN into the account target */
@keyframes rewardTransfer {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 8px 25px rgba(255, 206, 43, 0.8));
    }

    55% {
        transform: translateY(80px) scale(0.55) rotate(270deg);
        opacity: 1;
        filter: drop-shadow(0 4px 15px rgba(255, 206, 43, 1));
    }

    100% {
        transform: translateY(140px) scale(0.05) rotate(540deg);
        opacity: 0;
        filter: drop-shadow(0 0px 5px rgba(255, 206, 43, 0));
    }
}

.transfer-reward.transferring {
    animation: rewardTransfer 0.75s cubic-bezier(0.4, 0, 0.8, 1) forwards;
}

/* Animated dots path between reward and account target */
.transfer-path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 6px 0;
}

.transfer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 206, 43, 0.5);
    animation: dotPulse 1s ease-in-out infinite;
}

.transfer-dot:nth-child(1) {
    animation-delay: 0s;
}

.transfer-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.transfer-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        background-color: var(--accent-yellow);
    }
}

/* Account target — the "destination" the reward flies into */
.account-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 206, 43, 0.4);
    border-radius: 12px;
    transition: all 0.3s;
}

.account-target-icon {
    font-size: 2rem;
    line-height: 1;
}

.account-target-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Gold burst when reward arrives at the target */
@keyframes targetBurst {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(255, 206, 43, 0);
        border-color: rgba(255, 206, 43, 0.4);
    }

    35% {
        transform: scale(1.18);
        box-shadow: 0 0 30px rgba(255, 206, 43, 0.9), 0 0 60px rgba(255, 206, 43, 0.4);
        border-color: var(--accent-yellow);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(255, 206, 43, 0);
        border-color: rgba(255, 206, 43, 0.4);
    }
}

.account-target.burst {
    animation: targetBurst 0.6s ease-out forwards;
}

/* Avatar gold flash when stats appear */
@keyframes avatarFlash {
    0% {
        transform: scale(1);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    }

    40% {
        transform: scale(1.35);
        box-shadow: 0 0 25px rgba(255, 206, 43, 0.95), 0 0 50px rgba(255, 206, 43, 0.5);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    }
}

.player-avatar.flash {
    animation: avatarFlash 0.65s ease-out;
}

/* API Error Message */
.api-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fca5a5;
    font-size: 0.95rem;
    font-family: 'Outfit', sans-serif;
    display: none;
    margin-top: 5px;
    text-align: center;
}

/* Player Stats Panel */
.player-stats-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    /* Push down to clear the back button */
    animation: fadeInPage 0.4s ease-out forwards;
}

/* Player Header (Avatar placeholder + Name) */
.player-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
}

.player-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lilita One', cursive;
    font-size: 1.5rem;
    color: #000;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.player-name-block {
    text-align: left;
}

.player-name {
    font-family: 'Lilita One', cursive;
    font-size: 1.3rem;
    color: var(--accent-yellow);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.player-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

/* Stats Grid */
.stats-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.14);
}

.stat-item-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.stat-item-value {
    font-family: 'Lilita One', cursive;
    font-size: 1.2rem;
    color: var(--accent-yellow);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.stat-item-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Club row (full width) */
.stat-item.full-width {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
}

.stat-item.full-width .stat-item-value {
    font-size: 1rem;
    color: #93c5fd;
}

/* VERIFIED badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 20px;
    padding: 5px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: #86efac;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* INSTRUCTIONAL GIF */
.howto-gif-container {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px 0;
}

.howto-gif {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* REAL PLAYER AVATAR IMAGE */
.player-avatar-img {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    border: 2px solid var(--accent-yellow);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    object-fit: cover;
    background: #1e3a8a;
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
    .rewards-container {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding: 30px;
    }

    .rewards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .main-title h1 {
        font-size: 2.5rem;
    }

    .reward-image-placeholder {
        height: 120px;
    }
}

/* MOBILE PERFORMANCE OPTIMIZATION
   13 frosted glass cards overlapping each other is too much for many phone GPUs.
   Disabling the blur on small screens restores smooth 60fps scrolling, 
   while keeping the glass-like transparent gradient. */
@media (max-width: 768px) {
    .reward-card, .stat-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)) !important;
    }
}