/* --- GLOBAL VARIABLES --- */
:root {
    /* The LingoBlox Palette */
    --blox-blue: #1e90ff;   /* WHO */
    --blox-red: #ff4757;    /* ACTION */
    --blox-green: #2ed573;  /* WHAT */
    --blox-orange: #ffa502; /* TIME/PLACE */
    --blox-purple: #9b59b6; /* BRIDGE */
    
    /* UI Colors */
    --bg-light: #f4f7f6;
    --text-dark: #2f3542;
    --text-muted: #747d8c;
    --white: #ffffff;

    /* ELITE ANIMATION PHYSICS CURVES */
    --spring-heavy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-light: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth-glide: cubic-bezier(0.16, 1, 0.3, 1);
    --swift-out: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- RESET & APP FEEL --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    user-select: none; /* Prevents text highlighting when tapping */
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Prevents bouncing/scrolling */
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--bg-light); /* Fills the whole browser window */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* Gives depth to screen transitions */
}

/* --- SCREEN MANAGER --- */
.screen {
    display: none;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: auto; /* ENABLES SCROLLING */
    -webkit-overflow-scrolling: touch; /* Smooth buttery iOS scrolling */
    will-change: transform, opacity;
}
.screen.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Prevents top cut-off on small screens */
    align-items: center; 
    /* ELITE ANIMATION: Smooth 3D Slide up on load */
    animation: eliteScreenEntry 0.7s var(--smooth-glide) forwards;
}

/* --- LOGIN UI --- */
.login-box {
    width: 100%;
    max-width: 420px; /* Keeps inputs from stretching on desktop monitors */
    background: var(--white);
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Soft floating shadow */
    text-align: center;
    /* ELITE ANIMATION */
    animation: popInBounce 0.8s var(--spring-heavy) both;
}

.logo {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 5px;
    /* ELITE ANIMATION */
    animation: float 6s ease-in-out infinite;
}
.logo span {
    color: var(--blox-red);
    display: inline-block;
    transition: transform 0.3s var(--spring-heavy);
}
.logo:hover span {
    transform: scale(1.1) rotate(5deg);
}

.subtitle {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 40px;
}

.input-group input {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 15px;
    border: 2px solid #dfe4ea;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    /* ELITE ANIMATION */
    transition: all 0.3s var(--smooth-glide);
}
.input-group input:focus {
    border-color: var(--blox-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 144, 255, 0.12);
}

/* --- BUTTONS --- */
.btn-primary {
    width: 100%;
    background-color: var(--blox-green);
    color: var(--white);
    padding: 18px;
    font-size: 20px;
    font-weight: 900;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 0px #168c48; /* The 3D Game Button Effect */
    /* ELITE ANIMATION */
    transition: transform 0.2s var(--spring-heavy), box-shadow 0.2s var(--spring-heavy), filter 0.2s;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
/* NOTE: the shimmer ::after for .btn-primary lives in the UNIVERSAL GLOBAL
   BUTTON SHINE block at the bottom of this file (shared across all buttons).
   It used to also be declared here with slightly different numbers, which
   just meant this copy was silently thrown away by the cascade — removed
   to stop the two from fighting each other. */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0px #168c48, 0 15px 25px rgba(46, 213, 115, 0.3);
    filter: brightness(1.05);
}

