:root {
    --primary-glow-color: #5eefff;
    --secondary-glow-color: #e879f9;
    --accent-cyan: #22d3ee;
    --accent-violet: #a78bfa;
    --accent-magenta: #f472b6;
    --accent-gold: #fcd34d;
    --bg-color: #050818;
    --bg-deep: #030510;
    --panel-bg: rgba(8, 14, 40, 0.92);
    --panel-border: rgba(94, 239, 255, 0.22);
    --card-bg: linear-gradient(155deg, rgba(18, 28, 72, 0.82) 0%, rgba(8, 14, 38, 0.88) 50%, rgba(12, 20, 52, 0.8) 100%);
    --text-color: #e8edf7;
    --muted-color: #8b9dc4;
    --success-color: #53ffa9;
    --warning-color: #fbbf24;
    --danger-color: #fb7185;
    --info-color: #38bdf8;
    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(94, 239, 255, 0.12);
    --shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.65);
    --font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    --font-display: 'Orbitron', 'Noto Sans SC', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(94, 239, 255, 0.14), transparent 55%),
        radial-gradient(ellipse 90% 60% at 100% 30%, rgba(167, 139, 250, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 70%, rgba(244, 114, 182, 0.08), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.06), transparent 40%),
        linear-gradient(180deg, var(--bg-color) 0%, var(--bg-deep) 55%, #02040f 100%);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
}

.app-shell {
    position: relative;
    z-index: 1;
}

a, button {
    font-family: inherit;
}

.mode-panel {
    display: none;
}

.mode-panel.active {
    display: block;
}

.home-panel {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* 主页：轻量氛围光（与 body 渐变呼应） */
.cosmic-home {
    position: relative;
}

.cosmic-home::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 15%, rgba(94, 239, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 35% at 85% 60%, rgba(232, 121, 249, 0.05), transparent 65%);
}

.stars {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

@keyframes move-stars {
    from { background-position-y: 0; }
    to { background-position-y: -10000px; }
}

#stars1 {
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(190, 230, 255, 0.9), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(200, 210, 255, 0.75), transparent),
        radial-gradient(2px 2px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(180, 220, 255, 0.95), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(232, 200, 255, 0.85), transparent);
    background-size: 200px 200px;
    animation: move-stars 200s linear infinite;
    opacity: 0.78;
}

#stars2 {
    background-image:
        radial-gradient(2px 2px at 50px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 100px 150px, rgba(167, 139, 250, 0.55), transparent),
        radial-gradient(3px 3px at 200px 60px, rgba(200, 240, 255, 0.95), transparent);
    background-size: 250px 250px;
    animation: move-stars 150s linear infinite;
    opacity: 0.55;
}

#stars3 {
    background-image:
        radial-gradient(3px 3px at 100px 100px, rgba(255, 250, 235, 0.75), transparent),
        radial-gradient(3px 3px at 250px 250px, rgba(94, 239, 255, 0.35), transparent);
    background-size: 350px 350px;
    animation: move-stars 100s linear infinite;
    opacity: 0.42;
}

.main-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    transition: opacity 0.5s ease;
}

.main-container.is-leaving {
    opacity: 0;
    transform: scale(0.98);
}

.game-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    letter-spacing: 0.5rem;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 12px var(--primary-glow-color), 0 0 30px rgba(0, 255, 255, 0.6);
}

.game-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeInDown 0.5s ease-out forwards;
    animation-delay: calc(0.1s * var(--i));
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-subtitle {
    font-size: 1.1rem;
    color: rgba(200, 214, 240, 0.88);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-shadow:
        0 0 20px rgba(94, 239, 255, 0.2),
        0 0 40px rgba(167, 139, 250, 0.12);
}

.mode-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: min(800px, 100%);
    max-width: 800px;
    margin: 0 auto;
}

.mode-card {
    background: var(--card-bg);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 2.2rem 1.8rem;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: var(--shadow-soft);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

.mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.35;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--card-tint, rgba(94, 239, 255, 0.12)), transparent 65%);
}

.mode-card[data-mode='calibrate'] { --card-tint: rgba(34, 211, 238, 0.18); }
.mode-card[data-mode='standard'] { --card-tint: rgba(56, 189, 248, 0.16); }
.mode-card[data-mode='maze'] { --card-tint: rgba(167, 139, 250, 0.18); }
.mode-card[data-mode='starchain'] { --card-tint: rgba(252, 211, 77, 0.14); }

.mode-card:hover {
    transform: translateY(-18px) scale(1.04);
    border-color: var(--card-hover-border, var(--primary-glow-color));
    box-shadow:
        0 0 28px var(--card-hover-glow, rgba(94, 239, 255, 0.45)),
        0 0 52px var(--card-hover-glow2, rgba(232, 121, 249, 0.22)),
        var(--shadow-soft);
}

.mode-card[data-mode='calibrate']:hover {
    --card-hover-border: rgba(34, 211, 238, 0.75);
    --card-hover-glow: rgba(34, 211, 238, 0.5);
    --card-hover-glow2: rgba(192, 132, 252, 0.35);
}

