/* =========================================================
 * Purin Purin · Pixel BBS
 * =========================================================
 * 复古像素论坛 × 布丁配色
 *
 * 配色思路：
 *   页面底色是「盘子」——奶油白，不是黄色
 *   布丁黄只用在点缀（状态灯、装饰符号、标签）
 *   焦糖棕负责边框，红色只做状态提示
 *
 * ⚠ 选择器必须和「像素博客构建」插件生成的 HTML 对应：
 *   .wrap .banner .tabbar .panel .panel-bar .panel-body
 *   .board-grid .board-card .bbs .crumbs .post-title .prose
 *   .cards .card-grid .pixel-card .footer
 *   改名的话插件生成的页面会掉样式。
 *
 * 改完执行命令面板「像素博客：构建全部页面」即可生效。
 * ========================================================= */


/* =========================================================
 * 字体
 * ---------------------------------------------------------
 * 两条 @font-face 同名，靠 unicode-range 分工：
 *   拉丁 / 数字 / 标点 → latin
 *   中文汉字 / 标点     → zh_hans
 * 浏览器只下载真正用到的那份。
 * ========================================================= */

@font-face {
    font-family: 'FusionPixel';
    src: url('assets/fonts/fusion-pixel-12px-proportional-latin.otf.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                   U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'FusionPixel';
    src: url('assets/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2E80-303F, U+3040-30FF, U+3100-312F,
                   U+31A0-31BF, U+3400-4DBF, U+4E00-9FFF,
                   U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}


/* =========================================================
 * 配色变量
 * ========================================================= */

:root {
    /* ---------- 盘子：奶油白，不是黄 ---------- */
    --bg:          #FCFAF4;
    --bg-alt:      #F5F0E2;
    --bg-dark:     #ECE5D2;

    /* ---------- 文字：可可棕 ---------- */
    --text:        #443329;
    --text-dim:    #776355;
    --text-faint:  #9C8A78;

    /* ---------- 布丁黄：只做点缀 ---------- */
    --pudding:      #E8B44A;
    --pudding-light: #F5D979;
    --pudding-pale:  #FBF1D6;

    /* ---------- 焦糖：边框与表头 ---------- */
    --caramel:      #B87333;
    --caramel-dark: #6E4227;
    --caramel-deep: #593823;

    /* ---------- 状态色 ---------- */
    --red:         #A84E3F;
    --green:       #64734A;

    /* ---------- 边框 ---------- */
    --border:      #60412D;
    --border-soft: #C4AC8C;

    /* ---------- 像素阴影 ---------- */
    --pixel-shadow: 3px 3px 0 rgba(89, 56, 35, 0.85);

    /* ---------- 尺寸 ---------- */
    --radius:      0px;
    --fs-base:     15px;
    --line:        2px;
    --wrap:        900px;

    /* ---------- 卡片图比例 ---------- */
    /* 4:3 = 75%，3:4 = 133.33%，1:1 = 100%，9:16 = 177.8% */
    --card-img-ratio: 75%;
}


/* =========================================================
 * 基础
 * ========================================================= */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    padding: 0 14px 56px;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'FusionPixel', ui-monospace, 'PingFang SC', 'Microsoft YaHei', monospace;
    font-size: var(--fs-base);
    line-height: 1.85;
    font-synthesis: none;
    -webkit-font-smoothing: none;
    letter-spacing: 0.02em;

    /* 极淡的奶油网格，8px 一格 */
    background-image:
        linear-gradient(rgba(184, 155, 120, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 155, 120, 0.07) 1px, transparent 1px);
    background-size: 8px 8px;
}

img {
    max-width: 100%;
    image-rendering: pixelated;
}

::selection {
    color: var(--bg);
    background: var(--caramel);
}

/* ---------- 滚动条 ---------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
    background: var(--caramel);
    border: 2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--caramel-dark); }


/* =========================================================
 * 链接
 * ========================================================= */

a {
    color: var(--caramel-dark);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color 0.08s linear, background 0.08s linear;
}

a:hover {
    color: var(--caramel-deep);
    background: var(--pudding-pale);
    border-bottom-color: var(--caramel);
}


/* =========================================================
 * 页面宽度
 * ========================================================= */

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
}


/* =========================================================
 * 顶部 Banner
 * ========================================================= */

.banner {
    position: relative;
    margin: 20px auto 0;
    padding: 26px 20px 22px;
    background: var(--pudding-pale);
    border: var(--line) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pixel-shadow);
    text-align: left;
}

/* 左上角三个像素点 */
.banner::before {
    content: "\25CF \25CF \25CF";
    position: absolute;
    top: 7px;
    left: 10px;
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--caramel);
}

.banner-title {
    margin: 10px 0 0;
    color: var(--caramel-deep);
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-shadow: 2px 2px 0 rgba(232, 180, 74, 0.18);
}

.banner-sub {
    margin: 8px 0 0;
    color: var(--text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.banner-sub::before {
    content: "> ";
    color: var(--caramel);
}


/* =========================================================
 * 导航
 * ========================================================= */

.tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 16px auto 0;
    background: var(--bg-alt);
    border: var(--line) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pixel-shadow);
    overflow: hidden;
}