/* --- DASHBOARD UI --- */
.dashboard-container {
    width: 100%;
    max-width: 900px; /* Expands nicely on desktop */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header & HUD */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 15px;
    /* ELITE ANIMATION */
    animation: slideUpFade 0.6s 0.1s both var(--smooth-glide);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.avatar {
    width: 65px;
    height: 65px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px; /* Icon size */
    color: var(--blox-blue); /* Professional accent color */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    flex-shrink: 0; /* Prevents the circle from squishing on small screens */
    /* ELITE ANIMATION */
    transition: transform 0.4s var(--spring-heavy);
}
.avatar:hover {
    transform: scale(1.1) rotate(-10deg);
}

.user-details h2 { font-size: 22px; font-weight: 900; }
.user-details p { color: var(--text-muted); font-weight: 700; }

.dash-stats {
    display: flex;
    gap: 10px;
}
.stat-badge {
    margin-right: 4px;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 14px;
    /* ELITE ANIMATION */
    transition: transform 0.3s var(--spring-heavy);
}
.stat-badge:hover {
    transform: translateY(-3px) scale(1.05);
}
.stat-badge.streak { background: #ffeaa7; color: #d35400; }
/* ELITE ANIMATION: Fire pulsing */
.stat-badge.streak i { animation: flamePulse 1.5s infinite alternate ease-in-out; }
.stat-badge.xp { background: #81ecec; color: #00b894; }

/* Dashboard Cards */
.dash-card {
    background: var(--white);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    /* ELITE ANIMATION */
    transition: transform 0.4s var(--spring-heavy), box-shadow 0.4s var(--smooth-glide);
    will-change: transform;
}
.dash-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
/* Staggered Load for Dashboard Grid */
.dash-grid .dash-card:nth-child(1) { animation: slideUpFade 0.6s 0.3s both var(--smooth-glide); }
.dash-grid .dash-card:nth-child(2) { animation: slideUpFade 0.6s 0.4s both var(--smooth-glide); }

.hero-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--blox-blue), #0984e3);
    color: var(--white);
    /* ELITE ANIMATION */
    animation: slideUpFade 0.6s 0.2s both var(--smooth-glide);
}
.hero-content h3 { font-size: 24px; font-weight: 900; }
.hero-content p { font-size: 16px; opacity: 0.9; }
.hero-card .btn-primary { width: auto; padding: 15px 40px; background: var(--blox-green); box-shadow: 0 5px 0px #168c48; }

/* Grid Layout (Bottom Modules) */
.dash-grid {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 20px;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #f1f2f6;
    padding-bottom: 10px;
}
.card-header h3 { font-size: 18px; font-weight: 900; }
.badge { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 900; color: var(--white); }
.badge.red { background: var(--blox-red); }
.badge.blue { background: var(--blox-blue); }

/* Progress & Leaderboard Lists */
.homework-item p { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.sub-text { color: var(--text-muted); font-size: 14px; }
.progress-bar { width: 100%; height: 10px; background: #dfe4ea; border-radius: 10px; margin-top: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--blox-green); border-radius: 10px; transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1); }

.leaderboard-list { list-style: none; }
.leaderboard-list li { 
    display: flex; 
    justify-content: space-between; 
    padding: 12px 10px; 
    border-bottom: 1px dashed #dfe4ea; 
    font-size: 16px; 
    font-weight: 700; 
    /* ELITE ANIMATION */
    border-radius: 8px;
    transition: all 0.3s var(--spring-heavy);
}
.leaderboard-list li:last-child { border-bottom: none; }
.leaderboard-list li strong { color: var(--blox-green); }

/* ELITE ANIMATION: Leaderboard Hover Logic */
.leaderboard-list li:hover {
    transform: translateX(10px) scale(1.02);
    background: #f8faff;
    border-bottom-color: transparent;
    box-shadow: -4px 4px 15px rgba(9, 132, 227, 0.08);
}
/* Stagger Leaderboard load */
.leaderboard-list li:nth-child(1) { animation: slideRightFade 0.5s 0.5s both var(--spring-light); }
.leaderboard-list li:nth-child(2) { animation: slideRightFade 0.5s 0.6s both var(--spring-light); }
.leaderboard-list li:nth-child(3) { animation: slideRightFade 0.5s 0.7s both var(--spring-light); }

/* --- DESKTOP MEDIA QUERY --- */
@media (min-width: 768px) {
    .dash-grid {
        flex-direction: row; /* Side by side on desktop! */
    }
    .dash-grid .dash-card {
        flex: 1; /* Makes both cards equal width */
    }
}

/* --- GAME ARENA UI --- */
.arena-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Arena Top HUD */
.arena-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
    /* ELITE ANIMATION */
    animation: slideDownFade 0.5s both var(--smooth-glide);
}

.nav-btn-back {
    background: var(--white);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
    color: var(--text-dark);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    /* ELITE ANIMATION */
    transition: transform 0.2s var(--spring-heavy), box-shadow 0.2s var(--smooth-glide);
}
.nav-btn-back:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.nav-btn-back:active { transform: scale(0.9); box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.1s; }

.level-indicator {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.level-indicator span { font-size: 14px; font-weight: 900; color: var(--text-dark); }
.level-progress-bar { width: 100%; height: 8px; background: #dfe4ea; border-radius: 10px; overflow: hidden; }
.level-progress-fill { 
    height: 100%; 
    background: var(--blox-green); 
    border-radius: 10px; 
    /* ELITE ANIMATION: Flowing shine inside the bar */
    position: relative;
}
.level-progress-fill::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    animation: loadingSweep 2s infinite linear;
}

/* Coach Hint Card */
.coach-card {
    background: #f1f8ff;
    border: 2px solid #ced6e0;
    padding: 16px 20px;
    border-radius: 16px;
    /* ELITE ANIMATION */
    animation: slideUpFade 0.5s 0.2s both var(--spring-light);
    transition: transform 0.3s var(--smooth-glide), border-color 0.3s;
}
.coach-card:hover { transform: scale(1.01); border-color: var(--blox-blue); }

.coach-card-header { display: flex; align-items: center; gap: 8px; color: var(--blox-blue); font-weight: 900; margin-bottom: 5px; }
.coach-card p { font-size: 15px; font-weight: 700; color: #57606f; line-height: 1.4; }

/* Formula Banner */
.formula-banner {
    background: var(--text-dark);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 800;
    /* ELITE ANIMATION */
    animation: slideUpFade 0.5s 0.3s both var(--spring-light);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.formula-banner i { opacity: 0.6; font-size: 11px; }

.blox-tag { padding: 4px 10px; border-radius: 6px; display: inline-block; }
.tag-blue { background: var(--blox-blue); }
.tag-red { background: var(--blox-red); }
.tag-green { background: var(--blox-green); }
.tag-orange { background: var(--blox-orange); }
.tag-purple { background: var(--blox-purple); color: var(--white); }

/* Arena Zones */
.zone-label {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn 0.5s 0.4s both;
}

.arena-drop-zone {
    min-height: 110px;
    background: #ffffff;
    border: 3px dashed #ced6e0;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /* ELITE ANIMATION */
    transition: all 0.3s var(--smooth-glide);
    animation: slideUpFade 0.5s 0.4s both var(--spring-light);
}
.arena-drop-zone:hover {
    background: #f8fbff;
    border-color: var(--blox-blue);
    box-shadow: inset 0 0 15px rgba(30, 144, 255, 0.1);
}

.arena-word-bank {
    min-height: 110px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #e4e7eb;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /* ELITE ANIMATION */
    transition: all 0.3s var(--smooth-glide);
    animation: slideUpFade 0.5s 0.5s both var(--spring-light);
}

/* --- THE 3D TACTILE LINGOBLOX --- */
.blox-item {
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 900;
    color: var(--white);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    position: relative;
    top: 0;
    touch-action: manipulation;
    
    /* Layout for Translation Alignment */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* ELITE ANIMATION: Heavy premium spring physics for float and shadow */
    transition: transform 0.4s var(--spring-heavy), box-shadow 0.4s var(--spring-heavy), filter 0.3s;
    /* Smooth physical slide-in with no wait time */
    animation: smoothBlockEntry 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    will-change: transform, box-shadow;
}

.blox-text {
    pointer-events: none; /* Let the block handle the text click */
}

/* THE NEW PLUS BUTTON (Translation Trigger) */
.tr-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--white);
    border: 2px solid var(--blox-blue);
    color: var(--blox-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s var(--spring-heavy);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.tr-btn:hover { transform: scale(1.2); }
.tr-btn:active { transform: scale(0.9); }

/* Tactile Hover: Lifts off the desk, UNLESS hovering the translation button */
.blox-item:hover:not(:has(.tr-btn:hover)) { 
    transform: translateY(-5px) scale(1.03); 
    filter: brightness(1.08);
    z-index: 10;
}

/* Mechanical Switch Click: Fast snap down, UNLESS tapping the translation button */
.blox-item:active:not(:has(.tr-btn:hover)):not(:has(.tr-btn:active)) {
    top: 5px;
    transform: translateY(0) scale(0.98);
    filter: brightness(0.9);
    box-shadow: 0 0px 0px rgba(0,0,0,0.2) !important;
    transition: transform 0.05s, top 0.05s, box-shadow 0.05s;
}

/* Block Colors & 3D Shadow Layers */
.blox-item.sub { background-color: var(--blox-blue); box-shadow: 0 5px 0px #0959a8, 0 8px 15px rgba(30,144,255,0.2); }
.blox-item.verb { background-color: var(--blox-red); box-shadow: 0 5px 0px #b81220, 0 8px 15px rgba(255,71,87,0.2); }
.blox-item.obj { background-color: var(--blox-green); box-shadow: 0 5px 0px #168c48, 0 8px 15px rgba(46,213,115,0.2); }
.blox-item.extra { background-color: var(--blox-orange); box-shadow: 0 5px 0px #b07202, 0 8px 15px rgba(255,165,2,0.2); }
.blox-item.conj { background-color: var(--blox-purple); box-shadow: 0 5px 0px #622f77, 0 8px 15px rgba(155,89,182,0.2); }

/* Drag and Drop Ghost Styling */
.blox-item.dragging {
    opacity: 0.9;
    transform: scale(1.1) rotate(3deg) translateY(-10px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.25) !important;
    cursor: grabbing;
    z-index: 100;
}

/* TRANSLATION TOOLTIP BUBBLE */
.blox-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.9);
    background: var(--text-dark);
    color: var(--white);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s var(--spring-heavy);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1000;
}
.blox-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--text-dark) transparent transparent transparent;
}
.blox-item.show-tooltip .blox-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Control Buttons */
.arena-controls {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    align-items: flex-start; /* Forces all buttons to hang from the exact same top line */
    /* ELITE ANIMATION */
    animation: slideUpFade 0.5s 0.7s both var(--spring-light);
}

.btn-control {
    margin: 0 !important; /* Kills invisible margins from global classes */
    padding: 0 20px;
    height: 60px !important; /* The great equalizer */
    font-size: 17px;
    font-weight: 900;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    top: 0 !important; /* Stops the button from sinking */
    transform: translateY(0) !important; /* Overrides any stray global transforms */
    transition: transform 0.2s var(--spring-heavy), box-shadow 0.2s var(--smooth-glide), filter 0.2s;
}

.btn-control:hover { 
    transform: translateY(-4px) !important; 
    filter: brightness(1.05); 
}

.btn-control:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0px 0px transparent !important;
}

.btn-secondary {
    background: #e2e8f0;
    color: var(--text-dark);
    box-shadow: 0 5px 0px #cbd5e1, 0 8px 15px rgba(0,0,0,0.05) !important;
    flex: 0.4;
}

.btn-primary-game {
    background: var(--blox-green);
    color: var(--white);
    box-shadow: 0 5px 0px #168c48, 0 10px 20px rgba(46, 213, 115, 0.25) !important;
    flex: 1;
}

/* Feedback Message */
.feedback-msg {
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    min-height: 25px;
}

/* --- HARD MODE OVERRIDES --- */
.arena-container.hard-mode .coach-card,
.arena-container.hard-mode .formula-banner {
    display: none !important;
}
.arena-container.hard-mode .blox-item {
    background-color: #2f3542 !important;
    box-shadow: 0 5px 0px #1e272e, 0 10px 15px rgba(0,0,0,0.15) !important;
    color: #ffffff !important;
}
.arena-container.hard-mode .blox-item:active:not(:has(.tr-btn:hover)):not(:has(.tr-btn:active)) { 
    box-shadow: 0 0px 0px transparent !important; 
}

/* --- ELITE MICROPHONE UI --- */
.mic-container {
    display: none; 
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 15px;
    background: #f1f8ff;
    border-radius: 16px;
    border: 2px dashed #1e90ff;
}
.mic-container.active { 
    display: flex; 
    /* ELITE ANIMATION */
    animation: popInBounce 0.6s var(--spring-heavy) forwards;
}

.btn-mic {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #ff4757;
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 0px #b81220, 0 10px 20px rgba(255, 71, 87, 0.3);
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-shrink: 0; 
    position: relative;
    top: 0;
    z-index: 2;
    /* ELITE ANIMATION */
    transition: transform 0.3s var(--spring-heavy), box-shadow 0.2s var(--smooth-glide), top 0.1s;
}
.btn-mic:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 8px 0px #b81220, 0 15px 30px rgba(255, 71, 87, 0.4); }
.btn-mic:active:not(:disabled) { top: 6px; transform: scale(0.95); box-shadow: 0 0px 0px transparent; }

/* Anti-Spam Disabled States */
.btn-control:disabled, .btn-mic:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(50%);
}

/* ELITE ANIMATION: Multi-Layer Sonar Pulse */
.btn-mic.recording {
    background: #e84118;
    box-shadow: none;
    top: 6px;
    transform: scale(1);
    animation: eliteSonar 1.8s var(--swift-out) infinite;
}

.mic-status { font-weight: 800; color: #1e90ff; font-size: 15px; }

/* Center Wrappers */
.dashboard-container, .arena-container, .login-box { margin-top: auto; margin-bottom: auto; }

/* Global Loading Overlay */
#global-loader { 
    transition: opacity 0.4s var(--smooth-glide), visibility 0.4s; 
    backdrop-filter: blur(5px);
}


/* ==========================================================================
   LINGOBLOX ELITE KEYFRAMES LIBRARY
   ========================================================================== */

@keyframes eliteScreenEntry {
    0% { opacity: 0; transform: translateY(30px) scale(0.96) rotateX(-4deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes popInBounce {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes smoothBlockEntry {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownFade {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideRightFade {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

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

@keyframes flamePulse {
    0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px #d35400); }
    50% { transform: scale(1.15) rotate(5deg); filter: drop-shadow(0 0 8px #ff7675); }
    100% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 2px #d35400); }
}

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

@keyframes eliteSonar {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7), 
                    0 0 0 0 rgba(255, 71, 87, 0.5);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(255, 71, 87, 0), 
                    0 0 0 40px rgba(255, 71, 87, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0), 
                    0 0 0 60px rgba(255, 71, 87, 0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* HARD-MODE SAFE HINT GLOW */
@keyframes hintPulseElite {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--blox-orange)); outline: 0px solid transparent; }
    50% { transform: scale(1.06) rotate(2deg); filter: drop-shadow(0 0 15px var(--blox-orange)) brightness(1.2); outline: 3px solid var(--blox-orange); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--blox-orange)); outline: 0px solid transparent; }
}
.hint-glow {
    animation: hintPulseElite 1.2s infinite !important;
    z-index: 50;
}

/* MODERN XP POPUP ANIMATION */
.xp-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background: linear-gradient(135deg, var(--blox-green), #00b894);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(46, 213, 115, 0.4);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: floatUpXp 1.2s forwards;
}
@keyframes floatUpXp {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, -20px) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -30px) scale(1); filter: blur(0px); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.8); filter: blur(4px); }
}

/* --- SMART HINT BUTTON & BADGE --- */
.hint-btn {
    position: absolute;
    top: -15px;
    right: -10px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--text-dark);
    color: var(--blox-orange);
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s var(--spring-heavy), filter 0.2s;
}
.hint-btn:hover {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
}
.hint-btn:active {
    transform: scale(0.9);
}
.hint-btn:disabled {
    background: #ced6e0;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.hint-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--blox-red);
    color: white;
    font-size: 12px;
    font-weight: 900;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bg-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hint-btn:disabled .hint-badge {
    display: none;
}

/* --- WRONG BLOCK ANIMATION (RED SHAKE) --- */
@keyframes hintPulseError {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--blox-red)); outline: 0px solid transparent; }
    10%, 30%, 50%, 70%, 90% { transform: scale(1.05) translateX(-4px); filter: drop-shadow(0 0 12px var(--blox-red)) brightness(1.1); outline: 3px solid var(--blox-red); }
    20%, 40%, 60%, 80% { transform: scale(1.05) translateX(4px); filter: drop-shadow(0 0 12px var(--blox-red)) brightness(1.1); outline: 3px solid var(--blox-red); }
    100% { transform: scale(1) translateX(0); filter: drop-shadow(0 0 0px var(--blox-red)); outline: 0px solid transparent; }
}
.hint-glow-red {
    animation: hintPulseError 0.8s ease-in-out !important;
    z-index: 50;
}
/* ========================================== */
/* THE LINGOBLOX GRAMMAR RAINBOW EXPANSION    */
/* ========================================== */

/* New Draggable Block Colors (The Unified Vibe Palette) */
.blox-item.mod { background-color: #fb7185; color: white; box-shadow: 0 5px 0px #e11d48, 0 8px 15px rgba(251, 113, 133, 0.2); } /* Soft Rose: Modals/Helpers */
.blox-item.adj { background-color: #fbbf24; color: #2d3436; box-shadow: 0 5px 0px #d97706, 0 8px 15px rgba(251, 191, 36, 0.2); } /* Warm Amber: Adj/Adv */
.blox-item.prep { background-color: #2dd4bf; color: white; box-shadow: 0 5px 0px #0d9488, 0 8px 15px rgba(45, 212, 191, 0.2); } /* Calm Teal: Prepositions */
.blox-item.rel { background-color: #818cf8; color: white; box-shadow: 0 5px 0px #4f46e5, 0 8px 15px rgba(129, 140, 248, 0.2); } /* Slate Indigo: Relative/Wh- */

/* New Formula Hint Tag Colors (For the Coach Text) */
.tag-pink { color: #fb7185; font-weight: 900; }
.tag-yellow { color: #fbbf24; font-weight: 900; }
.tag-cyan { color: #2dd4bf; font-weight: 900; }
.tag-indigo { color: #818cf8; font-weight: 900; }


/* ========================================== */
/* LINGO UNIVERSAL MODAL SYSTEM               */
/* ========================================== */
.lingo-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s var(--smooth-glide);
}

.lingo-modal-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transform: scale(0.9);
    transition: transform 0.3s var(--spring-heavy);
    text-align: center;
}

.lingo-modal-icon {
    font-size: 45px;
    margin-bottom: 15px;
}

.lingo-modal-title {
    margin: 0 0 10px 0;
    color: var(--text-dark, #2d3436);
    font-size: 22px;
    font-weight: 900;
}

.lingo-modal-message {
    color: var(--text-muted, #636e72);
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.5;
    font-weight: 600;
}

.lingo-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.lingo-modal-btn {
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-weight: 800;
    cursor: pointer;
    flex: 1;
    font-size: 15px;
    transition: all 0.25s var(--spring-heavy);
}

.lingo-modal-cancel {
    background: #f1f2f6;
    color: var(--text-dark, #2d3436);
}

.lingo-modal-cancel:hover {
    background: #dfe4ea;
}

.lingo-modal-confirm {
    color: white;
    box-shadow: 0 4px 0px rgba(0,0,0,0.1);
}

.lingo-modal-confirm:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0px rgba(0,0,0,0.1);
}

/* ==========================================================================
   LingoBlox Dashboard Glow-Up
   Companion CSS for the updated UI.js
   ========================================================================== */

/* ---------- CURRICULUM / HERO MODULE CARDS ---------- */

.hero-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,0.10), transparent 28%),
        linear-gradient(135deg, #3a4858 0%, #485769 52%, #3e4d5f 100%) !important;
}

/* AMBIENT FLOATING BLOBS behind "Assigned Modules" — two independent,
   slow-drifting glow blobs so the hero card doesn't feel like a flat panel.
   Each blob has its own duration/offset so they never sync up and feel mechanical. */
.hero-card::before,
.hero-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.hero-card::before {
    width: 280px;
    height: 280px;
    top: -110px;
    left: -70px;
    background: radial-gradient(circle, rgba(30,144,255,0.40), transparent 70%);
    animation: heroBlobDriftA 10s var(--smooth-glide) infinite;
}

.hero-card::after {
    width: 240px;
    height: 240px;
    bottom: -90px;
    right: -60px;
    background: radial-gradient(circle, rgba(46,213,115,0.32), transparent 70%);
    animation: heroBlobDriftB 12s var(--smooth-glide) infinite;
}

/* Keep the real content above the blobs */
.hero-card > * {
    position: relative;
    z-index: 1;
    width: 100%; /* THE MAGIC FIX: Forces container to stretch */
}

.hero-card > .hero-content > div[style*="display: flex"] {
    gap: 14px !important;
}

.curriculum-deck {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 132px;
    flex: 1 1 190px;
    min-width: 180px;
    padding: 18px;
    border-radius: 20px;
    cursor: pointer;

    background:
        linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 12px 30px rgba(0,0,0,0.12);

    transition:
        transform 0.35s var(--spring-heavy),
        box-shadow 0.35s var(--smooth-glide),
        border-color 0.35s var(--smooth-glide),
        background 0.35s var(--smooth-glide);
}

.curriculum-deck::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    left: -60px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0.08) 48%, transparent 72%);
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    transition: transform 0.5s var(--smooth-glide), opacity 0.35s ease;
}

.curriculum-deck::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    right: -55px;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.27), transparent 70%);
    filter: blur(14px);
    z-index: -1;
    pointer-events: none;
}

.curriculum-deck:hover {
    transform: translateY(-7px) scale(1.025);
    background: linear-gradient(145deg, rgba(255,255,255,0.19), rgba(255,255,255,0.09));
    border-color: rgba(var(--accent-rgb),0.52);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 18px 42px rgba(var(--accent-rgb),0.25);
}

.curriculum-deck:hover::before {
    transform: translate(55px, 30px) scale(1.35);
}

.curriculum-deck-content {
    position: relative;
    z-index: 3;
}

.curriculum-deck-title {
    margin: 0 0 14px 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.10);
}

.curriculum-deck-title i {
    margin-right: 7px;
}

.curriculum-progress-track {
    width: 100%;
    height: 8px;
    margin-bottom: 9px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    overflow: hidden;
    position: relative; /* anchor for the full-width shine below */
}

.curriculum-progress-fill {
    height: 100%;
    width: var(--progress);
    border-radius: inherit;
    background: var(--bar-color);
    box-shadow: 0 0 14px var(--bar-color);
    position: relative;
}

/* FIXED: this shine used to live on .curriculum-progress-fill, which is only
   as wide as the completion % (var(--progress)). That meant the sweep was
   physically boxed into whatever sliver of the bar was filled — on anything
   under ~100% it visually stalled out partway across, which is the "only
   goes halfway" bug. Moved it to the TRACK (the full-width parent) so it now
   sweeps the entire bar every pass regardless of progress, and painted after
   the fill in DOM order so it glides on top instead of underneath it. */
.curriculum-progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-120%);
    animation: curriculumBarShine 3.2s var(--smooth-glide) infinite;
    pointer-events: none;
}

