/* ═══════════════════════════════════════════════════════════
   存档空间电玩社 - 主题扩展包
   默认主题：霓虹之夜（:root，见 style_v3.css）
   新增主题：暖阳街机（[data-theme="sunny"]，亮色复古街机风）
   ═══════════════════════════════════════════════════════════ */

/* ── 暖阳街机 display 字体 ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

/* ── 暖阳街机：变量全量覆盖 ───────────────────────────── */
:root[data-theme="sunny"] {
    /* 强调色：街机橙 / 番茄红 / 金黄 / 青绿 */
    --neon-cyan: #FF6B35;
    --neon-pink: #E63946;
    --neon-purple: #FFC233;
    --neon-blue: #2EC4B6;
    --neon-green: #2EC4B6;

    /* RGB 三通道（供 style_v3.css 中的 rgba() 组合） */
    --neon-cyan-rgb: 255, 107, 53;
    --neon-pink-rgb: 230, 57, 70;
    --neon-purple-rgb: 255, 194, 51;
    --neon-green-rgb: 46, 196, 182;
    --bg-deepest-rgb: 255, 246, 233;
    --bg-surface-rgb: 255, 255, 255;

    /* 状态/功能色 */
    --danger: #E63946;
    --danger-rgb: 230, 57, 70;
    --danger-soft: #E63946;
    --success-soft: #2A9D8F;
    --warn-soft: #B07C00;
    --log-green: #2B2121;
    --bg-deep-alt: #FFF1DC;

    /* 背景：暖米色纸感 */
    --bg-deepest: #FFF6E9;
    --bg-dark: #FFEFD6;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FFF1DC;
    --bg-surface: #FFFFFF;
    --bg-surface-light: #FFF6E9;

    /* 文字：深棕 */
    --text-primary: #2B2121;
    --text-secondary: #7A6A5F;
    --text-muted: #A89888;

    /* 霓虹光晕 → 复古 offset 投影 */
    --glow-cyan: 4px 4px 0 rgba(43, 33, 33, 0.85);
    --glow-pink: 4px 4px 0 rgba(230, 57, 70, 0.45);
    --glow-cyan-strong: 6px 6px 0 rgba(43, 33, 33, 0.9);
    --glow-pink-strong: 6px 6px 0 rgba(230, 57, 70, 0.5);

    /* 字体：display 换成站酷快乐体 */
    --font-display: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   暖阳街机：组件级补充规则
   （纯变量覆盖不够的地方，在此做质感升级）
   ═══════════════════════════════════════════════════════════ */

/* ── 背景：霓虹粒子/网格 → 复古点阵 + 斜纹 ────────────── */
[data-theme="sunny"] body::before {
    background:
        radial-gradient(circle, rgba(43, 33, 33, 0.055) 1.5px, transparent 1.6px);
    background-size: 26px 26px;
}

[data-theme="sunny"] body::after {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 107, 53, 0.035) 0px,
            rgba(255, 107, 53, 0.035) 14px,
            transparent 14px,
            transparent 28px
        );
    background-size: auto;
}

/* ── 选中态 ───────────────────────────────────────────── */
[data-theme="sunny"] ::selection {
    background: #FFC233;
    color: #2B2121;
}

/* ── 滚动条：奶油轨道 + 橙色描边滑块 ──────────────────── */
[data-theme="sunny"] ::-webkit-scrollbar {
    width: 10px;
}
[data-theme="sunny"] ::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
[data-theme="sunny"] ::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border: 2px solid #2B2121;
    border-radius: 6px;
}
[data-theme="sunny"] ::-webkit-scrollbar-thumb:hover {
    background: var(--neon-pink);
}

/* ── 导航栏：奶白纸面 + 深色描边 ─────────────────────── */
[data-theme="sunny"] .navbar {
    background: rgba(255, 246, 233, 0.92);
    border-bottom: 3px solid #2B2121;
}

[data-theme="sunny"] .navbar::after {
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-pink), transparent);
    opacity: 0.9;
    height: 2px;
}

[data-theme="sunny"] .nav-brand {
    background: none;
    -webkit-text-fill-color: var(--neon-cyan);
    color: var(--neon-cyan);
    text-shadow: 2px 2px 0 #2B2121;
}

/* ── 平台筛选按钮：街机按键 ──────────────────────────── */
[data-theme="sunny"] .filter-btn {
    background: #FFFFFF;
    color: var(--text-secondary);
    border: 2px solid #2B2121;
    border-radius: 999px;
    box-shadow: 3px 3px 0 #2B2121;
    font-weight: 700;
}

