/* 炼字——文房案头。三色铁律:纸/墨/朱,无第四色;无 HUD、无分数、无进度条。 */
:root {
    --paper: #f5f0e8;
    --ink: #2c2c2c;
    --ink-light: #6b6358;
    --ink-faint: #a89f91;
    --zhu: #8a2a1c;          /* 朱:先生说话的颜色 */
    --zhu-soft: rgba(138, 42, 28, 0.55);
    /* 别册异文题批头的「所出之本」小注见 .pi-head .ben(文件尾) */
    --cell: min(11.5vw, 52px); /* 一格=一字 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "HuiwenSub", serif;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ── 笺:诗区 ───────────────────────────── */
#jian {
    position: absolute;
    inset: calc(env(safe-area-inset-top) + 2vh) 0 32vh 0;   /* 下方留给活字盘;fitJian 兜底高列笺 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.poem {
    display: flex;
    flex-direction: row-reverse;      /* 右起,读序右→左 */
    gap: calc(var(--cell) * 0.32);   /* 列距再收半档,给批文让字号 */
    position: relative;
}

.line {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cell {
    width: var(--cell);
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cell) * 0.78);
    line-height: 1;
}

/* 空槽:等一枚活字 */
/* 缺字之位:手绘墨围——校书人枯笔勾的方围,与朱圈一呼一应 */
.cell.slot {
    position: relative;
    margin: 2px 0;
    height: calc(var(--cell) - 4px);
    color: var(--ink);
}
.cell.slot .rim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.5s;
}
.cell.slot .rim path {
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cell.slot.filled .rim { opacity: 0; }
.cell.slot .try { display:inline-block; animation: settle 0.22s ease-out; }
.cell.slot .miss { animation: fadeaway 0.7s ease forwards !important; }

@keyframes settle {                    /* 活字按进槽:一按一回 */
    0% { transform: scale(1.25); }
    60% { transform: scale(0.96); }
    100% { transform: scale(1); }
}
@keyframes fadeaway {                  /* 败笔淡去 */
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 题列:圈成后现于诗首(最右)——题在首,批在尾;墨系淡字,非先生之朱 */
.tici {
    position: absolute;
    left: 100%;
    top: calc(var(--cell) * 0.18);
    margin-left: calc(var(--cell) * 0.3);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: calc(var(--cell) * 0.32);
    letter-spacing: 0.18em;
    line-height: 1.4;
    color: var(--ink-light);
    opacity: 0;
    transition: opacity 1.1s ease;
}
.tici.show { opacity: 1; }

/* 题款末的小字注记(節/跨首):小一档、淡一档——它是注,不是题的一部分 */
.tici .zhu {
    font-size: 0.8em;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
}

/* 批区:挂在诗块左缘外,向左生长,不占布局流——版定批随 */
.pi-zone {
    position: absolute;
    right: 100%;
    top: 0;
    display: flex;
    flex-direction: row-reverse;
    gap: calc(var(--cell) * 0.10);
    margin-right: calc(var(--cell) * 0.22);
}

/* 批列:先生的字,朱、小、活(手写) */
.pi-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--cell) * 0.2);
}
/* 批头:那枚字=你的字(物证,墨色,保持活字体量);先生的动作皆朱——
   评点两符:圈(诗人落定之字,施于诗上)/点(可通之字,朱点旁施)。
   抹已撤(2026-08-05):否字的记号与"不存在对错"不能同处一页 */
