/* ========================================
   星际程序员 - 主样式文件
   ======================================== */

/* CSS Variables */
:root {
    --space-dark: #0a0e17;
    --space-mid: #1a1f2e;
    --space-light: #252b3d;
    --neon-cyan: #00f5ff;
    --neon-pink: #ff00aa;
    --neon-green: #00ff88;
    --warning-yellow: #ffd700;
    --error-red: #ff4757;
    --text-primary: #e8e8e8;
    --text-muted: #7a8599;
    --text-dim: #4a5568;
    
    --font-title: 'Orbitron', 'Rajdhani', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-cn: 'Noto Sans SC', 'PingFang SC', sans-serif;
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    
    --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-cn);
    background: var(--space-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Selection */
::selection {
    background: var(--neon-cyan);
    color: var(--space-dark);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--space-mid);
}

::-webkit-scrollbar-thumb {
    background: var(--space-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

/* ========================================
   星空背景
   ======================================== */
.public-home{position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:28px;max-width:1160px;margin:12px auto 48px;padding:56px 64px;overflow:hidden;border:1px solid rgba(116,174,255,.2);border-radius:28px;background:radial-gradient(ellipse at 78% 50%,rgba(24,83,143,.28),transparent 48%),linear-gradient(120deg,rgba(12,22,43,.96),rgba(12,19,37,.88));box-shadow:0 24px 90px rgba(0,0,0,.26)}
.public-home-copy{position:relative;z-index:1}.public-eyebrow{color:#62dfff;font:700 11px var(--font-mono);letter-spacing:.18em}.public-home h1{max-width:680px;margin:18px 0;font-size:clamp(34px,5vw,58px);line-height:1.2;letter-spacing:-.04em}.public-home h1 span{display:block;color:#70dfff}.public-home-copy>p:not(.public-eyebrow){max-width:580px;color:#aab8cd;font-size:16px;line-height:1.9}.public-home-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}.public-home-facts{display:flex;flex-wrap:wrap;gap:27px;color:#95a5bc;font-size:12px}.public-home-facts b{display:block;color:#e8f8ff;font:700 18px var(--font-mono)}.public-home-art{position:relative;min-height:310px;display:grid;place-items:center}.public-home-art img{position:relative;z-index:1;width:min(78%,300px);filter:drop-shadow(0 0 35px rgba(0,197,255,.3));animation:homeFloat 5s ease-in-out infinite}.home-orbit{position:absolute;width:310px;height:120px;border:1px solid rgba(66,207,255,.24);border-radius:50%;transform:rotate(-24deg)}.home-orbit-a{box-shadow:0 0 35px rgba(0,197,255,.12)}.home-orbit-b{transform:rotate(47deg) scale(.8);border-color:rgba(152,116,255,.22)}.home-art-label{position:absolute;right:4%;bottom:8%;color:rgba(132,215,255,.76);font:10px/1.8 var(--font-mono);letter-spacing:.1em}.public-section-heading{max-width:1120px;margin:0 auto 20px;display:flex;align-items:end;justify-content:space-between;gap:20px;text-align:left}.public-section-heading h2{margin-top:6px;font-size:24px}.public-section-heading>span{max-width:410px;color:#8997ab;font-size:13px;text-align:right}.admin-screen{max-width:1180px;margin:0 auto;padding:36px 22px 70px}.admin-heading,.admin-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.admin-heading h1{margin:6px 0;font-size:32px}.admin-heading p:last-child,.admin-panel-heading p{color:#8594a9;font-size:13px}.admin-nav{display:flex;gap:8px;margin:32px 0 20px;padding:6px;border:1px solid rgba(125,157,204,.14);border-radius:12px;background:rgba(18,27,44,.7)}.admin-tab{padding:10px 18px;border:0;border-radius:8px;background:transparent;color:#9aabc2;cursor:pointer}.admin-tab.active{background:rgba(37,164,218,.16);color:#72dfff}.admin-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.admin-metric,.admin-panel,.admin-course{border:1px solid rgba(125,157,204,.16);border-radius:14px;background:rgba(17,26,43,.82)}.admin-metric{padding:20px}.admin-metric span,.admin-metric small{display:block;color:#91a1b9;font-size:12px}.admin-metric strong{display:block;margin:14px 0;color:#ecf7ff;font:700 32px var(--font-mono)}.admin-panel{margin-top:18px;padding:22px}.admin-panel h2{font-size:18px}.admin-table-wrap{overflow-x:auto;margin-top:16px}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th,td{padding:12px 10px;border-bottom:1px solid rgba(125,157,204,.12);white-space:nowrap}th{color:#8293aa;font-weight:500}td{color:#c9d4e4}.admin-status{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px}.admin-status.is-active{background:rgba(51,200,145,.12);color:#67e0ae}.admin-status.is-disabled{background:rgba(255,120,120,.12);color:#ff9b9b}.admin-action{padding:6px 12px;border:1px solid rgba(90,192,255,.3);border-radius:7px;background:rgba(36,134,191,.12);color:#80d8ff;cursor:pointer}.admin-course-list{display:grid;gap:12px}.admin-course{display:flex;align-items:center;gap:16px;padding:16px}.admin-course-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:rgba(52,173,228,.15);color:#83dfff;font-size:20px}.admin-course-copy{flex:1}.admin-course-copy h2{margin:5px 0;font-size:16px}.admin-course-copy p,.admin-course-copy small{color:#91a1b9;font-size:12px}.account-modal{position:relative;width:min(100%,460px);padding:32px;border:1px solid rgba(105,186,255,.26);border-radius:18px;background:#111b2e;box-shadow:0 25px 90px #000a}.account-modal h2{margin:8px 0 20px}.account-close{position:absolute;top:12px;right:15px;border:0;background:none;color:#9aabc2;font-size:26px;cursor:pointer}.account-mode{display:flex;gap:8px;margin-bottom:14px}.account-mode button{flex:1;padding:9px;border:1px solid rgba(125,157,204,.18);border-radius:8px;background:transparent;color:#94a3b8;cursor:pointer}.account-mode button.active{border-color:#34b9e8;color:#73ddff}.account-fields{display:grid;gap:12px}.account-fields label,.account-modal form>label{display:grid;gap:6px;color:#b4c3d7;font-size:12px}.account-fields input,.account-fields select,.account-modal input{width:100%;padding:10px 12px;border:1px solid rgba(125,157,204,.24);border-radius:8px;outline:none;background:#0b1424;color:#eef6ff}.account-fields input:focus,.account-modal input:focus{border-color:#40c4ec}.account-note,.account-current{margin:14px 0;color:#8594a9;font-size:12px}.account-modal .btn{width:100%;margin-top:8px}.account-error{min-height:18px;margin-top:10px;color:#ff9393;font-size:12px}.admin-empty,.admin-loading{padding:22px;color:#8494ab;text-align:center}@keyframes homeFloat{50%{transform:translateY(-9px)}}
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1b2838 0%, #0a0e17 100%);
    overflow: hidden;
}

.starfield::before,
.starfield::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 370px 50px, #fff, transparent),
        radial-gradient(2px 2px at 450px 180px, rgba(255,255,255,0.8), transparent);
    background-repeat: repeat;
    background-size: 500px 200px;
    animation: starMove 60s linear infinite;
}

.starfield::after {
    background-size: 700px 300px;
    animation: starMove 90s linear infinite reverse;
    opacity: 0.5;
}

@keyframes starMove {
    from { transform: translateY(0); }
    to { transform: translateY(-200px); }
}

/* ========================================
   主容器布局
   ======================================== */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   顶部导航
   ======================================== */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 245, 255, 0.2);
    gap: 20px;
}

