:root {
    --primary:            #FF6B6B;
    --primary-dark:       #FF5252;
    --secondary:          #38B9AF;
    --secondary-dark:     #30A299;
    --yellow:             #FFE66D;
    --green:              #42B883;
    --green-dark:         #2FAA6D;

    --success:            #42B883;
    --danger:             red;
    --warning:            #FFC107;
    --info:               #2196F3;

    --bg:                 #1D2125;
    --bg-light:           #292F36;
    --dark:               #292F36;

    --text:               white;
    --text-light:         #BBC4CC;

    --gray:               #6C757D;
    --gray-dark:          #363b40;
    --light-gray:         #E9ECEF;
    --light:              #F7FFF7;

    --shadow-primary:     rgba(255, 107, 107, 0.3);
    --shadow-secondary:   rgba(78, 205, 196, 0.3);
    --shadow-green:       rgba(66, 184, 131, 0.3);

    --shadow-sm:          0 2px 5px rgba(255, 107, 107, 0.10);
    --shadow-md:          0 4px 8px rgba(255, 107, 107, 0.15);
    --shadow-lg:          0 10px 20px rgba(255, 107, 107, 0.20);

    --radius-sm:          8px;
    --radius:             12px;
    --radius-lg:          24px;

    --transition:         all 0.3s ease;

    --selected:           rgba(255, 107, 107, 0.1);

    --status-offline:        80,80,90;        
    --status-idle:           56,189,248;      
    --status-readying:       251,191,36;      
    --status-countdown:      249,115,22;      
    --status-playing:        239,68,68;       
    --status-checking:       168,85,247;      
    --status-win:            16,185,129;      
    --status-restocking:     73,108,156;
    --spectator:             152,109,255;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--bg);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        repeating-linear-gradient(
            -55deg,
            transparent,
            transparent 18px,
            rgba(255, 107, 107, 0.045) 18px,
            rgba(255, 107, 107, 0.045) 19px
        );
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: var(--transition);
}
a:hover { color: var(--primary-dark); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background-color: var(--gray); border-radius: var(--radius-sm); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover  { background-color: var(--secondary); }

/* ============================================================
   BUTTONS  (global defaults)
   ============================================================ */
button {
    font-family: 'Nunito', sans-serif;
    background-color: var(--primary);
    color: var(--text);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-primary);
    color: var(--text);
}
button:disabled {
    background-color: var(--gray);
    animation: unset;
    cursor: not-allowed;
}
button:disabled:hover {
    background-color: var(--gray);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
    transform: none;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
textarea, input, select {
    border-radius: var(--radius-sm);
    padding: 10px;
    border: 2px solid var(--gray);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--text);
    background-color: var(--bg);
}
textarea:focus, input:focus, select:focus {
    outline: none;
    border-color: var(--primary-dark);
    transition: border-color 0.3s ease;
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */

.page-heading {
    text-align: center;
    margin-bottom: 20px;
}
.page-heading h1 {
    font-size: 2rem;
    color: var(--primary);
    text-shadow: 2px 2px 0 rgba(255, 107, 107, 0.2);
}
.page-heading p {
    font-size: 1rem;
    color: var(--light-gray);
}

.section-title,
.profile-section-title {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}
.section-title::after,
.profile-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px;
}

.card {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
}

.toggle-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toggle-arrow {
    display: inline-block;
    width: 1em;
    margin-left: 1em;
    transition: transform 0.2s;
}

.vip-name {
    font-weight: inherit;
    background: linear-gradient(270deg, #FF6B6B, #FFB86B, #FFE66D, #6BD9FF, #8C6BFF, #FF6BFF);
    background-size: 600% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: vip-gradient-shift 6s ease infinite;
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
}
@keyframes vip-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes scale-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   CURRENCY DISPLAY  (header + reused across pages)
   ============================================================ */
.currency-item {
    display: flex;
    align-items: center;
    background-color: var(--bg);
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: bold;
    color: var(--text);
    min-width: 172px;
    max-width: 172px;
    width: 172px;
    position: relative;
    overflow: hidden;
}
.currency-icon {
    height: 20px;
    width: 20px;
    margin-right: 5px;
    flex-shrink: 0;
}
.currency-icon-lg { height: 24px; width: 24px; }
.currency-icon-sm { height: 16px; width: 16px; }
.currency-value {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.add-coins-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--text);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: 8px;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    box-shadow: none;
}
.add-coins-btn:hover {
    transform: scale(1.1);
    background-color: var(--primary-dark);
    box-shadow: none;
}

/* ============================================================
   RESULT BANNER  (account, notifications)
   ============================================================ */
.result-banner {
    transition: opacity 0.3s ease;
    position: sticky;
    top: 64px;
    z-index: 1000;
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
    border-radius: var(--radius);
    text-align: center;
}
.result-banner-content {
    padding: 13px 20px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    border-left: 4px solid transparent;
}
.result-banner-success {
    background-color: #1a3d2b;
    color: #6ee89f;
    border-left-color: #6ee89f;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.result-banner-error {
    background-color: #3d1a1a;
    color: #f08080;
    border-left-color: #f08080;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.result-banner-warning  { background-color: #3d3000; color: #ffd966; border-left-color: #ffd966; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.result-banner-info     { background-color: #3d1a1a; color: #ff9999; border-left-color: var(--primary); box-shadow: 0 2px 12px rgba(0,0,0,0.3); }

/* ============================================================
   MODAL — SHARED BASE
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    background-color: var(--bg);
    border-radius: var(--radius);
    padding: 25px 30px;
    text-align: center;
    width: 90vw;
    max-width: 500px;
    max-height: 90vh;
    overflow: visible;
    opacity: 0;
    animation: fadeInModal 0.3s ease-out forwards;
}

.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
    line-height: 1;
    padding: 0;
}
.modal-close:hover {
    background: var(--danger, #e74c3c);
    border-color: var(--danger, #e74c3c);
    color: #fff;
    transform: translate(50%, -50%) scale(1.1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
}

.modal-back-btn,
.modal-next-btn {
    width: 100%;
    height: 50px;
    display: block;
    margin: 0 auto;
}
.modal-next-btn { background-color: var(--secondary); }
.modal-next-btn:hover {
    background-color: var(--secondary-dark);
    box-shadow: 0 4px 8px var(--shadow-secondary);
}

.modal-confetti-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
}
.modal-quest-claim .modal-confetti-container {
    animation: confetti-fade-out 0.4s ease-out 2.0s forwards;
}
@keyframes confetti-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.modal-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary);
    opacity: 0.8;
    animation: confetti-fall 5s linear infinite;
}
@keyframes confetti-fall {
    0%   { top: -10px; transform: translateX(0) rotate(0deg); opacity: 1; }
    100% { top: 100%; transform: translateX(var(--drift, 100px)) rotate(var(--spin, 360deg)); opacity: 0; }
}

.modal-pulse-title {
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    animation: modal-title-pulse 1.5s infinite;
    display: inline-block; 
    will-change: transform; 
}
@keyframes modal-title-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@media (max-width: 600px) {
    .modal-content { width: 92%; max-width: calc(100vw - 28px); }
    .modal-readyup .modal-content { width: 92vw; max-width: 92vw; padding-left: 18px; padding-right: 18px; }

    
    .modal-close {
        top: 10px;
        right: 10px;
        transform: none;
    }
    .modal-close:hover {
        transform: scale(1.1);
    }
}

/* ============================================================
   BASE LAYOUT  (header / nav / footer shell)
   ============================================================ */
.base-body-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body.modal-open {
    overflow: hidden;
}

.base-page {
    flex: 1;
    padding-top: 74px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.base-container {
    max-width: 1600px;
    margin: 5px auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}

.base-header .base-container {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
}

.base-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-light);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    height: 64px;
}

.base-header-container {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 8px;
}

.base-banner-message {
    margin-top: 64px;
    margin-bottom: -64px;
    background: #ff000022;
    border-bottom: 1px solid #ff000055;
    color: var(--red);
    text-align: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
}

.base-main-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}



.base-playing-banner {
    background-color: var(--primary);
    color: var(--text);
    padding: 10px 20px;
    margin-top: -10px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
}
.base-playing-banner a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.base-playing-banner a:hover { text-decoration: underline; color: var(--yellow); }

.base-footer {
    background-color: var(--bg-light);
    color: var(--text);
    margin-top: 40px;
    border-top: 1px solid rgba(255, 107, 107, 0.12);
}

.base-footer-inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 20px;
}

.base-footer-brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
}

.base-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.base-footer-logo img {
    height: 36px;
    opacity: 0.9;
}

.base-footer-logo-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.base-footer-logo-accent {
    color: var(--primary);
}

.base-footer-tagline {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    max-width: 180px;
}

.base-footer-links {
    display: flex;
    gap: 40px;
    flex: 1;
}

.base-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.base-footer-col-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.base-footer-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.base-footer-link:hover {
    color: var(--text);
    transform: translateX(2px);
}

.base-footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.base-footer-social-icons {
    display: flex;
    gap: 8px;
}

.base-footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.05);
    color: var(--text-light);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(255,255,255,0.06);
}

.base-footer-social-btn svg {
    width: 16px;
    height: 16px;
}

.base-footer-social-btn:hover {
    background-color: var(--primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
}

.base-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    padding: 14px 24px;
    font-size: 0.75rem;
    color: var(--gray);
}

@media (max-width: 768px) {
    .base-footer-inner {
        flex-direction: column;
        gap: 28px;
        padding: 28px 20px 24px;
    }

    .base-footer-links {
        gap: 28px;
        flex-wrap: wrap;
    }

    .base-footer-tagline {
        max-width: 100%;
    }
}

.base-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    cursor: pointer;
}
.base-logo img {
    height: 48px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.base-logo:hover img {
    transform: rotate(-12deg) scale(1.18);
}
.base-logo-text {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.base-logo:hover .base-logo-text {
    transform: translateY(-3px);
}
.base-logo-text-accent {
    color: var(--primary);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.base-logo:hover .base-logo-text-accent {
    color: var(--secondary);
    text-shadow: 0 0 16px rgba(56, 185, 175, 0.6);
}

.base-mute-btn {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-left: 4px;
    margin-right: 10px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-light);
    box-shadow: none;
    transition: color 0.2s ease, background 0.2s ease;
}
.base-mute-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    transform: none;
    box-shadow: none;
}
.base-mute-btn svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}
.mute-icon-off { display: none; }
.base-mute-btn.is-muted .mute-icon-on  { display: none; }
.base-mute-btn.is-muted .mute-icon-off { display: block; }
.base-mute-btn.is-muted { color: var(--gray); }

.mute-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
    transform: translateX(-50%) translateY(4px);
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 44px;
}
.mute-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.mute-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
}

.mute-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 80px;
    cursor: pointer;
    accent-color: var(--primary);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.mute-slider:focus { outline: none; }

@media (max-width: 768px) {
    .mute-popup { display: none !important; }
}

.base-nav-links {
    cursor: pointer;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
}

.base-nav-separator {
    height: 1px;
    background-color: var(--gray);
    margin: 8px 0;
    border: none;
    width: 100%;
}

.base-nav-link,
.base-nav-dropdown .base-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    color: var(--text-light);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    position: relative;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.base-nav-link:hover,
.base-nav-dropdown .base-dropdown-toggle:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.base-nav-icon,
.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.base-nav-link:hover .base-nav-icon,
.base-nav-link:hover .nav-icon,
.base-nav-dropdown .base-dropdown-toggle:hover .base-nav-icon,
.base-nav-dropdown .base-dropdown-toggle:hover .nav-icon {
    opacity: 1;
    transform: scale(1.15) rotate(-5deg);
}

.base-nav-link::after,
.base-nav-dropdown .base-dropdown-toggle::after { display: none; }

.base-nav-link.active,
.base-nav-dropdown.nav-active .base-dropdown-toggle {
    color: var(--primary);
    background: rgba(255, 107, 107, 0.12);
}
.base-nav-link.active .base-nav-icon,
.base-nav-link.active .nav-icon,
.base-nav-dropdown.nav-active .base-dropdown-toggle .base-nav-icon,
.base-nav-dropdown.nav-active .base-dropdown-toggle .nav-icon { opacity: 1; }

.nav-coins-link {
    color: var(--yellow) !important;
    background: rgba(255, 230, 109, 0.08);
    font-weight: 900;
}
.nav-coins-link:hover { background: rgba(255, 230, 109, 0.16) !important; color: var(--yellow) !important; }
.nav-coins-link .nav-icon,
.nav-coins-link .base-nav-icon { opacity: 1; }

.nav-help-link {
    color: var(--secondary) !important;
    background: rgba(255, 230, 109, 0.08);
    font-weight: 900;
}
.nav-help-link:hover { background: rgba(56, 185, 175, 0.16) !important; color: var(--secondary) !important; }
.nav-help-link .nav-icon,
.nav-help-link .base-nav-icon { opacity: 1; }

/* ── Quest alert state ── */
/* #base_quest_alert_state is empty or contains a .quest-alert-active span.
   All quest alert visuals are driven from here via :has() — nothing else needed. */

#base_quest_alert_state { display: none; }

.base-dropdown-toggle::after {
    content: '';
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22dd77;
    box-shadow: 0 0 6px 1px rgba(34, 221, 119, 0.7);
    animation: quest-dot-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
    margin-left: auto;
}
.base-header:has(#base_quest_alert_state .quest-alert-active) .base-dropdown-toggle::after {
    display: block;
}

/* glow on the profile dropdown toggle */
.base-header:has(#base_quest_alert_state .quest-alert-active) .base-dropdown-toggle {
    animation: quest-btn-glow 2s ease-in-out infinite;
}

/* glow + color + dot on the quests nav item in dropdown */
.base-header:has(#base_quest_alert_state .quest-alert-active) .base-dropdown-item[href="/quests"] {
    animation: quest-nav-glow 2s ease-in-out infinite;
    color: #22dd77;
}
.base-header:has(#base_quest_alert_state .quest-alert-active) .base-dropdown-item[href="/quests"] .nav-icon {
    stroke: #22dd77;
    fill: none;
}
.base-header:has(#base_quest_alert_state .quest-alert-active) .base-dropdown-item[href="/quests"]::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22dd77;
    box-shadow: 0 0 5px 1px rgba(34, 221, 119, 0.7);
    margin-left: auto;
    flex-shrink: 0;
    animation: quest-dot-pulse 2s ease-in-out infinite;
}

/* mobile nav is outside <header> so scope from body wrapper */
.base-body-wrapper:has(#base_quest_alert_state .quest-alert-active) .base-mobile-nav-link[href="/quests"] {
    animation: quest-nav-glow 2s ease-in-out infinite;
    color: #22dd77;
}
.base-body-wrapper:has(#base_quest_alert_state .quest-alert-active) .base-mobile-nav-link[href="/quests"] .nav-icon {
    stroke: #22dd77;
    fill: none;
}
.base-body-wrapper:has(#base_quest_alert_state .quest-alert-active) .base-mobile-nav-link[href="/quests"]::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: #22dd77;
    box-shadow: 0 0 5px 1px rgba(34, 221, 119, 0.7);
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
    animation: quest-dot-pulse 2s ease-in-out infinite;
}

/* dot on hamburger via ::before on the toggle wrapper */
.base-mobile-menu-toggle-wrapper {
    position: relative;
    display: none;
    align-items: center;
    z-index: 1002;
    flex-shrink: 0;
    margin-left: 8px;
}
@media (max-width: 920px) {
    .base-mobile-menu-toggle-wrapper { display: flex; }
}
.base-mobile-menu-toggle-wrapper::after {
    content: '';
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22dd77;
    box-shadow: 0 0 6px 1px rgba(34, 221, 119, 0.7);
    animation: quest-dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1003;
}
@media (max-width: 920px) {
    .base-header:has(#base_quest_alert_state .quest-alert-active) .base-mobile-menu-toggle-wrapper::after {
        display: block;
    }
}

@keyframes quest-btn-glow {
    0%, 100% { box-shadow: inset 0 0 12px 2px rgba(34, 221, 119, 0.25); }
    50%       { box-shadow: inset 0 0 22px 5px rgba(34, 221, 119, 0.5); }
}

@keyframes quest-nav-glow {
    0%, 100% { box-shadow: inset 0 0 10px 1px rgba(34, 221, 119, 0.25); }
    50%       { box-shadow: inset 0 0 18px 3px rgba(34, 221, 119, 0.48); }
}

@keyframes quest-dot-pulse {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(34, 221, 119, 0.75); }
    50%       { box-shadow: 0 0 13px 4px rgba(34, 221, 119, 1); }
}

.base-mobile-nav-link.active {
    color: var(--primary);
    border-left: 3px solid var(--primary);
    padding-left: 9px;
}

.base-nav-dropdown,
.base-profile {
    position: relative;
}

.base-dropdown-arrow {
    font-size: 0.6rem;
    margin-left: 2px;
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s;
}
.base-dropdown.active .base-dropdown-arrow { transform: rotate(180deg); opacity: 1; }

.base-nav-dropdown .base-dropdown-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 11px;
    color: var(--text-light);
    font-weight: 800;
    white-space: nowrap;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    position: relative;
    transition: color 0.2s, background 0.2s;
}
.base-nav-dropdown .base-dropdown-toggle:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.base-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    min-width: 170px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0s 0.2s;
    z-index: 100;
}
.base-nav-dropdown .base-dropdown-menu { left: 0; right: auto; transform-origin: top left; }

.base-dropdown.active .base-dropdown-menu,
.base-nav-dropdown.active .base-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.base-dropdown-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    color: var(--text-light);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
}
.base-dropdown-item:hover {
    background-color: var(--selected);
    color: var(--primary);
    transform: none;
}
.base-dropdown-item .nav-icon,
.base-dropdown-item .base-nav-icon { width: 16px; height: 16px; }
.base-dropdown-item:hover .nav-icon,
.base-dropdown-item:hover .base-nav-icon { opacity: 1; transform: scale(1.1); }

.base-profile .base-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    width: 140px;
    justify-content: flex-start;
    box-shadow: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}
.base-profile .base-dropdown-toggle:hover {
    background-color: var(--selected);
    transform: none;
    box-shadow: none;
}
.base-profile.active .base-dropdown-toggle,
.base-profile.base-dropdown.active .base-dropdown-toggle {
    background-color: var(--primary);
}
.base-profile.active .base-dropdown-toggle .base-display-name,
.base-profile.base-dropdown.active .base-dropdown-toggle .base-display-name {
    color: var(--text);
}

.base-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.base-display-name {
    font-weight: bold;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.base-auth-buttons-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.base-auth-button {
    min-width: 160px;
    padding: 8px 40px;
    border-radius: var(--radius);
    background-color: var(--secondary);
    color: var(--text);
    font-weight: 800;
    font-size: 0.95rem;
    transition: var(--transition);
    box-shadow: 0 2px 4px var(--shadow-secondary);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.base-auth-button:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-secondary);
    color: var(--text);
}

.base-auth-register             { background-color: var(--green); }
.base-auth-register:hover       { background-color: var(--green-dark); box-shadow: 0 4px 8px var(--shadow-green); }

.base-left-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.base-right-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.base-player-area {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.base-currency {
    display: flex;
    gap: 15px;
    align-items: center;
}

.base-mobile-menu-toggle {
    all: unset;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 6px 4px;
    box-sizing: content-box;
}
.base-mobile-menu-toggle:hover {
    background-color: transparent;
    transform: none;
    box-shadow: none;
}
.base-mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text);
    border-radius: 3px;
    transition: var(--transition);
}
.base-mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.base-mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.base-mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.base-mobile-menu {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background-color: var(--bg-light);
    padding: 20px;
    box-shadow: var(--shadow-md);
    z-index: 999;
    transform: translateY(-100%);
    opacity: 0;
    transition: var(--transition);
}
.base-mobile-menu.active { transform: translateY(0); opacity: 1; }

.base-mobile-nav-links { list-style: none; padding: 0; margin: 0; }

.base-mobile-nav-link {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 5px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
}

.base-mobile-nav-link:hover {
    color: var(--primary);
    background-color: transparent;
    transform: none;
    box-shadow: none;
}

.base-mobile-nav .base-nav-dropdown .base-dropdown-toggle {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 5px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}
.base-mobile-nav .base-nav-dropdown .base-dropdown-toggle:hover {
    color: var(--primary);
    background-color: transparent;
    transform: none;
    box-shadow: none;
}
.base-mobile-nav .base-nav-dropdown .base-dropdown-toggle::after { display: none; }
.base-mobile-nav .base-dropdown-arrow { font-size: 0.8rem; }

.base-mobile-nav .base-nav-dropdown {
    position: relative;
}
.base-mobile-nav .base-nav-dropdown .base-dropdown-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    overflow-y: auto;
    background-color: var(--bg);
    border-radius: var(--radius);
    margin: 0;
    box-shadow: none;
}
.base-mobile-nav .base-nav-dropdown.active .base-dropdown-menu {
    display: block;
    box-shadow: var(--shadow-sm);
    margin: 4px 0;
}

.base-mobile-nav .base-dropdown-item {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;   
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}
.base-mobile-nav .base-dropdown-item:hover {
    background-color: var(--selected);
    color: var(--primary);
    transform: none;
    box-shadow: none;
}

