* { box-sizing: border-box; font-family: 'Outfit', sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; }
    body { margin: 0; padding: 0; background: #000; color: #fff; height: 100vh; overflow: hidden; display: flex; flex-direction: column; position: relative; }

    /* Cinematic Starfield with Neon Smoke Nebula */
    .bg-layer {
        position: absolute; inset: 0; z-index: -7;
        background: radial-gradient(circle at 50% 50%, #050a15 0%, #000 80%);
        box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
    }
    .nebula-cloud {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        width: 800px; height: 350px; z-index: -6; pointer-events: none;
        background:
            radial-gradient(circle at 35% 50%, rgba(0, 229, 255, 0.4), transparent 60%),
            radial-gradient(circle at 65% 50%, rgba(255, 0, 85, 0.4), transparent 60%),
            radial-gradient(circle at 50% 50%, rgba(148, 0, 211, 0.6), transparent 70%);
        filter: blur(50px);
        opacity: 0.8;
        animation: nebulaPulse 6s infinite alternate ease-in-out;
    }
    @keyframes nebulaPulse {
        0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
        100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    }
    .hyperspace {
        position: absolute; inset: 0; z-index: -5; overflow: hidden; pointer-events: none;
    }
    .star-streak {
        position: absolute; left: 50%; top: 50%; height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
        transform-origin: 0 0;
        animation: starWarp linear infinite;
        opacity: 0;
    }
    @keyframes starWarp {
        0% { transform: rotate(var(--angle)) translateX(100px) scaleX(0); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: rotate(var(--angle)) translateX(1500px) scaleX(1); opacity: 0; }
    }
    .nebula-glow {
        position: absolute; left: 50%; top: 50%; width: 1200px; height: 900px;
        transform: translate(-50%, -50%);
        z-index: -4; overflow: hidden; pointer-events: none;
        background:
            radial-gradient(circle at 20% 40%, rgba(0,229,255,0.12) 0%, transparent 50%),
            radial-gradient(circle at 80% 60%, rgba(148,0,211,0.15) 0%, transparent 50%),
            radial-gradient(circle at 40% 70%, rgba(0,229,255,0.08) 0%, transparent 60%),
            radial-gradient(circle at 60% 30%, rgba(148,0,211,0.1) 0%, transparent 60%);
        filter: blur(100px);
        opacity: 0.7;
        animation: nebulaShimmer 25s infinite alternate ease-in-out;
    }

    .smoke-clouds {
        position: absolute; inset: 0; z-index: -2; pointer-events: none;
        background-image:
            radial-gradient(circle at 25% 25%, rgba(0,229,255,0.05) 0%, transparent 40%),
            radial-gradient(circle at 75% 75%, rgba(148,0,211,0.05) 0%, transparent 40%);
        opacity: 0.6; filter: blur(50px); animation: smokeDrift 40s linear infinite;
    }

    @keyframes smokeDrift { 0% { transform: scale(1.1) translate(0,0); } 50% { transform: scale(1.3) translate(5%, 5%); } 100% { transform: scale(1.1) translate(0,0); } }

    @keyframes nebulaShimmer { 0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 0.9; } }

    .bg-grid {
        position: absolute; inset: 0; z-index: -3; background-size: 60px 60px;
        background-image: linear-gradient(to right, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(0, 229, 255, 0.05) 1px, transparent 1px);
        mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 90%);
        -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 90%);
        opacity: 0.16;
    }
    .void-cells { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .cell {
        position: absolute; left: var(--cell-x, 50%); top: var(--cell-y, 50%);
        width: var(--cell-size, 26px); height: var(--cell-size, 26px); border-radius: 50%;
        opacity: var(--cell-alpha, 0.84); will-change: transform, opacity;
        animation: cellGlow var(--pulse, 9s) ease-in-out infinite var(--delay, 0s);
    }
    .cell::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit;
        background: radial-gradient(circle at 32% 28%, var(--cell-hi, rgba(255, 255, 255, 0.3)), transparent 26%),
                    radial-gradient(circle at 52% 56%, var(--cell-fill, rgba(255, 80, 200, 0.88)) 0 54%, rgba(0, 0, 0, 0.15) 100%);
        border: 3px solid var(--cell-ring, rgba(0, 0, 0, 0.32));
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.26), inset 0 -6px 10px rgba(0, 0, 0, 0.16), 0 0 16px var(--cell-glow, rgba(255, 80, 200, 0.2));
    }
    .cell.ghost::before {
        border: none; background: radial-gradient(circle at 50% 50%, var(--cell-fill, rgba(120, 180, 255, 0.22)) 0 44%, transparent 72%);
        box-shadow: none; filter: blur(var(--cell-blur, 2px));
    }
    .cell.drift-a { animation: cellDriftA var(--duration, 15s) ease-in-out infinite var(--delay, 0s), cellGlow var(--pulse, 6s) ease-in-out infinite var(--delay, 0s); }
    .cell.drift-b { animation: cellDriftB var(--duration, 16s) ease-in-out infinite var(--delay, 0s), cellGlow var(--pulse, 7s) ease-in-out infinite var(--delay, 0s); }
    .cell.drift-c { animation: cellDriftC var(--duration, 18s) ease-in-out infinite var(--delay, 0s), cellGlow var(--pulse, 8s) ease-in-out infinite var(--delay, 0s); }

    @keyframes cellDriftA {
        0%, 100% { transform: translate3d(0, 0, 0); }
        26% { transform: translate3d(18px, -14px, 0); }
        52% { transform: translate3d(34px, 6px, 0); }
        76% { transform: translate3d(-12px, 22px, 0); }
    }
    @keyframes cellDriftB {
        0%, 100% { transform: translate3d(0, 0, 0); }
        22% { transform: translate3d(-20px, 12px, 0); }
        58% { transform: translate3d(12px, 30px, 0); }
        80% { transform: translate3d(24px, -10px, 0); }
    }
    @keyframes cellDriftC {
        0%, 100% { transform: translate3d(0, 0, 0); }
        30% { transform: translate3d(16px, 20px, 0); }
        54% { transform: translate3d(-24px, 8px, 0); }
        78% { transform: translate3d(8px, -18px, 0); }
    }
    @keyframes cellGlow {
        0%, 100% { opacity: var(--cell-alpha, 0.9); }
        50% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
    }
    .brawler-vignette {
        position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,0.82) 100%);
    }

    .lobby { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 2rem; z-index: 1; }

    /* Core Glass Component - True Obsidian */
    .premium-panel {
        background: rgba(5, 5, 10, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 40px rgba(0,0,0,0.9);
        border-radius: 20px;
        color: #fff;
        transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .top-row { display: flex; justify-content: space-between; align-items: flex-start; z-index: 10; }

    .profile-pill {
        display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem; padding-right: 1.2rem;
        cursor: pointer; border-radius: 50px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid rgba(255,255,255,0.1); background: rgba(5,5,10,0.8);
        box-shadow: 0 4px 15px rgba(0,0,0,0.5); backdrop-filter: blur(15px);
    }
    .profile-pill:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(255,255,255,0.1); }
    .profile-pill .avatar { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; flex-shrink: 0;}
    .profile-pill .avatar img { width: 100%; }
    .profile-pill .info { display: flex; flex-direction: column; justify-content: center; min-width: 100px; }
    .profile-pill .name-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
    .profile-pill .name { font-weight: 900; font-size: 0.9rem; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);}
    .profile-pill .level { font-size: 0.65rem; color: #fff; font-weight: 800; letter-spacing: 1px; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 12px;}
    .profile-pill .xp-text { font-size: 0.55rem; color: rgba(255,255,255,0.5); font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; text-align: right;}
    .xp-bar-bg { width: 100%; height: 4px; background: rgba(0,0,0,0.6); border-radius: 4px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.05); }
    .xp-bar-fill { width: 65%; height: 100%; background: #00e5ff; border-radius: 4px; box-shadow: 0 0 5px #00e5ff; }
    @keyframes xpShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

    .logo { position: absolute; left: 50%; transform: translateX(-50%); top: 2rem; font-size: 1.5rem; font-weight: 900; letter-spacing: 12px; color: #fff; text-transform: uppercase; filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); text-indent: 12px; }

    .currency-hub { display: flex; gap: 0.6rem; align-items: center; }
    .gem-pill {
        padding: 0.4rem 0.4rem 0.4rem 1rem; font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 0.6rem;
        border-radius: 40px; cursor: pointer; transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.1); background: rgba(5,5,10,0.8);
        box-shadow: 0 4px 15px rgba(0,0,0,0.5); backdrop-filter: blur(15px);
    }
    .gem-pill:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(255,255,255,0.1); }
    .gem-pill i.gem-icon { color: #00e5ff; filter: drop-shadow(0 0 5px rgba(0,229,255,0.6)); font-size: 1.1rem;}
    .gem-plus { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: 900; }

    .icon-btn {
        width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
        cursor: pointer; color: #fff; font-size: 1.1rem; transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.1); background: rgba(5,5,10,0.8);
        backdrop-filter: blur(15px); box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .icon-btn:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-2px); background: rgba(255,255,255,0.15); }
    .icon-btn:active { transform: scale(0.95); }
    .mobile-menu-btn { display: none; }

    .center-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; }

    .play-btn-wrap { position: relative; width: 140px; height: 140px; display: flex; justify-content: center; align-items: center; animation: playButtonFloat 4.8s infinite ease-in-out; }
    .play-btn-glow {
        position: absolute; inset: -26px;
        background: radial-gradient(circle, rgba(0,229,255,0.38) 0%, rgba(255,0,85,0.22) 44%, rgba(148,0,211,0.28) 58%, transparent 72%);
        border-radius: 50%;
        filter: blur(20px);
        animation: pulseBtn 3.6s infinite alternate ease-in-out;
        z-index: 1;
    }
    @keyframes pulseBtn { 0% { transform: scale(0.84); opacity: 0.48; } 100% { transform: scale(1.1); opacity: 0.92; } }
    @keyframes blobMorph {
        0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
        50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
        100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    }

    .play-btn {
        width: 100%; height: 100%;
        border: 1px solid rgba(255,255,255,0.15);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        color: #fff; font-size: 3rem; cursor: pointer; display: flex; justify-content: center; align-items: center;
        backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.05);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s, border-color 0.3s, background 0.3s; z-index: 2; outline: none;
    }
    @keyframes playButtonFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    .play-btn i { font-size: 3rem; filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); z-index: 5; transition: 0.3s; color: #fff; margin-left: 8px; }
    .play-btn:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(255,255,255,0.1); }
    .play-btn:hover i { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
    .play-btn:active { transform: scale(0.95); }

    .bottom-dock {
        position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
        display: flex; justify-content: center; align-items: center; gap: 0.5rem;
        padding: 0.5rem 1.5rem; z-index: 10;
        background: rgba(5, 5, 10, 0.8);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.1); border-radius: 40px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.9);
    }
    .nav-item {
        padding: 0.8rem 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
        cursor: pointer; border-radius: 30px; min-width: 85px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        color: rgba(255,255,255,0.4);
        background: transparent;
    }
    .nav-item i { font-size: 1.4rem; transition: 0.2s; }
    .nav-item span { font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; transition: 0.2s; }

    .nav-item:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); }

    .nav-item.active {
        background: transparent;
        color: #fff; transform: scale(1.1) translateY(-3px);
        box-shadow: none;
    }
    .nav-item.active i { color: #fff !important; filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
    .nav-item.active .mini-blob-mascot { box-shadow: 0 0 15px #00e5ff; }

    .mini-blob-mascot { width: 32px; height: 32px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; background: linear-gradient(135deg, #00e5ff 0%, #ff007f 100%); box-shadow: inset -3px -3px 10px rgba(0,0,0,0.5), inset 3px 3px 8px rgba(255,255,255,0.8); animation: sentienceMorph 3s infinite alternate ease-in-out; margin-bottom: 2px; border: 1px solid rgba(255,255,255,0.3); }
    .dock-game-icon {
        width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%;
        position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;
        border: 1px solid rgba(255,255,255,0.22);
        background:
            radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 28%),
            linear-gradient(135deg, rgba(0,229,255,0.92), rgba(148,0,211,0.72) 52%, rgba(255,0,127,0.9));
        box-shadow: inset -4px -5px 12px rgba(0,0,0,0.45), inset 3px 3px 10px rgba(255,255,255,0.2), 0 0 16px rgba(0,229,255,0.36);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .dock-game-icon::after {
        content: ""; position: absolute; inset: 5px; border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.32);
        box-shadow: 0 0 12px rgba(255,255,255,0.18);
        animation: iconHalo 2.6s ease-in-out infinite alternate;
    }
    @keyframes iconHalo { 0% { opacity: 0.45; transform: scale(0.92); } 100% { opacity: 0.9; transform: scale(1.08); } }
    .dock-game-icon i {
        position: relative; z-index: 1; color: #fff !important; font-size: 1.05rem;
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.88));
    }
    .nav-item.active .dock-game-icon { transform: translateY(-1px) scale(1.04); box-shadow: inset -4px -5px 12px rgba(0,0,0,0.45), inset 3px 3px 10px rgba(255,255,255,0.24), 0 0 20px rgba(0,229,255,0.56); }
    .nav-item:hover .dock-game-icon { box-shadow: inset -4px -5px 12px rgba(0,0,0,0.45), inset 3px 3px 10px rgba(255,255,255,0.24), 0 0 22px rgba(255,255,255,0.24); }

    .side-rail { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.2rem; z-index: 10; }
    .rail-item {
        width: 55px; height: 55px; border-radius: 30px; display: flex; justify-content: center; align-items: center;
        color: rgba(255,255,255,0.6); font-size: 1.4rem; cursor: pointer; transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.1); background: rgba(5,5,10,0.8);
        backdrop-filter: blur(15px); box-shadow: 0 10px 25px rgba(0,0,0,0.5); position: relative;
    }
    .rail-item:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.1); transform: scale(1.1) translateX(-10px); box-shadow: 0 10px 30px rgba(0,229,255,0.2); }
    .rail-item:active { transform: scale(0.95); }
    .rail-badge { position: absolute; top: -2px; right: -2px; background: #00e5ff; color: #000; font-size: 0.6rem; font-weight: 900; padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

    /* Unified Modals - Deep Void Black */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; display: none; justify-content: center; align-items: center; padding: 2rem; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(15px); }
    .modal-overlay.active { display: flex; opacity: 1; }

    .modal-card { width: 100%; max-width: 900px; max-height: 85vh; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; border-radius: 20px; transform: scale(0.95); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.9); background: rgba(5,5,10,0.95); }
    .modal-overlay.active .modal-card { transform: scale(1); }

    .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem; flex-shrink: 0; }
    .modal-title { font-size: 1.4rem; font-weight: 900; letter-spacing: 4px; margin: 0; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
    .modal-close { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.05); color: white; cursor: pointer; transition: 0.2s; font-size: 1.2rem; border: 1px solid rgba(255,255,255,0.1); }
    .modal-close:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
    .modal-close:active { transform: scale(0.9); }

    /* Elegant Invisible Scrollbar */
    .modal-content { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding-right: 5px; flex: 1; }
    .modal-content::-webkit-scrollbar { display: none; /* Hide standard scrollbar completely */ }
    .modal-content { -ms-overflow-style: none; scrollbar-width: none; }

    .pill-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.8rem 1.5rem; border-radius: 30px; cursor: pointer; transition: 0.3s; font-weight: 800; letter-spacing: 2px; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; text-transform: uppercase; }
    .pill-btn:hover { background: rgba(255,255,255,0.15); border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.2); transform: scale(1.05); }
    .pill-btn:active { transform: scale(0.97); }

    /* Ref-Specific Styles */
    .id-ribbon { position: absolute; top: -1px; right: -1px; background: rgba(5,5,10,0.9); border-bottom-left-radius: 20px; border-top-right-radius: 20px; padding: 4px 12px; font-size: 0.7rem; font-weight: 900; color: rgba(255,255,255,0.6); letter-spacing: 1px; border-left: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); z-index: 5;}
    .rarity-tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 900; padding: 3px 12px; border-radius: 20px; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.8); white-space: nowrap; z-index: 2;}

    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    /* Custom Daily Split Grid */
    .daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 0.5rem; }
    .day-7-card { grid-column: 4; grid-row: 1 / span 2; background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.2); }

    .skill-card { background: rgba(5,5,10,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: 0.2s; cursor: pointer; }
    .skill-card:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
    .skill-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5); }

    .bundle-badge { position: absolute; top: -10px; right: -5px; background: #ffaa00; color: #000; font-weight: 900; padding: 5px 10px; border-radius: 50px; font-size: 0.7rem; transform: rotate(10deg); box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 5; }
    .mobile-action-strip { display: none; }

    /* Media Queries for ALL devices */
    @media (max-width: 1023px) and (orientation: landscape) {
        .lobby { padding: 0.75rem 1rem; }
        .premium-panel,
        .profile-pill,
        .gem-pill,
        .icon-btn,
        .bottom-dock,
        .rail-item,
        .modal-overlay {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .bg-grid { background-size: 50px 50px; }
        .smoke-clouds { display: none; }
        .cell,
        .nebula-cloud,
        .star-streak,
        .play-btn-wrap,
        .play-btn,
        .play-btn-glow,
        .mini-blob-mascot,
        .dock-game-icon::after,
        .xp-bar-fill {
            animation: none !important;
        }
        .profile-pill,
        .gem-pill,
        .icon-btn,
        .nav-item,
        .modal-card {
            transition-duration: 0.08s;
        }
        .logo { font-size: 0.95rem; top: 0.7rem; letter-spacing: 5px; }
        .top-row { align-items: flex-start; }
        .profile-pill { gap: 0.45rem; padding: 0.28rem 0.7rem 0.28rem 0.28rem; max-width: 210px; border-radius: 22px; }
        .profile-pill .avatar { width: 38px; height: 38px; }
        .profile-pill .info { min-width: 0; width: 135px; }
        .profile-pill .name { font-size: 0.72rem; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-pill .level { font-size: 0.55rem; padding: 1px 5px; }
        .profile-pill .xp-text { font-size: 0.48rem; }
        .currency-hub { gap: 0.4rem; }
        .gem-pill { padding: 0.28rem 0.32rem 0.28rem 0.7rem; font-size: 0.82rem; gap: 0.45rem; }
        .gem-plus { width: 22px; height: 22px; }
        .icon-btn { width: 38px; height: 38px; font-size: 1rem; }
        .play-btn-wrap { width: 104px; height: 104px; }
        .play-btn-glow { inset: -18px; filter: blur(12px); }
        .play-btn i { font-size: 1.9rem; margin-left: 5px; }
        .bottom-dock { bottom: 0.5rem; padding: 0.4rem; border-radius: 30px; gap: 0.2rem; width: auto; }
        .nav-item { padding: 0.5rem 0.8rem; min-width: 60px; border-radius: 30px; }
        .nav-item i { font-size: 1.05rem; }
        .nav-item.active { transform: scale(1.08) translateY(-3px); }
        .mini-blob-mascot { width: 28px; height: 28px; }
        .dock-game-icon { width: 28px; height: 28px; }
        .dock-game-icon i { font-size: 0.86rem; }
        .nav-item span { display: none; }
        .side-rail { display: none; }
        .desktop-only-btn { display: none; }
        .mobile-menu-btn { display: flex; }
        .modal-card { padding: 1rem; max-height: 95vh; gap: 0.8rem; width: 95%; max-width: 800px;}
        .modal-header { padding-bottom: 0.5rem; }
        .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 0.5rem;}
        .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 0.5rem;}
        .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem;}
        .skill-card { padding: 0.5rem; }
    }

    @media (max-height: 520px) and (orientation: landscape) {
        .lobby { padding: 0.75rem 1rem; }
        .premium-panel,
        .profile-pill,
        .gem-pill,
        .icon-btn,
        .bottom-dock,
        .rail-item,
        .modal-overlay {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .bg-grid { background-size: 50px 50px; opacity: 0.2; }
        .smoke-clouds { display: none; }
        .cell,
        .nebula-cloud,
        .star-streak,
        .play-btn-wrap,
        .play-btn,
        .play-btn-glow,
        .mini-blob-mascot,
        .dock-game-icon::after,
        .xp-bar-fill {
            animation: none !important;
        }
        .profile-pill,
        .gem-pill,
        .icon-btn,
        .nav-item,
        .modal-card {
            transition-duration: 0.08s;
        }
        .logo { font-size: 0.95rem; top: 0.7rem; letter-spacing: 5px; }
        .top-row { align-items: flex-start; }
        .profile-pill { gap: 0.45rem; padding: 0.28rem 0.7rem 0.28rem 0.28rem; max-width: 310px; border-radius: 24px; }
        .profile-pill .avatar { width: 38px; height: 38px; }
        .profile-pill .info { min-width: 0; width: 190px; }
        .profile-pill .name { font-size: 0.72rem; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-pill .level { font-size: 0.55rem; padding: 1px 5px; }
        .profile-pill .xp-text { font-size: 0.48rem; }
        .currency-hub { gap: 0.4rem; }
        .gem-pill { padding: 0.28rem 0.32rem 0.28rem 0.7rem; font-size: 0.82rem; gap: 0.45rem; }
        .gem-plus { width: 22px; height: 22px; }
        .icon-btn { width: 38px; height: 38px; font-size: 1rem; }
        .play-btn-wrap { width: 104px; height: 104px; }
        .play-btn-glow { inset: -18px; filter: blur(12px); }
        .play-btn i { font-size: 1.9rem; margin-left: 5px; }
        .bottom-dock { bottom: 0.5rem; padding: 0.4rem; border-radius: 30px; gap: 0.2rem; width: auto; }
        .nav-item { padding: 0.5rem 0.8rem; min-width: 60px; border-radius: 30px; }
        .nav-item i { font-size: 1.05rem; }
        .nav-item.active { transform: scale(1.08) translateY(-3px); }
        .mini-blob-mascot { width: 28px; height: 28px; }
        .dock-game-icon { width: 28px; height: 28px; }
        .dock-game-icon i { font-size: 0.86rem; }
        .nav-item span { display: none; }
        .side-rail { display: none; }
        .desktop-only-btn { display: none; }
        .mobile-menu-btn { display: flex; }
        .modal-overlay { padding: 0.45rem 0.75rem; align-items: center; }
        .modal-card { width: min(94vw, 1040px); max-width: 1040px; max-height: calc(100svh - 0.9rem); padding: 0.75rem 1.25rem 0.85rem; gap: 0.45rem; border-radius: 18px; }
        .modal-header { padding-bottom: 0.45rem; }
        .modal-title { font-size: 1.08rem; letter-spacing: 6px; }
        .modal-close { width: 38px; height: 38px; font-size: 1.05rem; }
        .modal-content { gap: 0.35rem; padding-right: 0; }
        .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
        .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
        .skill-card { padding: 0.5rem; }
    }

    @media (max-width: 1200px) and (orientation: portrait), (max-width: 768px) and (orientation: portrait) {
        .lobby { padding: 1rem; }
        .logo { position: static; transform: none; width: 100%; text-align: center; margin-bottom: 1rem; font-size: 1.2rem; letter-spacing: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem; }
        .top-row { flex-direction: column; align-items: stretch; gap: 0.8rem; }
        .profile-pill { width: 100%; border-radius: 40px; }
        .currency-hub { justify-content: space-between; width: 100%; }
        .play-btn-wrap { width: 154px; height: 154px; margin: auto; }
        .play-btn i { font-size: 3.2rem; margin-left: 8px; }
        .bottom-dock { width: calc(100% - 2rem); padding: 0.4rem; border-radius: 40px; bottom: max(1rem, env(safe-area-inset-bottom)); gap: 0; background: rgba(5,5,10,0.85); justify-content: space-between; border-bottom: none; }
        .nav-item { min-width: 0; padding: 0.6rem 0.2rem; width: auto; flex: 1; border-radius: 30px; }
        .nav-item i { font-size: 1.05rem; }
        .mini-blob-mascot { width: 28px; height: 28px; }
        .dock-game-icon { width: 28px; height: 28px; }
        .dock-game-icon i { font-size: 0.86rem; }
        .nav-item span { display: none; }
        .side-rail { display: none; }
        .desktop-only-btn { display: none; }
        .mobile-menu-btn { display: flex; }

        .modal-overlay { padding: 0; align-items: stretch; }
        .modal-card { height: 100%; max-height: 100vh; border-radius: 0; transform: translateY(100%); padding: 1.5rem; gap: 1rem; border: none; width: 100%; }
        .modal-overlay.active .modal-card { transform: translateY(0); }
        .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.8rem;}
        .grid-3 { grid-template-columns: 1fr; gap: 0.8rem;}
        .grid-2 { grid-template-columns: 1fr; gap: 0.8rem;}

        /* Adjust daily split grid on portrait to 3 cols instead of 4 */
        .daily-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; }
        .day-7-card { grid-column: 1 / span 3; grid-row: auto; display: flex; flex-direction: row; gap: 2rem; align-items: center;}

        #mobile-profile-skills { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
        .pill-btn { font-size: 0.7rem; padding: 0.6rem 1rem; }
    }