[data-theme="sunny"] .filter-btn::before {
    display: none;
}

[data-theme="sunny"] .filter-btn:hover {
    color: #2B2121;
    border-color: #2B2121;
    background: var(--bg-card-hover);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #2B2121;
}

[data-theme="sunny"] .filter-btn.active {
    color: #FFFFFF;
    background: var(--neon-cyan);
    border-color: #2B2121;
    box-shadow: 2px 2px 0 #2B2121;
    transform: translate(1px, 1px);
}

/* ── 公告栏 ───────────────────────────────────────────── */
[data-theme="sunny"] .notice-bar {
    border: 3px solid #2B2121;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .notice-label {
    background: var(--neon-purple);
    color: #2B2121;
    border: 2px solid #2B2121;
}

/* ── 区域标题装饰线 ──────────────────────────────────── */
[data-theme="sunny"] .section-line {
    height: 2px;
    background: repeating-linear-gradient(90deg, #2B2121 0 10px, transparent 10px 18px);
    opacity: 0.35;
}

/* ── 游戏卡片：白卡 + 3px 深描边 + offset 投影 ───────── */
[data-theme="sunny"] .game-card {
    background: var(--bg-card);
    border: 3px solid #2B2121;
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .game-card::before {
    display: none;
}

[data-theme="sunny"] .game-card:hover {
    transform: translate(2px, 2px);
    border-color: #2B2121;
    box-shadow: 4px 4px 0 #2B2121;
}

/* 封面上保持深色渐变罩，保证白色标题可读 */
[data-theme="sunny"] .card-overlay {
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 40%,
        rgba(43, 33, 33, 0.55) 74%,
        rgba(43, 33, 33, 0.92) 100%
    );
}

/* 店长推荐：保留街机彩虹流动边框，但取消外层模糊光晕 */
[data-theme="sunny"] .game-card.featured-card {
    border: none;
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .game-card.featured-card::after {
    filter: none;
    opacity: 0.35;
}

[data-theme="sunny"] #featuredGrid .game-card {
    border: 3px solid var(--neon-pink);
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] #featuredGrid .game-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 4px 4px 0 #2B2121;
}

/* ── 标签徽章：描边硬片风 ────────────────────────────── */
[data-theme="sunny"] .tag {
    border-width: 2px !important;
    font-weight: 700;
}

[data-theme="sunny"] .tag-platform {
    background: rgba(var(--neon-cyan-rgb), 0.14);
    color: #D84E1B;
    border-color: rgba(var(--neon-cyan-rgb), 0.55);
}

[data-theme="sunny"] .tag-media {
    background: rgba(var(--neon-pink-rgb), 0.12);
    color: var(--neon-pink);
    border-color: rgba(var(--neon-pink-rgb), 0.5);
}

[data-theme="sunny"] .tag-status {
    background: rgba(var(--neon-green-rgb), 0.14);
    color: #1E8A7E;
    border-color: rgba(var(--neon-green-rgb), 0.5);
}

/* ── 模态框 / 昵称弹窗 / 管理表单盒 ─────────────────── */
[data-theme="sunny"] .modal-backdrop,
[data-theme="sunny"] .nickname-modal,
[data-theme="sunny"] .admin-form-modal {
    background: rgba(43, 33, 33, 0.45);
}

[data-theme="sunny"] .modal-content,
[data-theme="sunny"] .nickname-box,
[data-theme="sunny"] .admin-form-box {
    background: var(--bg-surface);
    border: 3px solid #2B2121;
    box-shadow: 8px 8px 0 #2B2121;
}

[data-theme="sunny"] .modal-cover {
    background-color: var(--bg-deep-alt);
}

[data-theme="sunny"] .modal-title {
    background: none;
    -webkit-text-fill-color: var(--neon-cyan);
    color: var(--neon-cyan);
    text-shadow: 2px 2px 0 rgba(43, 33, 33, 0.18);
}

[data-theme="sunny"] .modal-close {
    background: #FFFFFF;
    border: 2px solid #2B2121;
    color: #2B2121;
    box-shadow: 3px 3px 0 #2B2121;
    backdrop-filter: none;
}

[data-theme="sunny"] .modal-close:hover {
    background: var(--neon-pink);
    border-color: #2B2121;
    color: #FFFFFF;
    box-shadow: 2px 2px 0 #2B2121;
}