.pi-col .pi-head {
    font-size: calc(var(--cell) * 0.35);   /* 与批文同号:墨/朱两色已足辨谁的字,大小不再兼职 */
    color: var(--ink-light);
    position: relative;
    margin-bottom: 6px;
}
.pi-col .pi-head.defensible::after {   /* 旁点:朱点施于字侧(竖排之旁=右),义为可通 */
    content: "";
    position: absolute;
    width: .16em; height: .16em;
    border-radius: 50%;
    background: var(--zhu);
    right: -.24em; top: .36em;
}
/* 旧批降格:不藏话,只退成小字——层级以字号表达(新批大、旧批小),点批头可复原尺寸 */
.pi-col.collapsed .pi-head { font-size: calc(var(--cell) * 0.28); opacity: .8; }
.pi-col.collapsed .pi-text { font-size: calc(var(--cell) * 0.28); letter-spacing: 1px; opacity: .85; }
.pi-col .pi-head { cursor: pointer; }
.pi-col .pi-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;   /* 汉字直立,标点随竖排旋转——upright 会把破折号躺成两个"一" */
    font-family: "PiSub", "HuiwenSub", serif;
    font-size: calc(var(--cell) * 0.35);   /* 手机实读偏小,升一档;宽度由各列距回收 */
    line-height: 1.42;
    letter-spacing: 1.5px;
    color: var(--zhu);
    max-height: calc(var(--cell) * 8);
    animation: piIn 0.6s ease;
}
@keyframes piIn { from { opacity: 0; } to { opacity: 1; } }

/* 朱圈:SVG 一笔画成 */
.quan {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    /* 尺寸由 drawQuan 动态设 */
}
.quan path {
    fill: none;
    stroke: var(--zhu);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.quan.go path { animation: quanDraw 0.7s ease-out 0.15s forwards; }
@keyframes quanDraw { to { stroke-dashoffset: 0; } }

/* ── 活字盘 ───────────────────────────── */
.tray {
    position: absolute;
    left: 0; right: 0;
    bottom: max(8vh, calc(env(safe-area-inset-bottom) + 6vh));   /* 底部三行收拢(2026-09-17) */
    display: flex;
    justify-content: center;
    gap: calc(var(--cell) * 0.35);
    transition: opacity 0.5s;
}
.tray {
    transition: bottom 0.5s, transform 0.5s, opacity 0.5s;
}
/* 答毕:字盘不收走、也不动窝——只淡一档。余字仍可点读批。
   (2026-09-16 改:从前它上移 8vh、缩到 0.8 给落款让位,两处坏:一是那半秒的位移正压在朱圈
   画的 0.85 秒上,抢了回执的戏;二是落款随后落在字盘刚让出的那条带子上——手指刚在那儿点过
   一枚活字,同一位置换成了「下一箋」,多按一下就跳过刚送到的批。落款改挂笺底,字盘遂不必动。
   不缩还捡回触区:缩到 0.8 时热区只剩 44,不缩则一直是 53。) */
.tray.spent {
    opacity: 0.6;
}
/* 异文题两批并立后,字盘照旧收走 */
.tray.gone { opacity: 0; pointer-events: none; }
.tile.landed { visibility: hidden; }   /* 正解那枚已按进诗里 */

.tile {
    min-width: calc(var(--cell) * 1.15);
    height: calc(var(--cell) * 1.15);
    padding: 0 calc(var(--cell) * 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cell) * 0.7);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.12s, opacity 0.3s;
}
.tile:active { transform: scale(0.88); }   /* 按进纸里 */

/* 触区:视觉一字不动,只把按得着的范围外扩到 48dp 以上(Material 的门槛)。
   外扩走 ::after 盖一层热区,不给元素加内距——全书版面按 --cell 等比,
   加内距等于改格;而热区不进布局流。外扩幅度小于相邻间距,故不会抢邻居的点。 */
.tile { position: relative; }
.tile::after { content: ""; position: absolute; inset: -4px; }   /* 1.15cell≈45 → ≈53 */
/* 答毕后字盘只淡不缩(见 .tray.spent),故残字的热区照旧是 53,不再有缩小态那档 44。 */
.colophon span:not(.ben-line), .pouch-list .pouch-share,
.pouch-replay, .pouch-home, #pouchLink { position: relative; }
.pouch-list .pouch-share::after,
.pouch-replay::after, .pouch-home::after, #pouchLink::after {
    content: "";
    position: absolute;
    inset: -8px -10px;           /* 页脚那条自带内边距,框已 33 高;上下各 8 即 49,过 48。
                                    从前写 15,热区 63 高、上沿顶到 784,白占了活字盘的地
                                    (2026-09-17 收,给底部三行腾空当) */
}
/* 落款上移到笺底后,下方不再是空到页脚的 55px,而是字盘(其上沿约在 16vh),故不能再往下扩 30。
   改上 10、下 23:15(字高)+10+23=48 恰过线;上扩 10 < 「你從○○」那行的行距 16.5,点那句话不会误触;
   下扩 23 之后与字盘上沿仍留有余量(实机量过)。 */