.mode-card[data-mode='standard']:hover {
    --card-hover-border: rgba(56, 189, 248, 0.8);
    --card-hover-glow: rgba(56, 189, 248, 0.5);
    --card-hover-glow2: rgba(94, 234, 212, 0.25);
}

.mode-card[data-mode='maze']:hover {
    --card-hover-border: rgba(167, 139, 250, 0.85);
    --card-hover-glow: rgba(167, 139, 250, 0.45);
    --card-hover-glow2: rgba(232, 121, 249, 0.3);
}

.mode-card[data-mode='starchain']:hover {
    --card-hover-border: rgba(252, 211, 77, 0.75);
    --card-hover-glow: rgba(252, 211, 77, 0.4);
    --card-hover-glow2: rgba(94, 239, 255, 0.25);
}

.mode-card[data-coming-soon="true"] {
    cursor: default;
    filter: grayscale(0.2);
}

.mode-card[data-coming-soon="true"]:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
    border-color: var(--panel-border);
}

.mode-card h2 {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    font-size: 1.6rem;
    margin: 1.4rem 0 0.5rem;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.65);
}

.mode-card p {
    font-size: 0.95rem;
    color: var(--muted-color);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.card-status {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--primary-glow-color);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.card-status.muted {
    color: var(--muted-color);
}

.icon-container {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* 星际校准：多彩锥形环 + 内外分层光晕（青 / 品红 / 紫 / 金点缀） */
.icon-calibrate {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
    background: conic-gradient(
        from 0deg,
        #00ffff,
        #22d3ee,
        #38bdf8,
        #a78bfa,
        #c084fc,
        #e879f9,
        #ff00ff,
        #f472b6,
        #fb7185,
        #fbbf24,
        #4ade80,
        #2dd4bf,
        #00ffff
    );
    padding: 3px;
    animation: rotate 12s linear infinite;
    box-shadow:
        0 0 14px rgba(0, 255, 255, 0.55),
        0 0 28px rgba(168, 85, 247, 0.4),
        0 0 42px rgba(255, 0, 255, 0.25);
}

.icon-calibrate::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(55, 65, 120, 0.95) 0%,
        rgba(12, 18, 42, 0.98) 48%,
        rgba(4, 6, 18, 1) 100%
    );
    border: 1px solid rgba(0, 255, 255, 0.35);
    box-shadow:
        inset 0 0 18px rgba(0, 255, 255, 0.18),
        inset 0 0 36px rgba(192, 132, 252, 0.12),
        inset -6px -6px 20px rgba(255, 0, 255, 0.08);
}

.icon-calibrate::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 0, 255, 0.5);
    background: radial-gradient(
        circle at 40% 35%,
        rgba(0, 255, 255, 0.25),
        rgba(120, 80, 200, 0.15) 55%,
        transparent 70%
    );
    animation: pulse-calibrate 2.2s ease-in-out infinite;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.45),
        0 0 20px rgba(255, 0, 255, 0.35),
        inset 0 0 12px rgba(255, 200, 255, 0.15);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-calibrate {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
        border-color: rgba(255, 0, 255, 0.45);
        box-shadow:
            0 0 8px rgba(0, 255, 255, 0.35),
            0 0 16px rgba(255, 0, 255, 0.25),
            inset 0 0 10px rgba(255, 200, 255, 0.12);
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
        border-color: rgba(0, 255, 255, 0.65);
        box-shadow:
            0 0 16px rgba(0, 255, 255, 0.6),
            0 0 28px rgba(251, 191, 36, 0.35),
            inset 0 0 14px rgba(0, 255, 255, 0.2);
    }
}

.mode-card:hover .icon-calibrate {
    box-shadow:
        0 0 18px rgba(0, 255, 255, 0.7),
        0 0 36px rgba(168, 85, 247, 0.55),
        0 0 52px rgba(255, 0, 255, 0.35);
}

.mode-card:hover .icon-calibrate::after {
    animation-duration: 1.1s;
}

.icon-dash {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 60px;
}

.icon-dash span {
    width: 8px;
    border-radius: 3px;
    animation: soundwave 1.6s ease-in-out infinite alternate;
}

