/* ===== 全局基础 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0d1117;
    --bg-elev: #161b22;
    --bg-elev2: #1c2330;
    --border: #2a3441;
    --text: #e6edf3;
    --text-dim: #8b98a9;
    --accent: #64ffda;       /* 青色主色 */
    --accent2: #7c9eff;      /* 蓝紫辅色 */
    --danger: #ff6b6b;
    --ok: #69db7c;
    --radius: 10px;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
}

code {
    background: var(--bg-elev2);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12px;
}

/* ===== 顶部标题栏 ===== */
.topbar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: linear-gradient(90deg, var(--bg-elev) 0%, #0f1620 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { font-size: 26px; display: inline-flex; align-items: center; }
/* 专属 SVG 标志:紫色渐变,hover 时轻微旋转放大 + 发光增强 */
.brand-logo {
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
}
.brand:hover .brand-logo {
    transform: rotate(-8deg) scale(1.12);
    filter: drop-shadow(0 0 10px rgba(217, 70, 239, 0.7));
}
.brand h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mode-switch {
    display: flex;
    background: var(--bg-elev2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}
.mode-btn {
    padding: 6px 16px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #0d1117;
    font-weight: 600;
}

/* ============ 音效开关按钮 ============ */
.sound-btn {
    margin-right: 4px;
    padding: 6px 10px !important;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 15px;
}
.sound-btn:hover { color: var(--accent); border-color: var(--accent); }
.sound-btn.muted { color: var(--danger); border-color: rgba(255, 107, 107, 0.4); }
.sound-btn.muted::after { content: '🔇'; }
.sound-btn.muted { font-size: 0; }
.sound-btn.muted::after { font-size: 15px; }

/* ============ 哈利波特:分院帽 + 四学院主题 ============ */
/* 分院帽按钮:琥珀色,激活时旋转发光 */
.sort-btn {
    margin-right: 4px;
    border: 1px solid rgba(212, 165, 116, 0.5);
    color: #d4a574;
}
.sort-btn:hover { color: #d4a574; background: rgba(212, 165, 116, 0.12); }
.sort-btn.active { animation: hatSpin 0.7s ease; }
@keyframes hatSpin { from { transform: rotate(0); } 50% { transform: rotate(360deg) scale(1.2); } to { transform: rotate(0); } }

/* 分院结果横幅 */
.sort-banner {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    padding: 14px 36px;
    border-radius: 0 0 14px 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    white-space: nowrap;
}
.sort-banner.show { top: 0; }
.sort-banner .sort-emoji { font-size: 26px; vertical-align: middle; margin-right: 8px; }

/* 四学院主题:用 CSS 变量覆盖 --accent(主题色),其余配色由现有变量派生 */
body.theme-gryffindor { --accent: #ffc94d; --bg: #2a0808; --bg-elev: #3d0d0d; --bg-elev2: #4a1212; }
body.theme-slytherin  { --accent: #5dd39e; --bg: #06140d; --bg-elev: #0a1f15; --bg-elev2: #0e2819; }
body.theme-ravenclaw  { --accent: #6db4e8; --bg: #06101c; --bg-elev: #0a1828; --bg-elev2: #0e2038; }
body.theme-hufflepuff { --accent: #ffd84d; --bg: #1a1505; --bg-elev: #241d08; --bg-elev2: #2e250a; }

/* ============ 学院花纹装饰层(四角纹章 + 边框)============ */
.house-decor {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: none;
}
body.magic-on .house-decor { display: block; }

/* 四角纹章图腾:对称徽章式 */
.house-corner {
    position: absolute;
    width: 140px;
    height: 140px;
    opacity: 0.25;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.house-tl { top: 66px; left: 14px; }
.house-tr { top: 66px; right: 14px; }
.house-bl { bottom: 14px; left: 14px; }
.house-br { bottom: 14px; right: 14px; }

/* 边框花纹:四边装饰条 */
.house-border {
    position: absolute;
    opacity: 0.3;
}
.house-border-top, .house-border-bottom {
    left: 0; right: 0; height: 22px;
    background-repeat: repeat-x;
    background-size: 60px 22px;
}
.house-border-top { top: 62px; }
.house-border-bottom { bottom: 0; }
.house-border-left, .house-border-right {
    top: 84px; bottom: 22px; width: 16px;
    background-repeat: repeat-y;
    background-size: 16px 60px;
}
.house-border-left { left: 0; }
.house-border-right { right: 0; }

/* —— 格兰芬多 🦁:剑与火焰(金红)——
   图腾:盾牌中交叉双剑(勇气的武器)+ 火焰冠饰
   边框:三重火焰波浪 */
body.theme-gryffindor .house-corner {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23ffc94d' stroke-width='1.8' stroke-linejoin='round'><path d='M50 12 C30 14 20 26 20 42 C20 64 38 82 50 90 C62 82 80 64 80 42 C80 26 70 14 50 12 Z' stroke-width='2'/><path d='M50 22 C36 24 30 34 30 44 C30 60 42 74 50 80 C58 74 70 60 70 44 C70 34 64 24 50 22 Z' opacity='0.5'/><line x1='38' y1='38' x2='62' y2='62' stroke-width='2.2'/><line x1='62' y1='38' x2='38' y2='62' stroke-width='2.2'/><polygon points='50,30 53,38 50,46 47,38' fill='%23ffc94d'/><polygon points='50,54 53,62 50,70 47,62' fill='%23ffc94d'/><circle cx='50' cy='50' r='4' fill='%23ff6b3d' stroke='none'/></g></svg>");
}
body.theme-gryffindor .house-border {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'><path d='M0 22 Q7 6 15 16 Q22 2 30 14 Q38 2 45 16 Q53 6 60 22' fill='none' stroke='%23ffc94d' stroke-width='1.4'/><path d='M0 22 Q10 14 20 20 Q30 12 40 20 Q50 14 60 22' fill='none' stroke='%23ff6b3d' stroke-width='1' opacity='0.6'/></svg>");
}

/* —— 斯莱特林 🐍:蛇形盘绕(银绿)——
   图腾:盾牌中 S 形蛇身盘绕 + 蛇头
   边框:鱼鳞/蛇鳞叠瓦纹 */
body.theme-slytherin .house-corner {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%235dd39e' stroke-width='1.8' stroke-linejoin='round'><path d='M50 12 C30 14 20 26 20 42 C20 64 38 82 50 90 C62 82 80 64 80 42 C80 26 70 14 50 12 Z' stroke-width='2'/><path d='M32 38 Q50 28 70 40 Q60 52 44 48 Q30 52 28 64 Q42 74 60 66' stroke-width='2.2'/><circle cx='68' cy='39' r='2.2' fill='%235dd39e'/><path d='M64 43 L70 45 M64 41 L70 39' stroke-width='1.4'/><path d='M36 36 Q40 32 44 36 M48 44 Q52 40 56 44' opacity='0.5'/></g></svg>");
}
body.theme-slytherin .house-border {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'><path d='M0 22 A15 15 0 0 1 30 22' fill='none' stroke='%235dd39e' stroke-width='1.2'/><path d='M0 22 A10 10 0 0 1 20 22' fill='none' stroke='%235dd39e' stroke-width='0.8' opacity='0.5'/><circle cx='15' cy='22' r='1' fill='%235dd39e'/></svg>");
}

/* —— 拉文劳 🦅:展翅鹰 + 星辰(蓝铜)——
   图腾:盾牌中对称展翅鹰 + 头顶星辰
   边框:羽毛 + 四角星 */
body.theme-ravenclaw .house-corner {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%236db4e8' stroke-width='1.8' stroke-linejoin='round'><path d='M50 12 C30 14 20 26 20 42 C20 64 38 82 50 90 C62 82 80 64 80 42 C80 26 70 14 50 12 Z' stroke-width='2'/><path d='M50 76 L50 44' stroke-width='2.2'/><path d='M48 50 Q34 38 16 44 Q30 50 46 52' stroke-width='1.8'/><path d='M52 50 Q66 38 84 44 Q70 50 54 52' stroke-width='1.8'/><path d='M44 46 L36 42 M42 50 L32 48 M56 46 L64 42 M58 50 L68 48' opacity='0.6'/><path d='M50 28 L52 34 L58 34 L53 38 L55 44 L50 40 L45 44 L47 38 L42 34 L48 34 Z' fill='%236db4e8' stroke='none'/></g></svg>");
}
body.theme-ravenclaw .house-border {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'><path d='M5 18 Q15 8 30 18 Q45 8 55 18' fill='none' stroke='%236db4e8' stroke-width='1.3'/><path d='M28 4 L29 8 L33 8 L30 11 L31 15 L28 13 L25 15 L26 11 L23 8 L27 8 Z' fill='%236db4e8' opacity='0.8'/></svg>");
}

/* —— 赫奇帕奇 🦡:蜂巢 + 麦穗(黄黑)——
   图腾:盾牌中密铺六边形蜂巢 + 中心麦穗
   边框:六边形蜂巢连续纹 */
body.theme-hufflepuff .house-corner {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23ffd84d' stroke-width='1.8' stroke-linejoin='round'><path d='M50 12 C30 14 20 26 20 42 C20 64 38 82 50 90 C62 82 80 64 80 42 C80 26 70 14 50 12 Z' stroke-width='2'/><path d='M40 34 L48 38 L48 46 L40 50 L32 46 L32 38 Z' opacity='0.8'/><path d='M60 34 L68 38 L68 46 L60 50 L52 46 L52 38 Z' opacity='0.8'/><path d='M50 50 L58 54 L58 62 L50 66 L42 62 L42 54 Z' opacity='0.8'/><path d='M50 30 L50 70' stroke-width='1.2' opacity='0.7'/><path d='M50 38 L46 34 M50 38 L54 34 M50 46 L46 42 M50 46 L54 42 M50 54 L46 50 M50 54 L54 50 M50 62 L46 58 M50 62 L54 58' stroke-width='1' opacity='0.5'/></g></svg>");
}
body.theme-hufflepuff .house-border {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 22'><path d='M13 2 L26 9 L26 15 L13 22 L0 15 L0 9 Z M39 2 L52 9 L52 15 L39 22 L26 15 L26 9 Z' fill='none' stroke='%23ffd84d' stroke-width='1.3'/></svg>");
}

/* ============ 哈利波特:魔法字体 + 魔杖鼠标 + 荧光闪烁 ============ */
/* 魔法字体:用衬线体营造古典魔法书感 */
body.magic-on .topbar h1,
body.magic-on .section-title,
body.magic-on .panel-block h2 {
    font-family: 'Cinzel', 'Cormorant Garamond', Georgia, 'KaiTi', '楷体', serif !important;
    letter-spacing: 2px;
}

/* 魔杖鼠标:自定义光标光点(跟随鼠标的发光圆点) */
.wand-cursor {
    position: fixed;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 150, 1) 0%, rgba(255, 220, 87, 0.8) 40%, transparent 70%);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    box-shadow: 0 0 16px 4px rgba(255, 220, 87, 0.6);
    display: none;
}
body.magic-on .wand-cursor { display: block; }
body.magic-on { cursor: none; }   /* 隐藏系统光标 */
body.magic-on a, body.magic-on button, body.magic-on .penguin { cursor: none; }

/* 荧光闪烁:部分标题/数字周期性发光闪烁 */
body.magic-on .brand h1 {
    animation: lumosFlicker 3.5s ease-in-out infinite;
}
@keyframes lumosFlicker {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 220, 87, 0.3); }
    47%      { text-shadow: 0 0 4px rgba(255, 220, 87, 0.3); }
    48%      { text-shadow: 0 0 1px rgba(255, 220, 87, 0.1); opacity: 0.85; }
    49%      { text-shadow: 0 0 10px rgba(255, 220, 87, 0.8); }
    72%      { text-shadow: 0 0 14px rgba(255, 220, 87, 0.9), 0 0 24px rgba(255, 220, 87, 0.4); }
    73%      { text-shadow: 0 0 2px rgba(255, 220, 87, 0.2); }
}

/* ============ 哈利波特:入场烟雾现身 + 星空粒子背景 ============ */
/* 入场:整个页面从烟雾中浮现 */
body.magic-on .layout, body.magic-on .topbar {
    animation: smokeReveal 1.4s ease-out both;
}
@keyframes smokeReveal {
    0%   { opacity: 0; filter: blur(12px) brightness(0.3); transform: translateY(20px); }
    60%  { opacity: 0.7; filter: blur(3px) brightness(0.7); }
    100% { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0); }
}

/* 星空/魔法尘埃背景粒子层 */
.starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
body.magic-on .starfield { display: block; }
.starfield .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: starTwinkle 4s ease-in-out infinite, starFloat 18s linear infinite;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.9; }
}
@keyframes starFloat {
    from { transform: translateY(100vh); }
    to   { transform: translateY(-10vh); }
}

/* Game 按钮:独立配色,激活时粉色发光 */
.game-btn {
    margin-right: 4px;
    border: 1px solid rgba(255, 121, 198, 0.4);
    color: #ff79c6;
}
.game-btn:hover { color: #ff79c6; background: rgba(255, 121, 198, 0.1); }
/* 游戏进行中:Game 按钮脱离 topbar,固定到屏幕左上角(避免与其他按钮重叠)*/
.game-btn.game-on-top {
    position: fixed;
    z-index: 9996;
    top: 14px;
    left: 16px;
    box-shadow: 0 0 16px rgba(255, 121, 198, 0.7);
    /* 突出显示,明确告知"点击停止"*/
    background: linear-gradient(135deg, #ff79c6, #ffd166);
    color: #0d1117;
    border-color: transparent;
    font-weight: 700;
    padding: 8px 16px !important;
}
.game-btn.active {
    background: linear-gradient(135deg, #ff79c6, #ffd166);
    color: #0d1117;
    border-color: transparent;
    box-shadow: 0 0 12px rgba(255, 121, 198, 0.5);
    animation: gamePulse 1.2s ease-in-out infinite;
}
@keyframes gamePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 121, 198, 0.4); }
    50%      { box-shadow: 0 0 18px rgba(255, 121, 198, 0.8); }
}

/* 保存按钮:独立配色(绿色),激活时发光 */
.save-btn {
    margin-right: 4px;
    border: 1px solid rgba(105, 219, 124, 0.4);
    color: var(--ok);
}
.save-btn:hover { color: var(--ok); background: rgba(105, 219, 124, 0.1); }

/* 历史按钮:独立配色(蓝紫),激活时发光 */
.history-btn {
    margin-right: 4px;
    border: 1px solid rgba(124, 158, 255, 0.4);
    color: var(--accent2);
}
.history-btn:hover { color: var(--accent2); background: rgba(124, 158, 255, 0.1); }
.history-btn.active {
    background: linear-gradient(135deg, var(--accent2), #a78bfa);
    color: #0d1117;
    border-color: transparent;
    box-shadow: 0 0 12px rgba(124, 158, 255, 0.5);
}

/* 历史记录面板(右侧滑出抽屉) */
.history-panel {
    position: fixed;
    top: 60px;
    right: -340px;          /* 默认隐藏在右侧外 */
    width: 320px;
    max-width: calc(100vw - 24px);
    height: calc(100% - 60px);
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.history-panel.open { right: 0; }
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev2);
}
.history-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent2);
    letter-spacing: 0.5px;
}
.history-actions { display: flex; gap: 6px; }
.history-clear-btn, .history-close-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.history-clear-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 107, 107, 0.1); }
.history-close-btn:hover { color: var(--text); border-color: var(--text-dim); }
.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.history-empty {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    padding: 40px 16px;
    line-height: 1.8;
}
.history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.history-item:hover {
    border-color: var(--accent2);
    background: rgba(124, 158, 255, 0.08);
    transform: translateX(-3px);
}
.history-item-mode {
    font-size: 10px;
    color: var(--accent);
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
    font-weight: 600;
}
.history-item-expr {
    flex: 1;
    color: var(--text);
    overflow-x: auto;
    white-space: nowrap;
    font-size: 15px;
}
.history-item-expr .katex { font-size: 1.05em; }
.history-item-time {
    font-size: 10px;
    color: var(--text-dim);
    flex-shrink: 0;
    font-family: "Consolas", monospace;
}

