/* Hyperspace Overhaul (Concept 2: Intense Danger) */
.hyper-solid-card {
    background:#020617 !important;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.4), inset 0 0 20px rgba(239, 68, 68, 0.3) !important;
    border: 2px solid rgba(239, 68, 68, 0.5) !important;
}

.hyper-hud {
    font-family: 'Orbitron', sans-serif !important;
    color:var(--danger) !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.8) !important;
    letter-spacing:2px;
}

.hyper-input {
    background: rgba(0, 0, 0, 0.6) !important;
    border:2px solid var(--danger) !important;
    color:#fff !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
    text-shadow:0 0 5px #fff;
    font-family: 'Orbitron', sans-serif;
}

.hyper-input:focus {
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.8) !important;
    outline:none;
}

.hyper-submit {
    background:var(--danger) !important;
    border-color:var(--danger) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
    font-weight:900 !important;
    letter-spacing:1px;
}

.hyper-prompt {
    color:#fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Hyper Countdown Overlay */
#hyper-countdown-overlay {
    position:fixed;
    top:0; left:0; width:100vw; height:100vh;
    background: rgba(2, 6, 23, 0.9);
    z-index:10000;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    backdrop-filter:blur(10px);
}

.hyper-countdown-text {
    font-size:8rem;
    font-weight:900;
    color:var(--danger);
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.8), 0 0 60px rgba(239, 68, 68, 0.5);
    animation:pulseScale 1s infinite;
}

.warp-wipe-text {
    color:#fff;
    font-size:2.5rem;
    font-weight:bold;
    text-shadow: 0 0 20px rgba(59,130,246,0.8);
    white-space:nowrap;
    font-family: 'Outfit', sans-serif;
}

/* Indeterminate loading bar under the warp message while a session loads. */
.warp-loading-bar{width:170px;height:4px;border-radius:4px;background:rgba(255,255,255,0.16);overflow:hidden;}
.warp-loading-fill{width:45%;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(167,139,250,0),#a78bfa 55%,#dbe4ff);animation:warpLoad 1.05s cubic-bezier(0.4,0,0.6,1) infinite;}
@keyframes warpLoad{0%{transform:translateX(-110%);}100%{transform:translateX(260%);}}
@keyframes warpLoadPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

@keyframes pulseScale {
    0% { transform:scale(1);opacity:0.8;}
    50% { transform: scale(1.2);opacity: 1;text-shadow: 0 0 50px rgba(239, 68, 68, 1);}
    100% { transform:scale(1);opacity:0.8;}
}

/* Hyper Edge Warping Effect */
body.hyper-theme::after {
    content:'';
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:9998;
    pointer-events:none;
    box-shadow: inset 0 0 100px 50px rgba(239, 68, 68, 0.15);
    animation:warpEdges 2s ease-in-out infinite alternate;
}
body.hyper-theme.session-ended::after {
    display:none;
}

@keyframes warpEdges {
    from { box-shadow: inset 0 0 50px 20px rgba(239, 68, 68, 0.1);}
    to { box-shadow: inset 0 0 150px 60px rgba(239, 68, 68, 0.3);}
}

@keyframes shake {
    10%, 90% { transform:translate3d(-1px, 0, 0);}
    20%, 80% { transform:translate3d(2px, 0, 0);}
    30%, 50%, 70% { transform:translate3d(-4px, 0, 0);}
    40%, 60% { transform:translate3d(4px, 0, 0);}
}

/* Session Mobile Responsiveness tweaks — session-scoped ONLY. The global h1/h2/p/main#app-root
   mobile rules moved to the critical (inlined) responsive.css because this sheet is deferred on
   SSR pages, and page-wide rules arriving ~2s after first paint reflowed the whole landing. */
@media (max-width:768px) {
    #fc-input { padding:10px !important;font-size:1rem !important;}
    .hyper-countdown-text { font-size:4rem !important;}
    .warp-wipe-text { font-size:1.5rem !important;white-space:normal !important;text-align:center;}
}

/* Session Active Overrides */
body.session-active header { display:none !important;}
body.session-active footer { display:none !important;}
/* During a session #app-root IS the full-viewport scroll container; cancel the mobile margin/padding
   above so the scrollbar reaches every edge and the content isn't clipped before the bottom.
   scrollbar-gutter reserves the bar's space symmetrically so the centered card doesn't drift left. */
body.session-active #app-root { max-width:none !important;margin:0 !important;padding:0 !important;scrollbar-gutter:stable both-edges;}

/* Hyper Input Tweaks */
.hyper-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    text-shadow:none !important;
}