.icon-dash span:nth-child(1) {
    height: 20%;
    animation-delay: 0s;
    background: linear-gradient(180deg, #67e8f9, #22d3ee);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.85);
}

.icon-dash span:nth-child(2) {
    height: 60%;
    animation-delay: 0.2s;
    background: linear-gradient(180deg, #a5f3fc, #38bdf8);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}

.icon-dash span:nth-child(3) {
    height: 100%;
    animation-delay: 0.4s;
    background: linear-gradient(180deg, #e9d5ff, #a78bfa);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.95);
}

.icon-dash span:nth-child(4) {
    height: 60%;
    animation-delay: 0.6s;
    background: linear-gradient(180deg, #fbcfe8, #f472b6);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.85);
}

.icon-dash span:nth-child(5) {
    height: 25%;
    animation-delay: 0.8s;
    background: linear-gradient(180deg, #fef08a, #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

@keyframes soundwave {
    from { height: 15%; }
    to { height: 100%; }
}

.mode-card:hover .icon-dash span {
    animation-duration: 0.5s;
}

/* 声纹迷宫 · 九宫格脉动图标（与音浪 icon-dash 同属霓虹方块系） */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 60px;
    height: 60px;
}

.icon-grid span {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    animation: grid-pulse 2s ease-in-out infinite alternate;
    transform: scale(0.9);
    opacity: 0.7;
}

.icon-grid span:nth-child(1) {
    animation-delay: 0s;
    background: linear-gradient(145deg, #22d3ee, #0891b2);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.75);
}

.icon-grid span:nth-child(2) {
    animation-delay: 0.2s;
    background: linear-gradient(145deg, #38bdf8, #0284c7);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.75);
}

.icon-grid span:nth-child(3) {
    animation-delay: 0.4s;
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.75);
}

.icon-grid span:nth-child(4) {
    animation-delay: 0.2s;
    background: linear-gradient(145deg, #818cf8, #6366f1);
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.75);
}

.icon-grid span:nth-child(5) {
    animation-delay: 0.4s;
    background: linear-gradient(145deg, #e879f9, #c026d3);
    box-shadow: 0 0 12px rgba(232, 121, 249, 0.85);
}

.icon-grid span:nth-child(6) {
    animation-delay: 0.6s;
    background: linear-gradient(145deg, #f472b6, #db2777);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.75);
}

.icon-grid span:nth-child(7) {
    animation-delay: 0.4s;
    background: linear-gradient(145deg, #5eead4, #14b8a6);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.75);
}

.icon-grid span:nth-child(8) {
    animation-delay: 0.6s;
    background: linear-gradient(145deg, #fcd34d, #f59e0b);
    box-shadow: 0 0 10px rgba(252, 211, 77, 0.75);
}

.icon-grid span:nth-child(9) {
    animation-delay: 0.8s;
    background: linear-gradient(145deg, #5eefff, #06b6d4);
    box-shadow: 0 0 12px rgba(94, 239, 255, 0.85);
}

@keyframes grid-pulse {
    from {
        transform: scale(0.85);
        opacity: 0.5;
        filter: brightness(0.88);
    }
    to {
        transform: scale(1.05);
        opacity: 1;
        filter: brightness(1.12);
    }
}

.mode-card:hover .icon-grid span {
    animation-duration: 0.6s;
}

.icon-chain {
    width: 110px;
    height: 60px;
    position: relative;
}

.icon-chain .star {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.icon-chain .star:nth-child(1) {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 0s;
    background: radial-gradient(circle at 35% 35%, #fff, #bae6fd 45%, #38bdf8 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 22px var(--accent-cyan);
    animation: star-pulse 2s ease-in-out infinite;
}

.icon-chain .star:nth-child(2) {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    animation-delay: 0.4s;
    background: radial-gradient(circle at 35% 35%, #fff, #e9d5ff 45%, #a78bfa 100%);
    box-shadow: 0 0 12px #fff, 0 0 22px var(--accent-violet);
    animation: star-pulse-violet 2s ease-in-out infinite;
}

.icon-chain .star:nth-child(3) {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 0.8s;
    background: radial-gradient(circle at 35% 35%, #fff, #fef3c7 45%, #fbbf24 100%);
    box-shadow: 0 0 12px #fff, 0 0 22px var(--accent-gold);
    animation: star-pulse-gold 2s ease-in-out infinite;
}

.icon-chain .line {
    position: absolute;
    width: 60px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(34, 211, 238, 0.2) 15%,
        var(--primary-glow-color) 50%,
        rgba(232, 121, 249, 0.65) 85%,
        transparent
    );
    transform-origin: left center;
    box-shadow: 0 0 8px rgba(94, 239, 255, 0.4);
}

.icon-chain .line:nth-child(4) {
    top: 25%;
    left: 10px;
    transform: rotate(30deg);
}

.icon-chain .line:nth-child(5) {
    bottom: 25%;
    left: 10px;
    transform: rotate(-30deg);
}

.mode-card:hover .icon-chain .line {
    background: linear-gradient(
        90deg,
        transparent,
        var(--secondary-glow-color) 40%,
        var(--accent-gold) 70%,
        transparent
    );
    box-shadow: 0 0 12px rgba(232, 121, 249, 0.55);
}

@keyframes star-pulse {
    0%,
    100% {
        filter: brightness(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px var(--accent-cyan);
    }
    50% {
        filter: brightness(1.25);
        box-shadow: 0 0 16px #fff, 0 0 32px var(--secondary-glow-color), 0 0 40px var(--accent-cyan);
    }
}

@keyframes star-pulse-violet {
    0%,
    100% {
        filter: brightness(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px var(--accent-violet);
    }
    50% {
        filter: brightness(1.25);
        box-shadow: 0 0 16px #fff, 0 0 32px var(--secondary-glow-color), 0 0 36px var(--accent-violet);
    }
}

@keyframes star-pulse-gold {
    0%,
    100% {
        filter: brightness(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px var(--accent-gold);
    }
    50% {
        filter: brightness(1.25);
        box-shadow: 0 0 16px #fff, 0 0 28px var(--accent-gold), 0 0 36px var(--primary-glow-color);
    }
}



.cosmic-mode {
    padding: 3rem 1.5rem 4rem;
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(94, 239, 255, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(5, 8, 24, 0.94), rgba(3, 5, 16, 0.98));
}

.mode-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.mode-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.mode-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--secondary-glow-color);
    margin-bottom: 0.4rem;
}

.mode-header h2 {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 0.4rem;
}

.mode-desc {
    color: var(--muted-color);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.card-panel {
    background: var(--panel-bg);
    border-radius: 24px;
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-strong);
    padding: 2.5rem;
}

.calibrate-panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calibrate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.calibrate-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.8rem;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3);
}

.current-stage {
    letter-spacing: 0.4em;
    font-size: 0.85rem;
    color: var(--muted-color);
    margin-bottom: 1rem;
}

.calibrate-word {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.8rem);
    letter-spacing: 0.2em;
    margin-bottom: 0.4rem;
}

.calibrate-pinyin {
    color: var(--primary-glow-color);
    letter-spacing: 0.4em;
    font-size: 1.4rem;
}

.calibrate-type {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--muted-color);
}

.calibrate-progress {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calibrate-progress strong {
    font-size: 1.3rem;
    color: var(--secondary-glow-color);
}

.calibrate-feedback {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 48px;
    font-size: 0.95rem;
    color: var(--muted-color);
}

.calibrate-feedback.success {
    color: var(--success-color);
    border-color: rgba(83, 255, 169, 0.4);
}

.calibrate-feedback.error {
    color: var(--danger-color);
    border-color: rgba(255, 92, 147, 0.4);
}

.calibrate-playground {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.tone-ball-home {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
}

.tone-ball {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--primary-glow-color));
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.7);
    cursor: grab;
}

.tone-ball.snap-back {
    animation: snapBack 0.3s ease;
}

.tone-ball.is-dragging {
    opacity: 0.5;
}

@keyframes snapBack {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.tone-ball:active {
    cursor: grabbing;
}

.tone-track-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.tone-track {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tone-track span {
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    color: var(--muted-color);
    text-transform: uppercase;
}

.tone-track.drag-over {
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.3);
}

.track-graphic {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 70%);
}

.tone-svg {
    width: 100%;
    height: 100%;
}

.tone-svg line,
.tone-svg polyline,
.tone-svg path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.track-yang .tone-svg line {
    stroke: url(#yangGradient);
    filter: drop-shadow(0 0 16px rgba(255, 80, 120, 0.6));
}

.track-shang .tone-svg polyline,
.track-shang .tone-svg path {
    stroke: url(#shangGradient);
    filter: drop-shadow(0 0 16px rgba(0, 255, 160, 0.5));
}

.calibrate-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.calibrate-mistakes {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
}

.mistake-header {
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: var(--muted-color);
}

#calibrateMistakes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#calibrateMistakes li {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
}
.screen {
    display: none;
}

.screen.active {
    display: block;
}

.progress-section {
    margin-bottom: 2rem;
}

.progress-bar {
    width: 100%;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-glow-color), var(--secondary-glow-color));
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.6);
    transition: width 0.4s ease;
}

.progress-text {
    text-align: center;
    margin-top: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--muted-color);
}

.word-section {
    border-radius: 18px;
    padding: 2.4rem 1rem;
    background: radial-gradient(circle at top, rgba(0, 255, 255, 0.15), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin-bottom: 2rem;
}

.word-display {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    letter-spacing: 0.2em;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.word-pinyin {
    font-size: clamp(1.3rem, 3vw, 2rem);
    letter-spacing: 0.35em;
    color: var(--primary-glow-color);
    margin-top: 0.4rem;
}

.control-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.next-button-container {
    text-align: center;
    margin-top: 1.5rem;
}

.btn {
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-4px);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.btn-primary {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), rgba(255, 0, 255, 0.25));
    border-color: rgba(0, 255, 255, 0.35);
}

.btn-secondary {
    background: rgba(255, 0, 255, 0.15);
    border-color: rgba(255, 0, 255, 0.4);
}

.btn-success {
    background: rgba(83, 255, 169, 0.18);
    border-color: rgba(83, 255, 169, 0.45);
}

.btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.analysis-section {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 20, 0.75);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
}

.analysis-section h3 {
    font-family: var(--font-display);
    letter-spacing: 0.2em;
    font-size: 1.2rem;
    margin-bottom: 1.4rem;
    color: var(--primary-glow-color);
}

.chart-container {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
}

.score-display {
    text-align: center;
    font-size: 1.3rem;
}

.score-value {
    display: inline-block;
    font-size: 2.5rem;
    color: var(--secondary-glow-color);
    animation: pulseScore 0.6s ease;
}

@keyframes pulseScore {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.result-content {
    text-align: center;
    padding: 2rem 1rem;
}

.final-score {
    font-size: 4rem;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.summary-section {
    margin-top: 2rem;
}

#summaryList,
#starSummaryList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.summary-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    color: var(--text-color);
}

.star-progress {
    text-align: center;
    font-size: 1.1rem;
    color: var(--muted-color);
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.star-info {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    margin: 0 auto 1.5rem;
    text-align: center;
    max-width: 720px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.star-sentence {
    font-size: 1.35rem;
    color: var(--text-color);
    line-height: 1.6;
}

.star-sentence-label {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    color: var(--muted-color);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.star-chain-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.star-chain {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.star-node {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid var(--primary-glow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-glow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.star-node.selected {
    background: linear-gradient(135deg, var(--primary-glow-color), var(--secondary-glow-color));
    color: #020011;
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.6);
    transform: scale(1.08);
}

.star-link {
    width: 70px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.star-link.selected {
    background: linear-gradient(90deg, var(--primary-glow-color), var(--secondary-glow-color));
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
}

.star-link.correct {
    background: linear-gradient(90deg, var(--success-color), #12f7d6);
}

.star-link.mistake {
    background: linear-gradient(90deg, var(--danger-color), #ff8ac3);
}

.star-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cosmic-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--muted-color);
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 0, 17, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.cosmic-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.9rem 2rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 20;
}

.cosmic-toast.visible {
    opacity: 1;
    transform: translate(-50%, 10px);
}

@media (max-width: 768px) {
    .mode-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 100%;
    }
    
    .mode-card {
        min-width: unset;
    }

    .mode-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-panel {
        padding: 1.5rem;
    }

    .control-section {
        flex-direction: column;
    }
}

/* 声纹迷宫模式 */
.maze-progress {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-size: 1rem;
    letter-spacing: 0.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.maze-separator {
    color: var(--muted-color);
        opacity: 0.5;
    }

.maze-hint {
    text-align: center;
    margin: 1rem auto;
    padding: 0.8rem 1.5rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    max-width: 600px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.hint-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* 2D迷宫容器 */
.maze-2d-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    padding: 1rem;
    background: rgba(2, 0, 17, 0.8);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    max-width: 95%;
    max-height: 70vh;
    overflow: auto;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.maze-2d-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.maze-2d-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.maze-2d-container::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 4px;
}

.maze-2d-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.5);
}

/* 星际背景层 */
.maze-stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.maze-stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.6;
}

#mazeStars1 {
    background-image: 
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 1), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(0, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 0, 255, 0.6), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.7), transparent);
    background-size: 200px 200px;
    animation: mazeStarsMove 200s linear infinite;
}

#mazeStars2 {
    background-image: 
        radial-gradient(2px 2px at 50px 50px, rgba(0, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 100px 150px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 200px 60px, rgba(255, 0, 255, 0.8), transparent);
    background-size: 250px 250px;
    animation: mazeStarsMove 150s linear infinite reverse;
}

#mazeStars3 {
    background-image: 
        radial-gradient(3px 3px at 100px 100px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 250px 250px, rgba(0, 255, 255, 0.7), transparent);
    background-size: 350px 350px;
    animation: mazeStarsMove 100s linear infinite;
}

@keyframes mazeStarsMove {
    from { background-position: 0 0; }
    to { background-position: 10000px 10000px; }
}

/* 星球装饰 */
.maze-planets {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.maze-planet {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.4;
    animation: planetFloat 20s ease-in-out infinite;
}

.planet-1 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.6), rgba(0, 100, 200, 0.3), transparent);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
    top: 10%;
    left: 15%;
    animation-duration: 25s;
    animation-delay: 0s;
}

.planet-2 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.6), rgba(200, 0, 150, 0.3), transparent);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
    bottom: 20%;
    right: 10%;
    animation-duration: 30s;
    animation-delay: -10s;
}

.planet-3 {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 0, 0.5), rgba(200, 150, 0, 0.3), transparent);
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.4);
    top: 50%;
    right: 20%;
    animation-duration: 35s;
    animation-delay: -15s;
}

