/* ============================================================
   palette.css — 全站配色体系（三页共用）
   九套配色：天涯本色（默认，无 data-palette 属性 = 各页原生变量）
   + 八套取自 cloudstudio.es 的原版色值（bg/paper/暗底逐一对应）。
   机制：html[data-palette="x"] 覆盖 CSS 变量，切换零性能开销。
   每套同时给出 白天(--purple) / 暗房(夜间强调色) 两态。
   变量对应关系：
     --paper-bg  主页白天底色       ← 主题 bg
     --dark-bg   主页暗房底色       ← 主题 org-b（同系深夜色）
     --purple    强调色(白天，加深保证对比度)
     --parch/--parch-deep  手账羊皮纸 ← 主题 paper
     视频子页读取同一批变量，自动联动。
   ============================================================ */

html[data-palette="amarillo"] {
    --paper-bg: #FFF48D;
    --dark-bg: #131309;
    --purple: #9c7c12;
    --pal-night-accent: #FFF48D;
    --pal-night-ink: #d8dfae;
    --parch: #faf7ea;
    --parch-deep: #efe9d3;
}
html[data-palette="cielo"] {
    --paper-bg: #8ED8FF;
    --dark-bg: #0a1216;
    --purple: #0f7ec2;
    --pal-night-accent: #8ED8FF;
    --pal-night-ink: #bfe2ef;
    --parch: #eef5fa;
    --parch-deep: #dfeaf3;
}
html[data-palette="electrico"] {
    --paper-bg: #A3B1FF;
    --dark-bg: #0c0d16;
    --purple: #4653d8;
    --pal-night-accent: #A3B1FF;
    --pal-night-ink: #c9d1f2;
    --parch: #f0f1fa;
    --parch-deep: #e2e4f3;
}
html[data-palette="coral"] {
    --paper-bg: #FFAFA3;
    --dark-bg: #160b0a;
    --purple: #d84a34;
    --pal-night-accent: #FFAFA3;
    --pal-night-ink: #f2cdc5;
    --parch: #faf0ec;
    --parch-deep: #f0e1da;
}
html[data-palette="menta"] {
    --paper-bg: #A9E8AE;
    --dark-bg: #0b130d;
    --purple: #1f9e50;
    --pal-night-accent: #A9E8AE;
    --pal-night-ink: #cdeed0;
    --parch: #eef8ef;
    --parch-deep: #ddefdf;
}
html[data-palette="rosa"] {
    --paper-bg: #FFC0DD;
    --dark-bg: #130a10;
    --purple: #d64f96;
    --pal-night-accent: #FFC0DD;
    --pal-night-ink: #f2d3e3;
    --parch: #fbf0f5;
    --parch-deep: #f1e0e9;
}
html[data-palette="melocoton"] {
    --paper-bg: #FFD9A0;
    --dark-bg: #13100a;
    --purple: #d88718;
    --pal-night-accent: #FFD9A0;
    --pal-night-ink: #f2e2c6;
    --parch: #fbf4e9;
    --parch-deep: #f2e7d2;
}
html[data-palette="hielo"] {
    --paper-bg: #C9E9F6;
    --dark-bg: #0a1318;
    --purple: #1a8ec4;
    --pal-night-accent: #79C6E8;
    --pal-night-ink: #bfe0ee;
    --parch: #f2f8fb;
    --parch-deep: #e2eef4;
}