/* ── 表单控件：白纸面 + 深色描边 ─────────────────────── */
[data-theme="sunny"] .form-input,
[data-theme="sunny"] .form-select,
[data-theme="sunny"] .form-textarea,
[data-theme="sunny"] .nickname-input,
[data-theme="sunny"] .chat-input {
    background: #FFFFFF;
    border: 2px solid #2B2121;
    color: var(--text-primary);
    box-shadow: 3px 3px 0 rgba(43, 33, 33, 0.25);
}

[data-theme="sunny"] .form-input:focus,
[data-theme="sunny"] .form-select:focus,
[data-theme="sunny"] .form-textarea:focus,
[data-theme="sunny"] .nickname-input:focus,
[data-theme="sunny"] .chat-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 3px 3px 0 var(--neon-cyan);
    background: #FFFFFF;
}

[data-theme="sunny"] .form-input::placeholder,
[data-theme="sunny"] .nickname-input::placeholder,
[data-theme="sunny"] .chat-input::placeholder {
    color: var(--text-muted);
}

[data-theme="sunny"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232B2121' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

[data-theme="sunny"] .form-select option {
    background: #FFFFFF;
    color: var(--text-primary);
}

/* ── 主按钮：实色橙 + 描边 + offset 投影 ─────────────── */
[data-theme="sunny"] .form-btn-submit,
[data-theme="sunny"] .nickname-btn,
[data-theme="sunny"] .btn-add-game,
[data-theme="sunny"] .chat-send-btn {
    background: var(--neon-cyan);
    border: 2px solid #2B2121;
    color: #FFFFFF;
    box-shadow: 4px 4px 0 #2B2121;
    text-shadow: 1px 1px 0 rgba(43, 33, 33, 0.35);
}

[data-theme="sunny"] .form-btn-submit:hover,
[data-theme="sunny"] .nickname-btn:hover,
[data-theme="sunny"] .btn-add-game:hover,
[data-theme="sunny"] .chat-send-btn:hover {
    background: var(--neon-pink);
    box-shadow: 2px 2px 0 #2B2121;
    transform: translate(2px, 2px);
}

[data-theme="sunny"] .form-btn-cancel {
    background: #FFFFFF;
    border: 2px solid #2B2121;
    color: var(--text-secondary);
    box-shadow: 3px 3px 0 rgba(43, 33, 33, 0.4);
}

[data-theme="sunny"] .form-btn-cancel:hover {
    border-color: #2B2121;
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

/* ── 管理端小按钮 ────────────────────────────────────── */
[data-theme="sunny"] .btn-edit {
    background: rgba(var(--neon-cyan-rgb), 0.12);
    color: #D84E1B;
    border-color: rgba(var(--neon-cyan-rgb), 0.6);
    border-width: 2px;
}

[data-theme="sunny"] .btn-edit:hover {
    background: rgba(var(--neon-cyan-rgb), 0.22);
    box-shadow: 2px 2px 0 rgba(43, 33, 33, 0.5);
}

[data-theme="sunny"] .btn-delete {
    background: rgba(var(--danger-rgb), 0.1);
    border-width: 2px;
}

[data-theme="sunny"] .btn-delete:hover {
    background: rgba(var(--danger-rgb), 0.18);
    box-shadow: 2px 2px 0 rgba(43, 33, 33, 0.5);
}

[data-theme="sunny"] .btn-fetch-cover {
    background: rgba(var(--neon-cyan-rgb), 0.12);
    border: 2px solid rgba(var(--neon-cyan-rgb), 0.6);
    color: #D84E1B;
}

[data-theme="sunny"] .btn-fetch-cover:hover {
    background: rgba(var(--neon-cyan-rgb), 0.22);
    box-shadow: 2px 2px 0 rgba(43, 33, 33, 0.5);
}

/* ── 聊天浮动按钮：基础样式已全面走变量，暖阳下自动与主题切换按钮一致 ── */

/* ── 聊天抽屉：与暖阳纸面融合 ────────────────────────── */
[data-theme="sunny"] .chat-drawer {
    background: var(--bg-deepest);
    border-left: 3px solid #2B2121;
    box-shadow: -6px 0 0 rgba(43, 33, 33, 0.15);
}

[data-theme="sunny"] .chat-input-area {
    background: #FFFFFF;
    border-top: 3px solid #2B2121;
}

[data-theme="sunny"] .chat-input {
    color: var(--text-primary);
}

/* ── 筛选面板 / 留言板卡片 ───────────────────────────── */
[data-theme="sunny"] .filter-panel {
    background: #FFFFFF;
    border: 3px solid #2B2121;
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .filter-panel-header {
    border-bottom: 2px dashed rgba(43, 33, 33, 0.25);
}

[data-theme="sunny"] .filter-clear-btn {
    border: 2px solid var(--danger);
    color: var(--danger);
    background: #FFFFFF;
    box-shadow: 2px 2px 0 rgba(43, 33, 33, 0.4);
}

[data-theme="sunny"] .filter-clear-btn:hover {
    background: rgba(var(--danger-rgb), 0.1);
    box-shadow: 1px 1px 0 rgba(43, 33, 33, 0.4);
}

[data-theme="sunny"] .filter-tag-btn {
    background: #FFFFFF;
    border: 2px solid rgba(43, 33, 33, 0.3);
    color: var(--text-secondary);
}

[data-theme="sunny"] .filter-tag-btn:hover {
    border-color: #2B2121;
    color: var(--text-primary);
}

[data-theme="sunny"] .filter-tag-btn.active {
    background: var(--neon-pink);
    border-color: #2B2121;
    color: #FFFFFF;
    box-shadow: 2px 2px 0 #2B2121;
}

[data-theme="sunny"] .guestbook-form,
[data-theme="sunny"] .guestbook-stream,
[data-theme="sunny"] .guestbook-card {
    background: #FFFFFF;
    border: 3px solid #2B2121;
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .guestbook-card {
    border-width: 2px;
    box-shadow: 4px 4px 0 rgba(43, 33, 33, 0.35);
}

[data-theme="sunny"] .guestbook-reply {
    border: 2px dashed rgba(var(--neon-cyan-rgb), 0.6);
    background: rgba(var(--neon-purple-rgb), 0.12);
}

[data-theme="sunny"] .guestbook-empty {
    border: 2px dashed rgba(43, 33, 33, 0.3);
}

/* ── 管理端表格与面板 ────────────────────────────────── */
[data-theme="sunny"] .admin-table-wrapper,
[data-theme="sunny"] .table-container {
    border: 3px solid #2B2121;
    background: #FFFFFF;
    box-shadow: 6px 6px 0 #2B2121;
}

[data-theme="sunny"] .admin-table th,
[data-theme="sunny"] th {
    background: var(--bg-dark);
    color: #D84E1B;
    border-bottom: 2px solid #2B2121;
}

[data-theme="sunny"] .admin-table td,
[data-theme="sunny"] td {
    border-bottom: 1px solid rgba(43, 33, 33, 0.12);
}

[data-theme="sunny"] .admin-table tr:hover td,
[data-theme="sunny"] tr:hover {
    background: rgba(var(--neon-purple-rgb), 0.15);
}

[data-theme="sunny"] .admin-table .cover-thumb,
[data-theme="sunny"] .td-cover img {
    border: 2px solid #2B2121;
}

/* ── 管理端 hero / 设备卡 / 留言管理卡（内联样式块的补充） */
[data-theme="sunny"] .notice-editor,
[data-theme="sunny"] .pc-console-hero,
[data-theme="sunny"] .guestbook-admin-hero,
[data-theme="sunny"] .pc-banner {
    border: 3px solid #2B2121 !important;
    background: #FFFFFF !important;
    box-shadow: 6px 6px 0 #2B2121 !important;
}

[data-theme="sunny"] .pc-console-board,
[data-theme="sunny"] .pc-console-logs,
[data-theme="sunny"] .pc-tool-panel,
[data-theme="sunny"] .guestbook-admin-panel,
[data-theme="sunny"] .log-header,
[data-theme="sunny"] .log-panel,
[data-theme="sunny"] .pc-log-page-panel {
    background: #FFFFFF !important;
    border: 3px solid #2B2121 !important;
    box-shadow: 6px 6px 0 #2B2121 !important;
}

[data-theme="sunny"] .pc-device-card,
[data-theme="sunny"] .guestbook-admin-card,
[data-theme="sunny"] .pc-history-item,
[data-theme="sunny"] .pc-metric,
[data-theme="sunny"] .pc-detail-grid > div,
[data-theme="sunny"] .pc-preview-box > div,
[data-theme="sunny"] .pc-volume-readout,
[data-theme="sunny"] .pc-receipt-card,
[data-theme="sunny"] .pc-cast-box,
[data-theme="sunny"] .tag-card,
[data-theme="sunny"] .pc-mode-switch label,
[data-theme="sunny"] .pc-check-row {
    background: var(--bg-deepest) !important;
    border: 2px solid #2B2121 !important;
    box-shadow: 3px 3px 0 rgba(43, 33, 33, 0.3);
}

[data-theme="sunny"] .pc-device-card:hover {
    border-color: var(--neon-cyan) !important;
    transform: translate(1px, 1px);
}

[data-theme="sunny"] .pc-device-card.active,
[data-theme="sunny"] .guestbook-admin-card.active {
    border-color: var(--neon-pink) !important;
    box-shadow: 3px 3px 0 var(--neon-pink) !important;
}

[data-theme="sunny"] .pc-console-orb {
    background: var(--bg-deepest);
    border: 3px solid #2B2121;
    box-shadow: 4px 4px 0 #2B2121;
}

[data-theme="sunny"] .pc-console-orb-accent {
    border-color: var(--neon-pink);
}

[data-theme="sunny"] .pc-history-panel {
    background: var(--bg-dark);
    border: 2px solid #2B2121;
}

[data-theme="sunny"] .admin-tabs {
    border-bottom: 3px solid #2B2121;
}

[data-theme="sunny"] .admin-tab.active {
    color: var(--neon-cyan);
    border-bottom: 3px solid var(--neon-cyan);
}

[data-theme="sunny"] .btn-outline {
    color: var(--text-primary);
    border: 2px solid #2B2121;
    background: #FFFFFF;
    box-shadow: 3px 3px 0 rgba(43, 33, 33, 0.35);
}

[data-theme="sunny"] .btn-outline:hover {
    background: rgba(var(--danger-rgb), 0.1);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 2px 2px 0 rgba(43, 33, 33, 0.35);
}

[data-theme="sunny"] .admin-user-chip,
[data-theme="sunny"] .pc-board-status {
    border: 2px solid #2B2121;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* ── 状态徽章（内联样式块中的亮色文字在浅底上的可读性） */
[data-theme="sunny"] .pc-status-pill.online,
[data-theme="sunny"] .guestbook-pill.visible {
    color: #1E8A7E;
    border-color: rgba(46, 196, 182, 0.6);
    background: rgba(46, 196, 182, 0.12);
}

[data-theme="sunny"] .pc-status-pill.offline,
[data-theme="sunny"] .guestbook-pill.hidden {
    color: var(--danger);
    border-color: rgba(230, 57, 70, 0.55);
    background: rgba(230, 57, 70, 0.1);
}

[data-theme="sunny"] .pc-banner.pending { color: #B07C00; border-color: rgba(255, 194, 51, 0.8) !important; }
[data-theme="sunny"] .pc-banner.success { color: #1E8A7E; border-color: rgba(46, 196, 182, 0.7) !important; }
[data-theme="sunny"] .pc-banner.error { color: var(--danger); border-color: rgba(230, 57, 70, 0.7) !important; }

[data-theme="sunny"] .account-status.error { color: var(--danger); }
[data-theme="sunny"] .account-status.success { color: #1E8A7E; }

/* ── 日志输出：暖阳下变浅色终端 ─────────────────────── */
[data-theme="sunny"] #logOutput,
[data-theme="sunny"] .pc-log-output {
    background: var(--bg-dark) !important;
    border: 2px solid #2B2121 !important;
    color: #5A4A3F !important;
}

/* ── 页脚 ───────────────────────────────────────────── */
[data-theme="sunny"] .footer-info {
    border-top: 2px dashed rgba(43, 33, 33, 0.25);
}

[data-theme="sunny"] .footer-info span {
    text-shadow: 1px 1px 0 rgba(43, 33, 33, 0.2);
}

/* ── 加载动画 ────────────────────────────────────────── */
[data-theme="sunny"] .loading-spinner {
    border: 3px solid var(--bg-dark);
    border-top-color: var(--neon-cyan);
    border-right-color: var(--neon-pink);
}

/* ── 骨架屏 ─────────────────────────────────────────── */
[data-theme="sunny"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-dark) 25%,
        #FFFFFF 37%,
        var(--bg-dark) 63%
    );
    background-size: 200% 100%;
}

/* ── 登录页（login.html 内联样式的补充） ─────────────── */
[data-theme="sunny"] .login-box {
    border: 3px solid #2B2121;
    background: #FFFFFF;
    box-shadow: 8px 8px 0 #2B2121;
}

[data-theme="sunny"] .login-divider {
    height: 3px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
}