/* ==========================================
   📊 V7.12 HUD PANELS & EDUCATOR WORKSPACE
   ========================================== */

/* Panel Internal Paddings */
#profile-hud { text-align: center; }
#profile-hud #hud-content { padding: 25px; }

#info-panel { text-align: left; }
#info-panel #info-content { padding: 25px; }

#quiz-panel { text-align: center; }
#quiz-panel #quiz-content { padding: 25px; }

#time-controls #time-content { display: flex; gap: 12px; justify-content: center; padding: 25px; }

/* Keeps the titles and speaker icons away from the X button */
#p-name, #quiz-title, #profile-hud h2 {
    padding-right: 40px; 
}

/* 🖥️ DESKTOP: SNAP PANELS TO THE LEFT */
@media (min-width: 769px) {
    #info-panel, #time-controls, #quiz-panel, #profile-hud {
        left: 20px !important;
        transform: translateX(0) translateY(150%) !important;
    }
    
    /* FIX: Chain the ID and Class together to win the CSS Specificity War! */
    #info-panel.docked-sheet-active, 
    #time-controls.docked-sheet-active, 
    #quiz-panel.docked-sheet-active, 
    #profile-hud.docked-sheet-active {
        transform: translateX(0) translateY(0) !important;
    }
}

/* --- PROFILE HUD SPECIFICS --- */
#hud-name { font-weight: 800; color: var(--color-primary); font-size: 1.3rem; margin-bottom: 4px; font-family: 'Nunito', sans-serif;}
#hud-rank { font-size: 1rem; color: #88ccff; margin-bottom: 16px; font-weight: 800; }
#hud-xp-bar { background: rgba(0,0,0,0.5); height: 12px; border-radius: 6px; margin-bottom: 8px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.1); }
#hud-xp-fill { background: #44ff44; height: 100%; width: 0%; transition: width 0.5s ease; box-shadow: 0 0 10px #44ff44; }
#hud-xp-text { font-size: 0.85rem; color: #94A3B8; margin-bottom: 15px; font-weight: bold; }
#hud-stars { color: var(--color-primary); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 15px; word-wrap: break-word; }

/* --- INFO PANEL SPECIFICS --- */
.nickname { font-size: 0.95rem; color: var(--color-primary); display: block; margin-bottom: 15px; font-weight: 800; font-family: 'Nunito', sans-serif; }
.details { color: #94A3B8; font-size: 0.9rem; display: none; margin-bottom: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; line-height: 1.5; font-weight: 600;}
.fun-fact-box { background: rgba(255,255,255,0.05); color: #fff; padding: 15px; border-radius: 16px; font-weight: 600; font-size: 0.95rem; line-height: 1.5; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.1); }
.fun-fact-title { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; color: var(--color-secondary); font-weight: 800;}

/* 📊 CELESTIAL STATS GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-title {
    font-size: 0.75rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
}

.stat-value {
    font-size: 0.9rem;
    color: #F8FAFC;
    font-weight: 600;
}

/* --- QUIZ PANEL SPECIFICS --- */
#quiz-title { color: #88ccff; margin: 0 0 15px 0; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; }
#quiz-question { color: #fff; font-size: 1.1rem; margin-bottom: 20px; line-height: 1.5; font-weight: 700; }
#quiz-feedback { color: #ff4422; font-weight: 800; margin-bottom: 20px; min-height: 24px; font-size: 1rem;}
#btn-quiz-start, #btn-quiz-exit { width: 100%; padding: 14px; margin-bottom: 10px;}

/* --- HUD MODALS --- */
#rank-up-modal > div {
    background: rgba(15, 23, 42, 0.95); border: 4px solid var(--color-primary); border-radius: 32px;
    padding: 40px; max-width: 450px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,0.6); 
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#edit-profile-modal > div {
    background: rgba(15, 23, 42, 0.95); border: 2px solid rgba(255,255,255,0.1); border-radius: 24px;
    padding: 30px; max-width: 400px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes popIn { 0% { transform: scale(0.8) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

/* 🏆 GLOBAL LEADERBOARD ALIGNMENT OVERRIDE */
#leaderboard-panel {
    left: auto !important;     
    right: 10px !important;    
    transform: none !important; 
    width: 380px !important; 
}

/* 👑 GLOBAL RANKINGS TITLE FIX */
#leaderboard-panel h2, 
#leaderboard-panel #quiz-title {
    justify-content: center !important; /* Centers the flexbox alignment */
    text-align: center !important; /* Centers the text itself */
    font-size: 1.4rem !important; /* Shrinks the text for a cleaner UI */
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* 🛡️ LEADERBOARD NAME WRAP FIX (NUCLEAR OPTION) */
.pilot-name {
    display: inline-block !important;
    white-space: normal !important; /* Nukes the single-line constraint */
    word-wrap: break-word !important; 
    overflow-wrap: break-word !important;
    overflow: visible !important; /* Allows text to drop down */
    text-overflow: clip !important; /* Disables the CSS ellipsis */
    line-height: 1.2 !important; 
    max-width: 190px !important; 
    font-weight: 800 !important; 
    color: #F8FAFC !important; 
}

/* --- FOOTER & HINTS --- */
.hint { position: absolute; bottom: 95px; width: 100%; text-align: center; color: #94A3B8; font-size: 0.95rem; font-weight: 700; pointer-events: none; z-index: 5; }
.premium-footer { position: absolute; top: 12px; right: 12px; text-align: right; color: rgba(255,255,255,0.3); font-size: 0.8rem; font-weight: 800; pointer-events: none; text-transform: uppercase; letter-spacing: 2px; z-index: 15; }

/* --- MARKETING TICKER --- */
#news-ticker-container { 
    position: absolute; top: env(safe-area-inset-top, 0); left: 0; width: 100%; height: 35px; 
    background: linear-gradient(90deg, #FFB703, #FF477E, #118AB2, #FFB703); background-size: 300% 100%;
    animation: gradientPan 10s linear infinite; color: #ffffff; border-bottom: 2px solid rgba(0,0,0,0.2); 
    z-index: 20; overflow: hidden; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.4); align-items: center; 
}

#ticker-text { 
    white-space: nowrap; display: inline-block; font-weight: 900; font-size: 0.95rem; 
    text-transform: uppercase; letter-spacing: 1.5px; transform: translateX(100vw); 
    font-family: 'Nunito', sans-serif; text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    
    /* 🛠️ FIX: Explicitly call the animation offline and set to 90 seconds! */
    animation: tickerScroll 150s linear forwards;
}

@keyframes tickerScroll { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
@keyframes gradientPan { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* --- MOBILE TWEAKS --- */
@media (max-width: 768px) {
    .premium-footer, .hint { display: none !important; }
    #ticker-text { font-size: 0.75rem; }
}