@keyframes planetFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% { 
        transform: translate(20px, -30px) scale(1.1);
        opacity: 0.5;
    }
    50% { 
        transform: translate(-15px, -20px) scale(0.9);
        opacity: 0.3;
    }
    75% { 
        transform: translate(10px, 15px) scale(1.05);
        opacity: 0.45;
    }
}

.maze-canvas {
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.maze-cell {
    position: absolute;
    box-sizing: border-box;
}

.maze-wall {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 10, 40, 0.8));
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.8),
        0 0 5px rgba(0, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.maze-wall::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
    animation: wallGlow 3s ease-in-out infinite;
}

@keyframes wallGlow {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
    50% { transform: rotate(180deg) scale(1.2); opacity: 0.5; }
}

.maze-path {
    background: rgba(2, 0, 17, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.15);
    box-shadow: 
        inset 0 0 10px rgba(0, 255, 255, 0.1),
        0 0 5px rgba(0, 255, 255, 0.05);
    position: relative;
}

.maze-path::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 255, 255, 0.05) 50%,
        transparent 70%
    );
    animation: pathShimmer 3s linear infinite;
}

@keyframes pathShimmer {
    0% { transform: translateX(-100%) translateY(-100%); }
    100% { transform: translateX(100%) translateY(100%); }
}