.base-nav-link,
.base-nav-dropdown,
.base-nav-dropdown .base-dropdown-toggle,
.base-dropdown-toggle,
.base-dropdown-item,
.base-mobile-nav-link {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Compress nav at mid sizes */
@media (max-width: 1200px) {
    .base-logo-text        { display: none; }
    .base-left-section     { gap: 6px; }
    .base-display-name     { display: none; }
    .base-profile .base-dropdown-toggle { width: auto; }
    .base-nav-link,
    .base-nav-dropdown .base-dropdown-toggle { padding: 8px 9px; font-size: 0.85rem; }
    .base-nav-links        { gap: 2px; }
    .base-header-container { gap: 6px; }
}
/* Hamburger at ~920px — nav and profile fully collapse */
@media (max-width: 920px) {
    .base-main-nav         { display: none; }
    .base-profile          { display: none; }
    .base-left-section     { flex: 0 0 auto; }
    .base-right-section    { flex: 1; justify-content: center; }
    .base-player-area,
    .base-currency,
    .base-right-section    { gap: 10px; }

    .base-mobile-nav .base-nav-link,
    .base-mobile-nav .base-mobile-nav-link { font-size: 1rem; }
}
@media (max-width: 768px) {
    .base-logo-text        { display: none; }
    .base-player-area,
    .base-currency,
    .base-right-section    { gap: 8px; }
    .base-container        { padding-left: 12px; padding-right: 12px; }
    
    .base-mobile-menu-toggle-wrapper { margin-right: 4px; flex-shrink: 0; }
    
    .base-auth-buttons-container { flex: 1; }
    .base-auth-button      { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
    .base-logo             { display: none; }
    .base-mute-btn         { order: -1; margin-left: 0; margin-right: 4px; width: 28px; height: 28px; }
    .base-mute-btn svg     { width: 18px; height: 18px; }
    .base-auth-buttons-container { gap: 6px; }
    .base-auth-button      { min-width: 72px; padding: 7px 6px; font-size: 0.88rem; }
    .currency-item         { min-width: 140px; max-width: 140px; width: 140px; }
    .base-right-section    { gap: 6px; }
}
@media (max-width: 376px) {
    .base-logo             { display: none; }
    .base-mute-btn         { order: -1; margin-left: 0; margin-right: 4px; width: 28px; height: 28px; }
    .base-mute-btn svg     { width: 18px; height: 18px; }
    .base-auth-buttons-container { gap: 5px; }
    .base-auth-button      { min-width: 62px; padding: 6px 5px; font-size: 0.82rem; }
    .currency-item         { min-width: 120px; max-width: 120px; width: 120px; }
    .base-right-section    { gap: 5px; }
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-body { display: block; flex-direction: unset; }

/* ---- Floating orbs background ---- */
.landing-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.landing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    animation: orb-drift 18s ease-in-out infinite;
}
.landing-orb:nth-child(1) { width: 420px; height: 420px; background: var(--primary); top: -80px; left: -100px; animation-duration: 20s; }
.landing-orb:nth-child(2) { width: 320px; height: 320px; background: var(--secondary); top: 30%; right: -80px; animation-duration: 16s; animation-delay: -6s; }
.landing-orb:nth-child(3) { width: 260px; height: 260px; background: var(--yellow); bottom: 20%; left: 10%; animation-duration: 22s; animation-delay: -11s; opacity: 0.10; }
.landing-orb:nth-child(4) { width: 200px; height: 200px; background: var(--green); bottom: -60px; right: 20%; animation-duration: 17s; animation-delay: -4s; opacity: 0.13; }
@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.05); }
    66%       { transform: translate(-20px, 20px) scale(0.97); }
}

/* ---- Hero ---- */
.landing-hero {
    position: relative;
    z-index: 1;
    padding: 60px 20px 45px;
    text-align: center;
}
.landing-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-logo-bounce {
    width: 110px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 24px rgba(255,107,107,0.45));
    animation: landing-bounce 3s infinite ease-in-out;
}
@keyframes landing-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.landing-hero h1 {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 18px;
    background: linear-gradient(110deg, var(--primary) 0%, var(--yellow) 45%, var(--secondary) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: landing-gradient-shift 4s ease infinite;
}
@keyframes landing-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.landing-hero p {
    font-size: 1.15rem;
    color: var(--text-light);
    margin-bottom: 36px;
    max-width: 520px;
    line-height: 1.7;
}

/* ---- CTA buttons ---- */
.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.4px;
    padding: 16px 44px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3dd68c 0%, #22a060 100%);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(66,184,131,0.3), 0 6px 28px rgba(66,184,131,0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    margin-bottom: 14px;
    min-width: 240px;
    justify-content: center;
}
.landing-cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: landing-btn-sheen 2.5s ease-in-out infinite;
}
@keyframes landing-btn-sheen {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.landing-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(66,184,131,0.45), 0 10px 36px rgba(66,184,131,0.55);
    color: #fff;
    background: linear-gradient(135deg, #4ae89e 0%, #29b870 100%);
}
.landing-cta-primary svg { width: 20px; height: 20px; flex-shrink: 0; }

.landing-signin-link {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-light);
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
    margin-top: -2px;
    -webkit-user-select: text;
    user-select: text;
}
.landing-signin-link span {
    color: var(--secondary);
    transition: color 0.2s ease;
}
.landing-signin-link:hover { color: var(--text); }
.landing-signin-link:hover span { color: var(--text); }

/* ---- Section CTA (browse machines / browse prizes) ---- */
.landing-section-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    padding: 13px 34px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.landing-section-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.13) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: landing-btn-sheen 3s ease-in-out infinite;
}
.landing-section-cta:hover {
    transform: translateY(-2px);
    color: #fff;
}
.landing-section-cta svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255,255,255,0.85); }

/* Machines button — teal */
.landing-section--machines .landing-section-cta {
    background: linear-gradient(135deg, #38d9cf 0%, #1f9e96 100%);
    box-shadow: 0 0 0 1px rgba(56,217,207,0.25), 0 5px 22px rgba(56,185,175,0.4);
}
.landing-section--machines .landing-section-cta:hover {
    background: linear-gradient(135deg, #4ae8dd 0%, #27b8ae 100%);
    box-shadow: 0 0 0 1px rgba(56,217,207,0.4), 0 8px 28px rgba(56,185,175,0.55);
}

/* Prizes button — purple */
.landing-section--prizes .landing-section-cta {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 5px 22px rgba(124,58,237,0.4);
}
.landing-section--prizes .landing-section-cta:hover {
    background: linear-gradient(135deg, #b9a3fc 0%, #8b5cf6 100%);
    box-shadow: 0 0 0 1px rgba(167,139,250,0.4), 0 8px 28px rgba(124,58,237,0.55);
}

/* ---- Trust bar ---- */
.landing-trust {
    position: relative;
    z-index: 1;
    background: rgba(41, 47, 54, 0.85);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    padding: 0;
}
.landing-trust-inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
}
.landing-trust-inner::-webkit-scrollbar { display: none; }
.landing-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
    letter-spacing: 0.1px;
    flex-shrink: 0;
    padding: 0 14px;
}
.landing-trust-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--secondary);
}
.landing-trust-flag {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}
.landing-trust-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .landing-trust-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow-x: unset;
        padding: 10px 16px;
        gap: 8px 0;
        justify-items: center;
    }
    .landing-trust-item { padding: 4px 10px; white-space: nowrap; }
    /* hide the vertical dividers on mobile, use grid lines instead */
    .landing-trust-divider { display: none; }
}

/* ---- Section shared ---- */
.landing-sections-wrap { display: contents; }
.landing-section {
    position: relative;
    z-index: 1;
    padding: 36px 20px 44px;
    overflow: visible;
}
.landing-section--machines { background: var(--bg); --scroll-duration: 22s; }
.landing-section--prizes   { background: var(--bg); border-top: 2px solid var(--bg-light); --scroll-duration: 35s; }
.landing-section-header {
    text-align: center;
}
.landing-section-header .landing-live-dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(56,217,207,0.08);
    border: 1px solid rgba(56,217,207,0.22);
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #38d9cf;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}
.landing-section-header .landing-prizes-dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(167,139,250,0.08);
    border: 1px solid rgba(167,139,250,0.22);
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #a78bfa;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}
.landing-live-dot::before {
    content: '';
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #38d9cf;
    box-shadow: 0 0 0 0 rgba(56,217,207,0.6);
    animation: live-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
    display: block;
}
.landing-prizes-dot::before {
    content: '';
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 0 0 rgba(167,139,250,0.6);
    animation: live-pulse 1.8s ease-out infinite;
    flex-shrink: 0;
    display: block;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); opacity: 1; }
    70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); opacity: 0.8; }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; }
}
.landing-machine-card { cursor: pointer; }
.landing-section-footer {
    text-align: center;
    margin-top: 24px;
}
.landing-prize-card { background: var(--bg-light); }
.landing-prize-thumb { background: var(--bg-light); }

/* ---- Scroll strip ---- */
.landing-scroll-wrap {
    overflow: hidden;
    margin: 0 -20px;
    padding: 20px 0 20px;
}
.landing-scroll-strip {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: landing-marquee var(--scroll-duration, 25s) linear infinite;
    will-change: transform;
}
.landing-scroll-strip.landing-scroll-strip--reverse {
    animation-name: landing-marquee-reverse;
    animation-duration: calc(var(--scroll-duration, 25s) * 2);
}
.landing-scroll-wrap:hover .landing-scroll-strip { animation-play-state: paused; }

@keyframes landing-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes landing-marquee-reverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.landing-machine-card {
    flex-shrink: 0;
    width: calc(28vw - 12px);
    min-width: 280px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-light);
    border: 2px solid var(--machine-accent, var(--primary));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.landing-machine-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--machine-accent, var(--primary)) 45%, transparent);
}
.landing-machine-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: var(--bg);
}
.landing-machine-info {
    padding: 12px 14px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.landing-machine-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--machine-accent, var(--primary));
    box-shadow: 0 0 8px var(--machine-accent, var(--primary));
    flex-shrink: 0;
}
.landing-machine-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.landing-machine-status {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--machine-accent, var(--primary));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Prize cards — smaller, ~5-6 visible ---- */
.landing-prize-card {
    flex-shrink: 0;
    width: calc(17vw - 8px);
    min-width: 150px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-light);
    border: 1.5px solid rgba(255,255,255,0.14);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}
.landing-prize-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,107,107,0.55);
    box-shadow: 0 6px 20px rgba(255,107,107,0.18);
}
.landing-prize-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--bg);
}
.landing-prize-info {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.landing-prize-name {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin-bottom: 4px;
}
.landing-prize-price {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--yellow);
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.landing-prize-price .currency-icon {
    width: 16px;
    height: 16px;
    margin-right: 0;
}
.landing-prizes-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 600;
    margin-top: 16px;
    opacity: 0.8;
}

/* ---- How to play ---- */
.landing-howto {
    position: relative;
    z-index: 1;
    padding: 56px 20px 0;
    background: var(--bg-light);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.landing-howto-header {
    text-align: center;
    margin-bottom: 44px;
}
.landing-howto-header h2 {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
}
.landing-howto-header p {
    font-size: 0.9rem;
    color: var(--text-light);
}
.landing-steps {
    display: flex;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 8px;
}
.landing-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,107,107,0.25), rgba(56,185,175,0.25), transparent);
    pointer-events: none;
}
.landing-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.landing-step-num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid rgba(255,107,107,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(255,107,107,0.12);
}
.landing-step-icon {
    width: 22px; height: 22px;
    color: var(--primary);
}
.landing-step-title {
    font-size: 0.88rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
}
.landing-step-desc {
    font-size: 0.76rem;
    color: var(--text-light);
    line-height: 1.5;
    font-weight: 600;
}

/* ---- Bottom CTA ---- */
.landing-bottom-cta {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 20px 72px;
    background: var(--bg-light);
}
.landing-bottom-cta h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
}
.landing-bottom-cta p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 28px;
    font-weight: 600;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .landing-hero h1 { font-size: 2.4rem; }
    .landing-hero p  { font-size: 1rem; }
    .landing-machine-card { min-width: 240px; }

    .landing-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px 0;
        max-width: 420px;
    }
    .landing-steps::before,
    .landing-steps::after { display: none; }
    .landing-step { min-width: 0; padding: 0 8px; }
}
@media (max-width: 480px) {
    .landing-hero { padding: 60px 16px 44px; }
    .landing-hero h1 { font-size: 2rem; }
    .landing-machine-card { min-width: 220px; }
    .landing-prize-card   { min-width: 140px; }
}

/* ============================================================
   MACHINES PAGE
   ============================================================ */

.machines-dynamic-header {
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 12px 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.machines-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.machines-stat-item {
    text-align: center;
    padding: 6px 8px;
    position: relative;
    transition: var(--transition);
    border-radius: var(--radius-sm);
}
.machines-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 18%; bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.machines-stat-item:hover { background: rgba(255, 255, 255, 0.03); }
.machines-stat-number { font-size: 1.35rem; font-weight: 900; display: block; line-height: 1.1; }
.machines-stat-label  { font-size: 0.6rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.6px; display: block; margin-top: 1px; white-space: nowrap; }

@media (max-width: 600px) {
    .machines-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .machines-stat-item:not(:last-child)::after {
        display: none;
    }
    .machines-stat-item {
        padding: 8px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .machines-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
    .machines-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
    .machines-stat-number { font-size: 1.5rem; }
    .machines-stat-label  { font-size: 0.62rem; white-space: normal; }
}

.machines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.machines-card {
    --machine-accent: #ff6b6b;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: card-glow-pulse 3s ease-in-out infinite;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 35%, transparent),
        0 0 16px -4px color-mix(in srgb, var(--machine-accent) 22%, transparent);
}
.machines-card:hover {
    transform: translateY(-6px);
    animation: none;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 2px var(--machine-accent),
        0 0 32px -2px color-mix(in srgb, var(--machine-accent) 55%, transparent),
        0 0 70px -15px color-mix(in srgb, var(--machine-accent) 25%, transparent);
}
@keyframes card-glow-pulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 28%, transparent),
            0 0 14px -4px color-mix(in srgb, var(--machine-accent) 12%, transparent);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 65%, transparent),
            0 0 24px -2px color-mix(in srgb, var(--machine-accent) 38%, transparent);
    }
}

.machines-header-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.machines-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    cursor: pointer;
    background: color-mix(in srgb, var(--machine-accent) 12%, #1a1e22);
    transform: translateZ(0);
    isolation: isolate;
    border-radius: var(--radius) var(--radius) 0 0;
}
.machines-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.machines-cost {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0 12px 0 28px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    color: var(--text);
    background: linear-gradient(135deg, rgba(255, 208, 96, 0.95), rgba(217, 156, 39, 0.95));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100px;
    height: 32px;
    box-sizing: border-box;
    text-transform: uppercase;
}
.machines-cost img  { width: 18px; height: 18px; position: absolute; left: 12px; }
.machines-cost span { width: 100%; text-align: center; padding-left: 10px; font-size: 1.2em; }

.machines-status {
    width: 100%;
    padding: 0 16px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.92);
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.machines-status.offline    { background-color: rgb(var(--status-offline)); }
.machines-status.idle       { background-color: rgb(var(--status-idle)); }
.machines-status.readying   { background-color: rgb(var(--status-readying)); }
.machines-status.countdown  { background-color: rgb(var(--status-countdown)); }
.machines-status.playing    { background-color: rgb(var(--status-playing)); }
.machines-status.checking   { background-color: rgb(var(--status-checking)); }
.machines-status.win        { background-color: rgb(var(--status-win)); }
.machines-status.restocking { background-color: rgb(var(--status-restocking)); }

.machines-namebar {
    padding: 7px 14px;
    background: color-mix(in srgb, rgb(var(--machine-accent)) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, rgb(var(--machine-accent)) 20%, transparent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.machines-namebar .machines-name {
    margin: 0;
}

.machines-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.machines-status-pill {
    display: flex;
    align-items: center;
    height: 30px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 99px;
    background: rgba(255,255,255,0.04);
}
.machines-status-pill:has(.machines-status.offline)     { border-color: rgba(var(--status-offline), 0.4);    background: rgba(var(--status-offline), 0.06);    box-shadow: inset 0 0 12px -2px rgba(var(--status-offline), 0.18); }
.machines-status-pill:has(.machines-status.idle)        { border-color: rgba(var(--status-idle), 0.4);       background: rgba(var(--status-idle), 0.06);       box-shadow: inset 0 0 12px -2px rgba(var(--status-idle), 0.18); }
.machines-status-pill:has(.machines-status.readying)    { border-color: rgba(var(--status-readying), 0.4);   background: rgba(var(--status-readying), 0.06);   box-shadow: inset 0 0 12px -2px rgba(var(--status-readying), 0.18); }
.machines-status-pill:has(.machines-status.countdown)   { border-color: rgba(var(--status-countdown), 0.4);  background: rgba(var(--status-countdown), 0.06);  box-shadow: inset 0 0 12px -2px rgba(var(--status-countdown), 0.18); }
.machines-status-pill:has(.machines-status.playing)     { border-color: rgba(var(--status-playing), 0.4);    background: rgba(var(--status-playing), 0.06);    box-shadow: inset 0 0 12px -2px rgba(var(--status-playing), 0.18); }
.machines-status-pill:has(.machines-status.checking)    { border-color: rgba(var(--status-checking), 0.4);   background: rgba(var(--status-checking), 0.06);   box-shadow: inset 0 0 12px -2px rgba(var(--status-checking), 0.18); }
.machines-status-pill:has(.machines-status.win)         { border-color: rgba(var(--status-win), 0.4);        background: rgba(var(--status-win), 0.06);        box-shadow: inset 0 0 12px -2px rgba(var(--status-win), 0.18); }
.machines-status-pill:has(.machines-status.restocking)  { border-color: rgba(var(--status-restocking), 0.4); background: rgba(var(--status-restocking), 0.06); box-shadow: inset 0 0 12px -2px rgba(var(--status-restocking), 0.18); }

.machines-status-pill .machines-status {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 8px 0 26px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    border-radius: 0;
    background: transparent;
    width: auto;
    box-sizing: border-box;
}
.machines-status-pill .machines-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.machines-status-pill .machines-status.offline::before    { background-color: rgb(var(--status-offline));    box-shadow: 0 0 6px 2px rgba(var(--status-offline),0.6); }
.machines-status-pill .machines-status.idle::before       { background-color: rgb(var(--status-idle));       box-shadow: 0 0 6px 2px rgba(var(--status-idle),0.6); }
.machines-status-pill .machines-status.readying::before   { background-color: rgb(var(--status-readying));   box-shadow: 0 0 6px 2px rgba(var(--status-readying),0.6); }
.machines-status-pill .machines-status.countdown::before  { background-color: rgb(var(--status-countdown));  box-shadow: 0 0 6px 2px rgba(var(--status-countdown),0.6); }
.machines-status-pill .machines-status.playing::before    { background-color: rgb(var(--status-playing));    box-shadow: 0 0 6px 2px rgba(var(--status-playing),0.6); }
.machines-status-pill .machines-status.checking::before   { background-color: rgb(var(--status-checking));   box-shadow: 0 0 6px 2px rgba(var(--status-checking),0.6); }
.machines-status-pill .machines-status.win::before        { background-color: rgb(var(--status-win));        box-shadow: 0 0 6px 2px rgba(var(--status-win),0.6); }
.machines-status-pill .machines-status.restocking::before { background-color: rgb(var(--status-restocking)); box-shadow: 0 0 6px 2px rgba(var(--status-restocking),0.6); }
.machines-status-pill .machines-status.offline    { color: rgb(var(--status-offline)); }
.machines-status-pill .machines-status.idle       { color: rgb(var(--status-idle)); }
.machines-status-pill .machines-status.readying   { color: rgb(var(--status-readying)); }
.machines-status-pill .machines-status.countdown  { color: rgb(var(--status-countdown)); }
.machines-status-pill .machines-status.playing    { color: rgb(var(--status-playing)); }
.machines-status-pill .machines-status.checking   { color: rgb(var(--status-checking)); }
.machines-status-pill .machines-status.win        { color: rgb(var(--status-win)); }
.machines-status-pill .machines-status.restocking { color: rgb(var(--status-restocking)); }

.machines-status-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.machines-viewer-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: rgb(var(--spectator));
    white-space: nowrap;
    flex-shrink: 0;
}
.machines-viewer-count svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgb(var(--spectator));
    position: relative;
    top: -1px;
}
.machines-status-pill:has(.machines-status.offline) .machines-viewer-count,
.machines-status-pill:has(.machines-status.offline) .machines-viewer-count svg {
    color: rgb(var(--status-offline));
}
.machines-card:has(.machines-status.offline)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 15, 0.45);
    border-radius: var(--radius);
    pointer-events: none;
    z-index: 10;
}

.machines-info {
    padding: 12px 14px 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.machines-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    gap: 6px;
}
.machines-name {
    font-size: 1rem;
    font-weight: 900;
    color: var(--machine-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 0 0 12px color-mix(in srgb, var(--machine-accent) 40%, transparent);
}

.machines-style-htp {
    display: inline-flex;
    align-items: stretch;
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 99px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: none;
    width: 100%;
    margin-bottom: 10px;
}
.machines-status-bar .machines-style-htp {
    height: 30px;
    width: 144px;
    margin-bottom: 0;
    align-items: center;
}
.machines-status-bar .machines-style-htp-left { padding: 0 8px 0 10px; font-size: 0.68rem; }
.machines-status-bar .machines-style-htp-right { padding: 0 10px; }
.machines-status-bar .machines-style-htp-right svg { width: 16px; height: 16px; }
.machines-style-htp:hover {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.04);
    transform: none;
    box-shadow: none;
    color: var(--text);
}
.machines-style-htp-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    flex: 1;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 0;
}
.machines-style-htp .tut-seg-bar i { width: 3px; height: 8px; }
.machines-style-htp-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}
.machines-style-htp-right svg { width: 20px; height: 20px; flex-shrink: 0; }

.machines-prize-container {
    margin-bottom: 12px;
    background-color: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.machines-prize-container.prize       { cursor: pointer; }
.machines-prize-container.prize:hover { border-color: var(--machine-accent); }
.machines-prize-top {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
}
.machines-prize-image {
    width: 48px; height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.machines-prize-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.machines-prize-name {
    font-size: 1.0rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.machines-footer { margin-top: auto; }
.machines-queue-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    min-height: 32px;
}
.machines-queue-avatars { display: flex; align-items: center; }
.machines-queue-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--bg-light);
    margin-right: -6px;
    transition: transform 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.machines-queue-avatar.playing { border-color: var(--success); }
.machines-queue-avatar:hover   { transform: translateY(-3px); z-index: 1; }
.machines-queue-avatar img     { width: 100%; height: 100%; object-fit: cover; }
.machines-queue-count { font-size: 0.82rem; color: var(--gray); font-weight: 600; margin-left: 14px; }

.machines-play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--bg);
    color: var(--machine-accent);
    border: 2px solid var(--machine-accent);
    padding: 12px;
    border-radius: var(--radius);
    font-weight: 800;
    font-size: 1rem;
    width: 100%;
    height: 54px;
    transition: var(--transition);
    text-decoration: none;
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--machine-accent) 25%, transparent);
    animation: machines-play-pulse 2s ease-in-out infinite;
}
.machines-play-button:hover {
    background-color: color-mix(in srgb, var(--machine-accent) 18%, var(--bg-light));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -2px color-mix(in srgb, var(--machine-accent) 50%, transparent);
    color: var(--text);
    cursor: pointer;
}
.machines-play-button:disabled {
    background: var(--bg-light);
    color: var(--gray);
    border-color: var(--gray);
    animation: none;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.machines-play-button-icon { width: 18px; height: 18px; }

@keyframes machines-play-pulse {
    0%, 100% { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--machine-accent) 20%, transparent); }
    50%       { box-shadow: 0 4px 22px 0px color-mix(in srgb, var(--machine-accent) 55%, transparent); }
}