.nav-actions {
    display: flex;
    gap: 15px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    animation: float 3s ease-in-out infinite;
}

.logo-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.logo-text {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-status {
    display: flex;
    align-items: center;
    gap: 30px;
}

.progress-indicator {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-mono);
}

.level-label {
    color: var(--text-muted);
    font-size: 12px;
}

.level-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--neon-cyan);
    text-shadow: var(--shadow-glow);
}

.level-total {
    color: var(--text-muted);
    font-size: 14px;
}

.ship-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: var(--space-mid);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 245, 255, 0.3);
}

.ship-system-icon { display: block; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(0, 221, 255, .35)); }

.ship-name {
    color: var(--text-muted);
    font-size: 14px;
}

.ship-health {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--neon-green);
}

/* ========================================
   主内容区
   ======================================== */
.main-content {
    flex: 1;
    display: flex;
    padding: 30px 0;
}

/* 屏幕切换 */
.screen {
    display: none;
    width: 100%;
}

.screen.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

/* 挑战和测验界面必须用flex，覆盖默认block */
.screen-challenge.active,
.screen-quiz.active {
    display: flex !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   启动界面 - 全屏无滚动条
   ======================================== */
.screen-start {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;         /* 固定全屏，脱离文档流 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 120px 24px 60px; /* 顶部增加内边距，避开导航栏 */
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 10;
}

.screen-start.active {
    display: flex !important;
}

.start-content {
    text-align: center;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;             /* 更大的区块间距 */
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.main-title {
    font-family: var(--font-title);
    font-size: clamp(32px, 6vw, 56px);  /* 响应式，最大56px */
    font-weight: 900;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 6px;
    margin: 0;
    text-shadow:
        0 0 10px var(--neon-cyan),
        0 0 30px rgba(0, 245, 255, 0.5),
        0 0 50px rgba(0, 245, 255, 0.3);
    line-height: 1.2;
}

.subtitle {
    font-family: var(--font-mono);
    font-size: clamp(12px, 2vw, 18px);
    color: var(--text-muted);
    letter-spacing: 6px;
    margin: 0;
    font-weight: 500;
}

/* 飞船区域 - 紧凑 */
.ship-visual {
    margin: 8px 0;
    display: flex;
    justify-content: center;
}

.spaceship {
    width: clamp(120px, 18vw, 180px);
    height: auto;
    filter: drop-shadow(0 0 25px rgba(0, 245, 255, 0.5));
    animation: shipFloat 3s ease-in-out infinite;
}

@keyframes shipFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

/* 故事简介 - 紧凑 */
.start-info {
    /* gap 控制间距 */
}

.story-intro {
    font-size: clamp(13px, 1.8vw, 15px);
    line-height: 1.6;
    color: var(--text-primary);
}

.highlight {
    color: var(--neon-cyan);
    font-weight: 700;
}

/* ========================================
   主题选择器 - 双主题卡片（大卡片+图标版）
   ======================================== */
.theme-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto 0;
    justify-content: center;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    background: rgba(15, 22, 36, 0.85);
    backdrop-filter: blur(10px);
    height: 280px;
    width: calc(25% - 15px);
}

/* 卡片悬浮光效层 */
.theme-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle at 30% 30%, var(--glow-color, transparent) 0%, transparent 60%);
    pointer-events: none;
}

.theme-space .theme-card-glow {
    --glow-color: rgba(0, 245, 255, 0.08);
}