/* Hyper Correct Answer Classes */
.hyper-success-state {
    border-color:var(--success) !important;
    box-shadow:0 0 50px var(--success), inset 0 0 30px var(--success) !important;
    transition:all 0.1s ease-out;
}

.hyper-time-success {
    color:var(--success) !important;
    transform:scale(1.3);
    transition:all 0.1s ease-out;
}

.hyper-success-state-svg {
    stroke:var(--success) !important;
    filter:drop-shadow(0 0 10px var(--success));
    transition:stroke 0.1s ease-out;
}

/* Hyper Game Over Background */
body.hyper-game-over {
    background-image:
        radial-gradient(circle at center, rgba(220, 38, 38, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%),
        repeating-linear-gradient(
            -45deg,
            rgba(220, 38, 38, 0.07),
            rgba(220, 38, 38, 0.07) 30px,
            transparent 30px,
            transparent 60px
        ) !important;
    background-color:#020617 !important;
}

/* Hyper Progress Bar */
.hyper-progress-container {
    background:#2d2010 !important;
}
.hyper-progress-bar {
    background:var(--accent) !important;
    box-shadow:0 0 20px var(--accent), 0 0 10px #fff !important;
}

@media (max-width:768px) {
    .floating-icon {
        display:none !important;
    }
}

/* Hyper Emoji Container Border */
.hyper-emoji-container {
    border-bottom:none !important;
    background:transparent !important;
}

.progress-checkmark-icon {
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--card-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    font-size:0.8rem;
    margin-left:-5px;
    z-index:2;
    transition:background-color 0.3s, color 0.3s;
}

/* Review Card Base Styling */
.exercise-card {
    padding:0;
    overflow:hidden;
    margin:0;
    min-height:350px;
}

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

.slide-down-fade-in {
    animation: slideDownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fc-media-container {
    text-align:center;
    background:#f8fafc;
    border-bottom:1px solid var(--card-border);
    padding:0;
    transition:background 0.5s;
    height:37dvh;
    max-height:310px;
    min-height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.fc-media img {
    width:100%;
    height:100%;
    object-fit:cover;
}
/* No-photo fallback for the session media (gradient + star, `.is-space` global in academy.css). */
.fc-media-space{width:100%;height:100%;font-size:3rem;}
.fc-content {
    padding:20px;
    text-align:center;
}
.fc-prompt {
    font-size:1.8rem;
    margin:0 0 15px 0;
    color:var(--text);
}
.fc-pos-badge{display:inline-block;margin:0 auto 10px;padding:3px 12px;border-radius:999px;background:var(--accent-glow);color:var(--accent-hover);font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;}
/* In a session, sit the badge on the word's line, pushed right (no extra line = no overflow). */
.fc-content .fc-pos-badge{float:right;margin:5px 0 0 12px;}

/* Short disambiguating qualifier under a prompt word ("the leg" → "(of a table/chair)"). */
.prompt-qualifier{display:block;font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-top:4px;}
/* Shared pill label for media-less exercises (cloze, matching), pushed clear of the card's top edge. */
.exercise-label{display:inline-flex;align-items:center;gap:7px;margin:10px auto 6px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--primary);background:rgba(111,95,228,0.1);padding:5px 14px;border-radius:999px;}
/* Cloze (fill-in-the-blank) exercise — labeled card, live-filling slot, hint pill. */
.cloze-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:14px 0 22px;width:100%;box-sizing:border-box;}
.cloze-sentence{font-size:1.5rem;line-height:2;font-weight:700;color:var(--text-color);max-width:540px;}
.cloze-hint{display:inline-flex;align-items:center;gap:9px;font-size:0.98rem;font-weight:400;color:var(--text-muted);font-style:italic;background:var(--bg-color);border:1px solid var(--card-border);border-radius:12px;padding:10px 16px;max-width:540px;}
.cloze-hint i{color:var(--primary);font-style:normal;font-size:1.05rem;}
.cloze-blank {
    display:inline-block;
    min-width:92px;
    padding:2px 14px;
    margin:0 4px;
    border-radius:10px;
    border:2px dashed var(--primary);
    background:rgba(111,95,228,0.07);
    color:var(--primary);
    font-weight:800;
    text-align:center;
    vertical-align:middle;
    transition:all 0.2s;
}
.cloze-blank.filled{border-style:solid;background:rgba(111,95,228,0.14);}
.cloze-blank-correct{color:var(--success)!important;border:2px solid var(--success)!important;background:rgba(16,185,129,0.12)!important;}
.cloze-blank-incorrect{color:var(--danger)!important;border:2px solid var(--danger)!important;background:rgba(239,68,68,0.1)!important;}
.fc-input {
    box-sizing:border-box;
    width:100%;
    padding:15px;
    font-size:1.2rem;
    border-radius:12px;
    border:2px solid var(--card-border);
    text-align:center;
    margin-bottom:15px;
    transition:all 0.2s ease;
}
.fc-input:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 10px var(--primary-glow);
}
.fc-input-group {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.fc-input-group .fc-input {
    margin-bottom:0;
    text-align:left;
}

.fc-inline-btn {
    box-sizing:border-box;
    height:56px;/* Matches input height roughly (15px padding + line height) */
    width:56px;
    flex-shrink:0;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    padding:0;
    transition:all 0.2s ease;
}

.hyper-theme .fc-inline-btn {
    background-color:var(--warning);
    color:#1e293b;
    box-shadow: 0 0 15px rgba(244, 162, 60, 0.5);
}

.fc-inline-btn.btn-success {
    background-color:var(--success) !important;
    color:white !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

body.session-active .hyper-theme .fc-inline-btn.hyper-submit.btn-success {
    background: linear-gradient(135deg, #6F5FE4, #F4825C) !important;
    box-shadow: 0 0 15px rgba(244, 130, 92, 0.5) !important;
    color:white !important;
    border-color:transparent !important;
}

/* Floating Toast */
.floating-toast {
    position:absolute;
    top:-50px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    padding:10px 20px;
    border-radius:20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-weight:bold;
    z-index:1000;
    opacity:0;
    transition:opacity 0.3s, top 0.3s;
    pointer-events:none;
    white-space:nowrap;
}
.floating-toast.show {
    opacity:1;
    top:20px;
}

/* Progress Tooltip */
.progress-tooltip-wrapper {
    position:relative;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:0;
    margin-bottom:20px;
}
/* The progress "X / Y Mastered" hint now uses the global [data-tooltip] system (see main.js). */

/* Streak Flame */
.streak-container {
    position:absolute;
    top:-20px;
    left:20px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    padding:5px 12px;
    border-radius:15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-weight:bold;
    font-size:1.1rem;
    color:var(--text-muted);
    transition:all 0.3s;
    z-index:5;
}
.streak-container i.fa-fire-flame-curved {
    color:var(--text-muted);
    opacity:0.5;
    filter:grayscale(1);
    transition:all 0.3s;
}
.streak-container.active {
    color:#f97316;
}
.streak-container.active i.fa-fire-flame-curved {
    color:#f97316;
    opacity:1;
    filter:none;
    animation:pulse-flame 1s infinite alternate;
}
@keyframes pulse-flame {
    from { transform:scale(1);opacity:0.8;}
    to { transform:scale(1.1);opacity:1;}
}

/* Streak Bounces */
@keyframes streak-bounce {
    0% { transform:scale(1);}
    50% { transform:scale(1.3);}
    100% { transform:scale(1);}
}
@keyframes streak-reset {
    0% { transform:translateX(0);}
    25% { transform:translateX(-10px) rotate(-5deg);color:var(--danger);}
    75% { transform:translateX(10px) rotate(5deg);color:var(--danger);}
    100% { transform:translateX(0);}
}
.streak-bounce { animation:streak-bounce 0.4s ease-out;}
.streak-reset { animation:streak-reset 0.5s ease-out;}

/* Floating decorations */
@keyframes float {
    0% { transform:translateY(0px) rotate(0deg);}
    50% { transform:translateY(-10px) rotate(5deg);}
    100% { transform:translateY(0px) rotate(0deg);}
}

.floating-icon {
    animation:float 4s ease-in-out infinite;
    opacity:0.8;
    display:inline-block;
}
.float-delay-1 { animation-delay:1s;}
.float-delay-2 { animation-delay:2s;}

.floating-icon i {
    display:inline-block;
    will-change:transform;
}
.floating-icon:nth-child(even) i {
    transform:translate(calc(var(--parallax-x, 0px) * 0.5), calc(var(--parallax-y, 0px) * 0.5));
}
.floating-icon:nth-child(odd) i {
    transform:translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}
.floating-icon:nth-child(3n) i {
    transform:translate(calc(var(--parallax-x, 0px) * 1.5), calc(var(--parallax-y, 0px) * 1.5));
}

/* Level-up celebration banner (shown atop the summary when XP crosses a level threshold). */
.level-up-banner{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 22px;padding:16px 22px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 10px 30px var(--primary-glow);animation:levelUpPop 0.6s cubic-bezier(0.16,1,0.3,1) both;}
.level-up-spark{font-size:2rem;animation:levelUpSpark 1.4s ease-in-out infinite;}
.level-up-title{font-family:var(--font-display);font-weight:800;font-size:1.4rem;line-height:1.1;}
.level-up-sub{font-size:0.95rem;opacity:0.95;}
@keyframes levelUpPop{from{opacity:0;transform:translateY(-12px) scale(0.96);}to{opacity:1;transform:none;}}
@keyframes levelUpSpark{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.18) rotate(8deg);}}
.summary-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px;}
.summary-stat-card{background:var(--card-bg);padding:15px;border-radius:12px;border:1px solid var(--card-border);text-align:center;}
.summary-stat-value{font-size:2rem;font-weight:800;}
.summary-stat-value.primary{color:var(--primary);}
.summary-stat-value.accent{color:var(--accent);}
.summary-stat-value.success{color:var(--success);}
.summary-stat-value.muted{color:var(--text-muted);}
.summary-stat-label{font-size:0.9rem;color:var(--text-muted);font-weight:bold;}
.summary-table{width:100%;border-collapse:collapse;}
.summary-table-header-row{border-bottom:2px solid var(--card-border);}
.summary-table-header-cell{padding:10px;text-align:left;}
.summary-table-row{border-bottom:1px solid var(--card-border);}
.summary-table-cell{padding:10px;}
.summary-table-cell.success-bold{color:var(--success);font-weight:bold;}
.summary-word-link{color:var(--primary);text-decoration:none;}
.summary-word-link:hover{text-decoration:underline;}
.hull-failure-icon{font-size:5rem;color:var(--danger);margin-bottom:20px;}
.hull-failure-title{color:var(--danger);}
.fc-speak-btn-inline{padding:4px 10px;font-size:0.9rem;margin-left:10px;}
.fade-in-media{opacity:0;transition:opacity 0.5s ease-in;}
.fade-in-media.loaded{opacity:1;}
.game-over-flash{position:fixed;inset:0;background-color:var(--danger);z-index:99999;pointer-events:none;transition:opacity 1.5s ease-out;}
.game-over-particle{position:fixed;top:50%;left:50%;z-index:100000;pointer-events:none;}
.confetti-particle{position:fixed;top:-10px;width:10px;z-index:99999;pointer-events:none;}
.body-shake{animation:shake 0.5s cubic-bezier(.36,.07,.19,.97) both;}