/* 企鹅降落动画 */
.penguin {
    position: fixed;
    top: -60px;
    z-index: 9999;
    pointer-events: auto;      /* 可点击 */
    cursor: pointer;
    user-select: none;
    will-change: transform, top;
    animation-name: penguinFall;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: transform 0.1s;
}
.penguin:hover { transform: scale(1.2); }
@keyframes penguinFall {
    0%   { top: -60px; transform: rotate(0deg) scale(var(--s, 1)); }
    100% { top: 105vh; transform: rotate(var(--r, 180deg)) scale(var(--s, 1)); }
}

/* 企鹅被点中:爆炸消失 */
.penguin.boom {
    animation: none;
    pointer-events: none;
    animation-name: penguinBoom;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes penguinBoom {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(2.4) rotate(45deg); opacity: 0; }
}

/* 金色西游记企鹅:金色发光 + 脉冲 */
.penguin-gold {
    filter: drop-shadow(0 0 6px #ffd166) drop-shadow(0 0 12px rgba(255, 209, 102, 0.6));
    animation-name: penguinFall, goldGlow;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1), ease-in-out;
    animation-iteration-count: 1, infinite;
}
@keyframes goldGlow {
    0%, 100% { filter: drop-shadow(0 0 6px #ffd166) drop-shadow(0 0 10px rgba(255, 209, 102, 0.5)); }
    50%      { filter: drop-shadow(0 0 12px #ffd166) drop-shadow(0 0 20px rgba(255, 209, 102, 0.9)); }
}
/* 金色爆炸:金光四射 */
.penguin.boom-gold {
    animation-name: penguinBoomGold !important;
}
@keyframes penguinBoomGold {
    0%   { transform: scale(1) rotate(0deg); opacity: 1;
           filter: drop-shadow(0 0 8px #ffd166); }
    50%  { transform: scale(3) rotate(180deg); opacity: 1;
           filter: drop-shadow(0 0 24px #ffd166) drop-shadow(0 0 40px #fff); }
    100% { transform: scale(3.8) rotate(360deg); opacity: 0;
           filter: drop-shadow(0 0 8px #ffd166); }
}

/* 红色炸弹企鹅:红色危险光晕 + 抖动 */
.penguin-bomb {
    filter: drop-shadow(0 0 5px #ff4444) drop-shadow(0 0 10px rgba(255, 68, 68, 0.6));
    animation-name: penguinFall, bombShake;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1), ease-in-out;
    animation-iteration-count: 1, infinite;
}
@keyframes bombShake {
    0%, 100% { filter: drop-shadow(0 0 5px #ff4444) drop-shadow(0 0 10px rgba(255, 68, 68, 0.5)); }
    25%      { filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px rgba(255, 0, 0, 0.8)); }
    75%      { filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px rgba(255, 0, 0, 0.8)); }
}
/* 炸弹爆炸:红色冲击波 */
.penguin.boom-bomb {
    animation-name: penguinBoomBomb !important;
}
@keyframes penguinBoomBomb {
    0%   { transform: scale(1) rotate(0deg); opacity: 1;
           filter: drop-shadow(0 0 8px #ff4444); }
    40%  { transform: scale(3.5) rotate(-90deg); opacity: 1;
           filter: drop-shadow(0 0 30px #ff0000) drop-shadow(0 0 50px #ff4444); }
    100% { transform: scale(4.5) rotate(-180deg); opacity: 0;
           filter: drop-shadow(0 0 10px #ff4444); }
}

/* ===== 哈利波特魔法生物彩蛋 ===== */
/* 金色飞贼:快速闪烁金光,翅膀振动感 */
.penguin-snitch {
    filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 16px rgba(255, 215, 0, 0.7));
    animation-name: penguinFall, snitchGlow !important;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1), ease-in-out !important;
    animation-iteration-count: 1, infinite !important;
}
@keyframes snitchGlow {
    0%, 100% { filter: drop-shadow(0 0 6px #ffd700) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 28px rgba(255, 255, 150, 1)); transform: scale(1.15); }
}
.penguin.boom-snitch { animation-name: penguinBoomSnitch !important; }
@keyframes penguinBoomSnitch {
    0%   { transform: scale(1) rotate(0); opacity: 1; filter: drop-shadow(0 0 10px #ffd700); }
    50%  { transform: scale(4) rotate(720deg); opacity: 1; filter: drop-shadow(0 0 40px #fff) drop-shadow(0 0 60px #ffd700); }
    100% { transform: scale(5) rotate(1080deg); opacity: 0; filter: drop-shadow(0 0 10px #ffd700); }
}

/* 分院帽:沉稳琥珀色光晕 */
.penguin-hat {
    filter: drop-shadow(0 0 6px #d4a574) drop-shadow(0 0 12px rgba(212, 165, 116, 0.6));
    animation-name: penguinFall, hatBounce !important;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1), ease-in-out !important;
    animation-iteration-count: 1, infinite !important;
}
@keyframes hatBounce {
    0%, 100% { filter: drop-shadow(0 0 5px #d4a574); }
    50%      { filter: drop-shadow(0 0 14px #d4a574) drop-shadow(0 0 22px rgba(212, 165, 116, 0.8)); }
}
.penguin.boom-hat { animation-name: penguinBoomHat !important; }
@keyframes penguinBoomHat {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    50%  { transform: scale(3.2) rotate(360deg); opacity: 1;
           filter: drop-shadow(0 0 30px #d4a574) drop-shadow(0 0 50px #ffd700); }
    100% { transform: scale(4) rotate(540deg); opacity: 0; }
}

/* 伏地魔:阴森绿色阿瓦达索命光 */
.penguin-voldemort {
    filter: drop-shadow(0 0 7px #2dd4bf) drop-shadow(0 0 14px rgba(45, 212, 191, 0.7));
    animation-name: penguinFall, voldemortDark !important;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1.1), ease-in-out !important;
    animation-iteration-count: 1, infinite !important;
}
@keyframes voldemortDark {
    0%, 100% { filter: drop-shadow(0 0 6px #2dd4bf) drop-shadow(0 0 12px rgba(45, 212, 191, 0.6)); }
    50%      { filter: drop-shadow(0 0 14px #00ff9d) drop-shadow(0 0 24px rgba(0, 255, 157, 0.9)); }
}
.penguin.boom-voldemort { animation-name: penguinBoomVoldemort !important; }
@keyframes penguinBoomVoldemort {
    0%   { transform: scale(1) rotate(0); opacity: 1; filter: drop-shadow(0 0 10px #2dd4bf); }
    40%  { transform: scale(3.8) rotate(-180deg); opacity: 1;
           filter: drop-shadow(0 0 35px #00ff9d) drop-shadow(0 0 55px #2dd4bf); }
    100% { transform: scale(4.8) rotate(-360deg); opacity: 0; filter: drop-shadow(0 0 10px #2dd4bf); }
}

/* 分数牌(右上角)*/
.score-board {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 9998;
    background: rgba(22, 27, 34, 0.9);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 8px 16px;
    font-family: "Consolas", monospace;
    color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(100, 255, 218, 0.25);
    backdrop-filter: blur(6px);
    display: none;             /* 默认隐藏,游戏开始才显示 */
    align-items: center;
    gap: 8px;
    user-select: none;
}
.score-board.show { display: flex; }
.score-board .score-emoji { font-size: 22px; }
.score-board .score-label { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
.score-board .score-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    min-width: 32px;
    text-align: right;
}
.score-board .score-num.bump { animation: scoreBump 0.3s ease-out; }
@keyframes scoreBump {
    0%   { transform: scale(1); color: var(--accent); }
    50%  { transform: scale(1.4); color: #ffd166; }
    100% { transform: scale(1); color: var(--accent); }
}
/* 扣分:红色弹跳 */
.score-board .score-num.bump-down { animation: scoreBumpDown 0.4s ease-out; }
@keyframes scoreBumpDown {
    0%   { transform: scale(1) translateX(0); color: var(--accent); }
    20%  { transform: scale(1.3) translateX(-6px); color: #ff4444; }
    40%  { transform: scale(1.3) translateX(6px); color: #ff4444; }
    60%  { transform: scale(1.3) translateX(-4px); color: #ff4444; }
    80%  { transform: scale(1.2) translateX(4px); color: #ff4444; }
    100% { transform: scale(1) translateX(0); color: var(--accent); }
}

/* ===== 游戏遮罩:禁用代数工具,只允许点企鹅 ===== */
.game-overlay {
    position: fixed;
    inset: 0;                 /* 全屏覆盖 */
    z-index: 9990;            /* 高于工具,低于企鹅(9999)和分数牌(9998)*/
    background: rgba(13, 17, 23, 0.45);
    backdrop-filter: blur(1.5px);
    cursor: crosshair;
    display: none;
}
.game-overlay.show { display: block; }
/* 遮罩上的规则说明(居中多行)*/
.game-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 9991;
    display: none;
}
.game-tip.show { display: block; }
.game-tip-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 3px;
    text-shadow: 0 0 14px rgba(100, 255, 218, 0.6);
    margin-bottom: 18px;
    opacity: 0.7;
}
.game-tip-rules {
    font-size: 16px;
    line-height: 2;
    color: var(--text-dim);
    opacity: 0.55;
}
.game-tip-rules span { font-size: 20px; vertical-align: middle; }
.game-tip-rules .plus  { color: #ffd166; font-weight: 600; }
.game-tip-rules .minus { color: #ff6b6b; font-weight: 600; }
/* 工具界面在游戏时整体置灰(遮罩已挡住点击,这是视觉强化)*/
body.game-on .layout { filter: grayscale(0.3) brightness(0.7); transition: filter 0.3s; }

/* ===== 主布局 ===== */
.layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100% - 60px);
}

/* ===== 左侧控制面板 ===== */
.panel {
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    padding: 18px;
    overflow-y: auto;
}

.panel-block {
    background: var(--bg-elev2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
}

.panel-block h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.block-header h2 { margin-bottom: 0; }

/* ===== 函数输入行 ===== */
.func-list { display: flex; flex-direction: column; gap: 8px; }

.func-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 8px;
    transition: border-color 0.2s;
}
.func-row:focus-within { border-color: var(--accent); }

.func-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.func-prefix {
    color: var(--text-dim);
    font-size: 12px;
    flex-shrink: 0;
}

.func-row input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
    outline: none;
    min-width: 0;
}
.func-row input::placeholder { color: #555; }

.del-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.del-btn:hover { color: var(--danger); background: rgba(255, 107, 107, 0.1); }
.del-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* 键盘触发按钮(同 del-btn 风格) */
.kbd-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.kbd-btn:hover { color: var(--accent); background: rgba(100, 255, 218, 0.1); }

/* 函数行容器样式见下方 .func-wrapper(显示态整行公式);此处仅保留通用圆角 */
.func-item-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
}

.mini-btn {
    background: var(--bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s;
}
.mini-btn:hover { background: var(--accent); color: var(--bg); }

.hint {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-top: 10px;
}

/* ===== 示例按钮网格 ===== */
.example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.ex-btn {
    background: var(--bg);
    color: var(--accent2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    text-align: center;
    min-height: 40px;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ex-btn:hover {
    border-color: var(--accent2);
    background: rgba(124, 158, 255, 0.1);
}
.ex-btn .katex { font-size: 1.05em; color: var(--text); }
.ex-btn:hover .katex { color: var(--accent); }

/* ===== 函数行:整行显示 KaTeX 公式,点击弹键盘编辑 ===== */
.func-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.func-wrapper:hover { background: rgba(100, 255, 218, 0.05); border-color: var(--text-dim); }
/* 正在编辑的行:青色高亮边框 */
.func-wrapper.editing {
    border-color: var(--accent) !important;
    background: rgba(100, 255, 218, 0.08);
    box-shadow: 0 0 0 1px rgba(100, 255, 218, 0.3);
}
.func-prefix-katex {
    color: var(--text-dim);
    font-size: 14px;
    flex-shrink: 0;
}
.func-formula {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    overflow-x: auto;
    white-space: nowrap;
    padding: 2px 0;
}
.func-formula .katex { font-size: 1.1em; }
.func-preview-empty { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* ===== 数学符号键盘(弹出层) ===== */
.math-keyboard {
    position: fixed;
    background: var(--bg-elev2);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(100, 255, 218, 0.2);
    z-index: 1000;
    width: 320px;
    max-width: calc(100vw - 32px);
    animation: mkFadeIn 0.15s ease-out;
}
@keyframes mkFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mk-title {
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mk-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.mk-close:hover { color: var(--danger); }
.mk-section {
    margin-bottom: 8px;
}
.mk-section-label {
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mk-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mk-key {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 13px;
    min-width: 30px;
    text-align: center;
    transition: all 0.12s;
    font-family: "Consolas", "Courier New", monospace;
}
.mk-key:hover {
    border-color: var(--accent);
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent);
    transform: translateY(-1px);
}
.mk-key:active { transform: translateY(0); }
.mk-key .katex { font-size: 1em; pointer-events: none; }
/* 让按键里的 KaTeX 颜色继承 */
.mk-key:hover .katex { color: inherit; }

/* 操作键:退格 / 清空(琥珀色)/ 完成(绿色)*/
.mk-key-op {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    color: var(--text-dim);
}
.mk-key-op:hover { color: #ffd166; border-color: #ffd166; background: rgba(255, 209, 102, 0.1); }
.mk-key-done {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    color: var(--ok);
    border-color: rgba(105, 219, 124, 0.4);
    flex: 1;
}
.mk-key-done:hover { background: rgba(105, 219, 124, 0.15); border-color: var(--ok); }

/* ===== 范围控制 ===== */
.range-row {
    display: grid;
    grid-template-columns: 60px 1fr 60px 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.range-row label {
    font-size: 12px;
    color: var(--text-dim);
}
.range-row input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}
.range-row input:focus { border-color: var(--accent); }

/* ===== 操作按钮 ===== */
.primary-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #0d1117;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(100, 255, 218, 0.35);
}
.primary-btn:active { transform: translateY(0); }

.ghost-btn {
    width: 100%;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.ghost-btn:hover { color: var(--text); border-color: var(--text-dim); }

/* ===== 状态提示 ===== */
.status {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    line-height: 1.5;
    display: none;
}
.status.error {
    display: block;
    background: rgba(255, 107, 107, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.3);
}
.status.ok {
    display: block;
    background: rgba(105, 219, 124, 0.12);
    color: var(--ok);
    border: 1px solid rgba(105, 219, 124, 0.3);
}

/* ===== 右侧绘图区 ===== */
.plot-area {
    position: relative;
    background: var(--bg);
    padding: 16px;
    overflow: hidden;
}

/* ===== 保存确认弹窗 ===== */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-mask.show {
    display: flex;
    animation: maskFade 0.2s ease-out;
}
@keyframes maskFade { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    animation: boxPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes boxPop {
    from { transform: scale(0.85) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-icon { font-size: 40px; margin-bottom: 10px; }
.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}
.modal-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 22px;
}
.modal-desc b { color: var(--accent); font-weight: 600; }
.modal-actions { display: flex; gap: 12px; }
.modal-btn {
    flex: 1;
    padding: 11px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.modal-cancel {
    background: transparent;
    color: var(--text-dim);
}
.modal-cancel:hover { color: var(--text); border-color: var(--text-dim); }
.modal-confirm {
    background: linear-gradient(135deg, var(--ok), #4dd07a);
    color: #0d1117;
    border-color: transparent;
}
.modal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(105, 219, 124, 0.4);
}

#plot {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elev);
}

/* ===== 3D 透明度滑块(绘图区右侧边缘,竖直) ===== */
.opacity-slider {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    background: rgba(22, 27, 34, 0.85);
    border: 1px solid var(--border);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    z-index: 5;
}
.opacity-slider[hidden] { display: none; }
.opacity-label {
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: 600;
}
.opacity-value {
    font-size: 11px;
    color: var(--text);
    font-family: "Consolas", monospace;
    min-height: 14px;
}
/* 竖直 range(现代浏览器用 writing-mode)*/
.opacity-slider input[type="range"] {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;        /* Firefox */
    width: 8px;
    height: 160px;
    background: transparent;
    cursor: pointer;
}
.opacity-slider input[type="range"]:focus { outline: none; }

/* ===== 滚动条美化 ===== */
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.panel::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ===== 响应式:窄屏变上下布局 ===== */
@media (max-width: 860px) {
    html, body { overflow: auto; }
    .layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .panel {
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .plot-area { height: 500px; }
}