.theme-ai .theme-card-glow {
    --glow-color: rgba(168, 85, 247, 0.1);
}

.theme-turtle .theme-card-glow {
    --glow-color: rgba(34, 197, 94, 0.1);
}

.theme-algorithm .theme-card-glow {
    --glow-color: rgba(139, 92, 246, 0.1);
}

.theme-game .theme-card-glow {
    --glow-color: rgba(234, 179, 8, 0.1);
}

.theme-data .theme-card-glow {
    --glow-color: rgba(59, 130, 246, 0.1);
}

.theme-algorithm-advanced .theme-card-glow {
    --glow-color: rgba(236, 72, 153, 0.1);
}

/* 星际程序员主题卡 */
.theme-space {
    border: 2px solid rgba(0, 245, 255, 0.18);
    box-shadow:
        0 0 40px rgba(0, 180, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-space:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--neon-cyan);
    box-shadow:
        0 20px 60px rgba(0, 245, 255, 0.2),
        0 0 80px rgba(0, 150, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-space:hover .theme-card-glow { opacity: 1; }

.theme-space:hover .theme-icon-lg {
    animation: iconFloatSpace 0.6s ease infinite alternate;
}

/* AI探险家主题卡 */
.theme-ai {
    border: 2px solid rgba(138, 43, 226, 0.2);
    box-shadow:
        0 0 40px rgba(138, 43, 226, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-ai:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #a855f7;
    box-shadow:
        0 20px 60px rgba(168, 85, 247, 0.25),
        0 0 80px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-ai:hover .theme-card-glow { opacity: 1; }

.theme-ai:hover .theme-icon-lg {
    animation: iconPulseAI 0.7s ease infinite alternate;
}

/* 海龟绘图师主题卡 */
.theme-turtle {
    border: 2px solid rgba(34, 197, 94, 0.18);
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-turtle:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #22c55e;
    box-shadow:
        0 20px 60px rgba(34, 197, 94, 0.2),
        0 0 80px rgba(34, 197, 94, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-turtle:hover .theme-card-glow { opacity: 1; }

.theme-turtle:hover .theme-icon-lg {
    animation: iconWiggle 0.5s ease infinite alternate;
}

/* 游戏开发工程师主题卡 */
.theme-game {
    border: 2px solid rgba(234, 179, 8, 0.18);
    box-shadow:
        0 0 40px rgba(234, 179, 8, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-game:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #eab308;
    box-shadow:
        0 20px 60px rgba(234, 179, 8, 0.2),
        0 0 80px rgba(234, 179, 8, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-game:hover .theme-card-glow { opacity: 1; }

.theme-game:hover .theme-icon-lg {
    animation: iconBounce 0.5s ease infinite alternate;
}

/* 数据小侦探主题卡 */
.theme-data {
    border: 2px solid rgba(59, 130, 246, 0.18);
    box-shadow:
        0 0 40px rgba(59, 130, 246, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-data:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #3b82f6;
    box-shadow:
        0 20px 60px rgba(59, 130, 246, 0.2),
        0 0 80px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-data:hover .theme-card-glow { opacity: 1; }

.theme-data:hover .theme-icon-lg {
    animation: iconSearch 0.6s ease infinite alternate;
}

@keyframes iconFloatSpace {
    from { transform: translateY(0) rotate(-3deg); }
    to { transform: translateY(-14px) rotate(3deg); }
}

@keyframes iconPulseAI {
    from { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(168,85,247,0.4)); }
    to { transform: scale(1.12) rotate(5deg); filter: drop-shadow(0 0 28px rgba(168,85,247,0.7)); }
}

@keyframes iconWiggle {
    from { transform: rotate(-8deg); }
    to { transform: rotate(8deg); }
}

@keyframes iconBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

@keyframes iconSearch {
    from { transform: scale(1) rotate(-5deg); }
    to { transform: scale(1.1) rotate(5deg); }
}

/* 图标容器 - 大圆形背景 */
.theme-icon-wrap {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 12px;
    transition: all 0.4s ease;
}

.theme-space .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(0, 140, 255, 0.15), rgba(0, 245, 255, 0.08));
    border: 2px solid rgba(0, 245, 255, 0.2);
    box-shadow:
        0 0 30px rgba(0, 200, 255, 0.1),
        inset 0 0 20px rgba(0, 200, 255, 0.05);
}

.theme-ai .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(168, 85, 247, 0.08));
    border: 2px solid rgba(168, 85, 247, 0.25);
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.12),
        inset 0 0 20px rgba(168, 85, 247, 0.05);
}

.theme-turtle .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 2px solid rgba(34, 197, 94, 0.25);
    box-shadow:
        0 0 30px rgba(34, 197, 94, 0.12),
        inset 0 0 20px rgba(34, 197, 94, 0.05);
}

.theme-algorithm .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    border: 2px solid rgba(139, 92, 246, 0.25);
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.12),
        inset 0 0 20px rgba(139, 92, 246, 0.05);
}

.theme-game .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(250, 204, 21, 0.08));
    border: 2px solid rgba(234, 179, 8, 0.25);
    box-shadow:
        0 0 30px rgba(234, 179, 8, 0.12),
        inset 0 0 20px rgba(234, 179, 8, 0.05);
}

.theme-data .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    border: 2px solid rgba(59, 130, 246, 0.25);
    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.12),
        inset 0 0 20px rgba(59, 130, 246, 0.05);
}