.curriculum-deck-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,0.76);
}

.curriculum-deck-meta span:first-child {
    color: #fff;
}

.curriculum-deck.is-complete {
    cursor: default;
}

/* ---------- HOMEWORK ---------- */

.homework-item-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 16px 17px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e7edf4;
    box-shadow: 0 7px 18px rgba(40,60,80,0.07);
    cursor: pointer;
    transition:
        transform 0.35s var(--spring-heavy),
        box-shadow 0.35s var(--smooth-glide),
        border-color 0.3s var(--smooth-glide);
}

.homework-item-card::before {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    left: -110px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.28), transparent 68%);
    filter: blur(14px);
    z-index: -1;
    pointer-events: none;
    transition: transform 0.5s var(--smooth-glide);
}

.homework-item-card::after {
    content: '';
    position: absolute;
    inset: auto -30px -75px auto;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb),0.13), transparent 70%);
    filter: blur(15px);
    z-index: -1;
    pointer-events: none;
}

.homework-item-card:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(var(--accent-rgb),0.34);
    box-shadow: 0 16px 32px rgba(var(--accent-rgb),0.13);
}

.homework-item-card:hover::before {
    transform: translate(70px, 35px) scale(1.3);
}

.homework-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 13px;
}

.homework-item-title {
    margin: 0 0 4px 0 !important;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 900;
}

