html {
            overflow-x: hidden;
            overflow-y: hidden;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 12px;
            box-sizing: border-box;
            visibility: hidden;
            background: linear-gradient(180deg, #f1f5f9 0%, #e8edf3 100%) !important;
            background-attachment: fixed;
        }
        body.loaded {
            visibility: visible;
        }
        .nav-tab, .nav-tab * { user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; }
        .nav-tab.active { background: linear-gradient(to top, #dbeafe 0%, #eff6ff 100%); }
        .nav-tab.active .text-2xl { transform: scale(1.15); }
        .nav-tab.active .text-xs { color: #2563eb !important; font-weight: 700; }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 3px;
            background: #2563eb;
            border-radius: 0 0 3px 3px;
        }
        .nav-tab { position: relative; }
        .container {
            text-align: center;
            color: #333;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 30px;
            color: #000;
        }
        .games-box {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 28px 32px;
            box-shadow: none;
            width: 100%;
            max-width: 720px;
            height: auto;
            min-height: 0;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
        }
        .left-box {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 28px 32px;
            box-shadow: none;
            width: 100%;
            max-width: 720px;
            height: auto;
            min-height: 0;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
        }
        /* 修复：页面尚未加载完成时（JS 还没跑 switchTab），带 .hidden 的分栏会被上面
           .left-box 的 display:flex 覆盖导致全部显示（聊天+共享文件分栏并排）。
           更高特异性让 .hidden 生效；JS 之后用内联 display 控制显隐，不受影响。 */
        .left-box.hidden {
            display: none;
        }
        #quizSection.hidden {
            display: none;
        }
        #quizSection {
            display: block;
            overflow: visible;
            max-height: none;
            min-height: 0;
            flex: 0 0 auto;
        }
        #quizContent {
            min-height: 0;
        }
        /* 默契答题编辑器：进入新建/编辑题目时占满主内容区（不再用100vw+负margin的全屏hack，
           那个hack会让整块内容向左偏移、左边缘被裁掉；.container的text-align:center也不再继承进来） */
        #quizSection.quiz-editor-mode {
            width: 100% !important;
            max-width: none !important;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 12px !important;
            min-height: 0 !important;
            flex: 1 1 auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
            text-align: left !important;
        }
        #mainContent.quiz-editor-wide {
            width: 100% !important;
            max-width: none !important;
            box-sizing: border-box !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        /* 外层 .container 受 Tailwind 的 .container 响应式 max-width 限制（2xl 时仅 1536px），
           宽屏下左右会留下大条空白；编辑模式下解除限制，让整页铺满 */
        #homeContainer.quiz-editor-host {
            max-width: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        #quizSection.quiz-editor-mode #quizContent {
            min-height: 0;
        }
        .game-btn {
            padding: 20px 32px;
            font-size: 1.25rem;
            font-weight: 600;
            color: #333;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            height: auto;
            line-height: 1.4;
            min-width: 140px;
        }
        .game-btn:hover {
            transform: translateY(-2px);
        }
        .game-btn:active {
            transform: translateY(0);
        }
        .game-btn.pixel {
            background: linear-gradient(135deg, #ffd93d 0%, #ff9f43 100%);
            color: #333;
            box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3);
        }
        .game-btn.pixel:hover {
            box-shadow: 0 6px 20px rgba(255, 159, 67, 0.5);
        }
        .game-btn.battle {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
            color: #333;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }
        .game-btn.battle:hover {
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
        }
        .game-btn.mecha {
            background: linear-gradient(135deg, #6bcb77 0%, #4d96ff 100%);
            color: #333;
            box-shadow: 0 4px 15px rgba(107, 203, 119, 0.3);
        }
        .game-btn.mecha:hover {
            box-shadow: 0 6px 20px rgba(107, 203, 119, 0.5);
        }

        .game-with-select {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .game-select {
            padding: 6px 10px;
            font-size: 0.875rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #ffffff;
            color: #374151;
            cursor: pointer;
            outline: none;
            min-width: 100px;
        }

        .game-select:hover {
            border-color: #93c5fd;
        }

        .game-select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .game-select-wrapper {
            position: relative;
            display: inline-block;
        }
        .recommend-tag {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: #dbeafe;
            color: #1d4ed8;
            font-size: 0.6rem;
            font-weight: 600;
            padding: 1px 5px;
            border-radius: 9999px;
            line-height: 1.2;
            white-space: nowrap;
            pointer-events: none;
            z-index: 5;
        }

        /* 弹幕入口按钮 */
        .danmaku-entry {
            background: #ffffff;
            color: #000000;
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            padding: 24px 20px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: left;
            position: relative;
        }
        .danmaku-entry:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
        }
        .danmaku-entry .entry-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #000;
        }
        .danmaku-entry .entry-subtitle {
            font-size: 0.85rem;
            color: #666;
            margin-top: 4px;
        }

        /* 工具提示 (tooltip) */
        .danmaku-tooltip {
            position: relative;
            cursor: help;
            border-bottom: 1px dotted #666;
        }
        .danmaku-tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: #fff;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            transition-delay: 0.5s;
            z-index: 100;
        }
        .danmaku-tooltip:hover::after {
            opacity: 1;
        }

        /* 游戏按钮容器 */
        .games-btn-container {
            display: flex;
            flex-direction: row;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            margin-top: auto;
            padding-top: 12px;
        }

        /* 弹幕页面 */
        #danmakuPage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: none;
            flex-direction: column;
            background: #f3f4f6;
        }
        #danmakuPage.show {
            display: flex;
        }
        #lotteryPage.show {
            display: flex;
        }
        #stopwatchPage.show {
            display: flex;
        }
        .scrollbar-show::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .scrollbar-show::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.05);
            border-radius: 3px;
        }
        .scrollbar-show::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 3px;
        }
        .danmaku-header {
            background: #fff;
            padding: 16px 24px 16px 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid #e5e7eb;
            flex-shrink: 0;
            position: relative;
        }
        .danmaku-header h2 {
            font-size: 1.4rem;
            font-weight: 700;
            color: #000;
            margin: 0;
        }
        /* 统一返回键外观：自绘箭头（内联 SVG）、正方形、透明、无外框（与账号栏子页面一致） */
        .danmaku-header .back-btn {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #1f2937;
            transition: transform .12s ease, color .15s ease;
            padding: 0;
            line-height: 1;
            z-index: 1002;
        }
        .danmaku-header .back-btn svg { width: 24px; height: 24px; display: block; }
        .danmaku-header .back-btn:hover {
            background: transparent;
            color: #000;
        }
        .danmaku-header .back-btn:active {
            transform: translateY(-50%) scale(.9);
        }
        body.dark .danmaku-header .back-btn { color: #e2e8f0; }
        body.dark .danmaku-header .back-btn:hover { color: #fff; }
        /* 抽签页取消顶部标题行后，悬浮在 iframe 左上角的独立返回键 */
        .lottery-back-btn {
            position: absolute;
            top: 10px;
            left: 12px;
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #1f2937;
            transition: transform .12s ease, color .15s ease;
            padding: 0;
            line-height: 1;
            z-index: 1002;
        }
        .lottery-back-btn svg { width: 24px; height: 24px; display: block; }
        .lottery-back-btn:hover {
            background: transparent;
            color: #000;
        }
        .lottery-back-btn:active {
            transform: scale(.9);
        }
        /* 退出按钮（收起布局下显示）*/
        .pixel-back-btn {
            position: fixed;
            top: 12px;
            left: 12px;
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1002;
            padding: 0;
            color: #1f2937;
            line-height: 1;
            transition: transform .12s ease, color .15s ease;
        }
        .pixel-back-btn svg { width: 24px; height: 24px; display: block; }
        .pixel-back-btn:hover {
            background: transparent;
            color: #000;
        }
        .pixel-back-btn:active {
            transform: scale(.9);
        }
        .danmaku-area {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        /* 弹幕广场滚动舞台 */
        .danmaku-stage {
            position: relative;
            flex: 1;
            overflow: hidden;
            background: linear-gradient(135deg, #f3f4f6 0%, #e0e7ff 100%);
            border-radius: 16px;
        }
        .danmaku-track {
            position: absolute;
            left: 0;
            width: 100%;
            height: 48px;
            overflow: hidden;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .danmaku-fly {
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.95);
            border-radius: 24px;
            padding: 8px 18px;
            font-size: 0.95rem;
            color: #1f2937;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            white-space: nowrap;
            will-change: transform;
            overflow: visible;
        }
        .danmaku-fly .fly-user {
            font-weight: 700;
            font-size: 0.82rem;
            color: #3b82f6;
        }
        .danmaku-fly .fly-user.anon {
            color: #9ca3af;
        }
        .danmaku-fly .fly-content {
            color: #1f2937;
        }
        @keyframes danmakuScroll {
            from { transform: translate(100vw, calc(-50% + var(--hover-y, 0px))) scale(var(--hover-scale, 1)); }
            to { transform: translate(-100%, calc(-50% + var(--hover-y, 0px))) scale(var(--hover-scale, 1)); }
        }
        .danmaku-msg {
            background: #fff;
            border-radius: 14px;
            padding: 14px 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            animation: fadeIn 0.3s ease-out;
            margin-bottom: 12px;
            position: relative;
        }
        .danmaku-msg.self {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
        }
        .danmaku-msg .msg-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
            gap: 8px;
            flex-wrap: wrap;
        }
        .danmaku-msg .msg-user {
            font-weight: 700;
            font-size: 0.9rem;
            color: #3b82f6;
        }
        .danmaku-msg.self .msg-user {
            color: #2563eb;
        }
        .danmaku-msg .msg-user.anonymous {
            color: #9ca3af;
        }
        .danmaku-msg .msg-content {
            font-size: 1rem;
            color: #1f2937;
            word-break: break-word;
        }
        .danmaku-msg.self .msg-content {
            color: #1e40af;
        }
        .danmaku-msg .msg-time {
            font-size: 0.75rem;
            color: #9ca3af;
            margin-top: 6px;
        }
        .danmaku-msg .msg-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .danmaku-msg .msg-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 10px;
            font-size: 0.78rem;
            line-height: 1;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #374151;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        .danmaku-msg .msg-action-btn:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }
        .danmaku-msg .msg-action-btn.plus {
            background: #ecfdf5;
            border-color: #a7f3d0;
            color: #047857;
        }
        .danmaku-msg .msg-action-btn.plus:hover {
            background: #d1fae5;
            color: #065f46;
        }
        .danmaku-msg .msg-action-btn.report {
            background: #fff7ed;
            border-color: #fed7aa;
            color: #c2410c;
        }
        .danmaku-msg .msg-action-btn.report:hover {
            background: #ffedd5;
            color: #9a3412;
        }
        .danmaku-msg .msg-action-btn.delete {
            background: #fef2f2;
            border-color: #fecaca;
            color: #b91c1c;
        }
        .danmaku-msg .msg-action-btn.delete:hover {
            background: #fee2e2;
            color: #991b1b;
        }
        .danmaku-msg .msg-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 6px;
        }
        .danmaku-msg .msg-repeats {
            font-size: 0.72rem;
            color: #6b7280;
            background: #f3f4f6;
            padding: 1px 8px;
            border-radius: 10px;
        }
        .danmaku-input-bar {
            background: #fff;
            border-top: 2px solid #e5e7eb;
            padding: 14px 24px;
            display: flex;
            gap: 12px;
            align-items: center;
            flex-shrink: 0;
        }
        .danmaku-input-bar textarea {
            flex: 1;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 0.95rem;
            resize: none;
            height: 48px;
            line-height: 1.4;
            font-family: inherit;
            outline: none;
            transition: border 0.2s;
        }
        .danmaku-input-bar textarea:focus {
            border-color: #3b82f6;
        }
        .danmaku-input-bar .send-btn {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            height: 48px;
            align-self: flex-start;
        }
        .danmaku-input-bar .send-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }
        .danmaku-input-bar .send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        .danmaku-options {
            display: flex;
            gap: 20px;
            align-items: center;
            padding: 6px 0 0 4px;
            flex-shrink: 0;
        }
        .danmaku-options label {
            font-size: 0.85rem;
            color: #555;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }
        .danmaku-options input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .danmaku-review-badge {
            display: inline-block;
            background: #fef3c7;
            color: #92400e;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 6px;
            margin-left: 8px;
        }
        .danmaku-empty {
            text-align: center;
            color: #9ca3af;
            padding: 60px 20px;
            font-size: 1.1rem;
        }
        /* 弹幕自己的消息滚动版 */
        .danmaku-fly.self-fly {
            background: rgba(219, 234, 254, 0.95);
            border: 1px solid #93c5fd;
        }
        .danmaku-fly.self-fly .fly-content {
            color: #1e40af;
        }
        /* 飘动弹幕操作按钮容器：默认隐藏，悬停/键盘聚焦该弹幕时才出现，避免与弹幕内容混在一起 */
        .danmaku-fly .fly-actions {
            display: none;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .danmaku-fly:hover .fly-actions,
        .danmaku-fly:focus-within .fly-actions {
            display: inline-flex;
        }
        .danmaku-fly .fly-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            cursor: pointer;
            font-size: 11px;
            line-height: 1;
            padding: 0;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .danmaku-fly .fly-action-btn.plus {
            background: #ecfdf5;
            border-color: #a7f3d0;
            color: #047857;
        }
        .danmaku-fly .fly-action-btn.plus:hover {
            background: #d1fae5;
        }
        .danmaku-fly .fly-action-btn.report {
            background: #fff7ed;
            border-color: #fed7aa;
            color: #c2410c;
        }
        .danmaku-fly .fly-action-btn.report:hover {
            background: #ffedd5;
        }
        .danmaku-fly .fly-action-btn.delete {
            background: #fef2f2;
            border-color: #fecaca;
            color: #b91c1c;
        }
        .danmaku-fly .fly-action-btn.delete:hover {
            background: #fee2e2;
        }
        .danmaku-fly .fly-repeat-count {
            font-size: 11px;
            color: #6b7280;
            background: rgba(243, 244, 246, 0.9);
            padding: 1px 7px;
            border-radius: 9px;
            margin-left: 2px;
        }
        .danmaku-fly:hover {
            --hover-y: -4px;
            --hover-scale: 1.05;
            z-index: 100;
            box-shadow: 0 8px 28px rgba(0,0,0,0.22);
            filter: brightness(1.04);
            transition: box-shadow 0.18s ease, filter 0.18s ease;
        }
        /* 举报弹窗 */
        .report-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2500;
        }
        .report-modal.show {
            display: flex;
        }
        .report-card {
            background: #fff;
            border-radius: 18px;
            padding: 24px;
            width: 340px;
            max-width: 92vw;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 12px 48px rgba(0,0,0,0.25);
            animation: fadeIn 0.2s ease-out;
        }
        .report-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .report-close {
            background: transparent;
            border: none;
            font-size: 18px;
            color: #9ca3af;
            cursor: pointer;
            line-height: 1;
            padding: 4px;
        }
        .report-close:hover { color: #374151; }
        .report-reasons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }
        .report-reason-chip {
            padding: 8px 14px;
            border-radius: 18px;
            border: 1.5px solid #e5e7eb;
            background: #f9fafb;
            color: #374151;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
            user-select: none;
        }
        .report-reason-chip:hover {
            background: #eff6ff;
            border-color: #93c5fd;
        }
        .report-reason-chip.selected {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
            font-weight: 600;
        }
        .report-extra-label {
            font-size: 0.85rem;
            color: #374151;
            margin-bottom: 6px;
            display: block;
        }
        .report-extra-input {
            width: 100%;
            border: 1.5px solid #e5e7eb;
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 0.9rem;
            resize: none;
            height: 80px;
            outline: none;
            transition: border-color 0.2s;
            font-family: inherit;
            box-sizing: border-box;
        }
        .report-extra-input:focus {
            border-color: #3b82f6;
        }
        .report-extra-count {
            font-size: 0.75rem;
            color: #9ca3af;
            text-align: right;
            margin-top: 4px;
        }
        .report-submit-btn {
            width: 100%;
            margin-top: 16px;
            padding: 11px 0;
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        .report-submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
        }
        .report-submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        /* 弹幕用户信息模态框 */
        .user-info-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        .user-info-modal.show {
            display: flex;
        }
        .user-info-card {
            background: #fff;
            border-radius: 20px;
            padding: 32px;
            min-width: 300px;
            text-align: center;
            box-shadow: 0 12px 48px rgba(0,0,0,0.2);
            animation: fadeIn 0.25s ease-out;
        }
        .user-info-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .user-info-close:hover {
            background: rgba(255,255,255,0.3);
        }
        .user-info-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 28px;
            color: #fff;
            font-weight: 700;
        }
        .user-info-nickname {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 6px;
        }
        .user-info-id {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 24px;
            font-family: monospace;
        }
        .user-info-add-friend {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 12px 32px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .user-info-add-friend:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
        }
        .user-info-add-friend:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        /* 弹幕发送者昵称可点击样式 */
        .fly-user.clickable,
        .msg-user.clickable {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-color: transparent;
            transition: text-decoration-color 0.2s, color 0.2s;
        }
        .fly-user.clickable:hover,
        .msg-user.clickable:hover {
            text-decoration-color: currentColor;
            color: #1d4ed8;
        }
        /* 灰色游客昵称 */
        .fly-user.visitor,
        .msg-user.visitor {
            color: #9ca3af;
        }
        :root {
            --primary-start: #3b82f6;
            --primary-end: #1d4ed8;
            --primary-color: #3b82f6;
            --primary-hover: #2563eb;
            --shadow-color: rgba(59, 130, 246, 0.4);
            --input-shadow: rgba(59, 130, 246, 0.3);
        }

        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }

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

        .fade-in-msg {
            animation: fadeInMsg 0.25s ease-out;
        }

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

        .slide-in {
            animation: slideIn 0.4s ease-out;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .card {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        .input-focus:focus {
            outline: none;
            box-shadow: 0 0 0 3px var(--input-shadow);
        }
        .btn-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px var(--shadow-color);
        }
        .btn-active:active {
            transform: translateY(0);
        }

        .search-box {
            width: 100%;
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            position: relative;
        }
        .search-input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #ddd;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        .search-input:focus {
            border-color: #007bff;
        }
        .search-btn {
            padding: 12px 20px;
            border: none;
            background: #007bff;
            color: #fff;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
        }
        .search-btn:hover {
            background: #0069d9;
        }
        .search-result {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            max-height: 200px;
            overflow-y: auto;
            display: none;
            z-index: 1010;
            border: 1px solid #eee;
        }
        .search-result.show {
            display: block;
        }
        .search-item {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f1f1;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .search-item:hover {
            background: #f8f9fa;
        }
        .search-item:last-child {
            border-bottom: none;
        }
        .search-item-id {
            font-size: 12px;
            color: #666;
        }
        .self-badge {
            display: inline-block;
            padding: 0 6px;
            height: 18px;
            line-height: 18px;
            background-color: #3b82f6;
            color: white;
            font-size: 12px;
            border-radius: 4px;
            margin-left: 6px;
            vertical-align: middle;
        }
        .add-friend-btn {
            padding: 4px 10px;
            background: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        .add-friend-btn:hover {
            background: #218838;
        }
        .add-friend-btn:disabled {
            background: #999;
            cursor: not-allowed;
        }
        .search-no-result {
            padding: 12px 16px;
            color: #999;
            text-align: center;
        }

        .friend-list-box {
            width: 90%;
            max-width: 450px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .apply-box {
            border: 1px solid #ffc107;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            background: #fffbeb;
        }
        .apply-item {
            padding: 6px 0;
            border-bottom: 1px dashed #ffeeba;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
        .apply-item:last-child {
            border-bottom: none;
        }
        .apply-btn {
            padding: 3px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin: 0 3px;
        }
        .agree-apply {
            background: #28a745;
            color: #fff;
        }
        .agree-apply:hover {
            background: #218838;
        }
        .refuse-apply {
            background: #999;
            color: #fff;
        }
        .refuse-apply:hover {
            background: #777;
        }
        .friend-item {
            padding: 8px 0;
            border-bottom: 1px solid #f1f1f1;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .friend-item:last-child {
            border-bottom: none;
        }
        .del-friend-btn {
            padding: 3px 8px;
            background: #dc3545;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        .del-friend-btn:hover {
            background: #c82333;
        }

        #accountModal {
            z-index: 1000;
        }

        /* 版本更新通知 */
        .version-notice {
            position: fixed;
            bottom: 20px;
            right: 20px;
            max-width: 340px;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            color: #fff;
            border-radius: 14px;
            padding: 14px 18px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            z-index: 9999;
            display: none;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.9rem;
            line-height: 1.5;
            animation: slideUpNotice 0.4s ease-out;
        }
        .version-notice.show {
            display: flex;
        }
        /* 手机版：底部有仿安卓任务栏/系统导航条时，提示窗再往上让一点，避免被压住（层级不变） */
        @media (max-width: 768px) {
            .version-notice {
                bottom: calc(74px + env(safe-area-inset-bottom, 0px));
                right: 12px;
                max-width: calc(100vw - 24px);
            }
        }
        html.force-mobile .version-notice {
            bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        }
        .version-notice .notice-icon {
            font-size: 1.3rem;
            flex-shrink: 0;
            line-height: 1;
        }
        .version-notice .notice-body {
            flex: 1;
        }
        .version-notice .notice-title {
            font-weight: 700;
            margin-bottom: 2px;
        }
        .version-notice .notice-desc {
            color: #cbd5e1;
            font-size: 0.82rem;
        }
        .version-notice .notice-btn {
            margin-top: 8px;
            display: inline-block;
            background: #3b82f6;
            color: #fff;
            padding: 5px 14px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: background 0.2s;
        }
        .version-notice .notice-btn:hover {
            background: #2563eb;
        }
        .version-notice .notice-close {
            background: none;
            border: none;
            color: #94a3b8;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            flex-shrink: 0;
        }
        .version-notice .notice-close:hover {
            color: #fff;
        }
        @keyframes slideUpNotice {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* ============ 更新日志弹窗：左侧版本号列表 + 右侧正文 ============ */
        .cl-card {
            width: min(680px, calc(100vw - 24px));
            max-height: 80vh;
            overflow: hidden;
        }
        .cl-body {
            display: flex;
            gap: 10px;
            flex: 1 1 auto;
            min-height: 0;
        }
        .cl-vcol {
            flex: 0 0 132px;
            width: 132px;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #f3f4f6;
            padding-right: 8px;
        }
        .changelog-vlist {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
            -webkit-overflow-scrolling: touch;
        }
        /* 版本号栏折叠/展开按钮（仅手机版显示） */
        .cl-vtoggle { display: none; }
        .cl-vtoggle svg { width: 12px; height: 12px; flex: 0 0 auto; }
        .changelog-body { position: relative; }
        .changelog-vitem {
            padding: 5px 8px;
            border-radius: 8px;
            font-size: 12px;
            color: #4b5563;
            cursor: pointer;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .changelog-vitem:hover { background: #f3f4f6; }
        .changelog-vitem.active { background: #eff6ff; color: #2563eb; font-weight: 700; }
        body.dark .cl-vcol { border-right-color: #334155; }
        body.dark .changelog-vitem { color: #cbd5e1; }
        body.dark .changelog-vitem:hover { background: #334155; }
        body.dark .changelog-vitem.active { background: #1e3a8a; color: #93c5fd; }
        body.dark .cl-vtoggle { background: #334155; color: #cbd5e1; }
        @media (max-width: 480px) {
            .cl-vcol { flex: 0 0 104px; width: 104px; }
            .changelog-vitem { font-size: 11px; padding: 4px 6px; }
        }
        /* 手机版：版本号栏折叠/展开 */
        @media (max-width: 768px) {
            .cl-vtoggle {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;
                flex: 0 0 auto;
                margin-bottom: 4px;
                padding: 4px 6px;
                border: none;
                border-radius: 8px;
                background: #f3f4f6;
                color: #6b7280;
                font-size: 11px;
                font-family: inherit;
                cursor: pointer;
                white-space: nowrap;
                -webkit-tap-highlight-color: transparent;
            }
            .cl-vtoggle:active { background: #e5e7eb; }
            .cl-body.cl-vcollapsed .cl-vcol {
                flex: 0 0 30px;
                width: 30px;
                padding-right: 4px;
            }
            .cl-body.cl-vcollapsed .changelog-vlist { display: none; }
            .cl-body.cl-vcollapsed .cl-vtoggle { padding: 4px 0; }
            .cl-body.cl-vcollapsed .cl-vtoggle .cl-vtoggle-txt { display: none; }
            .cl-body.cl-vcollapsed .cl-vtoggle svg { transform: rotate(180deg); }
        }

        /* ============ 移动端响应式适配 (PC端 >768px 完全不变) ============ */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            /* 顶部导航按钮缩小 */
            #topNavButtons button {
                padding: 6px 10px !important;
                font-size: 0.8rem !important;
            }
            #topNavButtons button img {
                width: 20px !important;
                height: 20px !important;
            }
            #languageMenu {
                min-width: 140px !important;
            }
            /* 标题缩小 */
            .container h1 {
                font-size: 1.6rem !important;
                margin-bottom: 16px !important;
            }
            /* 首页布局: 横向 → 纵向 */
            .container > div.flex-row {
                flex-direction: column !important;
                gap: 16px !important;
                padding-left: 4px !important;
                padding-right: 4px !important;
                width: 100% !important;
            }
            /* 左右框: 47% → 100%, 80vh → auto */
            .left-box, .games-box {
                width: 100% !important;
                height: auto !important;
                min-height: 160px;
                padding: 20px !important;
            }
            .games-box .games-btn-container {
                flex-direction: column !important;
                gap: 10px !important;
            }
            .games-box .game-btn {
                width: 100%;
                padding: 14px 20px !important;
                font-size: 1.05rem !important;
            }
            /* 弹幕入口适配 */
            .danmaku-entry {
                padding: 16px 14px !important;
            }
            .danmaku-entry .entry-title {
                font-size: 1rem !important;
            }
            .danmaku-entry .entry-subtitle {
                font-size: 0.78rem !important;
            }
            /* 弹幕页面适配 */
            .danmaku-header {
                padding: 10px 14px 10px 64px !important;
            }
            .danmaku-header h2 {
                font-size: 1.15rem !important;
            }
            .danmaku-header .back-btn {
                width: 40px !important;
                height: 40px !important;
                padding: 0 !important;
                border-radius: 8px !important;
            }
            .danmaku-area {
                padding: 12px 14px !important;
            }
            .danmaku-stage {
                border-radius: 12px !important;
            }
            .danmaku-input-bar {
                padding: 10px 12px !important;
                gap: 8px !important;
            }
            .danmaku-input-bar textarea {
                padding: 10px 12px !important;
                font-size: 0.9rem !important;
                height: 42px !important;
            }
            .danmaku-input-bar .send-btn {
                padding: 10px 16px !important;
                font-size: 0.9rem !important;
                height: 42px !important;
                align-self: flex-start !important;
            }
            .danmaku-options {
                font-size: 0.8rem !important;
            }
            .danmaku-options label {
                margin-right: 8px !important;
            }
            /* 设置模态框 */
            #settingsModal > div {
                max-width: 92% !important;
                margin: 0 4% !important;
                padding: 16px !important;
            }
            /* 账号模态框 */
            #accountModal > div {
                max-width: 92% !important;
                margin: 0 4% !important;
                padding: 16px !important;
            }
            /* 审核面板 */
            #reviewPanel {
                padding: 10px !important;
            }
            #reviewPanel > div {
                padding: 12px !important;
            }
            /* 版本更新通知 */
            .version-notice {
                right: 10px !important;
                left: 10px !important;
                max-width: none !important;
                font-size: 0.85rem !important;
            }
        }

        @media (max-width: 480px) {
            .card {
                margin: 20px auto;
                padding: 15px;
            }
            .friend-list-box {
                margin: 15px auto;
                padding: 15px;
            }
        }

        
        #battleGameOverlay * {
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
        }
        #battleGameOverlay {
            background: #0a0c18;
        }
        
        /* ====== 以下为原始对战游戏完整CSS（作用域#battleGameOverlay） ====== */

        #battleGameOverlay * {
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }

        #battleGameOverlay, #battleGameOverlay div, #battleGameOverlay canvas, #battleGameOverlay span, #battleGameOverlay p, #battleGameOverlay h1, #battleGameOverlay h2, #battleGameOverlay h3, #battleGameOverlay h4, #battleGameOverlay h5, #battleGameOverlay h6, #battleGameOverlay button, #battleGameOverlay .game-container, #battleGameOverlay .info-panel, #battleGameOverlay .battle-info-panel, #battleGameOverlay .skill-item, #battleGameOverlay .ctrl-badge, #battleGameOverlay .boss-info, #battleGameOverlay #battleGameOverlay .pause-tip {
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            pointer-events: auto;
        }

        #battleGameOverlay {
            display: flex;
            background: #0a0c18;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
            font-family: 'Courier New', 'Monaco', monospace;
            margin: 0;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            overflow: auto;
        }

        #battleGameOverlay .main-menu {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;
            padding: 40px;
            background: #11161f;
            border-radius: 28px;
            box-shadow: 0 20px 35px rgba(0,0,0,0.6);
            width: 700px;
        }
        #battleGameOverlay .mode-row {
            display: flex;
            gap: 30px;
            justify-content: center;
            width: 100%;
        }
        #battleGameOverlay .mode-btn {
            width: 260px;
            height: 90px;
            border-radius: 16px;
            border: 2px solid #6a9fdd;
            background: #1a2332;
            color: #ffffff;
            font-size: 22px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        #battleGameOverlay .mode-btn.unavailable {
            opacity: 0.65;
            background: #141b28;
            border-color: #4a6b90;
            filter: brightness(0.85);
            cursor: not-allowed;
        }
        #battleGameOverlay .mode-btn:hover:not(.unavailable) {
            background: #253349;
            border-color: #8bc0ff;
        }
        #battleGameOverlay .casual-mode-panel {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            background: #0e131f;
            border-radius: 28px;
            padding: 30px;
            width: 800px;
            position: relative;
        }
        #battleGameOverlay .casual-header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 10px;
        }
        #battleGameOverlay .back-to-main-btn {
            background: #2a3a55;
            border: 1px solid #ffaa66;
            color: #ffdd99;
            padding: 4px 12px;
            border-radius: 40px;
            cursor: pointer;
            font-family: monospace;
            font-weight: bold;
        }
        #battleGameOverlay .difficulty-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            width: 100%;
        }
        #battleGameOverlay .fun-mode-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
        }
        #battleGameOverlay .difficulty-btn {
            width: 120px;
            height: 60px;
            border-radius: 10px;
            border: 2px solid #6a9fdd;
            background: #1a2332;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        #battleGameOverlay .difficulty-btn:hover {
            background: #253349;
            border-color: #8bc0ff;
        }
        #battleGameOverlay .difficulty-btn.disabled, #battleGameOverlay .difficulty-btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #4a5568;
            background: #1a2332;
        }
        #battleGameOverlay .difficulty-btn.disabled:hover, #battleGameOverlay .difficulty-btn[disabled]:hover {
            border-color: #4a5568;
            background: #1a2332;
        }
        #battleGameOverlay .fun-mode-btn {
            width: 320px;
            height: 80px;
            border-radius: 12px;
            border: 2px solid #6a9fdd;
            background: #1a2332;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 15px;
        }
        #battleGameOverlay .fun-mode-btn:hover {
            background: #253349;
            border-color: #8bc0ff;
        }
        #battleGameOverlay .fun-mode-btn.disabled, #battleGameOverlay .fun-mode-btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #4a5568;
            background: #1a2332;
        }
        #battleGameOverlay .fun-mode-btn.disabled:hover, #battleGameOverlay .fun-mode-btn[disabled]:hover {
            border-color: #4a5568;
            background: #1a2332;
        }
        #battleGameOverlay .diff-tooltip {
            position: absolute;
            right: -10px;
            top: -10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #4a90e2;
            color: white;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: help;
            z-index: 10;
        }
        #battleGameOverlay .diff-tooltip:hover::after {
            content: attr(data-tip);
            position: absolute;
            left: 30px;
            top: 0;
            width: 380px;
            background: #111a28;
            border: 1px solid #6a9fdd;
            border-radius: 10px;
            padding: 12px;
            color: #e6f7ff;
            font-size: 12px;
            font-weight: normal;
            text-align: left;
            white-space: pre-line;
            z-index: 100;
        }
        #battleGameOverlay .hell-difficulty-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        #battleGameOverlay .difficulty-select {
            height: 60px;
            width: 80px;
            border-radius: 10px;
            border: 2px solid #6a9fdd;
            background: #1a2332;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }
        #battleGameOverlay .history-panel {
            margin-top: 20px;
            background: #0a0f1ae6;
            backdrop-filter: blur(12px);
            border-radius: 24px;
            padding: 16px;
            width: 100%;
            border: 1px solid #3a4a6e;
        }
        #battleGameOverlay .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            color: #c6e9ff;
            font-weight: bold;
        }
        #battleGameOverlay .history-list {
            max-height: 200px;
            overflow-y: auto;
            background: #03070f70;
            border-radius: 16px;
            padding: 8px;
        }
        #battleGameOverlay .history-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            margin: 6px 0;
            background: #111a28;
            border-radius: 40px;
            border-left: 4px solid #6a9fdd;
        }
        #battleGameOverlay .history-info {
            flex: 1;
            font-size: 0.75rem;
            color: #bbddff;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        #battleGameOverlay .history-actions button, #battleGameOverlay .history-clear-btn {
            background: #2a3a55;
            border: 1px solid #6a9fdd;
            color: white;
            border-radius: 30px;
            padding: 4px 12px;
            font-size: 0.7rem;
            cursor: pointer;
            font-family: monospace;
        }
        #battleGameOverlay .game-container {
            background: #11161f;
            border-radius: 28px;
            padding: 4px;
            box-shadow: 0 20px 35px rgba(0,0,0,0.6);
            position: relative;
            display: none;
            width: fit-content;
            margin: 0 auto;
        }
        #battleGameOverlay .battle-info-panel {
            position: absolute;
            left: -275px;
            top: 0;
            background: #0a0f1ae6;
            backdrop-filter: blur(12px);
            padding: 14px 12px;
            border-radius: 20px;
            border: 1px solid #6a9fdd;
            color: #ffffff;
            font-size: 0.78rem;
            font-weight: bold;
            width: 270px;
            line-height: 1.4;
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
        }
        #battleGameOverlay .stats-grid {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: 8px;
            background: #03070f70;
            padding: 6px 8px;
            border-radius: 14px;
            font-size: 0.72rem;
        }
        #battleGameOverlay canvas {
            display: block;
            margin: 0 auto;
            box-shadow: 0 0 0 2px #2e3f55;
            background-color: #0b0f17;
            border-radius: 12px;
            width: 1100px;
            height: 620px;
        }
        #battleGameOverlay .info-panel {
            margin-top: 12px;
            background: #070b12e0;
            backdrop-filter: blur(8px);
            padding: 16px 20px;
            border-radius: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 0.85rem;
            border: 1px solid #2e405b;
            color: #d6edff;
            flex-wrap: wrap;
            gap: 12px;
            width: 1100px;
            box-sizing: border-box;
        }
        #battleGameOverlay .skill-info, #battleGameOverlay .ctrl-badge {
            background: #00000099;
            padding: 4px 12px;
            border-radius: 28px;
        }
        #battleGameOverlay .controls-hint {
            display: flex;
            gap: 14px;
            font-size: 0.7rem;
            flex-wrap: wrap;
        }
        #battleGameOverlay .status-ready { color: #8effa0; text-shadow: 0 0 3px #0f0; }
        #battleGameOverlay .status-cooldown { color: #ffaa66; }
        #battleGameOverlay .status-active { color: #aa44ff; text-shadow: 0 0 3px #a0f; }
        #battleGameOverlay .boss-info {
            background: #00000099;
            padding: 4px 12px;
            border-radius: 28px;
            font-size: 0.7rem;
        }
        #battleGameOverlay .pause-tip {
            background: #20293ccc;
            padding: 2px 12px;
            border-radius: 24px;
            font-size: 0.7rem;
            font-weight: bold;
            color: #ffe6aa;
        }
        #battleGameOverlay .save-load-bar {
            display: flex;
            gap: 12px;
            margin-left: auto;
            align-items: center;
        }
        #battleGameOverlay .archive-btn, #battleGameOverlay .exit-btn, #battleGameOverlay .menu-btn, #battleGameOverlay .settings-btn {
            background: #2a3a55;
            border: 1px solid #6a9fdd;
            color: #f0f9ff;
            font-family: 'Courier New', 'Monaco', monospace;
            font-weight: bold;
            font-size: 0.7rem;
            padding: 6px 12px;
            border-radius: 40px;
            cursor: pointer;
        }
        #battleGameOverlay #importFileInput { display: none; }
        #battleGameOverlay .custom-edit-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0a1020ee;
            backdrop-filter: blur(16px);
            border: 2px solid #6a9fdd;
            border-radius: 28px;
            padding: 24px;
            z-index: 200;
            width: 520px;
            color: white;
            font-family: monospace;
            display: none;
            flex-direction: column;
            gap: 12px;
            max-height: 80vh;
            overflow-y: auto;
        }
        #battleGameOverlay .custom-edit-panel input {
            background: #1e2a3a;
            border: 1px solid #6a9fdd;
            padding: 6px;
            border-radius: 12px;
            color: white;
            width: 100px;
        }
        #battleGameOverlay .custom-edit-panel button {
            background: #2a3a55;
            border: 1px solid #8bc0ff;
            padding: 8px;
            border-radius: 40px;
            cursor: pointer;
            color: white;
            font-weight: bold;
        }
        #battleGameOverlay .dev-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin: 10px 0;
            justify-content: center;
        }
        #battleGameOverlay .dev-diff-btn {
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid #6a9fdd;
            background: #1a2332;
            color: white;
            cursor: pointer;
        }
        #battleGameOverlay .settings-panel {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            width: 280px;
            background: #0d1422ee;
            backdrop-filter: blur(16px);
            border: 2px solid #6a9fdd;
            border-radius: 28px;
            padding: 20px;
            z-index: 300;
            color: white;
            display: none;
            flex-direction: column;
            gap: 18px;
        }
        #battleGameOverlay .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
        }
        #battleGameOverlay .settings-row select, #battleGameOverlay .settings-row button {
            background: #1e2a3a;
            border: 1px solid #6a9fdd;
            color: white;
            border-radius: 20px;
            padding: 4px 12px;
            cursor: pointer;
        }
        #battleGameOverlay .system-info-bar {
            position: fixed;
            top: 10px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.7rem;
            background: #0a0c18cc;
            backdrop-filter: blur(4px);
            padding: 4px;
            color: #bbddff;
            z-index: 400;
            pointer-events: none;
            font-family: monospace;
        }
        #battleGameOverlay .settings-btn-wrapper {
            position: fixed;
            right: 10px;
            top: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #battleGameOverlay .settings-btn {
            background: #1e2a3a;
            padding: 8px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        #battleGameOverlay .settings-btn-label {
            font-size: 12px;
            color: #000000;
            margin-top: 4px;
            font-weight: 500;
        }
        
        /* 设置按钮下方面板 */
        #battleGameOverlay .settings-below-panel {
            position: fixed;
            right: 0;
            top: 60px;
            z-index: 900;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            padding-right: 8px;
        }
        
        /* 联系开发者弹窗 */
        #battleGameOverlay .contact-dev-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }

        #battleGameOverlay .contact-dev-popup {
            background: #1a2332;
            border: 2px solid #6a9fdd;
            border-radius: 20px;
            padding: 20px;
            position: relative;
            animation: popIn 0.3s ease-out;
        }

        #battleGameOverlay .contact-close-btn {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 40px;
            height: 40px;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0;
        }

        #battleGameOverlay .contact-close-btn img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        #battleGameOverlay .contact-image {
            display: block;
            max-width: 600px;
            max-height: 80vh;
            border-radius: 12px;
        }

        #battleGameOverlay .contact-dev-link {
            color: #D3D3D3;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            margin-top: 10px;
            transition: color 0.2s ease;
        }

        #battleGameOverlay .contact-dev-link:hover {
            color: #ffffff;
        }
        #battleGameOverlay .skill-item-panel {
            position: absolute;
            left: -300px;
            bottom: 20px;
            background: #0a0f1ae6;
            backdrop-filter: blur(12px);
            padding: 14px 12px;
            border-radius: 20px;
            border: 1px solid #6a9fdd;
            color: #ffffff;
            font-size: 0.78rem;
            font-weight: bold;
            width: 250px;
            line-height: 1.4;
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
            z-index: 50;
        }
        #battleGameOverlay .ice-rink-texture-panel {
            position: absolute;
            right: 20px;
            bottom: 20px;
            background: #0a0f1ae6;
            backdrop-filter: blur(12px);
            padding: 14px 12px;
            border-radius: 20px;
            border: 1px solid #6a9fdd;
            color: #ffffff;
            font-size: 0.78rem;
            font-weight: bold;
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
            z-index: 50;
            display: none;
        }
        #battleGameOverlay .ice-rink-texture-panel.active {
            display: block;
        }
        #battleGameOverlay .texture-grid {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-start;
            max-width: 300px;
        }
        #battleGameOverlay .texture-btn {
            position: relative;
            width: 40px;
            height: 40px;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.2s;
        }
        #battleGameOverlay .texture-btn:hover {
            border-color: #8bc0ff;
        }
        #battleGameOverlay .texture-btn.selected {
            border-color: #ffaa66;
        }
        #battleGameOverlay .texture-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #battleGameOverlay .texture-btn .key-hint {
            position: absolute;
            top: -2px;
            left: -2px;
            background: #2a3a55;
            color: #ffdd99;
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 4px;
            border: 1px solid #ffaa66;
        }
        #battleGameOverlay .skill-item-section {
            margin-top: 8px;
        }
        #battleGameOverlay .skill-item-section:first-child {
            margin-top: 0;
        }
        #battleGameOverlay .section-title {
            color: #6ed4ff;
            margin-bottom: 6px;
            font-size: 0.75rem;
        }
        #battleGameOverlay .slot-row {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: flex-start;
            max-width: 250px;
        }
        #battleGameOverlay .skill-item-slot {
            position: relative;
            width: 44px;
            height: 44px;
            cursor: pointer;
        }
        #battleGameOverlay .skill-item-slot img {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            border: 1px solid #6a9fdd;
            object-fit: cover;
            background: #1a2332;
        }
        #battleGameOverlay .skill-item-slot .count {
            position: absolute;
            bottom: -3px;
            right: -3px;
            background: #ff6b6b;
            color: white;
            font-size: 10px;
            font-weight: bold;
            min-width: 16px;
            height: 16px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #fff;
            padding: 0 2px;
        }
        #battleGameOverlay .skill-item-slot .key-hint {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: #2a3a55;
            color: #ffdd99;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid #ffaa66;
            white-space: nowrap;
        }
        
        /* 科幻风格游戏结束弹窗 */
        #battleGameOverlay .game-over-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 12, 24, 0.9);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }
        
        #battleGameOverlay .game-over-modal {
            position: relative;
            width: 520px;
            background: linear-gradient(135deg, #0a1020 0%, #152030 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #00d4ff, #6a9fdd, #ffaa66) 1;
            border-radius: 20px;
            padding: 40px 30px 30px;
            box-shadow: 
                0 0 60px rgba(0, 212, 255, 0.3),
                0 0 100px rgba(106, 159, 221, 0.2),
                inset 0 0 60px rgba(0, 212, 255, 0.1);
            animation: sciFiModalIn 0.6s ease-out;
        }
        
        @keyframes sciFiModalIn {
            from {
                opacity: 0;
                transform: scale(0.8) rotateX(-10deg);
                filter: blur(10px);
            }
            to {
                opacity: 1;
                transform: scale(1) rotateX(0deg);
                filter: blur(0);
            }
        }
        
        #battleGameOverlay .game-over-modal::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00d4ff, #6a9fdd, #ffaa66, #00d4ff);
            background-size: 400% 400%;
            border-radius: 20px;
            z-index: -1;
            animation: borderGlow 3s ease infinite;
        }
        
        @keyframes borderGlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        #battleGameOverlay .game-over-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        #battleGameOverlay .game-over-close-btn:hover {
            transform: scale(1.2) rotate(90deg);
            filter: drop-shadow(0 0 10px #ff6b6b);
        }
        
        #battleGameOverlay .game-over-title {
            text-align: center;
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 4px;
            background: linear-gradient(135deg, #00d4ff, #6a9fdd, #ffaa66);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        }
        
        #battleGameOverlay .game-over-title.victory {
            background: linear-gradient(135deg, #00ff88, #6a9fdd, #00d4ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .game-over-title.defeat {
            background: linear-gradient(135deg, #ff6b6b, #ffaa66, #ff4444);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        #battleGameOverlay .game-over-stats {
            background: rgba(0, 20, 40, 0.6);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }
        
        #battleGameOverlay .game-over-stats-row {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            color: #c6e9ff;
            font-size: 15px;
        }
        
        #battleGameOverlay .game-over-stats-label {
            color: #8bc0ff;
        }
        
        #battleGameOverlay .game-over-stats-value {
            font-weight: bold;
            color: #00d4ff;
        }
        
        #battleGameOverlay .game-over-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }
        
        #battleGameOverlay .game-over-btn {
            flex: 1;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: bold;
            border: 2px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Courier New', 'Monaco', monospace;
        }
        
        #battleGameOverlay .game-over-btn.exit {
            background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
            border-color: #ff6b6b;
            color: white;
        }
        
        .game-over-btn.exit:hover {
            box-shadow: 0 0 20px rgba(255, 68, 68, 0.6);
            transform: translateY(-3px);
        }
        
        #battleGameOverlay .game-over-btn.replay {
            background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
            border-color: #00ff88;
            color: #00331a;
        }
        
        #battleGameOverlay .game-over-btn.replay:hover {
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
            transform: translateY(-3px);
        }
        
        #battleGameOverlay .game-over-btn.close-only {
            background: linear-gradient(135deg, #6a9fdd 0%, #4a6faa 100%);
            border-color: #8bc0ff;
            color: white;
        }
        
        #battleGameOverlay .game-over-btn.close-only:hover {
            box-shadow: 0 0 20px rgba(106, 159, 221, 0.6);
            transform: translateY(-3px);
        }
        
        #battleGameOverlay .game-over-decor {
            position: absolute;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00d4ff, transparent);
        }
        
        #battleGameOverlay .game-over-decor.top-left {
            top: 30px;
            left: 30px;
        }
        
        #battleGameOverlay .game-over-decor.top-right {
            top: 30px;
            right: 30px;
        }
        
        #battleGameOverlay .game-over-decor.bottom-left {
            bottom: 30px;
            left: 30px;
        }
        
        #battleGameOverlay .game-over-decor.bottom-right {
            bottom: 30px;
            right: 30px;
        }
    
        
        /* ====== 对战游戏CSS结束 ====== */

        /* ====== 全屏加载遮罩 ====== */
        #globalLoading {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1e293b;
            transition: opacity 0.3s ease-out;
        }
        #globalLoading.hidden {
            opacity: 0;
            pointer-events: none;
        }
        #globalLoading .loading-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        #globalLoading .loading-gif {
            width: 80px;
            height: 80px;
            image-rendering: auto;
        }
        #globalLoading .loading-text {
            color: #94a3b8;
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            font-size: 15px;
            min-width: 96px;
            text-align: center;
            user-select: none;
        }
        /* ====== 全屏加载遮罩结束 ====== */

        /* ================================================== */
        /* ====== 界面布局优化（对齐/分组/响应式/可访问性）====== */
        /* ================================================== */

        /* 底部导航：图标缩放平滑过渡 + 手机安全区适配（iPhone 底部横条不遮挡导航） */
        .nav-tab .text-2xl { transition: transform 0.2s ease; }
        #bottomNav { padding-bottom: env(safe-area-inset-bottom, 0px); }

        /* 键盘焦点可见性：Tab 键导航时清晰标识当前位置。
           注意：不含 input/textarea/select——它们已有各自的聚焦样式（如.search-input蓝色边框、
           .input-focus聚焦环），再加全局outline会形成"双层蓝色描边" */
        button:focus-visible,
        a:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid #3b82f6;
            outline-offset: 2px;
        }

        /* 欢迎页按钮：悬停轻微上浮反馈 */
        .welcome-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }

        /* 首页布局：≤768px 四个功能卡片从上到下单列排列，禁止任何横向溢出 */
        @media (max-width: 768px) {
            html {
                overflow-y: auto !important;
            }
            body {
                justify-content: flex-start; /* 避免flex居中导致内容超高时顶部被裁且无法滚动到 */
                height: auto;
                min-height: 100vh;
                padding-top: 16px;
            }
            #homeSection {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
            #homeSection > div:first-child {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                max-width: 100% !important;
            }
            /* 首页卡片内的小游戏按钮：放弃140px最小宽度，允许随卡片收缩 */
            #homeSection .game-btn {
                min-width: 0 !important;
            }
        }
        /* ≤420px 小游戏按钮也改单列，保证360px等窄屏不溢出 */
        @media (max-width: 420px) {
            #homeSection .games-btn-container {
                grid-template-columns: 1fr !important;
            }
        }

        /* ≤480px 底部导航紧凑化：8 个标签在小屏仍清晰可辨 */
        @media (max-width: 480px) {
            #bottomNav .nav-tab .text-2xl {
                font-size: 1.25rem;
            }
            #bottomNav .nav-tab .text-xs {
                font-size: 10px;
            }
        }

        /* 底部导航已删除：账号/设置/消息面板直接铺到屏幕最底部，不再留 64px 空档 */
        #accountPanel, #settingsPanel, #messageCenterPanel {
            bottom: 0 !important;
            max-height: 100vh !important;
            /* 固定层级：高于子页面(1000)、低于新版本提示卡(1950)与所有弹窗(15000/15100)。
               这三个面板带 data-zstatic，不参与 ZStack 自动置顶，
               因此更新日志/管理数据/反馈等弹窗永远显示在面板之上 */
            z-index: 1700 !important;
        }

        /* 新版本上线卡片贴边收起后的箭头小把手（层级须高于任务栏 1800） */
        #newVersionTab {
            position: fixed;
            z-index: 1950;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3b82f6;
            color: #fff;
            font-size: 13px;
            line-height: 1;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            box-shadow: 0 2px 10px rgba(0,0,0,.25);
            opacity: .92;
        }
        #newVersionTab:hover { opacity: 1; }
        #newVersionTab[data-dragging] { opacity: 1; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
        #newVersionTab[data-edge="right"] { right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 46px; border-radius: 8px 0 0 8px; }
        #newVersionTab[data-edge="left"] { left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 46px; border-radius: 0 8px 8px 0; }
        #newVersionTab[data-edge="top"] { top: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 22px; border-radius: 0 0 8px 8px; }
        #newVersionTab[data-edge="bottom"] { bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 22px; border-radius: 8px 8px 0 0; }

        /* ============ 深色模式（body.dark，与高级秒表共用 sw-theme 存储键） ============ */
        body.dark {
            background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
            color: #e2e8f0;
        }

        /* 内联浅色背景（首页四宫格卡片等大量元素用 inline style 写死白底） */
        body.dark [style*="background:#fff"],
        body.dark [style*="background: #fff"] { background:#1e293b !important; }
        body.dark [style*="background:#f9fafb"],
        body.dark [style*="background: #f9fafb"] { background:#263348 !important; }
        body.dark [style*="background:#f3f4f6"],
        body.dark [style*="background: #f3f4f6"] { background:#263348 !important; }
        body.dark [style*="background:#f8fafc"],
        body.dark [style*="background: #f8fafc"] { background:#263348 !important; }
        body.dark [style*="#e5e7eb"] { border-color:#334155 !important; }
        body.dark [style*="#f3f4f6"] { border-color:#334155 !important; }
        body.dark [style*="color:#1f2937"],
        body.dark [style*="color: #1f2937"] { color:#e2e8f0 !important; }
        body.dark [style*="color:#000"],
        body.dark [style*="color: #000"],
        body.dark [style*="color:#000000"],
        body.dark [style*="color: #000000"] { color:#e2e8f0 !important; }

        /* Tailwind 工具类覆盖（页面大量元素直接用 text-gray-x / bg-white / border-gray-x） */
        body.dark .text-black,
        body.dark .text-gray-900,
        body.dark .text-gray-800 { color:#e5e7eb !important; }
        body.dark .text-gray-700,
        body.dark .text-gray-600 { color:#cbd5e1 !important; }
        body.dark .text-gray-500,
        body.dark .text-gray-400 { color:#94a3b8 !important; }
        body.dark .text-gray-300 { color:#64748b !important; }
        body.dark .bg-white { background:#1e293b !important; }
        body.dark .bg-gray-50 { background:#263348 !important; }
        body.dark .bg-gray-100 { background:#263348 !important; }
        body.dark .bg-gray-200 { background:#334155 !important; }
        body.dark .border-gray-100,
        body.dark .border-gray-200,
        body.dark .border-gray-300 { border-color:#334155 !important; }
        body.dark .divide-gray-200 > *,
        body.dark .divide-gray-100 > * { border-color:#334155 !important; }

        /* 表单控件 */
        body.dark input:not([type="checkbox"]):not([type="radio"]),
        body.dark textarea,
        body.dark select {
            background:#0f172a !important;
            border-color:#475569 !important;
            color:#e2e8f0 !important;
        }
        body.dark input::placeholder,
        body.dark textarea::placeholder { color:#64748b !important; }
        body.dark .input-focus:focus { border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,.2) !important; }
        body.dark .search-input { background:#0f172a !important; border-color:#475569 !important; color:#e2e8f0; }
        body.dark .search-result { background:#1e293b; border-color:#334155; }
        body.dark .search-item { border-color:#334155; color:#e2e8f0; }

        /* 自定义卡片：外层容器不再有底色/边框/阴影，只留按钮 */
        body.dark .left-box,
        body.dark .games-box {
            background: transparent;
            border: none;
            box-shadow: none;
        }
        body.dark #quizSection { background:#1e293b; border-color:#334155; color:#e2e8f0; }
        body.dark .danmaku-entry { background:#1e293b; border-color:#334155; color:#e2e8f0; }
        body.dark .danmaku-entry .entry-title { color:#e2e8f0; }
        body.dark .danmaku-entry .entry-subtitle { color:#94a3b8; }

        /* 固定面板 */
        body.dark #accountPanel,
        body.dark #settingsPanel,
        body.dark #messageCenterPanel { background:#1e293b !important; color:#e2e8f0; }

        /* 右上角工具栏圆形按钮（inline style 白底，需 !important 覆盖） */
        body.dark #topLoginBtn {
            background:#1e293b !important;
            border-color:#475569 !important;
            color:#e2e8f0 !important;
        }
        body.dark #avatarUsername { color:#e2e8f0 !important; }

        /* 版本通知条、联系开发者按钮 */
        body.dark #versionNotice { background:#1e293b !important; color:#e2e8f0; border-color:#334155; }
        body.dark #mobileContactBtn { background:#1e293b !important; color:#e2e8f0 !important; }

        /* 深色下弹窗阴影加深 */
        body.dark .shadow-2xl { box-shadow:0 25px 50px -12px rgba(0,0,0,.6) !important; }

        /* 通知条目深色化（底色/文字色为 inline style，按 data-type !important 覆盖） */
        body.dark .msg-item { box-shadow:0 4px 16px rgba(0,0,0,.5) !important; }
        body.dark .msg-item[data-type="error"] { background:#7f1d1d !important; color:#fecaca !important; }
        body.dark .msg-item[data-type="warning"] { background:#78350f !important; color:#fde68a !important; }
        body.dark .msg-item[data-type="success"] { background:#14532d !important; color:#bbf7d0 !important; }

        /* 减少动效偏好：保留弹幕滚动（24s 匀速），其余过渡与动画最小化 */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .danmaku-fly {
                animation-duration: 24s !important;
                /* 必须保持 infinite：iteration-count:1 会让弹幕播完一遍后停在起点，手机端表现为静止药丸 */
                animation-iteration-count: infinite !important;
            }
        }

        /* ============ 面板顶部返回栏（账号/设置/消息面板统一） ============ */
        .panel-back-bar {
            position: sticky;
            top: 0;
            z-index: 6;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
        }
        /* 返回键：自己画的箭头（内联 SVG），正方形、不带外侧框格，线条粗细适中 */
        .panel-back-btn {
            width: 40px;
            height: 40px;
            min-width: 40px;
            padding: 0;
            border: none;
            background: transparent;
            border-radius: 8px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #374151;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform .12s ease, color .15s ease;
        }
        .panel-back-btn svg { width: 24px; height: 24px; display: block; }
        .panel-back-btn:hover { background: transparent; color: #111827; }
        .panel-back-btn:active { transform: scale(.9); }
        .panel-back-title { font-weight: 700; color: #1f2937; font-size: 1.05rem; }
        body.dark .panel-back-bar { background: #0f172a; border-color: #1e293b; }
        body.dark .panel-back-btn { background: transparent; color: #e2e8f0; }
        body.dark .panel-back-btn:hover { background: transparent; color: #fff; }
        body.dark .panel-back-title { color: #e2e8f0; }

        /* 消息面板 tab 栏：窄屏横向滑动，不再被"联系开发者"盖住、不再把"好友聊天"挤出屏幕 */
        .msg-tabs-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            flex-wrap: nowrap;
        }
        .msg-tabs-scroll::-webkit-scrollbar { display: none; }
        .msg-tabs-scroll button { flex-shrink: 0; }

        /* 默契答题顶部返回按钮：同样是无外框的自绘箭头 */
        .quiz-back-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: #374151;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform .12s ease, color .15s ease;
        }
        .quiz-back-btn svg { width: 24px; height: 24px; display: block; }
        .quiz-back-btn:hover { background: transparent; color: #111827; }
        .quiz-back-btn:active { transform: scale(.9); }
        body.dark .quiz-back-btn { background: transparent; color: #e2e8f0; }
        body.dark .quiz-back-btn:hover { background: transparent; color: #fff; }

        /* 手机布局下的"电脑版"切换悬浮按钮（显示与否由 CSS 按布局决定） */
        #viewModeToggleMobile {
            position: fixed; right: 12px; bottom: 74px; z-index: 1850;
            display: none; align-items: center; gap: 4px;
            padding: 7px 14px; border: none; border-radius: 999px;
            background: rgba(31, 41, 55, .88); color: #fff;
            font-size: 12px; font-weight: 600; cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
            -webkit-user-select: none; user-select: none;
        }
        html.force-mobile #viewModeToggleMobile { display: inline-flex; }
        @media (max-width: 768px) {
            html:not(.force-desktop) #viewModeToggleMobile { display: inline-flex; }
        }
        html.force-desktop #viewModeToggleMobile { display: none !important; }

        /* ============ 新导航：桌面左侧文字任务栏 + 移动底部彩色图标导航 ============ */
        /* 默契答题首页/编辑器：全屏铺满，内容靠左上角，不再继承 left-box 的 400px 居中窄框 */
        #quizSection {
            width: 100% !important;
            max-width: none !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 4px !important;
            min-height: 0 !important;
            max-height: none !important;
            text-align: left !important;
            flex: 1 1 auto !important;
        }

        /* 桌面端左侧文字任务栏（默认隐藏，≥769px 显示） */
        #desktopSidebar {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 168px;
            background: #ffffff;
            border-right: 1px solid #e5e7eb;
            flex-direction: column;
            padding-top: 0;
            z-index: 90;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
            box-sizing: border-box;
        }
        #desktopSidebar .side-nav-item {
            padding: 15px 22px;
            font-size: 15px;
            font-weight: 500;
            color: #4b5563;
            cursor: pointer;
            border-bottom: 1px solid #f3f4f6;
            transition: background .15s ease, color .15s ease;
            text-align: left;
            user-select: none;
            -webkit-user-select: none;
        }
        #desktopSidebar .side-nav-item:hover { background: #f9fafb; color: #1f2937; }
        #desktopSidebar .side-nav-item.active {
            background: linear-gradient(to right, #dbeafe 0%, transparent 100%);
            color: #2563eb;
            font-weight: 700;
            border-left: 3px solid #2563eb;
        }
        body.dark #desktopSidebar { background: #0f172a; border-color: #1e293b; }
        body.dark #desktopSidebar .side-nav-item { color: #cbd5e1; border-color: #1e293b; }
        body.dark #desktopSidebar .side-nav-item:hover { background: #1e293b; color: #f1f5f9; }
        body.dark #desktopSidebar .side-nav-item.active { background: linear-gradient(to right, #1e3a5f 0%, transparent 100%); color: #60a5fa; border-left-color: #3b82f6; }

        /* 移动端底部导航（默认隐藏，≤768px 显示） */
        #mobileNavbar {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 60px;
            background: #ffffff;
            border-top: 1px solid #e5e7eb;
            z-index: 90;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
            box-sizing: border-box;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }
        #mobileNavbar .mobile-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            cursor: pointer;
            color: #6b7280;
            font-size: 11px;
            line-height: 1;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        #mobileNavbar .mobile-nav-item .mnav-icon {
            width: 24px;
            height: 24px;
            transition: transform .15s ease;
        }
        #mobileNavbar .mobile-nav-item span { white-space: nowrap; }
        #mobileNavbar .mobile-nav-item.active { color: #2563eb; font-weight: 700; }
        #mobileNavbar .mobile-nav-item.active .mnav-icon { transform: scale(1.15); }
        body.dark #mobileNavbar { background: #0f172a; border-color: #1e293b; }
        body.dark #mobileNavbar .mobile-nav-item { color: #94a3b8; }
        body.dark #mobileNavbar .mobile-nav-item.active { color: #60a5fa; }

        /* 桌面端：显示左侧任务栏，内容区靠左全宽 */
        @media (min-width: 769px) {
            html { overflow-y: auto !important; }
            body {
                align-items: flex-start !important;
                justify-content: flex-start !important;
                padding: 0 !important;
            }
            #desktopSidebar { display: flex !important; }
            #mobileNavbar { display: none !important; }
            #homeContainer {
                max-width: none !important;
                width: calc(100% - 168px) !important;
                margin-left: 168px !important;
                margin-right: 0 !important;
                padding: 56px 20px 32px !important;
                align-items: flex-start !important;
                box-sizing: border-box;
            }
            #mainContent {
                max-width: none !important;
                width: 100% !important;
                justify-content: flex-start !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box;
            }
            /* 内容列：桌面端居中、限宽 720px，既不挤成窄条也不拉伸到屏幕边缘 */
            #chatSection, #contactsSection, #toolsSection, #discoverSection, #gamesSection {
                width: 100% !important;
                max-width: 720px !important;
                min-height: 0 !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            #homeContainer #homeSection { display: none !important; }
        }

        /* 移动端：显示底部导航，内容区底部留出导航高度 */
        @media (max-width: 768px) {
            #desktopSidebar { display: none !important; }
            #mobileNavbar { display: flex !important; }
            #homeContainer { padding-bottom: 84px !important; }
            #mainContent { padding-left: 4px !important; padding-right: 4px !important; }
            /* 默契答题不再单独出现小滚动条，统一由页面大滚动条滚动 */
            #quizSection { padding: 0 4px !important; }
        }

        /* 子页面全屏模式：进入默契答题/共享文件等子页面时隐藏任务栏，内容占满全屏 */
        body.subpage-active #desktopSidebar, body.subpage-active #mobileNavbar { display: none !important; }
        @media (min-width: 769px) {
            body.subpage-active #homeContainer { width: 100% !important; margin-left: 0 !important; }
            body.subpage-active #quizSection, body.subpage-active #sharedSection { max-width: none !important; }
            /* 旧版"任务栏常显"规则会让工具页/弹幕页让出左侧168px，全屏模式下必须归零 */
            body.subpage-active #danmakuPage, body.subpage-active #lotteryPage,
            body.subpage-active #stopwatchPage, body.subpage-active #webCodeEditorPage {
                left: 0 !important; width: 100% !important;
            }
        }
        @media (max-width: 768px) {
            body.subpage-active #homeContainer { padding-bottom: 0 !important; }
            body.subpage-active #danmakuPage, body.subpage-active #lotteryPage,
            body.subpage-active #stopwatchPage, body.subpage-active #webCodeEditorPage {
                bottom: 0 !important; height: 100% !important;
            }
        }
        /* 手动切电脑版/手机版时，全屏子页面同样不让出任务栏 */
        html.force-desktop body.subpage-active #danmakuPage, html.force-desktop body.subpage-active #lotteryPage,
        html.force-desktop body.subpage-active #stopwatchPage, html.force-desktop body.subpage-active #webCodeEditorPage {
            left: 0 !important; width: 100% !important;
        }
        html.force-mobile body.subpage-active #danmakuPage, html.force-mobile body.subpage-active #lotteryPage,
        html.force-mobile body.subpage-active #stopwatchPage, html.force-mobile body.subpage-active #webCodeEditorPage {
            bottom: 0 !important; height: 100% !important;
        }

        /* 设置 / 消息子页面：全屏显示（隐藏任务栏后不能再留 60px 底部空白） */
        body.subpage-active #settingsPanel,
        body.subpage-active #messageCenterPanel {
            bottom: 0 !important;
            max-height: 100vh !important;
            left: 0 !important;
            width: 100% !important;
        }
        /* 默契答题 / 共享文件：全屏显示时内容区铺满，不再受 .left-box 的 560/720px 限宽 */
        body.subpage-active #homeContainer,
        body.subpage-active #mainContent {
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 0 !important;
        }
        body.subpage-active #quizSection,
        body.subpage-active #sharedSection {
            width: 100% !important;
            max-width: none !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 14px !important;
            padding-right: 14px !important;
        }

        /* ============ v0.22.0.1 布局：左下角按钮组 + 内容区顶部登录态 + 面板留侧栏 ============ */
        /* 左侧栏顶部站点名 */
        #desktopSidebar .side-site-name {
            padding: 16px 18px 14px;
            font-size: 15px;
            font-weight: 800;
            color: #1f2937;
            border-bottom: 2px solid #e5e7eb;
            letter-spacing: 0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }
        body.dark #desktopSidebar .side-site-name { color: #f1f5f9; border-color: #1e293b; }

        /* 桌面端：控制按钮组移到左下角，登录态组移到内容区顶部 */
        @media (min-width: 769px) {
            /* 左下角控制按钮组必须完全落在左侧任务栏（0~168px）之内：
               之前是一整行（3 个圆形按钮 + 联系开发者文字按钮 ≈ 235px）超过了 168px，
               右半截被 left:168px 的账号/设置面板盖住（表现为"联系开发者被面板压在下面"）。
               现在限制宽度并允许换行：第一行 3 个圆形按钮，第二行整宽的"联系开发者"。 */
            #controlBar {
                top: auto !important;
                right: auto !important;
                left: 9px !important;
                bottom: 12px !important;
                width: 150px !important;
                max-width: 150px !important;
                flex-wrap: wrap !important;
                justify-content: flex-start !important;
                gap: 6px !important;
                /* 必须高于左侧任务栏(1800)和面板(1700)：任务栏改为常显后层级提到 1800，
                   这里若仍是 1750 就会被任务栏盖住，表现为"左下角按钮消失" */
                z-index: 1900 !important;
            }
            #controlBar > * { flex: 0 0 auto; }
            #controlBar #mobileContactBtn {
                flex: 1 1 100% !important;
                width: 100% !important;
                height: 34px !important;
            }
            #authBar {
                top: 8px !important;
                right: 16px !important;
                left: auto !important;
                bottom: auto !important;
            }
            /* 正文内容避开顶部登录态，不与登录/注册按钮重叠 */
            #homeContainer {
                padding-top: 56px !important;
            }
            /* 账号/设置/消息面板不全屏，保留左侧任务栏 */
            #accountPanel, #settingsPanel, #messageCenterPanel {
                left: 168px !important;
                bottom: 0 !important;
                max-height: 100vh !important;
            }
            /* 电脑端账号面板左上角返回键已删除（按要求）；设置作为子页面保留返回键 */
            #accountPanel .panel-back-bar { display: none !important; }
        }

        /* 设置面板里"联系开发者"一行：仅手机端显示（电脑端左下角已有该按钮，避免重复） */
        .settings-mobile-only { display: none !important; }
        @media (max-width: 768px) { .settings-mobile-only { display: flex !important; } }
        html.force-mobile .settings-mobile-only { display: flex !important; }
        html.force-desktop .settings-mobile-only { display: none !important; }

        /* 移动端：右上角只保留登录/注册/头像。
           控制按钮组（深浅色/消息/设置/联系开发者）在移动端整组移除——
           深浅色+联系开发者移入设置面板，消息从聊天栏进入，设置走底部导航，故 #controlBar 隐藏。 */
        @media (max-width: 768px) {
            #controlBar { display: none !important; }
            /* 手机版不再在右上角显示登录/注册（走底部导航的"账号"） */
            #topRightAuth { display: none !important; }
            #authBar { top: 8px !important; right: 8px !important; gap: 6px !important; }
            #topLoginBtn, #topRegisterBtn { padding: 6px 13px !important; font-size: 12px !important; }
            #avatarCircle { width: 38px !important; height: 38px !important; }
            /* 账号/设置/消息面板：底部让出任务栏高度，任务栏始终可见可点 */
            #accountPanel, #settingsPanel, #messageCenterPanel {
                bottom: 60px !important;
                max-height: calc(100vh - 60px) !important;
            }
            /* 移动端账号面板去掉顶部返回按钮，改用底部任务栏导航；
               消息/设置作为账号栏的子页面保留返回键方便退出 */
            #accountPanel .panel-back-bar { display: none !important; }
        }

        /* 移动端底部任务栏必须始终可见（高于面板的自然层级，面板已让出底部空间） */
        @media (max-width: 768px) {
            #mobileNavbar { z-index: 900 !important; }
        }

        /* ============================================================
           手动切换端样式：html.force-mobile / html.force-desktop
           （由左下/侧栏的"访问手机版 / 访问电脑版"按钮切换，localStorage 持久化）
           这些选择器带类名，优先级高于上面的媒体查询，因此可以覆盖宽度判断
           ============================================================ */

        /* —— 强制手机版：隐藏左侧任务栏，显示底部导航，内容收成手机宽度居中 —— */
        html.force-mobile #desktopSidebar { display: none !important; }
        html.force-mobile #mobileNavbar { display: flex !important; }
        html.force-mobile body {
            align-items: center !important;
            justify-content: flex-start !important;
            padding: 0 !important;
        }
        html.force-mobile #homeContainer {
            width: 100% !important;
            max-width: 560px !important;
            margin: 0 auto !important;
            padding: 0 0 84px 0 !important;
            align-items: center !important;
            box-sizing: border-box;
        }
        /* 电脑端切到手机版：内容列同样限宽居中，不再因为 47% 宽度被压成一条窄条 */
        html.force-mobile .left-box,
        html.force-mobile .games-box {
            width: 100% !important;
            max-width: 560px !important;
            min-height: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        html.force-mobile #mainContent { padding-left: 8px !important; padding-right: 8px !important; }
        /* 手机版样式下隐藏控制按钮组（深浅色/联系开发者已移入设置面板，消息从聊天栏进入） */
        html.force-mobile #controlBar { display: none !important; }
        html.force-mobile #authBar { top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; gap: 6px !important; }
        html.force-mobile #topRightAuth { display: none !important; }
        html.force-mobile #topLoginBtn, html.force-mobile #topRegisterBtn { padding: 6px 13px !important; font-size: 12px !important; }
        html.force-mobile #avatarCircle { width: 38px !important; height: 38px !important; }
        html.force-mobile #accountPanel, html.force-mobile #settingsPanel, html.force-mobile #messageCenterPanel {
            left: 0 !important; bottom: 60px !important; max-height: calc(100vh - 60px) !important;
        }
        html.force-mobile #accountPanel .panel-back-bar { display: none !important; }
        html.force-mobile #mobileNavbar {
            z-index: 900 !important;
            left: 50% !important; right: auto !important;
            transform: translateX(-50%) !important;
            width: 480px !important; max-width: 100vw !important;
            border-radius: 12px 12px 0 0 !important;
        }
        html.force-mobile #quizSection { max-height: none !important; overflow: visible !important; }

        /* —— 强制电脑版：窄屏也显示左侧任务栏（手机端可切回电脑版布局） —— */
        html.force-desktop #desktopSidebar { display: flex !important; }
        html.force-desktop #mobileNavbar { display: none !important; }
        html.force-desktop body {
            align-items: flex-start !important;
            justify-content: flex-start !important;
            padding: 0 !important;
        }
        html.force-desktop #homeContainer {
            width: calc(100% - 168px) !important;
            max-width: none !important;
            margin-left: 168px !important;
            margin-right: 0 !important;
            padding: 56px 20px 32px !important;
            align-items: flex-start !important;
            box-sizing: border-box;
        }
        html.force-desktop #mainContent {
            max-width: none !important; width: 100% !important;
            justify-content: flex-start !important;
            padding-left: 0 !important; padding-right: 0 !important;
            box-sizing: border-box;
        }
        html.force-desktop #chatSection, html.force-desktop #toolsSection, html.force-desktop #gamesSection {
            width: 100% !important; max-width: none !important; min-height: 0 !important;
        }
        html.force-desktop #homeContainer #homeSection { display: none !important; }
        html.force-desktop #controlBar {
            top: auto !important; right: auto !important; left: 9px !important; bottom: 12px !important;
            width: 150px !important; max-width: 150px !important;
            flex-wrap: wrap !important; z-index: 1900 !important;
            /* 窄屏上切"电脑版"时，移动端媒体查询仍会命中并隐藏控制组，
               这里显式恢复显示（force-desktop 特异性更高） */
            display: flex !important;
        }
        html.force-desktop #controlBar #mobileContactBtn {
            flex: 1 1 100% !important; width: 100% !important; height: 34px !important;
        }
        html.force-desktop #authBar { top: 8px !important; right: 16px !important; left: auto !important; bottom: auto !important; }
        html.force-desktop #accountPanel, html.force-desktop #settingsPanel, html.force-desktop #messageCenterPanel {
            left: 168px !important; bottom: 0 !important; max-height: 100vh !important;
        }
        /* 电脑端账号面板左上角返回键已删除（按要求）；设置作为子页面保留返回键 */
        html.force-desktop #accountPanel .panel-back-bar { display: none !important; }

        /* 好友页：整页显示（让出任务栏），返回键与图1一致 */
        #friendPage {
            position: fixed;
            top: 0; left: 168px; right: 0; bottom: 0;
            z-index: 15000;
            display: none;
            flex-direction: column;
            background: #f3f4f6;
        }
        @media (max-width: 768px) {
            #friendPage { left: 0; bottom: 60px; }
        }
        html.force-mobile #friendPage { left: 0 !important; bottom: 60px !important; }
        html.force-desktop #friendPage { left: 168px !important; bottom: 0 !important; }

        /* ============================================================
           好友页"好友申请"按钮：绝对定位贴页面真正右上角
           （之前按钮在 flex 流中，只靠上、不贴右；现在脱离文档流）
           ============================================================ */
        .friend-req-slot { flex: 0 0 auto; min-width: 0; }
        #friendReqBtn {
            position: absolute;
            top: 10px;
            right: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 4px 10px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        #friendReqBtn:hover { background: #fafafa; }
        .friend-req-text { font-size: 11px; color: #6b7280; white-space: nowrap; line-height: 1; }
        #friendReqBadge {
            display: none;
            position: absolute;
            top: -7px;
            right: -7px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: 11px;
            line-height: 18px;
            text-align: center;
            font-weight: 700;
            box-sizing: border-box;
        }
        @media (max-width: 768px) {
            #friendReqBtn { top: 8px; right: 8px; }
        }
        body.dark #friendReqBtn { background: #1e293b; border-color: #334155; }
        body.dark .friend-req-text { color: #94a3b8; }

        /* ============================================================
           好友申请：屏幕居中的独立模态小窗口
           铁律：只能点窗口内右上角叉叉关闭；点击遮罩/窗口外部不关闭；
           不绑定 Esc。固定层级 16000（遮罩 15999），高于好友页 15000。
           ============================================================ */
        .frq-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 15999;
        }
        .frq-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 340px;
            max-width: calc(100vw - 32px);
            max-height: 80vh;
            background: #fff;
            color: #1f2937;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
            z-index: 16000;
            padding: 16px;
            flex-direction: column;
        }
        .frq-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
            flex: 0 0 auto;
        }
        .frq-title { font-weight: 700; font-size: 15px; }
        .frq-close {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 26px;
            line-height: 1;
            color: #9ca3af;
            padding: 2px 6px 6px 6px;
            border-radius: 10px;
            min-width: 40px;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .frq-close:hover { background: #f3f4f6; color: #6b7280; }
        .frq-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 40px; }
        body.dark .frq-modal { background: #1e293b; color: #e2e8f0; border-color: #334155; }
        body.dark .frq-close { color: #94a3b8; }
        body.dark .frq-close:hover { background: #334155; color: #e2e8f0; }

        /* ============================================================
           任务栏常显：进入工具页/小游戏后，左侧任务栏（桌面）和底部任务栏（手机）
           仍然显示。做法：任务栏层级提到工具页之上，同时把工具页整体让出任务栏宽度，
           避免内容被任务栏压住。
           ============================================================ */
        @media (min-width: 769px) {
            #desktopSidebar { z-index: 1800 !important; }
            #danmakuPage, #lotteryPage, #stopwatchPage, #webCodeEditorPage,
            #myDanmakuListPage, #reviewPanel,
            #dmChatPage, #groupChatPage, #hiddenContactsPage, #announcementDetailPage,
            #battleGameOverlay, #pixelGameOverlay, #mechaGameOverlay, #jinhanzhenGameOverlay {
                left: 168px !important;
                width: calc(100% - 168px) !important;
                height: 100% !important;
            }
        }
        @media (max-width: 768px) {
            #mobileNavbar { z-index: 1800 !important; }
            #danmakuPage, #lotteryPage, #stopwatchPage, #webCodeEditorPage,
            #myDanmakuListPage, #reviewPanel,
            #dmChatPage, #groupChatPage, #hiddenContactsPage, #announcementDetailPage,
            #battleGameOverlay {
                bottom: 60px !important;
                height: calc(100% - 60px) !important;
            }
            /* 像素沙盒 / 机甲对战是全屏游戏，必须铺满整个屏幕并且层级高于底部任务栏：
               这两个覆盖层自身会形成层叠上下文，它自带的右下角"关闭游戏/设置"按钮
               再高的 z-index 也出不去，之前就被底部任务栏整个盖住了（看起来像没有退出按钮） */
            #pixelGameOverlay, #mechaGameOverlay, #jinhanzhenGameOverlay {
                bottom: 0 !important;
                height: 100% !important;
                z-index: 1900 !important;
            }
            /* 手机端游戏自带的方向摇杆/跳跃键就在屏幕右下角，退出按钮要往上让开，
               否则会盖住跳跃键导致点不到 */
            .game-exit-bar { bottom: 132px !important; right: 12px !important; }
        }
        /* 手动切到手机版时，也要让出底部任务栏（全屏游戏除外） */
        html.force-mobile #danmakuPage, html.force-mobile #lotteryPage, html.force-mobile #stopwatchPage,
        html.force-mobile #webCodeEditorPage, html.force-mobile #myDanmakuListPage, html.force-mobile #reviewPanel,
        html.force-mobile #dmChatPage, html.force-mobile #groupChatPage, html.force-mobile #hiddenContactsPage,
        html.force-mobile #announcementDetailPage,
        html.force-mobile #battleGameOverlay {
            bottom: 60px !important;
            height: calc(100% - 60px) !important;
        }
        /* 像素沙盒 / 机甲对战：手机版样式下同样铺满整屏、盖住底部任务栏，保证退出按钮可见 */
        html.force-mobile #pixelGameOverlay, html.force-mobile #mechaGameOverlay, html.force-mobile #jinhanzhenGameOverlay {
            bottom: 0 !important;
            height: 100% !important;
            z-index: 1900 !important;
        }
        html.force-mobile .game-exit-bar { bottom: 132px !important; right: 12px !important; }
        /* 手动切到电脑版时（窄屏），工具页让出左侧任务栏 */
        html.force-desktop #danmakuPage, html.force-desktop #lotteryPage, html.force-desktop #stopwatchPage,
        html.force-desktop #webCodeEditorPage, html.force-desktop #myDanmakuListPage, html.force-desktop #reviewPanel,
        html.force-desktop #dmChatPage, html.force-desktop #groupChatPage, html.force-desktop #hiddenContactsPage,
        html.force-desktop #announcementDetailPage,
        html.force-desktop #battleGameOverlay, html.force-desktop #pixelGameOverlay, html.force-desktop #mechaGameOverlay, html.force-desktop #jinhanzhenGameOverlay {
            left: 168px !important;
            width: calc(100% - 168px) !important;
            height: 100% !important;
        }

        /* ============ 下载软件小窗里的两个"框" ============ */
        .da-cards { display: flex; flex-direction: column; gap: 10px; }
        .da-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px 14px;
            background: #fff;
        }
        .da-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .da-title { font-size: 15px; font-weight: 700; color: #1f2937; }
        .da-badge {
            font-size: 11px;
            font-weight: 700;
            color: #15803d;
            background: #dcfce7;
            border-radius: 999px;
            padding: 2px 8px;
        }
        .da-ver { font-size: 12px; color: #6b7280; margin-top: 4px; }
        .da-actions { margin-top: 10px; }
        .da-btn {
            display: inline-block;
            padding: 8px 18px;
            border-radius: 10px;
            background: #2563eb;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }
        .da-btn:hover { background: #1d4ed8; }
        .da-btn-disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
        body.dark .da-card { background: #0f172a; border-color: #334155; }
        body.dark .da-title { color: #e2e8f0; }
        body.dark .da-ver { color: #94a3b8; }

        /* ============================================================
           深色模式：站内子页面跟随（弹幕广场/好友页/默契答题/公告详情/审核面板）
           这些页面自身的背景与卡片是浅色写死的，切深色时要一起变深。
           （抽签、秒表、网页代码编辑工具是独立 iframe 文档，由主站广播 site-theme 消息、
             由各自页面内的脚本应用 body.dark，见 toggleSiteTheme/broadcastSiteThemeToIframes）
           ============================================================ */
        body.dark #danmakuPage,
        body.dark #myDanmakuListPage,
        body.dark #friendPage,
        body.dark #announcementDetailPage,
        body.dark #quizSection,
        body.dark #reviewPanel,
        body.dark #stopwatchPage,
        body.dark #webCodeEditorPage,
        body.dark #lotteryPage {
            background: #0f172a !important;
            color: #e2e8f0;
        }
        /* 所有子页面标题栏（含秒表/网页代码编辑/抽签）统一变深，返回键颜色同步 */
        body.dark .danmaku-header {
            background: #1e293b !important;
            border-bottom-color: #334155 !important;
        }
        body.dark .danmaku-header h2 {
            color: #e2e8f0 !important;
        }
        /* 子页面内写死的白色卡片 / 白色底输入区统一变深 */
        body.dark :is(#danmakuPage, #myDanmakuListPage, #friendPage, #announcementDetailPage, #quizSection, #reviewPanel, #stopwatchPage, #webCodeEditorPage, #lotteryPage) [style*="background:#fff"],
        body.dark :is(#danmakuPage, #myDanmakuListPage, #friendPage, #announcementDetailPage, #quizSection, #reviewPanel, #stopwatchPage, #webCodeEditorPage, #lotteryPage) [style*="background: #fff"],
        body.dark :is(#danmakuPage, #myDanmakuListPage, #friendPage, #announcementDetailPage, #quizSection, #reviewPanel, #stopwatchPage, #webCodeEditorPage, #lotteryPage) [style*="background:#ffffff"] {
            background: #1e293b !important;
            border-color: #334155 !important;
        }
        body.dark :is(#danmakuPage, #myDanmakuListPage, #friendPage, #announcementDetailPage, #quizSection, #reviewPanel, #stopwatchPage, #webCodeEditorPage, #lotteryPage) [style*="background:#f3f4f6"],
        body.dark :is(#danmakuPage, #myDanmakuListPage, #friendPage, #announcementDetailPage, #quizSection, #reviewPanel, #stopwatchPage, #webCodeEditorPage, #lotteryPage) [style*="background:#f9fafb"] {
            background: #0f172a !important;
            border-color: #334155 !important;
        }
        /* 弹幕广场/好友页里的返回键、空状态文字 */
        body.dark #danmakuPage .danmaku-empty,
        body.dark #myDanmakuListPage .danmaku-empty { color: #94a3b8 !important; }

        /* ============================================================
           聊天 / 通讯录 / 群聊 / 公共留言板
           ============================================================ */
        /* 区块标题行 + 右上角加号 */
        .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
        .sec-title { font-size: 1.05rem; font-weight: 700; color: #1f2937; }
        .sec-head-right { position: relative; display: flex; align-items: center; gap: 8px; }
        .sec-plus {
            width: 34px; height: 34px; border: none; background: #eef2ff; color: #4f46e5;
            border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-weight: 700;
            padding: 0;
        }
        /* 加号用 SVG 画，保证在正圆里严丝合缝居中（文字"+"的光学中心偏上偏左） */
        .sec-plus > svg { display: block; flex: 0 0 auto; }
        .sec-plus:hover { background: #e0e7ff; }
        .sec-mini {
            border: none; background: transparent; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer;
        }
        .sec-list { display: flex; flex-direction: column; gap: 8px; }
        .sec-empty { color: #9ca3af; font-size: 13px; padding: 10px 4px; }

        /* 加号菜单：固定位置（挂在按钮下方，不跟随光标） */
        .chat-plus-menu {
            position: absolute; top: 40px; right: 0; z-index: 20;
            background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
            box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; min-width: 132px;
            display: flex; flex-direction: column;
        }
        /* 注意：.chat-plus-menu / .multi-bar 自带 display，必须显式覆盖 .hidden，
           否则 Tailwind 的 .hidden 会被后面的 display 规则盖掉（菜单会一直显示） */
        .chat-plus-menu.hidden,
        .multi-bar.hidden,
        .hidden-contacts-row.hidden { display: none !important; }
        .chat-plus-menu button {
            border: none; background: transparent; text-align: left; padding: 9px 12px;
            font-size: 14px; color: #374151; border-radius: 8px; cursor: pointer; white-space: nowrap;
        }
        .chat-plus-menu button:hover { background: #f3f4f6; }

        /* 通讯录：隐藏的联系人一行 */
        .hidden-contacts-row { margin: 10px 0; }
        .hidden-contacts-row button {
            width: 100%; padding: 10px 12px; border: none; border-radius: 10px;
            background: #f1f5f9; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer;
        }
        .hidden-contacts-row button:hover { background: #e2e8f0; }

        /* 联系人 / 群聊 行 */
        .contact-row {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; cursor: pointer;
            transition: border-color .15s ease, background .15s ease;
        }
        .contact-row:hover { border-color: #93c5fd; }
        .contact-row.selected { background: #eff6ff; border-color: #3b82f6; }
        .contact-row.self { cursor: default; }
        .cr-check { font-size: 16px; color: #2563eb; flex-shrink: 0; }
        .cr-avatar { font-size: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; }
        .cr-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cr-actions { flex-shrink: 0; }
        .cr-btn {
            border: none; background: #eef2ff; color: #4f46e5; font-size: 12px; font-weight: 600;
            padding: 5px 10px; border-radius: 8px; cursor: pointer;
        }
        .cr-btn:hover { background: #e0e7ff; }
        .tag-self, .tag-group, .tag-blocked {
            display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px;
            border-radius: 999px; font-weight: 600; vertical-align: middle;
        }
        .tag-self { background: #dcfce7; color: #16a34a; }
        .tag-group { background: #e0e7ff; color: #4f46e5; }
        .tag-blocked { background: #fee2e2; color: #dc2626; }

        /* 多选操作条 */
        .multi-bar {
            position: sticky; bottom: 0; margin-top: 10px; padding: 8px 10px;
            background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
            display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
            box-shadow: 0 -4px 16px rgba(0,0,0,.06);
        }
        .multi-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .mb-btn {
            border: none; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600;
            padding: 6px 10px; border-radius: 8px; cursor: pointer;
        }
        .mb-btn:hover { background: #e2e8f0; }
        .mb-btn.danger { background: #fee2e2; color: #dc2626; }
        .mb-btn.danger:hover { background: #fecaca; }

        /* 公共留言板：浅色木纹底板 */
        .board-head { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; }
        .board-hint { font-size: 12px; color: #9ca3af; }
        .board-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
        .board-input {
            flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 10px;
            font-size: 14px; outline: none; background: #fff;
        }
        .board-input:focus { border-color: #93c5fd; }
        .board-send {
            border: none; background: linear-gradient(to right, var(--primary-start, #3b82f6), var(--primary-end, #1d4ed8));
            color: #fff; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 10px; cursor: pointer; flex-shrink: 0;
        }
        .board-list { display: flex; flex-direction: column; gap: 8px; }
        .board-item-wrap { display: flex; flex-direction: column; }
        .board-item {
            display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
            /* 浅色木纹底板：纯 CSS 绘制（避免使用外链图片带来水印/依赖） */
            background-color: #f0e0c4;
            background-image:
                repeating-linear-gradient(90deg, rgba(150, 110, 60, .10) 0 2px, rgba(255, 255, 255, 0) 2px 28px),
                repeating-linear-gradient(0deg, rgba(120, 80, 40, .05) 0 1px, rgba(255, 255, 255, 0) 1px 15px),
                linear-gradient(180deg, #f7ead2 0%, #eedcba 100%);
            border: 1px solid #e0cda8; color: #4b3621;
        }
        .gb-name { font-size: 12px; font-weight: 700; flex-shrink: 0; color: #6b4f2a; }
        .gb-text { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; }
        .gb-time { font-size: 11px; color: #8a6f4c; flex-shrink: 0; }
        .gb-act {
            display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
            border: none; background: rgba(255, 255, 255, .6); color: #6b4f2a; font-size: 12px;
            padding: 4px 10px; border-radius: 9px; cursor: pointer;
        }
        .gb-act:hover { background: #fff; }
        .gb-like.active { background: #fee2e2; color: #dc2626; }
        .gb-count { font-size: 12px; font-weight: 700; }
        /* 点赞 / 评论图标：形状用 SVG，尺寸与颜色（currentColor）由这里的 CSS 控制 */
        .ico-like, .ico-cmt { width: 17px; height: 17px; display: block; flex-shrink: 0; }
        .gb-del {
            border: none; background: rgba(255,255,255,.6); color: #b91c1c; font-size: 12px;
            padding: 4px 8px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
            display: inline-flex; align-items: center; gap: 5px;
        }
        /* 删除留言：第一次点击后按钮进入"确认删除"状态（红底白字白桶） */
        .gb-del.armed { background: #dc2626; color: #fff; }
        /* 垃圾桶图标（留言删除 / 评论删除共用）：直接复用抽签工具的删除图标 */
        .gb-trash-svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
        /* 留言 / 评论的用户头像：圆形；没有头像时显示用户名首字 */
        .gb-avatar {
            width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
            display: inline-flex; align-items: center; justify-content: center;
            background: #e3d3b6; color: #6b4f2a; font-size: 12px; font-weight: 700;
            border: 1px solid #cbb38a; box-sizing: border-box; overflow: hidden; user-select: none;
        }
        .gb-cmt-avatar { width: 22px; height: 22px; font-size: 11px; }
        /* 留言的评论区（点"评论"展开）：内容整体靠左 */
        .gb-cmt-panel {
            padding: 8px 12px; background: #f8f5ef; border: 1px solid #e6dcc8; border-top: none;
            border-radius: 0 0 10px 10px; margin-top: -4px; text-align: left;
        }
        .gb-cmt-panel.hidden { display: none !important; }
        .gb-cmt-row {
            display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px;
            font-size: 13px; color: #4b5563; padding: 5px 0; text-align: left;
        }
        .gb-cmt-body { flex: 1; min-width: 0; text-align: left; }
        .gb-cmt-name { color: #6b4f2a; font-weight: 700; font-size: 12px; display: block; margin-bottom: 1px; }
        .gb-cmt-text { word-break: break-word; text-align: left; }
        /* 评论删除按钮：红色垃圾桶图标按钮 */
        .gb-cmt-del {
            border: none; background: none; color: #b91c1c; cursor: pointer; flex-shrink: 0;
            width: 26px; height: 26px; padding: 0; margin-left: 4px; border-radius: 7px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .gb-cmt-del:hover { background: rgba(185, 28, 28, .12); }
        .gb-cmt-del:active { background: rgba(185, 28, 28, .24); }
        .gb-cmt-empty { font-size: 12px; color: #9ca3af; padding: 2px 0; }
        .gb-cmt-input-row { display: flex; gap: 6px; margin-top: 6px; }
        .gb-cmt-input-row .board-input { padding: 6px 10px; font-size: 13px; }
        .gb-cmt-input-row .board-send { padding: 6px 12px; font-size: 13px; }

        /* 一对一 / 自己 聊天：全屏（盖住任务栏），底部输入框 + 加号展开附件 */
        .dm-input-wrap { flex-shrink: 0; background: #fff; border-top: 1px solid #e5e7eb; }
        .dm-input-row { display: flex; gap: 8px; padding: 10px 16px; align-items: center; }
        .dm-plus {
            width: 40px; height: 40px; flex-shrink: 0;
            border: none; border-radius: 50%; background: #eef2ff; color: #4f46e5;
            font-size: 22px; line-height: 1; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .dm-plus:hover { background: #e0e7ff; }
        /* 加号改为 SVG：字体“+”的光学中心偏上，看起来不在圆正中 */
        .dm-plus > svg { display: block; flex: 0 0 auto; }
        /* 发送按钮：与加号同高，放在加号右边 */
        .dm-send-btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        /* 四个附件按钮：space-evenly 让"按钮间距"与"最边缘按钮到屏幕边缘的距离"完全相等 */
        .dm-attach-row {
            display: flex; justify-content: space-evenly; align-items: flex-start;
            padding: 14px 0 18px;
        }
        .dm-attach-row.hidden { display: none !important; }
        .dm-attach {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            border: none; background: transparent; cursor: pointer;
            font-size: 12px; color: #4b5563; padding: 0;
        }
        .dm-attach-icon {
            width: 52px; height: 52px; border-radius: 14px; background: #fff;
            display: flex; align-items: center; justify-content: center; font-size: 24px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
        }
        body.dark #dmChatPage { background: #0f172a !important; }
        body.dark .dm-input-wrap { background: #1e293b; border-color: #334155; }
        body.dark .dm-plus { background: #312e81; color: #c7d2fe; }
        body.dark .dm-attach { color: #cbd5e1; }
        body.dark .dm-attach-icon { background: #0f172a; }

        /* 创建群聊：成员选择 */
        .group-member-picker { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
        .gmp-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; padding: 6px 8px; border-radius: 8px; }
        .gmp-item:hover { background: #f3f4f6; }

        /* 群聊页面 */
        .contacts-page-body { flex: 1; overflow-y: auto; padding: 16px; max-width: 720px; width: 100%; margin: 0 auto; }
        .contacts-page-hint { font-size: 13px; color: #6b7280; }
        .group-meta { padding: 10px 20px; font-size: 12px; color: #6b7280; background: #fff; border-bottom: 1px solid #e5e7eb; }
        .group-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
        .gm-row {
            display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff;
            border: 1px solid #e5e7eb; border-radius: 12px; max-width: 88%; align-self: flex-start;
            flex-wrap: wrap;
        }
        .gm-row.mine { align-self: flex-end; background: #eff6ff; border-color: #bfdbfe; }
        .gm-name { font-size: 12px; font-weight: 700; color: #6b7280; flex-shrink: 0; }
        .gm-text { font-size: 14px; color: #1f2937; word-break: break-word; }
        .gm-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
        /* 消息行内操作按钮：撤回 / 复制 / 引用 / 删除（排在时间右边，从左往右） */
        .gm-acts { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
        .gm-act {
            border: none; background: rgba(0, 0, 0, .04); color: #6b7280; font-size: 11px;
            padding: 2px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap;
        }
        .gm-act:hover { background: rgba(0, 0, 0, .09); color: #374151; }
        /* 消息里的引用块 */
        .gm-quote {
            flex-basis: 100%; display: flex; gap: 6px; align-items: baseline; font-size: 12px;
            color: #6b7280; background: rgba(0, 0, 0, .04); border-left: 3px solid #9ca3af;
            border-radius: 6px; padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .gm-quote-name { color: #4b5563; font-weight: 700; flex-shrink: 0; }
        .gm-quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* 输入框上方的引用框：超过一行末尾显示"…" */
        .quote-box {
            display: flex; align-items: center; gap: 8px; margin: 8px 16px 0; padding: 6px 10px;
            background: #f1f3f5; border-left: 3px solid #9ca3af; border-radius: 8px;
            font-size: 12px; color: #6b7280;
        }
        .quote-box.hidden { display: none !important; }
        .quote-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .quote-close { border: none; background: none; color: #9ca3af; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
        .quote-close:hover { color: #4b5563; }
        /* 引用内容悬停提示（完整内容） */
        .quote-tip {
            position: fixed; max-width: min(420px, 86vw); max-height: 50vh; overflow: hidden;
            background: rgba(17, 24, 39, .96); color: #f9fafb; font-size: 12px; line-height: 1.5;
            padding: 8px 10px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
            white-space: pre-wrap; word-break: break-word; pointer-events: none; z-index: 2600;
        }
        .quote-tip.hidden { display: none !important; }
        /* 消息右键菜单 */
        .msg-ctx {
            position: fixed; min-width: 124px; background: #fff; border: 1px solid #e5e7eb;
            border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); padding: 4px;
            display: flex; flex-direction: column; z-index: 2600;
        }
        .msg-ctx.hidden { display: none !important; }
        .msg-ctx button {
            border: none; background: none; text-align: left; padding: 8px 12px; font-size: 13px;
            color: #374151; border-radius: 6px; cursor: pointer; white-space: nowrap;
        }
        .msg-ctx button:hover { background: #f3f4f6; }
        /* 撤回/删除消息的底部二次确认条：全页宽，上=红色删除、下=黑色取消 */
        .msg-confirm-backdrop {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, .28); z-index: 2600;
        }
        .msg-confirm-backdrop.hidden { display: none !important; }
        .msg-confirm-sheet {
            position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
            display: flex; flex-direction: column; box-sizing: border-box;
            background: #ffffff; border-radius: 16px 16px 0 0;
            box-shadow: 0 -8px 28px rgba(0, 0, 0, .2);
            padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0));
            z-index: 2600;
        }
        .msg-confirm-sheet.hidden { display: none !important; }
        .msg-confirm-sheet button {
            width: 100%; border: none; background: transparent; border-radius: 12px;
            padding: 15px 12px; font-size: 16px; cursor: pointer; text-align: center;
        }
        .mcs-danger { color: #dc2626; font-weight: 700; }
        .mcs-danger:hover { background: #fef2f2; }
        .mcs-cancel { color: #111827; font-weight: 600; }
        .mcs-cancel:hover { background: #f3f4f6; }
        body.dark .msg-confirm-sheet { background: #1e293b; }
        body.dark .mcs-danger { color: #f87171; }
        body.dark .mcs-danger:hover { background: #3b1d1d; }
        body.dark .mcs-cancel { color: #e2e8f0; }
        body.dark .mcs-cancel:hover { background: #334155; }
        /* 聊天里的系统提示（如"你撤回了1条消息"） */
        .gm-sys { width: 100%; text-align: center; font-size: 12px; color: #9ca3af; margin: 6px 0; }
        /* 聊天附件：图片 / 文件 / 链接 */
        .gm-img { max-width: min(220px, 60vw); max-height: 240px; border-radius: 10px; display: block; margin: 2px 0; cursor: zoom-in; }
        .gm-link { color: #2563eb; text-decoration: underline; word-break: break-all; }
        .gm-file {
            display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; margin: 2px 0;
            background: #eef2ff; border-radius: 8px; color: #3730a3; text-decoration: none;
            font-size: 13px; word-break: break-all;
        }
        body.dark .gm-link { color: #93c5fd; }
        body.dark .gm-file { background: #1e293b; color: #c7d2fe; }
        .group-input-wrap { flex-shrink: 0; background: #fff; border-top: 1px solid #e5e7eb; }
        .group-input-wrap .group-input-row { border-top: none; background: transparent; }
        .group-input-row { display: flex; gap: 8px; padding: 10px 16px; background: #fff; border-top: 1px solid #e5e7eb; }

        /* 深色模式：聊天/通讯录/群聊/留言板 */
        body.dark .sec-title { color: #e2e8f0; }
        body.dark .sec-empty { color: #94a3b8; }
        body.dark .sec-plus { background: #312e81; color: #c7d2fe; }
        body.dark .chat-plus-menu { background: #1e293b; border-color: #334155; }
        body.dark .chat-plus-menu button { color: #e2e8f0; }
        body.dark .chat-plus-menu button:hover { background: #334155; }
        body.dark .hidden-contacts-row button { background: #1e293b; color: #cbd5e1; }
        body.dark .contact-row { background: #1e293b; border-color: #334155; }
        body.dark .contact-row:hover { border-color: #3b82f6; }
        body.dark .contact-row.selected { background: #1e3a8a; border-color: #3b82f6; }
        body.dark .cr-name { color: #e2e8f0; }
        body.dark .cr-btn { background: #312e81; color: #c7d2fe; }
        body.dark .multi-bar { background: #1e293b; border-color: #334155; }
        body.dark .mb-btn { background: #334155; color: #e2e8f0; }
        body.dark .board-input { background: #0f172a; border-color: #475569; color: #e2e8f0; }
        body.dark .board-hint { color: #94a3b8; }
        body.dark .group-meta { background: #1e293b; border-color: #334155; color: #94a3b8; }
        body.dark .group-msgs { background: #0f172a; }
        body.dark .gm-row { background: #1e293b; border-color: #334155; }
        body.dark .gm-row.mine { background: #1e3a8a; border-color: #3b82f6; }
        body.dark .gm-text { color: #e2e8f0; }
        body.dark .group-input-row { background: #1e293b; border-color: #334155; }
        body.dark .group-input-wrap { background: #1e293b; border-color: #334155; }
        body.dark .group-input-wrap .group-input-row { border-top: none; background: transparent; }
        body.dark .gm-act { background: rgba(255, 255, 255, .08); color: #cbd5e1; }
        body.dark .gm-act:hover { background: rgba(255, 255, 255, .16); color: #e2e8f0; }
        body.dark .gm-quote { background: rgba(255, 255, 255, .07); color: #cbd5e1; }
        body.dark .gm-quote-name { color: #e2e8f0; }
        body.dark .quote-box { background: #1e293b; color: #cbd5e1; }
        body.dark .msg-ctx { background: #1e293b; border-color: #334155; }
        body.dark .msg-ctx button { color: #e2e8f0; }
        body.dark .msg-ctx button:hover { background: #334155; }
        body.dark .gb-cmt-panel { background: #1f2a3a; border-color: #334155; }
        body.dark .gb-cmt-row { color: #cbd5e1; }
        body.dark .gb-cmt-name { color: #c7d2fe; }
        body.dark .groupChatPage, body.dark #groupChatPage, body.dark #hiddenContactsPage { background: #0f172a !important; }
        body.dark .contacts-page-body { background: #0f172a; }
        body.dark .gmp-item { color: #e2e8f0; }
        body.dark .gmp-item:hover { background: #334155; }

        /* ============ 聊天"拍摄"弹窗（摄像头取景 → 裁剪/旋转 → 确认发送） ============ */
        .cam-modal {
            position: fixed; inset: 0; z-index: 1300;
            background: rgba(0, 0, 0, .72);
            display: flex; align-items: center; justify-content: center;
        }
        .cam-box {
            width: 100%; max-width: 560px; margin: 0 12px;
            background: #fff; border-radius: 18px; overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
            display: flex; flex-direction: column;
        }
        .cam-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
        }
        .cam-title { font-size: 16px; font-weight: 700; color: #1f2937; }
        .cam-close {
            border: none; background: transparent; font-size: 26px; line-height: 1;
            color: #6b7280; cursor: pointer; padding: 0 6px;
        }
        .cam-close:hover { color: #111827; }
        .cam-view-wrap {
            position: relative; background: #000;
            width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
            touch-action: none; user-select: none;
            margin: 0 auto;
        }
        .cam-view-wrap video,
        .cam-view-wrap canvas {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: contain; display: block;
        }
        .cam-crop-rect {
            position: absolute; border: 2px dashed #60a5fa;
            background: rgba(96, 165, 250, .12);
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
            pointer-events: none;
        }
        .cam-crop-rect::before,
        .cam-crop-rect::after {
            content: ""; position: absolute; width: 14px; height: 14px;
            border: 3px solid #60a5fa;
        }
        .cam-crop-rect::before { left: -3px; top: -3px; border-right: none; border-bottom: none; }
        .cam-crop-rect::after { right: -3px; bottom: -3px; border-left: none; border-top: none; }
        .cam-tip {
            padding: 8px 16px; font-size: 13px; color: #6b7280; text-align: center;
            min-height: 32px; background: #f9fafb;
        }
        .cam-tip.err { color: #dc2626; }
        .cam-btns {
            display: flex; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap;
        }
        .cam-btn {
            flex: 1; min-width: 88px; border: none; cursor: pointer;
            padding: 11px 10px; border-radius: 12px; font-size: 14px; font-weight: 600;
            background: #f1f5f9; color: #334155;
            transition: background .15s, transform .1s;
        }
        .cam-btn:hover { background: #e2e8f0; }
        .cam-btn:active { transform: scale(.96); }
        .cam-btn.cam-primary {
            background: linear-gradient(to right, var(--primary-start, #3b82f6), var(--primary-end, #1d4ed8));
            color: #fff;
        }
        .cam-btn.cam-primary:hover { filter: brightness(1.08); }
        body.dark .cam-box { background: #0f172a; }
        body.dark .cam-head { border-bottom-color: #334155; }
        body.dark .cam-title { color: #e2e8f0; }
        body.dark .cam-close { color: #94a3b8; }
        body.dark .cam-tip { color: #94a3b8; background: #111c31; }
        body.dark .cam-tip.err { color: #f87171; }
        body.dark .cam-btn { background: #1e293b; color: #e2e8f0; }
        body.dark .cam-btn:hover { background: #334155; }


/* ===== 共享文件 ===== */
.shared-upload-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(to right, #14b8a6, #0d9488);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shared-upload-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.shared-upload-btn:active { transform: translateY(0); }
/* 四个功能按钮配色区分 */
.shared-upload-btn.c-blue { background: linear-gradient(to right, #3b82f6, #2563eb); }
.shared-upload-btn.c-violet { background: linear-gradient(to right, #8b5cf6, #7c3aed); }
.shared-upload-btn.c-amber { background: linear-gradient(to right, #f59e0b, #d97706); }
.shared-file-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.shared-file-icon { font-size: 1.5rem; flex-shrink: 0; }
.shared-file-info { flex: 1; min-width: 0; }
.shared-file-name { font-weight: 600; color: #1f2937; font-size: 0.9rem; word-break: break-all; }
.shared-file-meta { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }
.shared-file-dl { padding: 6px 14px; border: none; border-radius: 8px; background: #3b82f6; color: #fff; font-size: 0.8rem; cursor: pointer; flex-shrink: 0; }
.shared-file-dl:hover { background: #2563eb; }

/* ============ 深色模式补充覆盖（修复浅色元素） ============ */
/* 补充内联浅色样式覆盖 */
body.dark [style*="background:#ffffff"],
body.dark [style*="background: #ffffff"],
body.dark [style*="background:white"],
body.dark [style*="background: white"],
body.dark [style*="background-color:white"],
body.dark [style*="background-color: white"] { background:#1e293b !important; }
body.dark [style*="background:#e5e7eb"],
body.dark [style*="background: #e5e7eb"],
body.dark [style*="background:#e2e8f0"],
body.dark [style*="background: #e2e8f0"] { background:#263348 !important; }
body.dark [style*="color:#374151"],
body.dark [style*="color: #374151"],
body.dark [style*="color:#6b7280"],
body.dark [style*="color: #6b7280"],
body.dark [style*="color:#4b5563"],
body.dark [style*="color: #4b5563"],
body.dark [style*="color:#111827"],
body.dark [style*="color: #111827"] { color:#e2e8f0 !important; }
body.dark [style*="color:#333"],
body.dark [style*="color:#666"],
body.dark [style*="color:#999"],
body.dark [style*="color:#9ca3af"],
body.dark [style*="color: #9ca3af"] { color:#94a3b8 !important; }
/* 共享文件页浅绿信息框 / 状态色（#166534 深绿文字、#f0fdf4 浅绿底、#bbf7d0 浅绿边框） */
body.dark [style*="color:#166534"],
body.dark [style*="color:#15803d"] { color:#86efac !important; }
body.dark [style*="background:#f0fdf4"],
body.dark [style*="background: #f0fdf4"] { background:#14532d !important; }
body.dark [style*="background:#fef9c3"],
body.dark [style*="background:#fef3c7"] { background:#78350f !important; }
body.dark [style*="background:#fecaca"] { background:#7f1d1d !important; }
body.dark [style*="background:#bbf7d0"] { background:#14532d !important; }
body.dark [style*="background:#bfdbfe"] { background:#1e3a8a !important; }
body.dark [style*="#bbf7d0"],
body.dark [style*="#bfdbfe"] { border-color:#334155 !important; }

/* 浅色背景类 → 深色背景 */
body.dark .game-select,
body.dark #danmakuPage,
body.dark .danmaku-header,
body.dark .danmaku-msg,
body.dark .danmaku-input-bar,
body.dark .report-card,
body.dark .report-reason-chip,
body.dark .user-info-card,
body.dark .friend-list-box,
body.dark #friendReqBtn,
body.dark .frq-modal,
body.dark .da-card,
body.dark .chat-plus-menu,
body.dark .multi-bar,
body.dark .board-input,
body.dark .group-meta,
body.dark .group-input-wrap,
body.dark .group-input-row,
body.dark .msg-ctx,
body.dark .msg-confirm-sheet,
body.dark .cam-box,
body.dark .cam-tip,
body.dark .cam-btn,
body.dark .shared-file-item { background:#1e293b !important; }

/* 浅色边框类 → 深色边框 */
body.dark .game-select,
body.dark .report-reason-chip,
body.dark .report-extra-input,
body.dark #friendReqBtn,
body.dark .frq-modal,
body.dark .da-card,
body.dark .chat-plus-menu,
body.dark .multi-bar,
body.dark .board-input,
body.dark .msg-ctx,
body.dark .shared-file-item,
body.dark .danmaku-input-bar textarea { border-color:#334155 !important; }

/* 浅色文字类 → 深色模式文字色 */
body.dark h1,
body.dark .game-select,
body.dark .danmaku-header h2,
body.dark .lottery-back-btn,
body.dark .lottery-back-btn:hover,
body.dark .pixel-back-btn,
body.dark .pixel-back-btn:hover,
body.dark .danmaku-msg .msg-content,
body.dark .danmaku-msg .msg-action-btn,
body.dark .danmaku-msg .msg-repeats,
body.dark .danmaku-fly .fly-action-btn,
body.dark .danmaku-fly .fly-repeat-count,
body.dark .report-title,
body.dark .report-close:hover,
body.dark .report-reason-chip,
body.dark .report-extra-label,
body.dark .user-info-nickname,
body.dark .user-info-id,
body.dark .friend-req-text,
body.dark .frq-modal,
body.dark .frq-close:hover,
body.dark .da-title,
body.dark .da-ver,
body.dark .sec-title,
body.dark .chat-plus-menu button,
body.dark .cr-name,
body.dark .dm-attach,
body.dark .gmp-item,
body.dark .contacts-page-hint,
body.dark .group-meta,
body.dark .gm-name,
body.dark .gm-act:hover,
body.dark .quote-box,
body.dark .quote-close:hover,
body.dark .msg-ctx button,
body.dark .mcs-cancel,
body.dark .cam-title,
body.dark .cam-close,
body.dark .cam-close:hover,
body.dark .cam-tip,
body.dark .shared-file-name { color:#e2e8f0 !important; }
body.dark .da-btn-disabled { color:#94a3b8 !important; }

/* hover 态背景微调 */
body.dark .frq-close:hover,
body.dark .chat-plus-menu button:hover,
body.dark .msg-ctx button:hover,
body.dark .mcs-cancel:hover,
body.dark .gb-act:hover,
body.dark .gmp-item:hover,
body.dark .hidden-contacts-row button { background:#334155 !important; }

/* ============ 单一滚动条策略 ============
   全屏子页面 / 面板 / 弹窗打开时（html.overlay-lock，由 JS 自动添加），
   锁定根滚动条，避免"内部小滚动条 + 页面右侧大滚动条"同时出现。
   关闭后自动移除，页面大滚动条恢复。 */
html.overlay-lock { overflow-y: hidden !important; }

/* ============ 更新日志：每条左侧带"新功能 / 改进 / 修复"标签 ============ */
.cl-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.cl-item:last-child { margin-bottom: 0; }
.cl-tag { flex: 0 0 auto; display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.cl-tag.t-new { background: #dbeafe; color: #1d4ed8; }
.cl-tag.t-imp { background: #dcfce7; color: #15803d; }
.cl-tag.t-fix { background: #fee2e2; color: #b91c1c; }
.cl-txt { flex: 1; min-width: 0; }
.cl-num { flex: 0 0 auto; color: #6b7280; font-weight: 600; }
body.dark .cl-num { color: #94a3b8; }
body.dark .cl-tag.t-new { background: #1e3a8a; color: #bfdbfe; }
body.dark .cl-tag.t-imp { background: #14532d; color: #bbf7d0; }
body.dark .cl-tag.t-fix { background: #7f1d1d; color: #fecaca; }

        /* 头像设置弹窗：圆角矩形面板与按钮（配色与账号面板的蓝/紫/青明显区别） */
        #avatarPreviewBig { border-radius: 16px; }
        .avatar-btn { width: 100%; padding: 12px 0; border: none; border-radius: 12px; color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color .15s ease; }
        .avatar-btn.reset { background: #475569; }
        .avatar-btn.reset:hover { background: #334155; }
        .avatar-btn.change { background: #f59e0b; }
        .avatar-btn.change:hover { background: #d97706; }
        /* 留言板头部 管理我发的留言 图标按钮 */
        .board-manage-btn { border: none; background: rgba(255,255,255,.7); color: #6b4f2a; font-size: 15px; line-height: 1; padding: 4px 8px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
        .board-manage-btn:hover { background: rgba(255,255,255,.95); }
        /* 管理我发的留言：列表行 */
        .mgb-row { position: relative; padding: 10px 76px 10px 12px; border: 1px solid #e6dcc8; background: #f8f5ef; border-radius: 10px; margin-bottom: 10px; }
        .mgb-text { font-size: 14px; color: #4b5563; word-break: break-word; }
        .mgb-meta { font-size: 12px; color: #9ca3af; margin-top: 4px; }
        .mgb-del { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: #fee2e2; color: #b91c1c; font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
        .mgb-del:hover { background: #fecaca; }
        /* 全屏子页面（聊天 / 群聊）打开时隐藏任务栏（左侧栏 / 底部栏） */
        body.nav-hidden #desktopSidebar,
        body.nav-hidden #mobileNavbar { display: none !important; }

        /* 电脑版左侧任务栏：每个条目带图标 */
        #desktopSidebar .side-nav-item { display: flex; align-items: center; gap: 9px; position: relative; }
        #desktopSidebar .side-nav-item .snav-icon { width: 18px; height: 18px; flex-shrink: 0; }
        /* 任务栏未读角标：红色圆 + 白色阿拉伯数字 */
        .nav-badge {
            position: absolute; box-sizing: border-box; min-width: 17px; height: 17px;
            padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
            font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0;
            display: none; align-items: center; justify-content: center; z-index: 2;
        }
        .nav-badge.show { display: inline-flex; }
        #desktopSidebar .nav-badge { top: 3px; right: 10px; }
        #mobileNavbar .mobile-nav-item { position: relative; }
        #mobileNavbar .nav-badge { top: 3px; left: 50%; margin-left: 4px; }
        .account-msg-btn { position: relative; }
        .account-msg-btn .nav-badge { top: 5px; right: 10px; }
        /* 共享文件历史列表：下载键右边的删除键（红色垃圾桶图标） */
        .shared-file-del {
            border: none; background: rgba(255,255,255,.65); color: #b91c1c; cursor: pointer;
            width: 30px; height: 30px; border-radius: 9px; padding: 0; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .shared-file-del:hover { background: rgba(185,28,28,.12); }
        .shared-file-del .gb-trash-svg { width: 16px; height: 16px; }
        /* ===== 游戏的安卓式底部导航栏（返回 / 主页 / 最近任务） ===== */
        #androidNav {
            display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30000;
            height: 56px; box-sizing: content-box;
            padding: 0 18px env(safe-area-inset-bottom, 0px);
            background: #0f172a; border-top: 1px solid rgba(255, 255, 255, .12);
            align-items: center; justify-content: space-around;
        }
        body.game-fullscreen #androidNav { display: flex; }
        .and-nav-btn {
            border: none; background: none; color: #fff; cursor: pointer; padding: 9px 26px;
            display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
        }
        .and-nav-btn:hover { background: rgba(255, 255, 255, .10); }
        .and-nav-btn:active { background: rgba(255, 255, 255, .22); }
        .and-nav-btn svg { width: 25px; height: 25px; display: block; }

        /* 游戏画面让出底部导航栏的高度，避免快捷栏被挡住 */
        body.game-fullscreen #pixelGameOverlay,
        body.game-fullscreen #mechaGameOverlay,
        body.game-fullscreen #jinhanzhenGameOverlay,
        body.game-fullscreen #battleGameOverlay {
            left: 0 !important;
            width: 100% !important;
            bottom: 0 !important;
            height: 100% !important;
            background: #0b1220 !important;
        }
        @media (max-width: 768px) {
            body.game-fullscreen .game-exit-bar { bottom: 132px !important; right: 12px !important; }
            body.game-fullscreen #pixelSettingsPanel { bottom: 184px !important; }
        }
        body.game-fullscreen #battle-mobile-controls { bottom: 56px !important; height: calc(100% - 56px) !important; }
        body.game-fullscreen .game-exit-bar { bottom: 72px !important; }
        body.game-fullscreen #pixelSettingsPanel { bottom: 124px !important; }

        /* ===== 最近任务：安卓式上下叠放卡片 ===== */
        #androidRecentsSheet {
            position: fixed; left: 0; right: 0; top: 0; bottom: 56px; z-index: 30001;
            background: rgba(9, 13, 20, .95); color: #e5e7eb;
            display: flex; flex-direction: column;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        #androidRecentsSheet.hidden { display: none !important; }
        .and-recents-scroll {
            flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
            padding: 60px 0 24px; -webkit-overflow-scrolling: touch;
        }
        .and-recents-stack { position: relative; width: min(76vw, 520px); margin: 0 auto; }
        .and-recents-card {
            position: relative; width: 100%; height: clamp(240px, 44vh, 420px);
            margin-top: calc(-1 * var(--and-overlap, 78px)); border-radius: 20px; overflow: hidden;
            background: linear-gradient(160deg, #1f2937, #111827 60%, #0b1220);
            border: 1px solid rgba(255,255,255,.14); box-shadow: 0 -10px 30px rgba(0,0,0,.55);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 14px; user-select: none; touch-action: pan-y; cursor: pointer;
            transition: transform .18s ease, opacity .18s ease;
        }
        .and-recents-card:first-child { margin-top: 0; }
        .and-recents-emoji { font-size: clamp(48px, 9vh, 84px); line-height: 1; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
        .and-recents-name { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
        .and-recents-state { font-size: 12px; color: #9ca3af; }
        .and-recents-state.live { color: #34d399; }
        .and-recents-empty { text-align: center; color: #6b7280; font-size: 14px; padding: 80px 20px; }
        .and-recents-actions {
            flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
            padding: 10px 0 18px;
        }
        .and-recents-clear {
            width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
            background: rgba(255,255,255,.08); color: #f3f4f6; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .and-recents-clear:hover { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.55); color: #fecaca; }
        .and-recents-clear svg { width: 24px; height: 24px; display: block; }

/* ===== 对战游戏亮色主题 ===== */
#battleGameOverlay { background: #eaf3fb; }
#battleGameOverlay .settings-panel {
    background: #ffffff !important; color: #1f3550 !important;
    border-color: #cfe0f2 !important; box-shadow: 0 10px 28px rgba(30,80,130,.18) !important;
}
#battleGameOverlay .settings-panel * { color: #1f3550 !important; }
#battleGameOverlay .settings-panel select { background: #f7fbff !important; border-color: #cfe0f2 !important; color: #1f3550 !important; }
#battleGameOverlay .system-info-bar {
    background: rgba(255,255,255,.92) !important; color: #1f3550 !important;
    border-color: #cfe0f2 !important; text-shadow: none !important;
}
#battleGameOverlay .game-over-modal {
    background: #ffffff !important; color: #1f3550 !important; border-color: #cfe0f2 !important;
}
#battleGameOverlay .game-over-stats { background: #f4f9ff !important; border-color: #dbe8f5 !important; }
#battleGameOverlay .game-over-stats-label { color: #5c7a95 !important; }
#battleGameOverlay .game-over-stats-value { color: #1f3550 !important; }
#battleGameOverlay .game-over-close-btn { color: #5c7a95 !important; }

/* 聊天页全屏：隐藏任务栏后必须铺满整屏（之前仍让出 168px 侧栏宽度，导致不是全屏） */
body.nav-hidden #dmChatPage,
body.nav-hidden #groupChatPage,
body.nav-hidden #hiddenContactsPage,
body.nav-hidden #friendPage,
body.nav-hidden #announcementDetailPage,
body.nav-hidden #myDanmakuListPage,
body.nav-hidden #reviewPanel {
    left: 0 !important;
    width: 100% !important;
    bottom: 0 !important;
    height: 100% !important;
}

/* 消息撤回倒计时 */
.gm-recall-left { font-size: 11px; color: #d97706; margin-left: 6px; white-space: nowrap; }
body.dark .gm-recall-left { color: #fbbf24; }

/* ============================================================
   手机/平板横屏（html.touch-land，由 JS 按触屏设备自动添加）：
   宽度超过 768 时媒体查询会套用电脑版布局，这里整体纠正回手机版。
   规则与 html.force-mobile 一致，另补工具页/聊天页的让位偏移。
   ============================================================ */
html.touch-land #desktopSidebar { display: none !important; }
html.touch-land #mobileNavbar { display: flex !important; }
html.touch-land body {
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}
html.touch-land #homeContainer {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 0 84px 0 !important;
    align-items: center !important;
    box-sizing: border-box;
}
html.touch-land .left-box,
html.touch-land .games-box {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html.touch-land #mainContent { padding-left: 8px !important; padding-right: 8px !important; }
html.touch-land #controlBar { display: none !important; }
html.touch-land #authBar { top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; gap: 6px !important; }
html.touch-land #topLoginBtn, html.touch-land #topRegisterBtn { padding: 6px 13px !important; font-size: 12px !important; }
html.touch-land #avatarCircle { width: 38px !important; height: 38px !important; }
html.touch-land #accountPanel, html.touch-land #settingsPanel, html.touch-land #messageCenterPanel {
    left: 0 !important; bottom: 60px !important; max-height: calc(100vh - 60px) !important;
}
html.touch-land #accountPanel .panel-back-bar { display: none !important; }
html.touch-land #mobileNavbar {
    z-index: 1800 !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 480px !important; max-width: 100vw !important;
    border-radius: 12px 12px 0 0 !important;
}
html.touch-land #quizSection { max-height: none !important; overflow: visible !important; }
/* 工具页/聊天页：横屏下让出底部任务栏，且不左移给侧栏（侧栏已隐藏） */
html.touch-land #danmakuPage, html.touch-land #lotteryPage, html.touch-land #stopwatchPage,
html.touch-land #webCodeEditorPage, html.touch-land #myDanmakuListPage, html.touch-land #reviewPanel,
html.touch-land #dmChatPage, html.touch-land #groupChatPage, html.touch-land #hiddenContactsPage,
html.touch-land #announcementDetailPage, html.touch-land #battleGameOverlay {
    left: 0 !important;
    width: 100% !important;
    bottom: 60px !important;
    height: calc(100% - 60px) !important;
}
/* 3D 像素小游戏 / 机甲对战 / 金寒镇：全屏铺满并盖住底部任务栏（与手机竖屏一致） */
html.touch-land #pixelGameOverlay, html.touch-land #mechaGameOverlay, html.touch-land #jinhanzhenGameOverlay {
    left: 0 !important;
    width: 100% !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 1900 !important;
}
html.touch-land .settings-mobile-only { display: flex !important; }

        /* ===== 游戏沉浸模式：新版本提示改成底部工具栏右侧的一小块，不显示版本号 ===== */
        body.game-fullscreen #versionNotice .notice-icon,
        body.game-fullscreen #versionNotice .notice-desc,
        body.game-fullscreen #versionNotice .notice-btn,
        body.game-fullscreen #versionNotice .notice-close { display: none !important; }
        body.game-fullscreen #versionNotice .notice-title { font-size: 12px !important; font-weight: 800 !important; margin: 0 !important; }
        body.game-fullscreen #versionNotice[data-vstate="new"] .notice-title { color: #fbbf24 !important; }
        body.game-fullscreen #versionNotice[data-vstate="latest"] .notice-title { color: #34d399 !important; }
        body.game-fullscreen #versionNotice[data-vstate="fail"] .notice-title { color: #cbd5e1 !important; }
        /* ===== 游戏沉浸：版本状态并入底部工具栏右侧（只有文字，没有框） ===== */
        body.game-fullscreen #versionNotice .notice-icon,
        body.game-fullscreen #versionNotice .notice-desc,
        body.game-fullscreen #versionNotice .notice-btn,
        body.game-fullscreen #versionNotice .notice-close { display: none !important; }
        body.game-fullscreen #versionNotice .notice-title { font-size: 11px !important; font-weight: 800 !important; margin: 0 !important; }
        body.game-fullscreen #versionNotice[data-vstate="new"] .notice-title { color: #fbbf24 !important; }
        body.game-fullscreen #versionNotice[data-vstate="latest"] .notice-title { color: #34d399 !important; }
        body.game-fullscreen #versionNotice[data-vstate="fail"] .notice-title { color: #cbd5e1 !important; }
        /* 游戏全屏时盖住站点底部导航，避免工具栏下面透出"工具箱"栏 */
        body.game-fullscreen #mobileNavbar, body.game-fullscreen #desktopSidebar { display: none !important; }
        body.game-fullscreen #jinhanzhenGameOverlay, body.game-fullscreen #pixelGameOverlay,
        body.game-fullscreen #mechaGameOverlay, body.game-fullscreen .game-overlay {
            bottom: 0 !important; height: 100vh !important;
        }
        /* ===== 小游戏入口：圆角正方形图标 + 下方名称 ===== */
        .game-btn {
            background: transparent !important; border: none !important; box-shadow: none !important;
            padding: 4px 2px !important; height: auto !important; min-width: 0 !important;
            display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start;
            gap: 7px; color: #1f2937 !important; font-weight: 700; cursor: pointer;
        }
        .game-btn .gb-icon {
            width: 58px; height: 58px; border-radius: 16px; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; color: #fff;
            box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s;
        }
        .game-btn:active .gb-icon { transform: scale(.94); }
        .game-btn .gb-icon svg { width: 30px; height: 30px; display: block; }
        .game-btn .gb-name { font-size: 12.5px; line-height: 1.2; text-align: center; }
        .game-btn.pixel .gb-icon { background: linear-gradient(135deg, #34d399, #059669); }
        .game-btn.jinhanzhen .gb-icon { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); }
        .game-btn.battle .gb-icon { background: linear-gradient(135deg, #fb923c, #ef4444); }
        .game-btn.mecha .gb-icon { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
        body.dark .game-btn .gb-name { color: #e2e8f0; }
        /* 游戏全屏：底部安卓栏下方不留任何缝隙，站点导航彻底不露出来 */
        body.game-fullscreen #androidNav { backdrop-filter: none !important; }
        body.game-fullscreen #mobileNavbar,
        body.game-fullscreen #bottomNav,
        body.game-fullscreen #desktopSidebar { display: none !important; }
        body.game-fullscreen { background: #0b1220 !important; }
        body.game-fullscreen, body.game-fullscreen #app, body.game-fullscreen main { overflow: hidden !important; height: 100% !important; }
        html:has(body.game-fullscreen) { overflow: hidden !important; }

        /* 四个小游戏入口排成一排 */
        #homeSection .games-btn-container, .games-box .games-btn-container { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }

        /* 游戏内：版本提示并入仿安卓工具栏右侧，三个按钮缩小让位 */
        body.game-fullscreen #androidNav { padding-left: 6px; padding-right: 6px; }
                        body.game-fullscreen #versionNotice .vn-actions,
        body.game-fullscreen #versionNotice button,
        body.game-fullscreen #versionNotice .vn-icon,
        body.game-fullscreen #versionNotice .vn-desc { display: none !important; }
        body.game-fullscreen #versionNotice .vn-title { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; }
        /* 游戏内版本提示：修正为真实类名，发现新版本=可点文字按钮，已是最新=纯文本 */
        body.game-fullscreen #versionNotice .notice-icon,
        body.game-fullscreen #versionNotice .notice-desc,
        body.game-fullscreen #versionNotice .notice-btn,
        body.game-fullscreen #versionNotice .notice-close { display: none !important; }
        body.game-fullscreen #versionNotice .notice-body { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
        body.game-fullscreen #versionNotice .notice-title { font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; }
        body.game-fullscreen #versionNotice.vn-new .notice-title { color: #facc15 !important; text-decoration: underline !important; cursor: pointer !important; }
        body.game-fullscreen #versionNotice.vn-latest .notice-title { color: #22c55e !important; text-decoration: none !important; cursor: default !important; }
        /* 游戏内版本提示：垂直居中于仿安卓工具栏，字号仅电脑端加大 */
        body.game-fullscreen #versionNotice .notice-title { font-size: 12px !important; line-height: 1 !important; }
        @media (min-width: 900px) {
            body.game-fullscreen #versionNotice .notice-title { font-size: 15px !important; }
        }
        /* 游戏内版本提示（仅文字样式，不影响工具栏布局） */
        body.game-fullscreen #versionNotice { background: none !important; border: none !important; box-shadow: none !important; }
        body.game-fullscreen #versionNotice .notice-title { font-size: 12px !important; }
        @media (min-width: 900px) { body.game-fullscreen #versionNotice .notice-title { font-size: 15px !important; } }
        body.game-fullscreen #versionNotice.vn-new .notice-title { color: #facc15 !important; text-decoration: underline; cursor: pointer; }
        body.game-fullscreen #versionNotice.vn-latest .notice-title { color: #22c55e !important; }
        /* 游戏内版本提示：回到工具栏上方原来的位置；有新版本时多一行“新版本上线——有通知” */
        body.game-fullscreen #versionNotice {
            position: fixed !important; left: auto !important; right: 10px !important;
            bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important;
            transform: none !important; width: auto !important; max-width: 70vw !important;
            background: none !important; border: none !important; box-shadow: none !important;
            display: flex !important; flex-direction: column !important; align-items: flex-end !important;
            gap: 2px !important; padding: 0 !important; margin: 0 !important;
            z-index: 20000050 !important; pointer-events: auto !important;
        }
        body.game-fullscreen #versionNotice .notice-icon,
        body.game-fullscreen #versionNotice .notice-desc,
        body.game-fullscreen #versionNotice .notice-btn,
        body.game-fullscreen #versionNotice .notice-close { display: none !important; }
        body.game-fullscreen #versionNotice .notice-body { display: flex; flex-direction: column; align-items: flex-end; background: none !important; border: none !important; padding: 0 !important; }
        body.game-fullscreen #versionNotice .notice-title { font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
        body.game-fullscreen #versionNotice.vn-new .notice-title { color: #facc15 !important; text-decoration: underline; cursor: pointer; }
        body.game-fullscreen #versionNotice.vn-latest .notice-title { color: #22c55e !important; text-decoration: none; }
        body.game-fullscreen #versionNotice .notice-extra { display: none; font-size: 12px !important; font-weight: 800 !important; color: #facc15 !important; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
        body.game-fullscreen #versionNotice.vn-new .notice-extra { display: block; }
        @media (min-width: 900px) {
            body.game-fullscreen #versionNotice .notice-title,
            body.game-fullscreen #versionNotice .notice-extra { font-size: 15px !important; }
        }