.theme-algorithm-advanced .theme-icon-wrap {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.08));
    border: 2px solid rgba(236, 72, 153, 0.25);
    box-shadow:
        0 0 30px rgba(236, 72, 153, 0.12),
        inset 0 0 20px rgba(236, 72, 153, 0.05);
}

.theme-space:hover .theme-icon-wrap {
    border-color: var(--neon-cyan);
    box-shadow:
        0 0 45px rgba(0, 220, 255, 0.25),
        inset 0 0 25px rgba(0, 220, 255, 0.1);
}

.theme-ai:hover .theme-icon-wrap {
    border-color: #c084fc;
    box-shadow:
        0 0 45px rgba(168, 85, 247, 0.3),
        inset 0 0 25px rgba(168, 85, 247, 0.1);
}

.theme-turtle:hover .theme-icon-wrap {
    border-color: #4ade80;
    box-shadow:
        0 0 45px rgba(34, 197, 94, 0.3),
        inset 0 0 25px rgba(34, 197, 94, 0.1);
}

.theme-algorithm:hover .theme-icon-wrap {
    border-color: #a78bfa;
    box-shadow:
        0 0 45px rgba(139, 92, 246, 0.3),
        inset 0 0 25px rgba(139, 92, 246, 0.1);
}

.theme-game:hover .theme-icon-wrap {
    border-color: #facc15;
    box-shadow:
        0 0 45px rgba(234, 179, 8, 0.3),
        inset 0 0 25px rgba(234, 179, 8, 0.1);
}

/* 算法小能手主题卡 */
.theme-algorithm {
    border: 2px solid rgba(139, 92, 246, 0.18);
    box-shadow:
        0 0 40px rgba(139, 92, 246, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-algorithm:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #a78bfa;
    box-shadow:
        0 20px 60px rgba(139, 92, 246, 0.25),
        0 0 80px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-algorithm:hover .theme-card-glow { opacity: 1; }

/* 算法达人主题卡 */
.theme-algorithm-advanced {
    border: 2px solid rgba(236, 72, 153, 0.18);
    box-shadow:
        0 0 40px rgba(236, 72, 153, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.theme-algorithm-advanced:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #ec4899;
    box-shadow:
        0 20px 60px rgba(236, 72, 153, 0.25),
        0 0 80px rgba(236, 72, 153, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-algorithm-advanced:hover .theme-card-glow { opacity: 1; }

.theme-algorithm:hover .theme-icon-lg {
    animation: iconPuzzle 0.6s ease infinite alternate;
}

@keyframes iconPuzzle {
    from { transform: rotate(-5deg) scale(1); }
    to { transform: rotate(5deg) scale(1.1); }
}

.theme-icon-lg {
    font-size: 32px;
    line-height: 1;
    transition: all 0.35s ease;
    display: block;
}

.theme-name {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
}

.theme-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    letter-spacing: 0.3px;
}

/* 知识点标签组 */
.theme-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: 14px;
    width: 100%;
}

.theme-tags .tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(0, 245, 255, 0.07);
    border: 1px solid rgba(0, 245, 255, 0.15);
    border-radius: 12px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.theme-tags .tag i {
    font-style: normal;
    font-size: 13px;
}

.theme-tags .tag-ai {
    color: #c4b5fd;
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.18);
}

.theme-tags .tag-turtle {
    color: #86efac;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.18);
}

.theme-tags .tag-data {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.18);
}

.theme-tags .tag-algorithm {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.18);
}

.theme-tags .tag-game {
    color: #fde047;
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.18);
}

.theme-tags .tag-algorithm-advanced {
    color: #f9a8d4;
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.18);
}

.theme-tags .tag:hover {
    transform: translateY(-2px);
    border-color: currentColor;
}

.btn-theme {
    width: 100%;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.3px;
    margin-top: auto; /* 推到底部 */
}

.btn-theme-space {
    background: linear-gradient(135deg, #0066ff, #00c6ff);
    color: white;
    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.35);
}

.btn-theme-space:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(0, 102, 255, 0.55);
}

.btn-theme-ai {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.35);
}

.btn-theme-ai:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(124, 58, 237, 0.55);
}

.btn-theme-turtle {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.35);
}

.btn-theme-turtle:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(34, 197, 94, 0.55);
}

.btn-theme-data {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: white;
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35);
}

.btn-theme-data:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(59, 130, 246, 0.55);
}

.btn-theme-algorithm {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: white;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.35);
}

.btn-theme-algorithm:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(139, 92, 246, 0.55);
}

.btn-theme-algorithm-advanced {
    background: linear-gradient(135deg, #db2777, #ec4899);
    color: white;
    box-shadow: 0 6px 24px rgba(236, 72, 153, 0.35);
}

.btn-theme-algorithm-advanced:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(236, 72, 153, 0.55);
}

.btn-theme-game {
    background: linear-gradient(135deg, #ca8a04, #eab308);
    color: white;
    box-shadow: 0 6px 24px rgba(234, 179, 8, 0.35);
}

.btn-theme-game:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 36px rgba(234, 179, 8, 0.55);
}

.start-hint {
    font-size: 12.5px;
    color: var(--text-dim);
    opacity: 0.65;
    margin-top: 20px;
    letter-spacing: 0.3px;
}

.story-intro {
    font-size: clamp(13px, 1.8vw, 15px);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.story-intro .highlight {
    color: var(--neon-pink);
    font-weight: 700;
}

/* 启动按钮 */
.btn-primary.btn-large {
    margin-top: auto;        /* 推到底部 */
}

/* ========================================
   关卡选择界面
   ======================================== */
.screen-levels {
    display: none;
}

.screen-levels.active {
    display: block;
}

.levels-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.levels-header .btn-ghost {
    flex-shrink: 0;
    width: auto;
}

.levels-header .section-title {
    flex: 1;
    text-align: center;
}

.levels-header .level-stats {
    flex-shrink: 0;
}

.section-title {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--neon-cyan);
}