.maze-reachable {
    background: rgba(0, 255, 255, 0.15) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    box-shadow: 
        0 0 8px rgba(0, 255, 255, 0.3),
        inset 0 0 8px rgba(0, 255, 255, 0.1) !important;
    animation: reachablePulse 2s ease-in-out infinite;
}

@keyframes reachablePulse {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.3), inset 0 0 8px rgba(0, 255, 255, 0.1);
        opacity: 1;
    }
    50% { 
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 12px rgba(0, 255, 255, 0.2);
        opacity: 0.8;
    }
}

.maze-start {
    background: radial-gradient(circle, rgba(0, 255, 0, 0.3), rgba(0, 150, 0, 0.2));
    border: 2px solid rgba(0, 255, 0, 0.6);
    box-shadow: 
        0 0 15px rgba(0, 255, 0, 0.5),
        inset 0 0 10px rgba(0, 255, 0, 0.2);
    position: relative;
    animation: startPulse 2s ease-in-out infinite;
}

/* 起点图标已由玩家图标显示，不需要额外图标 */

@keyframes startPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.2);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.8), inset 0 0 15px rgba(0, 255, 0, 0.3);
        transform: scale(1.02);
    }
}

.maze-end {
    background: radial-gradient(circle, rgba(255, 0, 255, 0.4), rgba(150, 0, 150, 0.3));
    border: 2px solid rgba(255, 0, 255, 0.7);
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.6),
        inset 0 0 15px rgba(255, 0, 255, 0.3);
    position: relative;
    animation: endPulse 2s ease-in-out infinite;
}