@media (max-width: 576px) {
    .machines-announce-card           { min-height: 110px; }
    .machines-announce-content        { padding: 14px 16px; gap: 4px; }
    .machines-announce-eyebrow        { font-size: 0.6rem; letter-spacing: 2px; }
    .machines-announce-title-label    { font-size: 0.75rem; }
    .machines-announce-title-code     { font-size: 1.3rem; padding: 2px 10px; letter-spacing: 3px; }
    .machines-announce-title-main     { font-size: 1.3rem; }
    .machines-announce-sub            { font-size: 0.75rem; }
}

/* ============================================================
   PLAY PAGE
   ============================================================ */
.play-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}

.play-content {
    display: grid;
    grid-template-columns: 1fr 640px 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
    align-items: start;
}

/* Bottom row: leaderboards (70%) + recent plays (30%) */
.play-bottom-row {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
}
.play-bottom-row .play-leaderboards-section {
    grid-column: unset;
    grid-row: unset;
    flex: 1 1 50%;
    min-width: 0;
}
.play-leaderboards-section .leaderboards-list { margin-top: 0; margin-bottom: 0; }
.play-recent-plays-section {
    flex: 1 1 50%;
    min-width: 0;
}

/* Leaderboards panel */
.play-leaderboards-wrapper {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.play-leaderboards-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    height: 63px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
}
.play-leaderboards-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}
.play-leaderboards-filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: auto;
}
.play-leaderboards-filters .leaderboards-filter-btn {
    padding: 7px 14px;
    font-size: 0.82rem;
}
.play-leaderboards-wrapper .leaderboards-list {
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Compact row sizing scoped to play page (~80% of full size) */
.play-leaderboards-wrapper .leaderboards-row {
    padding: 18px 20px;
    gap: 0;
}
.play-leaderboards-wrapper .leaderboards-row:hover { padding-left: 20px; }
.play-leaderboards-wrapper .leaderboards-rank {
    width: 40px;
    font-size: 0.9rem;
    padding: 6px 0;
}
.play-leaderboards-wrapper .leaderboards-row-avatar {
    width: 36px;
    height: 36px;
    margin: 0 12px;
}
.play-leaderboards-wrapper .leaderboards-name {
    font-size: 0.9rem;
    margin-right: 16px;
}
.play-leaderboards-wrapper .leaderboards-score {
    font-size: 0.9rem;
    padding: 6px 13px;
}

/* 1st / 2nd / 3rd place row treatments scoped to play page */
.play-leaderboards-wrapper .leaderboards-row.first {
    background: linear-gradient(90deg, rgba(230,184,0,0.08) 0%, transparent 60%);
    border-left: 3px solid #E6B800;
    box-shadow: inset 0 0 20px rgba(230,184,0,0.06);
}
.play-leaderboards-wrapper .leaderboards-row.first .leaderboards-rank {
    color: #FFD700;
    background: linear-gradient(135deg, rgba(230,184,0,0.2), rgba(230,184,0,0.08));
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}
.play-leaderboards-wrapper .leaderboards-row.first .leaderboards-name { color: #FFD700; }
.play-leaderboards-wrapper .leaderboards-row.first:hover .leaderboards-name { color: var(--primary); }
.play-leaderboards-wrapper .leaderboards-row.first .leaderboards-row-avatar {
    border-color: #E6B800;
    box-shadow: 0 0 10px rgba(230,184,0,0.5);
}

.play-leaderboards-wrapper .leaderboards-row.second {
    background: linear-gradient(90deg, rgba(56,185,175,0.07) 0%, transparent 60%);
    border-left: 3px solid #38B9AF;
    box-shadow: inset 0 0 20px rgba(56,185,175,0.04);
}
.play-leaderboards-wrapper .leaderboards-row.second .leaderboards-rank {
    color: #38B9AF;
    background: linear-gradient(135deg, rgba(56,185,175,0.18), rgba(56,185,175,0.07));
    text-shadow: 0 0 6px rgba(56,185,175,0.5);
}
.play-leaderboards-wrapper .leaderboards-row.second .leaderboards-name { color: #38B9AF; }
.play-leaderboards-wrapper .leaderboards-row.second:hover .leaderboards-name { color: var(--primary); }
.play-leaderboards-wrapper .leaderboards-row.second .leaderboards-row-avatar {
    border-color: #38B9AF;
    box-shadow: 0 0 8px rgba(56,185,175,0.4);
}

.play-leaderboards-wrapper .leaderboards-row.third {
    background: linear-gradient(90deg, rgba(205,127,50,0.07) 0%, transparent 60%);
    border-left: 3px solid #CD7F32;
    box-shadow: inset 0 0 20px rgba(205,127,50,0.04);
}
.play-leaderboards-wrapper .leaderboards-row.third .leaderboards-rank {
    color: #CD7F32;
    background: linear-gradient(135deg, rgba(205,127,50,0.18), rgba(205,127,50,0.07));
    text-shadow: 0 0 6px rgba(205,127,50,0.5);
}
.play-leaderboards-wrapper .leaderboards-row.third .leaderboards-name { color: #CD7F32; }
.play-leaderboards-wrapper .leaderboards-row.third:hover .leaderboards-name { color: var(--primary); }
.play-leaderboards-wrapper .leaderboards-row.third .leaderboards-row-avatar {
    border-color: #CD7F32;
    box-shadow: 0 0 8px rgba(205,127,50,0.4);
}

/* Empty row — always render 10, fill blanks with this */
.leaderboards-row.empty {
    cursor: default;
    opacity: 0.3;
    pointer-events: none;
}
.leaderboards-row.empty .leaderboards-rank { color: var(--gray); background: rgba(255,255,255,0.04); }
.leaderboards-row.empty .leaderboards-row-avatar { visibility: hidden; }
.leaderboards-row.empty .leaderboards-name::after {
    content: '———';
    color: var(--gray);
    letter-spacing: 2px;
    font-size: 0.75rem;
}
.leaderboards-row.empty .leaderboards-score { visibility: hidden; }

/* Recent plays panel */
.play-recent-plays-wrapper {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.play-recent-plays-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 63px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.play-recent-plays-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}
.play-recent-plays-list {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Recent play row */
.play-recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease, padding-left 0.2s ease;
    cursor: pointer;
}
.play-recent-row:last-child { border-bottom: none; }
.play-recent-row:hover {
    background: rgba(255, 107, 107, 0.05);
    padding-left: 20px;
}
.play-recent-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.play-recent-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
}
.play-recent-thumb-placeholder svg { width: 20px; height: 20px; }
.play-recent-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.play-recent-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.play-recent-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-light);
}

.play-recent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}
.play-recent-row:hover .play-recent-avatar {
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
}

.play-recent-win-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    box-shadow: 0 2px 12px rgba(66, 184, 131, 0.5), 0 0 0 1px rgba(66, 184, 131, 0.2);
}
.play-recent-win-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: btn-sweep 2.5s ease-in-out infinite;
}
.play-recent-win-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 1200px) {
    .play-bottom-row { flex-direction: column; }
    .play-bottom-row .play-leaderboards-section,
    .play-recent-plays-section { flex: none; width: 100%; }
    .play-recent-plays-list { overflow: hidden; flex: 1; }
    .play-leaderboards-filters .leaderboards-filter-btn { padding: 6px 10px; font-size: 0.78rem; }
}
@media (max-width: 768px) {
    .play-bottom-row { gap: 10px; }
    .play-leaderboards-header { padding: 0 14px; height: auto; min-height: 52px; gap: 8px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
    .play-leaderboards-filters { margin-left: 0; width: 100%; }
    .play-leaderboards-filters .leaderboards-filter-btn { flex: 1; text-align: center; padding: 6px 8px; font-size: 0.76rem; white-space: nowrap; }
    .play-recent-plays-header { padding: 0 14px; height: 52px; min-height: unset; }
    .play-recent-plays-list { overflow: hidden; flex: 1; max-height: unset; }
    .play-recent-row { padding: 8px 12px; gap: 10px; }
    .play-recent-row:hover { padding-left: 16px; }
    .play-recent-thumb,
    .play-recent-thumb-placeholder { width: 44px; height: 44px; }
}

.play-machine-info    { display: flex; justify-content: space-between; align-items: center; }
.play-machine-title h1 { font-size: 1.8rem; color: var(--secondary); }
.play-queue-error     { color: var(--danger); text-align: center; font-weight: bold; padding-top: 5px; animation: scale-pulse 0.5s; }

.play-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, #3dd68c 0%, #22a060 100%);
    color: #fff;
    border: none;
    padding: 0 10px;
    margin-top: 10px;
    border-radius: var(--radius);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    width: 100%;
    min-height: 60px;
    max-height: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(66,184,131,0.3), 0 6px 24px rgba(66,184,131,0.4);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
}
.play-join-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: play-join-sheen 2.5s ease-in-out infinite;
    pointer-events: none;
}
.play-join-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #4ae89e 0%, #29b870 100%);
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(66,184,131,0.45), 0 10px 32px rgba(66,184,131,0.5);
}
.play-join-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(66,184,131,0.35); }
.play-join-btn:disabled {
    background: var(--gray);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
    transform: none;
}
.play-join-btn:disabled::before { display: none; }
.play-join-btn:disabled:hover { background: var(--gray); transform: none; box-shadow: none; }

@keyframes play-join-sheen {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.play-leave-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: var(--text);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 20px 10px;
    margin-top: 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    min-height: 60px;
    max-height: 60px;
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
    transition: var(--transition);
    transform: translateZ(0);
}
.play-leave-btn:hover  { background: linear-gradient(135deg, #f15f5f, #d64545); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4); }
.play-leave-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(231, 76, 60, 0.3); }

.play-indicator-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.play-status-indicator {
    flex-grow: 1;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
}
.play-status-indicator.offline    { background-color: rgb(var(--status-offline));    box-shadow: 0 0 6px 2px rgba(var(--status-offline),0.5); }
.play-status-indicator.idle       { background-color: rgb(var(--status-idle));       box-shadow: 0 0 6px 2px rgba(var(--status-idle),0.5); }
.play-status-indicator.readying   { background-color: rgb(var(--status-readying));   box-shadow: 0 0 6px 2px rgba(var(--status-readying),0.5); }
.play-status-indicator.countdown  { background-color: rgb(var(--status-countdown));  box-shadow: 0 0 6px 2px rgba(var(--status-countdown),0.5); }
.play-status-indicator.playing    { background-color: rgb(var(--status-playing));    box-shadow: 0 0 6px 2px rgba(var(--status-playing),0.5); }
.play-status-indicator.checking   { background-color: rgb(var(--status-checking));   box-shadow: 0 0 6px 2px rgba(var(--status-checking),0.5); }
.play-status-indicator.win        { background-color: rgb(var(--status-win));        box-shadow: 0 0 6px 2px rgba(var(--status-win),0.5); }
.play-status-indicator.restocking { background-color: rgb(var(--status-restocking)); box-shadow: 0 0 6px 2px rgba(var(--status-restocking),0.5); }

.play-timer-pill {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 10px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    background-color: rgba(91, 101, 115, 0.70);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(91, 101, 115, 0.50);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    white-space: nowrap;
}

.play-timer-pill.status-offline   { background-color: rgba(var(--status-offline),0.70);    border-color: rgba(var(--status-offline),0.50);    box-shadow: 0 2px 14px rgba(var(--status-offline),0.45),    0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-idle      { background-color: rgba(var(--status-idle),0.70);       border-color: rgba(var(--status-idle),0.50);       box-shadow: 0 2px 14px rgba(var(--status-idle),0.45),       0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-readying  { background-color: rgba(var(--status-readying),0.70);   border-color: rgba(var(--status-readying),0.50);   box-shadow: 0 2px 14px rgba(var(--status-readying),0.45),   0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-countdown { background-color: rgba(var(--status-countdown),0.70);  border-color: rgba(var(--status-countdown),0.50);  box-shadow: 0 2px 14px rgba(var(--status-countdown),0.45),  0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-playing   { background-color: rgba(var(--status-playing),0.70);    border-color: rgba(var(--status-playing),0.50);    box-shadow: 0 2px 14px rgba(var(--status-playing),0.45),    0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-checking  { background-color: rgba(var(--status-checking),0.70);   border-color: rgba(var(--status-checking),0.50);   box-shadow: 0 2px 14px rgba(var(--status-checking),0.45),   0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-win       { background-color: rgba(var(--status-win),0.70);        border-color: rgba(var(--status-win),0.50);        box-shadow: 0 2px 14px rgba(var(--status-win),0.45),        0 0 0 1px rgba(0,0,0,0.3); }
.play-timer-pill.status-restocking{ background-color: rgba(var(--status-restocking),0.70); border-color: rgba(var(--status-restocking),0.50); box-shadow: 0 2px 14px rgba(var(--status-restocking),0.45), 0 0 0 1px rgba(0,0,0,0.3); }

.play-timer-pill.urgent {
    background-color: rgba(200, 20, 20, 0.80);
    border-color: rgba(255, 80, 80, 0.55);
    box-shadow: 0 2px 20px rgba(220,30,30,0.65), 0 0 0 1px rgba(0,0,0,0.3);
    animation: timer-beat var(--beat-duration, 1s) ease-in-out infinite;
}
@keyframes timer-beat {
    0%   { transform: translateX(-50%) scale(1);    box-shadow: 0 2px 16px rgba(220,30,30,0.55), 0 0 0 1px rgba(0,0,0,0.3); }
    40%  { transform: translateX(-50%) scale(1.09); box-shadow: 0 2px 26px rgba(220,30,30,0.85), 0 0 0 1px rgba(0,0,0,0.3); }
    100% { transform: translateX(-50%) scale(1);    box-shadow: 0 2px 16px rgba(220,30,30,0.55), 0 0 0 1px rgba(0,0,0,0.3); }
}
.play-timer-time {
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.play-timer-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.play-timer-icon svg { width: 100%; height: 100%; }

.play-viewer-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 10px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    background-color: rgba(60, 44, 101, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(130, 90, 220, 0.30);
    box-shadow: 0 2px 10px rgba(60, 30, 140, 0.30), 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    white-space: nowrap;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.play-viewer-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.play-viewer-icon svg { width: 100%; height: 100%; }

.play-left-column {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    align-self: stretch;
    height: 640px;
    overflow: visible;
}

.play-game-info-section {
    --machine-accent: #ff6b6b; 
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 0;
    height: fit-content;
    min-width: 0;
    animation: play-info-glow 3s ease-in-out infinite;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 35%, transparent),
        0 0 16px -4px color-mix(in srgb, var(--machine-accent) 22%, transparent);
}
@keyframes play-info-glow {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 28%, transparent),
            0 0 14px -4px color-mix(in srgb, var(--machine-accent) 12%, transparent);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 65%, transparent),
            0 0 24px -2px color-mix(in srgb, var(--machine-accent) 38%, transparent);
    }
}

.play-game-info { width: 100%; min-width: 0; }

.play-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--machine-accent) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--machine-accent) 20%, transparent);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
}

.play-game-body {
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.play-game-title {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.play-game-title h2 {
    font-size: 1.2rem;
    color: var(--machine-accent);
    margin: 0;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}

.play-game-cost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FFD060, #D99C27);
    border: none;
    border-radius: 20px;
    padding: 5px 12px 5px 8px;
    height: auto;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    white-space: nowrap;
}
.play-game-cost img { width: 22px; height: 22px; flex-shrink: 0; }

.play-how-to-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 6px 12px;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    width: fit-content;
    box-shadow: none;
}
.play-how-to-play-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }
.play-how-to-play-btn:hover { background: var(--primary); color: var(--text); transform: translateY(-1px); }

.play-info-htp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.play-info-htp-btn svg   { width: 30px; height: 30px; display: block; }
.play-info-htp-btn:hover { background: none; box-shadow: none; color: var(--text); transform: translateY(-1px); }

.play-rewards-container { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.play-reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
    flex: 1;
    max-width: 200px;
    transition: border-color 0.2s ease;
}
.play-reward-item-prize { cursor: pointer; }
.play-reward-item-prize:hover { border-color: color-mix(in srgb, var(--machine-accent) 60%, transparent); }

.play-reward-icon    { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--machine-accent); }
.play-prize-thumbnail {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.2);
}
.play-prize-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.play-reward-details { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.play-reward-label   { font-size: 0.7rem; color: var(--green); font-weight: 600; margin-bottom: 2px; }
.play-reward-value   { font-size: 0.85rem; color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-no-rewards     { font-size: 0.85rem; color: var(--gray); font-style: italic; padding: 8px 0; }

.play-chat-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.play-chat-container { flex: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.play-chat-messages  { flex: 1; overflow-y: auto; padding: 15px; box-sizing: border-box; min-height: 0; visibility: hidden; }
.play-chat-messages.chat-ready { visibility: visible; }

.play-chat-message { margin-bottom: 20px; display: flex; flex-direction: column; gap: 5px; }

.play-message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin-left: -4px; transition: background 0.15s ease; }
.play-message-header:hover { background: rgba(255,255,255,0.06); }
.play-message-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.play-message-username { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.play-message-time { font-size: 0.7rem; font-weight: bold; color: var(--gray); margin-left: auto; }

.play-message-content {
    font-weight: 600;
    font-size: 0.9em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    background-color: var(--bg);
    padding: 10px;
    border-radius: 12px;
    max-width: 100%;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.play-chat-form { display: flex; gap: 10px; padding: 15px; box-sizing: border-box; }

.play-chat-input {
    flex: 1;
    min-width: 0;
    padding: 12px 15px;
    border: 2px solid var(--gray);
    background-color: var(--bg);
    color: var(--text);
    border-radius: 25px;
    outline: none;
    font-size: 0.95rem;
}
.play-chat-input:focus { border-color: var(--primary); }

.play-chat-send-btn {
    width: 46px; height: 46px;
    flex-shrink: 0;
    background-color: var(--primary);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.play-chat-send-btn:hover { background-color: var(--primary-dark); transform: scale(1.05); }
.play-chat-send-btn svg   { width: 18px; height: 18px; }

.play-chat-settings-wrap {
    position: relative;
    flex-shrink: 0;
}
.play-chat-settings-btn {
    width: 46px; height: 46px;
    background: var(--bg-light);
    border: 2px solid var(--gray-dark);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.play-chat-settings-btn svg { width: 16px; height: 16px; }
.play-chat-settings-btn:hover,
.play-chat-settings-btn.active { color: var(--text); border-color: var(--primary); background: var(--bg-light); }

.play-chat-settings-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-width: 170px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 50;
}
.play-chat-settings-panel.open { display: block; }

.play-chat-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.play-chat-settings-row + .play-chat-settings-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.play-chat-settings-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

.play-chat-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.play-chat-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.play-chat-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-dark);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}
.play-chat-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.play-chat-toggle input:checked + .play-chat-toggle-slider { background: var(--primary); }
.play-chat-toggle input:checked + .play-chat-toggle-slider::before { transform: translateX(16px); }

.play-video-section {
    grid-column: 2;
    grid-row: 1 / 3;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 640px;
}
.play-video-container { width: 640px; height: 640px; position: relative; flex-shrink: 0; }

.play-video-feed {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
.play-video-feed canvas { opacity: 0; width: 100%; height: 100%; background-color: black; display: block; object-fit: contain; }
.play-video-feed canvas.visible { opacity: 1; }

.play-video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.play-video-overlay.active { opacity: 0.8; pointer-events: auto; }
.play-overlay-content { text-align: center; color: var(--text); padding: 20px; font-weight: bold; font-size: 5em; }

.play-video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    z-index: 5;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.play-video-loading.hidden { opacity: 0; }
.play-video-spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.85);
    border-radius: 50%;
    animation: play-spin 0.8s linear infinite;
}
@keyframes play-spin { to { transform: rotate(360deg); } }

.play-cam-switch-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    background: linear-gradient(135deg, rgba(6,182,212,0.85) 0%, rgba(99,102,241,0.85) 100%);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(6,182,212,0.45), 0 0 0 1px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    animation: cam-pulse 2.8s ease-in-out infinite;
}
.play-cam-switch-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(6,182,212,0.65), 0 0 0 1px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, rgba(6,182,212,1) 0%, rgba(99,102,241,1) 100%);
    animation: none;
}
.play-cam-switch-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.play-cam-switch-badge {
    background: rgba(0,0,0,0.35);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
@keyframes cam-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(6,182,212,0.45), 0 0 0 1px rgba(0,0,0,0.3); }
    50%       { box-shadow: 0 4px 28px rgba(6,182,212,0.75), 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 5px rgba(6,182,212,0.18); }
}

.play-cam-switch-btn:disabled {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
    backdrop-filter: none;
}
.play-cam-switch-btn:disabled:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,0.08);
}
.play-cam-switch-btn:disabled .play-cam-switch-badge {
    background: rgba(255,255,255,0.06);
}