.homework-item-title i {
    color: var(--accent);
    margin-right: 7px;
    filter: drop-shadow(0 3px 7px rgba(var(--accent-rgb),0.35));
}

.homework-item-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.homework-due {
    flex-shrink: 0;
    padding: 6px 9px;
    border-radius: 9px;
    background: rgba(var(--accent-rgb),0.09);
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.homework-due i {
    margin-right: 5px;
}

.homework-progress-track {
    height: 8px;
    background: #edf1f5;
    border-radius: 999px;
    overflow: hidden;
}

.homework-progress-fill {
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, white));
    box-shadow: 0 0 10px rgba(var(--accent-rgb),0.55);
}

.homework-empty-state {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 34px 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(46,213,115,0.10), transparent 45%),
        #f8fbff;
    border-radius: 16px;
    border: 1px dashed #bfe8cf;
}

/* ---------- LEADERBOARD ---------- */

#dashLeaderboard {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#dashLeaderboard li {
    position: relative;
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #edf1f5 !important;
    border-radius: 15px !important;
    background: linear-gradient(100deg, #ffffff, #f9fbfd) !important;
    box-shadow: 0 4px 12px rgba(40,60,80,0.04);
    border-left: 0 !important;
    
    /* THE FIX: Synced to 0.35s to exactly match Curriculum and Homework cards */
    transition:
        transform 0.35s var(--spring-heavy),
        box-shadow 0.35s var(--smooth-glide),
        border-color 0.35s var(--smooth-glide),
        background-color 0.35s var(--smooth-glide);
        
    overflow: hidden;
    will-change: transform, box-shadow; /* Tells the browser to hardware-accelerate this */
}