.maze-end::after {
    content: '⭐';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    z-index: 1;
    animation: starRotate 3s linear infinite;
    pointer-events: none;
}

@keyframes starRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes endPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); }
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.8); }
}

.maze-player {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    animation: playerFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--primary-glow-color)) drop-shadow(0 0 15px var(--secondary-glow-color));
    z-index: 10;
    position: relative;
}

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

/* 方向选择模态框 */
.maze-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 0, 17, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.maze-modal.active {
    opacity: 1;
    pointer-events: all;
}

.maze-modal-content {
    background: rgba(10, 25, 55, 0.95);
    border: 1px solid var(--card-border-color);
    border-radius: 20px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.maze-modal.active .maze-modal-content {
    transform: scale(1);
}

.maze-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border-color);
}

.maze-modal-header h3 {
    color: var(--text-color);
    font-size: 1.5rem;
    text-shadow: var(--text-shadow);
    margin: 0;
}

.maze-modal-close {
    background: transparent;
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.maze-modal-close:hover {
    border-color: var(--primary-glow-color);
    color: var(--primary-glow-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.maze-direction-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    gap: 0.5rem;
    margin: 2rem 0;
    position: relative;
    min-height: 400px;
    padding: 1rem;
    border-radius: 28px;
    background: radial-gradient(circle at 20% 20%, rgba(20, 60, 130, 0.6), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(10, 90, 180, 0.45), transparent 50%),
        linear-gradient(120deg, #02102a, #041e40 60%, #031230);
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 20, 50, 0.8);
}

.maze-direction-grid::before,
.maze-direction-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.maze-direction-grid::before {
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 35% 15%, rgba(110, 180, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(110, 180, 255, 0.7), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255, 180, 180, 0.65), transparent),
        radial-gradient(1.2px 1.2px at 80% 40%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 10% 50%, rgba(120, 200, 255, 0.7), transparent),
        radial-gradient(1px 1px at 60% 25%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.4px 1.4px at 85% 70%, rgba(138, 180, 255, 0.75), transparent),
        radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(110, 180, 255, 0.65), transparent);
    background-size: 160px 160px, 200px 200px, 220px 220px, 190px 190px, 240px 240px, 210px 210px, 260px 260px, 230px 230px, 200px 200px, 250px 250px;
    opacity: 0.8;
    animation: mazeStarsDrift 35s linear infinite;
}

.maze-direction-grid::after {
    background: radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0.45), transparent 60%);
}