.level-stats {
    display: flex;
    gap: 20px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--space-mid);
    border-radius: var(--radius-lg);
    font-size: 14px;
}

.stat-icon {
    color: var(--neon-green);
}

.stat-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--neon-cyan);
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* 飞船蓝图 */
.ship-blueprint {
    background: var(--space-mid);
    border-radius: var(--radius-lg);
    padding: 25px;
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.ship-blueprint h3 {
    font-family: var(--font-title);
    font-size: 16px;
    color: var(--neon-cyan);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ship-systems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.system-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.system-name {
    font-size: 13px;
    color: var(--text-muted);
}

.system-bar {
    height: 8px;
    background: var(--space-dark);
    border-radius: 4px;
    overflow: hidden;
}

.system-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
    border-radius: 4px;
    transition: width 0.8s ease;
}

/* ========================================
   底部导航
   ======================================== */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 245, 255, 0.05);
    border: 1px solid rgba(0, 245, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

.nav-btn:hover {
    background: rgba(0, 245, 255, 0.1);
    border-color: rgba(0, 245, 255, 0.3);
}

.nav-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.nav-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px rgba(0, 215, 255, .24)); }

.nav-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* ========================================
   Toast 通知
   ======================================== */
.toast-container {
    position: fixed;
    bottom: 100px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.toast {
    padding: 15px 25px;
    background: var(--space-mid);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--neon-cyan);
    box-shadow: var(--shadow-card);
    animation: slideIn 0.3s ease;
    max-width: 350px;
}

.toast.success {
    border-left-color: var(--neon-green);
}

.toast.error {
    border-left-color: var(--error-red);
}

.toast.warning {
    border-left-color: var(--warning-yellow);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========================================
   工具函数
   ======================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ========================================
   小测验界面
   ======================================== */
.screen-quiz {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(135deg, var(--space-dark) 0%, #0d1420 100%);
    padding: 40px 20px;
    overflow-y: auto;
}

.screen-quiz.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.quiz-container {
    width: 100%;
    max-width: 700px;
    background: var(--space-mid);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 245, 255, 0.2);
    padding: 40px;
    box-shadow: var(--shadow-card);
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.quiz-badge {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));
    color: var(--space-dark);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
}

.quiz-progress {
    color: var(--text-muted);
    font-size: 14px;
}

.quiz-title {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--neon-cyan);
    margin-bottom: 30px;
    text-align: center;
}

.quiz-content {
    margin-bottom: 30px;
}

.quiz-question {
    background: var(--space-dark);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-bottom: 25px;
}

.question-text {
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.6;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: var(--space-light);
    border: 2px solid rgba(0, 245, 255, 0.2);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: left;
}

.quiz-option:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 245, 255, 0.1);
}

.quiz-option.selected {
    border-color: var(--neon-cyan);
    background: rgba(0, 245, 255, 0.15);
}

.quiz-option.correct {
    border-color: var(--neon-green);
    background: rgba(0, 255, 136, 0.15);
}

.quiz-option.wrong {
    border-color: var(--error-red);
    background: rgba(255, 71, 87, 0.15);
}

.option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--space-dark);
    border-radius: 50%;
    font-weight: 600;
    color: var(--neon-cyan);
    font-size: 14px;
}

.quiz-option.correct .option-letter {
    background: var(--neon-green);
    color: var(--space-dark);
}

.quiz-option.wrong .option-letter {
    background: var(--error-red);
    color: white;
}

.option-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 16px;
}

.quiz-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 245, 255, 0.1);
}

/* ========================================
   分步教学样式
   ======================================== */

/* 步骤进度 */
.step-progress {
    margin-bottom: 20px;
}