#dashLeaderboard li::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    left: -50px;
    top: -42px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--medal) 24%, transparent), transparent 70%);
    filter: blur(9px);
    pointer-events: none;
}

#dashLeaderboard li:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: color-mix(in srgb, var(--medal) 30%, #edf1f5) !important;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--medal) 12%, rgba(40,60,80,0.08));
    background-color: #ffffff !important;
    z-index: 10;
}

/* Bonus Polish: Makes the ambient colored medal blur behind it pulse slightly when hovered */
#dashLeaderboard li:hover::before {
    transform: translate(15px, 15px) scale(1.2);
}

.leaderboard-rank {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: rgba(116,125,140,0.07);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.rank-1 .leaderboard-rank {
    background: rgba(241,196,15,0.16);
    color: #d49a00;
}

.rank-2 .leaderboard-rank {
    background: rgba(189,195,199,0.22);
    color: #7f8c8d;
}

.rank-3 .leaderboard-rank {
    background: rgba(205,127,50,0.15);
    color: #b36b20;
}

.leaderboard-player {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
}

.leaderboard-player > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--medal),0.10);
    color: var(--medal);
    font-size: 12px;
}

#dashLeaderboard strong {
    position: relative;
    z-index: 2;
    color: #00a977;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- CARD HEADERS ---------- */

