/* ==========================================================================
           Classic Web 1.0 styles (FrontPage 98 / early-2000s web style)
           Background: warm yellow tones (#FFFDF0 / #FAF0D7)
           Fonts: serif / Arial, typical 12–14px text of the era
           ========================================================================== */

        * { box-sizing: border-box; }

        html, body {
            max-width: 100%;
            overflow-x: hidden; /* 防止任何子元素溢出导致整页横向滚动 */
        }

        body {
            background-color: #FFFDF0; /* warm yellow background */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="%23FFFDF0"/><circle cx="4" cy="4" r="0.5" fill="%23EADCA6"/></svg>'); /* subtle vintage dotted texture */
            color: #330000;
            font-family: Arial, "Times New Roman", serif, sans-serif;
            font-size: 13px;
            margin: 10px;
            padding: 0;
        }

        /* 链接经典样式：下划线，悬停改变颜色 */
        a:link { color: #0000FF; text-decoration: underline; }
        a:visited { color: #800080; text-decoration: underline; }
        a:hover { color: #FF0000; text-decoration: underline; background-color: #FFFF99; }
        a:active { color: #FF0000; }

        /* 复古 3D 凹凸边框控制 */
        .outset-border {
            border: 3px outset #F4E2B2;
            background-color: #FAF0D7;
        }
        .inset-border {
            border: 2px inset #D1C090;
            background-color: #FFFFFF;
        }
        .groove-border {
            border: 3px groove #E5D5A0;
            background-color: #FFF8E7;
        }

        /* ==========================================================================
           主布局容器
           ========================================================================== */
        .main-layout {
            width: 100%;
            max-width: 820px;
            margin: 0 auto;
            background-color: #F7EA88;
            border: 4px outset #E6CE70;
            padding: 4px;
            overflow-x: hidden;
        }

        /* Title栏 Header */
        .header-bg {
            background: linear-gradient(to right, #800000, #CC3300, #800000);
            color: #FFFF00;
            text-align: center;
            padding: 12px;
            border: 2px inset #990000;
            font-family: Georgia, sans-serif;
            margin-bottom: 4px;
        }
        .header-bg h1 {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* 跑马灯区块 */
        .marquee-row {
            background-color: #FFF8DC;
            border: 1px groove #D2B48C;
            padding: 2px;
            margin-bottom: 4px;
            overflow: hidden;
        }

        /* ==========================================================================
           主体内容区域：Flexbox 布局（左侧栏 + 右侧内容）
           关键修复：Grid 的跨行元素会把多余高度摊派到它跨越的每一行，
           导致左侧 nav 行被迫撑高、留下大段空白。
           改用 Flexbox 后，每个子项的高度只取决于自己的内容，
           配合 align-items: flex-start 彻底杜绝被撑高/拉伸。
           ========================================================================== */
        .body-grid {
            display: flex;
            align-items: flex-start; /* 关键修复：禁止子项被拉伸到和最高兄弟一样高（仅桌面端横向布局时生效）*/
            gap: 4px;
            margin-bottom: 4px;
        }

        /* 左侧栏容器：固定 200px 宽，内部纵向排列 头像/导航/播放器/心情/计数器/施工中 */
        .sidebar-column {
            flex: 0 0 200px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .content-section {
            flex: 1 1 0%;
            min-width: 0; /* 防止宽表格撑开整个 flex 容器 */
        }

        /* 侧边栏各小面板的统一容器样式 */
        .sidebar-section {
            padding: 6px;
        }

        /* 导航按钮组容器 */
        .nav-table {
            width: 100%;
        }
        .nav-btn {
            display: block;
            width: 100%;
            padding: 6px 0;
            margin-bottom: 5px;
            background: linear-gradient(to bottom, #FFF3C4, #EBD28B);
            border: 2px outset #D3B25F;
            text-align: center;
            font-weight: bold;
            color: #660000;
            text-decoration: none !important;
            cursor: pointer;
            font-size: 13px;
        }
        .nav-btn:hover {
            background: #FFE89C;
            border-style: inset;
            color: #CC0000;
        }
        .nav-btn.active {
            background: #D8B058;
            border-style: inset;
            color: #FFFFFF;
        }
        .nav-btn:last-child {
            margin-bottom: 0;
        }

        /* 内容区块样式 */
        .content-box {
            background-color: #FFFFFF;
            border: 2px inset #D0C090;
            padding: 12px;
            min-height: 420px;
            vertical-align: top;
            overflow-x: hidden;
        }

        /* 宽表格横向滚动包裹器 */
        .table-scroll-wrapper {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* 表格隔行换色（斑马纹） */
        .list-table {
            width: 100%;
            min-width: 480px;
            border-collapse: collapse;
            font-size: 12px;
        }
        .list-table th {
            background-color: #EBD28B;
            border: 1px solid #BCA050;
            padding: 5px;
            color: #4A0000;
        }
        .list-table td {
            border: 1px dashed #DCC888;
            padding: 6px 4px;
        }
        .list-table tr:nth-child(even) {
            background-color: #FFFDF5;
        }
        .list-table tr:nth-child(odd) {
            background-color: #F8F2DC;
        }
        .list-table tr:hover {
            background-color: #FFECA1;
        }

        /* 按钮与表单控件样式 */
        input[type="text"], textarea, select {
            background-color: #FFFFF0;
            border: 2px inset #CCCCCC;
            font-family: Arial, serif;
            font-size: 12px;
            padding: 2px;
            max-width: 100%;
        }
        .btn-retro {
            background: linear-gradient(to bottom, #EEEEEE, #CCCCCC);
            border: 2px outset #FFFFFF;
            color: #000000;
            font-weight: bold;
            font-size: 12px;
            padding: 3px 12px;
            cursor: pointer;
        }
        .btn-retro:active {
            border-style: inset;
        }

        /* 经典 3D 闪烁/NEW 标签 */
        .new-badge {
            background-color: #FF0000;
            color: #FFFFFF;
            font-size: 9px;
            font-weight: bold;
            padding: 0 3px;
            border-radius: 2px;
            animation: blink 1s infinite;
            display: inline-block;
            vertical-align: middle;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.2; }
            100% { opacity: 1; }
        }

        /* MIDI Play器模拟器 */
        .player-box {
            background: #D4D0C8;
            border: 2px outset #FFFFFF;
            padding: 4px;
            font-size: 11px;
            color: #000;
            text-align: center;
        }
        .player-display {
            background-color: #000000;
            color: #00FF00;
            font-family: "Courier New", monospace;
            padding: 3px 4px;
            border: 1px inset #808080;
            margin-bottom: 4px;
            text-align: left;
            font-size: 11px;
            line-height: 1.4;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        .player-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; }
        .player-controls .btn-retro { padding: 1px 5px; font-size: 10px; }

        /* 计数器样式 */
        .counter-box {
            background-color: #000000;
            color: #00FF00;
            font-family: "Courier New", Courier, monospace;
            font-weight: bold;
            padding: 2px 6px;
            border: 2px inset #808080;
            letter-spacing: 2px;
            display: inline-block;
        }

        /* 90年代网页徽章 (Badges) */
        .web-badge {
            border: 1px solid #808080;
            background: #E0E0E0;
            font-size: 9px;
            font-family: Arial, sans-serif;
            display: inline-flex;
            margin: 2px;
            cursor: default;
        }
        .web-badge-left {
            background: #000080;
            color: #FFF;
            padding: 1px 4px;
            font-weight: bold;
        }
        .web-badge-right {
            background: #FF9900;
            color: #000;
            padding: 1px 4px;
            font-weight: bold;
        }

        /* 隐藏/显示视图的辅助类 */
        .view-panel {
            display: none;
        }
        .view-panel.active-view {
            display: block;
        }

        /* 引用块样式 */
        blockquote.retro-quote {
            background-color: #FFF9E6;
            border: 1px dashed #C0A060;
            padding: 8px;
            margin: 10px 0;
            font-style: italic;
            color: #553311;
        }

        /* ==========================================================================
           响应式：平板 / 手机 (<=768px)
           关键修复：.sidebar-column 变为 display:contents，使它"隐形消失"，
           其内部的 avatar-section / nav-section / player-section / mood-section /
           counter-section / construction-section 直接变成 .body-grid 的子项，
           然后用 order 属性单独控制每一个的视觉顺序 —— 完全不需要改动 HTML 结构。

           【FIX 说明】
           .body-grid 在桌面端是 flex-direction: row，此时 align-items: flex-start
           控制的是"交叉轴"（纵向高度），用来防止侧边栏被拉伸到和右侧一样高。
           但进入手机端后 flex-direction 变成了 column，交叉轴变成了"横向宽度"，
           align-items: flex-start 会让每个子项按照其内容的最小宽度来收缩显示
           （shrink-to-fit），而不是撑满容器宽度。
           由于 .content-section 内部含有 min-width: 480px 的表格，这个最小宽度
           会被当作 .content-section 的固有宽度参与计算，导致它被撑宽到 480px+，
           超出屏幕部分因为 overflow-x: hidden 被直接裁切掉（而不是出现横向滚动条），
           于是就出现了页面文字被整齐"切断"的现象。
           解决方法：在手机端媒体查询里把 align-items 显式改回 stretch，
           让纵向排列时所有子项都撑满父容器的宽度。
           ========================================================================== */
        @media (max-width: 768px) {
            body { margin: 6px; }

            .body-grid {
                flex-direction: column;
                align-items: stretch; /* FIX: 手机端纵向排列时，子项应撑满宽度而不是收缩 */
            }

            .sidebar-column {
                display: contents;
            }

            /* FIX: 给 sidebar 展开后的各个子项加上 min-width: 0，
               防止其内部任何较宽内容（长单词、select、图片等）把自身撑宽，
               从而间接撑宽整个 .body-grid 导致页面溢出裁切 */
            .avatar-section,
            .nav-section,
            .player-section,
            .mood-section,
            .counter-section,
            .construction-section {
                min-width: 0;
            }

            .nav-section { order: 1; }
            .content-section { order: 2; }
            .avatar-section,
            .player-section,
            .mood-section,
            .counter-section,
            .construction-section {
                order: 3; /* 同一 order 值内，flex 会保留它们原本的 HTML 源码顺序 */
            }

            .content-box { min-height: 200px; }

            .header-bg h1 { font-size: 20px !important; }
            .header-bg div { font-size: 11px !important; }

            marquee { font-size: 12px; }

            .nav-table {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
            .nav-btn {
                width: auto;
                flex: 1 1 45%;
                margin-bottom: 0;
            }
        }

        /* ==========================================================================
           响应式：小屏手机 (<=480px)
           ========================================================================== */
        @media (max-width: 480px) {
            body { font-size: 12px; margin: 4px; }

            .header-bg h1 { font-size: 16px !important; }
            .header-bg div { font-size: 10px !important; }

            .nav-btn {
                flex: 1 1 100%;
                font-size: 12px;
                padding: 8px 0;
            }

            .content-box { padding: 8px; }

            /* 关于我 / 留言表单：两列表格在小屏幕下改为单列堆叠 */
            table.stack-mobile,
            table.stack-mobile tbody,
            table.stack-mobile tr,
            table.stack-mobile td,
            #guestbook-form table,
            #guestbook-form table tbody,
            #guestbook-form table tr,
            #guestbook-form table td {
                display: block;
                width: 100% !important;
            }
            #guestbook-form table td[align="right"] {
                text-align: left !important;
                padding-top: 8px;
            }

            .player-controls .btn-retro {
                padding: 3px 7px;
                font-size: 11px;
            }
        }