.progress-bar {
    height: 6px;
    background: var(--space-dark);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* 步骤标题 */
.step-title {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--neon-cyan);
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* 学习内容区 */
.learn-content {
    background: var(--space-dark);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    line-height: 1.8;
}

.learn-content p {
    margin-bottom: 15px;
}

.learn-content ul, .learn-content ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.learn-content li {
    margin-bottom: 8px;
}

.learn-content code {
    background: rgba(0, 245, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--neon-cyan);
}

.learn-content strong {
    color: var(--neon-green);
}

.learn-content table {
    width: 100%;
    margin: 15px 0;
}

/* 示例代码区 */
.example-box {
    background: var(--space-dark);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.example-box h4 {
    color: var(--neon-cyan);
    margin-bottom: 15px;
    font-size: 14px;
}

.example-code {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: var(--radius-md);
    color: var(--neon-green);
    font-family: var(--font-mono);
    font-size: 14px;
    overflow-x: auto;
    margin-bottom: 15px;
}

.example-output {
    background: rgba(0, 255, 136, 0.05);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

.example-output pre {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
}

.example-explanation {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* 任务区 */
.task-box {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.task-box h4 {
    color: var(--warning-yellow);
    margin-bottom: 15px;
}

.task-content {
    line-height: 1.8;
}

.task-content strong {
    color: var(--neon-cyan);
}

/* 步骤导航 */
.step-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: var(--space-mid);
    border-top: 1px solid rgba(0, 245, 255, 0.2);
    z-index: 100;
}

.step-dots {
    display: flex;
    gap: 8px;
}

.step-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--space-dark);
    border: 1px solid rgba(0, 245, 255, 0.3);
    cursor: pointer;
    transition: var(--transition-normal);
}

.step-dots .dot:hover {
    border-color: var(--neon-cyan);
}

.step-dots .dot.current {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
}

.step-dots .dot.completed {
    background: var(--neon-green);
    border-color: var(--neon-green);
}

/* 情境导入弹窗 */
.intro-modal {
    text-align: center;
    padding: 20px;
}

.intro-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.intro-title {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--neon-cyan);
    margin-bottom: 20px;
}

.intro-content {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 成功输出 */
.output-success {
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ========================================
   教学详细内容样式
   ======================================== */

/* 标题 */
.learn-content h3 {
    color: var(--neon-cyan);
    font-size: 18px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 245, 255, 0.2);
}

.learn-content h3:first-child {
    margin-top: 0;
}

.learn-content h4 {
    color: var(--neon-green);
    font-size: 15px;
    margin: 15px 0 10px 0;
}

/* 段落和列表 */
.learn-content p {
    margin: 10px 0;
    line-height: 1.7;
}

.learn-content ul, .learn-content ol {
    margin: 10px 0 15px 25px;
}

.learn-content li {
    margin: 6px 0;
    line-height: 1.6;
}

/* 代码和pre */
.learn-content code {
    background: rgba(0, 245, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--neon-cyan);
    font-family: var(--font-mono);
    font-size: 13px;
}

.learn-content pre {
    background: var(--space-dark);
    padding: 15px;
    border-radius: var(--radius-md);
    margin: 10px 0;
    overflow-x: auto;
    border-left: 3px solid var(--neon-cyan);
}

.learn-content pre code {
    background: transparent;
    padding: 0;
    color: var(--neon-green);
}

/* 表格 */
.learn-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 14px;
}

.learn-content table th {
    background: rgba(0, 245, 255, 0.1);
    color: var(--neon-cyan);
    padding: 10px 12px;
    text-align: left;
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.learn-content table td {
    padding: 10px 12px;
    border: 1px solid rgba(0, 245, 255, 0.1);
    vertical-align: top;
}

.learn-content table tr:hover {
    background: rgba(0, 245, 255, 0.05);
}

/* 提示框 */
.tip-box {
    background: rgba(0, 245, 255, 0.08);
    border-left: 4px solid var(--neon-cyan);
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.tip-box strong {
    color: var(--neon-cyan);
}

.warning-box {
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid var(--warning-yellow);
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.warning-box strong {
    color: var(--warning-yellow);
}

.success-box {
    background: rgba(0, 255, 136, 0.1);
    border-left: 4px solid var(--neon-green);
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.success-box strong {
    color: var(--neon-green);
}

/* 任务内容中的pre */
.task-content pre {
    background: var(--space-dark);
    padding: 12px;
    border-radius: var(--radius-md);
    margin: 10px 0;
    font-size: 13px;
}

.task-content strong {
    color: var(--warning-yellow);
}

/* 代码语法高亮 */
.code-string {
    color: #98c379;
}

.code-keyword {
    color: #c678dd;
}

.code-comment {
    color: #5c6370;
    font-style: italic;
}

/* 示例代码框 */
.example-code {
    background: var(--space-dark);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.example-code h4 {
    color: var(--neon-cyan);
    margin-bottom: 15px;
    font-size: 14px;
}

.example-code pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: var(--radius-md);
    color: var(--neon-green);
    font-family: var(--font-mono);
    font-size: 14px;
    overflow-x: auto;
    margin-bottom: 15px;
    line-height: 1.5;
}

.example-output {
    background: rgba(0, 255, 136, 0.05);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

.example-output pre {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    background: transparent;
    padding: 0;
}

.example-explanation {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* 学习内容样式增强 */
.learn-content {
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 0;
    line-height: 1.8;
}

.learn-content::-webkit-scrollbar {
    width: 8px;
}

.learn-content::-webkit-scrollbar-track {
    background: var(--space-dark);
    border-radius: 4px;
}

.learn-content::-webkit-scrollbar-thumb {
    background: rgba(0, 245, 255, 0.3);
    border-radius: 4px;
}

.learn-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 245, 255, 0.5);
}

/* Mission manual course selection */
.screen-start {
    padding-top: 88px;
    padding-bottom: 40px;
}

.start-content {
    width: min(100%, 1280px);
    gap: 20px;
}

.title-container {
    margin-bottom: 8px;
    gap: 8px;
}

.title-container::before {
    content: 'STARDUST ACADEMY  /  FIELD MANUAL  07';
    color: #b9a77c;
    font: 600 10px/1.4 var(--font-mono);
    letter-spacing: 2.5px;
}

.main-title {
    color: #f1e5c7;
    text-shadow: 0 0 24px rgba(104, 142, 178, .3);
    letter-spacing: 3px;
}

.title-container .main-title.glitch::before,
.title-container .main-title.glitch::after {
    display: none;
}

.subtitle {
    color: #97abc0;
    letter-spacing: 3px;
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1240px;
    margin-top: 12px;
}

.theme-card {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 314px;
    padding: 20px 18px 18px;
    align-items: flex-start;
    text-align: left;
    border: 1px solid rgba(218, 199, 151, .22);
    border-radius: 15px 15px 15px 5px;
    background:
        linear-gradient(145deg, rgba(24, 36, 54, .94), rgba(13, 20, 33, .97)),
        var(--space-mid);
    box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
    backdrop-filter: blur(12px);
}

.theme-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(212, 194, 151, .13);
    border-radius: 10px 10px 10px 3px;
    pointer-events: none;
}

.theme-card:hover {
    transform: translateY(-4px);
    border-color: var(--manual-accent, #74c9dd);
    box-shadow: 0 18px 34px rgba(0,0,0,.35), 0 0 24px color-mix(in srgb, var(--manual-accent, #74c9dd) 16%, transparent);
}

.theme-space { --manual-accent: #67d3e7; }
.theme-ai { --manual-accent: #bb9aff; }
.theme-turtle { --manual-accent: #8fc78b; }
.theme-game { --manual-accent: #e3bd68; }
.theme-data { --manual-accent: #83bfe4; }
.theme-algorithm { --manual-accent: #a696e7; }
.theme-algorithm-advanced { --manual-accent: #e38eae; }

.theme-icon-wrap {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--manual-accent, #74c9dd) 54%, transparent) !important;
    border-radius: 12px 12px 12px 4px;
    background: #111c2b !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.1) !important;
}

.theme-home-icon {
    display: block;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    object-fit: contain;
    transition: transform .25s ease, filter .25s ease;
}

.theme-card:hover .theme-home-icon {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
}

.theme-card:focus-visible .theme-icon-wrap {
    outline: 2px solid var(--manual-accent, #74c9dd);
    outline-offset: 3px;
}

.theme-name {
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    color: #f0e8d5;
    font-size: 17px;
}

.theme-subtitle {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #9babc0;
    font-size: 12px;
    letter-spacing: .2px;
}

.theme-tags {
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 14px;
}

.theme-tags .tag {
    padding: 3px 7px;
    color: #c2cbd5;
    font-size: 10px;
    background: rgba(189, 201, 213, .08);
    border: 1px solid rgba(189, 201, 213, .1);
}

.theme-tags .tag i { display: none; }

.theme-card .btn-theme {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    color: #f4ead4;
    background: rgba(222, 211, 184, .08);
    border: 1px solid color-mix(in srgb, var(--manual-accent, #74c9dd) 55%, transparent);
    box-shadow: none;
}

.theme-card .btn-theme:hover {
    background: color-mix(in srgb, var(--manual-accent, #74c9dd) 20%, #111b2b);
    box-shadow: 0 0 18px color-mix(in srgb, var(--manual-accent, #74c9dd) 18%, transparent);
}

.start-hint {
    margin-top: 0;
    color: #9babc0;
}

@media (max-width: 1100px) {
    .theme-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .screen-start { padding: 196px 16px 32px; }
    .theme-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .theme-card { min-height: 300px; padding: 16px; }
    .main-title { font-size: 34px; letter-spacing: 1px; }
}

@media (max-width: 480px) {
    .theme-selector { grid-template-columns: 1fr; }
    .theme-card { min-height: 0; }
}

.theme-card:focus-visible,
.level-card:focus-visible {
    outline: 2px solid #e4c981;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .theme-card,
    .theme-card-glow,
    .theme-icon-lg,
    .spaceship {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

@media(max-width:760px){.public-home{grid-template-columns:1fr;padding:34px 25px;gap:0}.public-home-art{min-height:220px}.public-home-art img{width:200px}.home-orbit{width:250px}.public-section-heading{align-items:start;flex-direction:column}.public-section-heading>span{text-align:left}.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-heading{align-items:start;flex-direction:column}.admin-course{align-items:start}.top-nav .nav-status{display:none}}@media(max-width:440px){.admin-metrics{grid-template-columns:1fr 1fr;gap:8px}.admin-metric{padding:13px}.admin-metric strong{font-size:25px}.account-modal{padding:27px 20px}.public-home-facts{gap:14px}.admin-tab{padding:9px 11px;font-size:12px}}

.theme-card.course-unavailable{opacity:.6;filter:saturate(.55)}.theme-card.course-unavailable .btn-theme{cursor:not-allowed;filter:grayscale(.4)}

/* 可交互的 3D 星火号主视觉 */
.vehicle-scene{isolation:isolate;perspective:1000px;touch-action:pan-y;user-select:none}
.vehicle-scene::before{content:"";position:absolute;inset:12% 8%;z-index:-2;border-radius:50%;background:radial-gradient(ellipse,rgba(0,197,255,.17),rgba(36,81,179,.07) 44%,transparent 72%);filter:blur(9px);animation:vehicleAura 4s ease-in-out infinite}
.vehicle-scene::after{content:"";position:absolute;inset:7% 2%;z-index:-1;opacity:.34;background-image:radial-gradient(circle,rgba(155,230,255,.9) 1px,transparent 1.6px);background-size:43px 39px;mask-image:radial-gradient(ellipse,black,transparent 68%);pointer-events:none}
.vehicle-model{position:relative;z-index:2;display:grid;place-items:center;width:min(83%,330px);padding:0;border:0;background:transparent;cursor:grab;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,-10deg)) translateZ(24px);transition:transform .18s ease,filter .3s ease;filter:drop-shadow(0 22px 17px rgba(0,0,0,.36)) drop-shadow(0 0 28px rgba(0,197,255,.35));animation:vehicleHover 5s ease-in-out infinite;outline:none}
.vehicle-model:active{cursor:grabbing}.vehicle-model:focus-visible{filter:drop-shadow(0 0 8px #5be6ff) drop-shadow(0 0 30px rgba(0,197,255,.5))}.vehicle-model img{display:block;width:100%;height:auto;pointer-events:none;transform:translateZ(18px)}
.vehicle-scene.is-dragging .vehicle-model{cursor:grabbing;animation:none;transition:none}.vehicle-scene.is-dragging{cursor:grabbing}.vehicle-scene.is-driving .vehicle-model{animation:vehicleDrive 1.5s cubic-bezier(.2,.75,.2,1) both,vehicleHover 5s ease-in-out 1.5s infinite}.vehicle-scene.is-driving .home-orbit{animation:vehicleOrbitFlash .55s ease-in-out 3}.vehicle-platform{position:absolute;z-index:0;left:20%;right:20%;bottom:15%;height:37px;border:1px solid rgba(66,207,255,.58);border-radius:50%;background:radial-gradient(ellipse,rgba(30,211,255,.3),rgba(21,106,190,.08) 50%,transparent 72%);box-shadow:0 0 30px rgba(0,198,255,.28),inset 0 0 20px rgba(48,195,255,.18);transform:rotateX(72deg);animation:platformPulse 3s ease-in-out infinite}
.vehicle-grid{position:absolute;z-index:-1;left:9%;right:9%;bottom:5%;height:80px;opacity:.24;background:linear-gradient(rgba(60,192,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(60,192,255,.35) 1px,transparent 1px);background-size:24px 18px;transform:perspective(150px) rotateX(62deg);mask-image:linear-gradient(transparent,black)}
.vehicle-hud{position:absolute;z-index:3;color:#b7eaff;font:10px var(--font-mono);letter-spacing:.08em;text-shadow:0 0 12px #25cfff}.vehicle-hud-top{top:4%;left:5%;display:flex;align-items:center;gap:8px}.hud-dot,.vehicle-status-light{width:7px;height:7px;border-radius:50%;background:#52ffca;box-shadow:0 0 10px #52ffca}.hud-coords{margin-left:9px;color:#7699b9}.hud-coords b{color:#70e2ff;font-weight:500}.vehicle-controls{position:absolute;z-index:4;left:5%;right:5%;bottom:1%;display:flex;align-items:center;justify-content:space-between;gap:8px}.vehicle-hint{color:#86a9c7;font:10px var(--font-mono);letter-spacing:.05em}.vehicle-reset{padding:7px 10px;border:1px solid rgba(101,206,255,.28);border-radius:999px;background:rgba(8,22,43,.72);color:#a9dffc;font:10px var(--font-cn);cursor:pointer;transition:.2s}.vehicle-reset:hover{border-color:#5be6ff;color:white;background:rgba(20,105,156,.35)}.vehicle-status{position:absolute;z-index:3;top:4%;right:5%;display:flex;align-items:center;gap:7px;color:#78eac6;font:9px var(--font-mono);letter-spacing:.08em}.vehicle-status-light{width:5px;height:5px}.vehicle-status.is-active .vehicle-status-light{background:#5be6ff;box-shadow:0 0 12px #25cfff}.vehicle-sparks{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}.vehicle-scene.is-driving .vehicle-sparks{opacity:1}.vehicle-sparks i{position:absolute;left:23%;top:53%;width:5px;height:5px;border-radius:50%;background:#baf7ff;box-shadow:0 0 12px 3px #37dfff;animation:sparkFly .72s ease-out infinite}.vehicle-sparks i:nth-child(2){left:33%;top:38%;animation-delay:.11s}.vehicle-sparks i:nth-child(3){left:65%;top:25%;animation-delay:.22s}.vehicle-sparks i:nth-child(4){left:77%;top:62%;animation-delay:.31s}.vehicle-sparks i:nth-child(5){left:42%;top:70%;animation-delay:.4s}.vehicle-sparks i:nth-child(6){left:57%;top:14%;animation-delay:.51s}
.vehicle-scene .home-art-label{z-index:3;right:3%;bottom:13%;font-size:8px;opacity:.68}
@keyframes vehicleHover{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes vehicleDrive{0%{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,-10deg)) translateX(0) translateZ(24px) scale(1)}35%{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,-10deg)) translateX(62px) translateZ(60px) scale(.88)}65%{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,-10deg)) translateX(62px) translateZ(60px) scale(.88)}100%{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,-10deg)) translateX(0) translateZ(24px) scale(1)}}
@keyframes vehicleAura{50%{opacity:.55;transform:scale(1.1)}}@keyframes platformPulse{50%{opacity:.5;scale:.88}}@keyframes vehicleOrbitFlash{50%{filter:drop-shadow(0 0 14px #4ce5ff);border-color:rgba(115,239,255,.85)}}@keyframes sparkFly{0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate3d(var(--spark-x,-35px),var(--spark-y,25px),30px) scale(0)}}
.vehicle-sparks i:nth-child(odd){--spark-x:-48px;--spark-y:26px}.vehicle-sparks i:nth-child(even){--spark-x:36px;--spark-y:-30px}
@media(max-width:760px){.vehicle-scene{min-height:250px}.vehicle-model{width:min(72%,260px)}.vehicle-platform{left:22%;right:22%;bottom:17%}.vehicle-controls{bottom:0}.vehicle-hud{font-size:9px}.vehicle-scene .home-art-label{bottom:15%}}
@media(prefers-reduced-motion:reduce){.vehicle-model,.vehicle-scene::before,.vehicle-platform,.vehicle-sparks i{animation:none!important}.vehicle-model{transition:none}}

.ship-status-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.ship-status-metrics article{padding:15px;border:1px solid rgba(125,157,204,.16);border-radius:10px;background:rgba(34,55,83,.35)}.ship-status-metrics span{display:block;color:#91a1b9;font-size:12px}.ship-status-metrics strong{display:block;margin-top:7px;color:#72dfff;font-size:20px}