/* ============================================
   博雅中学 · 解谜档案 - 全局样式
   ============================================ */

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size: clamp(13px, 1.2vw + 8px, 18px); }
body { font-family: "Microsoft YaHei","微软雅黑","宋体",sans-serif; background:#0a0a0f; color:#333; overflow-x:hidden; height:100vh; }
button { cursor:pointer; font-family:inherit; }
input { font-family:inherit; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#1a1a2e; }
::-webkit-scrollbar-thumb { background:#3a3a5c; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#5a5a7c; }
.hidden { display:none !important; }

/* ===== 启动画面 - 微信聊天风格 ===== */
#game-launcher {
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:#0a0a0f;
    z-index:9999;
}
.wx-container {
    width:420px; height:620px;
    background:#111;
    border-radius:8px;
    overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 0 80px rgba(0,0,0,0.6);
    animation:wxFadeIn 0.8s ease;
}
@keyframes wxFadeIn {
    from { opacity:0; transform:scale(0.95) translateY(10px); }
    to { opacity:1; transform:scale(1) translateY(0); }
}

/* 顶部栏 */
.wx-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 12px;
    background:#1e1e1e;
    border-bottom:1px solid #2a2a2a;
    flex-shrink:0;
}
.wx-back { color:#07c160; font-size:22px; cursor:pointer; line-height:1; }
.wx-title { color:#fff; font-size:16px; font-weight:500; letter-spacing:1px; }
.wx-menu { color:#888; font-size:18px; cursor:pointer; line-height:1; }

/* 聊天区域 */
.wx-chat {
    flex:1; overflow-y:auto; padding:12px 16px 20px;
    background: #0d0d0d;
    scroll-behavior:smooth;
}
.wx-chat::-webkit-scrollbar { width:4px; }
.wx-chat::-webkit-scrollbar-track { background:transparent; }
.wx-chat::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }

/* 时间戳 */
.wx-time {
    text-align:center; color:#555; font-size:11px;
    margin:16px 0; animation:msgIn 0.5s ease forwards;
}
.wx-time:first-of-type { margin-top:4px; }

/* 消息行 */
.wx-row {
    display:flex; align-items:flex-end; gap:8px;
    margin-bottom:14px;
    animation:msgIn 0.5s ease forwards;
}
.wx-row-friend { justify-content:flex-start; }
.wx-row-self { justify-content:flex-end; }

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

/* 头像 */
.wx-avatar {
    width:34px; height:34px; border-radius:4px;
    background:#07c160; color:#fff; font-size:14px; font-weight:bold;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.wx-avatar-self {
    background:#5a5a7a;
    order:1;
}

/* 气泡 */
.wx-bubble {
    max-width:280px; padding:10px 14px;
    border-radius:6px; font-size:14px; line-height:1.7;
    word-break:break-word;
    position:relative;
}
.wx-bubble-friend {
    background:#262626; color:#e0e0e0;
    border-top-left-radius:2px;
}
.wx-bubble-self {
    background:#07c160; color:#fff;
    border-top-right-radius:2px;
    order:0;
}

/* 正在输入动画 */
.wx-typing { display:flex; align-items:center; gap:5px; padding:14px 16px; }
.wx-typing span {
    width:7px; height:7px; border-radius:50%; background:#777;
    animation:typingDot 1.4s infinite ease-in-out;
}
.wx-typing span:nth-child(2) { animation-delay:0.2s; }
.wx-typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingDot {
    0%, 60%, 100% { transform:translateY(0); opacity:0.3; }
    30% { transform:translateY(-8px); opacity:1; }
}

/* 链接卡片气泡 */
.wx-bubble-link {
    background:#1a1a2e; color:#ccc;
    border-top-left-radius:2px;
    cursor:pointer;
    padding:0;
    display:flex;
    transition:all 0.2s;
    width:280px;
}
.wx-bubble-link:hover {
    background:#222240;
    transform:translateY(-1px);
}
.wx-link-icon {
    width:48px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#d4a847,#b8860b);
    font-size:24px; border-radius:6px 0 0 6px;
    flex-shrink:0;
}
.wx-link-body { padding:10px 14px; flex:1; }
.wx-link-title { color:#d4a847; font-size:15px; font-weight:bold; margin-bottom:2px; }
.wx-link-url { color:#7a7a9a; font-size:11px; margin-bottom:2px; }
.wx-link-note { color:#07c160; font-size:11px; }

/* 回复框底部提示 */
.wx-reply-bar {
    display:flex; align-items:center; gap:10px; padding:10px 16px 12px;
    background:#1e1e1e; border-top:1px solid #2a2a2a; flex-shrink:0;
}
.wx-reply-input {
    flex:1; background:#2a2a2a; border:none; border-radius:4px;
    padding:8px 12px; color:#ccc; font-size:14px; outline:none;
}
.wx-reply-input::placeholder { color:#555; }
.wx-reply-btn {
    background:#07c160; border:none; border-radius:4px;
    color:#fff; font-size:14px; padding:8px 16px; font-weight:bold;
    transition:background 0.2s;
    min-width:52px;
}
.wx-reply-btn:hover:not(:disabled) { background:#06ad56; }
.wx-reply-btn:disabled { background:#2a4a3a; color:#6a8a7a; cursor:default; }

/* 继续游戏按钮 */
.wx-continue {
    text-align:center; color:#555; font-size:12px; cursor:pointer;
    margin-top:18px; padding:8px 0;
    transition:color 0.2s;
}
.wx-continue:hover { color:#07c160; }

/* 链接脉冲动画（最后一步时提示点击） */
.wx-link-pulse { animation:linkPulse 1s ease 3; }
@keyframes linkPulse {
    0%, 100% { box-shadow:0 0 0 0 rgba(212,168,71,0); }
    50% { box-shadow:0 0 12px 3px rgba(212,168,71,0.4); }
}
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* 启动画面 F11 提示 */
.wx-launcher-hint {
    text-align:center; margin-top:16px;
    color:#555; font-size:12px;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.wx-launcher-hint .hint-close {
    color:#444; cursor:pointer; font-size:14px;
    transition:color 0.2s;
}
.wx-launcher-hint .hint-close:hover { color:#888; }
.wx-launcher-hint.hidden { display:none; }

/* ===== 游戏容器 ===== */
#game-container { height:100vh; display:flex; flex-direction:column; }

/* ===== 浏览器框架 ===== */
#browser {
    flex:1; display:flex; flex-direction:column;
    background:#1a1a2e; border-radius:8px 8px 0 0;
    box-shadow:0 0 60px rgba(0,0,0,0.5);
}
#browser-titlebar {
    display:flex; align-items:center; gap:10px;
    padding:8px 16px; background:#2a2a3e; border-radius:8px 8px 0 0;
    -webkit-app-region:drag;
}
.win-dots { display:flex; gap:6px; }
.dot { width:12px; height:12px; border-radius:50%; }
.dot.close { background:#ff5f57; }
.dot.min { background:#ffbd2e; }
.dot.max { background:#28c840; }
#browser-title { color:#888; font-size:12px; flex:1; text-align:center; }

#browser-toolbar {
    display:flex; align-items:center; gap:6px;
    padding:6px 12px; background:#1e1e32; border-bottom:1px solid #2a2a3e;
    position:relative;
}
.nav-btn {
    background:#2a2a3e; border:none; color:#888; padding:4px 10px;
    border-radius:4px; font-size:14px; line-height:1;
    transition:all 0.2s;
}
.nav-btn:hover { background:#3a3a5c; color:#ddd; }
.nav-btn:disabled { opacity:0.3; }

#url-bar {
    flex:1; display:flex; align-items:center; gap:6px;
    background:#0d0d1a; border:1px solid #2a2a3e; border-radius:16px;
    padding:4px 12px; max-width:600px;
}
#url-icon { color:#4a4a6a; font-size:12px; }
#url-input {
    flex:1; background:transparent; border:none; color:#aaa;
    font-size:13px; outline:none;
}

#game-clock { color:#555; font-size:11px; white-space:nowrap; }

#url-hint {
    position:absolute; top:100%; left:12px; z-index:100;
    background:#2a2a1a; border:1px solid #4a4a2a; border-radius:4px;
    padding:4px 10px; font-size:11px; color:#d4a847;
    white-space:nowrap; margin-top:4px; cursor:pointer;
    animation: fadeIn 0.5s ease-out;
}

/* ===== 标签栏 ===== */
#browser-tabs {
    display:flex; background:#16162a; padding-top:4px; gap:2px;
    border-bottom:1px solid #2a2a3e; min-height:34px;
}
.tab {
    display:flex; align-items:center; gap:4px;
    padding:6px 14px; background:#1e1e32; color:#888;
    font-size:12px; border-radius:6px 6px 0 0; cursor:pointer;
    transition:all 0.2s; position:relative;
    border:1px solid transparent; border-bottom:none;
    user-select:none;
}
.tab:hover { background:#2a2a3e; color:#aaa; }
.tab.active { background:#2a2a4a; color:#d4a847; border-color:#2a2a3e; }
.tab-close { margin-left:4px; font-size:14px; opacity:0.5; }
.tab-close:hover { opacity:1; color:#ff5f57; }
.badge {
    background:#ff5f57; color:#fff; font-size:10px; padding:1px 6px;
    border-radius:10px; font-weight:bold; margin-left:2px;
}

/* ===== 内容区域 ===== */
#browser-content {
    flex:1; position:relative; overflow:hidden; background:#0d0d1a;
}
.tab-content { display:none; position:absolute; inset:0; overflow-y:auto; }
.tab-content.active { display:block; }

/* ===== 状态栏 ===== */
#browser-statusbar {
    display:flex; justify-content:space-between; padding:3px 12px;
    background:#1a1a2e; border-top:1px solid #2a2a3e;
    color:#555; font-size:11px;
}
#progress-value { color:#d4a847; font-weight:bold; }
#reset-game-btn { cursor:pointer; color:#555; }
#reset-game-btn:hover { color:#ff5f57; }

/* ============================================
   学校官网样式
   ============================================ */
#school-site {
    max-width:1100px; margin:0 auto;
    background:#fff url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(0,0,0,0.015)"/></svg>');
    min-height:100%;
}
#school-header {
    background:linear-gradient(135deg,#8b1a1a,#c0392b,#8b1a1a);
    padding:20px 30px; color:#fff;
    position:relative; overflow:hidden;
}
#school-header::before {
    content:''; position:absolute; inset:0;
    background:url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M30 0L60 30L30 60L0 30Z" fill="rgba(255,255,255,0.02)"/></svg>');
    background-size:60px 60px;
    opacity:0.5;
}
#school-logo {
    display:flex; align-items:center; gap:20px;
}
#school-logo img { width:64px; height:64px; object-fit:contain; }
#school-title { font-size:32px; letter-spacing:6px; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
#school-subtitle { font-size:13px; opacity:0.8; letter-spacing:2px; margin-top:4px; }

#school-nav {
    display:flex; background:#8b1a1a; border-bottom:3px solid #d4a847;
}
#school-nav .nav-item {
    padding:12px 22px; color:#eee; text-decoration:none; font-size:14px;
    transition:all 0.2s; border-right:1px solid rgba(255,255,255,0.1);
}
#school-nav .nav-item:hover, #school-nav .nav-item.active {
    background:#a82828; color:#fff;
}

/* 面包屑导航 */
.breadcrumb {
    font-size:12px; color:#999; margin-bottom:12px; padding-bottom:6px;
    border-bottom:1px solid #eee;
}
.breadcrumb a { color:#1a5276; text-decoration:none; }
.breadcrumb a:hover { color:#c0392b; text-decoration:underline; }

/* 滚动公告栏（2018经典风格） */
#notice-bar {
    display:flex; align-items:center; gap:0;
    background:#fff8f0; border-bottom:1px solid #e8ddd0;
    padding:0; font-size:13px; height:32px; line-height:32px;
}
#notice-bar-label {
    background:#c0392b; color:#fff; padding:0 14px;
    font-size:12px; font-weight:bold; letter-spacing:1px;
    flex-shrink:0; height:32px; line-height:32px;
}
#notice-bar-text {
    flex:1; overflow:hidden; padding:0 12px; color:#a0522d;
    height:32px; line-height:32px;
    white-space:nowrap;
}
#notice-marquee {
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    animation:marquee 30s linear infinite;
}
@keyframes marquee {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes marqueeSeamless {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}

.school-page { display:none; padding:25px 30px; }
.school-page.active { display:block; }
.school-page h2 { color:#8b1a1a; font-size:22px; border-bottom:2px solid #d4a847; padding-bottom:8px; margin-bottom:20px; }
.school-page h3 { color:#333; font-size:16px; margin:15px 0 8px; }
.school-page p { line-height:1.9; color:#444; font-size:14px; margin-bottom:10px; }

/* 横幅轮播 */
#banner-carousel {
    height:300px; border-radius:8px; overflow:hidden; margin-bottom:20px;
    position:relative;
}
.banner-slide { background-size:cover !important; background-position:center !important; }
.banner-slide {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 1s;
}
.banner-slide::before {
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,0.35); z-index:1;
}
.banner-slide.active { opacity:1; }
.banner-text { text-align:center; color:#fff; position:relative; z-index:2; }
.banner-text h2 { font-size:28px; border:none; padding:0; margin-bottom:10px; color:#fff; }
.banner-text p { font-size:16px; color:rgba(255,255,255,0.8); }

/* 首页网格（主栏+侧栏） */
.home-grid { display:flex; gap:20px; align-items:flex-start; }
.home-main { flex:1; min-width:0; }
.home-sidebar { width:240px; flex-shrink:0; }
.home-section {
    background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px; padding:16px; margin-bottom:16px;
}
.home-section h3 { margin-top:0; border-bottom:1px solid #ddd; padding-bottom:8px; font-size:15px; }
.news-list, .notice-list { list-style:none; }
.news-list li, .notice-list li {
    padding:7px 0; border-bottom:1px dashed #e0e0e0; font-size:13px;
    display:flex; justify-content:space-between;
}
.news-list li a { color:#1a5276; text-decoration:none; }
.news-list li a:hover { color:#c0392b; text-decoration:underline; }
.news-list li span, .notice-list li span { color:#999; font-size:12px; white-space:nowrap; }
.more-link { color:#c0392b !important; font-size:12px; }
.more-link:hover { text-decoration:none !important; }

/* 侧栏 */
.sidebar-box {
    background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px;
    padding:14px; margin-bottom:14px;
}
.sidebar-box h4 {
    font-size:14px; color:#8b1a1a; margin:0 0 10px 0;
    padding-bottom:6px; border-bottom:2px solid #d4a847;
}
.campus-gallery {
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.campus-thumb {
    height:56px; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:rgba(255,255,255,0.6);
}
.sidebar-links { list-style:none; margin:0; padding:0; }
.sidebar-links li {
    padding:6px 0; border-bottom:1px dashed #eee; font-size:13px;
}
.sidebar-links li a { color:#1a5276; text-decoration:none; }
.sidebar-links li a:hover { color:#c0392b; text-decoration:underline; }
.stats-list { list-style:none; margin:0; padding:0; }
.stats-list li {
    padding:5px 0; font-size:13px; color:#555;
    display:flex; justify-content:space-between;
    border-bottom:1px dotted #eee;
}
.stats-list li span { color:#c0392b; font-weight:bold; }

/* 首页快捷入口 */
.home-links {
    background:#f0f4f8; border:1px solid #d0d8e0; border-radius:6px; padding:16px; margin-top:4px;
}
.home-links h3 { margin-top:0; border-bottom:1px solid #d0d8e0; padding-bottom:8px; font-size:15px; }
.home-links ul { list-style:none; }
.home-links li {
    padding:8px 0; border-bottom:1px dashed #dde4ec; font-size:13px;
    display:flex; justify-content:space-between;
}
.home-links li a { color:#1a5276; text-decoration:none; }
.home-links li a:hover { color:#c0392b; text-decoration:underline; }
.home-links li span { color:#999; font-size:12px; white-space:nowrap; }

/* 留言墙 */
#page-message { }
.message-desc { color:#888; font-size:13px; margin-bottom:16px; }
#message-board { }
.message-placeholder {
    text-align:center; color:#ccc; padding:40px; font-size:14px;
}
.message-post {
    background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px;
    padding:14px 18px; margin-bottom:12px;
}
.message-post .msg-header {
    display:flex; justify-content:space-between; margin-bottom:8px;
    font-size:12px; color:#888;
}
.message-post .msg-author { color:#c0392b; font-weight:bold; }
.message-post .msg-time { color:#999; }
.message-post .msg-content {
    font-size:14px; line-height:1.9; color:#333;
    white-space:pre-wrap;
}
.message-post .msg-footer {
    margin-top:8px; padding-top:6px; border-top:1px solid #eee;
    font-size:11px; color:#bbb;
}
.message-post.unread {
    background:#f0f7ff; border-color:#b0c8e0;
}
.message-post .msg-badge {
    display:inline-block; padding:1px 6px; border-radius:3px;
    font-size:10px; background:#c0392b; color:#fff; margin-left:6px;
}

/* 关于页 */
#school-motto-box {
    background:linear-gradient(135deg,#8b1a1a,#a82828); color:#fff;
    padding:16px; border-radius:6px; text-align:center; margin-top:16px;
}
#school-motto { color:#d4a847 !important; font-size:18px !important; letter-spacing:4px; margin:0 !important; }

/* 新闻 */
.news-article {
    background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px;
    padding:16px; margin-bottom:12px;
}
.news-article h3 { margin-top:0; color:#8b1a1a; }
.news-meta { color:#999; font-size:12px !important; }

/* 学生列表 */
#student-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px; margin-bottom:20px;
}
.student-card {
    background:#f0f4f8; border:1px solid #dde4ec; border-radius:6px;
    padding:12px; text-align:center; font-size:13px;
}
.student-card .avatar {
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#3498db,#2980b9);
    color:#fff; display:flex; align-items:center; justify-content:center;
    margin:0 auto 6px; font-size:18px;
}
.student-roster {
    background:#f9f9f9; border:1px solid #e0e0e0; border-radius:6px; padding:16px;
}
.roster-count { color:#666; font-size:13px !important; }
#student-list {
    columns:3; list-style:none; padding:0;
}
#student-list li {
    padding:4px 0; font-size:13px; color:#444;
    break-inside:avoid;
}

/* 校史 */
.timeline-item {
    padding:12px 0; border-left:3px solid #c0392b; padding-left:16px;
    margin-bottom:12px; position:relative;
}
.timeline-item::before {
    content:''; position:absolute; left:-7px; top:16px;
    width:11px; height:11px; border-radius:50%; background:#c0392b;
}
.timeline-item h4 { color:#8b1a1a; margin-bottom:4px; }

/* 毕业相册 */
.photo-album { text-align:center; }
.photo-item { display:inline-block; }
#graduation-photo {
    border:1px solid #ddd; border-radius:4px; max-width:100%;
}
.photo-count { color:#888; font-size:13px; }

/* 404页面 */
.error-page { text-align:center; padding:60px 20px; }
.error-page h1 { font-size:96px; color:#c0392b; margin-bottom:10px; }
.error-page h2 { color:#666; font-size:24px; border:none; margin-bottom:16px; }
.error-page p { color:#888; font-size:14px; }
.error-page .error-hint { margin-top:20px; color:#999; font-size:13px; }
.error-page .error-hint a { color:#1a5276; }
.error-page hr { margin:30px auto; max-width:200px; border-color:#eee; }
.error-page .error-footer { color:#bbb; font-size:12px; }

/* 页脚（2018风格） */
#school-footer {
    background:#8b1a1a; color:rgba(255,255,255,0.7); text-align:center;
    padding:14px 16px; font-size:12px; line-height:2;
    border-top:4px solid #d4a847;
}
#school-footer a { color:rgba(255,255,255,0.6); text-decoration:none; }
#school-footer a:hover { color:#fff; text-decoration:underline; }
#school-footer p { margin:2px 0; }
.footer-links { margin-bottom:4px; font-size:12px; }
.footer-links a { margin:0 4px; }
.footer-visitor { color:rgba(255,255,255,0.4); font-size:11px; margin-top:4px; }
#visitor-count { color:#d4a847; font-weight:bold; }

/* ============================================
   邮箱系统
   ============================================ */
#email-system {
    max-width:800px; margin:0 auto; background:#fff; height:100%; overflow-y:auto;
}
#email-header {
    background:#2c3e50; color:#fff; padding:16px 20px;
    display:flex; justify-content:space-between; align-items:center;
}
#email-header h2 { font-size:18px; border:none; padding:0; margin:0; color:#fff; }
.email-user { color:#95a5a6; font-size:13px; }
#email-register { padding:30px 20px; }
.register-box { max-width:400px; margin:0 auto; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; padding:30px; }
.register-box h3 { font-size:18px; margin:0 0 6px 0; color:#2c3e50; border:none; padding:0; }
.register-desc { color:#888; font-size:13px; margin-bottom:20px; }
.register-field { margin-bottom:16px; }
.register-field label { display:block; color:#555; font-size:13px; margin-bottom:4px; font-weight:bold; }
.register-field input { width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:4px; font-size:14px; box-sizing:border-box; }
.register-field input:focus { border-color:#2c3e50; outline:none; }
.register-btn { width:100%; padding:10px; background:#2c3e50; color:#fff; border:none; border-radius:4px; font-size:14px; cursor:pointer; }
.register-btn:hover { background:#34495e; }
#email-inbox { padding:0; }
.email-list-header {
    display:grid; grid-template-columns:120px 1fr 100px;
    padding:10px 20px; background:#f5f5f5; font-weight:bold;
    font-size:13px; color:#666; border-bottom:1px solid #ddd;
}
.email-item {
    display:grid; grid-template-columns:120px 1fr 100px;
    padding:12px 20px; font-size:13px; border-bottom:1px solid #eee;
    cursor:pointer; transition:background 0.2s;
}
.email-item:hover { background:#f0f7ff; }
.email-item.unread { font-weight:bold; background:#fafcff; }
.email-item .sender { color:#2c3e50; }
.email-item .subject { color:#333; }
.email-item .date { color:#999; font-size:12px; text-align:right; }
.email-item .sender.unknown { color:#c0392b; }

#email-reader {
    padding:20px; max-width:800px; margin:0 auto; background:#fff; min-height:100%;
}
#email-reader-header {
    border-bottom:1px solid #ddd; padding-bottom:12px; margin-bottom:16px;
}
#email-subject-display { font-size:18px; font-weight:bold; display:block; margin-bottom:8px; color:#2c3e50; }
#email-sender-display { color:#888; font-size:13px; }
#email-date-display { color:#888; font-size:12px; float:right; }
#email-body {
    line-height:2; font-size:14px; color:#333;
    white-space:pre-wrap;
}
#email-reader button {
    margin-top:16px; padding:8px 20px; background:#2c3e50; color:#fff;
    border:none; border-radius:4px; font-size:13px;
}
#email-reader button:hover { background:#34495e; }

/* ============================================
   监控系统 - 2018 DVR风格
   ============================================ */
#monitor-system {
    max-width:1000px; margin:0 auto; background:#f0f2f5; min-height:100%;
    padding:0;
}
#monitor-header {
    background:linear-gradient(135deg,#1a3a6c,#2a5a9c,#1a3a6c);
    color:#fff; padding:14px 24px;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:3px solid #0f2a4f;
}
#monitor-header h2 { color:#fff; font-size:16px; border:none; padding:0; margin:0; font-weight:bold; }
#monitor-header h2 span { font-size:18px; }
#monitor-status { color:#7fdb7f; font-size:12px; }

/* 监控登录 - 标准后台登录 */
#monitor-login {
    display:flex; justify-content:center; align-items:center;
    min-height:350px; background:#f0f2f5;
}
#monitor-login.hidden { display:none; }
.monitor-login-box {
    background:#fff; border:1px solid #d0d5dd; border-radius:6px;
    padding:32px 40px; text-align:center; max-width:380px;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
    width:100%;
}
.monitor-login-box h3 { color:#1a3a6c; font-size:16px; margin:0 0 4px 0; border:none; padding:0; }
.monitor-login-box .login-desc { color:#888; font-size:13px; margin-bottom:20px; }
.login-field { margin-bottom:14px; text-align:left; }
.login-field label { color:#555; font-size:13px; display:block; margin-bottom:4px; font-weight:bold; }
.login-field input {
    width:100%; padding:8px 12px; background:#fff;
    border:1px solid #d0d5dd; color:#333; border-radius:4px;
    font-size:14px; outline:none; box-sizing:border-box;
}
.login-field input:focus { border-color:#1a3a6c; box-shadow:0 0 0 2px rgba(26,58,108,0.12); }
.monitor-login-box button {
    padding:9px 32px; background:#1a3a6c; color:#fff; border:none;
    border-radius:4px; font-size:14px; font-weight:bold; margin-top:4px; cursor:pointer;
}
.monitor-login-box button:hover { background:#2a5a9c; }
.monitor-login-box .login-hint { color:#999; font-size:12px; margin-top:12px; }

/* 摄像头网格 */
#camera-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
    padding:16px 20px;
}
.camera-feed {
    background:#fff; border:1px solid #ddd; border-radius:4px;
    overflow:hidden; position:relative; aspect-ratio:4/3;
    display:flex; flex-direction:column;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.camera-feed .feed-canvas { flex:1; width:100%; background:#111; }
.camera-feed .cam-label {
    background:#f5f5f5; color:#555; font-size:11px;
    padding:5px 10px;
    display:flex; justify-content:space-between;
    border-top:1px solid #e0e0e0;
}
.camera-feed .cam-label .cam-name { color:#1a3a6c; font-weight:bold; }
.camera-feed .cam-label .cam-time { color:#999; }
.camera-feed { cursor:pointer; }
.camera-feed:hover { border-color:#1a3a6c; box-shadow:0 2px 8px rgba(26,58,108,0.15); }
.camera-feed.locked .cam-label .cam-name { color:#999; }
.camera-feed.locked canvas { filter:grayscale(0.8); opacity:0.6; }
.camera-feed.static canvas { filter:grayscale(1); }
.camera-feed.cam13 canvas { filter:none; }

#cam13-feed { grid-column:span 4; max-height:250px; cursor:pointer; }
#cam13-feed .feed-canvas { min-height:180px; }
.cam13-glitch { animation:glitch 0.3s infinite; }

@keyframes glitch {
    0% { transform:translate(0); filter:hue-rotate(0deg); }
    20% { transform:translate(-3px,2px); filter:hue-rotate(90deg); }
    40% { transform:translate(3px,-1px); filter:hue-rotate(180deg); }
    60% { transform:translate(-2px,3px); filter:hue-rotate(270deg); }
    80% { transform:translate(2px,-2px); filter:hue-rotate(0deg); }
    100% { transform:translate(0); filter:hue-rotate(0deg); }
}

/* 监控平台系统日志 */
#monitor-log {
    margin:0 20px 16px; background:#fff;
    border:1px solid #ddd; border-radius:4px;
    overflow:hidden;
}
#monitor-log .log-header {
    background:#f5f5f5; color:#666; font-size:12px;
    padding:8px 14px; font-weight:bold;
    border-bottom:1px solid #e0e0e0;
}
#monitor-log-content {
    padding:10px 14px; font-size:12px; line-height:1.8;
    font-family: "Microsoft YaHei",sans-serif; max-height:200px; overflow-y:auto;
}
#monitor-log-content .log-line { white-space:nowrap; }
#monitor-log-content .log-time { color:#999; }

.monitor-footer {
    display:flex; justify-content:space-between;
    margin:0 20px 16px; padding:10px 0 4px;
    border-top:1px solid #ddd;
    color:#888; font-size:12px;
}
#cam-online { color:#27ae60; font-weight:bold; }
#cam-total { color:#555; }

/* 监控放大查看器 */
#camera-viewer {
    position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,0.85);
    display:none; justify-content:center; align-items:center;
    flex-direction:column;
}
#camera-viewer.active { display:flex; }
#camera-viewer .cv-header {
    display:flex; justify-content:space-between; align-items:center;
    width:700px; padding:10px 16px; margin-bottom:0;
    background:linear-gradient(135deg,#1a3a6c,#2a5a9c); color:#fff;
    border-radius:6px 6px 0 0;
}
#camera-viewer .cv-title { color:#fff; font-size:14px; font-weight:bold; letter-spacing:1px; }

/* CAM13 事件记录 */
#camera-viewer .cv-log {
    width:700px; background:#fff; border:1px solid #ddd;
    border-top:none; border-bottom:none; max-height:240px; overflow-y:auto;
}
#camera-viewer .cv-log .cv-log-header {
    background:#f5f5f5; color:#c0392b; font-size:12px; font-weight:bold;
    padding:6px 16px; border-bottom:1px solid #e0e0e0;
}
#camera-viewer .cv-log .cv-log-body { padding:12px 16px; font-size:13px; line-height:1.9; }
#camera-viewer .cv-log .cv-log-body p { margin:2px 0; color:#555; }
#camera-viewer .cv-log .cv-log-body .time { color:#999; font-size:12px; }
#camera-viewer .cv-log .cv-log-body .anomaly { color:#c0392b; font-weight:bold; }
#camera-viewer .cv-log .cv-log-body .warn { color:#c0392b; font-weight:bold; }
#camera-viewer .cv-log .cv-log-body .note { color:#999; font-size:12px; }
#camera-viewer .cv-log .cv-log-body .footer-note { color:#aaa; font-size:12px; margin-top:8px; }
#camera-viewer .cv-log .cv-log-body hr { border:none; border-top:1px solid #eee; margin:8px 0; }
#camera-viewer .cv-close { color:#fff; font-size:24px; cursor:pointer; line-height:1; padding:0 4px; opacity:0.7; }
#camera-viewer .cv-close:hover { opacity:1; }
#camera-viewer .cv-body {
    border:2px solid #1a3a6c; border-radius:4px;
    overflow:hidden; line-height:0;
    position:relative;
}
#cv-canvas { display:block; width:640px; height:400px; }
#camera-viewer .cv-footer {
    display:flex; justify-content:space-between; align-items:center;
    width:700px; padding:8px 16px; margin-top:0;
    background:#f5f5f5; border:1px solid #ddd; border-top:none;
    border-radius:0 0 6px 6px;
}
.cv-nav {
    background:#fff; border:1px solid #ccc; color:#333;
    padding:5px 16px; border-radius:4px; font-size:14px;
    transition:all 0.2s; cursor:pointer;
}
.cv-nav:hover { background:#e8eff8; border-color:#1a3a6c; }
.cv-counter { color:#888; font-size:12px; }
#cam-online { color:#27ae60; }

/* ============================================
   存档系统
   ============================================ */
#archive-system {
    max-width:800px; margin:0 auto; background:#f5f0e8; min-height:100%;
    padding:20px;
}
#archive-system h2 { color:#5c4a2a; font-size:18px; margin-bottom:8px; }
.archive-desc { color:#8a7a5a; font-size:13px; margin-bottom:16px; }
#archive-list { }
.archive-item {
    background:#fff; border:1px solid #d4c8a8; border-radius:4px;
    padding:14px 16px; margin-bottom:8px; cursor:pointer;
    transition:all 0.2s;
}
.archive-item:hover { border-color:#c0392b; background:#fcf8f0; }
.archive-item .arch-title { font-size:14px; color:#333; font-weight:bold; }
.archive-item .arch-meta { font-size:11px; color:#999; margin-top:4px; display:flex; gap:12px; }
.archive-item .arch-badge {
    display:inline-block; padding:1px 6px; border-radius:3px;
    font-size:10px; background:#c0392b; color:#fff;
}
#archive-viewer {
    background:#fff; border:1px solid #d4c8a8; border-radius:6px;
    padding:20px;
}
#archive-content { line-height:1.9; font-size:14px; color:#333; }
#archive-content .deleted-text { color:#999; text-decoration:line-through; }
#archive-content .highlight { background:#fff3cd; padding:2px 4px; }
#archive-viewer button {
    margin-top:16px; padding:8px 20px; background:#5c4a2a; color:#fff;
    border:none; border-radius:4px; font-size:13px;
}

/* ============================================
   服务器控制台 - 2018 后台管理风格
   ============================================ */
#server-console {
    max-width:720px; margin:30px auto; background:#fff; min-height:400px;
    max-height:calc(100vh - 180px);
    border:1px solid #d0d5dd; border-radius:6px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    overflow-y:auto;
}
#console-login {
    text-align:center; padding:50px 30px;
}
#console-login h2 {
    color:#1a3a6c; font-size:18px; letter-spacing:1px;
    font-weight:bold; margin:0 0 6px 0; border:none; padding:0;
}
#console-login h2 span { font-size:20px; }
.console-warn { color:#c0392b; font-size:12px; margin:0 0 24px; }
.console-input-area { margin-top:20px; }
.console-input-area label { color:#555; font-size:13px; display:block; margin-bottom:8px; font-weight:bold; }
.console-input-area input {
    background:#fff; border:1px solid #ccc; color:#333;
    padding:9px 14px; font-size:16px; border-radius:4px;
    width:220px; outline:none; letter-spacing:4px;
    text-align:center;
}
.console-input-area input:focus { border-color:#1a3a6c; box-shadow:0 0 0 2px rgba(26,58,108,0.12); }
.console-input-area button {
    padding:9px 24px; background:#1a3a6c; color:#fff; border:none;
    border-radius:4px; font-size:14px; font-weight:bold; margin-left:8px; cursor:pointer;
}
.console-input-area button:hover { background:#2a5a9c; }
.console-error { color:#c0392b; font-size:13px; margin-top:8px; font-weight:bold; }

#console-panel {
    padding:20px;
}
.console-line {
    font-family: "Microsoft YaHei","Consolas",monospace; font-size:13px; line-height:1.8;
    margin-bottom:4px; white-space:pre-wrap;
}
.console-line.system { color:#333; }
.console-line.warning { color:#d4a017; }
.console-line.error { color:#c0392b; }
.console-line.info { color:#1a5276; }
.console-line.reveal { color:#8b1a1a; font-weight:bold; font-size:15px; }
.console-line.dim { color:#999; }
.console-input-line {
    display:flex; align-items:center; gap:8px; margin-top:12px;
    color:#333;
}
.console-input-line input {
    flex:1; background:transparent; border:none; color:#333;
    font-size:13px; outline:none;
}

#ending-choices { margin-top:20px; }
.ending-choice-btn {
    display:block; width:100%; padding:14px 20px; margin-bottom:10px;
    background:#f8f9fa; border:1px solid #d0d5dd; color:#333;
    font-size:14px; border-radius:4px; text-align:left; cursor:pointer;
    transition:all 0.2s;
}
.ending-choice-btn:hover {
    background:#e8eff8; border-color:#1a3a6c;
    box-shadow:0 2px 8px rgba(26,58,108,0.12);
}

/* ============================================
   容器仪式
   ============================================ */
.redacted {
    background:#111; color:transparent; padding:0 4px;
    border-radius:2px; cursor:default;
    user-select:none;
}
#console-panel.ritual-bg {
    position:relative;
    animation: ritualBgPulse 3s ease-in-out infinite;
}
#console-panel.ritual-bg::before {
    content:''; position:absolute; inset:0; z-index:0;
    background:rgba(10,0,0,0.7);
}
#console-panel.ritual-bg #console-output { position:relative; z-index:1; }
#console-panel.ritual-bg #console-speed-btn { z-index:10; }
@keyframes ritualBgPulse {
    0%,100% { opacity:0.8; }
    50% { opacity:1; }
}
.container-ritual-btn {
    position:fixed; z-index:5000; padding:10px 22px;
    background:rgba(60,0,0,0.85); color:#ff4444; border:1px solid #ff4444;
    border-radius:4px; font-size:14px; font-weight:bold; cursor:pointer;
    font-family:monospace; letter-spacing:2px;
    animation: ritualFadeIn 0.8s ease-out;
    box-shadow:0 0 20px rgba(255,0,0,0.3);
    transition:all 0.3s;
}
.container-ritual-btn:hover {
    background:rgba(120,0,0,0.9); box-shadow:0 0 40px rgba(255,0,0,0.5);
    transform:scale(1.1);
}
.container-ritual-btn.persistent {
    background:rgba(100,0,0,0.9); border-color:#ff0000; font-size:16px;
    padding:14px 30px; animation: ritualPulse 1.5s ease-in-out infinite;
}
@keyframes ritualFadeIn {
    from { opacity:0; transform:scale(0.5); }
    to { opacity:1; transform:scale(1); }
}
@keyframes ritualPulse {
    0%,100% { box-shadow:0 0 20px rgba(255,0,0,0.3); }
    50% { box-shadow:0 0 60px rgba(255,0,0,0.7); }
}

/* 容器登记表单 */
#ritual-form-overlay {
    position:fixed; inset:0; z-index:6000;
    background:rgba(0,0,0,0.85);
    display:flex; justify-content:center; align-items:center;
}
.ritual-form-box {
    background:#1a1a2e; border:1px solid #8b0000; border-radius:8px;
    width:380px; max-height:90vh; overflow-y:auto;
    box-shadow:0 0 60px rgba(139,0,0,0.3);
}
.ritual-form-header {
    background:#2a0a0a; color:#ff4444; font-size:16px;
    font-weight:bold; padding:16px 20px; text-align:center;
    font-family:monospace; letter-spacing:3px;
    border-bottom:1px solid #8b0000;
}
.ritual-form-body { padding:20px; }
.ritual-photo-preview { text-align:center; margin-bottom:16px; }
.ritual-photo-preview img {
    width:80px; height:80px; border-radius:50%;
    border:3px solid #8b0000; object-fit:cover;
}
.ritual-no-photo { font-size:48px; }
.ritual-field { margin-bottom:14px; }
.ritual-field label { display:block; color:#888; font-size:12px; margin-bottom:4px; }
.ritual-field input {
    width:100%; padding:8px 10px; background:#0d0d1a; border:1px solid #2a2a3e;
    border-radius:4px; color:#ddd; font-size:13px; outline:none;
}
.ritual-field input:focus { border-color:#8b0000; }
.ritual-info-row { display:flex; padding:8px 12px; margin-bottom:6px; background:#0d0d1a; border-radius:4px; align-items:center; }
.ritual-info-label { color:#888; font-size:12px; min-width:50px; }
.ritual-info-value { color:#ddd; font-size:14px; font-family:monospace; }
.ritual-confirm-area { text-align:center; margin-top:20px; }
.ritual-confirm-btn {
    padding:10px 40px; background:#8b0000; color:#fff; border:none;
    border-radius:4px; font-size:14px; font-weight:bold; cursor:pointer;
    letter-spacing:4px; transition:all 0.3s;
}
.ritual-confirm-btn:hover { background:#cc0000; box-shadow:0 0 30px rgba(139,0,0,0.5); }

/* ============================================
   旧版网站入口
   ============================================ */
#old-site-overlay {
    position:fixed; inset:0; z-index:7000;
    background:rgba(0,0,0,0.88);
    display:flex; justify-content:center; align-items:center;
    animation: oldSiteFadeIn 0.6s ease-out;
}
.old-site-box {
    background:#0d0d1a; border:2px solid #555; border-radius:6px;
    width:420px; max-width:90vw;
    box-shadow:0 0 80px rgba(100,100,100,0.15);
    font-family:monospace;
}
.old-site-header {
    background:#1a1a2a; color:#ccc; font-size:14px;
    font-weight:bold; padding:14px 20px; text-align:center;
    border-bottom:1px solid #333; letter-spacing:1px;
}
.old-site-body {
    padding:24px 20px; text-align:center;
}
.old-site-link {
    display:inline-block; margin-top:4px; padding:10px 30px;
    background:#1a1a3a; color:#7af; border:1px solid #357;
    border-radius:4px; cursor:pointer; font-size:14px;
    font-family:monospace; text-decoration:none;
    transition:all 0.3s;
}
.old-site-link:hover {
    background:#2a2a5a; color:#8cf; border-color:#47a;
    box-shadow:0 0 30px rgba(70,100,255,0.2);
}

/* 画面闪烁 */
#old-site-flicker {
    position:fixed; inset:0; z-index:8000;
    pointer-events:none;
}

/* 全屏旧版网站图片 */
#old-site-fullscreen {
    position:fixed; inset:0; z-index:9000;
    background-size:contain; background-position:center;
    background-repeat:no-repeat; background-color:#000;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    animation: oldSiteReveal 1.2s ease-out;
}
.old-site-scanlines {
    position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
    );
}
.old-site-glitch {
    position:absolute; inset:0; pointer-events:none;
    animation: glitchOverlay 2s ease-in-out infinite;
    background:rgba(255,0,0,0.02);
}
@keyframes oldSiteFadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes oldSiteReveal {
    0% { opacity:0; filter:blur(20px) brightness(3); }
    40% { filter:blur(0) brightness(1.5); }
    100% { opacity:1; filter:blur(0) brightness(1); }
}
@keyframes glitchOverlay {
    0%,100% { opacity:0; transform:translate(0); }
    5% { opacity:0.6; transform:translate(-3px,1px); background:rgba(255,0,0,0.06); }
    10% { opacity:0; transform:translate(0); }
    45% { opacity:0; }
    50% { opacity:0.4; transform:translate(2px,-1px); background:rgba(0,255,255,0.04); }
    55% { opacity:0; transform:translate(0); }
}
#old-site-fullscreen:hover::after {
    content:'点击关闭'; position:absolute; bottom:30px;
    color:rgba(255,255,255,0.3); font-size:12px;
    font-family:monospace; letter-spacing:2px;
}

/* ============================================
   响应式 - 平板 (480px-768px)
   ============================================ */
@media (max-width:768px) {
    .wx-container { width:100%; height:100vh; border-radius:0; }
    #browser { border-radius:0; }
    #browser-titlebar { padding:6px 12px; }
    .dot { width:10px; height:10px; }
    #browser-title { font-size:11px; }
    #browser-toolbar { flex-wrap:wrap; gap:4px; padding:4px 8px; }
    .nav-btn { padding:3px 8px; font-size:12px; }
    #url-bar { max-width:none; }
    #url-input { font-size:12px; }
    #game-clock { font-size:10px; }
    #browser-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
    .tab { flex-shrink:0; padding:5px 10px; font-size:11px; }
    .tab span { font-size:13px; }
    #browser-statusbar { font-size:10px; padding:2px 8px; }

    #school-header { padding:12px 16px; }
    #school-logo img { width:44px; height:44px; }
    #school-title { font-size:22px; letter-spacing:3px; }
    #school-subtitle { font-size:11px; }
    #school-nav { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
    #school-nav .nav-item { flex-shrink:0; padding:10px 14px; font-size:13px; }
    .school-page { padding:16px; }
    .school-page h2 { font-size:18px; }
    .school-page h3 { font-size:15px; }
    .school-page p { font-size:13px; }
    #banner-carousel { height:200px; border-radius:4px; }
    .banner-text h2 { font-size:20px; }
    .banner-text p { font-size:14px; }

    .home-grid { flex-direction:column; gap:12px; }
    .home-main { flex:none; width:100%; }
    .home-sidebar { width:100%; }
    .home-section { padding:12px; }
    .news-list li, .notice-list li { font-size:12px; flex-wrap:wrap; gap:2px; }
    .home-links li { font-size:12px; flex-wrap:wrap; }
    .sidebar-box { padding:10px; }
    .campus-thumb { height:48px; font-size:18px; }

    #camera-grid { grid-template-columns:repeat(2,1fr); gap:6px; padding:10px 12px; }
    .camera-feed .cam-label { font-size:10px; padding:3px 6px; flex-wrap:wrap; }
    #cam13-feed { grid-column:span 2; max-height:180px; }
    .monitor-footer { flex-wrap:wrap; gap:6px; font-size:11px; margin:0 12px 12px; padding:8px 0 2px; }
    #monitor-header { padding:10px 14px; }
    #monitor-header h2 { font-size:14px; }
    #monitor-status { font-size:11px; }
    .monitor-login-box { padding:24px; max-width:320px; }

    #camera-viewer .cv-header { width:auto; margin:0 10px; border-radius:4px 4px 0 0; }
    #camera-viewer .cv-body { margin:0 10px; }
    #cv-canvas { width:100%; height:auto; aspect-ratio:16/10; }
    #camera-viewer .cv-log { width:auto; margin:0 10px; }
    #camera-viewer .cv-footer { width:auto; margin:0 10px; flex-wrap:wrap; gap:4px; padding:6px 12px; border-radius:0 0 4px 4px; }

    #email-system { max-width:none; }
    #email-header { padding:10px 14px; }
    #email-header h2 { font-size:16px; }
    .email-list-header, .email-item { grid-template-columns:70px 1fr 60px; padding:8px 12px; font-size:12px; }
    .register-box { padding:20px; }
    #email-reader { padding:14px; }

    #archive-system { padding:14px; }
    .archive-item { padding:10px 12px; }

    #server-console { max-width:none; margin:10px; max-height:none; overflow-y:visible; min-height:0; height:auto; }
    #console-login { padding:30px 16px; }
    #console-login h2 { font-size:16px; }
    .console-input-area input { width:100%; max-width:220px; font-size:14px; }
    .ending-choice-btn { font-size:13px; padding:12px 16px; }
    .console-line { font-size:12px; }

    #student-list { columns:2; }
    #student-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
    .student-card { padding:8px; font-size:12px; }
    .student-card .avatar { width:40px; height:40px; font-size:16px; }

    .timeline-item { padding-left:12px; }
    .timeline-item h4 { font-size:15px; }

    .error-page h1 { font-size:64px; }
    .error-page h2 { font-size:20px; }

    .photo-item { max-width:100%; }
    #graduation-photo { max-width:100%; height:auto; }

    #school-footer { font-size:11px; padding:10px 12px; }

    #old-site-box { width:auto; margin:0 16px; }
    .old-site-body { padding:16px; }
    .old-site-link { font-size:13px; padding:8px 20px; }
    .ritual-form-box { width:auto; margin:0 16px; }

    #entity-overlay .entity-text { font-size:16px; max-width:90%; }
    #entity-overlay .entity-sub { font-size:12px; }
}

/* ============================================
   响应式 - 手机 (<480px)
   ============================================ */
@media (max-width:480px) {
    .wx-container { border-radius:0; }
    .wx-bubble { max-width:85%; font-size:13px; padding:8px 12px; }
    .wx-bubble-link { width:auto; }
    .wx-link-icon { width:40px; font-size:20px; }
    .wx-link-body { padding:8px 10px; }
    .wx-link-title { font-size:13px; }
    .wx-link-url, .wx-link-note { font-size:10px; }
    .wx-reply-bar { padding:8px 12px; gap:6px; }
    .wx-reply-input { font-size:13px; padding:6px 10px; }

    #browser-titlebar { padding:4px 8px; gap:6px; }
    .dot { width:8px; height:8px; }
    #browser-toolbar { padding:3px 6px; }
    #url-bar { padding:3px 8px; }
    #url-input { font-size:11px; }
    .nav-btn { padding:2px 6px; font-size:11px; }
    #game-clock { font-size:9px; }
    #url-hint { font-size:10px; white-space:normal; max-width:90%; }
    .tab { font-size:10px; padding:4px 8px; }
    .tab span { font-size:11px; }

    #school-header { padding:10px 12px; }
    #school-logo { gap:10px; }
    #school-logo img { width:36px; height:36px; }
    #school-title { font-size:18px; letter-spacing:2px; }
    #school-subtitle { font-size:10px; }
    #school-nav .nav-item { padding:8px 10px; font-size:12px; }
    .school-page { padding:12px; }
    .school-page h2 { font-size:16px; margin-bottom:12px; }
    .school-page h3 { font-size:14px; }
    .school-page p { font-size:12px; line-height:1.7; }
    #banner-carousel { height:160px; border-radius:2px; margin-bottom:12px; }
    .banner-text h2 { font-size:16px; }
    .banner-text p { font-size:12px; }
    #notice-bar { font-size:11px; height:28px; line-height:28px; }
    #notice-bar-label { font-size:10px; padding:0 10px; height:28px; line-height:28px; }

    .home-section { padding:10px; margin-bottom:10px; }
    .home-section h3 { font-size:13px; }
    .news-list li, .notice-list li { font-size:11px; }
    .home-links { padding:10px; }
    .home-links h3 { font-size:13px; }
    .home-links li { font-size:11px; }
    .sidebar-box { padding:8px; margin-bottom:10px; }
    .sidebar-box h4 { font-size:12px; }
    .campus-thumb { height:40px; font-size:16px; }
    .sidebar-links li { font-size:12px; }
    .stats-list li { font-size:12px; }

    #camera-grid { grid-template-columns:1fr 1fr; gap:4px; padding:8px; }
    .camera-feed .cam-label { font-size:9px; padding:2px 4px; }
    #cam13-feed { grid-column:span 2; max-height:150px; }
    .monitor-footer { font-size:10px; padding:6px 0 0; margin:0 8px 8px; }
    #monitor-header h2 { font-size:13px; }
    #monitor-header h2 span { font-size:14px; }
    #monitor-status { font-size:10px; }
    .monitor-login-box { padding:16px; }
    .monitor-login-box h3 { font-size:14px; }

    #camera-viewer .cv-header { padding:6px 12px; }
    #camera-viewer .cv-title { font-size:12px; }
    #camera-viewer .cv-log .cv-log-body { padding:8px 12px; font-size:12px; }
    #camera-viewer .cv-footer { padding:4px 10px; }
    .cv-nav { font-size:12px; padding:4px 12px; }
    .cv-counter { font-size:10px; }
    .cv-close { font-size:20px; }

    #email-header { flex-wrap:wrap; gap:4px; padding:8px 12px; }
    #email-header h2 { font-size:14px; }
    .email-user { font-size:11px; }
    .email-list-header, .email-item { grid-template-columns:50px 1fr 50px; padding:6px 8px; font-size:11px; overflow:hidden; }
    .email-item .sender { overflow:hidden; text-overflow:ellipsis; }
    .email-item .subject { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .register-box { padding:14px; }
    .register-box h3 { font-size:16px; }
    #email-reader { padding:10px; }
    #email-subject-display { font-size:15px; }
    #email-body { font-size:13px; }
    #email-reader button { font-size:12px; padding:6px 16px; }

    #archive-system { padding:10px; }
    #archive-system h2 { font-size:16px; }
    .archive-item { padding:8px 10px; }
    .archive-item .arch-title { font-size:13px; }
    .archive-item .arch-meta { font-size:10px; flex-wrap:wrap; }
    #archive-content { font-size:13px; }
    #archive-viewer button { font-size:12px; padding:6px 16px; }

    #server-console { margin:6px; }
    #console-login { padding:20px 12px; }
    #console-login h2 { font-size:14px; }
    .console-warn { font-size:11px; }
    .console-input-area input { width:100%; max-width:180px; padding:6px 10px; font-size:14px; }
    .console-input-area label { font-size:12px; }
    .console-input-area button { font-size:13px; padding:7px 16px; }
    .console-line { font-size:12px; line-height:1.6; }
    .ending-choice-btn { font-size:12px; padding:10px 12px; }
    #console-panel { padding:12px; }

    #student-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
    .student-card { padding:6px; font-size:11px; }
    .student-card .avatar { width:34px; height:34px; font-size:14px; }
    #student-list { columns:2; }
    #student-list li { font-size:12px; }

    .timeline-item h4 { font-size:14px; }
    .timeline-item p { font-size:12px; }

    .error-page { padding:30px 12px; }
    .error-page h1 { font-size:48px; }
    .error-page h2 { font-size:18px; }
    .error-page p { font-size:12px; }
    .breadcrumb { font-size:11px; }

    #school-footer { font-size:10px; padding:8px 10px; }
    .footer-links { font-size:11px; }
    .footer-links a { margin:0 2px; }
    .footer-visitor { font-size:10px; }

    .old-site-box { width:auto; margin:0 12px; }
    .old-site-header { font-size:12px; padding:10px 14px; }
    .old-site-body { padding:12px; }
    .old-site-link { font-size:12px; padding:6px 16px; }
    .ritual-form-box { margin:0 12px; }
    .ritual-form-header { font-size:14px; padding:12px 16px; }
    .ritual-form-body { padding:14px; }
    .ritual-field label { font-size:11px; }
    .ritual-field input { font-size:12px; padding:6px 8px; }
    .ritual-info-value { font-size:12px; }
    .ritual-confirm-btn { font-size:13px; padding:8px 30px; }

    .symbol-flash { width:120px; height:120px; top:10%; right:5%; }
    #entity-overlay .entity-text { font-size:14px; }
    #entity-overlay .entity-sub { font-size:11px; }
    .container-ritual-btn { font-size:12px; padding:8px 16px; }
    .container-ritual-btn.persistent { font-size:14px; padding:10px 20px; }
    .message-post { padding:10px 12px; }
    .message-post .msg-content { font-size:13px; }
    .message-post .msg-author { font-size:11px; }
    #browser-statusbar #game-progress { display:none; }
}

/* ===== 闪烁光标效果 ===== */
@keyframes blink { 50% { opacity:0; } }
.cursor-blink::after {
    content:'▊'; animation:blink 1s step-end infinite; color:#0a0;
}

/* ============================================
   超自然 · 异常效果
   ============================================ */

/* 文字乱码抖动 */
@keyframes textGlitch {
    0% { transform:translate(0); }
    10% { transform:translate(-2px,1px); }
    20% { transform:translate(2px,-1px); }
    30% { transform:translate(-1px,-2px); }
    40% { transform:translate(1px,2px); }
    50% { transform:translate(-2px,-1px); }
    60% { transform:translate(2px,1px); }
    70% { transform:translate(-1px,2px); }
    80% { transform:translate(1px,-2px); }
    90% { transform:translate(-2px,2px); }
    100% { transform:translate(0); }
}
.glitched { animation:textGlitch 0.15s infinite; }

/* 文字替换乱码 */
@keyframes corruptText {
    0% { opacity:1; }
    50% { opacity:0.3; }
    51% { opacity:1; }
    100% { opacity:1; }
}
.corrupt-char { color:#f44; animation:corruptText 0.1s infinite; }

/* 全屏扫描线叠加 */
#scanline-overlay {
    position:fixed; inset:0; pointer-events:none; z-index:999;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
    display:none;
}
#scanline-overlay.active { display:block; }

/* 全屏暗角 + 异常闪烁 */
#supernatural-overlay {
    position:fixed; inset:0; pointer-events:none; z-index:998;
    display:none;
}
#supernatural-overlay.active {
    display:block;
    animation:supernaturalFlicker 4s infinite;
}
@keyframes supernaturalFlicker {
    0% { background:rgba(0,0,0,0); }
    95% { background:rgba(0,0,0,0); }
    96% { background:rgba(180,0,0,0.05); }
    97% { background:rgba(0,0,0,0); }
    98% { background:rgba(0,0,180,0.03); }
    100% { background:rgba(0,0,0,0); }
}

/* 超自然符号闪现 */
@keyframes symbolFlash {
    0% { opacity:0; transform:scale(0.5) rotate(-10deg); }
    10% { opacity:0.15; transform:scale(1) rotate(0deg); }
    20% { opacity:0; transform:scale(0.8) rotate(5deg); }
    100% { opacity:0; }
}
.symbol-flash {
    position:fixed; top:20%; right:10%; width:200px; height:200px;
    pointer-events:none; z-index:1000; opacity:0;
    background-size:contain; background-repeat:no-repeat; background-position:center;
}
.symbol-flash.active { animation:symbolFlash 3s infinite; }

/* 档案解锁后的暗角氛围 */
#archive-vignette {
    position:fixed; inset:0; pointer-events:none; z-index:996;
    background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
    display:none;
}
#archive-vignette.active { display:block; animation:vignettePulse 6s ease-in-out infinite; }
@keyframes vignettePulse {
    0%, 100% { opacity:0.3; }
    50% { opacity:0.7; }
}

/* 档案解锁后的文字闪烁腐蚀 */
.corrupt-flash {
    animation:corruptFlash 0.15s ease-out;
}
@keyframes corruptFlash {
    0% { opacity:0; color:#f44; text-shadow:0 0 10px rgba(255,0,0,0.5); }
    50% { opacity:0.7; color:#f44; }
    100% { opacity:1; color:inherit; text-shadow:none; }
}

/* 导航栏异常闪烁 */
.nav-glitch {
    animation:navGlitch 0.2s 3;
}
@keyframes navGlitch {
    0% { transform:none; opacity:1; }
    25% { transform:translate(-1px,1px); opacity:0.7; color:#f44; }
    50% { transform:translate(1px,-1px); opacity:0.5; color:#0f0; }
    75% { transform:translate(-2px,0); opacity:0.8; color:#44f; }
    100% { transform:none; opacity:1; }
}

/* 状态栏异常红色闪烁 */
.status-glitch {
    animation:statusGlitch 0.1s 5;
}
@keyframes statusGlitch {
    0%, 100% { opacity:1; }
    50% { opacity:0.3; color:#f44; }
}

/* 内容区域异常下划线脉冲 */
.glitch-underline {
    position:relative;
}
.glitch-underline::after {
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:2px; background:#f44;
    animation:underlinePulse 3s infinite;
}
@keyframes underlinePulse {
    0%, 100% { opacity:0; }
    50% { opacity:0.6; }
}

/* 页面整体震动 */
@keyframes pageQuake {
    0%, 100% { transform:translate(0,0); }
    10% { transform:translate(-4px,3px); }
    20% { transform:translate(4px,-3px); }
    30% { transform:translate(-3px,-2px); }
    40% { transform:translate(3px,2px); }
    50% { transform:translate(-4px,2px); }
    60% { transform:translate(4px,-2px); }
    70% { transform:translate(-2px,3px); }
    80% { transform:translate(2px,-3px); }
    90% { transform:translate(-3px,3px); }
}
.page-quake { animation:pageQuake 0.3s; }

/* 控制台乱码行 */
.console-line.corrupted {
    color:#f0f;
    font-family:monospace;
    letter-spacing:2px;
    animation:textGlitch 0.08s infinite;
}

/* 毕业照异常效果 */
.photo-glitch {
    animation:photoGlitch 0.5s infinite;
}
@keyframes photoGlitch {
    0% { filter:hue-rotate(0deg) saturate(1); opacity:1; }
    25% { filter:hue-rotate(90deg) saturate(3); opacity:0.9; }
    50% { filter:hue-rotate(180deg) saturate(0.5); opacity:0.8; }
    75% { filter:hue-rotate(270deg) saturate(4); opacity:0.9; }
    100% { filter:hue-rotate(360deg) saturate(1); opacity:1; }
}

/* 浏览器标题栏异常 */
#browser-title.corrupted {
    animation:textGlitch 0.12s infinite;
    color:#f44;
}

/* 校名标题异常 */
#school-title.corrupted {
    animation:textGlitch 0.1s infinite;
    color:#c0392b;
    text-shadow:0 0 20px rgba(255,0,0,0.3);
}
#school-title.corrupted::after {
    content:' [数据异常]';
    font-size:12px; color:#f44;
    animation:corruptText 0.15s infinite;
}

/* 暗色覆盖层 - 用于结局超自然 */
#entity-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.85);
    z-index:9999; display:none;
    justify-content:center; align-items:center;
    flex-direction:column; color:#555; font-family:monospace;
}
#entity-overlay.active { display:flex; }
#entity-overlay .entity-text {
    font-size:22px; letter-spacing:4px;
    animation:textGlitch 0.2s infinite;
    max-width:600px; text-align:center; line-height:2;
}
#entity-overlay .entity-sub {
    font-size:13px; color:#333; margin-top:20px;
    animation:corruptText 0.3s infinite;
}

/* CAM13 Live 全屏覆盖 */
#cam13-live-overlay {
    position:fixed; inset:0; z-index:10000;
    background:#000;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.5s;
}
#cam13-live-overlay.active { opacity:1; }
#cam13-live-overlay.closing { opacity:0; }
#cam13-live-overlay .close-btn {
    position:fixed; top:12px; right:20px;
    color:rgba(255,255,255,0.25);
    font-size:30px; cursor:pointer; z-index:10001;
    font-family:sans-serif; user-select:none;
    transition:color 0.3s;
}
#cam13-live-overlay .close-btn:hover { color:rgba(255,255,255,0.6); }
#cam13-live-overlay canvas {
    max-width:100vw; max-height:100vh;
    display:block;
}

/* 控制台可点击链接 */
.console-line.clickable-link {
    color:#4af !important;
    text-decoration:underline;
    cursor:pointer;
    transition:color 0.2s, text-shadow 0.2s;
}
.console-line.clickable-link:hover {
    color:#8cf !important;
    text-shadow:0 0 12px rgba(68,170,255,0.5);
}