.hyperspace-canvas {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:-1;
    pointer-events:none;
    display:none;
}
.review-wrapper{max-width:600px;margin:20px auto 8px;padding:8px 20px 14px;position:relative;}
.decal-star-session{position:absolute;color:#fbbf24;z-index:-1;}
.decal-cloud-session{position:absolute;color:#cbd5e1;z-index:-1;}
.decal-planet-session{position:absolute;color:#93c5fd;z-index:-1;}
.decal-comet-session{position:absolute;color:#fbbf24;z-index:-1;}
.decal-meteor-session{position:absolute;color:#a78bfa;z-index:-1;}
.decal-star-shooting-session{position:absolute;color:#fbbf24;z-index:-1;}
.session-decal-1{top:10%;left:-60px;font-size:2rem;opacity:0.8;}
.session-decal-2{top:70%;right:-70px;font-size:2.5rem;opacity:0.6;}
.session-decal-3{top:30%;right:-40px;font-size:1.5rem;opacity:0.9;}
.session-decal-4{bottom:-20px;left:-40px;font-size:2rem;opacity:0.5;}
.session-decal-5{top:45%;left:-80px;font-size:1.8rem;opacity:0.7;}
.session-decal-6{bottom:10%;right:-50px;font-size:1.2rem;opacity:0.9;}
.session-decal-7{top:5%;right:-30px;font-size:1.5rem;opacity:0.4;}
.session-decal-8{top:85%;left:-20px;font-size:1.1rem;opacity:0.6;}
.review-complete-panel{display:none;text-align:center;padding:40px 20px;}
.review-complete-icon{font-size:5rem;color:var(--success);margin-bottom:20px;}
.session-summary-box {
    margin:30px 0;
    text-align:left;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:12px;
    padding:20px;
}
/* Compact "home" button pinned top-right of the summary screen, so the user can leave without scrolling
   to the bottom button. The exit-X is hidden once the session completes, freeing this corner. */
.btn-summary-home {
    position:fixed;
    top:20px;
    right:20px;
    z-index:10001;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-radius:30px;
    background:var(--card-bg);
    color:var(--text-color);
    border:1px solid var(--card-border);
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    text-decoration:none;
    font-weight:700;
    font-size:0.9rem;
    transition:transform 0.2s,box-shadow 0.2s,background 0.2s,color 0.2s;
}
.btn-summary-home:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 18px var(--primary-glow);}
.progress-bar-track {
    flex-grow:1;
    background:var(--card-border);
    height:8px;
    border-radius:4px 0 0 4px;
    overflow:hidden;
    position:relative;
}
.progress-bar-fill{background:var(--primary);height:100%;transition:width 0.3s;}
.btn-row-right{display:flex;justify-content:flex-end;margin-bottom:10px;}
.btn-small-hidden{padding:6px 12px;font-size:0.9rem;display:none;}
.hyper-hud-layout{display:none;justify-content:space-between;align-items:center;margin-bottom:15px;}
.hyper-countdown-container{display:flex;align-items:center;font-size:1.5rem;font-weight:bold;transition:all 0.1s ease-out;}
.hyper-borders-svg-container {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
}
.hyper-borders-rect{transition:stroke-dashoffset 0.1s linear;}
#hyper-countdown-overlay,#exit-confirm-modal,#streak-ui,#fc-next,#fc-choices-container,#fc-matching-container{display:none;}

/* --- Asteroid Belt (leeches) --- */
.asteroid-container{display:none;}
.asteroid-panel{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:2px 4px;}
.asteroid-stage {
    position:relative;
    width:100%;
    height:104px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.asteroid-stage::before {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(244,162,60,0.28), rgba(244,162,60,0.06) 55%, transparent 72%);
    animation:asteroid-aura 3.2s ease-in-out infinite;
}
.asteroid-rock {
    width:84px;
    height:84px;
    background:radial-gradient(circle at 33% 28%, #9c8c7b, #5b4f44 52%, #342b24 100%);
    clip-path:polygon(50% 0%, 72% 6%, 90% 22%, 100% 46%, 92% 70%, 74% 88%, 50% 100%, 26% 90%, 8% 72%, 2% 46%, 12% 22%, 30% 6%);
    box-shadow:inset -9px -10px 18px rgba(0,0,0,0.48), 0 8px 22px rgba(60,40,20,0.4), 0 0 24px rgba(244,162,60,0.35);
    position:relative;
    z-index:1;
    animation:asteroid-tumble 14s linear infinite;
}
.asteroid-crater{position:absolute;border-radius:50%;background:rgba(0,0,0,0.24);box-shadow:inset 2px 2px 4px rgba(0,0,0,0.4);}
.asteroid-crater-1{width:18px;height:18px;top:30%;left:24%;}
.asteroid-crater-2{width:11px;height:11px;top:54%;left:58%;}
.asteroid-crater-3{width:8px;height:8px;top:24%;left:62%;}
.asteroid-debris{position:absolute;width:6px;height:6px;border-radius:50%;background:#8a7c6d;box-shadow:0 0 6px rgba(244,162,60,0.6);}
.asteroid-debris-1{top:18%;left:30%;animation:asteroid-drift 5s ease-in-out infinite;}
.asteroid-debris-2{top:64%;left:70%;width:4px;height:4px;animation:asteroid-drift 6.5s ease-in-out infinite reverse;}
.asteroid-debris-3{top:34%;left:74%;width:5px;height:5px;animation:asteroid-drift 8s ease-in-out infinite;}
.asteroid-word-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.asteroid-word{font-family:var(--font-display);font-size:1.95rem;line-height:1.1;color:var(--text-color);margin:0;}
.asteroid-icon-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--card-border);background:var(--card-bg);color:var(--accent-hover);cursor:pointer;font-size:0.85rem;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;}
.asteroid-icon-btn:hover{background:var(--accent);border-color:var(--accent);color:#2d2010;transform:translateY(-1px);}
.asteroid-translation{color:var(--text-muted);font-size:0.95rem;margin:0;}
.asteroid-stat{color:var(--text-muted);font-size:0.82rem;margin:0;max-width:38ch;line-height:1.3;}
.asteroid-label-row{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:2px;}
.asteroid-label{font-weight:600;color:var(--text-color);font-size:0.85rem;text-align:left;}
.asteroid-input {
    width:100%;
    padding:11px 14px;
    border:2px solid var(--card-border);
    border-radius:12px;
    font-size:1rem;
    font-family:inherit;
    background:var(--card-bg);
    color:var(--text-color);
    text-align:center;
}
.asteroid-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}
.asteroid-counter{font-size:0.72rem;color:var(--text-muted);flex-shrink:0;}
.asteroid-submit-btn {
    margin-top:2px;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:var(--accent);
    color:#2d2010;
    border:none;
}
.asteroid-submit-btn:hover{background:var(--accent-hover);color:#2d2010;}
.asteroid-key{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,0.18);font-size:0.8rem;}
.fc-anchor-chip{display:inline-flex;align-items:center;gap:7px;margin:12px auto 0;padding:7px 14px;border:1.5px dashed var(--accent);border-radius:999px;background:var(--accent-glow);color:var(--accent-hover);font-size:0.9rem;font-weight:600;cursor:pointer;max-width:100%;transition:background 0.2s;}
.fc-anchor-chip:hover{background:rgba(244,162,60,0.22);}
.fc-anchor-chip.revealed{cursor:default;border-style:solid;text-align:left;line-height:1.35;}
.belt-drill-tag {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--warning);
    margin-bottom:8px;
}
.belt-drill-word{display:block;}
.asteroid-mode .floating-icon{color:rgba(150,120,90,0.5);}

/* Asteroid dictionary-details modal */
.asteroid-detail-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,16,30,0.55);backdrop-filter:blur(3px);}
.asteroid-detail-modal.hidden{display:none;}
.asteroid-detail-card {
    position:relative;
    width:100%;
    max-width:440px;
    max-height:80vh;
    overflow-y:auto;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:22px 24px;
    box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.asteroid-detail-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:var(--card-border);color:var(--text-color);cursor:pointer;font-size:1rem;}
.asteroid-detail-loading{text-align:center;color:var(--text-muted);padding:24px 0;}
.asteroid-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.asteroid-detail-word{font-family:var(--font-display);font-size:1.7rem;margin:0;color:var(--text-color);}
.asteroid-detail-ipa{color:var(--text-muted);font-size:1rem;}
.asteroid-detail-empty{color:var(--text-muted);}
.asteroid-detail-pos{margin-bottom:14px;}
.asteroid-detail-pos h4{margin:0 0 6px;color:var(--accent-hover);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;}
.asteroid-detail-pos ul{margin:0;padding-left:18px;}
.asteroid-detail-sense{margin-bottom:8px;color:var(--text-color);font-weight:600;}
.asteroid-detail-ex{margin-top:3px;color:var(--text-muted);font-weight:400;font-size:0.9rem;}
.asteroid-detail-mnemonic{display:flex;align-items:flex-start;gap:8px;margin-top:6px;padding:10px 14px;border-radius:12px;background:var(--accent-glow);border:1px solid var(--accent);color:var(--text-color);font-size:0.9rem;font-weight:600;line-height:1.4;}
.asteroid-detail-mnemonic i{color:var(--accent-hover);margin-top:2px;}

@keyframes asteroid-tumble{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes asteroid-aura{0%,100%{transform:scale(0.92);opacity:0.7;}50%{transform:scale(1.08);opacity:1;}}
@keyframes asteroid-drift{0%,100%{transform:translate(0,0);}50%{transform:translate(8px,-6px);}}
@media (prefers-reduced-motion:reduce){
.asteroid-rock,.asteroid-stage::before,.asteroid-debris{animation:none;}
.warp-loading-fill{width:100%;transform:none;animation:warpLoadPulse 1.4s ease-in-out infinite;}
}