.play-video-controls { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 10px; }
.play-video-control-btn {
    width: 30px; height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    padding: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.play-video-control-btn:hover { background: none; color: rgba(255,255,255,1); }
.play-video-control-btn svg   { width: 18px; height: 18px; }

.play-controls-section {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 640px;
    min-width: 0;
}

.play-player-queue,
.play-game-controls {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 10px;
}

.play-player-queue { flex: 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.play-scrollable-queue {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--bg);
    min-width: 0;
}

.play-queue-player {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--gray);
    cursor: pointer;
    min-width: 0;
}
.play-queue-player-avatar {
    width: 32px; height: 32px;
    margin-right: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.play-queue-player-avatar.playing { border: 3px solid var(--success); box-sizing: border-box; }

.play-queue-player-name {
    flex: 1;
    min-width: 0;
    font-weight: bold;
    color: var(--text);
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.play-queue-player-position,
.play-queue-player-position-number {
    flex-shrink: 0;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text);
    margin-left: 8px;
}
.play-queue-player-position.playing,
.play-queue-player-position-number.playing { color: var(--success); }

.play-queue-player-plays {
    flex-shrink: 0;
    font-size: 0.72em;
    font-weight: 800;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    padding: 1px 7px;
    margin-left: 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.play-game-controls { flex: 1.5; display: flex; flex-direction: column; justify-content: center; }
.play-game-controls.disabled { opacity: 0.4; }

.play-gamepad {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    max-width: 500px;
    margin: 0 auto;
}

.play-directional-pad { position: relative; width: 140px; height: 140px; flex-shrink: 0; }

.play-dpad-btn {
    position: absolute;
    width: 50px; height: 50px;
    background-color: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.play-dpad-btn:disabled { background-color: var(--primary); }
.play-dpad-btn svg      { width: 24px; height: 24px; }

.play-left-btn   { left: 0;   top: 50%;  transform: translateY(-50%); }
.play-right-btn  { right: 0;  top: 50%;  transform: translateY(-50%); }
.play-forward-btn { left: 50%; top: 0;    transform: translateX(-50%); }
.play-backward-btn { left: 50%; bottom: 0; transform: translateX(-50%); }

.play-dpad-btn:hover              { background-color: var(--primary-dark); transform: scale(1.05); }
.play-left-btn:hover,
.play-right-btn:hover             { background-color: var(--primary-dark); transform: translateY(-50%) scale(1.05); }
.play-forward-btn:hover,
.play-backward-btn:hover          { background-color: var(--primary-dark); transform: translateX(-50%) scale(1.05); }

.play-dpad-btn:disabled:hover              { background-color: var(--primary); transform: scale(1); }
.play-left-btn:disabled:hover,
.play-right-btn:disabled:hover             { background-color: var(--primary); transform: translateY(-50%); }
.play-forward-btn:disabled:hover,
.play-backward-btn:disabled:hover          { background-color: var(--primary); transform: translateX(-50%); }

.play-dpad-btn:active             { transform: scale(0.95); }
.play-left-btn:active,
.play-right-btn:active            { transform: translateY(-50%) scale(0.95); }
.play-forward-btn:active,
.play-backward-btn:active         { transform: translateX(-50%) scale(0.95); }

.play-dpad-btn.pressed            { background-color: var(--primary-dark); opacity: 0.9; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
.play-left-btn.pressed,
.play-right-btn.pressed           { transform: translateY(-50%) scale(0.95); }
.play-forward-btn.pressed,
.play-backward-btn.pressed        { transform: translateX(-50%) scale(0.95); }

.play-dpad-center {
    position: absolute;
    width: 40px; height: 40px;
    background-color: var(--light-gray);
    border-radius: var(--radius-sm);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

.play-grab-btn-container { display: flex; align-items: center; justify-content: center; width: 140px; flex-shrink: 0; }

.play-grab-btn {
    width: 140px; height: 140px;
    background-color: var(--secondary);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: var(--transition);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.play-grab-btn:disabled { background-color: var(--secondary); }
.play-grab-btn:hover    { background-color: var(--secondary-dark); box-shadow: 0 4px 8px var(--shadow-secondary); transform: scale(1.05); }
.play-grab-btn:active   { transform: scale(0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.play-grab-btn.pressed  { background-color: var(--secondary-dark); opacity: 0.9; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); transform: scale(0.95); }

.play-grab-text { font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; }
.play-grab-icon { width: 42px; height: 42px; }

#play_game_controls:focus          { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-sm); }
#play_game_controls:focus:not(:focus-visible) { outline: none; }
.play-dpad-btn:focus,
.play-grab-btn:focus               { outline: 2px solid var(--primary); outline-offset: 2px; }
.play-dpad-btn:focus:not(:focus-visible),
.play-grab-btn:focus:not(:focus-visible) { outline: none; }

/* Safari: kill residual tap highlight on dpad/grab that persists after :active */
@media (hover: none) {
    .play-dpad-btn,
    .play-grab-btn  { -webkit-tap-highlight-color: transparent; outline: none; }
    .play-dpad-btn:focus,
    .play-grab-btn:focus { outline: none; }
}

.play-queue-btn-overlay { display: none; }
.play-queue-btn-overlay .play-join-btn,
.play-queue-btn-overlay .play-leave-btn {
    width: auto;
    min-height: unset;
    max-height: unset;
    padding: 10px 22px;
    font-size: 1rem;
    border-radius: 999px;
    margin-top: 0;
    backdrop-filter: blur(8px);
    transform: none;
}
.play-queue-btn-overlay .play-join-btn {
    background: linear-gradient(135deg, rgba(61,214,140,0.82) 0%, rgba(34,160,96,0.82) 100%);
    border: none;
    box-shadow: 0 2px 16px rgba(66,184,131,0.45), 0 0 0 1px rgba(66,184,131,0.25);
}
.play-queue-btn-overlay .play-leave-btn {
    background: rgba(180, 50, 40, 0.8);
    border: none;
    box-shadow: 0 2px 16px rgba(180,50,40,0.4), 0 0 0 1px rgba(231,76,60,0.3);
}
.play-queue-btn-overlay .play-join-btn:hover {
    background: linear-gradient(135deg, rgba(74,232,158,0.92) 0%, rgba(41,184,112,0.92) 100%);
    transform: none;
    box-shadow: 0 4px 20px rgba(66,184,131,0.55), 0 0 0 1px rgba(66,184,131,0.35);
}
.play-queue-btn-overlay .play-leave-btn:hover { background: rgba(210,65,50,0.92); transform: none; }
/* Shrink SVG icons inside the overlay buttons */
.play-queue-btn-overlay .play-join-btn svg,
.play-queue-btn-overlay .play-leave-btn svg { width: 18px; height: 18px; }

@media (max-width: 1200px) {
    .play-content               { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-items: stretch; }
    .play-video-section         { grid-column: 1 / 3; grid-row: 1; }
    .play-video-container       { width: 100%; height: auto; max-height: 640px; aspect-ratio: 1 / 1; }
    
    .play-content               { grid-template-rows: auto 580px auto; }
    .play-left-column           { grid-column: 1; grid-row: 2; height: 580px; }
    .play-chat-section          { flex: 1; min-height: 0; overflow: hidden; }
    .play-controls-section      { grid-column: 2; grid-row: 2; height: 580px; display: flex; flex-direction: column; gap: 15px; }
    .play-game-controls         { order: 0; flex: 0 0 auto; }
    .play-indicator-wrapper     { display: flex; width: 100%; order: 1; }
    .play-player-queue          { order: 4; flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
    .play-scrollable-queue      { flex: 1; overflow-y: auto; }
    .play-bottom-row            { grid-column: 1 / 3; grid-row: 3; }
    
    .play-queue-btn-overlay          { display: flex; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 16; }
}
@media (max-width: 768px) {
    
    .play-content               { display: flex; flex-direction: column; gap: 10px; margin-top: 0; margin-bottom: 15px; }
    
    .play-video-section         { order: 1; width: 100vw; margin-left: calc(-1 * (100vw - 100%) / 2); border-radius: 0; height: auto; margin-top: -13px}
    .play-video-container       { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 90vw; }
    
    .play-controls-section      { order: 2; display: flex; flex-direction: column; gap: 10px; height: auto; }
    .play-indicator-wrapper     { display: flex; gap: 10px; align-items: center; }
    .play-game-controls         { order: 0; }
    .play-player-queue          { order: 1; height: 220px; }
    
    .play-left-column           { order: 3; height: auto; display: flex; flex-direction: column; gap: 10px; }
    .play-chat-section          { height: 340px; flex: none; overflow: hidden; }
    
    .play-bottom-row            { order: 4; margin-top: 0; }
    
    .play-game-title            { flex-direction: column; align-items: flex-start; gap: 8px; }
    .play-game-title h2         { font-size: 1.2rem; }
    .play-rewards-container     { flex-direction: column; gap: 8px; }
    .play-reward-item           { max-width: none; width: 100%; }
    .play-leaderboards-filters .leaderboards-filter-btn { flex: 1; min-width: 0; padding: 6px 8px; font-size: 0.76rem; }
    .play-player-queue          { height: 220px; flex: none; }
    
    .play-queue-btn-overlay          { display: flex; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 16; }
}

@media (max-width: 480px) {
    .play-directional-pad   { width: 110px; height: 110px; }
    .play-dpad-btn          { width: 40px; height: 40px; }
    .play-dpad-center       { width: 32px; height: 32px; }
    .play-grab-btn-container { width: 110px; }
    .play-grab-btn          { width: 110px; height: 110px; }
    .play-grab-text         { font-size: 1.2rem; }
    .play-grab-icon         { width: 34px; height: 34px; }
}

/* ============================================================
   PRIZES PAGE
   ============================================================ */

.prizes-announce-bar {
    overflow: hidden;
    margin-bottom: 10px;
}

.prizes-announce-track {
    display: flex;
    gap: 10px;
    width: 100%;
}

.prizes-announce-track.is-scrolling {
    width: max-content;
}

.prizes-announce-card {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 130px;
    display: flex;
    align-items: stretch;
}

.prizes-announce-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.prizes-announce-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(8, 8, 12, 0.82) 0%,
        rgba(8, 8, 12, 0.45) 60%,
        rgba(8, 8, 12, 0.05) 100%
    );
}

.prizes-announce-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.prizes-announce-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.prizes-announce-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
}

.prizes-announce-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.prizes-announce-title-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-light);
}

.prizes-announce-title-code {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--yellow);
    font-family: 'Courier New', Courier, monospace;
    background: rgba(255, 230, 109, 0.08);
    border: 1px solid rgba(255, 230, 109, 0.35);
    border-radius: 8px;
    padding: 3px 14px;
    letter-spacing: 5px;
}

.prizes-announce-title-main {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text);
}
.prizes-announce-title-main span { color: var(--secondary); }

.prizes-announce-sub {
    font-size: 0.82rem;
    color: var(--text-light);
    font-weight: 600;
}

@media (max-width: 576px) {
    .prizes-announce-track          { flex-direction: column; }
    .prizes-announce-card           { min-height: 110px; }
    .prizes-announce-content        { padding: 14px 16px; gap: 4px; }
    .prizes-announce-eyebrow        { font-size: 0.6rem; letter-spacing: 2px; }
    .prizes-announce-title-label    { font-size: 0.75rem; }
    .prizes-announce-title-code     { font-size: 1.3rem; padding: 2px 10px; letter-spacing: 3px; }
    .prizes-announce-title-main     { font-size: 1.3rem; }
    .prizes-announce-sub            { font-size: 0.75rem; }
}

.prizes-container {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prizes-container > * {
    width: 100%;
}

.prizes-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    animation: scale-pulse 2s infinite;
    cursor: pointer;
    background-color: var(--green);
    color: var(--text);
}
.prizes-buy-button:hover { color: var(--text); background-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(107,255,107,0.3); }

@keyframes play-for-it-pulse {
    0%, 100% { outline: 2px solid rgba(255,107,107,0); outline-offset: 0px; }
    50%       { outline: 2px solid rgba(255,107,107,0.7); outline-offset: 3px; }
}
.prizes-play-for-it-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    cursor: pointer;
    background-color: var(--primary);
    color: #fff;
    animation: play-for-it-pulse 2s infinite;
}
.prizes-play-for-it-button:hover { color: #fff; background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,107,107,0.5); }
.prizes-play-for-it-button svg { width: 14px; height: 14px; flex-shrink: 0; }

.prizes-filter         { margin-bottom: 24px; }
.prizes-filter-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 10px 14px;
    width: 100%;
}

.prizes-filter-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-sm);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}
.prizes-filter-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.prizes-filter-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.20);
    transform: none;
    box-shadow: none;
}
.prizes-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: none;
    box-shadow: 0 0 14px rgba(255, 107, 107, 0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
    .prizes-filter {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 20px;
    }
    .prizes-filter::-webkit-scrollbar { display: none; }
    .prizes-filter-options {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
    }
    .prizes-filter-btn { font-size: 0.95rem; padding: 12px 22px; }
}

.prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.prizes-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prizes-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.prizes-card:hover .prizes-image img { transform: scale(1.05); }

.prizes-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.prizes-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; }

.prizes-details { flex: 1 1 auto; display: flex; flex-direction: column; padding: 20px; }

.prizes-name {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prizes-cost-overlay {
    position: absolute;
    top: 15px; left: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background-color: #D95927;
    box-shadow: 0 2px 8px rgba(0,0,0,1);
    color: var(--text);
    z-index: 2;
    gap: 4px;
}
.prizes-cost-overlay .currency-icon { width: 20px; height: 20px; margin-top: -1px; }
.prizes-cost-value  { font-size: 1.2rem; }

.prizes-actions { display: flex; gap: 10px; margin-top: auto; }

.prizes-favorite-btn {
    position: absolute;
    top: 15px; right: 15px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.72);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    padding: 0;
}
.prizes-favorite-btn:hover { background: rgba(0,0,0,0.88); transform: scale(1.1); box-shadow: none; }
.prizes-favorite-btn svg   { width: 20px; height: 20px; color: rgba(255,255,255,0.9); fill: none; transition: color 0.15s ease, fill 0.15s ease; }
.prizes-favorite-btn.favorited svg { color: #f4c430; fill: #f4c430; }

@media (max-width: 768px) {
    .prizes-grid    { grid-template-columns: 1fr; }
}

/* ============================================================
   LEADERBOARDS PAGE
   ============================================================ */
.leaderboards-container {
    max-width: 1200px;
    margin: 0 auto;
}

.leaderboards-filters { display: flex; gap: 12px; }

.leaderboards-filter-btn {
    background: linear-gradient(135deg, var(--bg-light), var(--bg));
    color: var(--text-light);
    border: 2px solid var(--gray);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.leaderboards-filter-btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}
.leaderboards-filter-btn:hover::before { left: 100%; }
.leaderboards-filter-btn:hover {
    border-color: var(--primary);
    color: var(--text);
    transform: none;
}
.leaderboards-filter-btn.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text);
    transform: none;
    box-shadow: 0 4px 15px rgba(255,107,107,0.3);
}

.leaderboards-hero {
    position: relative;
    text-align: center;
    padding: 20px 20px 20px;
    margin-bottom: 25px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.08) 0%, rgba(255,107,107,0.05) 45%, transparent 70%),
        linear-gradient(135deg, rgba(41,47,54,0.98), rgba(29,33,37,0.98));
}
.leaderboards-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,215,0,0.06) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: hero-sweep 4s ease-in-out infinite;
    pointer-events: none;
}
.leaderboards-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6), rgba(255,107,107,0.4), rgba(255,215,0,0.6), transparent);
    border-radius: 0 0 4px 4px;
    animation: hero-top-glow 3s ease-in-out infinite alternate;
}
@keyframes hero-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes hero-top-glow {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

.hero-crown {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)) drop-shadow(0 2px 8px rgba(255,150,0,0.4));
    animation: crown-float 3s ease-in-out infinite;
}
@keyframes crown-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }
}

.hero-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #FFD700;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle-pop var(--dur) ease-in-out var(--delay) infinite;
}
.hero-sparkle::before, .hero-sparkle::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.hero-sparkle::before { width: 1px; height: 6px; top: -1px; left: 1px; }
.hero-sparkle::after  { width: 6px; height: 1px; top: 1px; left: -1px; }
@keyframes sparkle-pop {
    0%   { opacity: 0; transform: scale(0) rotate(0deg); }
    30%  { opacity: 1; transform: scale(1) rotate(45deg); }
    70%  { opacity: 0.7; transform: scale(0.8) rotate(90deg); }
    100% { opacity: 0; transform: scale(0) rotate(135deg); }
}

.hero-title {
    position: relative;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #FF6B6B 60%, #FFE66D 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shimmer 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 6px rgba(255,215,0,0.3));
}
@keyframes title-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.hero-subtitle {
    position: relative;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
}

.hero-stats {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,215,0,0.12);
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: 0.5px;
}
.hero-stat svg { width: 12px; height: 12px; flex-shrink: 0; }
.hero-stat-val { color: #FFD700; }

.leaderboards-top3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 50px;
    perspective: 1000px;
    align-items: end;
}

.leaderboards-top-player {
    background: linear-gradient(135deg, var(--bg-light), var(--bg));
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.06);
}
.leaderboards-top-player:hover        { transform: translateY(-6px); }
.leaderboards-top-player.second:hover { box-shadow: 0 0 30px rgba(56,185,175,0.5), 0 20px 40px rgba(0,0,0,0.3); }
.leaderboards-top-player.third:hover  { box-shadow: 0 0 30px rgba(205,127,50,0.5), 0 20px 40px rgba(0,0,0,0.3); }

.leaderboards-top-player.first {
    background: linear-gradient(135deg, var(--bg-light), var(--bg));
    border: 3px solid #E6B800;
    box-shadow: 0 0 35px rgba(230,184,0,0.8), 0 10px 25px rgba(0,0,0,0.25);
    z-index: 3;
    padding-top: 32px;
    padding-bottom: 28px;
}
.leaderboards-top-player.first::before {
    content: "";
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: var(--radius-lg);
    background: linear-gradient(45deg, #E6B800, #CC8400, #E6B800, #CC8400);
    z-index: -1;
    animation: golden-border-pulse 2s ease-in-out infinite alternate;
}
@keyframes golden-border-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.03); }
    100% { opacity: 0.7; transform: scale(1); }
}
.leaderboards-top-player.first:hover  { transform: translateY(-10px); box-shadow: 0 0 60px rgba(255,215,0,0.7), 0 25px 50px rgba(0,0,0,0.4); }
.leaderboards-top-player.second { border: 3px solid #38B9AF; background: var(--bg-light); box-shadow: 0 0 25px rgba(56,185,175,0.5), 0 8px 25px rgba(0,0,0,0.3); z-index: 2; }
.leaderboards-top-player.third  { border: 3px solid #CD7F32; background: var(--bg-light); box-shadow: 0 0 25px rgba(205,127,50,0.5), 0 8px 25px rgba(0,0,0,0.3); z-index: 2; }

.leaderboards-top-rank          { font-size: 1.8rem; font-weight: bold; margin-bottom: 12px; text-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.leaderboards-top-player.first  .leaderboards-top-rank { color: #FFD700; font-size: 2.2rem; text-shadow: 0 0 12px rgba(255,215,0,0.6), 0 2px 5px rgba(0,0,0,0.8); }
.leaderboards-top-player.second .leaderboards-top-rank { color: #38B9AF; text-shadow: 0 0 8px rgba(56,185,175,0.6); }
.leaderboards-top-player.third  .leaderboards-top-rank { color: #CD7F32; text-shadow: 0 0 8px rgba(205,127,50,0.6); }

.leaderboards-top-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.leaderboards-top-player.first  .leaderboards-top-avatar { width: 100px; height: 100px; border: 3px solid #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.5), 0 5px 15px rgba(0,0,0,0.3); }
.leaderboards-top-player.second .leaderboards-top-avatar { border: 3px solid #38B9AF; }
.leaderboards-top-player.third  .leaderboards-top-avatar { border: 3px solid #CD7F32; }
.leaderboards-top-player:hover  .leaderboards-top-avatar { transform: scale(1.08); }

.leaderboards-top-nameplate {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
}
.leaderboards-top-name { font-weight: bold; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leaderboards-top-score {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: bold;
    background: linear-gradient(135deg, rgba(66,184,131,0.8), rgba(66,184,131,0.6));
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.leaderboards-top-player.first .leaderboards-top-score { border: 1px solid rgba(66,184,131,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 1.2rem; }

.leaderboards-list {
    background: linear-gradient(135deg, var(--bg-light), var(--bg));
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.leaderboards-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.leaderboards-row:hover         { padding-left: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
.leaderboards-row:last-child    { border-bottom: none; }

.leaderboards-rank {
    width: 50px;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--text-light);
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: var(--radius-sm);
    padding: 8px 0;
    transition: var(--transition);
}
.leaderboards-row:hover .leaderboards-rank { color: var(--primary); background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,107,107,0.1)); }

.leaderboards-row-avatar {
    width: 45px; height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 15px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.2);
    transition: var(--transition);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.leaderboards-row:hover .leaderboards-row-avatar { transform: scale(1.1); border-color: var(--primary); box-shadow: 0 5px 15px rgba(255,107,107,0.3); }

.leaderboards-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}
.leaderboards-row:hover .leaderboards-name { color: var(--primary); }

.leaderboards-score {
    font-weight: bold;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--green);
    background: linear-gradient(135deg, rgba(66,184,131,0.1), rgba(66,184,131,0.05));
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.leaderboards-row:hover .leaderboards-score { background: linear-gradient(135deg, rgba(66,184,131,0.2), rgba(66,184,131,0.1)); transform: scale(1.05); }

@media (max-width: 768px) {
    
    .leaderboards-top3              { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; align-items: stretch; }
    .leaderboards-top-player.first  { order: 1; }
    .leaderboards-top-player.second { order: 2; }
    .leaderboards-top-player.third  { order: 3; }
    .leaderboards-row        { padding: 12px 15px; gap: 10px; }
    .leaderboards-row-avatar { width: 30px; height: 30px; margin: 0 8px 0 0; }
    .leaderboards-list       { font-size: 0.85rem; }
    .leaderboards-rank       { width: 30px; font-size: 0.9rem; padding: 4px 0; }
    .leaderboards-name       { margin-right: 10px; font-size: 0.9rem; }
    .leaderboards-score      { font-size: 0.9rem; padding: 4px 8px; min-width: 40px; text-align: center; }
}

/* ============================================================
   AUTH PAGES — shared card shell
   ============================================================ */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
}

.auth-card {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 500px;
    padding: 20px 40px;
    transition: transform 0.3s ease;
}

.auth-header           { text-align: center; margin-bottom: 20px; }
.auth-header h1        { color: var(--primary); font-size: 1.8rem; }
.auth-header p         { color: var(--text); }

.auth-logo {
    width: 100px;
    aspect-ratio: 1 / 1;
    height: auto;
    animation: auth-logo-bounce 2s infinite;
}
@keyframes auth-logo-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.auth-form  { margin-bottom: 20px; }

.form-group { margin-bottom: 20px; }

.form-group label,
.form-group-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--gray);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--text);
    background-color: var(--bg);
    border-radius: var(--radius);
    box-sizing: border-box;
}
.form-group textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary); transition: border-color 0.3s ease; }
.form-group.error input,
.form-group.error select,
.form-group.error textarea { border-color: var(--danger); }

.form-error { color: var(--danger); text-align: start; font-weight: bold; }

.form-row { display: flex; gap: 15px; margin-bottom: 5px; flex: 1; }

.auth-button {
    width: 100%;
    padding: 12px;
    background-color: var(--primary);
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}
.auth-button:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255,107,107,0.4); }

.auth-footer        { text-align: center; color: var(--text); }
.auth-footer a,
.auth-footer a:visited,
.auth-footer a:active { color: var(--primary); font-weight: 600; cursor: pointer; }
.auth-footer a:hover  { text-decoration: underline; }

.auth-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.auth-remember-me label { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
.auth-remember-me input { cursor: pointer; }
.auth-forgot-link       { color: var(--primary); font-weight: 600; cursor: pointer; }
.auth-forgot-link:hover { text-decoration: underline; }

.auth-terms-group         { display: flex; align-items: flex-start; gap: 10px; }
.auth-terms-group input   { width: auto; margin-top: 5px; }
.auth-terms-group label   { margin-bottom: 0; font-size: 0.9rem; }
.auth-terms-group a       { color: var(--primary); font-weight: 600; }
.auth-terms-group a:hover { text-decoration: underline; }

@media (max-width: 576px) {
    .auth-card  { padding: 30px 20px; margin: 0 15px; }
    .form-row   { flex-direction: column; gap: 0; }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
/* ── Profile layout ── */
.profile-top-row {
    margin-top: 10px;
    margin-bottom: 14px;
    display: flex;
    gap: 14px;
    align-items: stretch;
}

/* view page: left half — avatar/name/bio */
.profile-header {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    padding: 28px 28px;
    margin: 0;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* edit page: header is a direct child of container, not inside top-row */
.profile-container > .profile-header {
    flex-direction: row;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 14px;
    overflow: visible;
}

/* view page: level card — right half */
.profile-level-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    padding: 28px 36px;
    border: 1px solid rgba(255, 230, 109, 0.18);
    box-shadow: 0 0 24px rgba(255, 230, 109, 0.06), inset 0 0 40px rgba(255, 230, 109, 0.03);
}

.profile-level-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255, 230, 109, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.profile-level-number {
    font-size: 4rem;
    font-weight: 900;
    color: var(--yellow);
    line-height: 1;
    text-shadow:
        0 0 10px rgba(255, 230, 109, 0.55),
        0 0 22px rgba(255, 230, 109, 0.2);
}

.profile-xp-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-xp-meta {
    display: flex;
    justify-content: space-between;
}

.profile-xp-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255, 230, 109, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.profile-xp-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.profile-xp-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #b37700, var(--yellow), #ffe08a);
    background-size: 200% 100%;
    animation: profile-xp-shimmer 2.5s linear infinite;
    box-shadow: 0 0 8px rgba(255, 230, 109, 0.6), 0 0 18px rgba(255, 230, 109, 0.25);
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes profile-xp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.profile-xp-bar-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 230, 109, 0.45);
    text-align: right;
}
.profile-avatar-container { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }

.profile-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-ring {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 3px var(--bg-light),
        0 0 0 5px rgba(255, 107, 107, 0.45),
        0 0 20px rgba(255, 107, 107, 0.2);
}
.profile-avatar { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-edit-btn {
    position: absolute;
    bottom: 0; left: 0;
    transform: translate(-25%, 25%);
    background-color: var(--primary);
    color: var(--text);
    border-radius: 50%;
    width: 38px; height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.6em;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.profile-avatar-edit-btn:hover { background-color: var(--primary-dark); transform: translate(-25%, 25%); }

.profile-join-date    { margin-top: 4px; }
.profile-join-date p  { font-weight: 700; font-size: 0.72em; color: rgba(255, 255, 255, 0.55); text-align: center; }
.profile-join-date p:first-child { color: rgba(255, 107, 107, 0.5); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62em; }

.profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-info label { display: block; font-weight: 600; color: var(--text); }

.profile-display-name {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.profile-bio-inline {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.6;
    font-style: italic;
    margin-top: 4px;
}

/* ── Stats strip: full width below top row ── */
.profile-stats-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--bg-light);
    border-radius: var(--radius);
    border: 1px solid rgba(56, 185, 175, 0.15);
    box-shadow: 0 0 24px rgba(56, 185, 175, 0.05);
    padding: 18px 24px;
    margin-bottom: 14px;
    overflow: hidden;
}

.profile-stats-strip p,
.profile-stats-strip em {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-light);
    font-size: 0.88rem;
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    position: relative;
    min-width: 0;
}

.profile-stat + .profile-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; height: 70%;
    width: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.profile-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--secondary);
    line-height: 1;
    text-shadow: 0 0 10px rgba(56, 185, 175, 0.65), 0 0 22px rgba(56, 185, 175, 0.25);
}

