/* =========================================================
/* =========================================================
   RESET & VARIABLES
   ========================================================= */

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

:root {
    --bg-purple: #5a189a;
    --bg-dark: #240046;
    --neon-blue: #00d2ff;
    --neon-blue-glow: rgba(0, 210, 255, 0.6);
    --yellow: #ffcc00;
    --orange: #ff7b00;
    --white: #ffffff;
    --font-main: 'Fredoka', system-ui, -apple-system, sans-serif;
    --logo-size: clamp(90px, 22vmin, 200px);
    --keyboard-max: clamp(240px, 70vmin, 380px);
    --slot-width: clamp(24px, 6.5vmin, 44px);
    --slot-height: clamp(34px, 8.5vmin, 54px);
    --slot-font: clamp(1.1rem, 3.2vmin, 1.8rem);
    --action-max: clamp(240px, 65vmin, 380px);
    --game-padding: clamp(8px, 1.5vmin, 18px);
    --game-gap: clamp(4px, 1vmin, 12px);
    --btn-pad: clamp(6px, 1.5vmin, 12px);
    --btn-font: clamp(0.7rem, 1.8vmin, 1rem);
    --header-pad-y: clamp(6px, 1.4vmin, 12px);
    --header-pad-x: clamp(10px, 2vmin, 20px);
    --header-font: clamp(0.8rem, 2vmin, 1.1rem);
}

/* =========================================================
   BODY
   ========================================================= */

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-dark);
    font-family: var(--font-main);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: manipulation;
}

/* Global hidden rule — highest priority */
.hidden { display: none !important; }

/* =========================================================
   LOADING SCREEN
   ========================================================= */

#loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1e3c72 0%, #0a0e27 70%);
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.bg-glow {
    position: absolute;
    width: 150vmin;
    height: 150vmin;
    background: radial-gradient(circle, var(--neon-blue-glow) 0%, transparent 60%);
    border-radius: 50%;
    animation: pulseGlow 3s infinite alternate ease-in-out;
    z-index: 0;
}

@keyframes pulseGlow {
    0% { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

.loading-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 500px;
    text-align: center;
}

.game-logo {
    width: clamp(120px, 25vmin, 200px);
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px var(--neon-blue-glow));
    animation: float 3s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.progress-wrapper {
    width: 100%;
    margin-bottom: 2rem;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.9rem, 2.5vmin, 1.1rem);
    color: var(--white);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

.progress-container {
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border: 2px solid var(--neon-blue);
    overflow: hidden;
    box-shadow: 0 0 15px var(--neon-blue-glow), inset 0 0 10px rgba(0, 0, 0, 0.8);
    position: relative;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--orange), var(--yellow));
    border-radius: 10px;
    transition: width 0.2s ease-out;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.subtitle {
    font-size: clamp(0.8rem, 2vmin, 1rem);
    font-weight: 600;
    color: var(--neon-blue);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon-blue-glow);
}

/* =========================================================
   GAME SCREEN
   ========================================================= */

#game-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: linear-gradient(135deg, var(--bg-purple) 0%, var(--bg-dark) 100%);
    display: flex;
    flex-direction: column;
    color: var(--white);
    padding: var(--game-padding);
    overflow: hidden;
    overscroll-behavior: contain;
}

#game-screen.hidden { display: none !important; }

/* =========================================================
   HEADER
   ========================================================= */

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: var(--header-pad-y) var(--header-pad-x);
    border-radius: 15px;
    font-weight: 600;
    font-size: var(--header-font);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: var(--game-gap);
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.8vmin, 6px);
}