.maze-exit {
    background: rgba(10, 25, 55, 0.6);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.maze-exit:hover:not(.disabled) {
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: scale(1.05);
}

.maze-exit.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.maze-exit.selected {
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 25px var(--primary-glow-color), 0 0 40px var(--secondary-glow-color);
    background: rgba(0, 255, 255, 0.1);
}

.exit-label {
    font-size: 0.9rem;
    color: var(--muted-color);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.exit-word {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
    text-shadow: var(--text-shadow);
}

.exit-pinyin {
    font-size: 1rem;
    color: var(--primary-glow-color);
    letter-spacing: 0.1em;
}

.maze-center {
    grid-column: 2;
    grid-row: 2;
    background: rgba(10, 25, 55, 0.8);
    border: 2px solid var(--primary-glow-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.maze-character {
    width: 110px;
    height: 110px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 3s ease-in-out infinite;
}

.maze-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transform: rotateX(72deg);
    animation: mazeRingSpin 36s linear infinite reverse;
    filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.35));
}

.maze-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 48%, rgba(255, 200, 120, 0.25) 49%, rgba(255, 200, 120, 0.5) 52%, transparent 53%),
        radial-gradient(circle, transparent 40%, rgba(255, 160, 80, 0.15) 41%, rgba(255, 160, 80, 0.35) 45%, transparent 46%);
}

.maze-planet {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 18px rgba(255, 200, 120, 0.45),
        inset -15px -15px 30px rgba(0, 0, 0, 0.45);
    animation: mazePlanetSpin 24s linear infinite;
}

.maze-planet-surface {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 35%, #ffd37a 0%, transparent 20%),
        radial-gradient(circle at 65% 70%, #cc8a3a 0%, transparent 22%),
        radial-gradient(circle at 35% 80%, #a8642a 0%, transparent 18%),
        radial-gradient(circle at 70% 30%, #ffb347 0%, transparent 16%),
        radial-gradient(circle at 45% 15%, #e9963f 0%, transparent 12%),
        radial-gradient(circle at 20% 70%, #cc6c2f 0%, transparent 18%),
        radial-gradient(circle at 80% 50%, #ffcf81 0%, transparent 14%);
}

.maze-planet-atmosphere {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 140, 0.18) 0%, transparent 70%);
    animation: mazeAtmospherePulse 7s ease-in-out infinite alternate;
}

.maze-planet-highlight {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    top: 18%;
    left: 22%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
    filter: blur(6px);
}

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

@keyframes mazeStarsDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-40px, -30px, 0); }
}

@keyframes mazeRingSpin {
    from { transform: rotateX(72deg) rotate(0deg); }
    to { transform: rotateX(72deg) rotate(360deg); }
}

@keyframes mazePlanetSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mazeAtmospherePulse {
    0% { opacity: 0.35; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.05); }
}

.maze-instruction {
    font-size: 0.85rem;
    color: var(--muted-color);
    text-align: center;
    letter-spacing: 0.1em;
}

.maze-north {
    grid-column: 2;
    grid-row: 1;
}

.maze-south {
    grid-column: 2;
    grid-row: 3;
}

.maze-east {
    grid-column: 3;
    grid-row: 2;
}

.maze-west {
    grid-column: 1;
    grid-row: 2;
}

.maze-recording-controls {
    margin-top: 1.5rem;
}

.maze-controls {
    margin-top: 2rem;
    text-align: center;
}

.maze-feedback {
    min-height: 2rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.maze-feedback.visible,
.maze-feedback.success,
.maze-feedback.error,
.maze-feedback.info {
    opacity: 1;
}

.maze-feedback.success {
    color: var(--primary-glow-color);
    text-shadow: 0 0 10px var(--primary-glow-color);
}

.maze-feedback.error {
    color: var(--secondary-glow-color);
    text-shadow: 0 0 10px var(--secondary-glow-color);
}

.maze-feedback.info {
    color: var(--text-color);
}

.maze-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.maze-analysis {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(10, 25, 55, 0.6);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.maze-analysis h3 {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-shadow: var(--text-shadow);
}

@media (max-width: 768px) {
    .maze-2d-container {
        padding: 0.5rem;
    }
    
    .maze-cell {
        font-size: 0.8rem;
    }
    
    .maze-planet {
        opacity: 0.2;
    }
    
    .planet-1, .planet-2, .planet-3 {
        width: 40px;
        height: 40px;
    }
    
    .maze-modal-content {
        padding: 1.5rem;
        width: 95%;
    }
    
    .maze-direction-grid {
        min-height: 300px;
        gap: 0.3rem;
    }
    
    .exit-word {
        font-size: 1.5rem;
    }
    
    .maze-character {
        font-size: 2rem;
    }
    
    .maze-buttons {
        flex-direction: column;
    }
    
    .maze-buttons .btn {
        width: 100%;
    }
}

/* ==================== AI小宠物 ==================== */
.ai-pet {
    position: fixed;
    left: 20px;
    bottom: 80px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    cursor: pointer;
    animation: ai-pet-float 4s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
    will-change: transform;
}

.ai-pet:hover {
    transform: scale(1.1);
}

.ai-pet-icon {
    width: 100%;
    height: 100%;
    color: var(--primary-glow-color);
    filter: drop-shadow(0 0 10px var(--primary-glow-color));
    animation: ai-pet-glow 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.ai-pet-icon svg {
    width: 100%;
    height: 100%;
}

.ai-pet-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(94, 239, 255, 0.45) 0%,
        rgba(167, 139, 250, 0.2) 45%,
        transparent 70%
    );
    opacity: 0.4;
    animation: ai-pet-pulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes ai-pet-float {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    20% {
        transform: translateY(-20px) translateX(8px) rotate(5deg);
    }
    40% {
        transform: translateY(-15px) translateX(-10px) rotate(-5deg);
    }
    60% {
        transform: translateY(-25px) translateX(5px) rotate(3deg);
    }
    80% {
        transform: translateY(-10px) translateX(-8px) rotate(-3deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes ai-pet-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--primary-glow-color));
    }
    50% {
        filter: drop-shadow(0 0 20px var(--primary-glow-color)) drop-shadow(0 0 30px var(--secondary-glow-color));
    }
}

@keyframes ai-pet-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ==================== AI对话侧边栏 ==================== */
.ai-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(2, 0, 17, 0.98), rgba(4, 7, 24, 0.98));
    border-left: 1px solid var(--panel-border);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
}