#dashHwTitle,
#dashLeaderboard {
    position: relative;
}

#dashHwTitle i {
    padding: 8px;
    margin-right: 5px;
    border-radius: 10px;
    background: rgba(255,165,2,0.10);
    filter: drop-shadow(0 3px 7px rgba(255,165,2,0.25));
}

/* ---------- MOTION ---------- */

/* FIXED shine sweep: previously held at translateX(-100%) for 0–55% of the
   cycle, then rushed across in a short 55–78% burst, then sat still again
   until the loop reset — a jerky "hold, snap, hold" pattern. Now it rests
   briefly, glides smoothly across the full width over a longer window, and
   rests again, which reads as a single fluid pass instead of a stutter. */
@keyframes curriculumBarShine {
    0% { transform: translateX(-120%); }
    45% { transform: translateX(-120%); }
    85% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

/* Two independent drift loops for the hero-card ambient blobs — different
   durations/paths on purpose so they never fall into visible lockstep. */
@keyframes heroBlobDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(35px, 25px) scale(1.15); }
}

@keyframes heroBlobDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -20px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .curriculum-deck,
    .homework-item-card,
    #dashLeaderboard li,
    .curriculum-progress-track::after,
    .hero-card::before,
    .hero-card::after {
        transition: none !important;
        animation: none !important;
    }
}