.colophon span:not(.ben-line)::after {
    content: "";
    position: absolute;
    inset: -15px -10px -18px;   /* 15(字高)+15+18=48;上扩 15 仍小于「你從○○」那行的 16.5 行距 */
}
/* 诗囊条目是竖着排的一列。从前用行高 3.2 把每条自己撑到 48(触区门槛),
   代价是条与条的空当跟帖与帖的空当一样大,三笺一组的分组就读不出来了,整页发散。
   改法:行收到 40、组拉开——热区用 ::after 各外扩 4 补回 48。
   两条相邻的热区因此在缝上叠 8px:那 8px 归下面一条(后画者在上),而字落在每条正中,
   照字点不会错。这与活字盘那处不同——那里缝只有 13.6,要补的却是 16,叠掉的是半条缝。 */
.pouch-list .pouch-item { line-height: 2.7; position: relative; }
.pouch-list .pouch-item::after { content: ""; position: absolute; inset: -4px 0; }
.tile.spent {
    opacity: 0.32;
    pointer-events: none;
}
.tile.spent.defensible { opacity: 0.55; }

/* ── 落款与页脚 ───────────────────────── */
.colophon {
    position: absolute;
    left: 0; right: 0;
    /* 层序从底数起:页脚、字盘、落款——三行同属「家什」,连成一块;纸与家什之间才是那片空
       (liang 2026-09-16 定)。故收的是字盘到落款这道最宽的缝(65→45),不收页脚到字盘那道:
       那道只剩 47,再收热区就要打架——诗囊的热区撑到 48、活字的上下各外扩 4,缝里只余 9,
       手指偏一点就点着诗囊,把人整个带出这一笺。
       位置上仍避开手指:字盘那条带子刚被点过,落款不落在同一坐标。 */
    bottom: max(17.5vh, calc(env(safe-area-inset-bottom) + 15.5vh));
    display: flex;
    flex-wrap: wrap;          /* 「你從○○」独占一行,落在三个键之上——一句话与三个键不是同侪 */
    justify-content: center;
    column-gap: 2.2em;
    row-gap: 1.1em;
    font-size: 15px;
    color: var(--ink-light);
    animation: piIn 0.8s ease;
}
.colophon span { cursor: pointer; letter-spacing: 0.3em; }
.colophon span:active { color: var(--ink); }
/* 异文题落款「你從○○」:一句话,不是一个键——故无手型、按下不变色 */
.colophon .ben-line { flex-basis: 100%; text-align: center; cursor: default; color: var(--ink); letter-spacing: 0.2em; }
.colophon .ben-line:active { color: var(--ink); }
.colophon .ben-line.hidden { display: none; }
.colophon #nextLink { color: var(--ink); }   /* 主流程半分加重:赶路的与深读的不同排面 */

/* ── 覆层:揭案 / 诗囊 ─────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.panel {
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px 34px;
}
.anjie-title {
    font-size: 15px;
    color: var(--ink-faint);
    letter-spacing: 0.4em;
    margin-bottom: 1.6em;
}
.anjie-text {
    font-size: 16.5px;
    line-height: 2.1;
    white-space: pre-line;   /* 版本附记以换行另起一段(按解正文与「附」之间) */
    letter-spacing: 0.05em;
    color: var(--ink);
}

.pouch-list { font-size: 15px; line-height: 2.4; color: var(--ink); }
.pouch-list .pouch-item { cursor: pointer; }
.pouch-list .pouch-meta { color: var(--ink-faint); font-size: 13px; margin-left: 0.8em; }
/* 一笺的记录=你按过的每一个字。落定的那枚正墨(它是终点),试过的淡一档(它们是你的路) */
.pouch-meta .land { color: var(--ink); font-size: 15px; letter-spacing: 0.12em; }
.pouch-meta .tried { color: var(--ink-faint); font-size: 15px; letter-spacing: 0.12em; }
.pouch-list .zhu { color: var(--zhu); }
/* 诗囊·课头 */
.pouch-list .pouch-lesson { color: var(--ink-faint); font-size: 13px; letter-spacing: 0.2em; margin: 2em 0 0.45em; }   /* 组间距要明显大过条间距,一眼看得出三笺一帖 */
/* 递笺落在诗囊的帖头上:回望的地方,才是想说给人听的地方(结果笺撤后它的新家) */
.pouch-list .pouch-share { cursor: pointer; margin-left: 1.4em; letter-spacing: 0.2em; }
.pouch-list .pouch-share:active { color: var(--ink); }
.pouch-list .pouch-lesson:first-child { margin-top: 0; }