.tabbar a {
    display: block;
    padding: 7px 16px;
    color: var(--text);
    background: var(--bg-alt);
    border-right: 1px solid var(--border-soft);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.tabbar a:last-child { border-right: none; }

.tabbar a:hover {
    color: var(--caramel-deep);
    background: var(--pudding);
}

.tabbar a.active {
    color: var(--bg);
    background: var(--caramel-dark);
}


/* =========================================================
 * 通用面板
 * ========================================================= */

.panel {
    margin: 24px 0 0;
    background: var(--bg);
    border: var(--line) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pixel-shadow);
    overflow: hidden;
}

/* 面板标题栏 */
.panel-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    background: var(--bg-alt);
    border-bottom: var(--line) solid var(--border);
    color: var(--text-dim);
    font-size: 0.75rem;
    letter-spacing: 0.07em;
}

/* 布丁状态灯 */
.panel-bar::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    background: var(--pudding);
    border: 1px solid var(--border);
    border-radius: 0;
}

.panel-bar .panel-bar-title {
    margin-left: 2px;
    color: var(--text);
}

.panel-count {
    margin-left: auto;
    color: var(--text-dim);
}

.panel-body {
    padding: 16px;
}


/* =========================================================
 * 首页：板块
 * ---------------------------------------------------------
 * 网格只画上边和左边，卡片画右边和下边。
 * 这样无论列数怎么变都不会出现双线或缺角。
 * ========================================================= */

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0;
    margin: 0;
    border-top: var(--line) solid var(--border);
    border-left: var(--line) solid var(--border);
}

.board-card {
    display: block;
    padding: 14px;
    min-width: 0;
    background: var(--bg);
    color: var(--text);
    border-right: var(--line) solid var(--border);
    border-bottom: var(--line) solid var(--border);
    border-radius: var(--radius);
    transition: background 0.08s linear;
}

.board-card:hover {
    color: var(--text);
    background: var(--pudding-pale);
}

.board-card:active { transform: translate(1px, 1px); }

.board-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.board-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--caramel);
}

.board-name {
    color: var(--caramel-dark);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.board-desc {
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1.7;
}

.board-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    color: var(--text-faint);
    border-top: 1px dotted var(--border-soft);
    font-size: 0.7rem;
}


/* =========================================================
 * BBS 帖子列表
 * ---------------------------------------------------------
 * 表头那行棕色的「标题 / 板块 / 日期」已按要求隐藏。
 * 列宽仍然由 .col-author / .col-date 的 width 决定，
 * 隐藏 thead 不会让下面的列错位。
 * 想把它调回来，把下面这行删掉即可。
 * ========================================================= */

.bbs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.bbs thead {
    display: none;
}

/* 表头样式保留一份，万一以后要显示 */
.bbs thead th {
    padding: 8px 10px;
    text-align: left;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: var(--bg);
    background: var(--caramel-dark);
    border-bottom: var(--line) solid var(--border);
    white-space: nowrap;
}

.bbs tbody td {
    padding: 9px 10px;
    vertical-align: top;
    border-bottom: 1px dotted var(--border-soft);
}

.bbs tbody tr:last-child td { border-bottom: none; }
.bbs tbody tr:hover { background: var(--pudding-pale); }

.bbs .col-mark {
    width: 32px;
    color: var(--red);
    text-align: center;
}

.bbs .col-title a {
    color: var(--caramel-dark);
    border-bottom: none;
}

.bbs .col-title a:hover {
    color: var(--caramel-deep);
    background: transparent;
    border-bottom: 1px dotted var(--caramel);
}

.bbs .col-author,
.bbs .col-date {
    width: 110px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* 置顶标签 */
.tag-pin {
    display: inline-block;
    margin-right: 7px;
    padding: 0 5px;
    color: var(--bg);
    background: var(--red);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.65rem;
    line-height: 1.6;
    vertical-align: 1px;
}

.bbs-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
}


/* =========================================================
 * 文章页
 * ========================================================= */

.crumbs {
    margin: 20px 0 0;
    color: var(--text-faint);
    font-size: 0.72rem;
}

.crumbs a {
    color: var(--caramel);
    border-bottom: 1px dotted var(--caramel);
}

.post-title {
    margin: 12px 0 0;
    color: var(--caramel-deep);
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 7px 0;
    color: var(--text-dim);
    border-top: 1px dotted var(--border-soft);
    border-bottom: 1px dotted var(--border-soft);
    font-size: 0.72rem;
}

.post-meta > * { margin-right: 18px; }


/* =========================================================
 * 正文排版
 * ========================================================= */

.prose {
    padding: 22px 20px 28px;
}

.prose > *:first-child { margin-top: 0; }

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    margin: 2em 0 0.7em;
    color: var(--text);
    line-height: 1.45;
    letter-spacing: 0.03em;
}

.prose h1 { font-size: 1.5rem; }
.prose h2 {
    font-size: 1.25rem;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-soft);
}
.prose h3 { font-size: 1.05rem; }
.prose h4 { font-size: 0.95rem; }