/* 暗房（黑夜）两态：主题色系里的夜间强调/夜间墨色 */
html[data-palette] body[data-theme="dark"] {
    --purple: var(--pal-night-accent);
    --black: var(--pal-night-ink);
    --indaco: color-mix(in srgb, var(--pal-night-ink) 45%, #565a72);
}

/* ============================================================
   切换瞬间抑制全站过渡风暴：换色即点即变，不拖泥带水
   （palette.js 在设置属性前后各一帧挂/摘这个类）
   ============================================================ */
html.pal-instant *, html.pal-instant *::before, html.pal-instant *::after { transition: none !important; }

/* ============================================================
   常驻切换入口：右下角「色卡扇」——三张迷你色卡呈扇形，
   hover 展开；点开出九色码头。纯 CSS 渲染，无逐帧动画。
   ============================================================ */
.pd-fab {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    width: 56px; height: 56px; border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: color-mix(in srgb, var(--dark-bg, #0a0a0c) 88%, #fff 0%);
    cursor: pointer; padding: 0;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.pd-fab:hover { transform: translateY(-3px); }
.pd-fab:focus-visible { outline: 2px solid var(--purple, #6a15ff); outline-offset: 3px; }
.pd-fab .pf {
    position: absolute; left: 50%; top: 50%;
    width: 17px; height: 26px; border-radius: 4.5px;
    border: 1px solid rgba(0, 0, 0, .35);
    transform-origin: 50% 88%;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.pd-fab .pf.a { background: var(--pd-c3, #f4f3eb); transform: translate(-50%, -55%) rotate(-16deg); }
.pd-fab .pf.b { background: var(--pd-c1, #6a15ff); transform: translate(-50%, -55%) rotate(0deg); }
.pd-fab .pf.c { background: var(--pd-c2, #0a0a0c); transform: translate(-50%, -55%) rotate(16deg); }
.pd-fab:hover .pf.a { transform: translate(-50%, -55%) rotate(-30deg); }
.pd-fab:hover .pf.c { transform: translate(-50%, -55%) rotate(30deg); }

.pd-dock {
    position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px;
    background: rgba(12, 12, 15, .8);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .65);
    opacity: 0; transform: translateY(10px) scale(.97);
    pointer-events: none;
    transition: opacity .25s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.pd-dock.open { opacity: 1; transform: none; pointer-events: auto; }
.pd-dock-title {
    font: 500 10px/1 "IBM Plex Mono", monospace;
    letter-spacing: .24em; color: rgba(255, 255, 255, .5);
    margin: 2px 4px 8px;
}
.pd-item {
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 9px 6px 6px; border-radius: 10px;
    color: #eee; font: 400 12.5px/1.2 "Noto Sans SC", sans-serif;
    transition: background .18s;
}
.pd-item:hover { background: rgba(255, 255, 255, .09); }
.pd-item.cur { background: rgba(255, 255, 255, .15); }
.pd-item .sw {
    width: 32px; height: 22px; border-radius: 6px; flex: none;
    background: linear-gradient(100deg, var(--sw3) 0 36%, var(--sw1) 36% 68%, var(--sw2) 68% 100%);
    border: 1px solid rgba(255, 255, 255, .22);
}
.pd-item .en { opacity: .42; font-size: 9.5px; font-family: "IBM Plex Mono", monospace; letter-spacing: .08em; margin-left: auto; padding-left: 12px; }

/* ============================================================
   进站行色引导 v3：宣纸拼色大幕
   不用玻璃不用极光——直接用主页自己的设计语言：
   满屏铺满的平涂色块 + 发丝墨缝 + mono括号眉标 + 毛笔色名
   + 悬停浮现印泥红角点 + 纸纹颗粒。块面即页面，占比拉满。
   ============================================================ */
.pgate {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; grid-template-rows: auto 1fr;
    background: var(--paper-bg, #f4f3eb);
    color: #141416;
    transition: background .45s ease, opacity .55s ease, visibility .55s;
    overflow: hidden auto;
}
.pgate.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.pgate::before { /* 纸纹颗粒（主页同款质感），静态无动画 */
    content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; z-index: 2;
    background-image: radial-gradient(rgba(0,0,0,.6) 1px, transparent 1.4px);
    background-size: 22px 22px;
}

/* ---------- 顶带：品牌 · 标题 · 出口（sec-head 语言） ---------- */
.pgate-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 14px clamp(16px, 3vw, 44px) 12px;
    border-bottom: 1px solid #141416;
}
.pgb-brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pgate-bar .brand {
    font-family: var(--font-brush, "LogoBrush", serif); font-size: clamp(20px, 2vw, 27px);
    letter-spacing: .08em; line-height: 1;
    -webkit-text-stroke: var(--brush-stroke, 0px) currentColor;
}
.pgate-eyebrow, .pgate-hint {
    font: 500 10px/1.5 "IBM Plex Mono", monospace;
    letter-spacing: .22em; text-transform: uppercase; opacity: .55;
}
.pgb-mid { text-align: center; min-width: 0; }
.pgate-title {
    font-family: var(--font-brush, "LogoBrush", serif); font-weight: 400;
    font-size: clamp(20px, 2.6vw, 34px); line-height: 1.2; letter-spacing: .04em;
    -webkit-text-stroke: var(--brush-stroke, 0px) currentColor;
    white-space: nowrap;
}
.pgate-sub { margin-top: 3px; font: 400 clamp(11px, 1vw, 13px)/1.6 "Noto Sans SC", sans-serif; opacity: .62; }
.pgate-sub em { font-style: italic; font-family: Georgia, serif; }
.pgb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.pgate-skip {
    border: 1px solid #141416; background: transparent; cursor: pointer; color: inherit;
    font: 500 11.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 20px; border-radius: 999px;
    transition: background .2s, color .2s;
}
.pgate-skip:hover { background: #141416; color: var(--paper-bg, #f4f3eb); }

/* ---------- 大幕：满屏铺满的九宫色块 ---------- */
.pgate-grid {
    /* 居中的一块，不再铺满整屏：比 v2 略大、四周留白 */
    align-self: center; justify-self: center;
    width: min(1180px, calc(100vw - clamp(28px, 8vw, 96px)));
    margin: clamp(14px, 3vh, 34px) 0;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto;
    gap: 1px; background: #141416;   /* 发丝墨缝 */
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .4);
}
.pgate-cell {
    position: relative;
    border: 0; cursor: pointer;
    min-height: clamp(150px, 20vh, 196px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1vh, 10px);
    padding: clamp(14px, 2.2vh, 26px) 14px;
    color: #17171a;
    overflow: hidden;
    transition: filter .18s;
}
.pgate-cell:hover, .pgate-cell:focus-visible { filter: brightness(1.05) saturate(1.07); }
.pgate-cell:focus-visible { outline: 2px solid #141416; outline-offset: -5px; }
/* 悬停浮现印泥红四角点（主页检票口同款语言） */
.pgate-cell .cd {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--seal-red, #b3402a);
    opacity: 0; transform: scale(.4);
    transition: opacity .22s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pgate-cell .cd.tl { top: 10px; left: 10px; } .pgate-cell .cd.tr { top: 10px; right: 10px; }
.pgate-cell .cd.bl { bottom: 10px; left: 10px; } .pgate-cell .cd.br { bottom: 10px; right: 10px; }
.pgate-cell:hover .cd, .pgate-cell.cur .cd { opacity: 1; transform: none; }
/* 角标编号 / 英文名：mono 括号语言 */
.pgate-cell .ix, .pgate-cell .en {
    position: absolute; top: 12px;
    font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .18em; opacity: .58;
}
.pgate-cell .ix { left: 26px; }
.pgate-cell .en { right: 26px; }
.pgate-cell svg { width: clamp(34px, 6vh, 60px); height: auto; display: block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pgate-cell:hover svg { transform: translateY(-3px) scale(1.08); }
/* 色名：走全站统一黑体（--font-cn / Noto Sans SC），与主页正文中文同一风格，不用毛笔字 */
.pgate-cell .nm {
    font-family: var(--font-cn, "Noto Sans SC", sans-serif); font-weight: 700;
    font-size: clamp(20px, 3vh, 30px); line-height: 1.15; letter-spacing: .06em;
}
.pgate-cell .tag { font: 400 clamp(10.5px, 1.5vh, 12.5px)/1.5 "Noto Sans SC", sans-serif; opacity: .6; }
.pgate-cell .tag em { font-style: italic; font-family: Georgia, serif; letter-spacing: .02em; }
/* 当前所选：印泥红斜盖小方章 */
.pgate-cell.cur::after {
    content: "现"; position: absolute; top: 30px; right: 22px;
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 2px solid var(--seal-red, #b3402a); color: var(--seal-red, #b3402a);
    font: 700 13px/1 "Noto Sans SC", sans-serif;
    transform: rotate(-6deg);
}

@media (max-width: 760px) {
    /* 手机：改成纵向自然排布 + 整页滚动，别再用 auto/1fr 把长网格挤进短行(会上溢盖住标题、显得被压缩) */
    .pgate { display: flex; flex-direction: column; overflow-y: auto; }
    .pgate-bar {
        flex: none; flex-direction: column; align-items: flex-start;
        gap: 10px; padding: 16px 18px 14px;
    }
    .pgb-brand { order: 1; }
    .pgb-mid { order: 2; width: 100%; text-align: left; }
    .pgate-title { white-space: normal; font-size: clamp(22px, 6vw, 28px); }
    .pgate-sub { font-size: 12px; }
    .pgb-right { order: 3; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; }
    .pgate-skip { padding: 11px 22px; }
    .pgate-hint { display: none; }
    .pgate-grid {
        flex: none; align-self: center;
        width: calc(100vw - 28px); margin: 4px auto 22px;
        grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;
    }
    /* 色块内三行(图案/大字/小字)统一居中对齐、拉开呼吸：图标固定同高、间距均匀、小字收敛 */
    .pgate-cell {
        min-height: clamp(158px, 25vh, 188px);
        justify-content: center; gap: 9px; padding: 20px 12px 16px;
    }
    .pgate-cell svg { width: auto; height: 34px; }
    .pgate-cell .nm { font-size: clamp(19px, 5.2vw, 24px); letter-spacing: .04em; margin-top: 1px; }
    .pgate-cell .tag { font-size: 11px; letter-spacing: 0; line-height: 1.4; padding: 0 4px; }
    .pgate-cell:last-child { grid-column: 1 / -1; }
    .pgate-cell .ix { left: 14px; } .pgate-cell .en { right: 14px; }
    .pd-fab { right: 14px; }
    .pd-dock { right: 14px; max-height: 60vh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-fab, .pd-fab .pf, .pd-dock, .pgate, .pgate-cell, .pgate-cell svg, .pgate-cell .cd { transition: none; }
}