/* ========================================== */
/* UNIVERSAL GLOBAL BUTTON SHINE              */
/* ========================================== */

/* 1. Ensure the shine stays contained inside the button borders */
.btn-admin, 
.btn-primary, 
.btn-tactical, 
.btn-control, 
.lingo-modal-btn {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Build the invisible light beam */
.btn-admin::after, 
.btn-primary::after, 
.btn-tactical::after, 
.btn-control::after, 
.lingo-modal-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.7s var(--smooth-glide);
    pointer-events: none; /* Crucial: Prevents the light from blocking your clicks */
    z-index: 1; 
}

/* 3. Shoot the beam across the button on hover */
.btn-admin:hover::after, 
.btn-primary:hover::after, 
.btn-tactical:hover::after, 
.btn-control:hover::after, 
.lingo-modal-btn:hover::after {
    left: 200%;
}

/* ========================================== */
/* THE ELITE SPLASH REVEAL (LOADING SCREEN)   */
/* ========================================== */
#global-loader {
    transition: opacity 0.6s var(--smooth-glide), transform 0.7s var(--spring-heavy), backdrop-filter 0.6s !important;
    background: rgba(244, 247, 246, 0.75) !important; /* Premium semi-transparent base */
    backdrop-filter: blur(15px) !important; /* Heavy glass effect */
    z-index: 999999 !important;
}

#global-loader i, #global-loader h3 {
    transition: transform 0.5s var(--spring-heavy), opacity 0.4s var(--smooth-glide);
}

/* When the JS sets opacity to 0, pull the icon and text up smoothly */
#global-loader[style*="opacity: 0"] i,
#global-loader[style*="opacity: 0"] h3 {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
}