/* 诗囊·整卷重玩:重来是慎事——素时如页脚,armed 时转朱示警,两下方成 */
.pouch-replay {
    margin-top: 2.8em;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--ink-faint);
    text-align: center;
    cursor: pointer;
}
.pouch-replay:active { color: var(--ink-light); }
.pouch-replay.armed { color: var(--zhu); }

/* 诗囊·归途:回屋门 */
.pouch-home {
    display: block;
    margin-top: 1.4em;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--ink-faint);
    text-align: center;
    text-decoration: none;
}
.pouch-home:active { color: var(--zhu); }

.hidden { display: none !important; }

/* 版心页脚一行(古籍版心下端标卷次页码之制,屏底淡墨,不入视线动线):
   诗囊(书架,可按,墨深一档)在左 + 帖名(报方位,不可按)在右,整组居中。
   **居中**(2026-08-15 liang 定):贴左试过——宽屏上诗在版心居中、页脚却钉死在
   窗口最左角,两下里脱节,手机上也偏。帖名长短带来的那点平移,远不如脱节难看。
   顺序取诗囊在左:帖名是变长的那个,让它朝行尾长,不去挤可按之物。
   定位归容器,故诗囊常驻也不会与活字盘(9vh)相撞——从前诗囊住在落款栏,
   落款 10vh 与字盘几乎同高,只因整条答毕才现才未打照面 */
.footline {
    position: fixed;
    left: 0; right: 0;
    /* 下内边距由诗囊的触控留地撑出,故底距扣回同一数,字仍落在原来那条线上 */
    bottom: calc(env(safe-area-inset-bottom) + 2.2vh - 0.9em);
    display: flex;
    justify-content: center;
    align-items: baseline;   /* 两字同落一条基线;诗囊的内边距只长命中区,不动字位 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    column-gap: 1em;         /* 视觉气口 = 此 gap + 诗囊右内边距 ≈ 2.1em */
    font-size: 12px;
    letter-spacing: 0.32em;
    pointer-events: none;   /* 帖名不挡触控 */
    overflow: hidden;        /* 极长帖名不撑出屏外(右侧自然裁,不设省略号) */
}
/* 右补一段等于诗囊左内边距的空:诗囊的触控留地是隐形的,不补则整组的
   「看得见的部分」会右偏半格 */
.meiti { color: var(--ink-faint); padding-right: 1.1em; }
#pouchLink {
    color: var(--ink-light);        /* 深一档:这是可按的 */
    cursor: pointer;
    pointer-events: auto;
    padding: 0.9em 1.1em;           /* 触控留地:12px 的字,裸命中区只有 30×12 */
}
#pouchLink:active { color: var(--ink); }

.toast {
    /* 仅存纯功能回执(如递笺复制确认);课头已改眉题常驻 */
    position: fixed;
    left: 50%; top: calc(env(safe-area-inset-top) + 10vh);
    transform: translateX(-50%);
    color: var(--ink-light);
    font-size: 14px;
    letter-spacing: 0.15em;
    background: var(--paper);
    padding: 6px 14px;
    z-index: 9;
}

/* 别册·异文题:批头下的「所出之本」——这一行才是这道题要揭的东西。
   竖排:两读并立时若作横排,两列的本名会在批栏里互撞(横宽远过列宽)。 */
.pi-col.yiwen .pi-head { display: flex; flex-direction: column; align-items: center; cursor: default; }
.pi-head .ben {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.66em;
    letter-spacing: 0.14em;
    color: var(--zhu-soft);
    margin-top: 0.4em;
}