.ai-sidebar.open {
    right: 0;
}

.ai-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 255, 255, 0.05);
}

.ai-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ai-sidebar-icon {
    width: 40px;
    height: 40px;
    color: var(--primary-glow-color);
    filter: drop-shadow(0 0 8px var(--primary-glow-color));
}

.ai-sidebar-icon svg {
    width: 100%;
    height: 100%;
}

.ai-sidebar-title h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-color);
    text-shadow: 0 0 10px var(--primary-glow-color);
    margin: 0;
}

.ai-quit-quiz-btn {
    margin-left: 0.5rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 0, 128, 0.12);
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ai-quit-quiz-btn:hover {
    background: rgba(255, 0, 128, 0.22);
    border-color: var(--secondary-glow-color);
}

.ai-sidebar.quiz-active .ai-quit-quiz-btn {
    box-shadow: 0 0 12px rgba(255, 0, 128, 0.35);
}

.ai-sidebar.quiz-choosing {
    box-shadow: inset 0 0 0 1px rgba(0, 200, 255, 0.35);
}

.ai-sidebar-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--panel-border);
    background: rgba(0, 255, 255, 0.1);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ai-sidebar-close:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: rotate(90deg);
}

.ai-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-messages::-webkit-scrollbar-track {
    background: rgba(0, 255, 255, 0.1);
    border-radius: 3px;
}

.ai-messages::-webkit-scrollbar-thumb {
    background: var(--primary-glow-color);
    border-radius: 3px;
}

.ai-messages::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-glow-color);
}

.ai-message {
    display: flex;
    gap: 0.75rem;
    animation: ai-message-fade-in 0.3s ease;
}

.ai-message-user {
    flex-direction: row-reverse;
}

.ai-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.ai-message-bot .ai-message-avatar {
    background: rgba(0, 255, 255, 0.15);
}

.ai-message-user .ai-message-avatar {
    background: rgba(255, 0, 255, 0.15);
}

.ai-message-text {
    flex: 1;
    max-width: calc(100% - 50px);
}

.ai-message-text p {
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    color: var(--text-color);
    line-height: 1.6;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ai-message-bot .ai-message-text p {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
}

.ai-message-user .ai-message-text p {
    background: rgba(255, 0, 255, 0.08);
    border-color: rgba(255, 0, 255, 0.3);
}

.ai-message-text p::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-glow-color), transparent);
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

.ai-input-area {
    padding: 1.5rem;
    border-top: 1px solid var(--panel-border);
    background: rgba(0, 255, 255, 0.05);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ai-voice-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--panel-border);
    background: rgba(0, 255, 255, 0.15);
    color: var(--primary-glow-color);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ai-voice-btn:hover {
    background: rgba(0, 255, 255, 0.28);
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.35);
}

.ai-voice-btn.recording {
    background: rgba(255, 0, 128, 0.35);
    color: #fff;
    animation: ai-voice-pulse 1s ease-in-out infinite;
}

@keyframes ai-voice-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 0, 128, 0);
    }
}

.ai-voice-btn svg {
    width: 22px;
    height: 22px;
}

.ai-voice-btn:disabled,
.ai-voice-btn.voice-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ai-voice-btn:disabled:hover,
.ai-voice-btn.voice-locked:hover {
    box-shadow: none;
    transform: none;
}

.ai-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.ai-input:focus {
    outline: none;
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.15);
}

.ai-input::placeholder {
    color: var(--muted-color);
}

.ai-send-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--panel-border);
    background: rgba(0, 255, 255, 0.15);
    color: var(--primary-glow-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-send-btn:hover {
    background: rgba(0, 255, 255, 0.25);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.ai-send-btn:active {
    transform: translateY(0);
}

.ai-send-btn svg {
    width: 20px;
    height: 20px;
}

.ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(2px);
}

.ai-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

@keyframes ai-message-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ai-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .ai-pet {
        width: 50px;
        height: 50px;
        left: 15px;
        bottom: 60px;
    }
}