.profile-stat-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-light);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* ── Bio / plays / settings cards ── */
.profile-bio,
.profile-plays,
.profile-settings {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    padding: 24px 26px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.profile-header input  { margin-top: 10px; width: 75%; }
.profile-bio textarea  { margin-top: 10px; width: 100%; height: 100px; resize: vertical; }

.profile-edit-btn {
    width: 50%; height: 35px;
    background-color: var(--secondary);
}
.profile-edit-btn:hover { background-color: var(--secondary-dark); box-shadow: 0 4px 8px var(--shadow-secondary); }

.profile-edit-btns {
    display: flex;
    gap: 10px;
    width: 50%;
    margin-bottom: 10px;
}
.profile-save-btn   { flex: 1; height: 35px; background-color: var(--green); }
.profile-save-btn:hover  { background-color: var(--green-dark); box-shadow: 0 4px 8px var(--shadow-green); }
.profile-cancel-btn { flex: 1; height: 35px; }

.profile-plays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.profile-play-card {
    background-color: var(--bg);
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--machine-accent) 35%, transparent), 0 0 16px -4px color-mix(in srgb, var(--machine-accent) 22%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text);
    cursor: pointer;
}
.profile-play-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--machine-accent), 0 0 32px -2px color-mix(in srgb, var(--machine-accent) 55%, transparent); }

.profile-play-image { position: relative; height: 180px; overflow: hidden; }
.profile-play-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.profile-play-card:hover .profile-play-image img { transform: scale(1.05); }

.profile-play-status { position: absolute; top: 15px; right: 15px; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.profile-play-status.win  {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    box-shadow: 0 2px 12px rgba(66,184,131,0.5), 0 0 0 1px rgba(66,184,131,0.2);
    overflow: hidden;
}
.profile-play-status.win::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: btn-sweep 2.5s ease-in-out infinite;
}
.profile-play-status.win svg { width: 16px; height: 16px; flex-shrink: 0; position: relative; top: -1px; fill: currentColor; }
.profile-play-status.refunded { background-color: var(--primary); color: var(--text); }

.profile-play-details { padding: 15px; }
.profile-play-title { color: var(--machine-accent); }
.profile-play-title:hover { color: color-mix(in srgb, var(--machine-accent) 70%, white); }
.profile-play-date  { font-size: 0.9rem; color: var(--light-gray); margin-bottom: 2px; }
.profile-play-id    { font-size: 0.75rem; color: var(--secondary); font-family: monospace; }

.profile-settings-options { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.profile-setting { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--text); cursor: pointer; }
.profile-setting input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

@media (max-width: 768px) {
    .profile-top-row        { flex-direction: column; }
    .profile-header         { flex-direction: column; align-items: center; text-align: center; }
    .profile-level-card     { padding: 20px 24px; }
    .profile-level-number   { font-size: 3rem; }
    .profile-avatar-container { margin-bottom: 4px; }
    .profile-info           { align-items: center; }
    .profile-display-name   { text-align: center; }
    .profile-join-date      { margin-bottom: 6px; }
    .profile-edit-btn,
    .profile-edit-btns      { width: 100%; }
    .profile-bio textarea,
    .profile-header input   { width: 100%; }
}
@media (max-width: 700px) {
    .profile-stats-strip {
        grid-template-columns: repeat(3, 1fr);
        padding: 14px 12px;
    }
    .profile-stat-label     { white-space: normal; font-size: 0.6rem; }
    .profile-stat-value     { font-size: 1.4rem; }
    .profile-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.06); }
    .profile-stat:nth-child(4)::before,
    .profile-stat:nth-child(5)::before { display: none; }
}
@media (max-width: 400px) {
    .profile-stats-strip    { grid-template-columns: repeat(2, 1fr); }
    .profile-stat:nth-child(3) { border-top: 1px solid rgba(255,255,255,.06); }
    .profile-stat:nth-child(3)::before,
    .profile-stat:nth-child(4)::before { display: none; }
}
@media (max-width: 576px) {
    .profile-plays-grid     { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.account-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.account-row { display: flex; gap: 20px; justify-content: center; align-items: stretch; }

.account-left-col  { display: flex; flex-direction: column; flex: 1; min-width: 320px; }
.account-right-col { flex: 1.5; min-width: 400px; }

.account-panel {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-md);
    height: 100%;
    box-sizing: border-box;
    width: 100%;
}

.account-form-group { margin-bottom: 12px; flex: 1; }
.account-form-group label { display: block; margin-bottom: 6px; color: var(--text-light); font-size: 0.9rem; }
.account-form-group input,
.account-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--gray);
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background-color: var(--bg);
    border-radius: 4px;
    box-sizing: border-box;
}
.account-form-group input:focus,
.account-form-group select:focus { outline: none; border-color: var(--primary-dark); transition: border-color 0.3s ease; }
.account-form-group.error input,
.account-form-group.error select { border-color: var(--danger); }

.account-form-error { color: var(--danger); text-align: start; font-weight: bold; }
.account-form-row   { display: flex; gap: 15px; margin-bottom: 12px; }

.account-section-title {
    font-size: 1.3rem;
    color: var(--text);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 8px;
}
.account-section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary); border-radius: 2px; }

.account-subsection-title {
    font-size: 1.1rem;
    color: var(--text);
    margin: 15px 0 12px;
    position: relative;
    padding-bottom: 6px;
}
.account-subsection-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background-color: var(--primary); border-radius: 2px; }

.account-email-section { padding-bottom: 15px; border-bottom: 1px solid var(--gray); margin-bottom: 15px; }
.account-vip-section   { border-bottom: 1px solid var(--gray); padding-bottom: 15px; }

.account-vip-details { display: flex; flex-direction: column; gap: 8px; }
.account-vip-detail  { display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
.account-vip-label   { font-weight: 600; color: var(--text-light); font-size: 0.95rem; }
.account-vip-value   { font-weight: 700; color: var(--text); font-size: 0.95rem; }

.account-save-btn {
    width: 100%; height: 40px;
    background-color: var(--green);
    margin-top: 10px;
}
.account-save-btn:hover { background-color: var(--green-dark); box-shadow: 0 4px 8px var(--shadow-green); }

.account-subscribe-btn {
    width: 100%; height: 40px;
    margin-top: 15px;
    background-color: var(--secondary);
}
.account-subscribe-btn:hover { background-color: var(--secondary-dark); box-shadow: 0 4px 8px var(--shadow-secondary); }

.account-resend-btn {
    display: block;
    margin-top: 8px;
    width: 100%;
    height: 40px;
    background: transparent;
    border: 1px solid var(--secondary);
    border-radius: var(--radius);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    padding: 7px 14px;
}
.account-resend-btn:hover {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 4px 8px var(--shadow-secondary);
    transform: none;
}

.account-unsubscribe-btn {
    width: 100%; height: 40px;
    margin-top: 15px;
    background-color: var(--primary);
}
.account-unsubscribe-btn:hover { background-color: var(--primary-dark); box-shadow: 0 4px 8px var(--shadow-primary); }

.account-shipping-reveal-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    margin-bottom: 16px;
}
.account-shipping-reveal-btn:hover {
    border-color: var(--secondary);
    background-color: rgba(56, 185, 175, 0.06);
    transform: none;
    box-shadow: none;
}
.account-shipping-reveal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.account-shipping-reveal-icon svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}
.account-shipping-reveal-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.account-shipping-reveal-title {
    font-size: 1rem;
    font-weight: 700;
}
.account-shipping-reveal-sub {
    font-size: 0.8rem;
    color: var(--text-light);
}
.account-shipping-reveal-chevron {
    width: 18px;
    height: 18px;
    color: var(--text-light);
    flex-shrink: 0;
    transition: var(--transition);
}
.account-shipping-reveal-btn:hover .account-shipping-reveal-chevron {
    color: var(--secondary);
    transform: translateX(3px);
}
.account-shipping-reveal-btn.open .account-shipping-reveal-chevron {
    transform: rotate(90deg);
}
.account-shipping-reveal-btn.open:hover .account-shipping-reveal-chevron {
    transform: rotate(90deg) translateX(-3px);
}

.account-hidden { display: none; }

@media (max-width: 900px) {
    .account-wrapper      { padding: 0 10px; }
    .account-row          { flex-direction: column; gap: 15px; }
    .account-left-col,
    .account-right-col    { width: 100%; max-width: 100%; min-width: unset; }
    .account-left-col     { order: 2; }
    .account-right-col    { order: 1; }
    .account-panel        { padding: 15px; width: 100%; box-sizing: border-box; }
    .account-form-row     { flex-direction: column; gap: 12px; margin-bottom: 0; }
    .account-vip-detail   { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 480px) {
    .account-panel           { padding: 12px; }
    .account-section-title   { font-size: 1.2rem; }
    .account-subsection-title { font-size: 1rem; }
    .account-form-group input,
    .account-form-group select { padding: 8px 10px; font-size: 0.9rem; }
}

/* ============================================================
   ERROR PAGE
   ============================================================ */
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 40px 40px;
    margin: 40px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background-color: var(--bg-light);
}
.error-container h1 { font-size: 3rem; color: var(--primary); margin-bottom: 10px; }
.error-container p  { font-size: 1.2rem; color: var(--gray); margin-bottom: 20px; }
.error-container a  {
    font-size: 1rem;
    color: var(--primary);
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}
.error-container a:hover { background-color: var(--primary); color: var(--light); }

/* ============================================================
   PURCHASE PAGE
   ============================================================ */
.purchase-container { max-width: 1400px; margin: 0 auto; padding-bottom: 30px; }

.purchase-header     { text-align: center; margin-bottom: 40px; }
.purchase-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.purchase-subtitle   { color: var(--light-gray); font-size: 1.1rem; }

.purchase-container { max-width: 1400px; margin: 0 auto; padding-bottom: 30px; }

.purchase-header   { text-align: center; margin-bottom: 40px; }
.purchase-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(to right, var(--yellow), #ffab40);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.purchase-subtitle { color: var(--light-gray); font-size: 1.1rem; }

.purchase-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 36px;
}
.purchase-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    max-width: 280px;
    padding: 14px 32px;
    border-radius: var(--radius);
    border: 2px solid var(--gray);
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.purchase-tab:hover                   { transform: none; box-shadow: none; background-color: var(--bg); }
.purchase-tab[data-tab="coins"]:hover { border-color: var(--yellow); color: var(--yellow); }
.purchase-tab[data-tab="vip"]:hover   { border-color: var(--secondary); color: var(--secondary); }
.purchase-tab-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;        
  align-items: center; 
}

.purchase-tab.active-coins {
    border-color: var(--yellow);
    background: linear-gradient(135deg, rgba(255,230,109,0.12), rgba(255,171,64,0.08));
    color: var(--yellow);
    box-shadow: 0 0 16px rgba(255,230,109,0.2);
}
.purchase-tab.active-vip {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(78,205,196,0.12), rgba(78,205,196,0.06));
    color: var(--secondary);
    box-shadow: 0 0 16px rgba(78,205,196,0.25);
}

.purchase-panel { display: none; }
.purchase-panel.active { display: block; }
#purchase-panel-vip.active { display: flex; }

.purchase-coins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 25px; }

.purchase-coin-card {
    background: linear-gradient(135deg, var(--bg-light) 0%, #2a3138 100%);
    border-radius: var(--radius);
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.05);
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    cursor: pointer;
}
.purchase-coin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.purchase-coin-card-popular { border-color: var(--primary); box-shadow: 0 0 20px rgba(255,107,107,0.3); }
.purchase-coin-card-popular::before {
    content: "POPULAR";
    position: absolute;
    top: 15px; right: -40px;
    background: var(--primary);
    color: white;
    font-weight: bold;
    padding: 5px 50px;
    transform: rotate(45deg);
    font-size: 0.85rem;
    letter-spacing: 1px;
    z-index: 2;
}

.purchase-coin-image   { width: 100px; height: 100px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; }
.purchase-coin-amount  { font-size: 1.8rem; font-weight: 800; color: var(--yellow); margin-bottom: 5px; text-shadow: 0 2px 5px rgba(255,230,109,0.3); }
.purchase-coin-bonus   { color: var(--secondary); font-weight: 600; font-size: 0.9rem; height: 21px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.purchase-coin-price-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 70px; margin-bottom: 15px; gap: 4px; }
.purchase-coin-original-price  { font-size: 1.2rem; color: var(--primary); text-decoration: line-through; margin: 0; min-height: 1.2rem; }
.purchase-coin-final-price     { font-size: 1.8rem; font-weight: 800; color: var(--text); margin: 0; }

@keyframes vipCardGlow {
    0%,100% { box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 10px rgba(255,215,0,0.25), 0 0 30px rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.4); }
    50%     { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.55), 0 0 55px rgba(255,215,0,0.18); border-color: rgba(255,215,0,1); }
}

@keyframes coinCardGlowInner {
    0%,100% { box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 10px rgba(255,215,0,0.25), 0 0 30px rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.4); }
    50%     { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.55), 0 0 55px rgba(255,215,0,0.18); border-color: rgba(255,215,0,1); }
}
.purchase-coin-card-popular {
    animation: coinCardGlowInner 2.5s ease-in-out infinite;
    border-color: rgba(255,215,0,0.5);
    border-width: 2px;
}

.purchase-btn {
    display: block;
    width: 100%;
    padding: 12px;
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    margin-top: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: center;
    box-sizing: border-box;
}
.purchase-btn:hover        { transform: translateY(-2px); color: var(--text); }
.purchase-btn::after       { content: ''; position: absolute; top: -50%; left: -60%; width: 50px; height: 200%; background: rgba(255,255,255,0.2); transform: rotate(30deg); transition: all 0.3s; }
.purchase-btn:hover::after { left: 120%; }
.purchase-coin-btn         { background: linear-gradient(to right, var(--primary), var(--primary-dark)); box-shadow: 0 4px 15px rgba(255,107,107,0.3); }
.purchase-coin-btn:hover   { background: linear-gradient(to right, var(--primary-dark), #d14545); box-shadow: 0 6px 20px rgba(255,107,107,0.4); }
.purchase-vip-btn          { background: linear-gradient(to right, var(--secondary), var(--secondary-dark)); box-shadow: 0 4px 15px rgba(78,205,196,0.3); }
.purchase-vip-btn:hover    { background: linear-gradient(to right, var(--secondary-dark), #34a89e); box-shadow: 0 6px 20px rgba(78,205,196,0.4); }

.purchase-vip-card {
    background: linear-gradient(135deg, #1a2e2d 0%, #1e3535 100%);
    border-radius: var(--radius);
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(78,205,196,0.15);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    min-height: 360px;
    box-sizing: border-box;
    cursor: pointer;
}
.purchase-vip-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.purchase-vip-card-popular { border-color: rgba(255,215,0,0.5); border-width: 2px; animation: vipCardGlow 2.5s ease-in-out infinite; }
.purchase-vip-card-popular::before {
    content: "POPULAR";
    position: absolute;
    top: 15px; right: -40px;
    background: var(--secondary);
    color: #fff;
    font-weight: bold;
    padding: 5px 50px;
    transform: rotate(45deg);
    font-size: 0.85rem;
    letter-spacing: 1px;
    z-index: 2;
}

#purchase-panel-vip {
    gap: 36px;
    align-items: flex-start;
}
.purchase-vip-hero {
    background: linear-gradient(135deg, var(--bg-light) 0%, #1e3535 100%);
    border-radius: var(--radius);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(78,205,196,0.3);
    flex: 0 0 390px;
    height: 480px;
    box-sizing: border-box;
}
@keyframes vipGlowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(78,205,196,0.2), 0 0 60px rgba(78,205,196,0.06); }
    50%       { box-shadow: 0 0 40px rgba(78,205,196,0.4), 0 0 100px rgba(78,205,196,0.12); }
}
.purchase-vip-hero.glowy {
    animation: vipGlowPulse 3s ease-in-out infinite;
}
.purchase-vip-content { position: relative; z-index: 1; }
.purchase-vip-title   { color: var(--secondary); font-size: 1.7rem; text-align: center; margin-bottom: 20px; }
.purchase-vip-grid    { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }

.purchase-vip-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.purchase-vip-feature      { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(78,205,196,0.1); border-radius: var(--radius); }
.purchase-vip-feature-icon {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    color: var(--text);
}
.purchase-vip-feature-icon svg {
    width: 100%;
    height: 100%;
}
.purchase-vip-feature-text { font-weight: 700; font-size: 0.95rem; text-align: left; }

.purchase-vip-duration { font-size: 1.8rem; font-weight: 800; color: #a855f7; text-shadow: 0 2px 5px rgba(192, 132, 252,0.3); margin-bottom: 5px; }
.purchase-vip-bonus    { color: var(--secondary); font-weight: 600; font-size: 0.9rem; height: 21px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.purchase-vip-price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    gap: 6px;
}
.purchase-vip-original-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    color: var(--primary);
    text-decoration: line-through;
    min-height: 1.2rem;
}
.purchase-vip-original-price img { width: 18px; height: 18px; flex-shrink: 0; }
.purchase-vip-image {
    width: 100px; height: 100px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    line-height: 1;
}
.purchase-vip-coin-cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--yellow);
    white-space: nowrap;
    flex-wrap: nowrap;
    min-width: 0;
}
.purchase-vip-coin-icon { width: 28px; height: 28px; flex-shrink: 0; }

@media (max-width: 900px) {
    #purchase-panel-vip       { flex-direction: column; }
    .purchase-vip-hero        { flex: none; width: 100%; padding: 20px; height: auto; }
    .purchase-vip-features    { display: grid; grid-template-columns: repeat(2, 1fr); }
    .purchase-vip-grid        { width: 100%; }
}
@media (max-width: 768px) {
    .purchase-container    { padding: 0 15px 30px; }
    .purchase-tabs         { gap: 8px; }
    .purchase-tab          { padding: 12px 20px; font-size: 1rem; }
    .purchase-vip-features { grid-template-columns: 1fr; }
    .purchase-vip-grid     { grid-template-columns: 1fr; }
    .purchase-coins-grid   { grid-template-columns: 1fr; }
    .purchase-vip-card     { min-height: 0; }
}

/* ============================================================
   PAYMENT PAGE
   ============================================================ */
.payment-container {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 30px;
    align-items: stretch;
}

.payment-order-summary {
    background: linear-gradient(135deg, var(--bg-light) 0%, #2a3138 100%);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-md);
    width: 100%;
}
.payment-summary-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; margin-top: 0; }

.payment-order-item    { display: flex; align-items: center; gap: 12px; padding: 15px 0; }
.payment-main-item     { padding: 20px 0; border-bottom: 2px solid rgba(255,255,255,0.1); }
.payment-main-item .payment-item-price { font-size: 1.4rem; color: var(--yellow); }

.payment-item-icon     { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.payment-coin-icon     { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(255,215,0,0.3)); }
.payment-coin-icon-sm  { width: 24px; height: 24px; }
.payment-discount-icon { color: var(--secondary); }

.payment-item-details  { flex: 1; min-width: 0; }
.payment-item-name     { font-weight: 600; margin-bottom: 4px; font-size: 1rem; }
.payment-item-desc     { font-size: 0.85rem; color: var(--light-gray); }
.payment-item-price    { font-size: 1.2rem; font-weight: 700; color: var(--text); flex-shrink: 0; }

.payment-discount-row  { color: var(--secondary); }
.payment-discount-row .payment-item-price { color: var(--secondary); }

.payment-bonus-row { color: var(--yellow); border-bottom: 1px solid rgba(255,255,255,0.05); }
.payment-bonus-row .payment-item-name,
.payment-bonus-row .payment-item-price { color: var(--yellow); }

.payment-balance-summary { background: rgba(78,205,196,0.08); border: 1px solid rgba(78,205,196,0.25); border-radius: var(--radius); padding: 15px; margin: 20px 0; }
.payment-balance-row     { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.95rem; }
.payment-balance-row:first-child { border-bottom: 1px solid rgba(255,255,255,0.05); }
.payment-balance-row:first-child .payment-balance-label,
.payment-balance-row:first-child .payment-balance-value { color: var(--text); font-weight: 700; }
.payment-balance-row:nth-child(2) .payment-balance-label,
.payment-balance-row:nth-child(2) .payment-balance-value { color: var(--yellow); font-weight: 700; }
.payment-balance-label { color: var(--light-gray); font-weight: 500; }
.payment-balance-value { font-weight: 700; color: var(--text); }

.payment-balance-final { padding-top: 12px; margin-top: 4px; border-top: 2px solid rgba(255,255,255,0.1); }
.payment-balance-final .payment-balance-label,
.payment-balance-final .payment-balance-value { color: var(--green); font-weight: 700; }
.payment-balance-final .payment-balance-label { font-size: 1.05rem; }
.payment-balance-highlight { color: var(--green); font-size: 1.3rem; font-weight: 700; }

.payment-total-row   { border-top: 2px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 10px; }
.payment-total-label { font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; }
.payment-total-price { font-size: 1.6rem; font-weight: 800; color: var(--primary); }

.payment-coupon-section { background: rgba(255,230,109,0.05); border: 1px solid rgba(255,230,109,0.2); border-radius: var(--radius); padding: 18px; margin-top: 20px; }
.payment-coupon-title   { font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.payment-coupon-row     { display: flex; gap: 8px; }
.payment-coupon-input   { flex: 1; padding: 10px 12px; background-color: var(--bg); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; transition: var(--transition); }
.payment-coupon-input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,230,109,0.1); }
.payment-coupon-btn     { padding: 10px 16px; background: linear-gradient(to right, #99893C, #eacc54); color: #fff; border: none; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: var(--transition); flex-shrink: 0; }
.payment-coupon-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255,230,109,0.3); color: #fff; }
.payment-coupon-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.payment-coupon-status  { margin-top: 12px; padding: 10px; border-radius: var(--radius); font-size: 0.85rem; display: none; text-align: center; font-weight: bold; }
.payment-coupon-status.error { background-color: rgba(220,53,69,0.15); border: 1px solid var(--danger); color: var(--danger); display: block; }

.payment-form { background: linear-gradient(135deg, var(--bg-light) 0%, #2a3138 100%); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }

.payment-form-header    { margin-bottom: 30px; }
.payment-form-title     { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; margin-top: 0; }
.payment-form-subtitle  { color: var(--light-gray); font-size: 0.95rem; }
.payment-section-title  { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--text); }

.payment-method-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.payment-method-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-light);
    border: 2px solid var(--gray);
    border-radius: var(--radius);
    color: var(--text-light);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: none;
}
button.payment-method-tab         { background: var(--bg-light); box-shadow: none; }
button.payment-method-tab:hover   { border-color: var(--secondary); color: var(--text); background: var(--bg-light); box-shadow: none; transform: none; }
button.payment-method-tab.active  { border-color: var(--secondary); color: var(--secondary); background: rgba(78,205,196,0.08); box-shadow: none; }
button.payment-method-tab.active:hover { background: rgba(78,205,196,0.08); color: var(--secondary); }
button.payment-method-tab:focus   { outline: none; box-shadow: 0 0 0 2px rgba(78,205,196,0.3); }
.payment-method-tab svg { width: 20px; height: 20px; flex-shrink: 0; }
.payment-method-tab svg { width: 20px; height: 20px; flex-shrink: 0; }