.sound-toggle-btn {
    width: clamp(28px, 4.5vmin, 40px);
    height: clamp(28px, 4.5vmin, 40px);
    background: linear-gradient(135deg, #7b2cbf 0%, #5a189a 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: clamp(0.8rem, 2vmin, 1.1rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 3px 0 #3c096c, 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.sound-toggle-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #3c096c, 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sound-toggle-btn.muted {
    background: linear-gradient(135deg, #555 0%, #333 100%);
    box-shadow: 0 3px 0 #1a1a1a, 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.75;
}

.coins-indicator {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vmin, 8px);
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #3a1f00;
    padding: clamp(3px, 1vmin, 6px) clamp(8px, 2vmin, 14px) clamp(3px, 1vmin, 6px) clamp(3px, 1vmin, 6px);
    border-radius: 50px;
    font-weight: 800;
    font-size: clamp(0.8rem, 2vmin, 1.1rem);
    box-shadow: 0 3px 0 #b87700, 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    min-width: clamp(60px, 12vmin, 90px);
    justify-content: center;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.coins-indicator:active { transform: scale(0.95); }

.coin-icon {
    width: clamp(14px, 2.5vmin, 22px);
    height: clamp(14px, 2.5vmin, 22px);
    background: radial-gradient(circle at 30% 30%, #FFF8C4 0%, #FFD700 40%, #DAA520 100%);
    border-radius: 50%;
    border: 2px solid #B8860B;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.coin-icon::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: #B8860B;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

@keyframes coinPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.coins-indicator.bump { animation: coinPulse 0.3s ease; }

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

.game-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    gap: var(--game-gap);
}

.logo-container {
    width: var(--logo-size);
    height: var(--logo-size);
    max-width: 100%;
    background: var(--white);
    border-radius: clamp(10px, 2.5vmin, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(6px, 1.5vmin, 15px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.4);
    border: clamp(2px, 0.7vmin, 4px) solid var(--neon-blue);
    flex-shrink: 0;
}

.logo-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.action-buttons {
    display: flex;
    gap: var(--game-gap);
    width: 100%;
    max-width: var(--action-max);
    flex-shrink: 0;
}

.btn {
    flex: 1;
    padding: var(--btn-pad);
    border: none;
    border-radius: 10px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: var(--btn-font);
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s, filter 0.1s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
    white-space: nowrap;
}

.btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0.3); }
.btn-hint { background: linear-gradient(to bottom, #00d2ff, #0077ff); color: white; }
.btn-coins { background: linear-gradient(to bottom, #4CAF50, #2E7D32); color: white; }

.btn-skip {
    width: 100%;
    max-width: var(--action-max);
    padding: var(--btn-pad);
    background: linear-gradient(to bottom, #ff9500, #ff6b00);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: var(--btn-font);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.1s;
    box-shadow: 0 4px 0 #b84d00, 0 6px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-skip:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 #b84d00, 0 2px 6px rgba(0, 0, 0, 0.3); }
.btn-skip:disabled { background: linear-gradient(to bottom, #666, #444); box-shadow: 0 4px 0 #222; cursor: not-allowed; opacity: 0.6; }

.daily-mode-badge {
    background: linear-gradient(to right, #FF6B00, #E65100);
    color: white;
    font-size: clamp(0.65rem, 1.8vmin, 0.9rem);
    font-weight: 800;
    padding: clamp(4px, 1vmin, 8px) clamp(10px, 2.5vmin, 18px);
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #BF360C, 0 5px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    animation: dailyBadgePulse 2s infinite ease-in-out;
}

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

.daily-reminder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: var(--action-max);
    padding: var(--btn-pad);
    background: linear-gradient(to bottom, #FF6B00, #E65100);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(0.65rem, 1.7vmin, 0.9rem);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 0 #BF360C;
    white-space: nowrap;
    flex-shrink: 0;
    animation: reminderPulse 2s infinite ease-in-out;
}

.daily-reminder:active { transform: translateY(4px); box-shadow: 0 0 0 #BF360C; }
.daily-reminder-arrow { font-size: 0.7rem; animation: arrowSlide 1.5s infinite ease-in-out; }

@keyframes reminderPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.daily-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
    max-width: var(--action-max);
    padding: clamp(4px, 1vmin, 10px);
    background: rgba(76, 175, 80, 0.15);
    border: 1.5px solid rgba(76, 175, 80, 0.5);
    border-radius: 10px;
    text-align: center;
    flex-shrink: 0;
}

.daily-complete-text {
    font-size: clamp(0.65rem, 1.7vmin, 0.9rem);
    font-weight: 800;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.daily-complete-timer {
    font-size: clamp(0.55rem, 1.4vmin, 0.75rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

.hint-text {
    font-size: clamp(0.7rem, 1.8vmin, 0.95rem);
    color: var(--neon-blue);
    text-align: center;
    font-style: italic;
    min-height: 16px;
    padding: 0 10px;
    flex-shrink: 0;
}

.word-slots {
    display: flex;
    gap: clamp(4px, 1vmin, 10px);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    flex-shrink: 0;
}

.letter-slot {
    width: var(--slot-width);
    height: var(--slot-height);
    border-bottom: 4px solid var(--neon-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--slot-font);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--white);
    transition: all 0.2s;
    flex-shrink: 0;
}

.letter-slot.filled { border-bottom-color: var(--yellow); color: var(--yellow); }
.letter-slot.correct { color: #4CAF50; border-bottom-color: #4CAF50; }
.letter-slot.wrong { color: #ff4757; border-bottom-color: #ff4757; animation: shake 0.4s; }

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.keyboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 1vmin, 10px);
    width: 100%;
    max-width: var(--keyboard-max);
    flex-shrink: 0;
}

.key-btn {
    aspect-ratio: 1 / 1;
    background: #4CAF50;
    border: none;
    border-radius: 8px;
    color: white;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(1.1rem, 3.2vmin, 1.6rem);
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 3px 0 #2E7D32;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    user-select: none;
}

.key-btn:active, .key-btn.key-pressed { transform: translateY(3px); box-shadow: 0 0 0 #2E7D32; }

.btn-backspace {
    padding: clamp(6px, 1.4vmin, 10px) clamp(20px, 5vmin, 40px);
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: clamp(0.9rem, 2.2vmin, 1.4rem);
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 #c0392b;
    transition: all 0.1s;
    flex-shrink: 0;
}

.btn-backspace:active, .btn-backspace.key-pressed { transform: translateY(4px); box-shadow: 0 0 0 #c0392b; }

/* =========================================================
   POPUP MODAL
   ========================================================= */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.popup-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }
.popup-overlay.hidden { display: none !important; }

.popup-content {
    position: relative;
    background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%);
    border-radius: 25px;
    padding: clamp(18px, 3vmin, 30px) clamp(16px, 3vmin, 25px);
    max-width: min(380px, 90vw);
    width: 100%;
    text-align: center;
    border: 3px solid #9c27b0;
    box-shadow: 0 0 40px rgba(156, 39, 176, 0.6);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.popup-overlay:not(.hidden) .popup-content { transform: scale(1); }

.win-title {
    font-size: clamp(1.5rem, 4.5vmin, 2.4rem);
    font-weight: 800;
    color: #ffcc00;
    text-shadow: 0 3px 0 #ff7b00, 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 204, 0, 0.8);
    margin-bottom: clamp(10px, 2vmin, 18px);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.win-image-container {
    width: 100%;
    max-width: clamp(120px, 30vmin, 220px);
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(8px, 1.5vmin, 15px);
    margin: 0 auto clamp(10px, 2vmin, 20px);
    border: 4px solid #00d2ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.win-logo-image { max-width: 100%; max-height: 100%; object-fit: contain; }

.win-answer {
    font-size: clamp(1.1rem, 3.5vmin, 1.8rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: clamp(8px, 1.5vmin, 15px);
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.win-reward {
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    color: #ffcc00;
    font-size: clamp(1rem, 2.5vmin, 1.4rem);
    font-weight: 800;
    padding: clamp(6px, 1.2vmin, 10px) clamp(16px, 4vmin, 30px);
    border-radius: 50px;
    margin-bottom: clamp(12px, 2.5vmin, 25px);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.btn-continue {
    width: 100%;
    padding: clamp(12px, 2vmin, 18px);
    background: linear-gradient(to bottom, #4CAF50, #2E7D32);
    color: white;
    border: none;
    border-radius: 15px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(1rem, 2.5vmin, 1.3rem);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 0 #1B5E20;
    transition: all 0.1s;
}

.btn-continue:active { transform: translateY(5px); box-shadow: 0 0 0 #1B5E20; }

.daily-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vmin, 12px);
}

.daily-streak-badge {
    display: inline-block;
    background: linear-gradient(to bottom, #FF6B00, #E65100);
    color: #FFFFFF;
    font-size: clamp(0.75rem, 1.8vmin, 0.9rem);
    font-weight: 800;
    padding: clamp(4px, 1vmin, 6px) clamp(14px, 3vmin, 20px);
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 0 #BF360C, 0 5px 10px rgba(0, 0, 0, 0.3);
}

.daily-category-badge {
    display: inline-block;
    background: linear-gradient(to right, #00d2ff, #0077ff);
    color: white;
    font-size: clamp(0.7rem, 1.7vmin, 0.85rem);
    font-weight: 800;
    padding: clamp(4px, 1vmin, 6px) clamp(12px, 2.5vmin, 18px);
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #0056b3, 0 5px 10px rgba(0, 0, 0, 0.3);
}

.daily-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.8rem, 2vmin, 0.95rem);
    text-align: center;
    margin: 4px 0;
    max-width: 280px;
    line-height: 1.4;
}

.daily-reward-display {
    display: inline-block;
    background: rgba(0, 0, 0, 0.5);
    color: #FFD700;
    font-size: clamp(1.4rem, 3.5vmin, 1.8rem);
    font-weight: 800;
    padding: clamp(8px, 1.5vmin, 12px) clamp(24px, 6vmin, 36px);
    border-radius: 50px;
    margin: 6px 0 12px;
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.3);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
}

.btn-daily-close {
    width: 100%;
    padding: clamp(10px, 1.8vmin, 12px);
    background: linear-gradient(to bottom, #555, #333);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(0.85rem, 2vmin, 0.95rem);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 0 #1a1a1a;
    transition: all 0.1s;
}

.btn-daily-close:active { transform: translateY(4px); box-shadow: 0 0 0 #1a1a1a; }

.milestone-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vmin, 12px);
    background: linear-gradient(135deg, #ff6b00 0%, #d84315 100%) !important;
    border: 4px solid #ffcc00 !important;
    animation: milestoneGlow 2s infinite ease-in-out;
}

@keyframes milestoneGlow {
    0%, 100% { box-shadow: 0 0 60px rgba(255, 204, 0, 0.8), 0 0 100px rgba(255, 107, 0, 0.5); }
    50% { box-shadow: 0 0 80px rgba(255, 204, 0, 1), 0 0 140px rgba(255, 107, 0, 0.8); }
}

.milestone-badge {
    font-size: clamp(3rem, 8vmin, 5rem);
    line-height: 1;
    margin-bottom: 4px;
    animation: milestoneBounce 1s infinite alternate ease-in-out;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.9));
}

@keyframes milestoneBounce {
    0% { transform: translateY(0) scale(1) rotate(-5deg); }
    100% { transform: translateY(-15px) scale(1.1) rotate(5deg); }
}

.milestone-title {
    font-size: clamp(1.5rem, 4.5vmin, 2.4rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 3px 0 #8b2500, 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 255, 255, 0.8);
    animation: milestoneTitlePulse 1.5s infinite ease-in-out;
}

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

.milestone-streak {
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    color: #ffcc00;
    font-size: clamp(0.95rem, 2.5vmin, 1.2rem);
    font-weight: 800;
    padding: clamp(5px, 1.2vmin, 8px) clamp(16px, 4vmin, 24px);
    border-radius: 30px;
    letter-spacing: 1px;
    box-shadow: inset 0 0 15px rgba(255, 204, 0, 0.4);
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

.milestone-reward {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    color: #ffd700;
    font-size: clamp(1.6rem, 4vmin, 2.2rem);
    font-weight: 800;
    padding: clamp(10px, 2vmin, 16px) clamp(28px, 8vmin, 44px);
    border-radius: 50px;
    margin: 6px 0;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3), 0 0 30px rgba(255, 215, 0, 0.4);
    animation: milestoneRewardPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes milestoneRewardPop {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.milestone-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(0.85rem, 2vmin, 1rem);
    font-style: italic;
    margin: 4px 0 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.confetti {
    position: absolute;
    width: 12px;
    height: 20px;
    opacity: 0.9;
    animation: confettiFall 3s infinite ease-in;
}

.confetti.c1 { background: #00d2ff; top: -20px; left: 10%; animation-delay: 0s; }
.confetti.c2 { background: #ffcc00; top: -20px; left: 25%; animation-delay: 0.3s; }
.confetti.c3 { background: #ff4757; top: -20px; left: 50%; animation-delay: 0.6s; }
.confetti.c4 { background: #4CAF50; top: -20px; left: 75%; animation-delay: 0.9s; }
.confetti.c5 { background: #00d2ff; top: -20px; left: 90%; animation-delay: 1.2s; }
.confetti.c6 { background: #ffcc00; top: -20px; left: 40%; animation-delay: 0.2s; }
.confetti.c7 { background: #ff4757; top: -20px; left: 60%; animation-delay: 0.5s; }
.confetti.c8 { background: #4CAF50; top: -20px; left: 80%; animation-delay: 0.8s; }

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
}

.floating-coin {
    position: fixed;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(1rem, 2.2vmin, 1.4rem);
    color: #ffcc00;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 204, 0, 0.9);
    pointer-events: none;
    z-index: 99999;
    animation: floatUp 1.2s ease-out forwards;
}

.floating-coin.negative { color: #ff4757; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 71, 87, 0.9); }

@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-70px) scale(1); opacity: 0; }
}

.complete-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #4a148c 0%, #1a0033 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    padding: 20px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.complete-overlay:not(.hidden) { opacity: 1; }
.complete-overlay.hidden { display: none !important; }

.complete-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: min(420px, 90vw);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: completePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.trophy-icon {
    font-size: clamp(2.5rem, 8vmin, 5rem);
    margin-bottom: clamp(8px, 2vmin, 20px);
    animation: trophyBounce 1s infinite alternate ease-in-out;
    filter: drop-shadow(0 0 25px rgba(255, 204, 0, 0.9));
}

@keyframes trophyBounce {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-15px) rotate(5deg); }
}

.complete-title {
    font-size: clamp(1.3rem, 4vmin, 2.2rem);
    font-weight: 800;
    color: #ffcc00;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: clamp(4px, 1vmin, 12px);
    text-shadow: 0 4px 0 #ff7b00, 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 204, 0, 0.8);
    line-height: 1.1;
}

.complete-subtitle {
    font-size: clamp(0.8rem, 2vmin, 1.1rem);
    color: #ffffff;
    margin-bottom: clamp(12px, 3vmin, 30px);
    opacity: 0.85;
    font-weight: 600;
}

.complete-stats {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 204, 0, 0.4);
    border-radius: 20px;
    padding: clamp(10px, 2vmin, 20px) clamp(14px, 3vmin, 25px);
    margin-bottom: clamp(12px, 3vmin, 30px);
    box-shadow: inset 0 0 20px rgba(255, 204, 0, 0.1);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(4px, 1vmin, 10px) 0;
    font-size: clamp(0.8rem, 2vmin, 1.1rem);
}

.stat-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.stat-label { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.stat-value { color: #ffcc00; font-weight: 800; font-size: clamp(1rem, 2.5vmin, 1.4rem); text-shadow: 0 0 10px rgba(255, 204, 0, 0.6); }

.btn-play-again {
    width: 100%;
    padding: clamp(12px, 2vmin, 18px);
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    color: #3a1f00;
    border: none;
    border-radius: 15px;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: clamp(1rem, 2.5vmin, 1.3rem);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 6px 0 #b87700, 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.btn-play-again:active { transform: translateY(6px); box-shadow: 0 0 0 #b87700; }

.confetti-big {
    position: absolute;
    width: 14px;
    height: 22px;
    opacity: 0.9;
    top: -30px;
    z-index: 1;
    animation: confettiFallBig 4s infinite linear;
}

@keyframes confettiFallBig {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0.3; }
}

.confetti-big.c1  { background: #00d2ff; left: 5%;  animation-delay: 0s;    animation-duration: 3.5s; }
.confetti-big.c2  { background: #ffcc00; left: 15%; animation-delay: 0.4s;  animation-duration: 4s; }
.confetti-big.c3  { background: #ff4757; left: 25%; animation-delay: 0.8s;  animation-duration: 3.8s; }
.confetti-big.c4  { background: #4CAF50; left: 35%; animation-delay: 1.2s;  animation-duration: 4.2s; }
.confetti-big.c5  { background: #00d2ff; left: 45%; animation-delay: 0.2s;  animation-duration: 3.6s; }
.confetti-big.c6  { background: #ffcc00; left: 55%; animation-delay: 0.6s;  animation-duration: 4.1s; }
.confetti-big.c7  { background: #ff4757; left: 65%; animation-delay: 1.0s;  animation-duration: 3.9s; }
.confetti-big.c8  { background: #4CAF50; left: 75%; animation-delay: 1.4s;  animation-duration: 4.3s; }
.confetti-big.c9  { background: #00d2ff; left: 85%; animation-delay: 0.3s;  animation-duration: 3.7s; }
.confetti-big.c10 { background: #ffcc00; left: 92%; animation-delay: 0.9s;  animation-duration: 4.4s; }
.confetti-big.c11 { background: #ff4757; left: 10%; animation-delay: 1.6s;  animation-duration: 4.5s; }
.confetti-big.c12 { background: #4CAF50; left: 60%; animation-delay: 1.8s;  animation-duration: 4.6s; }

.disclaimer {
    font-size: clamp(0.5rem, 1.3vmin, 0.7rem);
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding: 0 10px;
    line-height: 1.3;
    max-width: 100%;
    font-weight: 500;
    flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 340px) {
    :root {
        --logo-size: clamp(80px, 20vmin, 120px);
        --keyboard-max: 200px;
        --slot-width: 20px;
        --slot-height: 28px;
        --slot-font: 0.9rem;
        --action-max: 220px;
    }
    .btn, .btn-skip, .daily-reminder { font-size: 0.65rem; padding: 5px; }
    .game-header { font-size: 0.75rem; }
}

@media (max-height: 600px) {
    :root {
        --logo-size: clamp(80px, 18vmin, 130px);
        --keyboard-max: clamp(180px, 40vmin, 250px);
        --slot-width: 20px;
        --slot-height: 28px;
        --slot-font: 0.95rem;
        --game-padding: 6px;
        --game-gap: 3px;
    }
    .btn, .btn-skip, .daily-reminder { font-size: 0.7rem; padding: 5px; }
    .game-header { font-size: 0.8rem; padding: 5px 12px; }
    .coin-icon { width: 14px; height: 14px; }
    .sound-toggle-btn { width: 28px; height: 28px; font-size: 0.8rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .game-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px 16px;
        align-items: center;
        justify-items: center;
        max-width: 100%;
        justify-content: center;
    }
    .game-main .game-title { grid-column: 1 / -1; font-size: 0.9rem; margin: 0; }
    .logo-container { grid-column: 1; grid-row: 2 / 4; margin: 0; }
    .action-buttons { grid-column: 2; grid-row: 2; max-width: 100%; margin: 0; }
    .btn-skip { grid-column: 2; grid-row: 3; margin: 0; max-width: 100%; }
    .daily-reminder, .daily-complete, .daily-mode-badge { grid-column: 1 / -1; margin: 2px 0; }
    .word-slots { grid-column: 1 / -1; margin: 0; }
    .keyboard { grid-column: 1 / -1; max-width: 60vh; grid-template-columns: repeat(6, 1fr); gap: 4px; }
    .key-btn { font-size: 0.8rem; }
    .btn-backspace { grid-column: 1 / -1; padding: 4px 24px; font-size: 0.95rem; }
    .disclaimer { font-size: 0.45rem; }
    .loading-content { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 800px; }
    .game-logo { width: 100px; margin-bottom: 0; }
    .progress-wrapper { margin-bottom: 1rem; width: 100%; }
    .subtitle { width: 100%; }
}

@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --logo-size: clamp(160px, 30vmin, 240px);
        --keyboard-max: clamp(300px, 50vmin, 400px);
        --slot-width: 34px;
        --slot-height: 46px;
        --slot-font: 1.6rem;
        --action-max: 400px;
    }
    .btn, .btn-skip, .daily-reminder { font-size: 0.95rem; }
    .key-btn { font-size: 1.2rem; }
}

@media (min-width: 900px) and (min-height: 600px) {
    :root {
        --logo-size: clamp(140px, 20vmin, 200px);
        --keyboard-max: clamp(280px, 35vmin, 360px);
        --slot-width: 34px;
        --slot-height: 46px;
        --slot-font: 1.6rem;
        --action-max: clamp(300px, 40vmin, 400px);
    }
    .game-main { max-width: 500px; gap: clamp(6px, 1.2vmin, 12px); }
    .btn, .btn-skip, .daily-reminder { font-size: 0.95rem; }
    .key-btn { font-size: 1.15rem; border-radius: 9px; }
    .btn-backspace { padding: 8px 40px; font-size: 1.2rem; }
}

@media (min-width: 1400px) and (min-height: 800px) {
    :root {
        --logo-size: clamp(160px, 18vmin, 220px);
        --keyboard-max: clamp(300px, 30vmin, 400px);
        --slot-width: 38px;
        --slot-height: 52px;
        --slot-font: 1.8rem;
        --action-max: 420px;
    }
    .btn, .btn-skip, .daily-reminder { font-size: 1rem; }
    .key-btn { font-size: 1.35rem; }
}

/* =========================================================
   LOADING SCREEN TITLE FIX
   Forces yellow title + gold percent on the loading screen
   ========================================================= */

#loading-screen .game-title {
    font-size: clamp(1.8rem, 6vmin, 2.5rem) !important;
    font-weight: 800 !important;
    color: #ffcc00 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    text-shadow:
        0 3px 0 #ff7b00,
        0 6px 10px rgba(0, 0, 0, 0.6),
        0 0 15px #ffcc00 !important;
}

#loading-screen .progress-info {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#loading-screen #loading-percent {
    color: #ffcc00 !important;
    font-weight: 800 !important;
}

#loading-screen .subtitle {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6) !important;
}

/* =========================================================
   FEEDBACK POPUP
   ========================================================= */

.feedback-content {
    background: linear-gradient(135deg, #4a148c 0%, #311b92 100%) !important;
}

.feedback-subtitle {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.star {
    font-size: 2.5rem;
    color: #ffcc00;
    cursor: pointer;
    transition: transform 0.2s;
}

.star.active {
    content: '★';
}

.star:hover, .star.selected {
    transform: scale(1.2);
}

.feedback-msg {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    min-height: 1.2rem;
}

#rate-now-btn {
    margin-bottom: 10px;
}

/* =========================================================
   HEADER CALENDAR BTN & ASK FRIEND BTN
   ========================================================= */

.calendar-toggle-btn {
    width: clamp(28px, 6.5vmin, 38px);
    height: clamp(28px, 6.5vmin, 38px);
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: clamp(0.9rem, 2.5vmin, 1.2rem);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s, background 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.calendar-toggle-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.4); }

.btn-ask-friend {
    background: linear-gradient(to bottom, #25D366, #128C7E) !important;
    color: white !important;
    box-shadow: 0 4px 0 #075E54 !important;
}

.btn-ask-friend:active { transform: translateY(4px); box-shadow: 0 0 0 #075E54 !important; }

/* =========================================================
   7-DAY LOGIN REWARDS GRID
   ========================================================= */

.login-rewards-content {
    background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%) !important;
    border: 3px solid #9c27b0 !important;
    box-shadow: 0 0 40px rgba(156, 39, 176, 0.6) !important;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
    width: 100%;
}

.reward-card {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.reward-card.big-card {
    grid-column: span 3;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 107, 0, 0.2));
    border: 2px solid #ffd700;
}

.reward-card.claimed {
    background: rgba(76, 175, 80, 0.25);
    border-color: #4CAF50;
    opacity: 0.8;
}

.reward-card.active-today {
    background: rgba(0, 210, 255, 0.3);
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.8);
    transform: scale(1.05);
}

.card-day {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8);
}

.card-coin {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffcc00;
}

.card-status {
    font-size: 0.75rem;
    font-weight: bold;
}

/* =========================================================
   STREAK FREEZE POPUP
   ========================================================= */

.streak-freeze-content {
    background: linear-gradient(135deg, #005c97 0%, #363795 100%) !important;
    border: 3px solid #00d2ff !important;
}

.freeze-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 15px 0;
}

/* =========================================================
   REGION SELECTION POPUP & HEADER BTN
   ========================================================= */

.region-toggle-btn {
    width: clamp(28px, 6.5vmin, 38px);
    height: clamp(28px, 6.5vmin, 38px);
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: clamp(0.9rem, 2.5vmin, 1.2rem);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    animation: flagWaving 3.2s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes flagWaving {
    0% { transform: perspective(400px) rotateY(0deg) rotateX(0deg) scale(1); }
    25% { transform: perspective(400px) rotateY(14deg) rotateX(5deg) scale(1.06); }
    50% { transform: perspective(400px) rotateY(-10deg) rotateX(-4deg) scale(1); }
    75% { transform: perspective(400px) rotateY(12deg) rotateX(3deg) scale(1.06); }
    100% { transform: perspective(400px) rotateY(0deg) rotateX(0deg) scale(1); }
}

.flag-waving-span {
    display: inline-block;
    animation: flagWaving 3.2s ease-in-out infinite alternate;
    transform-origin: center center;
}

.region-toggle-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.4); }

.region-popup-content {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    border: 3px solid #00d2ff !important;
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.6) !important;
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 0;
    width: 100%;
}

.region-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.region-card:hover, .region-card.selected {
    background: rgba(0, 210, 255, 0.25);
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.8);
    transform: scale(1.04);
}

.region-flag {
    font-size: 2rem;
    line-height: 1;
}

.region-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* =========================================================
   PASSPORT STAMP POPUP & HEADER BTN
   ========================================================= */

.passport-toggle-btn {
    width: clamp(26px, 5.5vmin, 34px);
    height: clamp(26px, 5.5vmin, 34px);
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    color: var(--white);
    padding: 2px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, background 0.2s, box-shadow 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.passport-toggle-btn:active { transform: scale(0.9); background: rgba(0, 0, 0, 0.5); }

.globe-airplane-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.airplane-orbit-group {
    transform-origin: 50px 50px;
    animation: orbitAirplane 4s linear infinite;
}

.passport-toggle-btn.orbiting {
    box-shadow: 0 0 15px #ffcc00, 0 0 25px #00d2ff;
    transform: scale(1.15);
}

.passport-toggle-btn.orbiting .airplane-orbit-group {
    animation: orbitAirplaneFast 0.8s ease-in-out;
}

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

@keyframes orbitAirplaneFast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}

.passport-popup-content {
    background: linear-gradient(135deg, #1A237E 0%, #0D47A1 100%) !important;
    border: 3px solid #FFD700 !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5) !important;
    max-width: min(420px, 92vw) !important;
}

.passport-stats-bar {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 12px;
}

.passport-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.passport-card {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.passport-card.stamped {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(76, 175, 80, 0.2));
    border-color: #FFD700;
}

.passport-flag { font-size: 1.8rem; line-height: 1; }
.passport-cname { font-size: 0.75rem; font-weight: 800; color: #ffffff; }

.passport-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.passport-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #00d2ff, #4CAF50);
    width: 0%;
    transition: width 0.3s ease;
}

.passport-ptext { font-size: 0.65rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; }

.passport-stamp-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.9rem;
}

.win-2x-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%) !important;
    color: #3a1f00 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    animation: pulse2x 1.2s infinite alternate ease-in-out !important;
}

@keyframes pulse2x {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
    100% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 1); }
}

.btn-offline {
    background: linear-gradient(135deg, #616161 0%, #424242 100%) !important;
    opacity: 0.8 !important;
    border-color: #9e9e9e !important;
}

.no-ads-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* =========================================================
   STAMP UNLOCK POPUP CELEBRATION
   ========================================================= */

.stamp-unlock-content {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    border: 4px solid #FFD700 !important;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.8) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stamp-unlock-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 2px;
    animation: stampBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

@keyframes stampBounce {
    0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.stamp-unlock-flag {
    font-size: 4rem;
    line-height: 1;
    margin: 8px 0;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7));
}

.stamp-unlock-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* =========================================================
   CONVEYOR BELT ANIMATED REWARDS BTN & NO ADS
   ========================================================= */

.conveyor-rewards-btn {
    width: clamp(28px, 6vmin, 36px);
    height: clamp(28px, 6vmin, 36px);
    border-radius: 50%;
    border: 2px solid #FFD700;
    background: linear-gradient(135deg, #FF6B00 0%, #D84315 100%);
    color: var(--white);
    font-size: clamp(0.9rem, 2.3vmin, 1.2rem);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(255, 107, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.conveyor-utility-btn {
    width: clamp(28px, 6vmin, 36px);
    height: clamp(28px, 6vmin, 36px);
    border-radius: 50%;
    border: 2px solid #00d2ff;
    background: linear-gradient(135deg, #005c97 0%, #363795 100%);
    color: var(--white);
    font-size: clamp(0.9rem, 2.3vmin, 1.2rem);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 210, 255, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.conveyor-utility-btn:active { transform: scale(0.9); }

.conveyor-icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

.conveyor-icon.flip {
    transform: rotateY(90deg) scale(0.5);
    opacity: 0.2;
}

.conveyor-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #FF1744;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 8px #FF1744;
    animation: badgeGlow 1.5s infinite alternate ease-in-out;
}

.conveyor-badge.hidden { display: none !important; }

@keyframes badgeGlow {
    0% { transform: scale(0.9); box-shadow: 0 0 4px #FF1744; }
    100% { transform: scale(1.3); box-shadow: 0 0 10px #FF1744, 0 0 15px #FF1744; }
}

.remove-ads-btn {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    border: 2px solid #ff5252 !important;
    color: white !important;
}

.header-icon-btn {
    width: clamp(28px, 6.5vmin, 38px);
    height: clamp(28px, 6.5vmin, 38px);
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: clamp(0.9rem, 2.5vmin, 1.2rem);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s, background 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-icon-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.4); }

.speed-demon-badge {
    background: linear-gradient(to right, #FFD700, #FFA500);
    color: #3a1f00;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 8px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: speedPulse 0.8s infinite alternate ease-in-out;
}

@keyframes speedPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* =========================================================
   SPIN WHEEL POPUP
   ========================================================= */

.spin-popup-content {
    background: linear-gradient(135deg, #1b5e20 0%, #004d40 100%) !important;
    border: 3px solid #ffcc00 !important;
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.6) !important;
}

.wheel-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.wheel-pointer {
    position: absolute;
    top: -12px;
    font-size: 1.8rem;
    color: #ff4757;
    z-index: 10;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.wheel-container {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 6px solid #ffcc00;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

#wheel-canvas {
    width: 100%;
    height: 100%;
    transition: transform 4s cubic-bezier(0.15, 0.9, 0.2, 1);
}

/* =========================================================
   TROPHY CABINET POPUP
   ========================================================= */

.trophies-popup-content {
    background: linear-gradient(135deg, #311b92 0%, #4a148c 100%) !important;
    border: 3px solid #00d2ff !important;
    max-width: min(420px, 92vw) !important;
}

.trophies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 15px 0;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

.trophy-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    transition: all 0.2s ease;
}

.trophy-card.unlocked {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(0, 210, 255, 0.25));
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.trophy-icon-large { font-size: 2.2rem; line-height: 1; }
.trophy-title { font-size: 0.75rem; font-weight: 800; color: #ffd700; }
.trophy-desc { font-size: 0.65rem; color: rgba(255, 255, 255, 0.8); }
.trophy-status { font-size: 0.65rem; font-weight: bold; margin-top: 2px; }

/* PixelPicked Verified Badge */
.pixelpicked-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px auto 0;
    flex-shrink: 0;
}

.pixelpicked-badge a {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
    line-height: 0;
}

.pixelpicked-badge a:hover {
    transform: scale(1.05);
    opacity: 0.95;
}

.pixelpicked-badge img {
    max-width: clamp(130px, 30vmin, 190px);
    height: auto;
    display: block;
}

@media (max-height: 620px) {
    .pixelpicked-badge img {
        max-width: 110px;
    }
}