/* 标题前缀 */
.prose h2::before {
    content: "\25A3\00a0";
    color: var(--pudding);
}
.prose h3::before {
    content: "\203A\00a0";
    color: var(--pudding);
}

.prose p { margin: 0 0 1.1em; }

/* ---------- 列表 ---------- */

.prose ul,
.prose ol {
    margin: 0 0 1.1em;
    padding-left: 1.6em;
}

.prose li { margin: 0.25em 0; }
.prose li > p { margin: 0; }
.prose li > ul,
.prose li > ol { margin: 0.3em 0 0; }
.prose li::marker { color: var(--caramel); }

/* ---------- 引用 ---------- */

.prose blockquote {
    margin: 1.4em 0;
    padding: 10px 14px;
    color: var(--text-dim);
    background: var(--bg-alt);
    border-left: 4px solid var(--pudding);
    border-radius: var(--radius);
}

/* ---------- 分隔线 ---------- */

.prose hr {
    margin: 2em 0;
    border: none;
    border-top: 2px dotted var(--border-soft);
}

/* ---------- 代码 ---------- */

.prose code {
    padding: 1px 5px;
    color: var(--caramel-deep);
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.875em;
}

.prose pre {
    margin: 1.4em 0;
    padding: 14px;
    overflow-x: auto;
    color: var(--bg);
    background: var(--caramel-deep);
    border: var(--line) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pixel-shadow);
    line-height: 1.7;
}

.prose pre code {
    padding: 0;
    font-size: 0.8rem;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
}

/* ---------- 图片 ---------- */

.prose img {
    display: block;
    max-width: 100%;
    margin: 1.6em auto;
    border: var(--line) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pixel-shadow);
}

/* ---------- 表格 ---------- */

.prose table {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.prose th,
.prose td {
    padding: 7px 9px;
    text-align: left;
    border: 1px solid var(--border-soft);
}

.prose th {
    color: var(--bg);
    background: var(--caramel-dark);
    font-weight: normal;
}

/* ---------- 高亮 ---------- */

.prose mark {
    padding: 1px 3px;
    color: var(--red);
    background: rgba(168, 78, 63, 0.12);
    border-radius: var(--radius);
}


/* =========================================================
 * 底部卡片
 * ---------------------------------------------------------
 * 图片容器用 padding-bottom 撑出固定比例，
 * 比 aspect-ratio 兼容性好（老 iOS 没有 aspect-ratio），
 * 改比例只要动 :root 里的 --card-img-ratio。
 *
 * 图片用 object-fit: contain —— 完整显示不裁切，
 * 空出来的部分露 --bg-dark，看起来像相纸的白边。
 * 想让图片铺满就把 contain 换成 cover。
 * ========================================================= */

.cards { margin: 32px 0 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0;
    border-top: var(--line) solid var(--border);
    border-left: var(--line) solid var(--border);
}

.pixel-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    border-right: var(--line) solid var(--border);
    border-bottom: var(--line) solid var(--border);
    border-radius: var(--radius);
    transition: background 0.08s linear;
}

.pixel-card:hover {
    color: var(--text);
    background: var(--pudding-pale);
}

/* 比例容器：高度由 padding-bottom 撑出来 */
.card-img-wrap {
    position: relative;
    height: 0;
    padding-bottom: var(--card-img-ratio);
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.card-img-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 0.72rem;
}

.card-title {
    padding: 9px 8px;
    color: var(--caramel-dark);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: left;
}


/* =========================================================
 * 页脚
 * ========================================================= */

.footer {
    margin: 42px auto 0;
    padding: 16px 0 0;
    color: var(--text-dim);
    border-top: 2px dotted var(--border-soft);
    font-size: 0.7rem;
    line-height: 2;
    text-align: center;
}


/* =========================================================
 * 移动端
 * ========================================================= */

@media (max-width: 560px) {
    :root {
        --fs-base: 14px;
    }

    body {
        padding: 0 8px 44px;
    }

    .banner {
        margin-top: 14px;
        padding: 22px 12px 16px;
    }

    .banner-title { font-size: 1.45rem; }
    .banner-sub { font-size: 0.72rem; }

    /* 窄屏改成横向滚动，别把标签挤成两行 */
    .tabbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabbar a {
        flex: 0 0 auto;
        padding: 7px 13px;
    }

    .panel-body,
    .prose { padding: 14px 12px 18px; }

    .board-grid { grid-template-columns: 1fr; }

    /*
     * 卡片保持两列。
     * 单列 + 竖版比例会撑出很高的卡片，把整页拉得过长；
     * 两列时每张约 160px 宽，3:4 正好是 213px，比例舒服。
     */
    .card-grid { grid-template-columns: repeat(2, 1fr); }

    .bbs { font-size: 0.74rem; }
    .bbs tbody td { padding: 8px 6px; }

    /* 收掉作者列，只留标题和日期 */
    .bbs .col-author { display: none; }
    .bbs .col-date {
        width: 76px;
        text-align: right;
    }

    .post-title { font-size: 1.3rem; }
}