.payment-method-panel { display: none; }
.payment-method-panel.active { display: flex; flex-direction: column; flex: 1; }

#paypal-button-container { width: 100%; }

.payment-card-section   { background: rgba(78,205,196,0.05); border: 1px solid rgba(78,205,196,0.2); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; flex: 1; }

.payment-card-container { min-height: 145px; position: relative; }

.payment-card-loading   { display: flex; align-items: center; justify-content: center; }
.payment-card-spinner   { width: 40px; height: 40px; border: 3px solid rgba(78,205,196,0.2); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; }

.payment-submit-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(to right, var(--green), var(--green-dark));
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px var(--shadow-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px var(--shadow-green); }
.payment-submit-btn:disabled             { opacity: 0.5; cursor: not-allowed; transform: none; }

.payment-security-note {
    font-size: 0.85rem;
    color: var(--light-gray);
    text-align: center;
    margin-top: 20px;
    padding: 16px;
    background-color: rgba(255,255,255,0.03);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.payment-lock-icon  { flex-shrink: 0; opacity: 0.7; }
.payment-loading    { opacity: 0.6; pointer-events: none; }

.payment-spinner    { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: var(--text); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 10px; }
.payment-submit-btn.payment-loading .payment-spinner { display: inline-block; }

.payment-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    min-height: 500px;
    position: relative;
}
.payment-result-panda { width: 200px; height: 200px; margin-bottom: 25px; animation: panda-bounce 0.6s ease-out; position: relative; }
.payment-result-panda img { width: 100%; height: 100%; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.3)); }

.payment-result.success .payment-result-panda::before,
.payment-result.failure .payment-result-panda::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 250px; height: 250px;
    border-radius: 50%;
}
.payment-result.success .payment-result-panda::before { background: radial-gradient(circle, rgba(78,205,196,0.15) 0%, transparent 70%); animation: pulse-glow 2s ease-in-out infinite; }
.payment-result.failure .payment-result-panda::before { background: radial-gradient(circle, rgba(255,107,107,0.1) 0%, transparent 70%); }

.payment-result-title   { font-size: 2rem; font-weight: 700; margin-bottom: 12px; margin-top: 0; }
.payment-result-title.success { color: var(--green); text-shadow: 0 0 20px rgba(78,205,196,0.3); }
.payment-result-title.failure { color: var(--danger); }

.payment-result-msg { color: var(--light-gray); font-size: 1.05rem; margin-bottom: 35px; line-height: 1.5; max-width: 350px; }

.payment-success-btn,
.payment-failure-btn { position: relative; overflow: hidden; max-width: 280px; }
.payment-failure-btn::before { content: '↻'; margin-right: 8px; font-size: 1.2em; font-weight: bold; }
.payment-success-view-machines-btn { background: linear-gradient(to right, var(--green), var(--green-dark)); margin-bottom: 20px;}
.payment-success-view-vip-btn { background: #a855f7; box-shadow: 0 4px 15px #8b43d0;}
.payment-success-view-vip-btn:hover { background: #934ad9; box-shadow: 0 6px 15px #934ad9;}

.payment-failure-btn { background: linear-gradient(to right, var(--secondary), var(--secondary-dark)); box-shadow: 0 4px 15px var(--shadow-secondary); }
.payment-failure-btn:hover:not(:disabled) { box-shadow: 0 6px 20px var(--shadow-secondary); }

@keyframes panda-bounce {
    0%   { transform: scale(0) translateY(-50px); opacity: 0; }
    60%  { transform: scale(1.05) translateY(0); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .payment-card-container { min-height: 80px; }
}
@media (max-width: 968px) {
    .payment-container      { grid-template-columns: 1fr; gap: 20px; }
    .payment-order-summary  { order: -1; position: static; }
    .payment-form           { min-height: auto; }
    .payment-security-note  { margin-top: 20px; }
    .payment-result         { padding: 15px; min-height: 400px; }
    .payment-result-panda   { width: 160px; height: 160px; margin-bottom: 20px; }
    .payment-result-title   { font-size: 1.7rem; margin-bottom: 10px; }
    .payment-result-msg     { font-size: 0.95rem; margin-bottom: 28px; }
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-body   { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.faq-hero {
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-light) 100%);
    border-radius: 20px;
}
.faq-hero h1 { font-size: 3rem; font-weight: 800; color: var(--primary); margin-bottom: 20px; text-shadow: 2px 2px 0 rgba(255,107,107,0.2); }
.faq-hero p  { font-size: 1.3rem; color: var(--text-light); max-width: 600px; margin: 0 auto; }

.faq-content  { padding: 60px 0; background: var(--bg); }
.faq-section  { margin-bottom: 50px; }

.faq-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}
.faq-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 3px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    border-radius: 2px;
}

.faq-item {
    background: var(--bg-light);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.faq-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.faq-question {
    padding: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    transition: var(--transition);
    user-select: none;
}
.faq-question:hover { background: rgba(255,107,107,0.1); }
.faq-question::after { content: '+'; font-size: 1.5rem; font-weight: 800; color: var(--primary); transition: var(--transition); }
.faq-item.active .faq-question::after { transform: rotate(45deg); }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-content { padding: 20px 25px 25px; color: var(--text-light); font-size: 1rem; line-height: 1.7; }
.faq-item.active .faq-answer { max-height: 500px; }

.faq-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 40px 0;
    text-align: center;
    border-radius: 20px;
}
.faq-cta h2 { font-size: 2.5rem; font-weight: 700; color: white; margin-bottom: 20px; }
.faq-cta p  { font-size: 1.2rem; color: rgba(255,255,255,0.9); margin-bottom: 30px; }

.faq-cta-btn {
    display: inline-block;
    padding: 15px 30px;
    background: rgba(255,255,255,0.3);
    color: white;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1.1rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}
.faq-cta-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); color: white; }

@media (max-width: 768px) {
    .faq-hero h1          { font-size: 2rem; }
    .faq-hero p           { font-size: 1.1rem; }
    .faq-section-title    { font-size: 1.5rem; }
    .faq-question         { padding: 20px; font-size: 1rem; }
    .faq-answer-content   { padding: 0 20px 20px; }
}

/* ============================================================
   SHIPMENTS PAGE
   ============================================================ */

.shipments-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

/* ── Page header ── */
.shipments-page-header { padding: 4px 2px 0; }

.shipments-page-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: var(--text);
}

.shipments-page-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 8px;
    padding: 8px 13px;
    font-size: 0.8rem;
    color: #93c5fd;
    line-height: 1.4;
    margin: 0;
}

.shipments-page-hint svg { flex-shrink: 0; }
.shipments-page-hint strong { font-weight: 700; color: #bfdbfe; }

/* ── Prize card grid ── */
.shipments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.shipments-card {
    background: var(--bg-light);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    position: relative;
    user-select: none;
}

.shipments-card:hover { border-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

.shipments-card.selected {
    border-color: var(--secondary);
    background: rgba(56, 185, 175, 0.18);
    box-shadow: 0 0 0 2px var(--secondary), 0 0 18px rgba(56, 185, 175, 0.45);
    transform: translateY(-2px);
}

.shipments-card.selected .shipments-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(56, 185, 175, 0.15);
    pointer-events: none;
}

.shipments-card-img {
    aspect-ratio: 4 / 3;
    background: var(--bg);
    overflow: hidden;
    position: relative;
}

.shipments-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
    pointer-events: none;
}

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

/* info button — top-left, always visible */
.shipments-card-info-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(6px);
    line-height: 1;
}

.shipments-card-info-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.shipments-card-info-btn svg { display: block; }

.shipments-card-body { padding: 7px 9px 9px; }

.shipments-card-name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shipments-card-date { font-size: 0.65rem; color: var(--text-light); }

/* checkmark — top-right, appears on select */
.shipments-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.shipments-card.selected .shipments-card-check { opacity: 1; transform: scale(1); }

.shipments-card-status {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
}

.shipments-status-slow { background: rgba(108, 117, 125, 0.85); color: var(--text); }

.shipments-empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--text-light); }
.shipments-empty-state .shipments-icon { font-size: 2.8rem; display: block; margin-bottom: 12px; opacity: 0.4; }
.shipments-empty-state p { margin: 0; line-height: 1.6; opacity: 0.65; font-size: 0.9rem; }

/* ── Sticky action bar ── */
.shipments-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 14px 0 8px;
    background: linear-gradient(to top, var(--bg) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* button stands alone so pulse box-shadow isn't clipped */
.shipments-create-btn {
    padding: 13px 36px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    white-space: nowrap;
    animation: shipments-pulse 2.5s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.shipments-create-btn:hover:not(:disabled) {
    background-color: var(--secondary-dark);
    background: var(--secondary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(56, 185, 175, 0.45);
    animation: none;
}

.shipments-create-btn:disabled {
    cursor: default;
    animation: none;
    opacity: 0.3;
    background-color: var(--secondary);
    background: var(--secondary);
    transform: none;
    box-shadow: none;
}

.shipments-create-badge {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 82px;  /* fits "9999 prizes" without shifting */
    text-align: center;
}

/* cost — admin-stat style: label on top, value below */
.shipments-shipping-cost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    padding: 0 16px;
    height: 47px; /* matches button: 13px*2 padding + ~21px line height */
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 88px; /* icon(14) + gap(4) + 4-digit number(~36) + padding(32) */
}

.shipments-shipping-cost-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    opacity: 0.55;
    line-height: 1;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: block;
    width: 100%;
}

.shipments-shipping-cost-value {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.shipments-coin-icon { width: 14px; height: 14px; flex-shrink: 0; }
.shipments-shipping-cost-number { font-size: 0.88rem; font-weight: 700; color: var(--text); min-width: 24px; }

@keyframes shipments-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(56, 185, 175, 0.5); }
    50%       { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(56, 185, 175, 0); }
}

/* ── History section ── */
.shipments-history-section { background: var(--bg-light); border-radius: var(--radius); overflow: hidden; }

.shipments-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.shipments-history-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.shipments-history-badge {
    background: rgba(255, 107, 107, 0.12);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
}

#shipments_history { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }

.shipments-history-item { background: var(--bg); border-radius: var(--radius-sm); overflow: hidden; }

.shipments-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.shipments-history-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shipments-history-id { font-size: 0.88rem; font-weight: 700; color: var(--text); }

.shipments-history-meta-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shipments-history-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shipments-history-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
}

.shipments-history-pill--status-preparing { background: rgba(251, 191, 36,  0.12); color: #fbbf24; }
.shipments-history-pill--status-shipped   { background: rgba(96,  165, 250, 0.12); color: #60a5fa; }
.shipments-history-pill--status-delivered { background: rgba(52,  211, 153, 0.14); color: #34d399; }
.shipments-history-pill--status-cancelled { background: rgba(255, 107, 107, 0.12); color: var(--primary); }

.shipments-history-track-row { margin-top: 2px; width: 100%; }

.shipments-history-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.shipments-history-track-btn:hover {
    background: rgba(96, 165, 250, 0.28);
    border-color: rgba(96, 165, 250, 0.55);
    color: #93c5fd;
}

.shipments-history-prizes { padding: 10px 14px 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-wrap: wrap; gap: 8px; }

.shipments-shipped-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-light);
    transition: background 0.12s, color 0.12s;
}

.shipments-shipped-item:hover { background: rgba(56, 185, 175, 0.1); color: var(--secondary); }
.shipments-shipped-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }

@media (max-width: 768px) {
    .shipments-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}
@media (max-width: 600px) {
    .shipments-action-bar { padding: 10px 12px 6px; gap: 8px; }
    .shipments-create-btn { flex: 1; font-size: 0.88rem; padding: 10px 16px; justify-content: center; }
    .shipments-create-badge { min-width: 64px; }
    .shipments-shipping-cost { min-width: 78px; width: 78px; height: auto; padding: 6px 12px; }
    .shipments-shipping-cost-number { font-size: 0.85rem; min-width: 20px; }
}
@media (max-width: 480px) {
    .shipments-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ============================================================
   REPORT ISSUE PAGE
   ============================================================ */
.report-container { display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; }

.report-card {
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    padding: 20px 40px;
    transition: transform 0.3s ease;
}

.report-header           { text-align: center; margin-bottom: 20px; }
.report-header h1        { color: var(--primary); font-size: 1.8rem; margin-bottom: 10px; }
.report-header p         { color: var(--text-light); margin-bottom: 5px; }
.report-header.success h1 { color: var(--green); }

.report-display-value {
    padding: 12px 15px;
    border-radius: var(--radius);
    background-color: var(--bg-light);
    color: var(--text-light);
    border: 2px solid var(--gray);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    opacity: 0.7;
}

.report-input-group        { display: flex; gap: 10px; flex-wrap: wrap; }
.report-input-group .report-display-value { flex: 1; min-width: 200px; }
.report-input-group button {
    flex-shrink: 0;
    padding: 12px 20px;
    background-color: var(--primary);
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.report-input-group button:hover { background-color: var(--primary-dark); transform: translateY(-2px); }

.report-submit-btn {
    width: 100%; padding: 12px;
    background-color: var(--green);
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}
.report-submit-btn:hover    { background-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-green); }
.report-submit-btn:disabled { background-color: var(--gray); cursor: not-allowed; transform: none; }

.report-success-icon {
    width: 100px; height: 100px;
    margin: 0 auto 20px;
    background-color: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: report-success-pop 0.6s ease-out;
    box-shadow: 0 5px 15px var(--shadow-green);
}
.report-success-icon svg {
    width: 60px; height: 60px;
    stroke: var(--text);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    animation: report-checkmark-draw 0.8s ease-out 0.2s forwards;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
@keyframes report-success-pop {
    0%  { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100%{ transform: scale(1); opacity: 1; }
}
@keyframes report-checkmark-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 576px) {
    .report-card { padding: 30px 20px; margin: 0 15px; }
}

/* ============================================================
   MODALS — SPECIFIC VARIANTS
   (all share .modal + .modal-content + .modal-close base)
   ============================================================ */

.modal-win .modal-content {
    max-width: 600px;
    padding: 32px 30px 28px;
    overflow: visible;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,230,100,0.07) 0%, transparent 70%), var(--bg);
    border: 1px solid rgba(255,230,100,0.12);
    box-shadow: 0 0 60px rgba(255,215,0,0.08), 0 8px 32px rgba(0,0,0,0.6);
}

.modal-win-burst {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.modal-win-burst::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    padding-top: 140%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,230,100,0.04) 10deg, transparent 20deg,
        transparent 30deg, rgba(255,107,107,0.04) 40deg, transparent 50deg,
        transparent 60deg, rgba(56,185,175,0.04) 70deg, transparent 80deg,
        transparent 90deg, rgba(255,230,100,0.04) 100deg, transparent 110deg,
        transparent 120deg, rgba(255,107,107,0.04) 130deg, transparent 140deg,
        transparent 150deg, rgba(56,185,175,0.04) 160deg, transparent 170deg,
        transparent 180deg, rgba(255,230,100,0.04) 190deg, transparent 200deg,
        transparent 210deg, rgba(255,107,107,0.04) 220deg, transparent 230deg,
        transparent 240deg, rgba(56,185,175,0.04) 250deg, transparent 260deg,
        transparent 270deg, rgba(255,230,100,0.04) 280deg, transparent 290deg,
        transparent 300deg, rgba(255,107,107,0.04) 310deg, transparent 320deg,
        transparent 330deg, rgba(56,185,175,0.04) 340deg, transparent 350deg,
        transparent 360deg
    );
    animation: modal-win-burst-spin 12s linear infinite;
}
@keyframes modal-win-burst-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

.modal-win-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.modal-win-letter-space {
    width: 16px;
    flex-shrink: 0;
}
.modal-win-letter {
    display: inline-block;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    animation: win-letter-in 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
    animation-delay: calc(var(--i, 0) * 0.4s + 0.2s);
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    will-change: transform, opacity;
}

