body, html {
            height: 100%;
            overflow: hidden;
            background-color: #020617;
            color: #e2e8f0;
        }

        .grid-bg {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            transform: perspective(500px) rotateX(60deg);
            animation: grid-move 20s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes grid-move {
            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
            100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
        }

        .glass-panel {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glass-btn {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.1s;
        }

        .glass-btn:active:not(:disabled) {
            transform: scale(0.98);
            background: rgba(30, 41, 59, 0.9);
        }

        .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes shake {
            10%, 90% { transform: translate3d(-2px, 0, 0); }
            20%, 80% { transform: translate3d(4px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
            40%, 60% { transform: translate3d(6px, 0, 0); }
        }

        .damage-text {
            position: absolute;
            animation: floatUp 0.8s ease-out forwards;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 50;
        }

        @keyframes floatUp {
            0% { transform: translateY(0) scale(0.8); opacity: 0; }
            20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
            100% { transform: translateY(-60px) scale(1); opacity: 0; }
        }
        
        .btn-glow-anim {
            animation: pulse-glow 1.5s infinite;
            border-color: #22d3ee;
        }
        
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
        }

        .btn-cooldown {
            opacity: 0.4 !important;
            cursor: not-allowed;
            filter: grayscale(100%);
        }
        
        /* Fullscreen fit mode */
        .fullscreen-fit {
            transform-origin: center center;
            overflow: hidden !important;
        }
        
        #fullscreen-btn {
            display: none;
        }
        
        @media (min-width: 640px) {
            #fullscreen-btn {
                display: flex;
            }
        }

        /* Dark, thin scrollbars to match the theme (Firefox + Chrome/Edge 121+) */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
        }

        /* Older Chrome/Edge and Safari */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 9999px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }
        ::-webkit-scrollbar-button { display: none; }

        /* Short screens (small laptops, 125-150% Windows scaling, browser zoom):
           tighten the arena and log so the whole game fits without an outer scrollbar */
        @media (max-height: 720px) {
            #arena { min-height: 120px; }
            #boss-icon { font-size: 3rem; }
            #log-section { min-height: 100px; }
        }


/* ---------- Onboarding ---------- */
.sss-bar-split { background: linear-gradient(90deg, #10b981 0 45%, transparent 45% 55%, #6366f1 55%); }
.text-balance { text-wrap: balance; }
.sss-step {
    display: inline-grid; place-items: center; flex: none;
    width: 1.15rem; height: 1.15rem; border-radius: 9999px;
    background: rgba(99, 102, 241, .25); color: #c7d2fe;
    font: 700 .65rem/1 'Rajdhani', sans-serif;
}
.sss-bar { display: inline-block; flex: none; width: 1.4rem; height: .35rem; border-radius: 9999px; }
.coach-card {
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .28);
}
#coach.coach-in .coach-card { animation: coachIn .35s ease-out both; }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.coach-target { position: relative; border-color: #fbbf24 !important; box-shadow: 0 0 0 2px rgba(251,191,36,.55); animation: coachPulse 1.4s ease-in-out infinite; }
@keyframes coachPulse { 50% { box-shadow: 0 0 0 5px rgba(251,191,36,.15); } }
.coach-target-soft { box-shadow: 0 0 0 2px rgba(251,191,36,.55); border-radius: .5rem; }
@media (prefers-reduced-motion: reduce) {
    #coach.coach-in .coach-card, .coach-target { animation: none; }
}