@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
    --bg-dark: #0f0f13;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --accent-blue: #00d2ff;
    --accent-purple: #9d50bb;
    --accent-pink: #ff6b9d;
    --accent-green: #00e676;
    --accent-orange: #ff9100;
    --accent-red: #ff4757;
    --text-color: #e0e0e0;
    --text-muted: #8a8a9a;
    --gold: #ffd700;
    --diamond: #00e5ff;
    --overlay-bg: rgba(10, 10, 20, 0.85);
    --app-height: 100vh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-color);
    min-height: var(--app-height);
    height: var(--app-height);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

/* ═══════════ CONTAINER ═══════════ */

.glass-container {
    width: 100%;
    max-width: 450px;
    min-height: var(--app-height);
    height: var(--app-height);
    max-height: var(--app-height);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 1.5s ease-in-out;
}

/* ═══════════ YZ TASARIMI: KARAKTERE (SKIN) ÖZEL ARAYÜZ TEMALARI ═══════════ */
.glass-container[data-skin="neon"] { background: linear-gradient(135deg, #040914 0%, #0a1f38 100%); border: 1px solid rgba(0, 210, 255, 0.4); }
.glass-container[data-skin="ocean"] { background: linear-gradient(135deg, #001f3f 0%, #005b96 100%); }
.glass-container[data-skin="cloud"] { background: linear-gradient(135deg, #7ba8cd 0%, #a2c9eb 100%); }
.glass-container[data-skin="plant"] { background: linear-gradient(135deg, #081c15 0%, #2dc653 100%); }
.glass-container[data-skin="egypt"] { background: linear-gradient(135deg, #3b2804 0%, #9c6e14 100%); }
.glass-container[data-skin="chocolate"] { background: linear-gradient(135deg, #2d1810 0%, #6b3513 100%); }
.glass-container[data-skin="wizard"] { background: linear-gradient(135deg, #190033 0%, #4a007a 100%); }
.glass-container[data-skin="crystal"] { background: linear-gradient(135deg, #2a0845 0%, #6441a5 100%); }
.glass-container[data-skin="shadow"] { background: linear-gradient(135deg, #050505 0%, #1c1c1c 100%); }
.glass-container[data-skin="storm"] { background: linear-gradient(135deg, #1c223a 0%, #435460 100%); }
.glass-container[data-skin="galaxy"] { background: linear-gradient(135deg, #09071c 0%, #1a1a2e 100%); }
.glass-container[data-skin="slime"] { background: linear-gradient(135deg, #082108 0%, #1e8f00 100%); }
.glass-container[data-skin="lava"] { background: linear-gradient(135deg, #330000 0%, #991a00 100%); }
.glass-container[data-skin="tree"] { background: linear-gradient(135deg, #1e3a1e 0%, #4c3023 100%); }
.glass-container[data-skin="ice"] { background: linear-gradient(135deg, #15304a 0%, #2a6bb5 100%); }
.glass-container[data-skin="robot"] { background: linear-gradient(135deg, #1c2e40 0%, #4b6984 100%); }

/* YZ Tasarımı: Duyguya Bağlı Dinamik Arka Planlar (Mood Sync) - Bunlar Skin temalarını geçici ezer */
.glass-container[data-mood="happy"] { background: linear-gradient(135deg, #0d324d 0%, #7f5a83 100%); }
.glass-container[data-mood="loved"] { background: linear-gradient(135deg, #4a1d33 0%, #87365c 100%); }
.glass-container[data-mood="sad"] { background: linear-gradient(135deg, #161616 0%, #2f3640 100%); }
.glass-container[data-mood="sleepy"] { background: linear-gradient(135deg, #07070b 0%, #151021 100%); }
.glass-container[data-mood="angry"] { background: linear-gradient(135deg, #4d1018 0%, #29080c 100%); }
.glass-container[data-mood="furious"] { background: linear-gradient(135deg, #6e0b14 0%, #000000 100%); }
.glass-container[data-mood="delighted"] { background: linear-gradient(135deg, #d38312 0%, #a83279 100%); }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
}

/* ═══════════ HEADER STATS BAR ═══════════ */

.stats-bar {
    padding: calc(12px + var(--safe-top)) 15px 8px;
    display: flex;
    justify-content: space-around;
    gap: 8px;
    border-radius: 0 0 20px 20px;
    z-index: 10;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    gap: 3px;
}

.stat-item i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.7;
}

.progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.4s ease;
}

.hunger-color { background: linear-gradient(90deg, #ff6b6b, #ff9f43); }
.clean-color  { background: linear-gradient(90deg, #54a0ff, #48dbfb); }
.energy-color { background: linear-gradient(90deg, #feca57, #ff9ff3); }
.fun-color    { background: linear-gradient(90deg, #5f27cd, #c44bff); }

.stat-low .progress-fill {
    animation: pulse-bar 0.8s ease-in-out infinite;
}

@keyframes pulse-bar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ═══════════ GAME AREA ═══════════ */

.game-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Particles */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    animation: float-up linear infinite;
}

@keyframes float-up {
    0% { transform: translateY(100%) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

/* ═══════════ DROP ZONE ═══════════ */

.drop-zone {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
    pointer-events: none;
}

.drop-zone-ring {
    position: absolute;
    inset: 0;
    border: 3px dashed rgba(0, 210, 255, 0.4);
    border-radius: 50%;
    animation: drop-pulse 1.5s ease-in-out infinite;
}

@keyframes drop-pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

.drop-zone-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-blue);
    opacity: 0.8;
    position: absolute;
    bottom: 10px;
}

.drop-zone.active .drop-zone-ring {
    border-color: var(--accent-green);
    animation: drop-glow 0.5s ease-in-out infinite;
}

.drop-zone.active .drop-zone-text {
    color: var(--accent-green);
}

@keyframes drop-glow {
    0%, 100% { transform: scale(1.05); opacity: 0.8; box-shadow: 0 0 20px rgba(0, 230, 118, 0.3); }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 40px rgba(0, 230, 118, 0.5); }
}

/* ═══════════ CAT CHARACTER ═══════════ */

.miav-cat {
    width: 180px;
    height: 160px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    animation: bounce 2.5s infinite ease-in-out;
    transition: transform 0.2s, filter 0.8s ease-in-out;
}

/* YZ Tasarımı: Ambient Glow (Aura Işık Yansımaları) */
.miav-cat.happy, .miav-cat.loved { filter: drop-shadow(0 0 25px rgba(255, 105, 180, 0.45)); }
.miav-cat.delighted { filter: drop-shadow(0 0 45px rgba(255, 215, 0, 0.6)); }
.miav-cat.angry { filter: drop-shadow(0 0 35px rgba(255, 50, 50, 0.7)); }
.miav-cat.furious { filter: drop-shadow(0 20px 60px rgba(255, 0, 0, 0.9)); }
.miav-cat.sleepy { filter: drop-shadow(0 0 20px rgba(100, 100, 255, 0.3)); }
.miav-cat.sad { filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8)); }

.miav-cat:active {
    transform: scale(0.92);
}

/* When dragging, cat is excited */
.miav-cat.waiting-food {
    animation: bounce-excited 0.8s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-12px) scaleX(1.02); }
}

@keyframes bounce-excited {
    0%, 100% { transform: translateY(0) scaleX(1) rotate(0deg); }
    25% { transform: translateY(-8px) scaleX(1.03) rotate(-3deg); }
    75% { transform: translateY(-8px) scaleX(1.03) rotate(3deg); }
}

.cat-body {
    width: 180px;
    height: 160px;
    background: linear-gradient(145deg, #f5a623, #e8941a);
    border-radius: 50% 50% 45% 45%;
    position: relative;
    box-shadow:
        inset -8px -8px 20px rgba(0,0,0,0.2),
        inset 8px 8px 20px rgba(255,255,255,0.1),
        0 15px 40px rgba(0,0,0,0.3);
}

/* Ears */
.cat-body .ears {
    position: absolute;
    top: -18px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
}

.ear {
    width: 42px;
    height: 42px;
    background: linear-gradient(145deg, #f5a623, #e0891a);
    position: relative;
}

.ear.left { border-radius: 8px 40px 0 0; }
.ear.right { border-radius: 40px 8px 0 0; }

.ear::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, #ffb8d1, #ff9ebb);
    top: 8px;
}

.ear.left::after { right: 4px; border-radius: 5px 25px 0 0; }
.ear.right::after { left: 4px; border-radius: 25px 5px 0 0; }

/* Eyes */
.cat-body .eyes {
    position: absolute;
    top: 38%;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.eye {
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.pupil {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #2d2d2d;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.15s ease-out;
}

.pupil::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    top: 2px;
    right: 2px;
}

/* Eyes follow cursor via JS - pupils offset */

/* Happy eyes */
.miav-cat.happy .eye {
    height: 14px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.miav-cat.happy .pupil { top: 0; transform: translate(-50%, 0); }

/* Sleepy eyes */
.miav-cat.sleepy .eye {
    height: 4px;
    background: #c47a15;
    border-radius: 4px;
    transform: translateY(6px);
}
.miav-cat.sleepy .pupil { display: none; }

/* Mouth */
.mouth {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 8px;
    border-bottom: 3px solid #c47a15;
    border-radius: 0 0 50% 50%;
    transition: all 0.3s;
}

.miav-cat.happy .mouth { width: 20px; height: 12px; }

.miav-cat.eating .mouth {
    width: 18px;
    height: 18px;
    background: #c47a15;
    border: none;
    border-radius: 50%;
    animation: chew 0.3s ease-in-out infinite;
}

@keyframes chew {
    0%, 100% { transform: translateX(-50%) scaleY(1); }
    50% { transform: translateX(-50%) scaleY(0.5); }
}

.miav-cat.sad .mouth {
    border-bottom: none;
    border-top: 3px solid #c47a15;
    border-radius: 50% 50% 0 0;
}

/* Angry */
.miav-cat.angry {
    animation: angry-shake 0.15s ease-in-out infinite;
}

.miav-cat.angry .cat-body {
    background: linear-gradient(145deg, #e05530, #c43a20) !important;
    box-shadow:
        inset -8px -8px 20px rgba(150,0,0,0.3),
        inset 8px 8px 20px rgba(255,80,50,0.2),
        0 15px 40px rgba(200,0,0,0.25);
    transition: background 0.3s;
}

.miav-cat.angry .ear {
    background: linear-gradient(145deg, #d04525, #b8301a) !important;
}

.miav-cat.angry .ear::after {
    background: linear-gradient(145deg, #ff6666, #e04040) !important;
}

.miav-cat.angry .cat-tail {
    background: linear-gradient(90deg, #c43a20, #e05530) !important;
}

.miav-cat.angry .eye {
    height: 16px;
    border-radius: 0 0 16px 16px;
    background: white;
}

.miav-cat.angry .pupil { top: 60%; }

.miav-cat.angry .mouth {
    width: 20px;
    height: 4px;
    border: none;
    border-bottom: none;
    border-top: 3px solid #6b1a0a;
    border-radius: 50% 50% 0 0;
}

.miav-cat.angry .blush {
    opacity: 1;
    background: rgba(255, 30, 30, 0.55);
    width: 28px;
    height: 16px;
}

@keyframes angry-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-3px) rotate(-1.5deg); }
    75% { transform: translateX(3px) rotate(1.5deg); }
}

/* Furious (2nd tail click) */
.miav-cat.furious {
    animation: furious-shake 0.08s ease-in-out infinite;
}

.miav-cat.furious .cat-body {
    background: linear-gradient(145deg, #cc2222, #991111) !important;
    box-shadow:
        inset -8px -8px 20px rgba(100,0,0,0.4),
        inset 8px 8px 20px rgba(255,50,50,0.2),
        0 0 40px rgba(255,0,0,0.3),
        0 15px 40px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

.miav-cat.furious .ear {
    background: linear-gradient(145deg, #b81a1a, #8b1010) !important;
}

.miav-cat.furious .ear::after {
    background: linear-gradient(145deg, #ff4444, #cc2222) !important;
}

.miav-cat.furious .cat-tail {
    background: linear-gradient(90deg, #991111, #cc2222) !important;
    animation: furious-tail-whip 0.3s ease-in-out infinite;
}

.miav-cat.furious .eye {
    height: 10px;
    width: 28px;
    border-radius: 0 0 14px 14px;
    background: white;
}

.miav-cat.furious .pupil {
    top: 70%;
    width: 12px;
    height: 12px;
    background: #1a0a00;
}

.miav-cat.furious .mouth {
    width: 24px;
    height: 6px;
    border: none;
    border-top: 4px solid #4a0000;
    border-radius: 0;
    transform: translateX(-50%);
}

.miav-cat.furious .blush {
    opacity: 1;
    background: rgba(255, 0, 0, 0.6);
    width: 30px;
    height: 18px;
}

@keyframes furious-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-5px) rotate(-2.5deg); }
    75% { transform: translateX(5px) rotate(2.5deg); }
}

@keyframes furious-tail-whip {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

/* Blush */
.blush {
    position: absolute;
    width: 22px;
    height: 12px;
    background: rgba(255, 140, 140, 0.4);
    border-radius: 50%;
    top: 58%;
    opacity: 0;
    transition: opacity 0.3s;
}
.left-blush { left: 18%; }
.right-blush { right: 18%; }

.miav-cat.happy .blush,
.miav-cat.loved .blush { opacity: 1; }

/* Delighted (treat reward) */
.miav-cat.delighted {
    animation: delighted-bounce 0.5s ease-in-out infinite;
}

.miav-cat.delighted .cat-body {
    background: linear-gradient(145deg, #ffcc44, #f5a623, #ff8fab) !important;
    box-shadow:
        inset -8px -8px 20px rgba(255,150,200,0.2),
        inset 8px 8px 20px rgba(255,255,150,0.2),
        0 0 30px rgba(255,200,100,0.3),
        0 15px 40px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

.miav-cat.delighted .ear {
    background: linear-gradient(145deg, #ffcc44, #f5a623) !important;
}

.miav-cat.delighted .ear::after {
    background: linear-gradient(145deg, #ffb8d1, #ff7eb3) !important;
}

.miav-cat.delighted .cat-tail {
    background: linear-gradient(90deg, #f5a623, #ffcc44) !important;
}

.miav-cat.delighted .eye {
    height: 12px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.miav-cat.delighted .pupil { top: 0; transform: translate(-50%, 0); }

.miav-cat.delighted .mouth {
    width: 24px;
    height: 14px;
    border-bottom: 3px solid #c47a15;
    border-top: none;
    border-radius: 0 0 50% 50%;
}

.miav-cat.delighted .blush {
    opacity: 1;
    background: rgba(255, 130, 170, 0.6);
    width: 28px;
    height: 16px;
}

@keyframes delighted-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

/* Munching (kibble/mama) */
.miav-cat.munching .cat-body {
    background: linear-gradient(145deg, #f5c842, #e8a520) !important;
    box-shadow:
        inset -8px -8px 20px rgba(200,160,0,0.15),
        inset 8px 8px 20px rgba(255,240,150,0.2),
        0 0 20px rgba(245,200,66,0.2),
        0 15px 40px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

.miav-cat.munching .eye {
    height: 14px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.miav-cat.munching .pupil { top: 0; transform: translate(-50%, 0); }

.miav-cat.munching .mouth {
    width: 18px;
    height: 10px;
    border-bottom: 3px solid #c47a15;
    border-top: none;
    border-radius: 0 0 50% 50%;
    animation: munch 0.4s ease-in-out infinite;
}

.miav-cat.munching .blush {
    opacity: 1;
    background: rgba(255, 150, 150, 0.5);
}

@keyframes munch {
    0%, 100% { transform: translateX(-50%) scaleY(1); }
    50% { transform: translateX(-50%) scaleY(0.3); }
}

/* Tail */
.cat-tail {
    position: absolute;
    bottom: 10px;
    right: -25px;
    width: 50px;
    height: 12px;
    background: linear-gradient(90deg, #e8941a, #f5a623);
    border-radius: 0 8px 8px 0;
    transform-origin: left center;
    animation: wag-tail 1.5s ease-in-out infinite;
}

@keyframes wag-tail {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(15deg); }
}

.miav-cat.waiting-food .cat-tail {
    animation: wag-tail-fast 0.4s ease-in-out infinite;
}

@keyframes wag-tail-fast {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(20deg); }
}

/* ─── Mood Bubble ─── */
.mood-bubble {
    position: absolute;
    top: 15%;
    right: 15%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 8px 14px;
    border-radius: 20px 20px 20px 4px;
    font-size: 1.5rem;
    z-index: 5;
    animation: pop-in 0.3s ease-out;
}

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ─── Action Feedback ─── */
.action-feedback {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    font-weight: 800;
    z-index: 5;
    pointer-events: none;
    animation: float-feedback 1.2s ease-out forwards;
}

@keyframes float-feedback {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) translateY(-40px) scale(1.3); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.8); }
}

/* ─── Sleep Overlay ─── */
.sleep-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 45, 0.65); /* Dark blue night effect */
    z-index: 100; /* Covers everything but clicks pass through */
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}
.sleep-overlay.active {
    opacity: 1;
}

@keyframes zzz-float {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    50% { opacity: 1; transform: translateY(-30px) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ═══════════ USER INFO ═══════════ */

.user-info {
    margin: 8px 15px;
    padding: 10px 15px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.user-info-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.currency span {
    margin-right: 15px;
    font-weight: 700;
    font-size: 0.9rem;
}

.gold { color: var(--gold); }
.diamond { color: var(--diamond); }

.leaderboard-trigger {
    border: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,145,0,0.16));
    color: #ffe08a;
    border-radius: 14px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.leaderboard-trigger i {
    font-size: 1rem;
}

.leaderboard-trigger span {
    font-size: 0.75rem;
}

.leaderboard-trigger:hover,
.leaderboard-trigger:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255,145,0,0.18);
    background: linear-gradient(135deg, rgba(255,215,0,0.28), rgba(255,145,0,0.24));
}

.level-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.level-badge {
    font-weight: 800;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.xp-bar-bg {
    width: 80px;
    height: 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #69ff69);
    transition: width 0.4s ease;
}

/* ═══════════ ITEM TRAY (compact bottom tray) ═══════════ */

.item-tray {
    background: rgba(15, 15, 25, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    z-index: 20;
    animation: tray-slide-up 0.3s ease-out;
}

@keyframes tray-slide-up {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.tray-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tray-title {
    font-size: 0.85rem;
    font-weight: 800;
}

.tray-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--text-color);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tray-close:hover {
    background: rgba(255,60,60,0.3);
    transform: rotate(90deg);
}

.tray-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.tray-scroll::-webkit-scrollbar { height: 3px; }
.tray-scroll::-webkit-scrollbar-track { background: transparent; }
.tray-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Tray Item Chip */
.tray-item {
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: grab;
    transition: all 0.2s;
    min-width: 80px;
}

.tray-item:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,210,255,0.15);
}

.tray-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.tray-item .item-icon { font-size: 1.6rem; }
.tray-item .item-name { font-size: 0.65rem; font-weight: 600; white-space: nowrap; }
.tray-item .item-effect { font-size: 0.55rem; color: var(--accent-green); }
.tray-item .item-cost { font-size: 0.6rem; color: var(--gold); font-weight: 700; display: flex; align-items: center; gap: 3px; }

.coin-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.coin-img-lg {
    width: 26px;
    height: 26px;
}

.tray-hint {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ═══════════ DRAGGED ITEM (follows cursor) ═══════════ */

.dragged-item {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    font-size: 2.8rem;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
    transition: transform 0.05s ease-out;
    animation: drag-wobble 0.6s ease-in-out infinite;
}

@keyframes drag-wobble {
    0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(5deg) scale(1.05); }
}

/* When near cat, glow */
.dragged-item.near-cat {
    filter: drop-shadow(0 0 20px rgba(0, 230, 118, 0.6));
    animation: drag-wobble-fast 0.3s ease-in-out infinite;
}

@keyframes drag-wobble-fast {
    0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.1); }
    50% { transform: translate(-50%, -50%) rotate(8deg) scale(1.15); }
}

/* Item fly-to-cat animation */
.fly-to-cat {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation: none !important;
}

/* ═══════════ BOTTOM MENU ═══════════ */

.bottom-menu {
    display: flex;
    justify-content: space-around;
    padding: 10px 5px calc(25px + var(--safe-bottom)) 5px;
    border-radius: 25px 25px 0 0;
    z-index: 15;
    gap: 4px;
}

.menu-btn {
    background: none;
    border: none;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.25s;
    padding: 8px 12px;
    border-radius: 12px;
    flex: 1 1 0;
    min-width: 0;
}

.menu-btn i { font-size: 1.4rem; }
.menu-btn span {
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.menu-btn:hover, .menu-btn:active {
    opacity: 1;
    transform: translateY(-3px);
    background: rgba(255,255,255,0.08);
}

.menu-btn.active {
    opacity: 1;
    background: rgba(255,255,255,0.1);
    color: var(--accent-blue);
}

/* ═══════════ GAME OVERLAY (modal only for RPS) ═══════════ */

.overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    animation: overlay-in 0.3s ease-out;
}

@keyframes overlay-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.overlay-content {
    width: 100%;
    max-height: 65%;
    border-radius: 25px 25px 0 0;
    padding: 20px;
    animation: slide-up 0.35s ease-out;
    overflow-y: auto;
}

@keyframes slide-up {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.overlay-header h2 { font-size: 1.3rem; font-weight: 800; }

.overlay-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.close-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover {
    background: rgba(255,60,60,0.3);
    transform: rotate(90deg);
}

/* ═══════════ YARN GAME (Cat Swinging) ═══════════ */

.yarn-game-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.yarn-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0,0,0,0.3);
    z-index: 10;
}

.yarn-game-score {
    display: flex;
    gap: 20px;
    font-size: 1rem;
    font-weight: 700;
}

.yarn-game-score strong {
    color: var(--accent-green);
    font-size: 1.2rem;
}

.yarn-timer {
    color: var(--accent-orange);
    font-weight: 800;
}

.yarn-game-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ─── Swing Animation (from CSS cat project, prefixed) ─── */

.swing-all-wrap {
    animation: swing-bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    width: 100%;
    height: 100%;
    position: relative;
}

.swing-all {
    top: 2rem;
    left: calc(50% - 2.5rem);
    position: absolute;
    width: 5rem;
    height: 5rem;
    transform-origin: center -12rem;
    animation: swing-main 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.swing-all:before {
    content: "";
    display: block;
    height: 12rem;
    width: 2px;
    background-color: #DB242A;
    left: calc(50% - 1px);
    bottom: 12rem;
    position: relative;
}

/* Yarn Ball */
.swing-yarn {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: radial-gradient(circle at top left, #e97c7f, #DB242A 50%, #af1d22);
    z-index: 10;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
}

.swing-yarn:before, .swing-yarn:after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: -1px;
}

.swing-yarn:before {
    left: calc(50% + 7px);
    background-color: #b1bce6;
}

.swing-yarn:after {
    right: calc(50% + 7px);
    background-color: #D5E8F8;
}

.swing-yarn:hover {
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(219,36,42,0.6));
    transform: scale(1.08);
}

.swing-yarn:active {
    transform: scale(0.92);
}

.swing-yarn.clicked {
    animation: yarn-pop 0.3s ease-out;
}

@keyframes yarn-pop {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); filter: brightness(1.8); }
    100% { transform: scale(1); }
}

/* Cat Wrap */
.swing-cat-wrap {
    position: absolute;
    top: 0;
    left: calc(50% - 45px);
    width: 90px;
    height: 130px;
    animation: swing-reverse 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    transform-origin: top center;
}

.swing-cat {
    position: absolute;
    inset: 0;
    animation: swing-main 7s 0.2s infinite both;
    transform-origin: top center;
}

.swing-cat-upper {
    position: absolute;
    inset: 0;
    transform-origin: top center;
    z-index: 1;
}

.swing-cat-upper .swing-cat-arm {
    position: absolute;
    width: 20px;
    height: 100%;
    background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9);
    z-index: -1;
}

.swing-cat-upper .swing-cat-arm:nth-child(1) {
    border-top-left-radius: 100px;
    left: 10px;
}

.swing-cat-upper .swing-cat-arm:nth-child(2) {
    border-top-right-radius: 100px;
    right: 10px;
}

/* Lower body */
.swing-cat-lower-wrap {
    height: 90%;
    width: 75px;
    position: absolute;
    top: 100%;
    left: calc(50% - 37.5px);
    animation: swing-reverse 7s 0.2s infinite both;
    transform-origin: top center;
}

.swing-cat-lower {
    position: absolute;
    inset: 0;
    animation: swing-main 7s 0.5s infinite both;
    transform-origin: top center;
}

.swing-cat-lower:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background-image: radial-gradient(circle at 10px 50px, white, white 40%, #D5E8F8 65%, #8B9BD9);
    z-index: 1;
}

.swing-cat-leg, .swing-cat-paw {
    z-index: 1;
    position: relative;
    height: 20px;
    width: 20px;
    animation: swing-leg-anim 7s 0.3s infinite both;
    transform-origin: top center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
}

.swing-cat-lower > .swing-cat-leg { position: absolute; bottom: 20px; }
.swing-cat-lower > .swing-cat-leg .swing-cat-leg { top: 25%; }
.swing-cat-lower > .swing-cat-leg + .swing-cat-leg { right: 0; }

.swing-cat-paw {
    top: 50%;
    border-radius: 50%;
    background-color: #fff;
}

/* Tail */
.swing-cat-tail {
    position: relative;
    height: 15px;
    width: 10px;
    animation: swing-tail-anim 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    transform-origin: top center;
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.swing-cat-tail > .swing-cat-tail { top: 50%; }
.swing-cat-lower > .swing-cat-tail { position: absolute; left: calc(50% - 5px); top: 95%; }

/* Head */
.swing-cat-head {
    width: 90px;
    height: 90px;
    background-image: radial-gradient(circle at 10px 10px, white, white 40%, #D5E8F8 65%, #8B9BD9);
    border-radius: 50%;
    top: calc(100% - 45px);
    position: relative;
}

.swing-cat-face {
    position: absolute;
    inset: 0;
    animation: swing-face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    transform-style: preserve-3d;
    perspective: 100px;
}

.swing-cat-ears {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    z-index: -1;
}

.swing-cat-ear {
    width: 20px;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    top: -10px;
}

.swing-cat-ear:first-child {
    left: 0;
    transform-origin: top left;
    transform: skewY(40deg);
    background-color: white;
}

.swing-cat-ear:first-child:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: #D7EBFB;
    width: 60%;
    height: 100%;
    top: 10px;
}

.swing-cat-ear:last-child {
    right: 0;
    transform-origin: top right;
    transform: skewY(-40deg);
    background-color: #d1e6f7;
}

.swing-cat-ear:last-child:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #e0f0fc;
    width: 60%;
    height: 100%;
    top: 10px;
}

.swing-cat-eyes {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 6px;
    animation: swing-blink 7s step-end infinite both;
}

.swing-cat-eyes:before, .swing-cat-eyes:after {
    content: "";
    display: block;
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #4B4D75;
}

.swing-cat-eyes:before { left: 20px; }
.swing-cat-eyes:after { right: 20px; }

.swing-cat-mouth {
    position: absolute;
    width: 12px;
    height: 8px;
    background-color: #4B4D75;
    top: 60%;
    left: calc(50% - 6px);
    border-top-left-radius: 50% 30%;
    border-top-right-radius: 50% 30%;
    border-bottom-left-radius: 50% 70%;
    border-bottom-right-radius: 50% 70%;
    transform: translateZ(10px);
}

.swing-cat-mouth:before, .swing-cat-mouth:after {
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    height: 100%;
    border: 2px solid #9FA2CB;
    top: 80%;
    border-radius: 100px;
    border-top-color: transparent;
    z-index: -1;
}

.swing-cat-mouth:before {
    border-left-color: transparent;
    right: calc(50% - 1px);
    transform-origin: top right;
    transform: rotate(10deg);
}

.swing-cat-mouth:after {
    border-right-color: transparent;
    left: calc(50% - 1px);
    transform-origin: top left;
    transform: rotate(-10deg);
}

.swing-cat-whiskers {
    width: 50%;
    height: 8px;
    position: absolute;
    bottom: 25%;
    left: 25%;
    transform-style: preserve-3d;
    perspective: 60px;
}

.swing-cat-whiskers:before, .swing-cat-whiskers:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 30%;
    border: 2px solid #9FA2CB;
    border-left: none;
    border-right: none;
}

.swing-cat-whiskers:before {
    right: 100%;
    transform-origin: right center;
    transform: rotateY(70deg) rotateZ(-10deg);
}

.swing-cat-whiskers:after {
    left: 100%;
    transform-origin: left center;
    transform: rotateY(-70deg) rotateZ(10deg);
}

/* ─── Swing Keyframes ─── */

@keyframes swing-bob {
    0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: translateY(0.4rem); }
    6.25%, 18.75%, 31.25%, 43.75%, 56.25%, 68.75%, 81.25%, 93.75% { transform: translateY(-0.4rem); }
}

@keyframes swing-main {
    0% { transform: rotate(5deg); }
    12.5% { transform: rotate(-10deg); }
    25% { transform: rotate(10deg); }
    37.5% { transform: rotate(-15deg); }
    50% { transform: rotate(23deg); }
    62.5% { transform: rotate(-23deg); }
    75% { transform: rotate(15deg); }
    87.5% { transform: rotate(-10deg); }
    100% { transform: rotate(5deg); }
}

@keyframes swing-reverse {
    0% { transform: rotate(-5deg); }
    12.5% { transform: rotate(10deg); }
    25% { transform: rotate(-10deg); }
    37.5% { transform: rotate(15deg); }
    50% { transform: rotate(-23deg); }
    62.5% { transform: rotate(23deg); }
    75% { transform: rotate(-15deg); }
    87.5% { transform: rotate(10deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes swing-leg-anim {
    0% { transform: rotate(0.5deg); }
    12.5% { transform: rotate(-1deg); }
    25% { transform: rotate(1deg); }
    37.5% { transform: rotate(-1.5deg); }
    50% { transform: rotate(2.3deg); }
    62.5% { transform: rotate(-2.3deg); }
    75% { transform: rotate(1.5deg); }
    87.5% { transform: rotate(-1deg); }
    100% { transform: rotate(0.5deg); }
}

@keyframes swing-tail-anim {
    0% { transform: rotate(-2deg); }
    12.5% { transform: rotate(4deg); }
    25% { transform: rotate(-4deg); }
    37.5% { transform: rotate(6deg); }
    50% { transform: rotate(-9.2deg); }
    62.5% { transform: rotate(9.2deg); }
    75% { transform: rotate(-6deg); }
    87.5% { transform: rotate(4deg); }
    100% { transform: rotate(-2deg); }
}

@keyframes swing-face {
    0% { transform: translateX(-2.5px); }
    12.5% { transform: translateX(5px); }
    25% { transform: translateX(-5px); }
    37.5% { transform: translateX(7.5px); }
    50% { transform: translateX(-11.5px); }
    62.5% { transform: translateX(11.5px); }
    75% { transform: translateX(-7.5px); }
    87.5% { transform: translateX(5px); }
    100% { transform: translateX(-2.5px); }
}

@keyframes swing-blink {
    from, to, 10%, 25%, 80% { transform: scaleY(1); }
    8%, 23%, 78% { transform: scaleY(0.1); }
}

/* ─── Yarn Game UI ─── */

.yarn-game-ui, .yarn-game-result {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    padding: 20px;
    text-align: center;
    z-index: 20;
}

.yarn-start-btn {
    background: linear-gradient(135deg, #DB242A, #ff6b6b);
    border: none;
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(219, 36, 42, 0.4);
}

.yarn-start-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(219, 36, 42, 0.5);
}

.yarn-start-btn:active { transform: scale(0.95); }

.yarn-info {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.yarn-result-score {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.yarn-result-reward {
    font-size: 0.85rem;
    color: var(--accent-green);
    margin-bottom: 14px;
}

/* Click Feedback floating text */
.yarn-click-feedback {
    position: absolute;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gold);
    z-index: 30;
    pointer-events: none;
    animation: yarn-fb-float 0.8s ease-out forwards;
}

@keyframes yarn-fb-float {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(1.3); }
}


/* ═══════════ TOASTS ═══════════ */

.level-up-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    animation: toast-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-content {
    background: linear-gradient(135deg, #6c5ce7, #a55eea);
    padding: 20px 30px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 10px 40px rgba(108,92,231,0.4);
}

.toast-icon { font-size: 2.5rem; }
.toast-msg { font-size: 1.1rem; font-weight: 800; color: white; }
.toast-detail { font-size: 0.85rem; color: rgba(255,255,255,0.8); }

@keyframes toast-pop {
    0% { transform: translate(-50%, -50%) scale(0); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.error-toast {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 71, 87, 0.9);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 200;
    animation: pop-in 0.3s ease-out;
    white-space: nowrap;
}

/* ═══════════ PARTICLE EFFECTS ═══════════ */

.food-particle {
    position: absolute;
    font-size: 1.5rem;
    z-index: 3;
    pointer-events: none;
    animation: food-fall 1s ease-in forwards;
}

@keyframes food-fall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(60px) rotate(180deg) scale(0.3); }
}

.bath-bubble {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(100,200,255,0.3));
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    animation: bubble-rise 1.5s ease-out forwards;
}

@keyframes bubble-rise {
    0% { opacity: 0.8; transform: translateY(0) scale(0.5); }
    100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
}

/* Brush foam bubbles */
.foam-bubble {
    position: fixed;
    background: radial-gradient(circle at 30% 25%,
        rgba(255,255,255,0.95),
        rgba(200,235,255,0.6) 50%,
        rgba(150,210,255,0.2));
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    pointer-events: none;
    z-index: 200;
    animation: foam-pop 2s ease-out forwards;
}
@keyframes foam-pop {
    0%   { opacity: 0; transform: scale(0); }
    20%  { opacity: 1; transform: scale(1.1); }
    60%  { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

.sparkle {
    position: absolute;
    font-size: 1.2rem;
    z-index: 3;
    pointer-events: none;
    animation: sparkle-out 0.8s ease-out forwards;
}

@keyframes sparkle-out {
    0% { opacity: 1; transform: translate(0,0) scale(0.5); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); }
}

/* Heart particles */
.heart-particle {
    position: fixed;
    font-size: 1.4rem;
    pointer-events: none;
    z-index: 150;
    animation: heart-float 1.2s ease-out forwards;
}

@keyframes heart-float {
    0% { opacity: 1; transform: translateY(0) translateX(0) scale(0.5); }
    50% { opacity: 1; transform: translateY(-40px) translateX(var(--dx)) scale(1.2); }
    100% { opacity: 0; transform: translateY(-80px) translateX(var(--dx)) scale(0.8); }
}

/* Zzz particles */
.zzz-particle {
    position: fixed;
    font-size: 1.2rem;
    color: #4a90e2;
    font-weight: 800;
    pointer-events: none;
    z-index: 150;
    text-shadow: 1px 1px 0px #fff;
    animation: zzz-float 2s ease-out forwards;
}

@keyframes zzz-float {
    0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
    20% { opacity: 1; transform: translateY(-10px) translateX(5px) scale(0.8); }
    50% { opacity: 0.8; transform: translateY(-25px) translateX(-5px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-40px) translateX(10px) scale(1.4); }
}

/* ─── CSS Custom Icon (Brush) ─── */
.css-brush {
    position: relative;
    width: 22px;
    height: 34px;
    background: #e6a45c;
    background-image: 
      radial-gradient(#e67e22 25%, transparent 25%), 
      radial-gradient(#e67e22 25%, transparent 25%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    border: 2px solid #b8a695;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
}
/* Drag-size version of CSS brush — large & visible */
.css-brush--drag {
    width: 44px;
    height: 68px;
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    border-width: 3px;
    border-radius: 14px;
}
.css-brush--drag::after {
    width: 16px;
    height: 18px;
    bottom: -14px;
    border-width: 3px;
    border-radius: 0 0 10px 10px;
}

.css-brush::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    border: 2px solid #b8a695;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
}

/* ─── Brush Animation ─── */
.water-drop {
    position: absolute;
    width: 6px;
    height: 14px;
    background: #50c8ff;
    border-radius: 5px 5px 10px 10px;
    pointer-events: none;
    z-index: 45;
    animation: drop-fall 1s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes drop-fall {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    80% { transform: translateY(80px) scale(0.8); opacity: 0.8; }
    100% { transform: translateY(100px) scale(0); opacity: 0; }
}

.brush-anim-icon {
    position: absolute;
    font-size: 4rem;
    pointer-events: none;
    z-index: 50;
    animation: brush-scrub 2.5s ease-in-out;
}
@keyframes brush-scrub {
    0% { transform: translate(-30px, -20px) rotate(-15deg); opacity: 0; }
    20% { transform: translate(10px, 10px) rotate(10deg); opacity: 1; }
    40% { transform: translate(-20px, 20px) rotate(-20deg); }
    60% { transform: translate(15px, 0px) rotate(15deg); }
    80% { transform: translate(-10px, -10px) rotate(-10deg); opacity: 1; }
    100% { transform: translate(30px, -20px) rotate(20deg); opacity: 0; }
}

/* ═══════════ CYLINDER CAT GAME ═══════════ */
.cylinder-game-area {
  position: relative;
  overflow: hidden;
  background-color: #1bd2b6;
  border-radius: 20px;
}
.cylinder-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --cat-color: #9febf8;
}
.cylinder-cat {
  position: absolute;
  --h: 60px;
  height: var(--h);
  width: 50px;
  background-color: var(--cat-color);
  transition: transform 0.9s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  animation: cylinder-squidge infinite 3s;
  --offset: 10px;
}
.cylinder-cat.walk {
  animation: cylinder-squidge infinite 1s;
  --offset: 20px;
}
@keyframes cylinder-squidge {
  0%, 100% { height: calc(var(--h) - var(--offset)); }
  50% { height: var(--h); }
}
.cylinder-panel {
  position: absolute;
  width: 50px;
  height: 50px;
  transition: transform 0.9s;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.cylinder-panel.front { bottom: -25px; cursor: pointer; z-index: 3; }
.cylinder-panel.back { top: -25px; border-radius: 50%; background-color: var(--cat-color); cursor: pointer; z-index: 1; }
.cylinder-panel.ears-wrapper { bottom: -15px; z-index: 2; }
.cylinder-img.face {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAKlJREFUSEvFltENwCAIRMsIXaWbdZJu1lU6Ak1NMIqKEoX6K8fLoSiwDSxExFYYAEAvhRggJeeJJVgVokk+AisgMwACclcZZAWgBoqQlQAO8oNYuEjdBCfmEEtAdMMh57GHvet+eo1c7Le0kEIoiNQakKT1h3wOzMulPoRBQVYuScNrrrkcPn3i0oxUIoumpCff74G0cJN+XP4/4wpHtYHiv2mFN+Xs3PUCiD9+/hPRnGEAAAAASUVORK5CYII=);
  --w: 25px; --h: 25px;
}
.cylinder-img.ears {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAYAAACJISRoAAAAAXNSR0IArs4c6QAAAHVJREFUSEvtk0sKwDAIROP9D23IwmJNEF5b6Gayykfn4WhspOXuvo5mZvme7E8al1g8ZkEC6/JbSAA72Em85v1XCbGp9itXFjpbJW8AAazNv0G+AGTQVgkZUxr7+D8QkCDErSG7ZBdyAAVrumQXcgAFa7qQXRMPMDgcoxhOHAAAAABJRU5ErkJggg==);
  --w: 25px; --h: 27px;
}
.cylinder-img.pix {
  width: calc(var(--w) * 2); height: calc(var(--h) * 2);
  background-size: calc(var(--w) * 2) calc(var(--h) * 2);
  transition: transform 0.9s; image-rendering: pixelated;
}
.cylinder-panel.back .tail { display: none; --w: 25px; --h: 25px; }
.cylinder-cat.flip .face { display: none; }
.cylinder-cat.flip .front { border-radius: 50%; background-color: var(--cat-color); z-index: 1; }
.cylinder-cat.flip .ears {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAYAAACJISRoAAAAAXNSR0IArs4c6QAAAHxJREFUSEtjZEAC81//+A/iJopyMCKLk8LGZgbcMJgksoGkWIZPP15LYBbiswyb4ej6Bs4npAQTenwh+wxmDoZPKLEAZiF65KNYQg0LkC3C8AkpyZRUtWTnB1IsGrWElNBiGA2u0eAiKQRIUjyaukaDi6QQIEnxaOoiKbgArwk4HK85LucAAAAASUVORK5CYII=);
}
.cylinder-cat.flip .back { z-index: 3; }
.cylinder-cat.flip .back .tail {
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAMJJREFUSEvN1tENgCAMBFA7gqu4mZO4mas4AqYmEKy05QSM/Kp9XCItNFWsEELQXiMi8kqYL1jFZWELKyJI8RrsgbQAEZSpbkgPoAQlpCcgoe+QESnyNFeS4chIIKX5DbIu87Tth9c91OfkJWkFWDaRHsBrBMXhJChwJbHOSakginCzhBHeFAIlBE1TC8UQboO0du0leiC90+SDq3oy8q555SdfS2JOxtgXrC4QMQlqozf9wlrT8VpO/h18W5Fo673rBGwgn/7FATxCAAAAAElFTkSuQmCC);
}

/* ═══════════ RESPONSIVE ═══════════ */

.laser-game-wrapper {
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 247, 204, 0.2), transparent 18%),
        radial-gradient(circle at 20% 0%, rgba(69, 110, 191, 0.4), transparent 35%),
        linear-gradient(180deg, #08111f 0%, #10223c 48%, #1c3251 100%);
}

.laser-scoreboard {
    gap: 14px;
    flex-wrap: wrap;
}

.laser-combo {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffe082;
    font-size: 0.9rem;
}

.laser-game-area {
    position: relative;
    overflow: hidden;
    cursor: none;
    touch-action: none;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 45%),
        linear-gradient(180deg, rgba(9,17,31,0.25) 0%, rgba(8,17,31,0) 25%),
        linear-gradient(180deg, rgba(3,10,20,0) 0%, rgba(3,10,20,0.45) 100%);
}

.laser-moon {
    position: absolute;
    top: 28px;
    right: 34px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fffdf1 0%, #fff2b0 48%, #f3cd67 70%, rgba(243, 205, 103, 0.2) 100%);
    box-shadow:
        0 0 0 18px rgba(255, 231, 150, 0.06),
        0 0 40px rgba(255, 225, 120, 0.22);
    opacity: 0.92;
}

.laser-starfield,
.laser-floor-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.laser-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 10px rgba(255,255,255,0.45);
    animation: laser-star-twinkle var(--twinkle, 2.8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.laser-floor-glow {
    inset: auto 0 0;
    height: 34%;
    background:
        radial-gradient(circle at 50% 100%, rgba(82, 220, 255, 0.18), transparent 58%),
        linear-gradient(180deg, transparent, rgba(0,0,0,0.15));
}

.laser-target {
    position: absolute;
    border: none;
    border-radius: 50%;
    pointer-events: auto;
    cursor: none;
    background:
        radial-gradient(circle at 35% 35%, #fff6c4 0%, #ff7f7f 22%, #ff3347 54%, rgba(255, 36, 72, 0.08) 76%, transparent 78%);
    box-shadow:
        0 0 0 10px rgba(255, 70, 100, 0.08),
        0 0 28px rgba(255, 54, 91, 0.6);
    animation: laser-target-float 1.2s ease-in-out infinite alternate;
    transform: translate3d(0, 0, 0);
}

.laser-target::before,
.laser-target::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.laser-target::after {
    inset: -18px;
    border-color: rgba(255, 75, 113, 0.14);
}

.laser-target.bonus {
    background:
        radial-gradient(circle at 35% 35%, #fff9d6 0%, #ffe58a 20%, #ffb300 48%, rgba(255, 179, 0, 0.08) 72%, transparent 76%);
    box-shadow:
        0 0 0 12px rgba(255, 196, 0, 0.08),
        0 0 30px rgba(255, 196, 0, 0.65);
}

.laser-target.caught {
    animation: laser-target-caught 0.22s ease-out forwards;
}

.laser-target.missed {
    animation: laser-target-missed 0.22s ease-out forwards;
}

.laser-paw {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50% 50% 46% 46%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.14s ease, transform 0.14s ease;
    background:
        radial-gradient(circle at 50% 58%, rgba(255,255,255,0.92) 0%, rgba(229,239,255,0.9) 26%, rgba(151,179,219,0.92) 65%, rgba(151,179,219,0) 67%);
    box-shadow: 0 0 24px rgba(180, 214, 255, 0.28);
}

.laser-paw::before {
    content: "";
    position: absolute;
    top: 3px;
    width: 10px;
    height: 14px;
    border-radius: 50%;
    background: rgba(232, 241, 255, 0.9);
}

.laser-paw::before {
    left: 8px;
    box-shadow: 11px 0 0 rgba(232, 241, 255, 0.9), 22px 0 0 rgba(232, 241, 255, 0.9);
}

.laser-paw.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.laser-paw.tap {
    transform: translate(-50%, -50%) scale(0.82);
}

.laser-click-feedback {
    position: absolute;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff3b0;
    text-shadow: 0 0 18px rgba(255, 224, 119, 0.45);
    pointer-events: none;
    z-index: 30;
    animation: laser-hit-float 0.7s ease-out forwards;
}

@keyframes laser-star-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes laser-target-float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(var(--drift-x, 10px), var(--drift-y, -8px)) scale(1.06); }
}

@keyframes laser-target-caught {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

@keyframes laser-target-missed {
    0% { opacity: 1; filter: grayscale(0); }
    100% { opacity: 0; transform: scale(0.2); filter: grayscale(1); }
}

@keyframes laser-hit-float {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 36px)) scale(1.18); }
}

.galaxy-game-wrapper {
    background:
        radial-gradient(circle at 50% 20%, rgba(123, 88, 255, 0.18), transparent 22%),
        radial-gradient(circle at 80% 12%, rgba(63, 208, 255, 0.14), transparent 20%),
        linear-gradient(180deg, #04060f 0%, #0c1530 45%, #160f2b 100%);
}

.galaxy-scoreboard {
    gap: 14px;
    flex-wrap: wrap;
}

.galaxy-shields {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #9de7ff;
    font-size: 0.9rem;
}

.galaxy-game-area {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,0.06), transparent 24%),
        linear-gradient(180deg, rgba(9, 18, 34, 0.15) 0%, rgba(4, 7, 18, 0.2) 100%);
}

#galaxy-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.galaxy-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.22), rgba(255,72,102,0.08) 45%, transparent 70%);
    transition: opacity 0.18s ease;
}

.galaxy-flash.active {
    opacity: 1;
}

@media (max-width: 560px) {
    .glass-container {
        max-width: 100%;
    }

    .stats-bar {
        padding: calc(10px + var(--safe-top)) 10px 8px;
        gap: 6px;
        border-radius: 0 0 18px 18px;
    }

    .stat-item {
        min-width: 0;
        gap: 2px;
    }

    .stat-item i {
        font-size: 0.8rem;
    }

    .stat-label {
        font-size: 0.68rem;
        line-height: 1;
    }

    .game-area {
        padding: 8px 12px 0;
    }

    .miav-cat {
        width: 168px;
        height: 150px;
    }

    .cat-body {
        width: 168px;
        height: 150px;
    }

    .ear {
        width: 38px;
        height: 38px;
    }

    .ear::after {
        width: 22px;
        height: 22px;
    }

    .user-profile-widget {
        top: 12px;
        left: 12px;
        padding: 4px 8px;
        gap: 6px;
        max-width: calc(100% - 24px);
    }

    .profile-avatar {
        font-size: 1.2rem;
    }

    .profile-username {
        max-width: 120px;
        font-size: 0.82rem;
    }

    .user-info {
        margin: 6px 10px;
        padding: 10px 12px;
        gap: 10px;
    }

    .currency span {
        margin-right: 10px;
        font-size: 0.84rem;
    }

    .gold-paw-coin.coin-img-lg {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .user-info-actions {
        gap: 8px;
    }

    .level-info {
        gap: 8px;
    }

    .xp-bar-bg {
        width: 70px;
    }

    .bottom-menu {
        padding: 8px 4px calc(16px + var(--safe-bottom)) 4px;
        gap: 2px;
    }

    .menu-btn {
        padding: 8px 4px;
    }

    .menu-btn i {
        font-size: 1.28rem;
    }

    .menu-btn span {
        font-size: 0.64rem;
    }

    .item-tray {
        padding: 8px 10px calc(8px + var(--safe-bottom));
    }

    .laser-scoreboard {
        gap: 10px;
        font-size: 0.92rem;
    }

    .laser-moon {
        width: 74px;
        height: 74px;
        top: 22px;
        right: 20px;
    }

    .laser-combo {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .galaxy-scoreboard {
        gap: 10px;
        font-size: 0.92rem;
    }

    .galaxy-shields {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}

@media (max-width: 420px) {
    .stats-bar {
        padding: calc(8px + var(--safe-top)) 8px 6px;
        gap: 4px;
    }

    .progress-bg {
        height: 5px;
    }

    .miav-cat {
        width: 156px;
        height: 138px;
    }

    .cat-body {
        width: 156px;
        height: 138px;
    }

    .ear {
        width: 34px;
        height: 34px;
    }

    .ear::after {
        width: 20px;
        height: 20px;
    }

    .profile-username {
        max-width: 96px;
    }

    .user-info {
        margin: 6px 8px;
        padding: 9px 10px;
    }

    .currency span {
        margin-right: 8px;
        font-size: 0.8rem;
    }

    .xp-bar-bg {
        width: 58px;
    }

    .leaderboard-trigger {
        padding: 7px 9px;
    }

    .menu-btn i {
        font-size: 1.18rem;
    }

    .menu-btn span {
        font-size: 0.6rem;
    }
}

@media (max-height: 650px) {
    .stats-bar { padding: 8px 10px 5px; }
    .miav-cat { width: 140px; height: 125px; }
    .cat-body { width: 140px; height: 125px; }
    .ear { width: 32px; height: 32px; }
    .ear::after { width: 18px; height: 18px; }
    .user-info { margin: 5px 10px; padding: 8px 12px; }
    .item-tray { padding: 6px 10px; }
    .tray-item { padding: 8px 10px; min-width: 70px; }
    .tray-item .item-icon { font-size: 1.3rem; }
}

/* ═══════════ CHARACTER SELECTION OVERLAY ═══════════ */

.skins-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0e0e1a 0%, #16213e 50%, #1a1a2e 100%);
    overflow-y: auto;
}

.skins-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 12px;
    background: rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.skins-header h2 {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ff9100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.skins-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 14px 30px;
}

.leaderboard-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.15), transparent 30%),
        linear-gradient(180deg, #0d1320 0%, #132238 45%, #101828 100%);
    overflow: hidden;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 14px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.leaderboard-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.leaderboard-header h2 i {
    color: #ffd54f;
}

.leaderboard-subtitle {
    margin-top: 6px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.68);
}

.leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 14px 14px 10px;
}

.leaderboard-tab {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    border-radius: 14px;
    padding: 10px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.leaderboard-tab.active {
    background: linear-gradient(135deg, rgba(0,210,255,0.24), rgba(255,215,0,0.18));
    color: #ffffff;
    border-color: rgba(255,215,0,0.22);
    transform: translateY(-1px);
}

.leaderboard-current {
    margin: 0 14px 12px;
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}

.leaderboard-current-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
}

.leaderboard-current-row,
.leaderboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.leaderboard-current-stats {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.leaderboard-current-stats strong {
    font-size: 1.15rem;
    color: #ffd54f;
}

.leaderboard-current-stats span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.72);
}

.leaderboard-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-row {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.leaderboard-row.current-user {
    background: linear-gradient(135deg, rgba(0,210,255,0.14), rgba(255,215,0,0.12));
    border-color: rgba(255,215,0,0.22);
}

.leaderboard-rank {
    min-width: 46px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffd54f;
}

.leaderboard-player-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.leaderboard-skin {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    font-size: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.leaderboard-player-name {
    font-size: 0.94rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-player-meta {
    margin-top: 4px;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.58);
}

.leaderboard-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #ffd54f;
    white-space: nowrap;
}

.leaderboard-score i {
    font-size: 0.86rem;
}

.leaderboard-empty,
.leaderboard-loading {
    margin: 24px 14px 0;
    padding: 18px 16px;
    border-radius: 18px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.62);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ─── Skin Card ─── */
.skin-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 10px 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.skin-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s;
}

.skin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

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

.skin-card .skin-icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    transition: transform 0.25s;
    z-index: 1;
}

.skin-card:hover .skin-icon {
    transform: scale(1.15);
}

.skin-card .skin-preview {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    transition: transform 0.25s;
    z-index: 1;
}

.skin-card:hover .skin-preview {
    transform: scale(1.1);
}

.skin-card .skin-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    z-index: 1;
}

.skin-card .skin-level {
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    z-index: 1;
}

/* Active skin card */
.skin-card.active {
    border-color: var(--accent-blue);
    background: rgba(0, 210, 255, 0.1);
    box-shadow:
        0 0 15px rgba(0, 210, 255, 0.2),
        inset 0 0 15px rgba(0, 210, 255, 0.05);
}

.skin-card.active::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--accent-blue);
    color: #000;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Locked skin card */
.skin-card.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.skin-card.locked .skin-icon,
.skin-card.locked .skin-preview {
    filter: grayscale(1) brightness(0.5);
}

.skin-card.locked .skin-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    z-index: 3;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.skin-card.locked .skin-level {
    color: var(--accent-orange);
}

/* Skin card theme backgrounds */
.skin-card[data-skin="neon"]::before      { background: radial-gradient(ellipse at center, rgba(0,210,255,0.15), transparent 70%); }
.skin-card[data-skin="ocean"]::before     { background: radial-gradient(ellipse at center, rgba(72,219,251,0.15), transparent 70%); }
.skin-card[data-skin="cloud"]::before     { background: radial-gradient(ellipse at center, rgba(255,255,255,0.1), transparent 70%); }
.skin-card[data-skin="plant"]::before     { background: radial-gradient(ellipse at center, rgba(0,230,118,0.15), transparent 70%); }
.skin-card[data-skin="egypt"]::before     { background: radial-gradient(ellipse at center, rgba(255,215,0,0.15), transparent 70%); }
.skin-card[data-skin="chocolate"]::before { background: radial-gradient(ellipse at center, rgba(160,82,45,0.2), transparent 70%); }
.skin-card[data-skin="wizard"]::before    { background: radial-gradient(ellipse at center, rgba(100,100,230,0.15), transparent 70%); }
.skin-card[data-skin="crystal"]::before   { background: radial-gradient(ellipse at center, rgba(200,120,255,0.15), transparent 70%); }
.skin-card[data-skin="shadow"]::before    { background: radial-gradient(ellipse at center, rgba(50,50,80,0.2), transparent 70%); }
.skin-card[data-skin="storm"]::before     { background: radial-gradient(ellipse at center, rgba(150,150,200,0.15), transparent 70%); }
.skin-card[data-skin="galaxy"]::before    { background: radial-gradient(ellipse at center, rgba(120,80,200,0.15), transparent 70%); }
.skin-card[data-skin="slime"]::before     { background: radial-gradient(ellipse at center, rgba(100,255,100,0.15), transparent 70%); }
.skin-card[data-skin="lava"]::before      { background: radial-gradient(ellipse at center, rgba(255,80,20,0.15), transparent 70%); }
.skin-card[data-skin="tree"]::before      { background: radial-gradient(ellipse at center, rgba(139,90,43,0.15), transparent 70%); }
.skin-card[data-skin="ice"]::before       { background: radial-gradient(ellipse at center, rgba(180,230,255,0.15), transparent 70%); }
.skin-card[data-skin="robot"]::before     { background: radial-gradient(ellipse at center, rgba(255,180,50,0.15), transparent 70%); }

/* ═══════════ SKIN IMAGE IN GAME AREA ═══════════ */

.skin-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

/* When a non-default skin has an image */
.miav-cat.has-skin .cat-body,
.miav-cat.has-skin .cat-tail { display: none; }
.miav-cat .skin-image { display: none; }
.miav-cat.has-skin .skin-image { display: block; }

/* ═══════════ 16 SKIN THEMES (CSS cat color overrides) ═══════════ */

/* 1. Neon / Hologram */
.miav-cat[data-skin="neon"] .cat-body {
    background: linear-gradient(145deg, #0a1628, #0d2137);
    box-shadow:
        inset -8px -8px 20px rgba(0,100,200,0.2),
        inset 8px 8px 20px rgba(0,210,255,0.1),
        0 0 30px rgba(0,210,255,0.3),
        0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="neon"] .ear { background: linear-gradient(145deg, #0a1628, #0d2137); }
.miav-cat[data-skin="neon"] .ear::after { background: linear-gradient(145deg, #00d2ff, #0099cc); }
.miav-cat[data-skin="neon"] .cat-tail { background: linear-gradient(90deg, #0d2137, #00d2ff); box-shadow: 0 0 10px rgba(0,210,255,0.4); }
.miav-cat[data-skin="neon"] .eye { box-shadow: 0 0 8px rgba(0,210,255,0.5); }
.miav-cat[data-skin="neon"] .pupil { background: #00d2ff; }
.miav-cat[data-skin="neon"] .pupil::after { background: #fff; }
.miav-cat[data-skin="neon"] .mouth { border-color: #00d2ff; }
.miav-cat[data-skin="neon"] .blush { background: rgba(0,210,255,0.3); }

/* 2. Okyanus / Su */
.miav-cat[data-skin="ocean"] .cat-body {
    background: linear-gradient(145deg, #00b4d8, #0077b6);
    box-shadow: inset -8px -8px 20px rgba(0,50,100,0.3), inset 8px 8px 20px rgba(100,220,255,0.15), 0 0 25px rgba(0,180,216,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="ocean"] .ear { background: linear-gradient(145deg, #00b4d8, #0077b6); }
.miav-cat[data-skin="ocean"] .ear::after { background: linear-gradient(145deg, #90e0ef, #48cae4); }
.miav-cat[data-skin="ocean"] .cat-tail { background: linear-gradient(90deg, #0077b6, #48cae4); }
.miav-cat[data-skin="ocean"] .blush { background: rgba(144,224,239,0.4); }
.miav-cat[data-skin="ocean"] .mouth { border-color: #023e5c; }

/* 3. Bulut / Hava */
.miav-cat[data-skin="cloud"] .cat-body {
    background: linear-gradient(145deg, #f0f4ff, #dce6f5);
    box-shadow: inset -8px -8px 20px rgba(180,200,230,0.3), inset 8px 8px 20px rgba(255,255,255,0.5), 0 0 25px rgba(220,230,245,0.3), 0 15px 40px rgba(0,0,0,0.15);
}
.miav-cat[data-skin="cloud"] .ear { background: linear-gradient(145deg, #f0f4ff, #dce6f5); }
.miav-cat[data-skin="cloud"] .ear::after { background: linear-gradient(145deg, #c8d6e5, #a5b8cf); }
.miav-cat[data-skin="cloud"] .cat-tail { background: linear-gradient(90deg, #dce6f5, #f0f4ff); }
.miav-cat[data-skin="cloud"] .pupil { background: #5b8db8; }
.miav-cat[data-skin="cloud"] .mouth { border-color: #9cb4cc; }
.miav-cat[data-skin="cloud"] .blush { background: rgba(200,210,240,0.5); }

/* 4. Bitki / Doğa */
.miav-cat[data-skin="plant"] .cat-body {
    background: linear-gradient(145deg, #2d6a4f, #1b4332);
    box-shadow: inset -8px -8px 20px rgba(0,50,20,0.3), inset 8px 8px 20px rgba(100,200,100,0.1), 0 0 20px rgba(0,230,118,0.15), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="plant"] .ear { background: linear-gradient(145deg, #2d6a4f, #1b4332); }
.miav-cat[data-skin="plant"] .ear::after { background: linear-gradient(145deg, #52b788, #40916c); }
.miav-cat[data-skin="plant"] .cat-tail { background: linear-gradient(90deg, #1b4332, #52b788); }
.miav-cat[data-skin="plant"] .pupil { background: #00e676; }
.miav-cat[data-skin="plant"] .mouth { border-color: #0a2f12; }
.miav-cat[data-skin="plant"] .blush { background: rgba(82,183,136,0.4); }

/* 5. Firavun / Mısır */
.miav-cat[data-skin="egypt"] .cat-body {
    background: linear-gradient(145deg, #c9a227, #a07c19);
    box-shadow: inset -8px -8px 20px rgba(100,80,0,0.3), inset 8px 8px 20px rgba(255,230,100,0.15), 0 0 20px rgba(255,215,0,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="egypt"] .ear { background: linear-gradient(145deg, #c9a227, #a07c19); }
.miav-cat[data-skin="egypt"] .ear::after { background: linear-gradient(145deg, #1a237e, #283593); }
.miav-cat[data-skin="egypt"] .cat-tail { background: linear-gradient(90deg, #a07c19, #c9a227); }
.miav-cat[data-skin="egypt"] .mouth { border-color: #5d4037; }
.miav-cat[data-skin="egypt"] .blush { background: rgba(255,215,0,0.3); }

/* 6. Çikolata / Tatlı */
.miav-cat[data-skin="chocolate"] .cat-body {
    background: linear-gradient(145deg, #6d4c2e, #4e342e);
    box-shadow: inset -8px -8px 20px rgba(50,30,15,0.3), inset 8px 8px 20px rgba(140,100,60,0.15), 0 0 18px rgba(109,76,46,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="chocolate"] .ear { background: linear-gradient(145deg, #6d4c2e, #4e342e); }
.miav-cat[data-skin="chocolate"] .ear::after { background: linear-gradient(145deg, #a1887f, #8d6e63); }
.miav-cat[data-skin="chocolate"] .cat-tail { background: linear-gradient(90deg, #4e342e, #8d6e63); }
.miav-cat[data-skin="chocolate"] .pupil { background: #3e2723; }
.miav-cat[data-skin="chocolate"] .mouth { border-color: #3e2723; }
.miav-cat[data-skin="chocolate"] .blush { background: rgba(161,136,127,0.4); }

/* 7. Büyücü / Bilgin */
.miav-cat[data-skin="wizard"] .cat-body {
    background: linear-gradient(145deg, #1a237e, #0d1150);
    box-shadow: inset -8px -8px 20px rgba(20,20,80,0.3), inset 8px 8px 20px rgba(100,100,200,0.15), 0 0 25px rgba(100,100,230,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="wizard"] .ear { background: linear-gradient(145deg, #1a237e, #0d1150); }
.miav-cat[data-skin="wizard"] .ear::after { background: linear-gradient(145deg, #7c4dff, #536dfe); }
.miav-cat[data-skin="wizard"] .cat-tail { background: linear-gradient(90deg, #0d1150, #536dfe); box-shadow: 0 0 8px rgba(83,109,254,0.4); }
.miav-cat[data-skin="wizard"] .pupil { background: #7c4dff; }
.miav-cat[data-skin="wizard"] .mouth { border-color: #311b92; }
.miav-cat[data-skin="wizard"] .blush { background: rgba(124,77,255,0.3); }

/* 8. Kristal / Değerli Taş */
.miav-cat[data-skin="crystal"] .cat-body {
    background: linear-gradient(145deg, #ce93d8, #ab47bc, #8e24aa);
    box-shadow: inset -8px -8px 20px rgba(100,20,100,0.2), inset 8px 8px 20px rgba(255,200,255,0.15), 0 0 30px rgba(200,120,255,0.25), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="crystal"] .ear { background: linear-gradient(145deg, #ce93d8, #ab47bc); }
.miav-cat[data-skin="crystal"] .ear::after { background: linear-gradient(145deg, #f8bbd0, #f48fb1); }
.miav-cat[data-skin="crystal"] .cat-tail { background: linear-gradient(90deg, #ab47bc, #e1bee7); box-shadow: 0 0 10px rgba(200,120,255,0.4); }
.miav-cat[data-skin="crystal"] .pupil { background: #e040fb; }
.miav-cat[data-skin="crystal"] .mouth { border-color: #6a1b9a; }
.miav-cat[data-skin="crystal"] .blush { background: rgba(248,187,208,0.5); }

/* 9. Gölge / Karanlık */
.miav-cat[data-skin="shadow"] .cat-body {
    background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
    box-shadow: inset -8px -8px 20px rgba(0,0,0,0.5), inset 8px 8px 20px rgba(30,30,50,0.3), 0 0 30px rgba(0,0,0,0.5), 0 15px 40px rgba(0,0,0,0.5);
}
.miav-cat[data-skin="shadow"] .ear { background: linear-gradient(145deg, #1a1a2e, #0f0f1a); }
.miav-cat[data-skin="shadow"] .ear::after { background: linear-gradient(145deg, #2a2a3e, #1a1a2e); }
.miav-cat[data-skin="shadow"] .cat-tail { background: linear-gradient(90deg, #0f0f1a, #1a1a2e); }
.miav-cat[data-skin="shadow"] .eye { background: #e0e0e0; box-shadow: 0 0 15px rgba(255,255,255,0.6); }
.miav-cat[data-skin="shadow"] .pupil { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.8); }
.miav-cat[data-skin="shadow"] .mouth { border-color: rgba(255,255,255,0.2); }
.miav-cat[data-skin="shadow"] .blush { background: rgba(100,100,150,0.3); }

/* 10. Fırtına / Yıldırım */
.miav-cat[data-skin="storm"] .cat-body {
    background: linear-gradient(145deg, #546e7a, #37474f);
    box-shadow: inset -8px -8px 20px rgba(30,40,50,0.3), inset 8px 8px 20px rgba(150,160,180,0.1), 0 0 25px rgba(120,144,156,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="storm"] .ear { background: linear-gradient(145deg, #546e7a, #37474f); }
.miav-cat[data-skin="storm"] .ear::after { background: linear-gradient(145deg, #ffd600, #ffab00); }
.miav-cat[data-skin="storm"] .cat-tail { background: linear-gradient(90deg, #37474f, #78909c); }
.miav-cat[data-skin="storm"] .pupil { background: #ffd600; box-shadow: 0 0 6px rgba(255,214,0,0.5); }
.miav-cat[data-skin="storm"] .mouth { border-color: #263238; }
.miav-cat[data-skin="storm"] .blush { background: rgba(255,214,0,0.25); }

/* 11. Galaksi / Uzay */
.miav-cat[data-skin="galaxy"] .cat-body {
    background: linear-gradient(145deg, #1a0533, #2d1054, #0d0221);
    box-shadow: inset -8px -8px 20px rgba(20,0,50,0.4), inset 8px 8px 20px rgba(100,50,200,0.1), 0 0 30px rgba(100,50,200,0.2), 0 15px 40px rgba(0,0,0,0.4);
}
.miav-cat[data-skin="galaxy"] .ear { background: linear-gradient(145deg, #1a0533, #2d1054); }
.miav-cat[data-skin="galaxy"] .ear::after { background: linear-gradient(145deg, #7b1fa2, #4a148c); }
.miav-cat[data-skin="galaxy"] .cat-tail { background: linear-gradient(90deg, #2d1054, #7b1fa2); box-shadow: 0 0 10px rgba(123,31,162,0.4); }
.miav-cat[data-skin="galaxy"] .pupil { background: #e040fb; }
.miav-cat[data-skin="galaxy"] .mouth { border-color: #4a148c; }
.miav-cat[data-skin="galaxy"] .blush { background: rgba(123,31,162,0.3); }

/* 12. Slime / Jel */
.miav-cat[data-skin="slime"] .cat-body {
    background: linear-gradient(145deg, #76ff03, #4caf50, #2e7d32);
    box-shadow: inset -8px -8px 20px rgba(0,80,0,0.2), inset 8px 8px 20px rgba(150,255,100,0.2), 0 0 25px rgba(118,255,3,0.25), 0 15px 40px rgba(0,0,0,0.25);
    border-radius: 50% 50% 48% 48%;
}
.miav-cat[data-skin="slime"] .ear { background: linear-gradient(145deg, #76ff03, #4caf50); border-radius: 12px 40px 0 0; }
.miav-cat[data-skin="slime"] .ear.right { border-radius: 40px 12px 0 0; }
.miav-cat[data-skin="slime"] .ear::after { background: linear-gradient(145deg, #b9f6ca, #69f0ae); }
.miav-cat[data-skin="slime"] .cat-tail { background: linear-gradient(90deg, #4caf50, #76ff03); }
.miav-cat[data-skin="slime"] .pupil { background: #1b5e20; }
.miav-cat[data-skin="slime"] .mouth { border-color: #1b5e20; }
.miav-cat[data-skin="slime"] .blush { background: rgba(185,246,202,0.4); }

/* 13. Lav / Magma */
.miav-cat[data-skin="lava"] .cat-body {
    background: linear-gradient(145deg, #bf360c, #8b0000, #6d0000);
    box-shadow: inset -8px -8px 20px rgba(100,0,0,0.4), inset 8px 8px 20px rgba(255,100,0,0.15), 0 0 30px rgba(255,80,20,0.3), 0 15px 40px rgba(0,0,0,0.4);
}
.miav-cat[data-skin="lava"] .ear { background: linear-gradient(145deg, #bf360c, #8b0000); }
.miav-cat[data-skin="lava"] .ear::after { background: linear-gradient(145deg, #ff6d00, #ff3d00); }
.miav-cat[data-skin="lava"] .cat-tail { background: linear-gradient(90deg, #8b0000, #ff6d00); box-shadow: 0 0 12px rgba(255,109,0,0.5); }
.miav-cat[data-skin="lava"] .pupil { background: #ff3d00; box-shadow: 0 0 6px rgba(255,61,0,0.6); }
.miav-cat[data-skin="lava"] .mouth { border-color: #4a0000; }
.miav-cat[data-skin="lava"] .blush { background: rgba(255,109,0,0.35); }

/* 14. Ağaç / Orman */
.miav-cat[data-skin="tree"] .cat-body {
    background: linear-gradient(145deg, #795548, #5d4037);
    box-shadow: inset -8px -8px 20px rgba(40,25,15,0.3), inset 8px 8px 20px rgba(150,120,80,0.1), 0 0 18px rgba(121,85,72,0.15), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="tree"] .ear { background: linear-gradient(145deg, #795548, #5d4037); }
.miav-cat[data-skin="tree"] .ear::after { background: linear-gradient(145deg, #2e7d32, #388e3c); }
.miav-cat[data-skin="tree"] .cat-tail { background: linear-gradient(90deg, #5d4037, #8d6e63); }
.miav-cat[data-skin="tree"] .pupil { background: #33691e; }
.miav-cat[data-skin="tree"] .mouth { border-color: #3e2723; }
.miav-cat[data-skin="tree"] .blush { background: rgba(76,175,80,0.3); }

/* 15. Buz / Don */
.miav-cat[data-skin="ice"] .cat-body {
    background: linear-gradient(145deg, #e1f5fe, #b3e5fc, #81d4fa);
    box-shadow: inset -8px -8px 20px rgba(100,180,220,0.2), inset 8px 8px 20px rgba(255,255,255,0.4), 0 0 25px rgba(129,212,250,0.3), 0 15px 40px rgba(0,0,0,0.15);
}
.miav-cat[data-skin="ice"] .ear { background: linear-gradient(145deg, #e1f5fe, #b3e5fc); }
.miav-cat[data-skin="ice"] .ear::after { background: linear-gradient(145deg, #4fc3f7, #29b6f6); }
.miav-cat[data-skin="ice"] .cat-tail { background: linear-gradient(90deg, #81d4fa, #e1f5fe); }
.miav-cat[data-skin="ice"] .pupil { background: #0277bd; }
.miav-cat[data-skin="ice"] .mouth { border-color: #01579b; }
.miav-cat[data-skin="ice"] .blush { background: rgba(79,195,247,0.35); }

/* 16. Robot / Mecha */
.miav-cat[data-skin="robot"] .cat-body {
    background: linear-gradient(145deg, #b8860b, #8b6914, #6d5310);
    box-shadow: inset -8px -8px 20px rgba(80,60,10,0.3), inset 8px 8px 20px rgba(200,180,80,0.15), 0 0 25px rgba(184,134,11,0.2), 0 15px 40px rgba(0,0,0,0.3);
}
.miav-cat[data-skin="robot"] .ear { background: linear-gradient(145deg, #b8860b, #8b6914); }
.miav-cat[data-skin="robot"] .ear::after { background: linear-gradient(145deg, #00b0ff, #0091ea); }
.miav-cat[data-skin="robot"] .cat-tail { background: linear-gradient(90deg, #8b6914, #b8860b); }
.miav-cat[data-skin="robot"] .eye { background: #0091ea; box-shadow: 0 0 10px rgba(0,145,234,0.6); }
.miav-cat[data-skin="robot"] .pupil { background: #00e5ff; box-shadow: 0 0 6px rgba(0,229,255,0.6); }
.miav-cat[data-skin="robot"] .mouth { border-color: #6d5310; }
.miav-cat[data-skin="robot"] .blush { background: rgba(0,176,255,0.25); }

/* ─── Skin Glow Effects (subtle aura) ─── */
.miav-cat[data-skin="neon"]::after,
.miav-cat[data-skin="lava"]::after,
.miav-cat[data-skin="crystal"]::after,
.miav-cat[data-skin="galaxy"]::after,
.miav-cat[data-skin="shadow"]::after,
.miav-cat[data-skin="storm"]::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: skin-aura-pulse 3s ease-in-out infinite;
}

.miav-cat[data-skin="neon"]::after    { background: radial-gradient(circle, rgba(0,210,255,0.12), transparent 70%); }
.miav-cat[data-skin="lava"]::after    { background: radial-gradient(circle, rgba(255,80,0,0.12), transparent 70%); }
.miav-cat[data-skin="crystal"]::after { background: radial-gradient(circle, rgba(200,120,255,0.12), transparent 70%); }
.miav-cat[data-skin="galaxy"]::after  { background: radial-gradient(circle, rgba(120,50,200,0.12), transparent 70%); }
.miav-cat[data-skin="shadow"]::after  { background: radial-gradient(circle, rgba(50,50,80,0.2), transparent 70%); }
.miav-cat[data-skin="storm"]::after   { background: radial-gradient(circle, rgba(255,214,0,0.08), transparent 70%); }

@keyframes skin-aura-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.6; }
}

/* ─── New Skin Unlock Toast ─── */
.skin-unlock-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
    animation: toast-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skin-unlock-content {
    background: linear-gradient(135deg, #ffd700, #ff9100);
    padding: 18px 28px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px rgba(255,215,0,0.35);
}

/* ═══════════ GİRİŞ (LOGIN) & YÜKLEME EKRANI ═══════════ */
.loading-screen {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
}
.clouds {
    position: absolute;
    bottom: 0; width: 100%; height: 35%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,224L48,229.3C96,235,192,245,288,218.7C384,192,480,128,576,133.3C672,139,768,213,864,229.3C960,245,1056,203,1152,176C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom/cover no-repeat;
    pointer-events: none;
}
.loading-content {
    text-align: center;
    animation: float-logo 3s ease-in-out infinite;
    z-index: 2;
}
.logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 6rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 12px 25px rgba(0,0,0,0.3), 0 8px 0 #0f3460;
    letter-spacing: 5px;
    margin-bottom: 5px;
    background: -webkit-linear-gradient(#ffffff, #d0e8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cat-tracks-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: rotate(35deg) scale(0.7);
    height: 120px;
    margin-bottom: 25px;
    margin-top: -10px;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.25));
}
.cat-tracks-container .paws {
    margin-bottom: 1.5rem;
    color: #6ed0f2;
}
.paw-tr {
    margin-left: 4.5rem;
    animation: fadeoutPaws 3.2s ease infinite;
    opacity: 0;
    animation-delay: 2.4s;
}
.paw-tl {
    margin-right: 4.5rem;
    animation: fadeoutPaws 3.2s ease infinite;
    opacity: 0;
    animation-delay: 1.6s;
}
.paw-br {
    margin-left: 4.5rem;
    animation: fadeoutPaws 3.2s ease infinite;
    opacity: 0;
    animation-delay: 0.8s;
}
.paw-bl {
    margin-right: 4.5rem;
    animation: fadeoutPaws 3.2s ease infinite;
    opacity: 0;
    animation-delay: 0s;
}

.loading-info {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    letter-spacing: 1px;
}

.login-form {
    margin-top: -10px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
    color: white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    z-index: 2;
    animation: pop-in 0.5s ease-out;
}
.login-form input {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 15px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
    background: rgba(255,255,255,0.95);
    transition: all 0.3s;
    text-align: center;
}
.login-form input:focus {
    border-color: #00d2ff;
    transform: scale(1.02);
}
.login-form button {
    background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0, 114, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
}
.login-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.6);
}
.login-form button:active {
    transform: scale(0.95);
}
.loading-settings-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2rem;
    opacity: 0.8;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s;
}
.loading-settings-btn:hover {
    transform: rotate(90deg);
}

@keyframes float-logo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes fadeoutPaws {
    0% { opacity: 1; transform: scale(1.1); }
    25% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 0.25; }
    75% { opacity: 0.01; }
    100% { opacity: 0; }
}

.skin-unlock-content .toast-icon { font-size: 2rem; }
.skin-unlock-content .toast-msg { font-size: 0.95rem; font-weight: 800; color: #1a1a2e; }
.skin-unlock-content .toast-detail { font-size: 0.8rem; color: rgba(26,26,46,0.7); }

/* ═══════════ USER PROFILE & AVATARS ═══════════ */
.user-profile-widget {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s, background 0.2s;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    max-width: calc(100% - 30px);
}
.user-profile-widget:hover {
    background: rgba(255, 255, 255, 0.25);
}
.user-profile-widget:active {
    transform: scale(0.95);
}
.profile-avatar {
    font-size: 1.4rem;
    line-height: 1;
}
.profile-username {
    font-weight: 700;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    justify-content: center;
}
.avatar-option {
    font-size: 2.2rem;
    width: 65px;
    height: 65px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.avatar-option:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}
.avatar-option.selected {
    border: 3px solid #ffcc00;
    background: rgba(255, 204, 0, 0.25);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

/* ═══════════ CSS ONLY GOLDEN PAW COIN ═══════════ */
.gold-paw-coin {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffde7 0%, #ffd700 25%, #ffb300 60%, #e65100 100%);
    box-shadow: 
        inset -2px -2px 5px rgba(230, 81, 0, 0.8),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        0 4px 6px rgba(0,0,0,0.4);
    border: 2px solid #ffca28;
    color: #5d4037; /* Koyu kahve/altın tırnak izi rengi */
    font-size: 0.8rem;
    position: relative;
    vertical-align: middle;
    margin-right: 2px;
}
.gold-paw-coin i {
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4));
}
.gold-paw-coin::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 10%;
    width: 35%;
    height: 35%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(1.5px);
    transform: rotate(-45deg);
    z-index: 1;
}
.gold-paw-coin.coin-img-lg {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-width: 3px;
    margin-right: 5px;
}

/* ═══════════ PETTING HANDS UI ═══════════ */
.pet-hands {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
.pet-hand {
    position: absolute;
    bottom: -50px;
    font-size: 5.5rem;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
    animation: stroke-up 1s infinite alternate ease-in-out;
}
.pet-hand.hand-left {
    --flip: -1;
    left: -35px;
}
.pet-hand.hand-right {
    --flip: 1;
    right: -35px;
    animation-delay: 0.5s;
}

@keyframes stroke-up {
    0% { transform: translateY(50px) rotate(calc(30deg * var(--flip))) scaleX(var(--flip)); opacity: 0; }
    25% { opacity: 1; }
    90% { transform: translateY(-40px) rotate(calc(-15deg * var(--flip))) scaleX(var(--flip)); opacity: 1; }
    100% { transform: translateY(-60px) rotate(calc(-25deg * var(--flip))) scaleX(var(--flip)); opacity: 0; }
}

/* ═══════════ TUTORIAL OVERLAY ═══════════ */
.tutorial-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
.tutorial-box {
    background: linear-gradient(135deg, #1e3a5f, #15294a);
    border: 2px solid #6ed0f2;
    border-radius: 15px;
    padding: 25px;
    width: 85%;
    max-width: 400px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    animation: pop-in 0.4s ease-out;
}
.tutorial-box h3 { margin-top: 0; color: #ffcc00; font-size: 1.4rem; margin-bottom: 15px; }
.tutorial-box p { font-size: 1rem; line-height: 1.5; margin-bottom: 20px; }
.tut-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.tut-nav button {
    background: #6ed0f2; border: none; padding: 10px 18px; border-radius: 8px;
    color: #0f172a; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.tut-nav button:hover { background: #ffcc00; transform: scale(1.05); }
.tut-dots { display: flex; gap: 6px; }
.tut-dot { width: 10px; height: 10px; background: rgba(255,255,255,0.3); border-radius: 50%; transition: 0.3s; }
.tut-dot.active { background: #ffcc00; transform: scale(1.3); }
.tut-skip { position: absolute; top: -35px; right: 0; background: none; border: none; color: #eee; text-decoration: underline; cursor: pointer; font-size: 0.9rem; }

@media (max-width: 480px) {
    .user-info-actions {
        gap: 8px;
    }

    .leaderboard-trigger {
        padding: 8px 10px;
    }

    .leaderboard-trigger span {
        display: none;
    }

    .leaderboard-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .leaderboard-row,
    .leaderboard-current {
        padding: 12px 14px;
    }

    .leaderboard-rank {
        min-width: 38px;
    }

    .leaderboard-score {
        font-size: 0.84rem;
    }
}

@media (max-width: 560px) {
    .user-profile-widget {
        top: 12px;
        left: 12px;
        padding: 4px 8px;
        gap: 6px;
        max-width: calc(100% - 24px);
    }

    .profile-avatar {
        font-size: 1.2rem;
    }

    .profile-username {
        max-width: 120px;
        font-size: 0.82rem;
    }
}

@media (max-width: 420px) {
    .profile-username {
        max-width: 96px;
    }
}