.modal-win-letter[style*="--i:0"] { color: #FF6B6B; }
.modal-win-letter[style*="--i:1"] { color: #FFE66D; }
.modal-win-letter[style*="--i:2"] { color: #38B9AF; }
.modal-win-letter[style*="--i:3"] { color: #FF6B6B; }
.modal-win-letter[style*="--i:4"] { color: #FFE66D; }
.modal-win-letter[style*="--i:5"] { color: #38B9AF; }

.modal-win-letter-bang {
    color: #FFE66D !important;
    animation: win-letter-in 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
    animation-delay: calc(6 * 0.4s + 0.2s);
}
.modal-win-letter-bang.win-letter-done {
    animation: win-bang-glow 1.2s ease-in-out infinite alternate;
    opacity: 1;
}
@keyframes win-letter-in {
    0%   { opacity: 0; transform: translateY(36px) scale(0.5); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes win-bang-glow {
    from { text-shadow: 0 0 8px  rgba(255,230,100,0.4), 0 2px 12px rgba(0,0,0,0.6); filter: brightness(1);   }
    to   { text-shadow: 0 0 28px rgba(255,230,100,1),   0 2px 12px rgba(0,0,0,0.6); filter: brightness(1.3); }
}

.modal-win-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.modal-win-panda {
    width: 160px;
    height: 160px;
    object-fit: contain;
    animation: win-panda-in 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.5s both;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}
@keyframes win-panda-in {
    0%   { opacity: 0; transform: scale(0.3) rotate(-15deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.modal-win-carousel-wrapper {
    position: relative;
    width: 210px;
    height: 210px;
    animation: win-carousel-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.65s both;
}
@keyframes win-carousel-in {
    0%   { opacity: 0; transform: scale(0.7) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-win-carousel { position: relative; width: 100%; height: 100%; }

.modal-win-prize-box {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.9) translateX(20px);
    pointer-events: none;
    background: linear-gradient(145deg, var(--bg-light), rgba(255,255,255,0.03));
    border-radius: var(--radius);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.2s ease;
    cursor: pointer;
}
.modal-win-prize-box.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    z-index: 8;
    border-color: rgba(255,230,100,0.3);
    box-shadow: 0 0 30px rgba(255,215,0,0.15), 0 4px 20px rgba(0,0,0,0.3);
}
.modal-win-prize-box.active:hover { border-color: var(--secondary); box-shadow: 0 0 30px rgba(56,185,175,0.2), 0 4px 20px rgba(0,0,0,0.3); }
.modal-win-prize-box.active:hover .modal-win-prize-name { color: var(--secondary); }
.modal-win-prize-box.next { opacity: 0.45; z-index: 5; transform: scale(0.93) translateX(12px); }
.modal-win-prize-box.prev { opacity: 0.45; z-index: 4; transform: scale(0.93) translateX(-12px); }

.modal-win-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-light);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    color: var(--text);
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 14px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0;
}
.modal-win-carousel-arrow:hover { background: var(--primary); transform: translateY(-50%) scale(1.1); }
.modal-win-carousel-arrow.left  { left: -18px; }
.modal-win-carousel-arrow.right { right: -18px; }

.modal-win-prize-img-wrap {
    width: 128px; height: 128px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
    border-radius: 8px; padding: 8px; box-sizing: border-box;
    position: relative;
}
.modal-win-prize-icon {
    position: absolute;
    max-width: 100%; max-height: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.modal-win-prize-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    max-width: 100%;
    padding: 0 5px;
    margin-top: 12px;
    width: 100%;
    line-height: 1.2;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.modal-win-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: win-actions-in 0.4s ease 0.9s both;
}
@keyframes win-actions-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
    .modal-win-actions,
    .modal-prize-actions,
    .modal-shipment-actions {
        flex-direction: column;
        gap: 8px;
    }
    .modal-back-btn,
    .modal-next-btn {
        width: 100%;
        height: 44px;
    }
}

#modal_ready_up_container:has(.modal-readyup) {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    z-index: 1000;
    pointer-events: auto;
}

.modal-readyup .modal-content {
    padding-bottom: 15px;
    animation: fadeInModal 0.3s ease-out forwards, readyup-glow-pulse 2s ease-in-out 0.3s infinite;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 3px color-mix(in srgb, var(--machine-accent) 90%, transparent),
        0 0 30px 8px color-mix(in srgb, var(--machine-accent) 45%, transparent),
        0 0 70px 20px color-mix(in srgb, var(--machine-accent) 20%, transparent);
}
@keyframes readyup-glow-pulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.4),
            0 0 0 3px color-mix(in srgb, var(--machine-accent) 90%, transparent),
            0 0 30px 8px color-mix(in srgb, var(--machine-accent) 45%, transparent),
            0 0 70px 20px color-mix(in srgb, var(--machine-accent) 20%, transparent);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.4),
            0 0 0 3px color-mix(in srgb, var(--machine-accent) 100%, transparent),
            0 0 45px 16px color-mix(in srgb, var(--machine-accent) 65%, transparent),
            0 0 90px 30px color-mix(in srgb, var(--machine-accent) 35%, transparent);
    }
}
.modal-readyup-machine-info { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px; background-color: var(--bg-light); border-radius: var(--radius); padding: 15px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.modal-readyup-machine-info img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); }
.modal-readyup-machine-name { font-size: 1.2rem; color: var(--machine-accent); font-weight: 700; }
.modal-readyup-timer        { font-size: 3rem; font-weight: bold; color: var(--text); margin-bottom: 20px; }
.modal-readyup-coin-icon    { width: 32px; height: 32px; }
.modal-readyup-divider      { margin: 25px auto 10px; height: 2px; width: 100%; background-color: var(--bg-light); }
.modal-readyup-title        { color: var(--green); font-size: 2.5rem; }

.modal-readyup-leave {
    all: unset;
    font-size: 0.95rem;
    display: block;
    width: auto;
    margin: 0 auto;
    padding: 12px 5px;
    color: var(--gray);
    cursor: pointer;
    text-decoration: underline;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.modal-readyup-leave:hover { color: var(--primary); background-color: transparent; box-shadow: none; transform: none; }

.modal-prize-title { color: var(--green); font-size: 2rem; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,1); margin-bottom: 15px; }

.modal-prize-img-balance { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.modal-prize-img-wrap    { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.modal-prize-main-img    { width: 128px; height: 128px; object-fit: contain; border-radius: var(--radius); background-color: var(--bg-light); padding: 8px; }
.modal-prize-main-img-lg { width: 256px; height: 256px; object-fit: contain; border-radius: var(--radius); background-color: var(--bg-light); padding: 8px; }

.modal-prize-text { text-align: center; margin-bottom: 20px; }
.modal-prize-name { font-size: 1.4rem; font-weight: bold; color: var(--text); margin-bottom: 8px; }
.modal-prize-desc { font-size: 1rem; color: var(--text-light); line-height: 1.5; }

.modal-prize-actions { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; }

.modal-prize-buy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; padding: 14px 24px; border-radius: 12px; font-size: 1.1rem; font-weight: 700;
    transition: var(--transition); text-align: center; white-space: nowrap; width: 100%;
    animation: scale-pulse 2s infinite; cursor: pointer;
    background-color: var(--green); color: var(--text);
}
.modal-prize-buy-btn:hover { color: var(--text); background-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(107,255,107,0.3); }
.modal-prize-icon { width: 32px; height: 32px; }

.modal-prize-balance {
    display: flex; flex-direction: column;
    max-width: 160px; font-size: 1rem; color: var(--text);
    background-color: var(--bg-light); padding: 12px 16px;
    border-radius: var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.modal-prize-balance-divider { border-top: 1.5px solid var(--gray); width: 100%; margin: 6px 0; }

.modal-prize-balance-tickets { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.modal-prize-balance-minus   { font-weight: bold; font-size: 1.2rem; color: var(--text); line-height: 1; user-select: none; margin-right: 6px; margin-top: 10px; align-self: flex-start; }
.modal-prize-balance-nums    { display: flex; flex-direction: column; text-align: right; gap: 2px; }
.modal-prize-balance-nums span { font-weight: 600; line-height: 1.1; }
.modal-prize-balance-final   { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; font-size: 1.15rem; color: var(--green); }
.modal-prize-ticket-icon     { width: 20px; height: 20px; }
.modal-prize-ticket-icon.dim { opacity: 0.5; }

.modal-shipment-title { color: var(--green); font-size: 2rem; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,1); margin-bottom: 10px; }

.modal-shipment-img-balance { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }

.modal-shipment-count-display {
    width: 128px; height: 128px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--radius); background-color: var(--bg-light); border: 2px solid var(--green);
}
.modal-shipment-count-number { font-size: 2rem; font-weight: bold; color: var(--green); line-height: 1; opacity: 0; }
.modal-shipment-count-label  { font-size: 0.9rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

.modal-shipment-text  { text-align: center; margin-bottom: 20px; }
.modal-shipment-name  { font-size: 1.4rem; font-weight: bold; color: var(--text); margin-bottom: 8px; }
.modal-shipment-desc  { font-size: 1rem; color: var(--text-light); line-height: 1.5; }

.modal-shipment-prizes-list   { margin-bottom: 16px; }
.modal-shipment-prizes-header { font-size: 1.1rem; font-weight: bold; color: var(--text); margin-bottom: 12px; text-align: left; }
.modal-shipment-prizes        { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }

.modal-shipment-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background-color: var(--bg-light); border-radius: 8px; text-align: left; cursor: pointer; }
.modal-shipment-item:hover { color: var(--secondary); }
.modal-shipment-item-img  { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background-color: var(--bg); padding: 4px; flex-shrink: 0; }
.modal-shipment-item-name { font-size: 0.95rem; font-weight: 500; flex: 1; }

.modal-shipment-actions { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; }
.modal-shipment-buy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; padding: 14px 24px; border-radius: 12px; font-size: 1.1rem; font-weight: 700;
    transition: var(--transition); text-align: center; white-space: nowrap; width: 100%;
    animation: scale-pulse 2s infinite; cursor: pointer;
    background-color: var(--green); color: var(--text);
}
.modal-shipment-buy-btn:hover { color: var(--text); background-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(107,255,107,0.3); }
.modal-shipment-icon { width: 32px; height: 32px; }

.modal-balance {
    display: flex; flex-direction: column;
    max-width: 160px; font-size: 1rem; color: var(--text);
    background-color: var(--bg-light); padding: 12px 16px;
    border-radius: var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.modal-balance-divider { border-top: 1.5px solid var(--gray); width: 100%; margin: 6px 0; }
.modal-balance-coins   { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.modal-balance-minus   { font-weight: bold; font-size: 1.2rem; color: var(--text); line-height: 1; user-select: none; margin-right: 6px; margin-top: 10px; align-self: flex-start; }
.modal-balance-nums    { display: flex; flex-direction: column; text-align: right; gap: 2px; }
.modal-balance-nums span { font-weight: 600; line-height: 1.1; }
.modal-balance-final   { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; font-size: 1.15rem; color: var(--green); }
.modal-balance-coin-icon     { width: 20px; height: 20px; }
.modal-balance-coin-icon.dim { opacity: 0.5; }

.modal-profile .modal-content {
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.modal-profile-banner { display: none; }

.modal-profile-body {
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* subtle top accent line */
.modal-profile-body::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,107,107,0.5), rgba(56,185,175,0.5), transparent);
    border-radius: 2px;
}

.modal-profile-img-wrap { margin-bottom: 14px; }
.modal-profile-img {
    width: 86px; height: 86px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow:
        0 0 0 3px var(--bg-light),
        0 0 0 5px rgba(255, 107, 107, 0.5),
        0 0 22px rgba(255, 107, 107, 0.25);
}

.modal-profile-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
    margin-bottom: 4px;
}

.modal-profile-join {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    margin-bottom: 14px;
}

.modal-profile-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255, 230, 109, 0.07);
    border: 1px solid rgba(255, 230, 109, 0.2);
    border-radius: 10px;
    padding: 10px 36px;
    box-shadow: 0 0 20px rgba(255, 230, 109, 0.07);
    margin-bottom: 16px;
}
.modal-profile-level-label {
    font-size: 0.58rem;
    font-weight: 800;
    color: rgba(255, 230, 109, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.modal-profile-level-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--yellow);
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 230, 109, 0.55), 0 0 22px rgba(255, 230, 109, 0.2);
}

.modal-profile-bio {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.6;
    font-style: italic;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
    margin-top: -2px;
    width: 100%;
    margin-bottom: 18px;
}

.modal-profile-actions { margin-top: 0; text-align: center; }
.modal-next-btn {
    padding: 10px 32px;
    background-color: var(--secondary);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 14px rgba(56, 185, 175, 0.3);
}
.modal-next-btn:hover {
    background-color: var(--secondary-dark);
    box-shadow: 0 6px 18px rgba(56, 185, 175, 0.45);
    transform: translateY(-2px);
}
.modal-profile-icon { width: 32px; height: 32px; }

.modal-tutorial .modal-content { overflow: visible; text-align: center; max-width: 420px; border: 1px solid color-mix(in srgb, var(--machine-accent) 50%, transparent); }
.modal-tutorial-img-wrap { margin: 0 auto 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--machine-accent) 35%, transparent); background: color-mix(in srgb, var(--machine-accent) 10%, var(--bg-light)); max-height: 420px;}
.modal-tutorial-img-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.modal-tutorial-main-img { width: 100%; height: auto; display: block; object-fit: contain; }
.modal-tutorial-text { text-align: center; }
.modal-tutorial-name { font-size: 1.3rem; font-weight: 900; color: var(--machine-accent); margin-bottom: 10px; line-height: 1.2; }
.modal-tutorial-desc { font-size: 0.9rem; color: var(--text-light); line-height: 1.65; }
.tut-badge { display: inline-flex; align-items: center; gap: 0; border-radius: 99px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; border: 1px solid transparent; overflow: hidden; cursor: default; user-select: none; }
.tut-badge-prefix { padding: 5px 8px 5px 11px; font-weight: 700; opacity: 0.75; }
.tut-badge-value { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; }
.tut-badge.single { border-color: #97C459; }
.tut-badge.single .tut-badge-prefix { background: #C0DD97; color: #173404; }
.tut-badge.single .tut-badge-value { background: #EAF3DE; color: #3B6D11; border-left: 1px solid #97C459; }
.tut-badge.session { border-color: #85B7EB; }
.tut-badge.session .tut-badge-prefix { background: #B5D4F4; color: #042C53; }
.tut-badge.session .tut-badge-value { background: #E6F1FB; color: #0C447C; border-left: 1px solid #85B7EB; }
.tut-seg-bar { display: flex; gap: 2px; align-items: center; }
.tut-seg-bar i { display: block; width: 4px; height: 10px; border-radius: 2px; background: currentColor; opacity: 0.2; font-style: normal; }
.tut-seg-bar i.on { opacity: 1; animation: tut-seg 2s ease-in-out infinite; }
.tut-seg-bar i.on:nth-child(2) { animation-delay: .2s; }
.tut-seg-bar i.on:nth-child(3) { animation-delay: .4s; }
.tut-seg-bar i.on:nth-child(4) { animation-delay: .6s; }
@keyframes tut-seg { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.tut-style-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--text-light); line-height: 1.55; border: 1px solid transparent; border-left-width: 3px; text-align: center; }
.tut-style-box .tut-badge { display: inline-flex; margin-bottom: 8px; }
.tut-style-box p { margin: 0; }
.tut-style-box.single { background: rgba(97,196,89,0.06); border-color: rgba(151,196,89,0.2); border-left-color: #97C459; }
.tut-style-box.session { background: rgba(133,183,235,0.06); border-color: rgba(133,183,235,0.2); border-left-color: #85B7EB; }

/* ============================================================
   MODAL — REPLAY
   ============================================================ */
.modal-replay .modal-content {
    overflow: visible;
    width: fit-content;
    max-width: 95vw;
    padding: 0;
    background: var(--bg-light);
    max-height: none;
}
.modal-replay-inner {
    display: flex;
    flex-direction: row;
    border-radius: var(--radius);
    overflow: hidden;
}

.modal-replay-player {
    position: relative;
    width: 640px;
    height: 640px;
    flex-shrink: 0;
    background: #000;
    overflow: hidden;
}
.modal-replay-player video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.replay-unavailable {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    pointer-events: none;
    padding: 24px;
}
.replay-unavailable svg {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    opacity: 0.45;
}
.replay-unavailable span {
    font-size: 0.85rem;
    line-height: 1.6;
}

.replay-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}
.replay-play-btn,
.replay-fullscreen-btn {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    box-shadow: none;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: transform 0.15s ease, background 0.15s ease;
}
.replay-play-btn:hover,
.replay-fullscreen-btn:hover {
    background: rgba(255,255,255,0.2);
    box-shadow: none;
    transform: scale(1.1);
}
.replay-play-btn svg,
.replay-fullscreen-btn svg {
    width: 18px;
    height: 18px;
    color: white;
    flex-shrink: 0;
}
.replay-fullscreen-btn {
    margin-left: auto;
}
.replay-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    font-family: monospace;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 99px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.modal-replay-sidebar {
    width: 300px;
    height: 640px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.modal-replay-meta {
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.modal-replay-game { font-size: 0.95rem; font-weight: 700; color: var(--machine-accent, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.modal-replay-meta-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}
.modal-replay-meta-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.modal-replay-player-name {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.modal-replay-date { font-size: 0.78rem; color: var(--text-light); }
.modal-replay-id   { font-size: 0.72rem; color: var(--secondary); font-family: monospace; }

.modal-replay-likes {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.modal-replay-like-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
}
.modal-replay-like-btn:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--text-light);
}
.modal-replay-like-btn:hover span { text-decoration: underline; }
.modal-replay-like-btn:hover svg  { color: var(--primary); }
.modal-replay-like-btn svg {
    width: 16px; height: 16px;
    transition: color 0.15s ease, fill 0.15s ease;
    fill: none;
    flex-shrink: 0;
}
.modal-replay-like-btn span { transition: text-decoration 0.15s ease; }
.modal-replay-like-btn.liked svg  { fill: var(--primary); color: var(--primary); }
.modal-replay-like-btn.liked span { color: var(--primary); }

.modal-replay-share {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-replay-share-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.modal-replay-share-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}
.modal-replay-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    opacity: 0.75;
    flex-shrink: 0;
}
.modal-replay-share-btn:hover {
    background-color: rgba(255,255,255,0.06);
    box-shadow: none;
    transform: translateY(-1px);
    opacity: 1;
}
.modal-replay-share-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}
.modal-replay-share-btn-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-light);
}
.modal-replay-share-btn.share-copy     svg { color: var(--text-light); }
.modal-replay-share-btn.share-copy.copied  svg { color: var(--green); }
.modal-replay-share-btn.share-copy.copied .modal-replay-share-btn-label { color: var(--green); }
.modal-replay-share-btn.share-download svg { color: var(--text-light); }
.modal-replay-share-btn.share-download.done svg { color: var(--green); }
.modal-replay-share-btn.share-download.done .modal-replay-share-btn-label { color: var(--green); }

.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    animation: tooltipFadeIn 0.15s ease;
}
.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--primary);
}
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.modal-replay-report-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--danger);
    border-radius: 20px;
    padding: 6px 12px;
    color: var(--danger);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none;
    margin-top: 5px;
}
.modal-replay-report-btn:hover { background: var(--danger); color: var(--text); transform: translateY(-1px); }
.modal-replay-report-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }

.modal-replay-comments-label {
    padding: 10px 16px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.modal-replay-comments-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 16px 10px;
}
.modal-replay-comment {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.modal-replay-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s ease;
}
.modal-replay-comment-header:hover { background: rgba(255,255,255,0.06); }
.modal-replay-comment-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.modal-replay-comment-name   { font-weight: bold; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.modal-replay-comment-time   { font-size: 0.7rem; font-weight: bold; color: var(--gray); margin-left: auto; white-space: nowrap; }
.modal-replay-comment-text {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 12px;
    background-color: var(--bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    word-break: break-word;
    line-height: 1.4;
}
.modal-replay-comment-form {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.modal-replay-comment-input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text);
    font-size: 0.8rem;
    outline: none;
}
.modal-replay-comment-input:focus { border-color: var(--primary); }
.modal-replay-comment-submit {
    flex-shrink: 0;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.modal-replay-comment-submit:hover { background: var(--primary-dark); transform: none; }

@media (max-width: 768px) {
    .modal-replay                 { align-items: flex-start; overflow-y: auto; padding: 44px 0 10px; }
    .modal-replay .modal-content  { max-height: none; }
    .modal-replay-inner           { flex-direction: column; }
    .modal-replay-player          { width: 95vw; height: 95vw; }
    .modal-replay-sidebar         { width: 95vw; height: auto; min-height: 300px; max-height: 60vh; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
}

.modal-vip .modal-content { padding-bottom: 20px; max-width: 520px; }
.modal-vip-success-star { font-size: 3.5rem; line-height: 1; margin-bottom: 20px; }

.modal-vip-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.modal-vip-star { font-size: 3rem; line-height: 1; }
.modal-vip-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
}

.modal-vip-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 12px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}
.modal-vip-balance-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.modal-vip-balance-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    font-weight: 700;
}
.modal-vip-balance-val {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--yellow);
}
.modal-vip-balance-val img { width: 20px; height: 20px; }
.modal-vip-balance-sep {
    font-size: 1.4rem;
    color: var(--text-light);
    opacity: 0.4;
    margin: 0 4px;
    padding-bottom: 12px;
}
.modal-vip-balance-final { color: inherit; }

/* ============================================================
   MODAL — PLAY FOR IT
   ============================================================ */
.modal-play-for-it .modal-content {
    max-width: 580px;
    padding: 28px 30px;
    text-align: left;
}

.modal-pfi-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}
.modal-pfi-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--bg-light);
    padding: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
}
.modal-pfi-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.modal-pfi-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.modal-pfi-desc {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modal-pfi-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-light);
}
.modal-pfi-cost img {
    width: 18px;
    height: 18px;
}
.modal-pfi-cost-val { color: var(--yellow); }

.modal-pfi-progress-section { margin-bottom: 22px; }
.modal-pfi-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.modal-pfi-progress-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
}
.modal-pfi-progress-fraction {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text);
}
.modal-pfi-progress-fraction span { color: var(--yellow); }
.modal-pfi-bar-track {
    height: 10px;
    background: var(--bg-light);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.modal-pfi-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--yellow), #ffb347);
    transition: width 0.6s ease;
    min-width: 4px;
}

.modal-pfi-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 10px;
}

.modal-pfi-random-btn {
    width: auto;
    min-width: 25%;
    padding: 8px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: block;
}
.modal-pfi-random-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), #c03030);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,107,107,0.3);
    color: #fff;
}

.modal-pfi-machines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gray) transparent;
}
.modal-pfi-machine-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
    cursor: pointer;
}
.modal-pfi-machine-row:hover { background: rgba(255,255,255,0.06); border-color: var(--machine-accent); }
.modal-pfi-machine-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.modal-pfi-machine-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modal-pfi-machine-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--machine-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-pfi-machine-wins {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 400;
}
.modal-pfi-machine-wins span { color: var(--green); font-weight: 800; font-size: 1rem; }

.modal-pfi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 480px) {
    .modal-play-for-it .modal-content { padding: 20px 18px; }
    .modal-pfi-machines { max-height: 220px; }
    .modal-pfi-random-btn { padding: 8px 12px; font-size: 0.8rem; }
}

/* ============================================================
   REPLAY MODAL — WIN STATE
   ============================================================ */

.modal-replay.is-win .modal-content {
    animation: fadeInModal 0.3s ease-out forwards, win-glow-pulse 2s ease-in-out 0.3s infinite;
}

@keyframes win-glow-pulse {
    0%   { box-shadow: 0 0 0 3px var(--green), 0 0 30px 8px rgba(66,184,131,0.45), 0 0 70px 20px rgba(66,184,131,0.2); }
    50%  { box-shadow: 0 0 0 3px #6ee7b7,       0 0 45px 16px rgba(66,184,131,0.65), 0 0 90px 30px rgba(66,184,131,0.35); }
    100% { box-shadow: 0 0 0 3px var(--green), 0 0 30px 8px rgba(66,184,131,0.45), 0 0 70px 20px rgba(66,184,131,0.2); }
}

@keyframes win-glow-pulse {
    0%   { box-shadow: 0 0 0 3px var(--green), 0 0 30px 8px rgba(66,184,131,0.45), 0 0 70px 20px rgba(66,184,131,0.2); }
    50%  { box-shadow: 0 0 0 3px #6ee7b7,       0 0 45px 16px rgba(66,184,131,0.65), 0 0 90px 30px rgba(66,184,131,0.35); }
    100% { box-shadow: 0 0 0 3px var(--green), 0 0 30px 8px rgba(66,184,131,0.45), 0 0 70px 20px rgba(66,184,131,0.2); }
}

.replay-win-banner {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
}

.modal-replay.is-win .replay-win-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(29,200,100,0.92), rgba(42,184,131,0.88));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    animation: win-banner-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes win-banner-drop {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.replay-win-banner-trophy {
    font-size: 1.4rem;
    line-height: 1;
    animation: trophy-bounce 1.8s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

@keyframes trophy-bounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    40%       { transform: translateY(-5px) rotate(5deg); }
    70%       { transform: translateY(-2px) rotate(-3deg); }
}

.replay-win-banner-text {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.replay-win-banner-stars {
    font-size: 0.85rem;
    letter-spacing: 3px;
    opacity: 0.8;
    animation: stars-fade 2s ease-in-out infinite alternate;
}

@keyframes stars-fade {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

.modal-replay-win-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    box-shadow: 0 2px 12px rgba(66,184,131,0.5), 0 0 0 1px rgba(66,184,131,0.2);
    width: fit-content;
    line-height: 1;
    position: relative;
    overflow: hidden;
    animation: badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both 0.35s;
}
.modal-replay-win-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: btn-sweep 2.5s ease-in-out infinite;
}

.modal-replay.is-win .modal-replay-win-badge {
    display: inline-flex;
    margin: 4px auto 6px;
}

@keyframes badge-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.modal-replay-win-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
    fill: currentColor;
}

a.modal-replay-game {
    text-decoration: none;
    display: block;
    color: var(--machine-accent, var(--text));
    background-image: linear-gradient(var(--text-light), var(--text-light));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: center 100%;
    transition: background-size 0.2s ease, color 0.15s ease;
}
a.modal-replay-game:hover {
    color: var(--text-light);
    background-size: 100% 1px;
}

@media (max-width: 768px) {
    .modal-replay.is-win .replay-win-banner {
        padding: 10px 14px;
    }
    .replay-win-banner-text { font-size: 0.9rem; }
    .replay-win-banner-trophy { font-size: 1.2rem; }
}

/* ============================================================
   ACTIVITY FEED
   ============================================================ */

.activity-container,
.activity-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 5px 20px 80px;
}

.activity-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.activity-page-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: rgba(56, 185, 175, 0.1);
    border: 1px solid rgba(56, 185, 175, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
}

.activity-page-icon svg { width: 24px; height: 24px; }

.activity-page-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.1;
}

.activity-page-subtitle {
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 3px 0 0;
    font-weight: 500;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-item {
    --accent: var(--gray);
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--bg-light);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    min-height: 80px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.activity-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25),
                inset 0 0 40px -14px color-mix(in srgb, var(--accent) 8%, transparent);
}

.activity-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 3px 0 0 3px;
    z-index: 1;
}

.activity-machine-play   { --accent: var(--primary); }
.activity-machine-reward { --accent: var(--green); }
.activity-quest-reward   { --accent: var(--green); }
.activity-refund         { --accent: var(--secondary); }
.activity-coin-pack      { --accent: var(--yellow); }
.activity-vip            { --accent: #a78bfa; }
.activity-prize-purchase { --accent: var(--green); }
.activity-shipment       { --accent: var(--secondary); }
.activity-adjustment-positive { --accent: var(--green); }
.activity-adjustment-negative { --accent: var(--gray); }

.activity-left-thumb,
.activity-left-icon {
    flex-shrink: 0;
    width: 88px;
    margin-left: 3px;
    position: relative;
    overflow: hidden;
}

.activity-left-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.activity-item:hover .activity-left-thumb img { transform: scale(1.06); }

.activity-left-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, var(--bg-light) 100%);
    pointer-events: none;
}

.activity-left-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.activity-left-icon svg {
    width: 48px;
    height: 48px;
    color: var(--accent);
}

.activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    gap: 5px;
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-row-top {
    justify-content: space-between;
}

.activity-row-bottom {
    gap: 8px;
    flex-wrap: wrap;
}

.activity-kind {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    filter: brightness(1.2);
    white-space: nowrap;
}

.activity-time {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--gray);
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

a.activity-name {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: center 100%;
    transition: background-size 0.25s ease, filter 0.15s ease;
}

a.activity-name:hover {
    filter: brightness(1.35);
    background-size: 100% 1px;
    cursor: pointer;
}

.activity-gain,
.activity-cost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
    border-radius: 99px;
    padding: 3px 10px 3px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-gain {
    color: var(--green);
    background: rgba(66,184,131,0.10);
    border: 1px solid rgba(66,184,131,0.25);
}

.activity-cost {
    color: var(--text-light);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
}

.activity-currency-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.activity-item button.activity-replay-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}

.activity-item button.activity-replay-btn:hover {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--secondary);
    opacity: 1;
    transform: none;
}

.activity-empty {
    text-align: center;
    padding: 64px 20px;
    color: var(--gray);
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .activity-page          { padding: 24px 14px 60px; }
    .activity-page-title    { font-size: 1.3rem; }
    .activity-left-thumb,
    .activity-left-icon     { width: 68px; }
    .activity-body          { padding: 10px 12px; }
    .activity-name          { font-size: 0.85rem; }
}

.tos-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.tos-intro {
    padding: 20px 24px;
    border-left: 4px solid var(--secondary);
    margin-bottom: 32px;
    color: var(--text-light);
    line-height: 1.7;
}
.tos-intro strong {
    color: var(--text);
}

.tos-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tos-section {
    padding: 28px 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease;
}
.tos-section:hover {
    border-color: rgba(255, 107, 107, 0.18);
}

.tos-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tos-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.25);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.tos-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.75;
}
.tos-content strong {
    color: var(--text);
    font-weight: 800;
}
.tos-content em {
    color: var(--text);
    font-style: italic;
}
.tos-content a {
    color: var(--secondary);
    font-weight: 700;
}
.tos-content a:hover {
    color: var(--secondary-dark);
}

.tos-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tos-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 4px;
}
.tos-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 8px;
}

.tos-list.labeled {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.tos-list.labeled li {
    display: contents;
}
.tos-list.labeled li::before {
    display: none;
}
.tos-list.labeled li > strong {
    grid-column: 1;
    padding: 10px 16px;
    background: rgba(255,107,107,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.tos-list.labeled li > span {
    grid-column: 2;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-left: 1px solid rgba(255,255,255,0.07);
    color: var(--text-light);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    line-height: 1.5;
}
.tos-list.labeled li:last-child > strong,
.tos-list.labeled li:last-child > span {
    border-bottom: none;
}

.tos-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.tos-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
}
.tos-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--secondary);
}

@media (max-width: 600px) {
    .tos-section {
        padding: 20px 18px 18px;
    }
    .tos-section-title {
        font-size: 1rem;
    }
    .tos-content {
        font-size: 0.9rem;
    }
}

/* ============================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================ */
#toast_container {
    position: fixed;
    top: 76px;           
    left: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
    max-width: 320px;
    width: max-content;
}

.toast {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 10px 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
    min-width: 200px;
    max-width: 320px;
    position: relative;
    overflow: hidden;

    
    animation: toast-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.toast.toast--leaving {
    animation: toast-out 0.28s ease-in forwards;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--toast-accent, var(--primary));
}

.toast-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--toast-accent, var(--primary));
    opacity: 0.55;
    transform-origin: left center;
    transform: scaleX(1);
}

.toast-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}

.toast-icon img,
.toast-icon svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.toast-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    line-height: 1;
}

.toast-title {
    font-size: 1rem;
    font-weight: 900;
    color: var(--toast-accent, var(--text));
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}
.toast-title--positive { color: var(--green); }
.toast-title--negative { color: var(--primary); }

.toast-sub {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.toast-close {
    background: transparent;
    border: none;
    padding: 4px;
    margin: 0 -4px 0 0;
    cursor: pointer;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: none;
    transition: background 0.15s, color 0.15s;
    width: 24px;
    height: 24px;
    align-self: flex-start;
}

.toast-close svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--text-light);
}

.toast-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.toast--xp         { --toast-accent: #a78bfa; }   
.toast--level      { --toast-accent: #facc15; }
.toast--tickets    { --toast-accent: var(--primary); }
.toast--coins      { --toast-accent: var(--yellow); }
.toast--prize      { --toast-accent: var(--green); }
.toast--info       { --toast-accent: var(--secondary); }
.toast--warning    { --toast-accent: var(--warning); }
.toast--error      { --toast-accent: var(--danger); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-24px) scale(0.93); }
    to   { opacity: 1; transform: translateX(0)     scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0)     scale(1);    max-height: 100px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(-28px) scale(0.92); max-height: 0;     margin-bottom: -10px; }
}

@keyframes toast-timer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 480px) {
    #toast_container {
        top: auto;
        bottom: 20px;
        right: 0;
        left: 0;
        flex-direction: row;
        align-items: flex-end;
        overflow-x: auto;
        overflow-y: visible;
        max-width: 100%;
        width: 100%;
        padding: 0 10px;
        gap: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #toast_container::-webkit-scrollbar { display: none; }
    .toast { max-width: 280px; min-width: 200px; flex-shrink: 0; }
    @keyframes toast-in {
        from { opacity: 0; transform: translateX(24px) scale(0.95); }
        to   { opacity: 1; transform: translateX(0)    scale(1); }
    }
    @keyframes toast-out {
        from { opacity: 1; transform: translateX(0)    scale(1);    max-width: 280px; margin-right: 0; }
        to   { opacity: 0; transform: translateX(-16px) scale(0.95); max-width: 0;    margin-right: -8px; }
    }
}

/* ============================================================
   QUESTS PAGE 
   ============================================================ */

.quests-hero {
    position: relative;
    text-align: center;
    padding: 20px 20px 22px;
    margin-bottom: 30px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 230, 109, 0.15);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,230,109,0.09) 0%, rgba(255,107,107,0.05) 45%, transparent 70%),
        linear-gradient(135deg, rgba(41,47,54,0.98), rgba(29,33,37,0.98));
}
.quests-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,230,109,0.07) 50%, transparent 65%);
    background-size: 200% 100%;
    pointer-events: none;
}
.quests-hero::after {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,230,109,0.6), rgba(255,107,107,0.4), rgba(255,230,109,0.6), transparent);
    border-radius: 0 0 4px 4px;
    animation: hero-top-glow 3s ease-in-out infinite alternate;
}
.quests-hero-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.quests-sparkle {
    position: absolute; width: 3px; height: 3px;
    background: #FFE66D; border-radius: 50%; opacity: 0;
    animation: sparkle-pop var(--dur) ease-in-out var(--delay) infinite;
}
.quests-sparkle::before, .quests-sparkle::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.quests-sparkle::before { width: 1px; height: 6px; top: -1px; left: 1px; }
.quests-sparkle::after  { width: 6px; height: 1px; top: 1px;  left: -1px; }

.quests-hero-icon {
    width: 64px; height: 64px; margin: 0 auto 8px; display: block;
    filter: drop-shadow(0 0 8px rgba(255,230,109,0.6)) drop-shadow(0 2px 8px rgba(255,150,0,0.4));
    animation: crown-float 3s ease-in-out infinite;
}
.quests-hero-icon svg { width: 100%; height: 100%; }

.quests-hero-title {
    position: relative;
    font-size: 1.8rem; font-weight: 900; line-height: 1; margin-bottom: 10px; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #FFE66D 0%, #FFA500 30%, #FF6B6B 60%, #FFE66D 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: title-shimmer 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 6px rgba(255,230,109,0.3));
}
.quests-hero-sub {
    position: relative;
    font-size: 0.75rem; font-weight: 700; color: var(--text-light);
    letter-spacing: 2px; text-transform: uppercase; opacity: 0.75;
}

.quests-hero-claim-bubble {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 10px auto 0;
    padding: 10px 13px 10px 10px;
    border-radius: 99px;
    background: rgba(34, 221, 119, 0.07);
    border: 1px solid rgba(34, 221, 119, 0.2);
    color: rgba(34, 221, 119, 0.75);
    font-size: 0.78rem;
    font-weight: 800;
    width: fit-content;
    letter-spacing: 0.2px;
    line-height: 0;
}
.quests-hero-claim-bubble > span:last-child {
    line-height: 1.2;
}
.quests-hero-claim-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22dd77;
    box-shadow: 0 0 6px 1px rgba(34, 221, 119, 0.7);
    flex-shrink: 0;
    animation: quest-dot-pulse 2s ease-in-out infinite;
}
/* show only when quest alert is active */
#base_quest_alert_state .quest-alert-active ~ * .quests-hero-claim-bubble,
body:has(#base_quest_alert_state .quest-alert-active) .quests-hero-claim-bubble {
    display: flex;
}

.quests-section { margin-bottom: 36px; }

.quests-section-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.quests-section-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 1.05rem; font-weight: 900; color: var(--text); letter-spacing: 0.2px;
    flex: 1;
}
.quests-section-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.quests-section-title.daily svg { color: #FFE66D; }
.quests-section-title.perma svg { color: var(--secondary); }

.quests-reset-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 99px;
    background: rgba(255,230,109,0.06);
    border: 1px solid rgba(255,230,109,0.13);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,230,109,0.7);
    white-space: nowrap;
    margin-left: 10px;
    flex-shrink: 0;
}
.quests-reset-badge svg { width: 16px; height: 16px; opacity: 0.75; }

.quests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.quest-card {
    position: relative;
    background: var(--bg-light); border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
    transition: var(--transition); overflow: hidden;
}
.quest-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--quest-accent, var(--primary)), transparent);
    opacity: 0.7;
}
.quest-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

.quest-card.claimable { border-color: rgba(255,230,109,0.3); animation: quest-claimable-pulse 2.5s ease-in-out infinite; }
.quest-card.claimable::before {
    background: linear-gradient(90deg, #FFE66D, #FF6B6B, transparent);
    opacity: 1; animation: quest-top-shimmer 2s linear infinite; background-size: 200% 100%;
}
@keyframes quest-claimable-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,230,109,0); }
    50%       { box-shadow: 0 0 18px 3px rgba(255,230,109,0.18); }
}
@keyframes quest-top-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.quest-card-top { display: flex; align-items: center; gap: 12px; }
.quest-card-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
}
.quest-card-icon svg { width: 20px; height: 20px; }
.quest-card-name-group { flex: 1; min-width: 0; display: flex; align-items: center; }
.quest-card-name { font-size: 0.95rem; font-weight: 800; color: var(--text); line-height: 1.3; }

.quest-card-rewards { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.quest-reward-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px;
    font-size: 0.78rem; font-weight: 800; border: 1px solid transparent;
}
.quest-reward-chip img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.quest-reward-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.quest-reward-chip.coins   { background: rgba(255,230,109,0.1); border-color: rgba(255,230,109,0.25); color: #FFE66D; }
.quest-reward-chip.tickets { background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.25); color: var(--primary); }
.quest-reward-chip.xp      { background: rgba(56,185,175,0.1);  border-color: rgba(56,185,175,0.25);  color: var(--secondary); }
.quest-reward-chip.prize   { background: rgba(139,92,246,0.1);  border-color: rgba(139,92,246,0.3);   color: #a78bfa; }

.quest-prize-thumb {
    width: 36px; height: 36px; border-radius: 8px; object-fit: contain;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(139,92,246,0.3); padding: 3px;
}

.quest-progress-wrap { display: flex; flex-direction: column; gap: 5px; }
.quest-progress-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 700; color: var(--text-light); }
.quest-progress-count { color: var(--text); }
.quest-progress-bar { height: 7px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.quest-progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.quest-progress-fill::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    border-radius: 0 99px 99px 0;
    animation: progress-sheen 2.5s ease-in-out infinite;
}
@keyframes progress-sheen {
    0%   { opacity: 0; transform: translateX(0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(20px); }
}
.quest-progress-fill.full { background: linear-gradient(90deg, #FFE66D, #FF6B6B); }

.quest-claim-btn {
    margin-top: auto;
    width: 100%; padding: 10px 0;
    font-size: 0.85rem; font-weight: 900; letter-spacing: 0.8px;
    border-radius: var(--radius-sm); border: none; cursor: pointer;
    transition: var(--transition); text-transform: uppercase;
    font-family: 'Nunito', sans-serif;
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #FFE66D 0%, #FFA832 40%, #FF6B6B 100%);
    color: #1D2125;
    box-shadow: 0 0 0 1px rgba(255,230,109,0.25), 0 4px 14px rgba(255,180,50,0.35);
}
.quest-claim-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: btn-sweep 2.5s ease-in-out infinite;
}
@keyframes btn-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.quest-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255,230,109,0.4), 0 6px 22px rgba(255,180,50,0.5);
    color: #1D2125;
    background: linear-gradient(135deg, #fff176 0%, #FFB84D 40%, #FF7B7B 100%);
}
.quest-claim-btn:active { transform: scale(0.97); }

.quest-claim-btn.in-progress {
    background: rgba(255,255,255,0.05); color: var(--text-light);
    box-shadow: none; cursor: default; border: 1px solid rgba(255,255,255,0.07); letter-spacing: 0.3px;
}
.quest-claim-btn.in-progress::before { display: none; }
.quest-claim-btn.in-progress:hover   { transform: none; box-shadow: none; background: rgba(255,255,255,0.05); color: var(--text-light); }

.modal-quest-claim .modal-content {
    max-width: 380px;
    text-align: center;
    border: 1px solid rgba(255,230,109,0.2);
}
.modal-quest-claim .modal-content::after {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,230,109,0.7), rgba(255,107,107,0.5), rgba(255,230,109,0.7), transparent);
    border-radius: 0 0 4px 4px;
    animation: hero-top-glow 3s ease-in-out infinite alternate;
}
.quest-claim-sparkles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius);
}
.quest-claim-star-wrap {
    position: relative; z-index: 1;
    width: 38px; height: 38px; margin: 8px auto 10px;
    filter: drop-shadow(0 0 6px rgba(255,230,109,0.7)) drop-shadow(0 2px 6px rgba(255,150,0,0.4));
    animation: crown-float 3s ease-in-out infinite;
}
.quest-claim-star-wrap svg { width: 100%; height: 100%; }
.quest-claim-prize-img {
    position: relative; z-index: 1;
    width: 90px; height: 90px; object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(139,92,246,0.3);
    padding: 6px; margin: 4px auto 14px; display: block;
    animation: claim-icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
}
@keyframes claim-icon-bounce { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.quest-claim-title {
    position: relative; z-index: 1;
    font-size: 1.4rem; font-weight: 900; margin-bottom: 4px;
    background: linear-gradient(135deg, #FFE66D, #FF6B6B);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.quest-claim-subtitle {
    position: relative; z-index: 1;
    font-size: 0.82rem; color: var(--text-light); margin-bottom: 20px; font-weight: 700; letter-spacing: 0.3px;
}
.quest-claim-rewards {
    position: relative; z-index: 1;
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
}
.quest-claim-reward-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px; font-size: 0.85rem; font-weight: 800;
    white-space: nowrap;
}
.quest-claim-reward-pill img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.quest-claim-reward-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.quest-claim-reward-pill.coins   { background: rgba(255,230,109,0.12); border: 1px solid rgba(255,230,109,0.3); color: #FFE66D; text-shadow: 0 0 8px rgba(255,230,109,0.5); }
.quest-claim-reward-pill.tickets { background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.3); color: var(--primary); }
.quest-claim-reward-pill.xp      { background: rgba(56,185,175,0.12);  border: 1px solid rgba(56,185,175,0.3);  color: var(--secondary); }
.quest-claim-reward-pill.prize   { background: rgba(139,92,246,0.12);  border: 1px solid rgba(139,92,246,0.3);  color: #a78bfa; }
.quest-machines {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quest-machine-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pill-accent, var(--quest-accent, var(--primary))) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill-accent, var(--quest-accent, var(--primary))) 30%, transparent);
    color: var(--pill-accent, var(--quest-accent, var(--primary)));
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.quest-machine-pill:hover {
    background: color-mix(in srgb, var(--pill-accent, var(--quest-accent, var(--primary))) 22%, transparent);
    transform: translateY(-1px);
    color: var(--pill-accent, var(--quest-accent, var(--primary)));
}

.quest-machine-pill-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--pill-accent, var(--quest-accent, var(--primary))) 40%, transparent);
    flex-shrink: 0;
}

.quest-machine-pill-name {
    line-height: 1;
}

.quest-machine-pill-arrow {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.75;
}

@media (max-width: 600px) { .quests-grid { grid-template-columns: 1fr; } }


.live-help-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
}

.live-help-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
    background-color: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.live-help-header {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background-color: #131516;
}
.live-help-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.live-help-blurb {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 2px 0 0;
    line-height: 1.3;
}

.live-help-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.live-help-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-help-message-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 4px;
}

.live-help-message-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text);
}
.live-help-message.support .live-help-message-name { color: var(--primary); }

.live-help-message-time {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gray);
}

.live-help-message-bubble {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 11px 15px;
    border-radius: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    color: var(--text);
    background-color: var(--bg);
}

.live-help-form {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    box-sizing: border-box;
}
.live-help-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 2px solid var(--gray);
    background-color: var(--bg);
    color: var(--text);
    border-radius: 25px;
    outline: none;
    font-size: 0.95rem;
}
.live-help-input:focus { border-color: var(--primary); }

.live-help-send-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.live-help-send-btn:hover { background-color: var(--primary-dark); transform: scale(1.05); }
.live-help-send-btn svg   { width: 18px; height: 18px; }
.live-help-replay-btn {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--secondary);
    opacity: 0.7;
    transition: opacity 0.15s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.live-help-replay-btn:hover { opacity: 1; }

@media (max-width: 600px) {
    .live-help-card { height: calc(100vh - 180px); min-height: 0; }
    .live-help-message { max-width: 88%; }
    .live-help-messages, .live-help-form { padding-left: 14px; padding-right: 14px; }
}


.machines-coming-soon-card {
    border-radius: var(--radius);
    border: 2px dashed rgba(255, 255, 255, 0.10);
    background-color: rgba(255, 255, 255, 0.025);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 32px 24px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.machines-coming-soon-card:hover {
    border-color: rgba(255, 230, 109, 0.25);
    background-color: rgba(255, 230, 109, 0.03);
}

.machines-coming-soon-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.machines-coming-soon-icon {
    font-size: 2.2rem;
    line-height: 1;
    animation: coming-soon-bob 3s ease-in-out infinite;
}
@keyframes coming-soon-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.machines-coming-soon-heading {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
}

.machines-coming-soon-heading-accent {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.machines-coming-soon-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    max-width: 220px;
    line-height: 1.5;
}

.machines-coming-soon-pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.machines-coming-soon-pill {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-radius: 99px;
    color: rgba(var(--pill-color), 0.85);
    background: rgba(var(--pill-color), 0.08);
    border: 1px solid rgba(var(--pill-color), 0.25);
    white-space: nowrap;
    width: 100%;
    text-align: center
}