/* ============================================================
霍格沃茨：我在魔法界白手起家 · 视觉系统 v2
「烛光礼堂 · 浮页手抄本」
三层，各司其职：
1. 底图（stage） —— 一整张照片，钉在视口上，永远在。
2. 玻璃层 —— 状态栏、文游对话框。墨色半透明，不抢戏。
3. 羊皮纸层 —— 卡片、选项、名牌、手抄本。只出现在该出现的地方。
页面本身不再是「一本羊皮纸书」，而是一层浮在礼堂上的纸与光。
============================================================ */
/* --- 字体：只引叶子文件（整包 woff2），不引 fontsource 的 index.css --- */
@font-face {
font-family: 'Noto Serif SC';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdn.jsdmirror.com/npm/@fontsource/noto-serif-sc@5.3.0/files/noto-serif-sc-chinese-simplified-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Noto Serif SC';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://cdn.jsdmirror.com/npm/@fontsource/noto-serif-sc@5.3.0/files/noto-serif-sc-chinese-simplified-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'IM Fell English';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdn.jsdmirror.com/npm/@fontsource/im-fell-english@5.3.0/files/im-fell-english-latin-400-normal.woff2') format('woff2');
}
/* --- design token：之后一律只引用 token --- */
:root {
/* 纸与墨 */
--paper: #f2e7d0; /* 羊皮纸底 */
--paper-2: #e6d5b4; /* 深一档纸 */
--paper-3: #d5bd92; /* 纸边 / 分隔线 */
--ink: #40301f; /* 墨水棕，正文 */
--ink-soft: #7d6849; /* 次级文字 */
--red: #8c2f2f; /* 红套印：唯一主强调 */
--leaf: #55654a; /* 药剂橄榄绿：第二强调，面积极小 */
--bright: #fffaf0; /* 纸上最亮的面 */
/* 照片上的一族暖色（纸上的墨压在照片上看不清，故设亮字变体） */
--cine-text: #f4e9d4;
--cine-dim: #bda98a;
--cine-gold: #e0b264;
--cine-red: #d4695f;
/* 健康条：深红。比纸上的套印（--red）亮一点，黑底上才看得见 */
--bar-hp: #ab332c;
/*
* 钱的三档：加隆金、西可银灰、纳特古铜。
* 这里给的是一套亮色（状态栏这种压在照片上的地方）；
* 落到纸上会换一套墨色（见下面 .card / .btn 那一族）。
*/
--coin-g: #e6b44f;
--coin-s: #d2d5d9;
--coin-k: #c98250;
/* 墨色玻璃：状态栏 / 对话框 / 悬浮条 */
--glass: rgba(18, 13, 9, 0.72);
--glass-2: rgba(26, 19, 13, 0.86);
--glass-line: rgba(224, 178, 100, 0.24);
--glass-line-2: rgba(224, 178, 100, 0.46);
/* 字号阶（≥1.25× 跳） */
--fs-xs: 12px;
--fs-s: 14px;
--fs-m: 17px;
--fs-l: 21px;
--fs-xl: 27px;
--fs-2xl: 36px;
/* 8px 间距阶 */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
/* 1 个圆角 + 2 种阴影（纸 / 玻璃） */
--r: 3px;
--sh-paper: 0 2px 0 rgba(120, 96, 62, 0.55), 0 14px 32px rgba(0, 0, 0, 0.5);
--sh-glass: 0 22px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 200, 0.09);
--font-body: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
--font-hand: 'IM Fell English', 'Kaiti SC', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: #0b0806;
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.85;
/*
* 全套前景色都走这四个变量：默认是「照片上」的亮色，
* 一进到纸里（.card / .sheet / .panel / .letter / .btn）就换成墨色。
* 于是同一段「小字」，在照片上是暗金、在纸上是灰褐，不用每个界面各调一次。
*/
--fg: var(--cine-text);
--fg-dim: var(--cine-dim);
--fg-accent: var(--cine-gold);
--fg-danger: var(--cine-red);
color: var(--fg);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 16px rgba(0, 0, 0, 0.6);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
/* ============================================================
1 · 舞台（整屏底图）
============================================================ */
.stage {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: #0b0806;
}
.stage-img {
position: absolute;
inset: -2%;
background-position: center 42%;
background-size: cover;
background-repeat: no-repeat;
background-color: #170f0a;
animation: hallDrift 52s ease-in-out infinite alternate;
will-change: transform;
}
/* 极慢的推移：一潭死水的背景会显得是张壁纸，动一点就「在场」了 */
@keyframes hallDrift {
from { transform: scale(1.03) translateY(0); }
to { transform: scale(1.10) translateY(-1.6%); }
}
/* 上暗 → 中间亮（把画面留给立绘）→ 下暗（给对话框留得住字） */
.stage-scrim {
position: absolute;
inset: 0;
background:
radial-gradient(115% 75% at 50% 8%, rgba(255, 226, 175, 0.10), transparent 60%),
linear-gradient(180deg,
rgba(9, 7, 5, 0.62) 0%,
rgba(9, 7, 5, 0.16) 16%,
rgba(9, 7, 5, 0.10) 42%,
rgba(9, 7, 5, 0.52) 74%,
rgba(9, 7, 5, 0.9) 100%),
radial-gradient(135% 105% at 50% 50%, transparent 52%, rgba(9, 7, 5, 0.7) 100%);
}
@media (prefers-reduced-motion: reduce) {
.stage-img { animation: none; }
}
/* ============================================================
2 · 页面骨架（浮在底图上的窄栏）
============================================================ */
.app {
position: relative;
z-index: 2;
width: 100%;
max-width: 760px;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: 0 var(--sp-4);
}
/* ---------- 顶栏账目（玻璃条，滚动时钉在顶上） ---------- */
.hud {
position: sticky;
top: 0;
z-index: 6;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-2);
margin: 0 calc(var(--sp-4) * -1);
padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-3);
background: linear-gradient(180deg, rgba(9, 7, 5, 0.86) 0%, rgba(9, 7, 5, 0.55) 62%, rgba(9, 7, 5, 0) 100%);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.hud::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-line) 18%, var(--glass-line) 82%, transparent);
}
.hud[hidden] { display: none; }
.hud-date { font-family: var(--font-hand); }
.hud-day-row {
display: flex;
align-items: center;
gap: 6px;
}
.hud-day {
display: block;
font-size: var(--fs-xl);
line-height: 1.1;
letter-spacing: 0.02em;
color: #fff6e4;
}
.hud-week {
display: block;
font-size: 11px;
font-family: var(--font-body);
color: var(--cine-dim);
letter-spacing: 0.18em;
line-height: 1.5;
}
/* 三行：钱 / 健康 / 精力。行距压到 3px，两根条才算是「贴着放」的 */
.hud-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
/*
* 钱那一行不写「钱袋」两个字——三档各有各的颜色，本身就是在报自己是谁。
* 只在它和下面两根条之间留一条缝，免得几个数字和条子糊成一坨。
*/
.stat-row.purse-row { margin-bottom: 2px; }
/*
* 行高要压住：正文是 1.85，照抄下来三行会白占一截高度，
* 顶栏跟着长高、把画面往下推——这里每一行都按内容贴紧。
*/
.stat-row {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-s);
line-height: 1.25;
}
.stat-row .tiny { color: var(--cine-dim); }
/*
* 可点的那两行（健康 / 精力）。
*
* 藏起来的入口不该长得像按钮——那会天天勾着玩家花钱。
* 但也不能完全没痕迹：鼠标划过给一点回应、按下去收一下，
* 玩家伸手点的时候就知道这里按得动。触屏看不到 hover，
* 所以反馈主要落在 :active 上（按住那一下）。
*/
.stat-row.tappable {
cursor: pointer;
border-radius: var(--r);
padding: 1px 4px;
margin: -1px -4px;
transition: background 0.14s ease;
}
.stat-row.tappable:hover { background: rgba(255, 246, 228, 0.1); }
.stat-row.tappable:active { background: rgba(255, 246, 228, 0.18); }
.stat-row.tappable:focus-visible {
outline: 1px solid var(--cine-gold);
outline-offset: 1px;
}
/* inline-block：行内元素上的 transform 不生效，跳动要看得见 */
.stat-row b {
font-family: var(--font-hand);
font-size: var(--fs-m);
font-weight: 400;
color: #fff6e4;
display: inline-block;
transition: color 0.35s ease;
}
/*
* 一行钱：三档各是各的颜色，中间一个小圆点隔开。
* 「加隆金 · 西可银灰 · 纳特古铜」——不用读数字也知道他数的是哪一档。
* 全是零的那一档压暗一点，三档并排时不至于三个数一样抢眼。
*/
.coin {
display: inline-block;
white-space: nowrap;
font-family: var(--font-hand);
font-size: var(--fs-m);
line-height: 1.25;
letter-spacing: 0.01em;
transition: color 0.35s ease;
}
/* 顶栏那一行钱要写得下三档，字号压小一档；分隔点也收紧 */
.hud-stats .coin { font-size: var(--fs-s); letter-spacing: 0; }
.hud-stats .coin .c-sep { margin: 0; }
.coin .c-g { color: var(--coin-g); }
.coin .c-s { color: var(--coin-s); }
.coin .c-k { color: var(--coin-k); }
.coin .zero { opacity: 0.5; }
.coin .c-sep { margin: 0 1px; color: var(--fg-dim); opacity: 0.7; }
/*
* 钱刚变过：整行闪一下。写在 .coin 上再落到子元素——
* 子元素各自有颜色，得让这一条盖过它们（选择器比 .c-g 更具体，不用 !important）。
*/
.coin.flash-up span { color: #a8c08c; opacity: 1; }
.coin.flash-down span { color: #d4695f; opacity: 1; }
/* 当前时段：一枚小金签，跟在「第几周」后面（不再占条子那一行的位置） */
.hud-slot {
display: inline-block;
margin-left: 6px;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.12em;
line-height: 1.5;
color: #1b130c;
background: var(--cine-gold);
border-radius: 2px;
padding: 0 5px;
vertical-align: 1px;
text-shadow: none;
}
/* ---------- 两根条：健康在上、精力在下，尺寸一样，贴着放 ---------- */
.bar { display: flex; gap: 2px; }
.bar i {
width: 6px; height: 11px;
background: rgba(20, 14, 10, 0.55);
border: 1px solid rgba(240, 228, 205, 0.42);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
/* 精力：金。玩家最该盯的一根 */
.bar.stam i.on { background: var(--cine-gold); border-color: var(--cine-gold); }
/* 健康：深红 */
.bar.hp i.on { background: var(--bar-hp); border-color: var(--bar-hp); }
/* 见底警告（两根共用）：换成亮红。放在 .on 之后，同权重后者胜 */
.bar.stam i.on.low,
.bar.hp i.on.low { background: var(--cine-red); border-color: var(--cine-red); }
/* 血跌到危险线：整根条轻轻呼吸，别只是一格一格少下去 */
.bar.hp.alert i.on { animation: barPulse 1.1s ease-in-out infinite; }
@keyframes barPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.bar.bump i { transform: scaleY(1.4); }
/* ---------- 主区域：浮着的一张张羊皮纸 ---------- */
.view {
position: relative;
z-index: 1;
flex: 1;
/*
* 顶部只留一小格。这一段原本是 sp-4，再叠上 .scene 的下边距和屋子的地面高度，
* 第一排按钮就掉到要滚一下才看得见的位置了（创作者点过这个问题）。
* 往下收这一层，比去挪每个按钮自己的坐标干净——坐标是按照片里的位置定的。
*/
padding: var(--sp-2) 0 var(--sp-5);
color: var(--fg);
}
/*
* 压在照片上的文字需要一层柔和暗底。
* 礼堂这张图上半部偏亮，白字直接搁上去会发飘；
* 但也不能压成一块黑板——所以用无边界的径向渐变，只把文字这一带压下去。
* 纸面（.card / .panel / .sheet）是不透明的，会自然盖住它，互不干扰。
*/
.view::before {
content: '';
position: absolute;
inset: -12px -20px;
z-index: -1;
pointer-events: none;
background: radial-gradient(140% 78% at 50% 42%,
rgba(9, 7, 5, 0.5) 0%,
rgba(9, 7, 5, 0.32) 48%,
rgba(9, 7, 5, 0) 100%);
}
.view:empty { display: none; }
/* 状态栏隐掉的那几屏（通知书 / 剧情），安全区得由内容自己让出来——
顶栏在的时候它已经占过这一段，别重复加 */
.hud[hidden] ~ .view { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); }
/* ---------- 底部行动托盘（吸底，滚动时也够得着） ---------- */
.tray {
position: sticky;
bottom: 0;
z-index: 6;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--sp-2);
margin: 0 calc(var(--sp-4) * -1);
padding: var(--sp-6) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
background: linear-gradient(0deg, rgba(9, 7, 5, 0.94) 42%, rgba(9, 7, 5, 0.7) 72%, rgba(9, 7, 5, 0) 100%);
}
.tray:empty { display: none; }
.tray .btn { flex: 0 1 auto; width: auto; min-width: 9.5rem; max-width: 100%; }
/*
* 托盘里的「主按钮」（今天的日程 / 离开）占满一整行——
* 门牌已经单独占了一行，主按钮再窄窄一条就不成套了。
* 门牌不是托盘的直接子元素（在 .entry-row 里），所以不受这条影响。
*/
.tray > .btn { flex: 1 1 100%; min-width: 0; width: 100%; }
.tray .acts { display: flex; }
.tray .acts > * { flex: 1 1 0; }
/* ============================================================
3 · 排版
============================================================ */
h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.3; color: var(--fg); }
h1 { font-family: var(--font-hand); font-size: var(--fs-2xl); font-weight: 400; letter-spacing: 0.01em; }
h2 { font-size: var(--fs-l); font-weight: 700; }
h3 { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; }
p { margin: 0 0 var(--sp-4); }
.small { font-size: var(--fs-s); }
.tiny { font-size: var(--fs-xs); letter-spacing: 0.1em; }
.muted { color: var(--fg-dim); }
.rule-red { color: var(--fg-danger); }
.hand { font-family: var(--font-hand); }
/* 小标题：短横 + 大字距。默认是纸上的红套印；直接在照片上时换成金 */
.chapter {
display: flex;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-5) 0 var(--sp-3);
font-size: var(--fs-xs);
letter-spacing: 0.34em;
color: var(--fg-accent);
text-transform: uppercase;
}
.chapter::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, currentColor, transparent);
opacity: 0.5;
}
/*
* 分区标题右边挂东西时（手抄本「关于你自己」那两颗按钮）：
* 靠 flex 的 order 把生成的那道横线排到按钮**前面**——默认顺序是
* [标题][英文][::after 横线]，按钮会挤在横线左边；给横线 order 1、右边那串 order 2，
* 横线照旧把剩下的地方占满，按钮稳稳落在行尾。
*/
.chapter .ch-right {
order: 2;
flex: none;
display: flex;
align-items: center;
gap: var(--sp-1);
margin-left: var(--sp-2);
}
.chapter::after { order: 1; }
/* 标题那一行字距很大（0.34em），里头那两颗按钮得还回原样 */
.chapter .ch-right .btn {
letter-spacing: 0.06em;
text-transform: none;
}
.chapter:first-child { margin-top: 0; }
/*
* 场景抬头：压在照片上的场次标签 + 标题。
* 底下那段留白从 sp-5 收到 sp-3：抬头和按钮之间不需要一整个空段，
* 而地图那几屏就是靠这一段+地面高度一路把按钮顶到折叠线以下的。
*/
.scene { margin: var(--sp-1) 0 var(--sp-3); }
.scene .label {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.3em;
color: var(--cine-red);
text-transform: uppercase;
}
.scene .name {
font-size: var(--fs-xl);
line-height: 1.25;
margin-top: var(--sp-1);
color: #fff6e4;
}
.scene .name::after {
content: '';
display: block;
width: 34px;
height: 2px;
margin-top: var(--sp-3);
background: var(--cine-red);
opacity: 0.85;
}
.scene .note { font-size: var(--fs-s); color: var(--cine-dim); margin-top: var(--sp-3); }
/*
* 名字那一行：名字占满剩下的地方，退出键（如有）贴在**行尾**。
* 退出键从托盘挪到这儿之后（托盘要留给「开始剧情 / 今天的日程」那两条），
* 它就该和标题同高、在标题这一行的右端——不压标题，也不另起一行。
*/
.scene .scene-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.scene .scene-row .name { flex: 1 1 auto; min-width: 0; }
.scene .scene-row .btn.exit { flex: none; }
/*
* 屋里那句补充（「要等熄灯之后才有正事」「三年级才许去」这一类）。
* 它和抬头一样落在照片上，所以走 cine 那一套亮字 + 暗影；
* 位置放在抬头下面一小截，读起来是「刚才那句话的注脚」，不是另一段正文。
*/
.place-hint {
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--cine-dim);
letter-spacing: 0.04em;
margin: 0 0 var(--sp-3);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.82);
}
/* ============================================================
4 · 羊皮纸（容器一族）
============================================================ */
/*
* 凡是「一张纸」的东西，都在这里统一换成纸上的墨色——
* 于是在照片上读得清，在纸上也读得清，不用每个界面各自调。
*/
.card,
.panel,
.sheet,
.letter,
.btn,
.place,
.vn-choice {
--fg: var(--ink);
--fg-dim: var(--ink-soft);
--fg-accent: var(--red);
--fg-danger: var(--red);
/* 钱落到纸上：金变赭金、银灰压深、古铜偏褐——同一套色，换个亮度 */
--coin-g: #9c6b16;
--coin-s: #7c828b;
--coin-k: #97552a;
color: var(--fg);
text-shadow: none;
}
.card {
background:
radial-gradient(80% 50% at 14% 4%, rgba(255, 255, 255, 0.55), transparent 62%),
radial-gradient(120% 90% at 52% 112%, rgba(140, 47, 47, 0.07), transparent 72%),
linear-gradient(180deg, #fbf4e4, #eee1c4);
border: 1px solid rgba(64, 48, 31, 0.34);
border-bottom-color: rgba(64, 48, 31, 0.5);
border-radius: var(--r);
box-shadow: var(--sh-paper);
padding: var(--sp-4);
margin: 0 0 var(--sp-3);
}
.card > *:last-child { margin-bottom: 0; }
/* 纸上再摊纸就别各带一份厚影了——压平，读起来才是一张本子里的两页 */
.panel-body .card,
.sheet .card {
background: rgba(255, 251, 240, 0.5);
border-color: var(--paper-3);
box-shadow: none;
}
/* ---------- 列表 ---------- */
.row {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding: var(--sp-2) 0;
border-bottom: 1px dotted rgba(64, 48, 31, 0.22);
}
.row:last-child { border-bottom: none; padding-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .val { font-family: var(--font-hand); white-space: nowrap; }
.row.dim { opacity: 0.5; }
/*
* 图鉴详情那几张纸（ui/codex.js 的 .codex-rows）与家里升级那一列权益（ui/home.js 的 .home-gains）：
* **整句的值**（用料、吃下去会怎样、"16 格（现 10）"那种）要能换行。.row .val 默认 nowrap
* （钱、数量那种短数不该进第二行），可一整句塞进去会把左边的标签挤成一列竖字
* （创作者报过：凤凰尾鱼宴那张纸上「吃下去会怎样」竖着排）。
* 所以这两档松开换行、把标签还回它的自然宽度。
*/
.codex-rows .row, .home-gains .row { align-items: flex-start; }
.codex-rows .row .grow, .home-gains .row .grow { flex: 0 0 auto; }
.codex-rows .row .val, .home-gains .row .val { white-space: normal; text-align: right; line-height: 1.55; }
/*
* 药房柜台上那三段的小标题（.shop-group / .sg-zh / .sg-en）随这一批货格
* 一起撤了：那三段现在是 .chapter + 货格，「每样一天最多几个」写在货格上面
* 那一行 .mkt-line 里。留着一段没人挂的类是给自己挖坑，所以整段删掉。
*/
/* ---------- 叙事 ---------- */
.narr { font-size: var(--fs-m); line-height: 1.9; }
.narr em { font-style: normal; color: var(--fg-danger); }
/* ---------- 人物小头像 ---------- */
.who-face {
width: 34px; height: 34px;
flex: none;
border-radius: 50%;
border: 1px solid var(--glass-line-2);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
display: grid;
place-items: center;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: #fff6e4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cast-row { display: flex; gap: 6px; margin-top: calc(var(--sp-3) * -1); margin-bottom: var(--sp-4); }
/*
* 带小像的那一种（手抄本的人物簿）：小像自己就带着描金画框、自己是透明底，
* 所以这枚**不画圆底、不填色、不描边**，只把图按它自己的比例撑满。
*/
.who-face.art {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
display: block;
overflow: visible;
}
.who-face.art img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 好感度条：和精力条同一套读法——十格竖条，满格 100 */
.hearts { display: flex; gap: 2px; flex: none; }
.hearts i {
width: 7px; height: 15px;
background: var(--paper-3);
border: 1px solid var(--ink-soft);
transition: background 0.2s ease, transform 0.2s ease;
}
.hearts i.on { background: var(--red); border-color: var(--red); }
/* ============================================================
5 · 按钮（羊皮纸）
============================================================ */
.acts { display: flex; flex-direction: column; gap: var(--sp-2); }
.acts.row { flex-direction: row; flex-wrap: wrap; }
.acts.row > * { flex: 1 1 140px; }
/*
* 弹页底下那条按钮栏（收起来 / 知道了 / 存下 / 主角人格…）：**居中、按内容宽**——
* 从前它们是一条占满整张纸的长杠，三个字横贯一整个纸面
* （创作者 2026-09-29 点掉的：「类似的大长条按钮不要出现」）。
* 这一条只够到弹页与小窗**自己的按钮栏**（.sheet / .panel 的直接子节点）；
* 纸里面那些行动组（日程那几颗、禁林那排选项）不归它管——那些本来就该占满一行。
*/
.sheet > .acts {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.sheet > .acts > * { flex: 0 1 auto; }
.sheet > .acts > .btn { width: auto; }
/*
* 日程里那一格格子。
*
* 「做事」的选项排两列，一条条对齐——一眼扫得完，也好比较各自费多少精力。
* 能把这一格直接收掉的那一个（眼下只剩晚上那颗「睡觉」）不在这里，它整行排在前面，
* 因为那一下是「我不挑了」，不该混在候选里一起看。
*/
.acts-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
}
.acts-grid > .btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 0;
min-height: 4em;
padding: var(--sp-3) var(--sp-2);
text-align: center;
/* 名字长的（有求必应屋那种）宁可换行，也不要撞出格子 */
overflow-wrap: anywhere;
/* 整行按钮那条左侧红边，在居中的格子里会看着像错位——改压在上沿 */
border-left-width: 1px;
}
.acts-grid > .btn.primary,
.acts-grid > .btn.danger { border-top: 3px solid var(--red); }
.acts-grid > .btn .cost {
float: none;
font-size: var(--fs-xs);
line-height: 1.3;
}
/* 手机上两列各自更窄，名字收小一号：宁可字小，也不让一格高出一截错位 */
@media (max-width: 420px) {
.acts-grid > .btn { font-size: var(--fs-s); padding: var(--sp-2) 6px; }
}
/* 「昨夜」那一段：醒来弹过一次，日程纸上留着随时翻回来读 */
.night-note {
display: flex;
gap: var(--sp-2);
margin: 0 0 var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-left: 2px solid rgba(140, 47, 47, 0.45);
background: rgba(140, 47, 47, 0.05);
}
.night-note .nn-label {
flex: none;
font-size: var(--fs-xs);
letter-spacing: 0.2em;
color: var(--red);
opacity: 0.8;
}
.night-note .nn-text {
font-family: var(--font-hand);
font-size: var(--fs-s);
line-height: 1.75;
color: var(--ink-soft);
}
/*
* 身上那点伤（见 ui/screens-day.js 的 hurtLine）。
* 带伤那一档只是提醒（左边一道浅痕）；血见底那一档是**这一格真的什么都做不了**，
* 所以给它整个底色压深一档——它是这张纸上唯一一条「今天到此为止」的话。
*/
.day-hurt {
margin: 0 0 var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-left: 2px solid rgba(140, 47, 47, 0.35);
font-size: var(--fs-s);
line-height: 1.7;
color: var(--ink-soft);
}
.day-hurt.bad {
border-left-color: var(--red);
background: rgba(140, 47, 47, 0.09);
color: var(--ink);
}
.btn {
display: block;
width: 100%;
text-align: left;
font-family: var(--font-body);
font-size: var(--fs-m);
color: var(--ink);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.5), transparent 62%),
linear-gradient(180deg, #fbf4e4, #efe1c4);
border: 1px solid rgba(64, 48, 31, 0.4);
border-radius: var(--r);
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.38), 0 10px 24px rgba(0, 0, 0, 0.42);
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.14s ease, border-color 0.14s ease;
}
.btn:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(50, 37, 24, 0.34), 0 14px 28px rgba(0, 0, 0, 0.5); }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: 0 1px 0 rgba(50, 37, 24, 0.38); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: 0 2px 0 rgba(50, 37, 24, 0.3); }
.btn .cost { float: right; font-family: var(--font-hand); font-size: var(--fs-s); color: var(--ink-soft); }
/*
* 中英两行的那种按钮（只有给了 en 的才是，见 shell.js 的 btn）。
* 中文那一行就是按钮本来的字号（继承 .btn），英文这行小一号、手写体、压暗。
* 别把 .btn 整体改成 flex：底下几百颗按钮都是「一行字 + 右边一个 cost」，
* 动布局等于一次动全部。
*/
.btn.duo .btn-zh { display: block; }
.btn.duo .btn-en {
display: block;
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.12em;
line-height: 1.3;
color: var(--ink-soft);
}
.btn.primary { border-left: 4px solid var(--red); }
.btn.danger { border-left: 4px solid var(--red); }
/*
* 「今天的日程」那颗（`.btn.day`）。
*
* 它和上面那些纸色按钮不是一件事：那些是「把这一格给出去」的正事，
* 这一颗只是**把那张纸摊开看一眼**——所以它长得像一条压在地图照片上的窄杠：
* 扁（上下只留一点内边距）、深棕半透明（照片在底下透出来）、浅灰黄的字。
* 中英并排：中文照旧是主角，英文小一号跟在后面，中间一个点隔开。
*
* ⚠️ 一定要把 .btn 那几条「纸按钮」的默认盖掉（底色、投影、左边那道红边），
* 不然它会顶着一张纸色的脸混在照片上——override 就得写全，别只写一半。
*/
.btn.day {
padding: calc(var(--sp-1) + 1px) var(--sp-3);
font-size: var(--fs-s);
line-height: 1.5;
text-align: center;
letter-spacing: 0.08em;
color: #d8cfae;
background: rgba(46, 30, 18, 0.72);
border: 1px solid rgba(224, 178, 100, 0.26);
border-left-width: 1px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
}
.btn.day:hover {
color: #f0e7ca;
background: rgba(66, 43, 25, 0.86);
border-color: rgba(224, 178, 100, 0.55);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.46);
}
.btn.day:active { transform: translateY(0) scale(0.995); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.42); }
.btn.day .db { display: inline-flex; align-items: baseline; gap: 5px; }
.btn.day .db-zh { font-size: var(--fs-s); }
.btn.day .db-sep { opacity: 0.45; }
.btn.day .db-en {
font-family: var(--font-hand);
font-size: 11px;
letter-spacing: 0.04em;
opacity: 0.78;
}
/*
* 【开始剧情】那颗：跟日程同款，只把中文字挑出一点金。
* 它比日程重要一档（一个管"这一格的活"、一个管"这一天怎么过"），
* 但这一屏的主角是那幅城堡的画——所以只给一个字色，不给尺寸、不给底、不给边框。
*/
.btn.day.story { color: #e6cf9a; }
.btn.day.story:hover { color: #fbf0d2; }
.btn.day.story .db-en { color: #c9ad76; opacity: 0.9; }
/*
* 【开始剧情】那道岔（main.js 的 chooseStory）：
* 一张纸上并排两条主线，每条一张「牌子」——标题一行、底下小字说清它是什么。
* 自由主线（眼下真能走的那条）挂一道红边，一眼看得出哪个是正路。
*/
/*
* 两张卡片（固定 / 自由剧情）排成一列。
* 间距比别处宽一档（12px）：卡片自己带一道向下的投影，8px 时上那张的影子
* 会压在下那张的边线上，看着像两张抹在一起（创作者点过这个问题）。
*/
.story-pick { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn.sp {
text-align: left;
padding: var(--sp-3) var(--sp-4);
/* 投影也收一档：这两张是竖着排的，.btn 那道 24px 的尾巴会越到下一张的边线上 */
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.34), 0 7px 14px rgba(0, 0, 0, 0.34);
}
.btn.sp .sp-zh {
display: block;
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.1em;
}
.btn.sp .sp-note {
display: block;
margin-top: 4px;
font-size: var(--fs-xs);
line-height: 1.6;
color: var(--ink-soft);
}
.btn.sp.free { border-left: 4px solid var(--red); }
.btn.sp.fixed { opacity: 0.9; }
/* 卡片 + 末尾那颗【设置】（2026-09-28 加）：设置是那一头的事，就该长在那一头 */
.story-row { display: flex; align-items: stretch; gap: var(--sp-2); }
.story-row .btn.sp { flex: 1 1 auto; min-width: 0; }
.btn.sp-set {
/* 一颗**小方块**（创作者定的）：.btn 生来是 width:100% 的整行块，
摆在这一行里会把卡片挤成一根竖条——所以宽高都自己定死 */
flex: none;
align-self: center;
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
letter-spacing: 0;
text-align: center;
/* 小方块配小影子：.btn 那两道 24px 的大投影压在 40px 的小块上会糊成一团 */
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 5px 12px rgba(0, 0, 0, 0.3);
}
.btn.sp-set:hover {
transform: translateY(-1px);
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.3), 0 8px 14px rgba(0, 0, 0, 0.34);
}
.btn.sp-set:active {
transform: translateY(1px);
box-shadow: 0 1px 0 rgba(50, 37, 24, 0.34);
}
/* ---------- 固定剧情：章节目录（ui/story-menu.js） ---------- */
/* 支线底下那两栏的小标题（好感 / 其他）：一行小字 + 一道细线，不是一张卡片 */
.ch-group {
margin: 12px var(--sp-3) 2px;
padding-bottom: 4px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.18em;
color: var(--ink-soft);
border-bottom: 1px solid rgba(64, 48, 31, 0.18);
}
.ch-group:first-child { margin-top: 2px; }
.ch-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 10px var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.22);
}
.ch-row:last-of-type { border-bottom: 0; }
.ch-row.done { opacity: 0.72; }
.ch-no {
flex: none;
width: 3.6em;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.ch-tx { flex: 1 1 auto; min-width: 0; }
.ch-title { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.ch-note { margin-top: 3px; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-soft); }
/*
* 右边那一格给一个最低高：只写「暂未触发」的那几行没章也没按钮，比旁边带【回看】的矮两像素
* （同一张列表里一行 52、一行 54 看着就是没对齐）。33px 正好是那颗小按钮的高，
* 带【已经历】红章的那几行本来就有 35 那一枚压着——整张列表归到 54，一行都不用长高。
*/
.ch-act { flex: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 33px; }
/* 已经历那枚红章（它自己点不动，旁边那颗【回看】才是动作） */
.ch-stamp {
display: inline-block;
padding: 3px 10px 4px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: var(--ink-soft);
border: 1px dashed rgba(64, 48, 31, 0.4);
border-radius: 999px;
}
.ch-stamp.done {
color: var(--red);
border: 1px solid rgba(140, 47, 47, 0.65);
background: rgba(140, 47, 47, 0.08);
transform: rotate(-4deg);
}
/* ---------- 开关（固定剧情 · 设置） ---------- */
.sw-row { display: flex; align-items: center; gap: var(--sp-3); }
.sw-tx { flex: 1 1 auto; min-width: 0; }
.sw-zh { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.sw-note { margin-top: 3px; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-soft); }
.sw {
flex: none;
position: relative;
width: 46px;
height: 26px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(64, 48, 31, 0.44);
background: rgba(64, 48, 31, 0.18);
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease;
}
.sw .sw-knob {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(180deg, #fbf4e4, #ded0b0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw.on { background: rgba(140, 47, 47, 0.55); border-color: rgba(140, 47, 47, 0.7); }
.sw.on .sw-knob { transform: translateX(20px); }
/*
* 退出键（「离开 / 回小屋 / 回大厅 / 回街上」这一类）。
*
* 它**从托盘挪到了标题行尾**（见 shell.js 的 sceneHead 第 5 个参数、本文件的 .scene-row）：
* 托盘那一层现在留给【开始剧情 / 今天的日程】那两条，世界里每一屏都站着。
*
* 长相（创作者定的）：**深棕半透明**——就是那两条日程杠同一套底色，
* 一眼认得出「这是退出去的键」，又不跟标题、不跟地图抢眼。
* 所以它必须盖掉 .btn 那副羊皮纸身板：宽度收成内容宽、不左对齐。
* 后来创作者又点了一句：这是**最常用的一个键**，可以比原样大一点点——
* 于是字从 xs 提一档到 s、上下各给了 5px 的肉，点起来不再像在戳一颗芝麻。
*/
.btn.exit {
width: auto;
text-align: center;
white-space: nowrap;
padding: 5px var(--sp-3);
font-size: var(--fs-s);
line-height: 1.45;
letter-spacing: 0.08em;
color: #d3c5a2;
background: rgba(46, 30, 18, 0.74);
border: 1px solid rgba(224, 178, 100, 0.28);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
}
.btn.exit:hover {
color: #f0e7ca;
background: rgba(66, 43, 25, 0.86);
border-color: rgba(224, 178, 100, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.44);
}
.btn.exit:active { transform: translateY(0) scale(0.99); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.36); }
/*
* 托盘里的退出键（「离开」「回走廊」「回小屋」这类）：**按内容宽的小键，居中**，
* 不收成一条整杠。创作者 2026-09-29 连点两回：先要深棕磨砂的底（浅色太突兀），
* 再不要长条（「类似的大长条按钮不要出现」）。颜色、磨砂、投影都是 .btn.exit
* 自己那一套；这儿只把托盘那条「占满一行」（flex-basis 100%）按回去。
*/
.tray > .btn.exit { flex: 0 1 auto; width: auto; }
/* 退出键上那行英文：深底上得换浅色——.btn.duo 默认给的是墨色，压在深棕上看不见 */
.btn.exit.duo .btn-en { color: rgba(233, 205, 152, 0.78); }
/*
* 退出键**悬浮**（创作者定的）：一屏内容再长、往下拉多少，它都钉在右上角同一个位置上——
* 最常用的一个键，不该被下面的内容推着一起滚上去。
*
* 两处挂它的地方（shell.js 的 sceneHead 行尾、screens-map.js 的 mapCap）都收在这条规矩里，
* 所以以后新开的屏只要还用这两个抬头，自己就是悬浮的，不用一屏一屏去写。
*
* 顶栏（.hud）是 sticky 的，键就停在它下面那一行——顶栏多高由 JS 量出来写进 --hud-h
* （见 ui/shell.js 的 renderHud 那一段），这里取不到时退回 0 也不至于叠上去。
* 右边让出居中栏（.app 的 760px）外那圈空白：窗口拉宽了，它跟着栏子走，不飘到天边去。
*/
.scene .scene-row .btn.exit,
.map-cap.has-exit .btn.exit {
position: fixed;
right: max(var(--sp-4), calc((100% - 760px) / 2 + var(--sp-4)));
top: calc(max(var(--hud-h, 0px), env(safe-area-inset-top)) + var(--sp-2));
z-index: 5;
}
/* 玻璃底上的小按钮（跳过 / 不聊了 / 还剩几次） */
.btn.ghost {
background: rgba(16, 11, 8, 0.6);
color: var(--cine-text);
border-color: var(--glass-line);
border-left-width: 1px;
box-shadow: none;
backdrop-filter: blur(6px);
font-size: var(--fs-s);
width: auto;
padding: var(--sp-2) var(--sp-3);
}
.btn.ghost:hover { border-color: var(--cine-gold); color: #fff6e4; }
/* ─────────────────────────────
滚条与滚动边缘（创作者 2026-09-29 定的两件事）
───────────────────────────── */
/*
* 1) 滚条：细、深棕、平时几乎看不见——它压在羊皮纸边上，不该比纸上的字更抢眼。
* Chrome / Edge / Safari 走 ::-webkit-scrollbar 那一套（8px、圆头、上下两颗小箭头撤掉）。
* ⚠️ 标准那两条（scrollbar-width / scrollbar-color）**只能包在 @supports 里给 Firefox**：
* Chromium 一旦看到这两条不是 auto，就把上面那套 webkit 皮整个丢掉，
* 只剩它自己那根（实测 15px）——两套同时写等于没写。
*/
@supports not selector(::-webkit-scrollbar) {
:root {
scrollbar-width: thin;
scrollbar-color: rgba(58, 42, 28, 0.42) transparent;
}
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58, 42, 28, 0.42); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58, 42, 28, 0.66); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
/*
* 2) 滚动边缘渐隐：内容滚到边上时**渐渐隐**，不再是硬切一刀。
* --fade-t / --fade-b = 「这一头还藏着内容」——由 shell.js 的 wireScrollFade
* 盯着 scrollTop 维护：能滚、且这一头还有才给一段雾，滚到头就收回去（所以
* 停在顶上时纸的上沿照旧是清清爽爽的）。三条只列在真会滚的三处：
* 弹页 / 就地小窗的身子 / 对话框的记录区。
*/
.sheet,
.panel-body,
.vn-scroll {
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-t, 0px), #000 calc(100% - var(--fade-b, 0px)), transparent 100%);
}
/* ============================================================
6 · 弹页（居中摊开的一张纸）
============================================================ */
.overlay {
position: fixed;
inset: 0;
background: rgba(9, 7, 5, 0.66);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-4);
z-index: 56;
animation: fade 0.2s ease both;
}
.overlay[hidden] { display: none; }
/*
* 一张弹页：底就是**长方形羊皮纸**那张图（assets/ui/长方形羊皮纸底图.png，
* 路径登记在 data/assets.js，由 shell.js 塞进根上的 --parchment-wide）。
* 2026-09-29 创作者定的：所有默认皮跟【通讯】一样铺这张纸——
* 从前那层奶油色渐变底不再画；深绿 / 暗红那两套皮各走各的（见 .sheet.green / .red）。
*/
.sheet {
width: 100%;
max-width: 560px;
max-height: 82vh;
overflow-y: auto;
overscroll-behavior: contain;
background-image: var(--parchment-wide);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: var(--r);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.66);
padding: var(--sp-5);
animation: sheetIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sheet > *:last-child { margin-bottom: 0; }
/*
* 紧凑档：给「一次成交」那种小面板用（回满精力 / 快速成熟）。
*
* 它们只有两三行字和两颗按钮，摊一张 560px 的大纸会空得难看，
* 也会把视线从「按哪颗」上带走。这儿把纸收窄、留白与字号各降一档，
* 头那条红线收细——紧凑不等于潦草，只是不再摆排场。
*/
/* 顶上那排分类（和设置那张纸的 .set-tabs 同一种手感） */
.mail-tabs {
display: flex;
gap: var(--sp-1);
margin: 2px 0 var(--sp-3);
padding-bottom: 6px;
border-bottom: 1px solid rgba(64, 48, 31, 0.28);
}
.mail-tab {
flex: 1 1 0;
padding: 4px 2px 5px;
font-family: var(--font-body);
font-size: var(--fs-s);
letter-spacing: 0.06em;
color: var(--ink-soft);
background: transparent;
border: 0;
border-radius: var(--r);
cursor: pointer;
transition: color 0.14s ease, background 0.14s ease;
}
.mail-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.35); }
.mail-tab.on { color: var(--red); font-weight: 700; background: rgba(140, 47, 47, 0.09); }
/* 通讯录：一行一个人（头像 / 名字 / 到哪一步 / 十格好感），整行可点 */
.mail-contact {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
padding: 9px var(--sp-2);
text-align: left;
font-family: var(--font-body);
background: transparent;
border: 0;
border-bottom: 1px dashed rgba(64, 48, 31, 0.22);
cursor: pointer;
transition: background 0.14s ease;
}
.mail-contact:last-of-type { border-bottom: 0; }
.mail-contact:hover { background: rgba(255, 255, 255, 0.38); }
.mc-tx { flex: 1 1 auto; min-width: 0; }
.mc-name { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.mc-en { margin-top: 1px; font-size: 9px; letter-spacing: 0.04em; color: var(--ink-soft); opacity: .72; }
.mc-note { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-soft); }
.sheet.compact {
max-width: 384px;
padding: var(--sp-4);
}
.sheet.compact .sheet-head {
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom-width: 1px;
box-shadow: none;
}
.sheet.compact .sheet-head h2 { font-size: var(--fs-l); }
.sheet.compact .acts { margin-top: var(--sp-3) !important; gap: var(--sp-2); }
.sheet.compact .acts > * { flex: 0 1 auto; }
.sheet-head {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--ink);
box-shadow: 0 1px 0 rgba(140, 47, 47, 0.45);
}
.sheet-head h2 { flex: 1; margin: 0; }
/*
* 关掉它的那个叉：图形是现成的一张（assets/ui/关闭按钮.png —— 一块画着叉的小羊皮方牌，
* 按 artNode 的规矩由 shell.js 的 closeButton 画成 ![]()
）。
* 从前那枚内联 SVG 叉不画了——图形自带一个，键本身只剩个头寸。
*/
.x-btn {
flex: none;
width: 34px;
height: 34px;
display: grid;
place-items: center;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
transition: filter 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.x-btn .x-img { width: 100%; height: 100%; display: block; }
.x-btn:hover { filter: brightness(1.09) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)); }
.x-btn:active { transform: scale(0.9); }
/*
* 原地重画（openSheet 的 inPlace）：这张纸已经摊着，只是换了内容。
* 入场动画挂在 .sheet 上，写死 none 是为了"这一类情况下绝不重播"——
* 真正常开一张纸时这个类不在身上，动画照旧会播。
*/
.sheet.in-place { animation: none; }
/* ============================================================
7 · 就地摊开的小窗（手抄本 / 今天的日程）
============================================================ */
.panel-layer {
position: fixed;
inset: 0;
z-index: 52;
display: flex;
align-items: flex-end;
justify-content: center;
padding: var(--sp-4);
animation: fade 0.18s ease both;
}
.panel-scrim { position: absolute; inset: 0; background: rgba(9, 7, 5, 0.5); }
/* 就地摊开那张纸（背包 / 手抄本…）：底图同弹页，也是长方形羊皮纸（见 .sheet 上面那段） */
.panel {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
max-height: 78vh;
background-image: var(--parchment-wide);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: var(--r);
box-shadow: 0 26px 64px rgba(0, 0, 0, 0.66);
animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
overflow: hidden;
}
.panel-head {
flex: none;
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
border-bottom: 2px solid var(--ink);
box-shadow: 0 1px 0 rgba(140, 47, 47, 0.45);
}
.panel-title {
flex: 1;
display: flex;
align-items: baseline;
gap: 7px;
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.04em;
}
/* 抬头里那句英文：小字、手写体、压暗一档（中文大、英文小） */
.panel-title .pt-en {
font-family: var(--font-hand);
font-size: var(--fs-s);
font-weight: 400;
letter-spacing: 0.06em;
color: var(--ink-soft);
opacity: 0.75;
}
/*
* 中英并排的一对字：中文大、英文小。
*
* 这一部里到处是这个样子（栏目名、格子名），在这儿只写一份：
* 需要的地方包一层 .duo，里面两个 span 自己排。
* 字号不写死——外层想多大就多大，英文跟着中文缩一档半（用 em，随外层走）。
*/
.duo {
display: inline-flex;
align-items: baseline;
gap: 5px;
min-width: 0;
}
.duo-zh { line-height: 1.3; letter-spacing: 0.04em; }
.duo-en {
font-family: var(--font-hand);
/* 0.72em：跟着外层的中文字号缩，不另立一档字号 token */
font-size: 0.72em;
line-height: 1.3;
letter-spacing: 0.02em;
opacity: 0.7;
}
.panel-body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--sp-4);
}
/* 小窗展开时会盖住底下的托盘，所以入口在小窗里也要够得着 */
.panel-acts { margin-top: var(--sp-4); flex-direction: row; justify-content: center; }
.panel-acts > * { flex: 0 1 auto; }
.panel-acts > .btn { width: auto; }
/* 门牌（手抄本 / 背包）不跟着拉伸，保持方块比例 */
.panel-acts > .paper-entry { flex: 0 0 auto; }
@media (max-width: 560px) {
.panel-layer { padding: 0 0 env(safe-area-inset-bottom); }
.panel { max-width: none; max-height: 84vh; border-radius: var(--r) var(--r) 0 0; }
.panel-body { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
}
/* ============================================================
8 · 文游对话层
贴着下沿的对话框；羊皮纸选项悬在它正上方。
中间那片空着——立绘以后就站在那儿。
============================================================ */
.vn-host { position: fixed; inset: 0; z-index: 44; pointer-events: none; }
.vn-host:empty { display: none; }
/*
* 对话在场时，页面那一层（.view 的抬头与牌、.tray 的托盘按钮）整个让位。
*
* 为什么必须让：这一层是铺满整屏的 fixed 层，可它只压暗**下半屏**
* （.vn::before，上面那片得留给立绘），所以底下那一屏的牌子会从人头顶和
* 两侧露出来——看着就是「进了对话，刚才那屏的 UI 还在」。
*
* 为什么是 visibility 而不是 display:none：留着占位，页面高度不塌，
* 换回来的时候底图与滚动位置都不会跳一下。
* class 由对话层自己挂/摘（ui/dialog.js 的 createDialog / destroy），
* 所以对话期间就算有谁触发了重画，重画出来的页面层照样是藏着的。
*/
body.vn-live .view,
body.vn-live .tray { visibility: hidden; }
.vn {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
pointer-events: auto;
cursor: pointer;
--fg: var(--cine-text);
--fg-dim: var(--cine-dim);
--fg-accent: var(--cine-gold);
--fg-danger: var(--cine-red);
color: var(--fg);
animation: fade 0.3s ease both;
}
/* 只压暗下半屏：上面那片留给立绘，别糊住 */
.vn::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 62%;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(9, 7, 5, 0.42) 46%, rgba(9, 7, 5, 0.8) 100%);
}
.vn > * { position: relative; }
/*
* 顶部一行：左边场次抬头，右边工具按钮（跳过 / 不聊了 / 还剩几次 / 手抄本）。
* 它必须和对话框同属一层——抬头压在照片上、还要和按钮抢同一行，
* 拆成两层写迟早叠在一起。顶栏多高由 JS 量出来写进 --hud-h。
*/
.vn-top {
/* 立绘 z-index:1，这三层必须都在它之上：状态栏不能被人的头顶走 */
z-index: 3;
margin-bottom: auto;
width: 100%;
max-width: 760px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-2);
padding-top: calc(max(var(--hud-h, 0px), env(safe-area-inset-top)) + var(--sp-2));
}
/* 没有状态栏时（理论上不会），按钮自己靠右站 */
.vn-top.no-status { justify-content: flex-end; }
/* 状态栏占满左边，地点那一行才有地方居中 */
.vn-status { flex: 1; min-width: 0; }
.vn-tools {
flex: none;
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: var(--sp-2);
flex-wrap: wrap;
}
/* 窄屏上状态栏和按钮排不开，就上下落，别挤成一团 */
@media (max-width: 460px) {
.vn-top { flex-direction: column; gap: var(--sp-2); }
.vn-tools { order: 1; }
.vn-status { order: 2; }
.vn-status .row3 { text-align: left; }
}
/* ---------- 立绘：人站在场景里，脚踩到屏幕底 ----------
*
* 这一层是铺满整屏的一层（不参与 .vn 那条 flex），人从屏幕底沿往上长。
* 所以头顶到接近状态栏、下半身被对话框盖住——这是文游该有的分量：
* 人和那张场景照片在同一个空间里，而不是挂在半空的一张卡片。
* 素材是抠好的透明 PNG，所以不加底、不加框、不垫任何 UI。
* 绘制顺序由 DOM 决定：立绘排在选项与对话框之前，于是那两层自然压住他。
*/
.vn > .vn-cast {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(0px, 2vw, 22px);
padding: 0 var(--sp-2);
/* 人不是按钮：点击一律漏给下面，点他照样翻下一句 */
pointer-events: none;
/* 压在暗化层之上（人物该亮），但排在状态栏 / 选项 / 对话框之下——
所以他的下半身是被框沿盖住的，这正是文游那种「人站在台词后面」的层次 */
z-index: 1;
transition: opacity 0.28s ease, filter 0.28s ease;
/* 一个人时尽量撑满，两人同场各退一步（下面按 data-count 切换）。
高是给桌面的上限，宽是给竖屏的上限——两个夹着，素材什么比例都不会崩。 */
--sprite-h: 92vh;
--sprite-w: min(84vw, 660px);
}
.vn-cast[hidden] { display: none; }
.vn > .vn-cast[data-count="2"] {
--sprite-h: 84vh;
--sprite-w: min(46vw, 430px);
}
/* 张开看记录的时候，人让位给字 */
.vn[data-expanded="true"] .vn-cast { opacity: 0.2; filter: saturate(0.5); }
.sprite {
position: relative;
/* 盒子按两个上限夹出来，图在盒子里按原比例贴住底边摆——
既不拉伸也不裁头，素材比例换了也不用回来改这里 */
width: var(--sprite-w);
height: var(--sprite-h);
/* 让脚伸出屏幕一点点：人被地面截断比「站在空中」更像现场 */
margin-bottom: calc(-1 * var(--sp-3));
transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), filter 0.34s ease, opacity 0.34s ease;
/* 影子贴在轮廓上（透明 PNG 才做得到）：人和照片之间的那道界线就靠它 */
filter: drop-shadow(0 14px 26px rgba(6, 4, 3, 0.55));
}
/*
* 入场（他走进画面的那一下）——**只在 data-enter 还在的时候播**。
*
* ⚠️ 它从前是直接写在 .sprite 上的，这是「立绘一闪一闪」的头号来源：
* 挂在元素上 = 只要那条规则被重新生效一次、或者节点被重新插回 DOM 一次，
* 浏览器就把这段动画从头再放一遍（from 那一帧是 opacity:0 —— 于是人闪一下）。
* 两种触发在这工程里都有：每翻一句台词都会重画立绘层，而重画从前会给
* 已经在场的节点重新 appendChild（= 摘下来再插回去）。
* 现在两道都堵上了：这条规则只有新节点带 data-enter 时才命中，
* 而 data-enter 由 ui/sprites.js 在 480ms 后摘掉——**一辈子只播一次**。
*/
.sprite[data-enter="1"] { animation: spriteIn 0.44s cubic-bezier(0.16, 1, 0.3, 1); }
.sprite-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 100%;
-webkit-user-drag: none;
user-select: none;
/*
* 呼吸：人活着 —— **只要他站在画面里就一直在呼吸**（理由见下面「四种状态」那一段）。
* 它挂在这条**基础**规则上，不挂在某个状态上：挂状态上就会跟着状态一次次重新开始，
* 玩家每点一下都要看它从头「吸」一下。
*/
animation: breathe 5.4s ease-in-out infinite alternate;
}
/*
* 四种状态（sprites.js 报过来）：
* speaking 开口的那位
* neutral 这一刻没人开口（旁白、或轮到玩家打字）
* idle 别人在说：往暗处走一点——一眼看出这话不是他讲的
* leaving 这一场散了 / 位子要让给别人：淡掉（JS 等这个时长过了才摘节点）
* 压暗只写在 idle 上——自由对话刚进来还没人说话，不该一上来就暗着。
* 幅度都收得很轻：这是两个人站在同一束光里，不是聚光灯下的独舞。
*
* ⚠️ speaking / neutral / idle **三个的姿势和位置一模一样**，差别只在光和深浅。
* 为什么这么定：旁白与台词本来就是一句一句交替的，玩家点一下就翻一句、
* 也就换一次状态。要是让开口的那位「往前站半步」，每点一下人都要上下窜一下——
* 读起来不是「他开口了」，是「这个画面在抖」；自由对话里更明显：
* 你打完字、他回一句，一来说一回，坐着的人跟着一前一后地晃。
* 谁在开口，交给名牌和对话框里那句话去说，不靠人挪位置。
* **只有 leaving 真的动**——那是「这一场散了」，一回戏只有一次，动得越多越像回事。
*/
/* speaking 与 neutral 都是 .sprite 的原样：不写 transform，站在同一个位置 */
.sprite[data-state="idle"] {
filter: drop-shadow(0 10px 18px rgba(6, 4, 3, 0.45)) brightness(0.78) saturate(0.82);
opacity: 0.88;
}
.sprite[data-state="leaving"] {
/* 退场只化开——不带位移/缩放（创作者：「不要点一下弹跳一下」） */
filter: drop-shadow(0 6px 12px rgba(6, 4, 3, 0.35)) brightness(0.72) saturate(0.85);
opacity: 0;
}
/*
* 呼吸：就挂在上面那条基础规则（.sprite-img）上，**不挂状态**。
*
* ⚠️ 从前它是挂在 speaking 上的，那正是「点一下立绘就蹦跶一下」的另一半原因：
* 挂在状态上，这条规则每翻一句就被换成另一条、再换回来，动画于是被**重新开始**，
* 每次点击都从关键帧的头「吸」一下。它和上面那条位移凑在一起，人就蹦了。
* 呼吸说的是「这个人活着」，不是「这一刻他在说话」——
* 所以他进了画面就一直呼吸；谁在说话，交给光去分（见上面 idle 那条）。
*/
@keyframes spriteIn {
/* 入场只淡入——不位移、不缩放（creator：「不要点一下弹跳一下」） */
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes breathe {
from { transform: translateY(0) scale(1); }
to { transform: translateY(-0.9%) scale(1.014); }
}
/* 晕动症的玩家不该被一个自己会动的人盯着 */
@media (prefers-reduced-motion: reduce) {
.sprite { animation: none; }
.sprite-img { animation: none; }
.sprite[data-enter="1"] { animation: none; }
.sprite, .vn-cast { transition-duration: 0.01ms; }
}
/*
* 窄屏（手机竖屏）：宽度已经快占满，两人同场就别并排了——
* 收掉间距、让后面那位往前那位身上靠一点，靠重叠站住，不靠缩小。
*/
@media (max-width: 460px) {
.vn > .vn-cast { padding: 0; gap: 0; }
.vn > .vn-cast[data-count="2"] { --sprite-w: 54vw; }
.vn-cast[data-count="2"] .sprite[data-slot="1"] { margin-left: -7vw; }
}
/* ---------- 羊皮纸选项（悬在对话框上方） ---------- */
.vn-stack {
z-index: 4;
width: 100%;
max-width: 620px;
display: flex;
flex-direction: column;
gap: 9px;
}
.vn-stack[hidden] { display: none; }
.vn-prompt {
font-size: var(--fs-xs);
letter-spacing: 0.32em;
text-align: center;
color: var(--cine-gold);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}
.vn-choice {
--tilt: -0.35deg;
position: relative; /* 序号牌要钉在这张纸上，不是钉在屏幕上 */
display: block;
width: 100%;
text-align: left;
font-family: var(--font-body);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.5), transparent 62%),
linear-gradient(180deg, #fbf4e4, #eee1c4);
border: 1px solid rgba(64, 48, 31, 0.44);
border-radius: var(--r);
padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.9em;
cursor: pointer;
transform: rotate(var(--tilt));
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.42), 0 12px 26px rgba(0, 0, 0, 0.52);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
animation: choiceIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(var(--i, 0) * 55ms);
}
.vn-choice:nth-child(even) { --tilt: 0.3deg; }
.vn-choice:hover {
border-color: var(--red);
transform: rotate(var(--tilt)) translateY(-2px);
box-shadow: 0 6px 0 rgba(50, 37, 24, 0.34), 0 16px 30px rgba(0, 0, 0, 0.55);
}
.vn-choice:active { transform: rotate(var(--tilt)) translateY(1px) scale(0.99); }
/* 序号牌：压在纸边上一枚红圈小章 */
.vn-choice .num {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 1.55em;
height: 1.55em;
display: grid;
place-items: center;
font-family: var(--font-hand);
font-size: var(--fs-xs);
color: var(--red);
border: 1px solid rgba(140, 47, 47, 0.42);
border-radius: 50%;
background: rgba(255, 251, 240, 0.6);
}
.vn-choice .lbl { display: block; font-size: var(--fs-m); color: var(--ink); }
.vn-choice .note { display: block; font-size: var(--fs-s); color: var(--ink-soft); margin-top: 2px; line-height: 1.6; }
/*
* 「收下」那张结果条（禁林末尾的「（获得蘑菇x3）」）。
*
* 它**不是一道选择题**，是这一趟的账——玩家得点它才走得下去，但它不该长得像岔路：
* 不摆序号章，左侧那段给序号的位置也收掉；纸压暗一档、边线改虚线；字小一号、偏灰，
* 读起来像账目而不是选项。仍然点得动（hover 抬一下），因为它是停住剧情的那一颗。
*/
.vn-choice.settle {
--tilt: 0;
padding-left: var(--sp-4);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.34), transparent 62%),
linear-gradient(180deg, #f3ead6, #e6d9bd);
border-style: dashed;
border-color: rgba(64, 48, 31, 0.34);
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.3), 0 8px 18px rgba(0, 0, 0, 0.42);
}
.vn-choice.settle:hover {
border-color: rgba(64, 48, 31, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 0 rgba(50, 37, 24, 0.26), 0 12px 22px rgba(0, 0, 0, 0.46);
}
.vn-choice.settle .lbl { font-size: var(--fs-s); color: var(--ink-soft); }
/* ---------- 对话框本体 ---------- */
.vn-box {
position: relative;
z-index: 5;
width: 100%;
max-width: 760px;
min-height: 8.4em;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(24, 16, 11, 0.78), rgba(10, 7, 5, 0.92));
-webkit-backdrop-filter: blur(10px) saturate(1.06);
backdrop-filter: blur(10px) saturate(1.06);
border: 1px solid var(--glass-line);
border-radius: var(--r);
box-shadow: var(--sh-glass);
padding: 22px var(--sp-4) var(--sp-3);
/* 怎么长都不许顶出屏幕：框有上限，读不完的部分交给里面的滚动区 */
max-height: 74vh;
}
.vn-box[data-expanded="true"] { animation: boxGrow 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* 翻记录的时候先把手上的选项收起来——那会儿玩家要读，不要选 */
.vn[data-expanded="true"] .vn-stack { display: none; }
/* 说话人名牌：一片小羊皮，坐在框的上沿 */
.vn-plate {
position: absolute;
top: -13px;
left: var(--sp-4);
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.14em;
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.4);
border-radius: var(--r);
padding: 2px 12px;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
}
.vn-plate[hidden] { display: none; }
/* 玩家自己那一句：红墨写的，一眼和别人分开 */
.vn-plate[data-kind="picked"] {
color: var(--red);
border-color: rgba(140, 47, 47, 0.5);
background: linear-gradient(180deg, #fdf2e6, #f2e0cb);
}
/* 展开 / 收起 */
.vn-fold {
position: absolute;
top: -13px;
right: var(--sp-4);
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--cine-dim);
background: rgba(16, 11, 8, 0.86);
border: 1px solid var(--glass-line);
border-radius: var(--r);
padding: 3px 10px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vn-fold:hover { color: #fff6e4; border-color: var(--glass-line-2); }
.vn-fold .arrow { font-size: 10px; line-height: 1; }
/* 记录区：收起时只有当前一句，展开时全部记录可滚 */
.vn-scroll {
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 4px 2px 0;
max-height: 26vh;
}
.vn-box[data-expanded="true"] .vn-scroll { max-height: 46vh; }
.vn-box[data-expanded="false"] .vn-entries .vn-entry:not(.is-current) { display: none; }
.vn-entry { margin: 0 0 var(--sp-3); animation: lineIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.vn-entry:last-child { margin-bottom: 0; }
.vn-entry .who {
display: block;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.14em;
color: var(--fg-accent);
margin-bottom: 2px;
}
/* 收起时名牌已经贴在框沿上了，条目里就不再重复一遍 */
.vn-box[data-expanded="false"] .vn-entry .who { display: none; }
.vn-entry .txt {
font-size: var(--fs-l);
line-height: 1.95;
color: var(--cine-text);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.55);
white-space: pre-wrap;
word-break: break-word;
}
.vn-entry.narr .txt { font-size: var(--fs-m); color: var(--cine-dim); }
.vn-entry.inner .txt { color: var(--cine-gold); font-style: italic; font-size: var(--fs-m); }
.vn-entry.note .txt {
font-size: var(--fs-s);
color: var(--cine-dim);
border-left: 2px solid var(--glass-line-2);
padding-left: 10px;
}
.vn-entry.picked .who { color: var(--cine-red); }
/* 打字光标 */
.vn-entry.typing .txt::after {
content: '▍';
margin-left: 1px;
opacity: 0.55;
animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 0%, 60% { opacity: 0.55; } 61%, 100% { opacity: 0; } }
/* 底部：提示 + 输入行 */
.vn-foot {
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 1.3em;
margin-top: var(--sp-1);
}
.vn-hint {
font-size: var(--fs-xs);
letter-spacing: 0.2em;
color: var(--cine-dim);
animation: hintPulse 1.8s ease-in-out infinite;
}
.vn-hint[hidden] { display: none; }
.vn-bar { display: flex; gap: var(--sp-2); align-items: flex-end; margin-top: var(--sp-2); }
.vn-bar[hidden] { display: none; }
.vn-bar textarea {
flex: 1;
resize: none;
min-height: 42px;
max-height: 104px;
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.6;
color: var(--cine-text);
background: rgba(255, 247, 232, 0.06);
border: 1px solid var(--glass-line);
border-radius: var(--r);
padding: 10px 12px;
}
.vn-bar textarea:focus { outline: none; border-color: var(--glass-line-2); background: rgba(255, 247, 232, 0.1); }
.vn-bar textarea::placeholder { color: rgba(189, 169, 138, 0.75); letter-spacing: 0.04em; }
.vn-bar[data-off="true"] textarea { opacity: 0.5; }
.vn-send {
flex: none;
font-family: var(--font-body);
font-size: var(--fs-m);
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.4);
border-radius: var(--r);
padding: 11px var(--sp-4);
cursor: pointer;
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.4);
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.14s ease;
}
.vn-send:hover { border-color: var(--red); }
.vn-send:active { transform: translateY(1px); }
.vn-send:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 560px) {
.vn { padding: 0 var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); gap: var(--sp-2); }
.vn-box { padding: 20px var(--sp-3) var(--sp-2); min-height: 9em; }
.vn-entry .txt { font-size: var(--fs-m); }
.vn-scroll { max-height: 30vh; }
.vn-box[data-expanded="true"] .vn-scroll { max-height: 44vh; }
.vn-stack { max-width: none; }
/* 左边那一条要让给序号牌，窄屏也不能压住字 */
.vn-choice { padding: var(--sp-3) var(--sp-3) var(--sp-3) 2.7em; }
.vn-choice .num { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.vn-hint { animation: none; opacity: 0.8; }
.vn-entry.typing .txt::after { animation: none; }
}
/* ============================================================
9 · 大地图（牌子直接钉在城堡上）
============================================================ */
/*
* 地图整块往上提：负边距吃掉 .view 顶部那段留白，于是第一排牌子就贴在
* 状态栏底下（创作者要的「从靠近状态栏的位置开始放」）。
* 行距也收一档——三行牌子原来能一路排到折叠线以下。
*/
.map-top {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-top: calc(var(--sp-2) * -1);
}
/* 日期与时段只在顶部状态栏出现一次，地图上不再重复 */
.map-btns { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: 0; }
.map-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
/*
* 这一层地图的名字，压在照片上部。
* 落在照片上的字一律取暖白 + 暗影，别用纸上那套墨色。
*/
.map-cap {
text-align: center;
/*
* 底下一片淡到看不见的暗雾：照片上半常常是亮天或亮窗，只靠文字阴影撑不住。
* 用径向渐变、不用直线渐变——四边都化开，才不会露出一块方方的暗斑。
*/
/* 这一层以前上下共吃掉 sp-2 + sp-4 + sp-2，光一个标题就把牌子推到折叠线以下 */
margin: 0;
padding: var(--sp-1) 0 var(--sp-2);
background: radial-gradient(120% 92% at 50% 26%,
rgba(9, 7, 5, 0.42), rgba(9, 7, 5, 0) 72%);
}
.map-cap .mc-zh {
display: block;
font-family: var(--font-hand);
font-size: var(--fs-xl);
letter-spacing: 0.14em;
color: var(--cine-text);
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.92);
}
.map-cap .mc-en {
display: block;
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.3em;
color: var(--cine-gold);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
}
/*
* 地图标题那一行要挂退出键时（见 screens-map.js 的 mapCap 第 3 个参数）：
* 标题照旧**居中**（那是这一屏的名字，居中才是它的样子）。
* 键本身现在悬浮在右上角（见 .btn.exit 那一处的悬浮规矩），不在这条流里；
* 这里只把标题右边让出同样一段，让居中那行字不至于钻到键底下。
*/
.map-cap.has-exit { padding-right: 90px; }
/* 地点牌子：一片钉在城堡上的羊皮标签，各带各的倾角与高低 */
.place {
--tilt: 0deg;
--dy: 0px;
position: relative;
font-family: var(--font-body);
text-align: left;
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.5), transparent 62%),
linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.44);
border-radius: var(--r);
padding: var(--sp-2) var(--sp-4);
min-width: 6.4em;
cursor: pointer;
transform: rotate(var(--tilt)) translateY(var(--dy));
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.4), 0 12px 26px rgba(0, 0, 0, 0.5);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}
/* 针脚：让牌子看起来是钉上去的 */
.place::after {
content: '';
position: absolute;
top: 5px;
right: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(140, 47, 47, 0.75);
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}
.place:hover {
border-color: var(--red);
transform: rotate(var(--tilt)) translateY(calc(var(--dy) - 3px));
box-shadow: 0 6px 0 rgba(50, 37, 24, 0.34), 0 16px 28px rgba(0, 0, 0, 0.55);
}
.place:active { transform: rotate(var(--tilt)) translateY(var(--dy)) scale(0.97); }
.place-name { display: block; font-size: var(--fs-m); color: var(--ink); line-height: 1.4; }
.place-sub {
display: block;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-soft);
white-space: nowrap;
}
/*
* 学院专属的那一处：用学院色包边，针脚也换成学院色。
* 四个学院各有各的一处，永远钉在同一格——于是「我学院那扇门」
* 变成地图上一个固定的位置，一眼就找得到。
*/
.place.house {
border-color: var(--house, var(--red));
border-width: 2px;
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.4), 0 12px 26px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(255, 250, 240, 0.5);
}
.place.house::after { background: var(--house, var(--red)); }
.place.house:hover {
border-color: var(--house, var(--red));
box-shadow: 0 6px 0 rgba(50, 37, 24, 0.34), 0 16px 30px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 250, 240, 0.6);
}
/*
* 地点自己带颜色的那一类（眼下只有翻倒巷：深蓝）。
* 颜色由 JS 从 data/locations.js 的 tint 挂进 --tint，这里只管「涂上之后
* 字要反白、针脚要压得住」——深蓝底上再写墨字就糊了。
*/
.place.tint {
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.16), transparent 62%),
linear-gradient(180deg, var(--tint, #1d2b4d), #121a2e);
border-color: rgba(224, 178, 100, 0.5);
box-shadow: 0 3px 0 rgba(8, 12, 24, 0.6), 0 12px 26px rgba(0, 0, 0, 0.55);
}
.place.tint .place-name { color: #f1e7d0; }
.place.tint .place-sub { color: rgba(224, 178, 100, 0.85); }
.place.tint::after { background: var(--cine-gold); }
.place.tint:hover {
border-color: var(--cine-gold);
box-shadow: 0 6px 0 rgba(8, 12, 24, 0.55), 0 16px 28px rgba(0, 0, 0, 0.6);
}
/*
* 入夜的密林：那一格长出一上一下两颗牌（云游商人 / 往更深处走）。
*
* 倾角与上下错位挂在**这一层**，两颗子牌各自的 --tilt / --dy 清成零——
* 不清的话两颗会各自再转一次、再各抬一次，看着像钉歪了。
* 整块还是占禁林原来那个位置，所以天黑以后这块坡不会跳位。
*/
.place-pair {
display: flex;
flex-direction: column;
gap: var(--sp-1);
/* --tilt / --dy 由 JS 挂在这一层（沿用禁林自己的倾角与错位） */
transform: rotate(var(--tilt, 0deg)) translateY(var(--dy, 0px));
}
/* 子牌各自那份清成零：不然两颗会再各转一次、各抬一次，看着像钉歪了 */
.place-pair .place { --tilt: 0deg; --dy: 0px; }
/* 商人那颗：夜里才来的人，给一点灯火气（暖金边 + 稍微压暗的纸），
和「正经门牌」区分开，但不做成彩色按钮那样抢。 */
.place.pair-merchant {
border-color: rgba(224, 178, 100, 0.72);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.42), transparent 62%),
linear-gradient(180deg, #f7e9c8, #e7d0a2);
}
.place.pair-merchant::after { background: var(--cine-gold); }
/* ============================================================
9b · 教室：六门学科排成一列长条
------------------------------------------------------------
这一层不摆便签——便签是「随手钉上去的」，而课表是「刻在墙上的」。
半透明深棕底衬在拱廊照片上，一条压一条，从上到下对齐。
============================================================ */
.subject-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.subject {
display: flex;
align-items: baseline;
gap: var(--sp-3);
width: 100%;
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-body);
text-align: left;
color: var(--cine-text);
/* 半透明深棕：底下的照片透出来一点点，字仍然压得住 */
background: rgba(58, 40, 26, 0.7);
border: 1px solid rgba(224, 178, 100, 0.28);
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 235, 200, 0.07);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.subject:hover {
background: rgba(84, 56, 34, 0.82);
border-color: rgba(224, 178, 100, 0.6);
transform: translateY(-1px);
}
.subject:active { transform: translateY(0) scale(0.99); }
.subject .s-zh { font-size: var(--fs-m); letter-spacing: 0.1em; }
.subject .s-en {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.06em;
color: var(--cine-dim);
}
/* 今天就是这一堂：一条金边 + 右边两个字。不抢，但一眼看得见 */
.subject.today {
border-color: rgba(224, 178, 100, 0.68);
background: rgba(74, 50, 30, 0.78);
}
.subject .s-today {
flex: none;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--cine-gold);
}
@media (max-width: 560px) {
.place { min-width: 5.2em; padding: var(--sp-2) var(--sp-3); }
.place-name { font-size: var(--fs-s); }
.place-sub { font-size: 9px; }
.map-row { gap: var(--sp-2); }
.map-cap .mc-zh { font-size: var(--fs-l); }
.subject { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
.subject .s-zh { font-size: var(--fs-s); }
.subject .s-en { font-size: var(--fs-xs); }
}
/* ============================================================
9c · 屋子里那一摞牌子（各间屋子共用：医疗翼、教室、走廊、海格门口……）
------------------------------------------------------------
从前 .room-map 是**一张坐标纸**：每块牌子自己报一个百分比角落，于是
【校园公告板】钉在顶上（y 0）、那扇星空门钉在底下（y 71），中间隔着十万八千里
——创作者 2026-10-01 报的就是这个：「全图都有这个毛病，黑湖也是」。
现在改成**一摞**：从上往下排、居中、缝 10px。挨近了，而且**结构上不可能互相压住**
（字多到折行的那块自己长高，下面那块跟着往下让；从前两份 y 撞上就是叠在一起）。
宽度也统一由这一层给（.room-map > *）：一排牌子一样宽才看得齐，
所以 JS 那边不再一块牌子写一个 x / y / w。
============================================================ */
.room-map {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: var(--sp-1);
padding: var(--sp-4) 0 var(--sp-5);
}
.room-map > * {
width: min(78%, 22rem);
min-width: 0;
}
/*
* 公共休息室那两颗并排的牌子（ui/screens-map.js 的 restBtn）：
* 上「在休息室沙发上躺一会」，下「回寝室睡觉」。
*
* 各占一行、上下叠着，不是左右并排——两颗都带一行小字（+N 精力 与那句提醒），
* 左右并排在窄屏上会挤成两坨。flex-wrap 是给牌子内部用的：
* 那行小字（.rb-sub）要自己占满一行，不 wrap 就会被挤在主标题那一行里。
*/
.rest-pair {
display: flex;
flex-direction: column;
gap: var(--sp-2);
align-items: center;
}
.rest-pair .rest-one {
width: 100%;
flex-wrap: wrap;
}
/*
* 天黑了那颗「沙发上躺一会儿」按不动（小歇是白天的事）。
* 灰掉之外还要**把 hover 那两下也按住**——不然鼠标一放上去它又亮起来，
* 玩家会以为是自己点错了。
*/
.rest-pair .rest-one:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.rest-pair .rest-one:disabled:hover {
background: rgba(58, 40, 26, 0.72);
border-color: rgba(224, 178, 100, 0.3);
transform: none;
}
/* 灰掉那颗的小字用同一种压暗的色，别再用金字——那会让它看着像还能按 */
.rest-pair .rest-one:disabled .rb-tag,
.rest-pair .rest-one:disabled .rb-sub { color: var(--cine-dim); }
/*
* 「回寝室睡觉」那颗是**夜色调**（深蓝），木头棕的那一排里一眼分得出来：
* 它是唯一一颗按下去会「关掉今天」的牌子。两颗并排摆着，差别就得看得见。
*/
.room-btn.rest-sleep {
background: rgba(32, 38, 62, 0.74);
border-color: rgba(150, 170, 220, 0.32);
}
.room-btn.rest-sleep:hover {
background: rgba(44, 52, 84, 0.86);
border-color: rgba(176, 194, 238, 0.62);
}
.room-btn.rest-sleep .rb-sub { color: rgba(196, 210, 244, 0.86); }
/*
* 公共休息室里「进入宿舍区」那颗小牌（ui/screens-map.js 的 screenCommonRoom）：
* 摆在两颗休息牌下面、隔开一档、整体小一号——它是换地方，不是屋里歇一下。
*/
.dorm-entry {
display: flex;
justify-content: center;
margin-top: var(--sp-5);
}
.dorm-entry .room-btn {
max-width: 15rem;
padding: calc(var(--sp-1) + 2px) var(--sp-4);
}
.dorm-entry .room-btn .rb-zh { font-size: var(--fs-xs); letter-spacing: 0.1em; }
.dorm-entry .room-btn .rb-en { font-size: 9px; }
.room-btn {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-body);
text-align: left;
color: var(--cine-text);
background: rgba(58, 40, 26, 0.72);
border: 1px solid rgba(224, 178, 100, 0.3);
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 235, 200, 0.07);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.room-btn:hover {
background: rgba(84, 56, 34, 0.84);
border-color: rgba(224, 178, 100, 0.62);
transform: translateY(-2px);
}
.room-btn:active { transform: translateY(0) scale(0.98); }
.room-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.room-btn .rb-zh { font-size: var(--fs-m); letter-spacing: 0.1em; white-space: nowrap; }
.room-btn .rb-en {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--cine-dim);
}
/* 右下角那个状态小标：本周已治过 / 还差几点 / 今天做过了 */
.room-btn .rb-tag {
flex: none;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--cine-gold);
}
/* 里面那些东西的状态（种植箱报的是「2生长·1成熟」） */
.room-btn .rb-sub {
display: block;
flex: 1 1 100%;
margin-top: 1px;
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: var(--cine-gold);
}
/*
* 大一号的那块牌子（温室里的种植箱）。
* 它比旁边的【上课】更高、字大一号——因为它报的是那几格土现在什么样，
* 不只是一个动作。一行字的主按钮规矩在这里破一次，是有理由的。
*/
.room-btn.big {
flex-wrap: wrap;
padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.room-btn.big .rb-zh { font-size: var(--fs-l); letter-spacing: 0.14em; }
.room-btn.big .rb-en { flex: none; font-size: var(--fs-xs); }
/*
* 种植箱那一块是**深绿半透明**的。
* 屋里别的牌子是棕色木头（老屋子的味儿），只有它是土里的东西——
* 一眼就分得出「那块是地」和「那块是事」。
* 写在 .big 之后：两条规则一样具体，靠先后顺序定胜负。
*/
.room-btn.plot {
background: rgba(30, 56, 34, 0.6);
border-color: rgba(158, 200, 146, 0.3);
}
.room-btn.plot:hover {
background: rgba(44, 78, 48, 0.74);
border-color: rgba(158, 200, 146, 0.6);
}
.room-btn.plot .rb-sub { color: #b6d6a4; }
/*
* 探索牌子（花盆 / 草丛 / 食品柜 / 浴缸 / 露台 / 猫头鹰屋）。
* 它下面那行写的是「−5 精力」——是**代价**，不是种植箱那种「两格熟了」的状态。
* 所以压暗一档：两处都用金字，玩家就分不出哪个是提醒、哪个是收费。
* 带伤干活时这行会自己变成 −10（数由 engine/health.js 算，牌子不骗人）。
*/
.room-btn.forage .rb-sub { color: var(--cine-dim); }
@media (max-width: 560px) {
/* 窄屏上「Ask for Treatment」这类长英文名先让位给中文名，别让胶囊鼓起来 */
.room-btn .rb-en { display: none; }
.room-btn { padding: var(--sp-2) var(--sp-3); }
.room-btn .rb-zh { font-size: var(--fs-s); }
/* 一摞本来就没有「坐标纸」这回事，窄屏上只是把那一排让宽一点、更好点 */
.room-map > * { width: min(88%, 24rem); }
}
/* ============================================================
9b · 种植箱：六格土（下面三格要花钱修）
============================================================ */
/*
* 一格土 = 一个竖条；六个竖条分两排摆着。
*
* 不是羊皮纸清单：它们更像屋里那三个木头箱子，摆在温室的玻璃底下，
* 所以跟屋里别的牌子同一身皮（半透明深色 + 暖白字）。
* 整块就是一个按钮——空格点它挑种子，熟了那格点它摘下来。
*/
.bed-row {
display: flex;
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
}
/* 家里田地最后一行不满三格时的空位：只撑宽度，不画东西 */
.bed-spacer { flex: 1 1 0; min-width: 0; }
/* 家里田地的自适应格盘：格数越多列越多、格子越小；36 格不摆植物图 */
.bed-grid {
display: grid;
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
gap: 8px;
margin: 0 0 var(--sp-4);
}
.bed-grid .bed {
min-height: 0;
padding: 8px 4px 9px;
border-bottom-width: 2px;
}
.bed-grid .bed-no { font-size: 9px; letter-spacing: 0.1em; }
.bed-grid .bed-art { font-size: 20px; line-height: 1.2; }
.bed-grid .bed-art-img { height: 44px; }
.bed-grid .bed-name { font-size: var(--fs-xs); }
.bed-grid .bed-state { font-size: 9px; }
.bed-grid .bed-act { font-size: 9px; }
.bed-grid.cols-3 .bed { min-height: 148px; }
.bed-grid.cols-3 .bed-art-img { height: 56px; }
.bed-grid.cols-5 .bed { min-height: 112px; }
.bed-grid.cols-5 .bed-art-img { height: 40px; }
.bed-grid.cols-8 .bed { min-height: 88px; padding: 6px 3px 7px; }
.bed-grid.cols-8 .bed-art-img { height: 28px; }
.bed-grid.cols-8 .bed-name { font-size: 10px; }
.bed-grid.no-art .bed { min-height: 56px; padding: 6px 3px 7px; justify-content: center; }
.bed-grid.no-art .bed-art { display: none; }
.bed-grid.no-art .bed-name { font-size: 10px; }
.bed-grid.no-art .bed-state,
.bed-grid.no-art .bed-act { font-size: 8px; }
.bed-grid.no-art .bed-bonus { font-size: 8px; padding: 0 4px; }
/* 种子条和催熟钮并排：田格再多，催熟也不会沉到最底下 */
.bed-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bed-tools .seed-strip { flex: 1 1 220px; margin: 0; }
/* 田地上方：左边那行英文地名，右边两颗整地钮（全部播种 / 全部收获） */
.plots-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plots-head .place-hint { margin: 0; }
.plots-bulk { display: flex; align-items: center; gap: 8px; }
.bed {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-height: 186px;
padding: var(--sp-3) var(--sp-2) var(--sp-4);
font-family: var(--font-body);
text-align: center;
color: var(--cine-text);
background:
linear-gradient(180deg, rgba(232, 240, 224, 0.07), transparent 40%),
rgba(20, 32, 22, 0.56);
border: 1px solid rgba(158, 200, 146, 0.24);
border-bottom-width: 3px;
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(220, 240, 214, 0.06);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.bed:hover {
background: rgba(38, 60, 40, 0.72);
border-color: rgba(182, 214, 164, 0.54);
transform: translateY(-2px);
}
.bed:active { transform: translateY(0) scale(0.98); }
/* 熟了的那一格镶一道金边：三格里该对谁动手，一眼看得出 */
.bed.ripe { border-color: rgba(224, 178, 100, 0.66); }
/* 空的那一格：虚线，看着就是个「还能种」的位置 */
.bed.empty { border-style: dashed; }
.bed-no {
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--cine-dim);
}
.bed-art { font-size: 30px; line-height: 1.5; }
/*
* 草药那批现在是有图的（HERB_ART）——图按高度定尺寸、宽度跟着比例走。
* 那些是细长的立幅标本，给一条高度、宽度自然收窄，撑不破这一格；
* max-width 留着是为了将来补进来一张方构图的东西也不至于顶出去。
*/
.bed-art-img {
display: block;
height: 62px;
width: auto;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}
.bed.empty .bed-art { font-size: 24px; color: rgba(224, 178, 100, 0.6); }
.bed-name { font-size: var(--fs-s); letter-spacing: 0.04em; }
.bed-state { font-size: var(--fs-xs); color: var(--cine-dim); }
.bed.ripe .bed-state { color: var(--cine-gold); }
/* 催过的那一格：一个小角标，写着「多几份」——买来的东西得看得见 */
.bed-bonus {
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.06em;
padding: 0 7px 1px;
color: #3a2c14;
background: rgba(224, 178, 100, 0.85);
border-radius: 999px;
}
/* 最下面那行是「点它会怎样」 */
.bed-act {
margin-top: auto;
padding-top: var(--sp-2);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
color: var(--cine-gold);
}
/*
* 三格下面那颗【快速成熟】：小、靠右、不抢眼。
* 它不是这一天该做的事，是「等不及了」时才找的那个出口——
* 所以做成一颗窄按钮，而不是又一枚跟格子一样宽的大按键。
*/
.bed-foot {
display: flex;
justify-content: flex-end;
margin-top: var(--sp-3);
}
.btn.small {
display: inline-block;
width: auto;
padding: 5px 14px 6px;
font-size: var(--fs-s);
letter-spacing: 0.08em;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 6px 14px rgba(0, 0, 0, 0.34);
}
/*
* 田地上那四颗动作钮（全部播种 / 全部收获 / 制种机 / 快速成熟）：
* 纸色按钮压在这张深绿田地上太跳，换一身和界面同族的深绿——
* 底色照 .sheet.green / .seed-tile 那一族（半透明深绿 + 暖白字 + 同色描边），
* 再叠一层会呼吸的发光 + 往上飘的发光孢子（纯 CSS，不引图）。
* 排在 .btn.small / .btn:hover 之后：同一批类名，靠源码顺序赢下底色与投影。
*/
.btn.plots-btn {
position: relative;
overflow: hidden;
color: #eef6e6;
background:
radial-gradient(80% 60% at 14% 4%, rgba(200, 240, 190, 0.14), transparent 62%),
linear-gradient(180deg, rgba(44, 68, 46, 0.96), rgba(24, 40, 28, 0.97));
border: 1px solid rgba(158, 200, 146, 0.5);
box-shadow: 0 2px 0 rgba(16, 28, 18, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(140, 220, 150, 0.35);
animation: plotsGlow 2.6s ease-in-out infinite;
}
.btn.plots-btn:hover {
border-color: rgba(190, 240, 175, 0.85);
box-shadow: 0 4px 0 rgba(16, 28, 18, 0.5), 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(160, 240, 170, 0.6);
}
.btn.plots-btn:disabled { animation: none; opacity: 0.42; }
/* 往上飘的发光孢子：三小簇错开上升、到顶淡出（overflow:hidden 把它们裁在钮里） */
.btn.plots-btn::after {
content: '';
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(circle, rgba(196, 255, 196, 0.95) 0 1.5px, transparent 2.4px),
radial-gradient(circle, rgba(150, 240, 170, 0.8) 0 1px, transparent 1.8px),
radial-gradient(circle, rgba(214, 255, 200, 0.85) 0 1.2px, transparent 2px);
background-repeat: no-repeat;
background-size: 40px 100%, 26px 100%, 54px 100%;
animation: plotsSpores 3.2s linear infinite;
}
@keyframes plotsGlow {
0%, 100% { box-shadow: 0 2px 0 rgba(16, 28, 18, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 9px rgba(140, 220, 150, 0.28); }
50% { box-shadow: 0 2px 0 rgba(16, 28, 18, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 18px rgba(160, 240, 170, 0.6); }
}
@keyframes plotsSpores {
0% { background-position: 10px 118%, 24px 128%, 34px 122%; opacity: 0; }
18% { opacity: 0.9; }
100% { background-position: 10px -18%, 24px -26%, 34px -20%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn.plots-btn { animation: none; }
.btn.plots-btn::after { display: none; }
}
/* ---------- 小面板里那一行行「买什么」（回一口 / 快速成熟共用） ---------- */
.pw-hint {
margin: 0 0 var(--sp-3);
font-size: var(--fs-s);
color: var(--ink-soft);
}
.pw-row {
padding: var(--sp-2) 0;
border-top: 1px dashed rgba(64, 48, 31, 0.28);
}
.pw-row:first-of-type { border-top: 0; }
.pw-head {
display: flex;
align-items: baseline;
gap: var(--sp-2);
}
.pw-name {
flex: 1;
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.03em;
color: var(--ink);
}
.pw-val {
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--ink-soft);
}
.pw-acts {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: 6px;
}
/* 成交按钮在一行里并排，不占满宽——这一张纸本来就小 */
.pw-acts .btn {
display: inline-block;
width: auto;
flex: 1 1 auto;
padding: 5px 12px 6px;
font-size: var(--fs-s);
letter-spacing: 0.06em;
text-align: center;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 5px 12px rgba(0, 0, 0, 0.3);
}
/*
* 「看广告」那一颗：它管的是**这张纸上列出来的每一格**，不是一格。
*
* 所以它占满一整行、和上面那些按格的小按钮拉开一道虚线——
* 摆在一格里、和「花 5 星光币」长得一样的话，玩家会以为广告也只催那一格。
*/
.pw-acts.pw-all {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px dashed rgba(64, 48, 31, 0.28);
}
.pw-acts.pw-all .btn {
flex: 1 1 100%;
padding: 8px 12px 9px;
}
/*
* 一段催肥道具（两样肥各一段，2026-09-28 解禁后新加的）：
* 虚线拉开、按钮占满一行，底下那行小字写「要几份 · 你有几份」。
* 和上面 `.pw-acts.pw-all` 同一副骨架——它管的是这张纸上列出来的**每一格**，
* 不是某一格，长得像那些按格的小按钮就会被当成只催一格。
*/
.pw-act {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px dashed rgba(64, 48, 31, 0.28);
}
.pw-act .btn {
display: block;
width: 100%;
padding: 8px 12px 9px;
font-size: var(--fs-s);
letter-spacing: 0.06em;
text-align: center;
}
.pw-act .tiny { display: block; margin-top: 5px; }
.pw-note {
margin-top: 6px;
font-size: var(--fs-xs);
color: var(--ink-soft);
}
/* 满了的那一行整行压暗：它现在只是「状态」，不是一件可买的东西 */
.pw-row.is-full .pw-name,
.pw-row.is-full .pw-val { opacity: 0.6; }
/* ---------- 回一口那一张纸上的一格：手上能补这一样的东西 ---------- */
/*
* 一行一件：图标 + 名字 / 效果 + 手上几份 + 一颗「用掉」。
* 排法照背包那一路的紧凑路子（创作者定的：短行，别摆成大格子）——
* 这一张纸本来就窄，一屏多看两行比格子好看要紧。
*/
/* 喂食那张纸上的两档小标题（回饱食度 / 回血量）：一行极小的字，不抢读数 */
.rf-cap {
margin: var(--sp-3) 0 0;
font-size: var(--fs-xs);
letter-spacing: 0.2em;
color: var(--ink-soft);
}
/* 血量那一行的读数走套印红（和详情纸上那根红血条一味） */
.pw-head.beast-hp .pw-val { color: var(--red); }
.rf-list { margin-top: var(--sp-1); }
.rf-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
border-top: 1px dashed rgba(64, 48, 31, 0.28);
}
.rf-item:first-child { border-top: 0; }
/*
* 图标那一个框。**必须是 flex，不能是 grid**：
* 背包详情里那六个字（.item-art）用的就是「定宽定高 + flex 居中 + 图 max-*:100%」，
* 那条 max-height 有确定的父高可算。换成 grid 之后隐式那一行是 auto 高的，
* 百分比没有可算的基准，浏览器就当没写——于是 148×563 那张药水瓶按宽高比撑到 122px 高，
* 从 32px 的格子里溢出去，压上下两行（创作者：「这个药水爆了」）。
*/
.rf-art {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 20px;
line-height: 1;
}
.rf-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rf-tx { flex: 1; min-width: 0; }
.rf-name {
font-size: var(--fs-s);
font-weight: 700;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rf-use { margin-top: 1px; font-size: var(--fs-xs); color: var(--ink-soft); }
.rf-qty {
flex: none;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--ink-soft);
}
/* 成交那颗在这一行里只占自己那一小截（.btn 默认的身板是「占满一整行」） */
.rf-item > .btn {
flex: none;
width: auto;
padding: 5px 12px 6px;
font-size: var(--fs-s);
letter-spacing: 0.06em;
text-align: center;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 5px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 560px) {
/* 窄屏上三格并排要挤一挤：竖条窄一点、字小一号 */
.bed-row { gap: var(--sp-2); }
.bed { min-height: 164px; padding: var(--sp-2) var(--sp-1) var(--sp-3); }
.bed-art { font-size: 24px; }
.bed-name { font-size: var(--fs-xs); }
.bed-act { font-size: 10px; letter-spacing: 0.06em; }
}
/* ---------- 温室那套皮（深绿半透明） ---------- */
/*
* 用在种植箱里挑种子那一张（openSheet 的 skin: 'green'）。
* 挑一样按进土里，不该摊一张奶油色的羊皮纸——那看着像在书桌上填表格。
* 字一律走暖白：底子深了墨色就看不见，和屋里那些牌子同一套处理。
*/
.sheet.green {
background:
radial-gradient(80% 50% at 14% 4%, rgba(232, 240, 224, 0.1), transparent 62%),
linear-gradient(180deg, rgba(38, 58, 40, 0.94), rgba(22, 36, 26, 0.96));
border: 1px solid rgba(158, 200, 146, 0.34);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(220, 240, 214, 0.08);
--fg: var(--cine-text);
--fg-dim: var(--cine-dim);
--fg-accent: var(--cine-gold);
color: var(--cine-text);
}
.sheet.green .sheet-head {
border-bottom-color: rgba(158, 200, 146, 0.42);
box-shadow: 0 1px 0 rgba(158, 200, 146, 0.16);
}
.sheet.green .sheet-head h2 { color: #eef6e6; }
.sheet.green .tiny { color: #b6d6a4; }
/* ---------- 钓鱼出岔子那套皮（暗红） ---------- */
/*
* 用在钓鱼「出了点岔子」那一张（openSheet 的 skin: 'red'，见 ui/fishing.js 的 showMishap）。
*
* 勾到手、晒中暑、被拽了个趔趄、底下有东西看了你一眼——这一张是**掉了血**的。
* 摊一张奶油色的纸来说这件事太轻了，抬眼得像那么回事，所以换一身暗红：
* 和深绿那套同一个路子（半透明深底 + 暖白的字 + 一道同色的描边），
* 只是把绿换成血——比正红暗一档，是"疼过一下"，不是警示牌。
*
* 字色照旧走 cine 那三档：底子深了，墨色（--ink / --ink-soft）根本看不见。
*/
.sheet.red {
background:
radial-gradient(80% 50% at 14% 4%, rgba(255, 224, 212, 0.1), transparent 62%),
linear-gradient(180deg, rgba(74, 26, 22, 0.95), rgba(42, 13, 11, 0.97));
border: 1px solid rgba(206, 112, 90, 0.36);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 214, 198, 0.08);
--fg: var(--cine-text);
--fg-dim: var(--cine-dim);
--fg-accent: var(--cine-gold);
color: var(--cine-text);
}
.sheet.red .sheet-head {
border-bottom-color: rgba(206, 112, 90, 0.44);
box-shadow: 0 1px 0 rgba(206, 112, 90, 0.18);
}
.sheet.red .sheet-head h2 { color: #f7ded3; }
.sheet.red .tiny { color: #dcab9c; }
/* 健康那一行是这张纸上唯一要盯的数——给它一档血红，别混在灰字里 */
.sheet.red .small.muted { color: #e8a794; }
/*
* 种子方格：和背包里那一排格子同一套排法（自动铺开的网格、方块、居中），
* 只是底色换成土绿——两边看着是「同一类东西」，玩家不用重新学怎么点。
*/
.seed-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: var(--sp-2);
}
.seed-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
min-height: 108px;
padding: var(--sp-2) 5px var(--sp-3);
font-family: var(--font-body);
text-align: center;
color: var(--cine-text);
background: rgba(30, 48, 32, 0.68);
border: 1px solid rgba(158, 200, 146, 0.26);
border-bottom-width: 3px;
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(220, 240, 214, 0.06);
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.seed-tile:hover {
background: rgba(48, 76, 50, 0.8);
border-color: rgba(182, 214, 164, 0.58);
transform: translateY(-2px);
}
.seed-tile:active { transform: translateY(0) scale(0.98); }
/*
* 【一键播种】那张纸：点一下种子格是**选中**，不是马上种（底下【播种】才落地）。
* 选中态要比 hover 更实一档，不然看不出"我挑了哪一颗"：底色抬亮、描边换亮绿、
* 外面再套一圈光，右上角点一颗小圆当记号。
*/
.seed-tile { position: relative; }
.seed-tile.on {
background: rgba(66, 106, 64, 0.94);
border-color: rgba(206, 236, 186, 0.92);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(220, 240, 214, 0.14), 0 0 0 2px rgba(178, 214, 164, 0.34);
transform: translateY(-2px);
}
.seed-tile.on::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #d6eeb8;
box-shadow: 0 0 8px rgba(190, 236, 160, 0.85);
}
.seed-tile .st-art { font-size: 26px; line-height: 1.4; }
/* 同 .bed-art-img：种子现在还是「一小包籽」那种 emoji，但哪天配了图也得摆得下 */
.seed-tile .st-art-img {
display: block;
height: 38px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.seed-tile .st-name {
font-weight: 700;
line-height: 1.25;
/* 名字长的（曼德拉草籽）自己缩一号，不撑开格子 */
font-size: clamp(12px, 3.4vw, 14px);
overflow-wrap: break-word;
}
/* 种下去长成什么、要几夜——和背包格子里那行小字同一个位置 */
.seed-tile .st-info {
font-family: var(--font-hand);
font-size: 10px;
line-height: 1.3;
color: #b6d6a4;
}
.seed-tile .st-n {
margin-top: 3px;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--cine-gold);
}
/*
* 「手里的种子」那条小账。
* 跟三格土、挑种子那张同属温室那一套：深绿半透明、暖白字，
* 所以整屏看上去是一件事（都在土里），而不是「照片 + 一张纸」拼起来的。
*/
.seed-strip {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-2) var(--sp-3);
padding: var(--sp-2) var(--sp-3) var(--sp-3);
color: var(--cine-text);
background: rgba(20, 34, 22, 0.6);
border: 1px solid rgba(158, 200, 146, 0.24);
border-radius: var(--r);
}
.seed-strip .ss-label {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.22em;
color: var(--cine-dim);
}
.seed-strip .ss-item { display: inline-flex; align-items: baseline; gap: 4px; }
.seed-strip .ss-name { font-size: var(--fs-s); }
.seed-strip .ss-n {
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--cine-gold);
}
.seed-strip .ss-empty { font-size: var(--fs-s); color: var(--cine-dim); }
/* ============================================================
10 · 开场：录取通知书飘入
============================================================ */
.title-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
padding-top: var(--sp-5);
}
/* 游戏名：压在礼堂上方的一行金字 */
.game-title { text-align: center; animation: rise 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.game-title .zh {
font-size: var(--fs-2xl);
letter-spacing: 0.12em;
color: #fff7e8;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.95), 0 0 40px rgba(224, 178, 100, 0.35);
line-height: 1.3;
}
/* 第二行是同一条名字的后半句：收小一号，字距放松一点 */
.game-title .zh-sub {
font-size: var(--fs-xl);
letter-spacing: 0.16em;
margin-top: 2px;
}
.game-title .en {
margin-top: 6px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.34em;
color: var(--cine-gold);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.game-title .rule {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
margin-top: var(--sp-3);
color: var(--cine-gold);
opacity: 0.8;
}
.game-title .rule::before,
.game-title .rule::after {
content: '';
width: 46px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor);
}
.game-title .rule::after { background: linear-gradient(90deg, currentColor, transparent); }
.game-title .rule i { font-style: normal; font-size: 10px; letter-spacing: 0.2em; }
.title-note {
font-size: var(--fs-s);
line-height: 1.9;
color: var(--cine-dim);
margin: 0;
text-align: center;
max-width: 32rem;
}
/* 一封信：比别的纸更亮、会飞进来、落定后微微一歪 */
.letter {
position: relative;
width: 100%;
max-width: 540px;
max-height: min(58dvh, 620px);
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(80% 50% at 15% 4%, rgba(255, 255, 255, 0.7), transparent 62%),
radial-gradient(120% 90% at 50% 105%, rgba(140, 47, 47, 0.07), transparent 70%),
linear-gradient(180deg, #fdf7ea, #f0e3c6);
border: 1px solid var(--paper-3);
border-bottom-color: rgba(64, 48, 31, 0.45);
border-radius: var(--r);
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.62), 0 2px 0 var(--paper-3);
padding: var(--sp-5) var(--sp-5) var(--sp-6);
color: var(--ink);
text-shadow: none;
/* 先飞进来落定，然后一直极轻微地飘着——「飘过来」这件事得留在后劲里 */
animation:
letterFly 1.5s cubic-bezier(0.2, 0.86, 0.22, 1) both,
letterDrift 7.5s 1.6s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.letter { animation: rise 0.5s ease both; }
}
/* 信纸的红框 */
.letter::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(140, 47, 47, 0.22);
pointer-events: none;
}
.crest { position: relative; display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.crest svg { width: 74px; height: 86px; }
.letter-head {
position: relative;
text-align: center;
padding-bottom: var(--sp-3);
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--paper-3);
}
.letter-school {
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.18em;
color: var(--red);
text-transform: uppercase;
line-height: 1.6;
}
.letter-motto {
margin-top: var(--sp-2);
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--ink-soft);
}
.letter-body { position: relative; }
.letter-body p { margin: 0 0 var(--sp-4); }
.letter-salutation { font-size: var(--fs-m); }
/* 信有两页：翻页只换信里的内容，信纸本身不重来 */
.letter-page[hidden] { display: none; }
/* 动效只在真正翻页时播（开场那一下不能跟着晃，那时信还在飞） */
.letter-page.turning { animation: pageTurn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* 附页是张表，比正文长，给它多一点高度 */
.letter.page-two { max-height: min(70dvh, 700px); }
/* 附页的抬头：一行小字，说明这是随信附上的那张表 */
.letter-attach {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--red);
text-transform: uppercase;
padding-bottom: var(--sp-3);
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--paper-3);
}
/* 页码：信脚的一行小字 + 两个小点 */
.letter-pager {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
margin-top: var(--sp-5);
padding-top: var(--sp-3);
border-top: 1px solid var(--paper-3);
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--ink-soft);
}
.letter-pager .dots { display: flex; gap: 5px; }
.letter-pager .dots i {
width: 6px; height: 6px;
border: 1px solid rgba(140, 47, 47, 0.45);
border-radius: 50%;
}
.letter-pager .dots i.on { background: var(--red); border-color: var(--red); }
/* 姓名：写在信里的一条线上 */
/*
* 通知书上的那个名字。
*
* 从前这儿是个输入框（名字在信上现填）；现在名字在**登记表**第 1 页就定了，
* 通知书只把它印出来——所以下面那几条 input 的样式撤了，只留下墨迹本身。
*/
.name-slot {
display: inline-block;
min-width: 6em;
font-family: var(--font-hand);
font-size: var(--fs-l);
color: var(--red);
text-align: center;
letter-spacing: 0.06em;
}
.name-slot.empty { color: var(--ink-soft); font-size: var(--fs-s); letter-spacing: 0.1em; }
.letter-sign { margin-top: var(--sp-5); padding-right: 56px; text-align: right; position: relative; }
.letter-sign .who { font-family: var(--font-hand); font-size: var(--fs-l); color: var(--ink); }
.letter-sign .title { font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 0.1em; }
/* 火漆 */
.seal {
position: absolute;
right: 0;
bottom: -18px;
width: 52px; height: 52px;
border-radius: 50%;
background: radial-gradient(circle at 36% 32%, #a53a3a, var(--red) 58%, #6d2222);
box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(64, 48, 31, 0.3);
display: grid;
place-items: center;
font-family: var(--font-hand);
font-size: 19px;
color: #f6e3d8;
transform: rotate(-11deg);
}
/* ---------- 属性分配（信里的一张表） ---------- */
.attr-table { position: relative; }
.attr-row {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) 0;
border-bottom: 1px dotted var(--paper-3);
}
.attr-row:last-child { border-bottom: none; }
.attr-name { flex: none; width: 5.4em; }
.attr-name b { font-size: var(--fs-m); }
.attr-info { flex: 1; min-width: 0; }
.attr-info .blurb { font-size: var(--fs-s); color: var(--ink); }
.attr-info .power { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.roll-row {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.roll-row .grow { flex: 1; min-width: 0; }
.roll-row .btn { width: auto; flex: none; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-s); }
.base-note {
display: block;
margin-top: 4px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button {
width: 30px; height: 30px;
display: grid; place-items: center;
font-size: var(--fs-m);
font-family: var(--font-body);
line-height: 1;
color: var(--ink);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--r);
cursor: pointer;
transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background 0.12s ease;
}
.stepper button:hover:not(:disabled) { background: var(--bright); border-color: var(--ink-soft); }
.stepper button:active:not(:disabled) { transform: scale(0.92); }
.stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper .val {
min-width: 1.6em;
text-align: center;
font-family: var(--font-hand);
font-size: var(--fs-l);
}
.points-left {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
background: rgba(140, 47, 47, 0.06);
border: 1px solid rgba(140, 47, 47, 0.22);
border-radius: var(--r);
margin-bottom: var(--sp-3);
}
.points-left .n { font-family: var(--font-hand); font-size: var(--fs-xl); color: var(--red); }
.points-left.ready { border-color: rgba(85, 101, 74, 0.4); background: rgba(85, 101, 74, 0.08); }
.points-left.ready .n { color: var(--leaf); }
/* ============================================================
11 · 飘字 / 提示 / 粒子
============================================================ */
.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.floater {
position: absolute;
font-family: var(--font-hand);
font-size: var(--fs-l);
color: var(--cine-red);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.35);
animation: floatup 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
white-space: nowrap;
}
.floater.good { color: #a8c08c; }
/* 主线里时间走过去了一天：金字，和好感/风头那两档分开——它是日历在动，不是得失 */
.floater.time { color: var(--cine-gold); }
/* 掉血那一笔：跟血条同一个深红。纸上那道套印红压在照片上不够沉，会飘 */
.floater.bad { color: var(--bar-hp); }
/* 提示挂在顶栏下面：对话框占着下半屏，别互相挤 */
.toast {
position: fixed;
left: 50%;
top: calc(max(var(--hud-h, 0px), env(safe-area-inset-top)) + var(--sp-3));
transform: translateX(-50%);
max-width: min(90vw, 420px);
background: rgba(18, 13, 9, 0.94);
color: var(--cine-text);
border: 1px solid var(--glass-line);
font-size: var(--fs-s);
line-height: 1.6;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
z-index: 70;
animation: toastIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast[hidden] { display: none; }
.specks { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
/* 「他在想」：等待回话时的三个墨水点 */
.vn-busy {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--cine-dim);
}
.vn-busy[hidden] { display: none; }
.vn-busy .tx { display: inline-block; }
.vn-busy .dots { display: inline-flex; gap: 4px; }
.vn-busy i {
width: 5px; height: 5px; border-radius: 50%;
background: var(--cine-dim);
animation: blot 1s ease-in-out infinite;
}
.vn-busy i:nth-child(2) { animation-delay: 0.15s; }
.vn-busy i:nth-child(3) { animation-delay: 0.3s; }
/* ============================================================
12 · 动效
============================================================ */
/* 翻一页：像把纸揭起来换一面 */
@keyframes pageTurn {
from { opacity: 0; transform: translateY(8px) rotate(-0.25deg); }
to { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes boxGrow {
from { transform: translateY(10px); }
to { transform: none; }
}
@keyframes lineIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes choiceIn {
from { opacity: 0; transform: rotate(var(--tilt)) translateY(12px); }
to { opacity: 1; transform: rotate(var(--tilt)) translateY(0); }
}
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes floatup {
0% { opacity: 0; transform: translateY(6px) scale(0.85); }
22% { opacity: 1; transform: translateY(-2px) scale(1.1); }
100% { opacity: 0; transform: translateY(-42px) scale(1); }
}
@keyframes blot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes hintPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
/* 落定之后的余韵：极小的上下浮动 + 一点点倾角变化 */
@keyframes letterDrift {
from { transform: translate3d(0, 0, 0) rotate(-0.5deg); }
to { transform: translate3d(0, -6px, 0) rotate(0.35deg); }
}
/* 录取通知书：从画面右上角飞进来，落定前微微一晃 */
@keyframes letterFly {
0% { opacity: 0; transform: translate3d(64vw, -78vh, 0) rotate(30deg) scale(0.5); }
52% { opacity: 1; transform: translate3d(-1.6%, 1.6%, 0) rotate(-3.2deg) scale(1.04); }
68% { transform: translate3d(0, -0.8%, 0) rotate(-0.2deg) scale(1); }
82% { transform: translate3d(0, 0.3%, 0) rotate(-0.9deg) scale(1.005); }
100% { transform: translate3d(0, 0, 0) rotate(-0.5deg) scale(1); }
}
/* 分级屏震：强度由 --shake 传入（0.5 是小失误，1 是炸锅/被撞见） */
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(calc(-5px * var(--shake, 1))) rotate(calc(-0.25deg * var(--shake, 1))); }
40% { transform: translateX(calc(4px * var(--shake, 1))) rotate(calc(0.2deg * var(--shake, 1))); }
60% { transform: translateX(calc(-3px * var(--shake, 1))); }
80% { transform: translateX(calc(2px * var(--shake, 1))); }
}
.shake { animation: shake 0.36s ease both; }
@keyframes punch { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
.punch { animation: punch 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* ============================================================
13 · 移动端
============================================================ */
@media (max-width: 560px) {
:root { --fs-2xl: 30px; --fs-xl: 23px; }
.app { padding: 0 var(--sp-3); }
.hud { margin: 0 calc(var(--sp-3) * -1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
.tray { margin: 0 calc(var(--sp-3) * -1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
.tray .btn { flex: 1 1 100%; min-width: 0; }
.letter { padding: var(--sp-4) var(--sp-4) var(--sp-5); max-height: 54dvh; }
.title-wrap { padding-top: var(--sp-4); gap: var(--sp-3); }
.attr-row { gap: var(--sp-2); }
.attr-name { width: 4.6em; }
.attr-info .power { display: none; }
.letter-sign { padding-right: 0; text-align: left; }
.seal { right: auto; left: 0; bottom: -20px; width: 46px; height: 46px; font-size: 17px; }
}
/* ============================================================
开场那封信：压紧一点
目标只有一个——第二页那张评定表不用滚就能看全。
============================================================ */
.letter {
padding: var(--sp-5) var(--sp-5) var(--sp-5);
max-height: min(78dvh, 800px);
}
.letter-head { padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
.letter .crest { margin-bottom: var(--sp-2); }
.letter .crest svg { width: 58px; height: 68px; }
.letter-school { font-size: var(--fs-xs); line-height: 1.5; }
.letter-motto { margin-top: 3px; }
/* 正文段落之间的空档收一半，整封信读起来是一整块，不是散开的几段 */
.letter-body p { margin: 0 0 var(--sp-3); }
.letter-salutation { margin-bottom: var(--sp-2); }
.letter-sign { margin-top: var(--sp-4); }
/* 附页那一行小标 */
.letter-attach { padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
/* 掷点那一行 + 剩余点数条，都压薄 */
.roll-row { margin-bottom: var(--sp-1); }
.points-left { padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.points-left .n { font-size: var(--fs-l); }
/* 属性行：说明与效果并成一行小字，整行压到两行高 */
.attr-row { padding: var(--sp-2) 0; gap: var(--sp-2); }
.attr-name { width: 4.4em; }
.attr-name b { font-size: var(--fs-s); }
.attr-info .blurb { font-size: var(--fs-xs); line-height: 1.5; }
.attr-info .power { font-size: 11px; line-height: 1.45; display: block; }
.attr-info .base-note { margin-top: 1px; font-size: 11px; }
.base-note { font-size: 11px; }
.stepper button { width: 26px; height: 26px; }
.stepper .val { min-width: 1.4em; font-size: var(--fs-m); }
.letter-pager { margin-top: var(--sp-3); padding-top: var(--sp-2); }
/* ============================================================
数值变化要看得清
加一点 / 重掷时数字会强调一下——0.7 秒，够读完，不拖沓。
============================================================ */
@keyframes valBump {
0% { transform: scale(1); color: var(--red); }
18% { transform: scale(1.28); color: var(--red); }
60% { transform: scale(1.1); color: var(--red); }
100% { transform: scale(1); color: var(--ink); }
}
.stepper .val { display: inline-block; }
.stepper .val.bumped { animation: valBump 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* 按钮按下去的那一下也放慢些，别一闪就没 */
.punch { animation-duration: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.stepper .val.bumped { animation: none; color: var(--red); }
}
/* 附页（评定表）比正文长：给它更大的高度上限，争取一屏看完不用滚 */
.letter.page-two {
max-height: min(88dvh, 900px);
padding-bottom: var(--sp-4);
}
@media (max-width: 560px) {
.letter { padding: var(--sp-4) var(--sp-4); max-height: min(84dvh, 860px); }
.letter.page-two { max-height: min(88dvh, 900px); }
.attr-row { padding: 6px 0; }
.attr-name { width: 4em; }
}
/* ============================================================
图书馆的书
一排摆整齐，书影只有一个小图标那么大；
书名压在画面上，给足对比度——看得见才算数。
书本身不上纸，只有「阅读」那枚按钮是羊皮纸。
============================================================ */
.shelf {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-3) var(--sp-2);
align-items: stretch;
justify-items: center;
margin-top: var(--sp-2);
}
.book {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
width: 100%;
padding: 0;
background: none;
border: none;
box-shadow: none;
height: 100%;
}
/* 书影：一个很小的固定台面，图在里面等比缩，绝不外溢、不歪 */
.book-figure {
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.book-figure img {
max-height: 38px;
max-width: 100%;
width: auto;
height: auto;
display: block;
object-fit: contain;
transform: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
/* 书名：亮字 + 厚影，压在照片上也读得清楚 */
.book-title {
font-size: var(--fs-m);
line-height: 1.35;
color: #fffdf6;
text-shadow:
0 0 3px rgba(0, 0, 0, 1),
0 1px 2px rgba(0, 0, 0, 1),
0 2px 10px rgba(0, 0, 0, 0.95);
}
.book-title-en {
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.03em;
line-height: 1.35;
color: var(--cine-gold);
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
}
.book-meta {
margin: 3px 0 var(--sp-2);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
color: var(--cine-dim);
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
}
/* 「阅读」：全卡唯一的一枚羊皮纸，小方块按钮 */
.book .btn {
margin-top: auto;
width: auto;
min-width: 4.4em;
text-align: center;
padding: 5px var(--sp-3);
font-size: var(--fs-s);
}
@media (max-width: 560px) {
.shelf { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-1); }
.book-title { font-size: var(--fs-s); }
.book-title-en { font-size: 10px; }
}
/* ============================================================
对话区顶上的状态栏
只说三件事：你是谁、什么时候、在哪儿。不报演的是哪一幕。
============================================================ */
.vn-status { min-width: 0; }
.vn-status .row1 {
display: flex;
align-items: baseline;
gap: var(--sp-2);
flex-wrap: wrap;
}
.vn-status .nm {
font-size: var(--fs-xl);
font-weight: 700;
line-height: 1.25;
color: #fff7e8;
letter-spacing: 0.04em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 18px rgba(0, 0, 0, 0.8);
}
/* 日期跟着名字排在同一行 */
.vn-status .dt {
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.06em;
color: var(--cine-gold);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
}
/* 第二行：几年级 · 学院 */
.vn-status .row2 {
margin-top: 2px;
font-size: var(--fs-s);
letter-spacing: 0.14em;
color: var(--cine-text);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85);
}
/* 第三行：地点，居中 */
.vn-status .row3 {
margin-top: 6px;
text-align: center;
font-size: var(--fs-s);
letter-spacing: 0.22em;
color: #fff6e4;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.8);
}
/*
* 顶栏里的学院。
* flex + wrap：学院名后面挂着「回公共休息室」那颗按钮，窄屏上两个词未必排得下——
* 排不下就让按钮自己掉到下一行，别去挤右边那行钱和两根条（那些更要紧）。
*/
.hud-house {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 5px;
margin-top: 2px;
font-size: var(--fs-xs);
letter-spacing: 0.22em;
line-height: 1.4;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9);
}
/*
* 「回公共休息室」——就贴在学院名后面的一颗小按钮。
*
* 细：字号比学院名再小一号、只有一行那么高，看着像学院那行长出来的一部分，
* 不是状态栏里多出来的一颗大按钮。
* 颜色不写任何具体色值：字与边都走 currentColor，学院色从上面那行继承，
* 四家各自一种，将来调色只动 data/houses.js。
*
* 底色必须是浅的：学院色取的都是深调（压羊皮纸才看得清那套），
* 直接落在夜景照片上就等于把深字放进暗背景，所以垫一层纸色，
* 顺带把继承下来的那圈暗影关掉——纸色块上留暗影会脏。
*/
.hud-room {
display: inline-block;
padding: 0 5px;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.06em;
line-height: 1.6;
vertical-align: 1px;
white-space: nowrap;
color: inherit;
background: rgba(255, 246, 228, 0.9);
border: 1px solid currentColor;
border-radius: 2px;
text-shadow: none;
cursor: pointer;
transition: background 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-room:hover { background: #fffaee; }
.hud-room:active { transform: scale(0.96); }
/* ---------- 分院那四个选项：整张纸用学院色包边 ---------- */
.vn-choice.house {
border: 2px solid var(--house, var(--red));
box-shadow:
0 3px 0 var(--house, rgba(50, 37, 24, 0.42)),
0 12px 26px rgba(0, 0, 0, 0.52),
inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.vn-choice.house:hover {
box-shadow:
0 6px 0 var(--house, rgba(50, 37, 24, 0.34)),
0 16px 30px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* 中文名和英文名排在同一行 */
.vn-choice .lbl .en {
margin-left: 8px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--house, var(--ink-soft));
opacity: 0.95;
}
.vn-choice.house .num {
color: var(--house, var(--red));
border-color: var(--house, rgba(140, 47, 47, 0.42));
}
.vn-choice.house .lbl { color: var(--house, var(--ink)); font-weight: 700; }
/* ============================================================
14 · 两个门牌：手抄本 / 背包
------------------------------------------------------------
「图在上，中文在中，最小号英文在下」——它们不是普通动作按钮，
是挂在画面上的两块牌子，所以要一眼认得出是哪个。
其他按钮仍然一律只有一行字。
不垫羊皮纸：透明底、无边框，图直接从照片上浮出来。
摆在纸上时字取墨色；摆在照片上（.float）字取暖白并加暗影。
============================================================ */
.btn.paper-entry {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: auto;
min-width: 0;
flex: 0 0 auto;
padding: 4px var(--sp-2) 5px;
text-align: center;
line-height: 1.25;
}
/*
* 透明底：不垫羊皮纸，图直接从底下的画面浮出来。
* 但要放过 .ghost —— 对话层那排小按钮用的是墨玻璃底（不是羊皮纸），
* 那是为了在照片上读得清，别一起抹掉。
*/
.btn.paper-entry:not(.ghost) {
background: none;
border: 0;
box-shadow: none;
}
/* 底部托盘那条规则给所有按钮设了最小宽度，门牌不适用 */
.tray .btn.paper-entry { min-width: 0; }
.btn.paper-entry:not(.ghost):hover,
.btn.paper-entry:not(.ghost):active {
background: none;
border: 0;
box-shadow: none;
transform: none;
}
.paper-entry .pe-art {
display: block;
width: 34px;
height: 34px;
object-fit: contain;
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 校徽那种内联 SVG（还没分院时顶替学院徽章） */
.paper-entry .pe-art-vec {
display: flex;
align-items: center;
justify-content: center;
}
.paper-entry .pe-art-vec > span,
.paper-entry .pe-art-vec svg { display: block; width: 100%; height: 100%; }
.paper-entry .pe-label { display: block; }
.paper-entry .pe-zh {
display: block;
font-size: var(--fs-s);
font-weight: 700;
letter-spacing: 0.12em;
}
.paper-entry .pe-en {
display: block;
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
opacity: 0.72;
}
.paper-entry:hover .pe-art { transform: translateY(-1px) scale(1.05); }
/*
* 手抄本最底下那一排（相片本 · 图鉴 · 信件夹，见 ui/screens-meta.js）：
* 图鉴（.big）放大一档——它是眼下真能翻的那本，摆在正中；
* 相片本与信件夹（.soon）先锁着：图压暗、蒙一层灰。
*/
.btn.paper-entry.big { padding: 4px var(--sp-3) 6px; }
.btn.paper-entry.big .pe-art { width: 52px; height: 52px; }
.btn.paper-entry.big .pe-zh { font-size: var(--fs-m); }
.btn.paper-entry.soon .pe-art { opacity: 0.45; filter: grayscale(0.85); }
.btn.paper-entry.soon .pe-zh,
.btn.paper-entry.soon .pe-en { opacity: 0.5; }
.btn.paper-entry.soon:hover .pe-art { transform: none; }
/* ---------- 浮在照片上：大图标 + 暖白字带暗影 ---------- */
.btn.paper-entry.float {
gap: 1px;
padding: 0 var(--sp-2);
color: #fdf3e0;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.8);
}
.btn.paper-entry.float .pe-art {
width: 74px;
height: 74px;
/* 图标底下要压得住照片：一圈柔和的暗影，不是描边 */
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
}
.btn.paper-entry.float .pe-zh {
font-size: var(--fs-l);
letter-spacing: 0.16em;
}
.btn.paper-entry.float .pe-en {
font-size: var(--fs-s);
letter-spacing: 0.12em;
opacity: 0.9;
}
.btn.paper-entry.float:hover .pe-art {
transform: translateY(-2px) scale(1.06);
filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.8));
}
/* ---------- 这一行门牌：左「手抄本」、右「背包」，中间可能挂一幅画 ---------- */
.entry-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-4);
width: 100%;
padding: 0 var(--sp-2) var(--sp-2);
}
/* 在底部托盘里时整行占满，把主按钮挤到下一行去 */
.tray .entry-row { flex: 1 1 100%; }
/*
* 这一行现在**四颗一样重**：门 / 通讯 / 背包 / 手抄本（创作者 2026-09-29 定的顺序）。
*
* 从前门摆在正中，所以用过一段网格来压中线；门挪到最左之后那条规矩就不需要了——
* 回到普通的 flex（space-between），四颗均匀铺开、下沿对齐（align-items: flex-end）。
* 谁要是再想给某颗单独加权，先想清楚「整齐」这件事：这一排读起来该是一条带子。
*/
/* 门也走同一副尺码（-2px 只作极轻的强调）：这一排要的是整齐，不是主次 */
.btn.paper-entry.gate .pe-art {
width: 74px;
height: 74px;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}
.btn.paper-entry.gate .pe-zh { font-size: var(--fs-m); }
.btn.paper-entry.gate .pe-en { font-size: 10px; }
.btn.paper-entry.gate:hover .pe-art {
transform: translateY(-3px) scale(1.05);
filter: drop-shadow(0 7px 18px rgba(0, 0, 0, 0.85));
}
/* 对话层那排小按钮：图和字并排，英文收掉（位置太挤） */
.btn.paper-entry.compact {
flex-direction: row;
align-items: center;
gap: 6px;
padding: 4px var(--sp-3) 4px 9px;
}
.btn.paper-entry.compact .pe-art,
.btn.paper-entry.compact .pe-art-vec { width: 20px; height: 20px; }
.btn.paper-entry.compact .pe-art-vec > span,
.btn.paper-entry.compact .pe-art-vec svg { width: 20px; height: 20px; }
.btn.paper-entry.compact .pe-art { filter: none; }
.btn.paper-entry.compact .pe-zh { font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.08em; }
/* ============================================================
15 · 背包
============================================================ */
/*
* 成绩单：一门课一行。
* 左边是课名，右边是那个字母，字母后面缀着它的英文原话。
* 字母用红套印——一张成绩单上最该被一眼看到的就是它。
*/
.grade-mark {
flex: none;
min-width: 1.6em;
text-align: center;
font-family: var(--font-hand);
font-size: var(--fs-l);
line-height: 1.1;
letter-spacing: 0.04em;
color: var(--red);
}
/* 难看的那两档压暗一点：D 和 T 不该和 O 一样亮 */
.grade-mark.low { color: var(--ink-soft); }
.grade-word {
flex: none;
max-width: 46%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--ink-soft);
}
/* 钱袋：翻开包第一眼看见的那一行，三档各是各的颜色 */
.bag-purse {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.bag-purse .bp-label {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--ink-soft);
}
/* 顶上一排标签：点一下换一类，默认「全部」 */
.bag-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.tag {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 4px 10px 5px;
font-family: var(--font-body);
font-size: var(--fs-s);
color: var(--ink-soft);
background: rgba(255, 251, 240, 0.5);
border: 1px solid rgba(64, 48, 31, 0.28);
border-radius: var(--r);
cursor: pointer;
transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.tag .tag-zh { letter-spacing: 0.1em; }
.tag .tag-en {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
opacity: 0.66;
}
.tag .tag-n {
font-family: var(--font-hand);
font-size: var(--fs-xs);
color: var(--red);
opacity: 0.85;
}
.tag:hover { border-color: var(--red); color: var(--ink); }
.tag.on {
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #f0e2c6);
border-color: var(--red);
box-shadow: inset 0 0 0 1px rgba(140, 47, 47, 0.14), 0 2px 6px rgba(0, 0, 0, 0.16);
}
.tag.on .tag-zh { font-weight: 700; color: var(--red); }
/*
* 中英并排的一行（.bag-name）原先是手抄本里那张「配方本」清单在用。
* 配方本被图鉴取代之后没人引用了，这一段也就跟着删掉——
* 需要双语并排的地方走 .item-head / .lt-zh+.lt-en 那两套。
*/
/* ============================================================
16 · 手抄本：题花与中英双语的小标题
============================================================ */
.ledger-top {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid rgba(64, 48, 31, 0.22);
/*
* 抬头是一张纸的最上面一行，它底下那几行（装备木牌、钱袋、标签）只要有一个
* 往外溢一点点，先被吃掉的准是这一行——随身坩埚那颗小图标就栽过一次
* （见 .wand-turn 那段）。这里把它抬到上面一层：从今往后，谁溢出谁自己收着，
* 抬头永远点得到。
*/
position: relative;
z-index: 1;
}
/* 图纸不裁切：给定高度、宽度跟着比例走，压在纸上像夹着的一张图 */
.ledger-art {
flex: 0 0 auto;
height: 58px;
width: auto;
max-width: 46%;
object-fit: contain;
transform: rotate(-1.4deg);
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
.ledger-top-tx { flex: 1 1 auto; min-width: 0; }
/*
* 校徽是内联 SVG（还没分院时用它顶替学院徽章）。
* 不能照抄上面那条 width:auto —— 内联 SVG 没有固有宽度，会被撑成 300×150。
* 这里按 74:86 的比例把方子钉死，怎么都不会满出去。
*/
.ledger-art-vec {
display: block;
width: 50px;
height: 58px;
}
.ledger-art-vec > span,
.ledger-art-vec svg { display: block; width: 100%; height: 100%; }
.lt-zh {
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--red);
}
.lt-en {
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.1em;
color: var(--fg-dim);
}
/* 带英文副标注的小标题 */
.chapter .ch-en {
flex: 0 0 auto;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.16em;
opacity: 0.55;
}
/* ---------- 窄屏：门牌收小一号，别把画面下半截吃掉 ---------- */
@media (max-width: 560px) {
.btn.paper-entry.float .pe-art { width: 56px; height: 56px; }
.btn.paper-entry.float .pe-zh { font-size: var(--fs-m); letter-spacing: 0.12em; }
.btn.paper-entry.float .pe-en { font-size: var(--fs-xs); }
.entry-row { padding: 0 0 var(--sp-1); gap: var(--sp-3); }
/* 窄屏那条「托盘按钮占满整行」的规则别把门牌也拉宽 */
.tray > .entry-row > .btn.paper-entry { flex: 0 0 auto; width: auto; }
/*
* 窄屏上门和别的门牌**同一副尺码**：它现在是这一排的第一颗，
* 单独大一档会把整条带子的上沿顶出一个包（创作者点过「崎岖」这个问题）。
* 英文也照挂——藏起来那一颗的标签就只剩一行，四颗的下沿会对不齐。
*/
.btn.paper-entry.gate .pe-art { width: 56px; height: 56px; }
.btn.paper-entry.gate .pe-zh { font-size: var(--fs-m); }
}
/* ============================================================
居中摊开的一张纸（手抄本 / 背包）
------------------------------------------------------------
和贴底抽屉的区别有两处，缺一不可：
1. 位置 —— 挂在画面正中，四边都留白（抽屉是贴着下沿往上长）；
2. 入场 —— 像一张纸被放下来（轻微缩小 + 淡入），
不是从画面外升上来（那就是「从地底下爬出来」的观感）。
============================================================ */
.panel-layer.centered {
align-items: center;
padding: var(--sp-6) var(--sp-4);
}
/* 100% 已经是「去掉四边留白之后」的高度，所以四边一定留得住 */
.panel-layer.centered .panel {
max-height: min(80vh, 100%);
animation: paperDrop 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 纸落下来：从略小、略高一点，落到原位 */
@keyframes paperDrop {
from { opacity: 0; transform: translateY(-10px) scale(0.975); }
to { opacity: 1; transform: none; }
}
/* 窄屏：抽屉那套规则会把圆角改成只留上面两个，居中时必须还原 */
@media (max-width: 560px) {
.panel-layer.centered { padding: var(--sp-5) var(--sp-3); }
.panel-layer.centered .panel {
max-width: none;
max-height: min(82vh, 100%);
border-radius: var(--r);
}
}
/* ============================================================
背包：一格一样东西
------------------------------------------------------------
方块偏长方形（竖的），里头从上到下：图标 / 名字 / 英文 / 数量，
四行全部居中。名字长的（曼德拉草籽）会缩字号，不让它把格子撑开。
============================================================ */
.bag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
gap: var(--sp-2);
padding: 2px;
}
.tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
/* 偏长方形：宽由网格定，高比宽多一点（图标那一条加高之后跟着抬高） */
min-height: 118px;
padding: var(--sp-2) 5px var(--sp-3);
font-family: var(--font-body);
color: var(--ink);
background:
radial-gradient(70% 50% at 50% 4%, rgba(255, 255, 255, 0.5), transparent 65%),
linear-gradient(180deg, #fbf4e4, #f0e3c7);
border: 1px solid rgba(64, 48, 31, 0.34);
border-bottom-color: rgba(64, 48, 31, 0.5);
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 2px 0 rgba(120, 96, 62, 0.42), 0 6px 14px rgba(0, 0, 0, 0.2);
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.14s ease, border-color 0.14s ease;
}
.tile:hover {
border-color: var(--red);
transform: translateY(-2px);
box-shadow: 0 4px 0 rgba(120, 96, 62, 0.36), 0 12px 22px rgba(0, 0, 0, 0.26);
}
.tile:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(120, 96, 62, 0.4); }
/*
* 图标：emoji 或图片都按同一个方台子摆。
* 高度留到 46px —— 草药那批图是 1:2 的细长株，太矮就缩成一根线，
* 宁可格子高一点，也别把标本压没。
*/
.tile-art {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
margin-bottom: 3px;
font-size: 26px;
line-height: 1;
}
.tile-art-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tile-zh {
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.02em;
text-align: center;
/* 名字长的（曼德拉草籽）自己缩一号，不撑开格子 */
font-size: clamp(12px, 3.4vw, 14px);
overflow-wrap: break-word;
}
.tile-en {
font-family: var(--font-hand);
font-size: 10px;
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--ink-soft);
text-align: center;
/* 一行放不下就截断，方块才整得齐 */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tile-n {
margin-top: 3px;
font-family: var(--font-hand);
font-size: var(--fs-s);
line-height: 1.2;
color: var(--red);
}
/*
* 魔药那一册格子上第三行小字：「这一味从哪儿来」（见 ui/codex.js 的 recipeSource）。
* 比英文名还小一号、压得更淡 —— 它是"多给的一条线索"，不该跟药名抢。
* 别的册不带这一行（那几册根本不给 source），格子一个像素都不动。
*/
.tile-src {
margin-top: 2px;
font-size: 9.5px;
line-height: 1.25;
letter-spacing: 0.02em;
color: rgba(125, 104, 73, 0.92);
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* 装备那一册那句「从哪儿来」比魔药那句长一截（「摩金夫人长袍店 5加隆」要 103 像素，
* 而格子那一条只有 57 像素宽），上面那条 nowrap 会把它截成"摩金夫人长…"。
* 这一册允许折两行，并且**先把两行的高度占住**：五格一律两行，不会有一格矮半截。
* （只挂在这一册上——别的册子的格子一个像素都不动。）
*/
.codex-grid.gear-grid .tile-src {
white-space: normal;
min-height: 2.5em;
line-height: 1.25;
word-break: break-all;
}
/*
* 神奇动物那一册：格子上写它出没在哪几处，最多四处名字（「石阵遗迹·沼泽·八眼巨蛛巢穴·独角兽深林」），
* 一行放不下，所以允许折三行，并且先把三行的高度占住——同一册里格子不会高一块矮一块。
* （鱼那册不给：它的出没只写「黑湖」「禁林」「黑湖·禁林」，一行够。）
*/
.codex-grid.src-multi .tile-src {
white-space: normal;
min-height: 3.75em;
line-height: 1.25;
word-break: break-all;
}
/* ============================================================
送礼：一样东西一行（名字 + 数量）
------------------------------------------------------------
和背包是同一张纸、同一个姿态，但**不放图标**：这一窗是为了
「一眼找到那样东西」，名字排成一列最好扫，图标反而占掉半格。
所以这里不套 .bag-grid / .tile，另起一条竖列的行。
============================================================ */
.gift-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.gift-head-tx { flex: 1 1 auto; min-width: 0; }
.gift-head .gh-zh {
font-weight: 700;
font-size: var(--fs-l);
letter-spacing: 0.02em;
color: var(--ink);
}
.gift-head .gh-note {
margin-top: 2px;
font-size: var(--fs-s);
color: var(--ink-soft);
}
/*
* 「从口袋里挑一样东西」那一列：只有名字与数量，不放图标。
* 不放图标是创作者定的——这一窗是为了「一眼找到那样东西」，
* 名字排成一列最好扫；图标占掉半格，反而要多看两眼。
*
* 送礼（ui/gift.js）与主线剧情里点【背包】（ui/story-screen.js）共用这一套，
* 所以类名不叫 gift-*：两件事本质上是同一个动作。
*/
.pick-list { display: flex; flex-direction: column; }
.pick-row {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
padding: 11px var(--sp-2);
font: inherit;
text-align: left;
color: var(--ink);
background: none;
border: none;
border-bottom: 1px dotted rgba(64, 48, 31, 0.22);
cursor: pointer;
transition: background 0.12s ease;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: rgba(140, 47, 47, 0.07); }
.pick-row:active { transform: translateY(1px); }
.pick-row .pick-name {
flex: 1 1 auto;
min-width: 0;
font-weight: 700;
overflow-wrap: anywhere;
}
.pick-row .pick-n {
flex: none;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--red);
}
/* ============================================================
互动：三行（触摸 / 相处 / 散步）
------------------------------------------------------------
和送礼同一张纸、同一个姿态：一行一样，名字靠左。
但这里比送礼多两件事：
· 名字底下那行小字（散步的代价）——所以一行是**上下两层**，不是左右并排；
· 按过的那一行要**看着就是灰的**。disabled 本身那个灰很难看清，
玩家会反复去戳；所以整行压暗、去掉 hover、名字划一道线，
小字换成「今天已经来过了」。
============================================================ */
.it-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.it-head-tx { flex: 1 1 auto; min-width: 0; }
.it-head .ih-zh {
font-weight: 700;
font-size: var(--fs-l);
letter-spacing: 0.02em;
color: var(--ink);
}
.it-head .ih-note {
margin-top: 2px;
font-size: var(--fs-s);
color: var(--ink-soft);
}
.it-list { display: flex; flex-direction: column; }
.it-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
padding: 12px var(--sp-2);
font: inherit;
text-align: left;
color: var(--ink);
background: none;
border: none;
border-bottom: 1px dotted rgba(64, 48, 31, 0.22);
cursor: pointer;
}
.it-row:last-child { border-bottom: none; }
.it-row:hover { background: rgba(140, 47, 47, 0.07); }
.it-row:active { transform: translateY(1px); }
.it-row .it-name {
font-weight: 700;
font-size: var(--fs-l);
letter-spacing: 0.04em;
}
.it-row .it-note {
font-family: var(--font-hand);
font-size: var(--fs-s);
line-height: 1.35;
color: var(--ink-soft);
}
/* 今天来过了：整行压暗，名字划一道，小字换成那一句 */
.it-row.used {
cursor: default;
color: var(--ink-soft);
opacity: 0.62;
}
.it-row.used:hover { background: none; }
.it-row.used:active { transform: none; }
.it-row.used .it-name {
font-weight: 600;
text-decoration: line-through;
text-decoration-color: rgba(64, 48, 31, 0.45);
text-decoration-thickness: 1px;
}
.it-row.used .it-note { font-style: italic; }
/* ---------- 点开一样东西：详情小纸 ---------- */
.item-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.item-art {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
font-size: 40px;
line-height: 1;
background: rgba(255, 251, 240, 0.6);
border: 1px solid var(--paper-3);
border-radius: var(--r);
}
.item-art-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-tx { min-width: 0; }
.item-zh {
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--red);
}
.item-en {
margin-top: 2px;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.08em;
color: var(--ink-soft);
}
/* 详情里那行英文副标注：跟在中文后面，小一号 */
.bag-sub-en {
margin-left: 6px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
color: var(--ink-soft);
}
/* 窄屏：格子收窄一档，仍是偏长方形 */
@media (max-width: 560px) {
.bag-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.tile { min-height: 104px; padding: 6px 4px 10px; }
.tile-art { height: 40px; font-size: 22px; }
.item-art { width: 54px; height: 54px; font-size: 34px; }
.codex-grid .tile { min-height: 122px; }
.codex-grid .tile-art { inset: 5px 3px 24px; }
.codex-art { width: 76px; height: 88px; }
}
/* ============================================================
17 · 图鉴：五册页签 + 标本格 + 详情
------------------------------------------------------------
壳子跟背包是一套（居中的一张纸 + 方格），差在两处：
1. 页签换成「册」，锁着的三册灰着、虚线边；
2. 格子里图是**标本**（铺在格子下半部），字浮在最上层，
底下垫一条半透明的纸——所以是「图后字前」那种图鉴读法。
============================================================ */
/* ---------- 五册页签 ---------- */
.codex-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.26);
}
.cx-tab {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 4px 10px 5px;
font-family: var(--font-body);
font-size: var(--fs-s);
color: var(--ink-soft);
background: rgba(255, 251, 240, 0.5);
border: 1px solid rgba(64, 48, 31, 0.28);
border-radius: var(--r);
cursor: pointer;
transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.cx-tab .cx-zh { letter-spacing: 0.1em; }
.cx-tab .cx-en {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
opacity: 0.66;
}
/* 点亮了几格 / 一共几格 */
.cx-tab .cx-n {
font-family: var(--font-hand);
font-size: var(--fs-xs);
color: var(--red);
opacity: 0.85;
}
.cx-tab:hover { border-color: var(--red); color: var(--ink); }
.cx-tab.on {
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #f0e2c6);
border-color: var(--red);
box-shadow: inset 0 0 0 1px rgba(140, 47, 47, 0.14), 0 2px 6px rgba(0, 0, 0, 0.16);
}
.cx-tab.on .cx-zh { font-weight: 700; color: var(--red); }
/* 锁着的三册：照样挂在门上，只是灰的、虚线边——看得见摸不着 */
.cx-tab.locked {
color: rgba(125, 104, 73, 0.6);
background: rgba(230, 213, 180, 0.28);
border-style: dashed;
border-color: rgba(64, 48, 31, 0.22);
cursor: not-allowed;
}
.cx-tab.locked:hover {
color: rgba(125, 104, 73, 0.72);
border-color: rgba(64, 48, 31, 0.3);
background: rgba(230, 213, 180, 0.3);
}
.cx-tab .cx-lock {
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.06em;
padding: 0 5px 1px;
border: 1px solid rgba(64, 48, 31, 0.24);
border-radius: 999px;
color: rgba(90, 72, 48, 0.78);
background: rgba(213, 189, 146, 0.34);
}
/* ---------- 标本格 ---------- */
.codex-grid .tile,
.codex-grid .tile.dark {
position: relative;
/* 字排在最下面，图从上面铺到字底下那点位置 */
justify-content: flex-end;
min-height: 136px;
padding: 6px 5px 7px;
overflow: hidden;
}
/* 图是标本：贴在格子底部，往上长；下面让出字的那一条 */
.codex-grid .tile-art {
position: absolute;
inset: 6px 5px 26px;
height: auto;
margin-bottom: 0;
/* 贴着底摆：根须留在纸上，头不被裁 */
align-items: flex-end;
}
/* 宽也别超格子：窄屏上细长株最容易顶出去 */
.codex-grid .tile-art img { max-width: 100%; max-height: 100%; }
/* 字在最上层，底下垫一条半透明的纸，压住图也读得清 */
.codex-grid .tile-zh,
.codex-grid .tile-en,
.codex-grid .tile-src {
position: relative;
z-index: 2;
background: rgba(251, 244, 228, 0.76);
border-radius: 2px;
padding: 0 4px;
box-shadow: 0 0 6px rgba(251, 244, 228, 0.7);
}
/* 没点亮的格子：虚线边 + 灰剪影，且没有点击反馈 */
.tile.dark {
cursor: default;
border-style: dashed;
border-color: rgba(64, 48, 31, 0.26);
box-shadow: none;
background:
repeating-linear-gradient(135deg, rgba(120, 96, 62, 0.05) 0 6px, rgba(120, 96, 62, 0) 6px 12px),
linear-gradient(180deg, #f4ead6, #e9dcbe);
}
.tile.dark:hover { transform: none; border-color: rgba(64, 48, 31, 0.26); box-shadow: none; }
.tile.dark .tile-art img { filter: brightness(0) opacity(0.2); }
.tile.dark .tile-zh,
.tile.dark .tile-en {
color: var(--ink-soft);
font-weight: 400;
opacity: 0.8;
}
/* 只有 emoji、没有真图的那些：不画假剪影（那看着像坏了），就留个问号 */
.tile.blank .tile-mark {
font-family: var(--font-hand);
font-size: 30px;
color: rgba(64, 48, 31, 0.3);
}
/* ---------- 详情纸上的图 ---------- */
.codex-head { align-items: flex-end; }
.codex-art {
width: 96px;
height: 108px;
/* 图贴底摆，名字那条线才不会把根须挤掉 */
align-items: flex-end;
}
.codex-art-img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* ============================================================
手抄本 · 温室那几格 / 属性那几个方框
============================================================ */
/*
* 【温室】那一格的底走**淡绿**——土里的事就用土的颜色。
* 它还是同一张纸（.card 的圆角、厚影、内边距都不动），只是把纸染成浅绿：
* 在几张米黄的纸中间，这一块一眼就认得出来是「地」。
* 合着的时候它整块收起来，只剩上面那行标题（见 .fold-head 那一套）。
*/
.card.beds-card {
background:
radial-gradient(80% 50% at 14% 4%, rgba(255, 255, 255, 0.6), transparent 62%),
linear-gradient(180deg, #eef5e4, #d8e7c8);
border-color: rgba(94, 124, 74, 0.42);
border-bottom-color: rgba(94, 124, 74, 0.55);
}
/*
* 属性：六个小方框横着排（五项天赋 + 运气）。
* 一格一列，名字在上、数在下——扫一眼就把这个人看全了。
* 窄屏也不折行：折成两行就不是「一眼看全」了，宁可把字收小一档。
*/
.attr-boxes,
.bed-boxes {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
}
.attr-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
padding: 6px 2px 5px;
border: 1px solid rgba(64, 48, 31, 0.3);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.42);
text-align: center;
}
.attr-box .ab-name {
font-size: 11px;
letter-spacing: 0.04em;
line-height: 1.25;
/* 名字留两行的高度：「黑魔法防御」这种五个字的会折成两行，
留白留匀了，六个数才排在同一条线上 */
min-height: 2.5em;
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.attr-box .ab-val {
font-family: var(--font-hand);
font-size: var(--fs-l);
line-height: 1;
color: var(--ink);
}
/* 运气那一枚多一行档位小字（顺遂 / 平常 / 背运）——分档用颜色，不用符号 */
.attr-box .ab-tag {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 1.2;
color: var(--ink-soft);
}
.attr-box.favoured .ab-val,
.attr-box.favoured .ab-tag { color: var(--red); }
.attr-box.jinxed .ab-val,
.attr-box.jinxed .ab-tag { color: var(--leaf); }
/* ============================================================
手抄本 · 【你的人格】与【记忆】两扇小门里的输入框
------------------------------------------------------------
都摊在纸面上：纸是米黄的，框就顺着纸走——比纸亮一点的底、细棕边，
聚焦时描一道红（和别的纸面控件一个脾气）。
============================================================ */
.profile-input {
display: block;
width: 100%;
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-body);
font-size: var(--fs-s);
line-height: 1.7;
color: var(--ink);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(64, 48, 31, 0.34);
border-radius: var(--r);
resize: vertical;
}
.profile-input:focus {
outline: none;
border-color: var(--red);
background: rgba(255, 255, 255, 0.72);
}
.profile-input::placeholder { color: rgba(64, 48, 31, 0.45); }
/* 温室那几格：一格一块土。长着东西的偏白底绿边、能收的描一道金；
**还塌着的那几格一律灰**——灰是「这儿还没轮到」，绿是「这块土在你手里」，
两种颜色各自说各自的话，不用再多写一个字。 */
.bed-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
padding: 6px 2px 5px;
border: 1px solid rgba(94, 124, 74, 0.42);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.44);
text-align: center;
}
.bed-box.shut {
border-color: rgba(64, 48, 31, 0.22);
background: rgba(120, 116, 104, 0.18);
}
.bed-box .bb-no {
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(78, 106, 60, 0.95);
}
.bed-box.shut .bb-no { color: #9a948a; }
.bed-box .bb-val {
font-size: 12px;
line-height: 1.25;
/* 和属性那排一样留两行的高度：种子名有长有短，留白了底下的状态才对得齐 */
min-height: 2.5em;
color: var(--ink);
overflow-wrap: anywhere;
}
.bed-box.shut .bb-val { color: #8a8478; }
.bed-box .bb-tag {
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.bed-box.ripe { border-color: rgba(224, 178, 100, 0.85); }
.bed-box.ripe .bb-tag { color: var(--red); }
/*
* 记忆那一张**大框**（创作者 2026-09-28 改的版式）：所有摘要一条一行装在这一个框里，
* 底下一颗【存下】。从前是一条一只小框、各带一对按钮——条数一多满屏都是按钮。
* 框本身就借 .profile-input 那身皮（人格那一栏同一只框），这里只把它撑高、放宽行距。
*/
.memo-box {
min-height: 12em;
line-height: 1.85;
resize: vertical;
}
/* 记忆框底下那行读数（左下角）：当前这一回合要发出去的记忆一共多少字 */
.memo-total {
margin: 5px 0 0;
text-align: left;
font-size: var(--fs-xs);
font-family: var(--font-hand);
letter-spacing: 0.04em;
color: var(--ink-soft);
}
/*
* 一张纸底下那**一排小按钮**（人格那张纸上就两颗：存下 / 先不改）。
* .acts 本来是竖着一列、每颗占满一行；这里改成横着并排、只占内容宽——
* 一颗"存下"不该在纸上占掉一整行。
*/
.acts-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
}
.acts-row .btn { width: auto; }
/*
* 【更高字数上限】那颗小按钮，以及按下去**就地**摊开的那段警告
* （说明下面、输入框上面那一格，位置是创作者定的）。
* 不另开一张纸：纸一换，玩家刚打进去的字就没了。
*/
.cap-slot { margin: 0 0 var(--sp-2); }
.cap-slot .btn.small { padding: 3px 10px 4px; font-size: var(--fs-xs); }
.cap-warn {
padding: var(--sp-2) var(--sp-3);
border: 1px solid rgba(140, 47, 47, 0.42);
border-radius: var(--r);
background: rgba(140, 47, 47, 0.08);
}
.cap-warn-tx {
margin: 0 0 var(--sp-2);
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--red);
}
.cap-warn-acts { display: flex; gap: var(--sp-2); justify-content: center; }
.cap-warn-acts .btn.small { padding: 3px 10px 4px; font-size: var(--fs-xs); }
/* 已经解除的那一条：一句实话 + 一颗「恢复」 */
.cap-on { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cap-on-tx { font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-soft); }
.cap-on .btn.small { padding: 3px 10px 4px; font-size: var(--fs-xs); }
/* ============================================================
手抄本 · 人物簿：一整本，合着只占一行标题
------------------------------------------------------------
合着：标题行 + 人数 + 一个小箭头，什么都不占。
点标题：把所有人一起摊出来。
摊开之后一人一行，一行给全：头像 / 名字与学院 / 十格好感 / 数值 + 一句状态。
============================================================ */
/* 把分区标题本身做成可按的 */
.fold-head {
width: 100%;
padding: 0;
font-family: var(--font-body);
background: none;
border: 0;
cursor: pointer;
text-align: left;
transition: color 0.14s ease;
}
.fold-head .ch-zh { transition: color 0.14s ease; }
.fold-head:hover .ch-zh { color: var(--red); }
.fold-head:focus-visible { outline: 1px dashed var(--red); outline-offset: 3px; }
.fold-note {
flex: none;
letter-spacing: 0.16em;
opacity: 0.7;
}
/* 右边那个小箭头：合着朝下、摊开朝上 */
.rel-caret {
flex: none;
width: 0;
height: 0;
margin-left: 3px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--ink-soft);
transition: transform 0.18s ease;
}
.fold-head.open .rel-caret { transform: rotate(180deg); }
.fold-body { animation: relOpen 0.2s ease both; }
.fold-body[hidden] { display: none; }
/* 一行一个人 */
.rel { border-bottom: 1px dotted rgba(64, 48, 31, 0.22); }
.rel:last-child { border-bottom: 0; }
.rel-head {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
padding: var(--sp-2) 2px;
font-family: var(--font-body);
color: var(--ink);
text-align: left;
}
/* 全本摊开时，行本身不再可点：本子已经开着了 */
.rel-head.static { cursor: default; }
.rel-id { flex: 1; min-width: 0; }
.rel-name {
font-size: var(--fs-m);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rel-right {
flex: none;
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* 数值用红笔手写体——和精力、金加隆那里一套读法 */
.rel-v {
min-width: 2ch;
text-align: right;
font-family: var(--font-hand);
font-size: var(--fs-m);
line-height: 1;
color: var(--red);
}
@keyframes relOpen {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.rel-tag {
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--fg-dim);
}
.rel-stage {
margin: 0 2px 6px;
font-size: var(--fs-s);
color: var(--fg);
}
.rel:last-child .rel-stage { margin-bottom: var(--sp-2); }
/* ── 夜间模式：时段进入 evening 后，舞台、地图、地点牌与状态栏同步变暗 ── */
body.night-mode .stage-img { filter: brightness(.52) saturate(.72) hue-rotate(6deg); }
body.night-mode .stage-scrim { background: linear-gradient(180deg, rgba(4, 7, 14, .78), rgba(5, 7, 13, .36) 35%, rgba(3, 5, 10, .84) 100%), radial-gradient(90% 70% at 50% 18%, rgba(50, 67, 111, .12), transparent 72%); }
body.night-mode .hud { background: linear-gradient(180deg, rgba(3, 6, 12, .96), rgba(5, 8, 16, .82) 70%, rgba(5, 8, 16, 0) 100%); }
body.night-mode .hud::after { background: linear-gradient(90deg, transparent, rgba(128, 151, 194, .46) 18%, rgba(128, 151, 194, .46) 82%, transparent); }
body.night-mode .hud-day { color: #dce5f6; text-shadow: 0 0 14px rgba(124, 157, 216, .26); }
body.night-mode .hud-week, body.night-mode .stat-row .tiny { color: rgba(181, 196, 222, .78); }
body.night-mode .hud-slot { color: #e4eaf4; background: linear-gradient(180deg, #596d96, #293750); border: 1px solid rgba(177, 202, 239, .48); box-shadow: 0 0 9px rgba(89, 125, 188, .28); }
body.night-mode .hud-mail, body.night-mode .hud-room, body.night-mode .hud-gear { filter: saturate(.72) brightness(.9); }
body.night-mode .bar i { background: rgba(9, 14, 25, .78); border-color: rgba(177, 195, 222, .32); }
body.night-mode .bar.stam i.on { background: #a99b61; border-color: #d4c27a; }
body.night-mode .bar.hp i.on { background: #9b626d; border-color: #c98a96; }
body.night-mode .tray { background: linear-gradient(0deg, rgba(3, 6, 12, .98) 42%, rgba(4, 7, 14, .86) 72%, rgba(4, 7, 14, 0) 100%); }
body.night-mode .btn.day { color: #c5d2e8; background: linear-gradient(180deg, rgba(24, 35, 57, .92), rgba(9, 15, 28, .94)); border-color: rgba(126, 159, 216, .52); box-shadow: inset 0 1px 0 rgba(203, 221, 250, .1), 0 4px 14px rgba(0,0,0,.54); }
body.night-mode .btn.day:hover { color: #edf4ff; background: linear-gradient(180deg, rgba(37, 54, 84, .96), rgba(13, 22, 40, .98)); border-color: rgba(170, 202, 248, .8); }
body.night-mode .view::before { background: radial-gradient(120% 72% at 50% 42%, rgba(6, 10, 22, .64), rgba(6, 10, 22, .28) 52%, rgba(6, 10, 22, .1) 100%); }
body.night-mode .place { color: #d8e1ef; background: linear-gradient(180deg, rgba(24, 35, 56, .88), rgba(9, 14, 25, .9)); border-color: rgba(119, 149, 195, .44); box-shadow: 0 5px 15px rgba(0,0,0,.5), inset 0 1px 0 rgba(196, 216, 246, .08); }
body.night-mode .place-name { color: #dce7f7; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
body.night-mode .place-sub { color: rgba(173, 193, 222, .78); }
body.night-mode .place::after { background: #8da9d4; box-shadow: 0 0 8px rgba(110, 153, 218, .4); }
body.night-mode .place:hover { background: linear-gradient(180deg, rgba(40, 57, 88, .94), rgba(13, 22, 40, .96)); border-color: rgba(175, 207, 249, .72); }
body.night-mode .room-btn { filter: brightness(.78) saturate(.8); }
body.night-mode .map-top, body.night-mode .room-map { filter: brightness(.78) saturate(.78); }
body.night-mode .wmap-btn, body.night-mode .wm-door { filter: brightness(.72) saturate(.8); }
/* 日程面板：压缩成清晰的标题、账目、操作三段；夜间随全局变成冷暗色。 */
.sheet.day-schedule, body.night-mode .panel.day-schedule { background: linear-gradient(180deg, #f5ead1, #e5d1aa); }
.sheet.day-schedule .sheet-head, .panel.day-schedule .panel-head { padding-bottom: 9px; border-bottom: 1px solid rgba(120, 91, 49, .3); }
.sheet.day-schedule .sheet-head h2, .panel.day-schedule .panel-title .pt-zh { color: #6b4422; letter-spacing: .08em; }
.sheet.day-schedule .acts-grid, .panel.day-schedule .acts-grid { gap: 9px; margin-top: 7px; }
.sheet.day-schedule .acts-grid > .btn, .panel.day-schedule .acts-grid > .btn { min-height: 4.6em; border-radius: 7px; background: linear-gradient(180deg, rgba(255,248,229,.92), rgba(230,210,170,.92)); box-shadow: 0 3px 9px rgba(70,48,25,.22), inset 0 1px 0 rgba(255,255,255,.52); }
.sheet.day-schedule .acts > .btn, .panel.day-schedule .acts > .btn { border-radius: 7px; background: linear-gradient(180deg, rgba(255,248,229,.94), rgba(232,214,176,.94)); box-shadow: 0 3px 9px rgba(70,48,25,.22), inset 0 1px 0 rgba(255,255,255,.52); }
.sheet.day-schedule .acts-grid > .btn:hover, .panel.day-schedule .acts-grid > .btn:hover { transform: translateY(-2px); border-color: rgba(144, 91, 41, .72); }
body.night-mode .sheet.day-schedule, body.night-mode .panel.day-schedule { background: radial-gradient(90% 30% at 50% 0%, rgba(84, 111, 163, .2), transparent 70%), linear-gradient(180deg, #1c263a, #0d1423 92%); border-color: rgba(126, 158, 211, .56); box-shadow: inset 0 0 35px rgba(0,0,0,.52), 0 20px 54px rgba(0,0,0,.68); color: #d9e4f3; }
body.night-mode .sheet.day-schedule .sheet-head, body.night-mode .panel.day-schedule .panel-head { border-color: rgba(135, 166, 216, .3); }
body.night-mode .sheet.day-schedule .sheet-head h2, body.night-mode .panel.day-schedule .panel-title .pt-zh { color: #dce9fb; text-shadow: 0 0 12px rgba(128, 167, 231, .2); }
body.night-mode .sheet.day-schedule .acts-grid > .btn, body.night-mode .panel.day-schedule .acts-grid > .btn { color: #d8e4f4; background: linear-gradient(180deg, rgba(35, 51, 80, .96), rgba(14, 23, 40, .98)); border-color: rgba(125, 159, 216, .48); box-shadow: inset 0 1px 0 rgba(205,224,250,.08), 0 4px 12px rgba(0,0,0,.48); }
body.night-mode .sheet.day-schedule .acts > .btn, body.night-mode .panel.day-schedule .acts > .btn { color: #dbe6f6; background: linear-gradient(180deg, rgba(36, 53, 84, .96), rgba(13, 22, 40, .98)); border-color: rgba(125, 159, 216, .5); border-left-color: rgba(150, 176, 224, .82); box-shadow: inset 0 1px 0 rgba(205,224,250,.08), 0 4px 12px rgba(0,0,0,.5); }
body.night-mode .sheet.day-schedule .acts > .btn:hover, body.night-mode .panel.day-schedule .acts > .btn:hover { color: #f1f6ff; background: linear-gradient(180deg, rgba(52, 74, 112, .98), rgba(17, 29, 51, .98)); border-color: rgba(181, 211, 252, .78); }
body.night-mode .sheet.day-schedule .acts-grid > .btn:hover, body.night-mode .panel.day-schedule .acts-grid > .btn:hover { color: #f1f6ff; background: linear-gradient(180deg, rgba(51, 72, 108, .98), rgba(17, 29, 51, .98)); border-color: rgba(181, 211, 252, .76); }
body.night-mode .sheet.day-schedule .small, body.night-mode .sheet.day-schedule .tiny, body.night-mode .sheet.day-schedule .muted, body.night-mode .panel.day-schedule .small, body.night-mode .panel.day-schedule .tiny, body.night-mode .panel.day-schedule .muted { color: rgba(190, 207, 232, .76); }
body.night-mode .sheet.day-schedule .night-note, body.night-mode .panel.day-schedule .night-note { background: rgba(91, 50, 70, .2); border-color: rgba(190, 112, 139, .58); }
@media (max-width: 560px) { body.night-mode .place { box-shadow: 0 4px 12px rgba(0,0,0,.46); } }
------------------------------------------------------------
旧那套「三选一猜火候 + 品质 + 管制等级」全部作废：
坩埚搬进魔药课教室（一块灰底大牌子），一锅药变成
切药 → 下锅 → 点火那一下的时机判定（见 engine/brew.js、ui/bench.js）。
============================================================ */
/* ---------- 教室里那块【坩埚】牌：灰底 ---------- */
/* 金属的灰，和种植箱那块深绿分开——它是这间屋子的正事，要一眼认得出 */
.room-btn.steel {
background: linear-gradient(180deg, rgba(60, 64, 68, 0.78), rgba(38, 41, 44, 0.84));
border-color: rgba(189, 169, 138, 0.34);
}
.room-btn.steel:hover {
background: linear-gradient(180deg, rgba(80, 85, 90, 0.86), rgba(48, 52, 56, 0.9));
border-color: rgba(224, 178, 100, 0.6);
}
.room-btn.steel .rb-sub { color: var(--cine-dim); }
/*
* 厨房那口锅（学校厨房大锅）：**学院色**的一版（创作者 2026-09-28 定的）。
*
* 色号不写在这儿——由 JS 把 data/houses.js 里那个唯一的麦金挂进 `--house`
* （见 ui/screens-map.js 摆那块牌子的那一段）。这里只管「涂上学院色之后，
* 字要看得清、悬停要更亮」：压一层上浅下深的薄幕，底就是那支学院色本身。
* 兜底那个 #8a6a1c 只在变量没送到时生效，正常看到的永远是 data 里那支。
*/
.room-btn.house-pot {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.24)),
var(--house, #8a6a1c);
border-color: rgba(240, 214, 140, 0.5);
}
.room-btn.house-pot:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.14)),
var(--house, #8a6a1c);
border-color: rgba(248, 226, 160, 0.78);
}
.room-btn.house-pot .rb-sub { color: rgba(246, 232, 186, 0.92); }
/* ---------- 海格门口那张【小摊】：灰黄色金边的矮长框 ---------- */
/*
* 它和大煮锅、教室坩埚那种「走进另一个界面」的大灰牌**不一样**（创作者定的，2026-09-27）：
* 门口这一摊只是顺手买点种子，用矮一条的框就够——原来它也是一块同样大的钢灰牌，
* 压在【兽栏】正下方，两块叠在一起过（创作者点过这个问题）。
*
* 长相：晒旧的**灰黄**底 + 一圈**描金**边，字是深棕——像一块挂在门边的旧木牌。
* 因为压的是亮黄底，字不能再用 cine 那套浅色（那在纸面上会糊掉），改成深棕。
* flex-wrap 是为了让那行小字自己占第二行：两块并排挤在一行会把字压没。
*/
.room-btn.market {
flex-wrap: wrap;
padding: var(--sp-2) var(--sp-3);
background: linear-gradient(180deg, rgba(198, 186, 142, 0.86), rgba(152, 140, 102, 0.9));
border: 1px solid rgba(224, 178, 100, 0.75);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 246, 214, 0.28);
}
.room-btn.market:hover {
background: linear-gradient(180deg, rgba(218, 206, 158, 0.94), rgba(170, 157, 116, 0.94));
border-color: rgba(242, 208, 142, 0.92);
}
.room-btn.market .rb-zh {
font-size: var(--fs-s);
letter-spacing: 0.08em;
color: #2e2415;
}
.room-btn.market .rb-en {
flex: none;
font-size: 11px;
color: rgba(58, 46, 28, 0.7);
}
.room-btn.market .rb-sub {
margin-top: 1px;
color: rgba(58, 46, 28, 0.7);
}
/* ---------- 魔咒学教室墙角那个【木人】：一块方牌 ---------- */
/*
* 它是这一摞里**唯一一块方牌**（其余都是横条）——创作者 2026-10-14 要的
* 「黄棕色的方形按钮」：像墙角立着个木桩，不是墙上的又一条。
* 宽度得盖过 `.room-map > *` 那条（那条是给横条定的），所以选择器要写到 .room-btn.dummy。
*/
.room-map > .room-btn.dummy {
width: 104px;
height: 104px;
padding: var(--sp-2);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
color: #2c1f0e;
background:
radial-gradient(80% 60% at 30% 10%, rgba(255, 240, 200, 0.45), transparent 62%),
linear-gradient(180deg, #c99447, #7d5624 92%);
border: 1px solid rgba(255, 232, 170, 0.6);
border-radius: 6px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 246, 214, 0.35);
}
.room-btn.dummy:hover {
transform: translateY(-2px);
border-color: rgba(255, 244, 208, 0.92);
box-shadow: 0 9px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 246, 214, 0.45), 0 0 16px rgba(201, 148, 71, 0.35);
}
.room-btn.dummy .dummy-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.room-btn.dummy .rb-zh {
font-size: var(--fs-m);
letter-spacing: 0.16em;
color: #2c1f0e;
text-shadow: none;
}
/*
* 那行小字（「训练魔咒」）。它是**浅木底**上的一行字，不能走 .rb-sub 那个暗底金色
* （那行金压在黄棕木上几乎看不清），跟着 .rb-zh 用深棕、再小一档。
*/
.room-btn.dummy .rb-sub {
font-size: 10px;
letter-spacing: 0.1em;
color: rgba(44, 31, 14, 0.82);
text-shadow: none;
}
/* ---------- 炼药 / 烹饪那两张单子：一条方子一条细条子 ---------- */
/*
* 2026-09-28 改版（创作者定的）：一行从「一张羊皮纸 + 右边一颗方按钮」
* 换成**一条细条子**——方子多了要翻得动，一张纸占掉三行高，十道菜翻半天。
* 条子上一共三样：名字（左）、材料串（灰、长了自己截断）、缺几样（右端小标）。
* 点条子开详情纸，两颗动作按钮（自己上手 / 快速）都在那张纸上。
*/
/* ── 配方选择卡：煮锅与炼金页面专属，不影响随身锅和其他列表 ── */
.view:has(.cookpot-scene),
.view:has(.brewery-scene) { position: relative; isolation: isolate; }
.view:has(.cookpot-scene)::before,
.view:has(.brewery-scene)::before {
content: ''; position: absolute; inset: -18px -24px; z-index: -2; pointer-events: none;
background: radial-gradient(40% 26% at 50% 12%, rgba(216, 167, 78, .17), transparent 72%), linear-gradient(180deg, rgba(29, 23, 17, .52), rgba(13, 12, 12, .76));
box-shadow: inset 0 0 78px rgba(0,0,0,.58);
}
.view:has(.cookpot-scene) .cookpot-scene,
.view:has(.brewery-scene) .brewery-scene {
position: relative; margin: 0 -6px var(--sp-3); padding: 10px 16px 14px; text-align: center;
background: linear-gradient(180deg, rgba(61, 44, 27, .72), rgba(24, 20, 17, .76));
border-top: 1px solid rgba(223, 177, 91, .4); border-bottom: 1px solid rgba(223, 177, 91, .25);
box-shadow: 0 12px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,240,190,.07);
}
.view:has(.brewery-scene) .brewery-scene { background: linear-gradient(180deg, rgba(38, 47, 52, .78), rgba(18, 23, 25, .82)); border-color: rgba(161, 185, 192, .34); }
.view:has(.cookpot-scene) .cookpot-scene .name,
.view:has(.brewery-scene) .brewery-scene .name { color: #f2d59b; text-shadow: 0 0 15px rgba(224, 172, 74, .28), 0 2px 3px rgba(0,0,0,.86); }
.view:has(.brewery-scene) .brewery-scene .name { color: #d7e2e0; text-shadow: 0 0 15px rgba(147, 191, 195, .2), 0 2px 3px rgba(0,0,0,.86); }
.view:has(.cookpot-scene) .cookpot-scene .name::after,
.view:has(.brewery-scene) .brewery-scene .name::after { width: min(72%, 280px); height: 2px; margin-top: 8px; background: linear-gradient(90deg, transparent, #b57e38 18%, #ebc67b 50%, #b57e38 82%, transparent); opacity: .88; }
.view:has(.brewery-scene) .brewery-scene .name::after { background: linear-gradient(90deg, transparent, #7c9b9c 18%, #d4e1dd 50%, #7c9b9c 82%, transparent); }
/* ---------- 炼药 / 烹饪那两张单子：一方块一副方子（2026-10-19 新版式） ----------
* 方块上只有图和名字；材料够的亮着，不够的灰着（虚线框、图去色）——
* **灰的照样点得进去**，缺哪几味写在详情纸上（构造器在 ui/craft-tile.js，三处共用）。
*/
/* 底色：随身锅那边是纸色（和背包同一族） */
.craft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0 auto; max-width: 760px; }
.craft-tile {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
aspect-ratio: 1 / 1; padding: 8px 6px 6px; overflow: hidden; cursor: pointer;
font-family: var(--font-body); text-align: center; color: var(--ink);
background: radial-gradient(80% 60% at 22% 6%, rgba(255, 255, 255, 0.42), transparent 62%), linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.44); border-radius: 8px;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 5px 12px rgba(0, 0, 0, 0.26);
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.craft-tile:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 3px 0 rgba(50, 37, 24, 0.3), 0 10px 20px rgba(0, 0, 0, 0.32); }
.craft-tile-art { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.craft-tile-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.34)); }
.craft-tile-emoji { font-size: 30px; line-height: 1.2; }
.craft-tile-name { font-size: var(--fs-s); letter-spacing: 0.06em; line-height: 1.3; }
/* 灰的那一档：虚线框 + 图去色；**不禁用**，点得进去看缺什么 */
.craft-tile.is-off { opacity: 0.52; border-style: dashed; }
.craft-tile.is-off .craft-tile-art { filter: grayscale(0.85); }
.craft-tile.is-off:hover { opacity: 0.74; }
/* 煮锅 / 坩埚那两屏：方块换成和那两张场面同族的深色木牌 */
.view:has(.cookpot-scene) .craft-tile,
.view:has(.brewery-scene) .craft-tile {
color: #f2e2c2;
background: radial-gradient(90% 44% at 50% 0%, rgba(224, 178, 86, .15), transparent 72%), linear-gradient(180deg, rgba(55, 42, 28, .96), rgba(22, 18, 15, .98));
border-color: rgba(196, 153, 77, .46);
box-shadow: inset 0 1px 0 rgba(255, 237, 183, .08), 0 7px 15px rgba(0, 0, 0, .42);
}
.view:has(.brewery-scene) .craft-tile {
background: radial-gradient(90% 44% at 50% 0%, rgba(144, 188, 191, .13), transparent 72%), linear-gradient(180deg, rgba(39, 49, 52, .98), rgba(17, 22, 24, .98));
border-color: rgba(143, 177, 181, .48);
}
.view:has(.cookpot-scene) .craft-tile::before,
.view:has(.brewery-scene) .craft-tile::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(255, 224, 151, .08); border-radius: 5px; pointer-events: none; }
.view:has(.brewery-scene) .craft-tile::before { border-color: rgba(203, 225, 221, .09); }
.view:has(.cookpot-scene) .craft-tile:hover,
.view:has(.brewery-scene) .craft-tile:hover { transform: translateY(-3px); border-color: rgba(239, 197, 112, .9); box-shadow: inset 0 1px 0 rgba(255, 240, 193, .14), 0 11px 22px rgba(0, 0, 0, .5), 0 0 14px rgba(211, 161, 72, .15); }
.view:has(.brewery-scene) .craft-tile:hover { border-color: rgba(190, 225, 222, .9); box-shadow: inset 0 1px 0 rgba(224, 242, 238, .14), 0 11px 22px rgba(0, 0, 0, .5), 0 0 14px rgba(139, 192, 193, .13); }
.view:has(.cookpot-scene) .craft-tile-name { color: #f3d48f; }
.view:has(.brewery-scene) .craft-tile-name { color: #d4e4df; }
.view:has(.cookpot-scene) .craft-tile.is-off:hover,
.view:has(.cookpot-scene) .craft-tile.is-off,
.view:has(.brewery-scene) .craft-tile.is-off { background: radial-gradient(90% 44% at 50% 0%, rgba(120, 100, 70, .1), transparent 72%), linear-gradient(180deg, rgba(48, 40, 32, .96), rgba(20, 18, 16, .98)); }
@media (max-width: 620px) {
.craft-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.craft-tile-name { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) {
.craft-tile { transition: none; }
}
/* ---------- 快速制作那张纸上的「做几份」那一栏 ---------- */
/*
* 2026-10-14 加的：批量不另开一栏，收进【快速烹饪】/【快速炼药】里——
* 点那颗按钮先问份数：加减用工程里那套货格步进器（.mkt-step，别处买货也用它），
* 旁边再给一颗【最大】= 把袋里的料一次做完。
*/
.quick-qty {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: var(--sp-2) 0 4px;
}
.quick-qty .mkt-step { flex: none; margin-top: 0; }
.btn.quick-max {
flex: none;
width: auto;
padding: 5px 16px 6px;
font-size: var(--fs-s);
letter-spacing: 0.1em;
color: #f3e3bd;
background: linear-gradient(180deg, rgba(56, 41, 26, 0.94), rgba(26, 18, 12, 0.96));
border: 1px solid rgba(224, 178, 100, 0.55);
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.12), 0 3px 10px rgba(0, 0, 0, 0.4);
}
.btn.quick-max:hover { border-color: rgba(246, 210, 138, 0.92); box-shadow: 0 0 14px rgba(224, 178, 100, 0.28), 0 4px 12px rgba(0, 0, 0, 0.45); }
.quick-cap { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-soft); }
/*
* 随身锅那一屏的折叠栏头（ui/portable.js）。
* 走「贴在木板上的一条标签」那一路：和屋里的长条牌同族，但更扁、更轻，
* 因为它下面紧跟的就是列表，抢视线就本末倒置了。
*/
.pot-fold {
display: flex;
align-items: baseline;
gap: var(--sp-2);
width: 100%;
margin: var(--sp-3) 0 var(--sp-2);
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-body);
text-align: left;
color: var(--cine-text);
background: linear-gradient(180deg, rgba(58, 46, 34, 0.82), rgba(38, 30, 22, 0.78));
border: 1px solid rgba(214, 186, 130, 0.28);
border-radius: var(--r);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
cursor: pointer;
transition: border-color 0.16s ease, filter 0.16s ease, transform 0.12s ease;
}
.pot-fold:hover { border-color: var(--red); filter: brightness(1.1); }
.pot-fold:active { transform: translateY(1px); }
.pot-fold .pf-arrow {
flex: none;
font-size: var(--fs-s);
color: #d9bd8a;
/* 箭头单独一行高，别把整条基线拽偏 */
line-height: 1;
}
.pot-fold .pf-zh {
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.12em;
}
.pot-fold .pf-en {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cine-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 这一栏有几样。折上之后内容就看不见了，这个数是唯一的交代 */
.pot-fold .pf-count {
flex: none;
min-width: 22px;
padding: 0 6px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
line-height: 20px;
text-align: center;
color: #2b2415;
background: #d9bd8a;
border-radius: 999px;
}
@media (max-width: 420px) {
.pot-fold .pf-en { display: none; }
}
/* 详情里缺的那一味整行标红（「要 N，只有 M」那句跟着红） */
.row.lack .grow,
.row.lack .val { color: var(--red); }
.row.lack .val { font-weight: 700; }
/* ---------- 操作台：深褐色那一屏 ---------- */
.bench {
padding: var(--sp-4) var(--sp-4) var(--sp-5);
border: 1px solid rgba(224, 178, 100, 0.22);
border-radius: var(--r);
color: var(--cine-text);
/* 木台与炭火气：上头亮一点，底下压到近黑 */
background:
radial-gradient(110% 70% at 50% 0%, rgba(132, 90, 48, 0.34), transparent 62%),
linear-gradient(175deg, #2b1e15 0%, #211610 56%, #180f0a 100%);
box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.08), 0 12px 28px rgba(0, 0, 0, 0.4);
}
.bench-head {
display: flex;
align-items: baseline;
gap: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px dashed rgba(224, 178, 100, 0.24);
}
.bh-name {
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--cine-gold);
}
/* 头顶那一排小点 = 这一锅要处理几味；进锅的亮起来 */
.bh-steps { flex: 1 1 auto; display: flex; gap: 5px; }
.bs-dot {
width: 9px; height: 9px;
border-radius: 50%;
border: 1px solid rgba(224, 178, 100, 0.4);
transition: background 0.2s ease, border-color 0.2s ease;
}
.bs-dot.on { background: var(--cine-gold); border-color: var(--cine-gold); }
/* 材料开锅就扣了，所以这颗按钮写的是「废掉这锅」，不是「取消」 */
.bench-quit {
flex: none;
font-family: var(--font-body);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
padding: 3px 10px 4px;
color: rgba(189, 169, 138, 0.85);
background: rgba(255, 247, 232, 0.06);
border: 1px solid rgba(189, 169, 138, 0.28);
border-radius: 999px;
cursor: pointer;
transition: color 0.14s ease, border-color 0.14s ease;
}
.bench-quit:hover { color: var(--cine-red); border-color: rgba(212, 105, 95, 0.6); }
/*
* 台面：一整个横屏，东西按创作者那张参考图摆——
* 锅在左（约四分之一宽）、砧板在正中（最大的一块）、刀竖在砧板右边、
* 草药袋挂在右上角并且**探出台面边界**（overflow 把它裁掉一半，只露一点）。
* 所有摆位都用百分比，所以台面缩到多宽，比例都和那张图一致。
*/
.bench-stage {
position: relative;
overflow: hidden;
aspect-ratio: 83 / 47;
/* 矮屏上别把面板撑出滚动条：台面自己缩，但比例一定守住——
物件全是按百分比摆的，比例一变摆位就全歪了 */
width: min(100%, calc(58vh * 83 / 47));
margin: var(--sp-4) auto 0;
border: 1px solid rgba(224, 178, 100, 0.2);
border-radius: var(--r);
/* 参考图那块灰褐台面，压暗一档免得抢药名的亮 */
background:
radial-gradient(120% 90% at 20% 0%, rgba(255, 236, 208, 0.1), transparent 55%),
linear-gradient(168deg, #74645d 0%, #6a5a54 46%, #5b4b46 100%);
box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.14), inset 0 -22px 40px rgba(0, 0, 0, 0.3);
}
/* 草药袋：挂在右上角，探出边界，点住拖出一根 */
.pouch {
position: absolute;
/* 创作者要的是「袋子超出界面，只露出一点」：往上、往右各探出去一大截，
被台面的边界裁掉半只——像挂在墙上伸进来，不是摆在桌上。
裁得比参考图更狠一点，但留 enough 袋口和叶子让人认得出、点得到。 */
top: -14%; right: -9%;
width: 26%;
cursor: grab;
touch-action: none;
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), filter 0.16s ease;
}
.pouch:hover { transform: translateY(-2px) rotate(-3deg); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.pouch:active { cursor: grabbing; transform: scale(0.96); }
.pouch-img { display: block; width: 100%; }
/* 提示那颗「拖」字落在台面里——袋子本身探出去了，字不能跟着探出去 */
.pouch-hint {
position: absolute;
left: 2%; bottom: 4%;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.1em;
padding: 0 6px;
color: rgba(20, 13, 8, 0.82);
background: rgba(224, 178, 100, 0.82);
border-radius: 999px;
}
/* 砧板：台面正中，最大的一块（中间那格虚线就是「材料虚线」） */
.board {
position: absolute;
left: 34.5%; top: 15%;
width: 43%;
cursor: pointer;
touch-action: none;
}
.board-img { display: block; width: 100%; }
.board-slot {
position: absolute;
left: 50%; top: 46%;
transform: translate(-50%, -50%);
width: 74%; height: 70%;
display: flex; align-items: flex-end; justify-content: center;
}
/* 空的时候那条虚线才露出来（放上东西就不该再提示「这里」） */
.board-slot::after {
content: '放草药';
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: rgba(244, 233, 212, 0.5);
border: 1px dashed rgba(244, 233, 212, 0.34);
border-radius: 4px;
transition: opacity 0.2s ease;
}
.board:not([data-state="empty"]) .board-slot::after { opacity: 0; }
/*
* 那句提示按台面摆的那一套换词：熬药切的是药材、做菜切的是食材。
* 两种说法写在 CSS 里、由 .bench 上的 data-kit 切（挂在 ui/bench.js），
* 不在 JS 里改 DOM——同一句话的两种措辞不值得多一条渲染路径。
* ⚠️ ::after 的 content 只能在这里换：改 JS 那边是改不动的。
*/
.bench[data-kit="cook"] .board-slot::after { content: '放上食材'; }
.board-slot .herb {
position: relative;
max-width: 100%; max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
/* 药末那一张：矮矮一摊，视觉上就该和整株不一样 */
.board-slot .herb.pile { transform: translateY(2px) scale(0.92); }
/* 切满了：给砧板图本身描一圈光（矩形描边会框到图的透明边上，难看） */
.board[data-state="done"] .board-img { filter: drop-shadow(0 0 7px rgba(224, 178, 100, 0.6)); }
/* 刀数刻度：让玩家知道还要几下，而不是对着一张不动的图猜 */
.board-dots {
position: absolute;
left: 0; right: 0; bottom: -16px;
display: flex; justify-content: center; gap: 5px;
}
.board-dots i {
width: 7px; height: 7px;
border-radius: 50%;
border: 1px solid rgba(244, 233, 212, 0.45);
}
.board-dots i.on { background: var(--cine-gold); border-color: var(--cine-gold); }
/*
* 刀：竖着放在砧板右缘上（参考图就是这个位置）。
* 点一下把它拿起来——拿起来之后原位置只剩一点影子，那把活的刀在 .knife-hand 里跟手走。
*/
.knife {
position: absolute;
/* 横向按中心定位：素材的刀是细长一张，按左边缘摆的话，图宽一变就会跑出砧板外 */
left: 71%; top: 9%;
height: 58%;
transform: translateX(-50%);
padding: 0;
background: none;
border: 0;
cursor: pointer;
/* 按住刀要能拖着走，不能被浏览器当成滚页面手势抢走 */
touch-action: none;
opacity: 0.92;
transition: opacity 0.18s ease, filter 0.18s ease;
}
.knife-img { display: block; height: 100%; width: auto; }
.knife:hover { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
/* 拿起来了：台面上这把就该淡下去，不然看着像有两把刀 */
.knife[data-up="yes"] { opacity: 0.12; filter: none; }
/*
* 五步常驻，当前那一步亮起来。
* 文案不随配方变（见 ui/bench.js 的 STEPS），所以这里排成一列固定的字：
* 没轮到的压暗、轮到的上色——玩家扫一眼就知道手该往哪儿放。
*/
.bench-steps {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 var(--sp-3);
}
.bs-line {
display: flex;
align-items: baseline;
gap: 8px;
font-size: var(--fs-xs);
letter-spacing: 0.05em;
line-height: 1.8;
color: rgba(189, 169, 138, 0.5);
transition: color 0.2s ease;
}
.bs-line .bs-n {
flex: none;
width: 13px;
font-family: var(--font-hand);
text-align: right;
opacity: 0.65;
}
.bs-line.on { color: var(--cine-gold); }
.bs-line.on .bs-n { opacity: 1; }
/*
* 锅：台面左边那口。做菜与熬药的锅不一样（见 ui/bench.js 的 KITS），
* 但摆位是同一处——两套玩法共用这张台面。
*
* 锅里那潭东西**分两种做法**：
* 熬药 —— 水画在锅图里：空锅 → 换个色的锅 → 炸了换黑的那张，只换素材图，
* 不画任何自制的圆圈或色块（创作者的资材里已经有变好色的六张锅了）。
* 做菜 —— 锅是锅、汤水是汤水**两层**（见下面的 .soup-img）：锅图从头到尾不动，
* 浮上来那潭按做的哪道菜定（data/assets.js 的 soupForDish）。
*/
.pot { position: absolute; left: 3.5%; top: 10%; width: 27%; }
.pot-img { display: block; width: 100%; }
/* 换图那一下轻轻晃一下，看着像水面被搅动，而不是图片闪了一下 */
.pot-img.ripple { animation: potRipple 0.5s ease; }
@keyframes potRipple {
0% { transform: scale(1); filter: brightness(1); }
30% { transform: scale(1.025); filter: brightness(1.28); }
100% { transform: scale(1); filter: brightness(1); }
}
/*
* 锅里那潭汤水——做菜那两层里的上面一层（熬药永远用不着它，它一直 hidden）。
*
* 下面这两个数是**量出来的**，不是估的（锅图 941×810、汤水图 675×667）：
* · 锅口（那圈空口子）占锅图宽的约 69%，质心在 (51.9%, 52.4%)——
* 锅图不是正俯视，口子略偏右下，直接居中会往左上偏出去一点；
* · 汤水的不透明部分几乎填满自己的图（约 98%），所以按 67% 缩下去，
* 汤面圆约当锅图宽的 66%，比锅口小一圈、正好落进内壁里。
* 实测：宽 67% + 圆心 (52%,52%) 时，压到锅沿的像素只有 0.66%，
* 而盖住了锅口面积的 93.7%（再放大到 70% 能盖到 99%，但会压 3% 的锅沿，不值）。
* 改这两个数之前先跑 .agents/fit-soup2.py 重量一遍——别凭眼睛调。
*
* ⚠️ 这里**不许写 display** —— [hidden] 靠浏览器默认的 display:none 生效，
* 在这条规则里一写 display，就把「空锅时把汤水藏起来」覆盖掉了。
*/
.soup-img {
position: absolute;
left: 52%; top: 52%;
width: 67%;
transform: translate(-50%, -50%);
pointer-events: none;
}
/* 汤水层有自己的 ripple：它靠 translate 居中，套锅那条（只写 scale）会把它挪偏 */
.soup-img.ripple { animation: soupRipple 0.5s ease; }
@keyframes soupRipple {
0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
30% { transform: translate(-50%, -50%) scale(1.025); filter: brightness(1.28); }
100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}
/*
* 炸了锅（做菜那边没有那口黑锅的素材）：把锅和锅里那潭汤一起压黑。
* 用滤镜，不是往锅里画东西——创作者的口径是「不许再往锅里画圆圈/色块」。
* 锅本身也要压：一份料都没下就废掉时，汤水那层是藏着的，只压汤水等于毫无反应。
*/
.soup-img.burnt,
.pot-img.burnt { filter: grayscale(0.8) brightness(0.32) contrast(1.3) sepia(0.35); }
/* 台面底下那一栏：提示 + 点火 + 时机条 */
.bench-ctl {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-3);
}
/* 点火：暗橙红 */
.ignite {
font-family: var(--font-body);
font-size: var(--fs-m);
letter-spacing: 0.2em;
padding: 10px 28px 11px;
color: #ffe9cc;
background: linear-gradient(180deg, #8d3b13, #5a220a);
border: 1px solid rgba(255, 150, 70, 0.45);
border-radius: var(--r);
box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.25), 0 0 18px rgba(190, 80, 20, 0.26);
cursor: pointer;
transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ignite:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.25), 0 0 26px rgba(220, 100, 25, 0.42); }
.ignite:active:not(:disabled) { transform: translateY(1px); }
.ignite:disabled {
color: rgba(189, 169, 138, 0.45);
background: #322520;
border-color: rgba(189, 169, 138, 0.2);
box-shadow: none;
cursor: not-allowed;
}
/* 时机条：一条 + 一段橙色命中区 + 来回跑的光标 */
.gauge { width: 100%; margin-top: var(--sp-2); }
.gauge[hidden] { display: none; }
.gauge-bar {
position: relative;
height: 28px;
border-radius: 999px;
background: rgba(8, 5, 3, 0.8);
border: 1px solid rgba(224, 178, 100, 0.28);
cursor: pointer;
overflow: hidden;
/* 命中亮一下、跑偏抖一下——手感全在这两帧 */
transition: border-color 0.12s ease;
}
.gauge-window {
position: absolute;
top: 0; bottom: 0;
/* 宽与左移由 JS 写（配方的 timing + 天赋加成）。宽 0 = 真没有窗口。 */
background: linear-gradient(180deg, rgba(255, 152, 62, 0.92), rgba(206, 84, 22, 0.9));
box-shadow: 0 0 16px rgba(255, 140, 50, 0.5), inset 0 0 0 1px rgba(255, 200, 150, 0.3);
}
.gauge-cursor {
position: absolute;
top: -2px; bottom: -2px;
width: 3px;
margin-left: -1.5px;
background: #fff6e4;
box-shadow: 0 0 12px rgba(255, 246, 228, 0.9);
}
.gauge[data-hit="yes"] .gauge-bar { border-color: rgba(168, 220, 150, 0.9); box-shadow: 0 0 22px rgba(140, 200, 130, 0.4); }
.gauge[data-hit="no"] .gauge-bar { animation: gaugeMiss 0.2s ease; border-color: rgba(212, 105, 95, 0.9); }
@keyframes gaugeMiss {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.gauge-note {
margin-top: 7px;
font-size: var(--fs-xs);
letter-spacing: 0.05em;
line-height: 1.7;
text-align: center;
color: var(--cine-dim);
}
/* 拖拽时跟着指针的那一张：ghost，永远不吃点击 */
.bench-drag {
position: fixed;
left: 0; top: 0;
z-index: 82;
pointer-events: none;
transform: translate(-50%, -50%);
}
.bench-drag[hidden] { display: none; }
.bench-drag .drag-img {
display: block;
width: 66px;
filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.7));
}
/* 没放对：让它掉下去。这一下不能省——没有失败反馈的拖拽，
玩家分不清自己是放下了还是没放下。 */
.bench-drag.fall { animation: dragFall 0.32s ease-in forwards; }
@keyframes dragFall {
from { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
to { transform: translate(-42%, 46px) rotate(16deg); opacity: 0; }
}
/*
* 手里那把刀：跟着指针走，刀尖在指针上方 KNIFE_TIP 那么多（判定按那个点算，
* 所以 JS 读的是这个元素的实际高度——窄屏把它调小，判定会自己跟上）。
* 永远不吃点击，不然它会挡住底下砧板与锅的落点判定。
*/
.knife-hand {
position: fixed;
left: 0; top: 0;
z-index: 84;
/* 刀跟着手走，手是握在刀身中下部的——所以锚点在 66% 那里，
JS 判定的刀尖位置按这个比例算（窄屏刀变小，判定自己跟着缩） */
height: clamp(92px, 15vw, 152px);
pointer-events: none;
transform: translate(-50%, -66%) rotate(-3deg);
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.72));
}
.knife-hand[hidden] { display: none; }
.knife-hand .hand-img { display: block; height: 100%; width: auto; }
/* 落刀那一下的短促下压 */
.knife-hand.chop { animation: knifeChop 0.17s ease; }
/* 角度只偏 3 度：偏太多，刀尖就会横向跑离指针那条线，判定会「看着切到却没算」 */
@keyframes knifeChop {
0% { transform: translate(-50%, -66%) rotate(-3deg); }
45% { transform: translate(-50%, -61%) rotate(5deg); }
100% { transform: translate(-50%, -66%) rotate(-3deg); }
}
/* 被刀碰到那一下：草药抖一抖，才知道这一刀真落在它身上了 */
.board-slot .herb.shake { animation: herbShake 0.2s ease; }
@keyframes herbShake {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
30% { transform: translate(-3px, 2px) rotate(-2.5deg); }
65% { transform: translate(2px, -1px) rotate(1.5deg); }
}
/* 窄屏：台面还是那一整块（比例靠 aspect-ratio 自己缩），只收一收内边距和手里的刀 */
@media (max-width: 560px) {
.bench { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.bench-stage { width: min(100%, calc(52vh * 83 / 47)); }
.bench-drag .drag-img { width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
.gauge[data-hit="no"] .gauge-bar { animation: none; }
.bench-drag.fall { animation-duration: 0.01ms; }
.pouch, .knife { transition-duration: 0.01ms; }
}
/* ============================================================
10 · 密林云游商人的摊子
------------------------------------------------------------
一张木板摆两件事：他带来的（4 格 + 下面那一条金色特卖位）、
他想换走的（4 格）。两栏的格子同一套列定义、等宽等大。
格子是纸，压在夜色的照片上——所以走墨色那一族，
跟背包、配方纸同一个身份，不再发明第三种卡片。
============================================================ */
/*
* 买入这一栏是「四格 + 下面一条特卖位」，竖着排。
*
* 以前特卖位站在四格右边、和四格抢同一行的宽度（它 116px + 间距 12px），
* 于是买入的格子比卖出窄一截——两栏并排看就是左边缩进去一块。
* 挪到下面之后，两个 .mkt-grid 都是满宽、同一套列定义，格子必然等大。
*/
.mkt-sell { display: block; }
.mkt-grid {
display: grid;
/* 四格两列：一行三格会让窄屏的字挤成竖排 */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
width: 100%;
}
/* 一格：图 / 名 / 价 / 步进器 / 成交，从上到下 */
.mkt-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: var(--sp-2) var(--sp-2) var(--sp-3);
text-align: center;
font-family: var(--font-body);
color: var(--ink);
background:
radial-gradient(80% 60% at 12% 4%, rgba(255, 255, 255, 0.5), transparent 62%),
linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.44);
border-radius: var(--r);
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 8px 18px rgba(0, 0, 0, 0.34);
}
/* 手上没货的那一格：纸压暗一档，一眼看出「这格现在做不了事」 */
.mkt-cell.short { opacity: 0.72; }
.mkt-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/*
* 物品图那个小框。
*
* 框缩到 38px：原先 46px 配这一格的留白，图看起来比字还抢眼，
* 这几样东西是「摆着的货」，名字和价钱才是要读的。
*
* `overflow: hidden` 是**硬保证**，不是装饰：图哪怕因为什么原因比框大
* （素材本身留白多、emoji 字形比字号高、以后换了更大的图），
* 也只会在框里被裁掉，绝不会顶到卡片外面去。
* 靠 object-fit 一个属性不够——那只在「图确实小于框」时才管用。
*/
.mkt-art {
width: 38px;
height: 38px;
flex: none;
display: grid;
place-items: center;
overflow: hidden;
font-size: 24px;
line-height: 1;
}
.mkt-art-img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.mkt-name {
font-size: var(--fs-s);
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.35;
color: var(--ink);
}
.mkt-price {
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.04em;
color: var(--ink-soft);
}
.mkt-price.dim-tx { opacity: 0.6; }
.mkt-have { font-size: var(--fs-xs); color: var(--ink-soft); }
/*
* 格子里那行小字（对角巷那几家店的规矩：「今天还剩 2 个」「4 天熟 → 缬草根×2」）。
*
* 商人那两栏没有这一行——他的货是随机的，没有「还剩几个」可说。
* 收在 .mkt-have 下面一号、行高紧一点：它是注释，不是主角。
*/
.mkt-note {
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink-soft);
opacity: 0.85;
}
.mkt-only {
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--red);
}
.mkt-body { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/*
* 特卖位：横着躺在四格下面那一条，金色。
* 没刷出来（那 10% 没中）就整条灰掉——创作者要的就是「看得见这周没有」，
* 而不是少摆一格让人以为界面坏了。
*
* 横排（牌子 / 图与名 / 价钱与按钮靠右）是因为它现在占满一整行宽，
* 再按竖着居中去排，中间会空出一大片，看着像漏了东西。
*/
.mkt-special {
flex: none;
width: 100%;
margin-top: var(--sp-2);
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--sp-3);
text-align: left;
padding: var(--sp-2) var(--sp-3);
border-color: rgba(224, 178, 100, 0.78);
border-width: 2px;
background:
radial-gradient(90% 60% at 20% 0%, rgba(255, 248, 224, 0.75), transparent 60%),
linear-gradient(180deg, #f6e3b4, #e2c380);
box-shadow: 0 2px 0 rgba(90, 62, 20, 0.4), 0 0 18px rgba(224, 178, 100, 0.34),
inset 0 1px 0 rgba(255, 250, 235, 0.6);
}
/* 价钱那一组顶到最右边：这一条从左到右读下来是「特卖 → 是什么 → 多少钱、买走」 */
.mkt-special .mkt-body { margin-left: auto; align-items: flex-end; }
.mkt-special .mkt-flag { flex: none; }
.mkt-flag {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.18em;
padding: 0 8px 1px;
color: #4a3410;
background: rgba(255, 246, 220, 0.7);
border-radius: 999px;
}
/* 灰态：金边褪成灰边，光晕撤掉，字压暗——但格子还站在原地 */
.mkt-special.dim {
border-color: rgba(64, 48, 31, 0.3);
background: linear-gradient(180deg, #e8e0d0, #d8cfbd);
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.24);
filter: saturate(0.5);
}
.mkt-special.dim .mkt-flag { color: var(--ink-soft); background: rgba(255, 255, 255, 0.4); }
.mkt-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: var(--sp-3) 0;
}
.mkt-empty-mark { font-size: 24px; line-height: 1; color: rgba(64, 48, 31, 0.34); }
.mkt-empty-tx { font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-soft); }
/* 快速加减：▼▼ −10 / ▼ −1 / 数 / ▲ +1 / ▲▲ +10 */
.mkt-step {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
margin-top: 2px;
}
.ms-b {
width: 22px;
height: 22px;
padding: 0;
font-family: var(--font-body);
font-size: 9px;
line-height: 1;
color: var(--ink-soft);
background: rgba(255, 250, 238, 0.66);
border: 1px solid rgba(64, 48, 31, 0.32);
border-radius: var(--r);
cursor: pointer;
transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.ms-b:hover { color: var(--red); background: var(--bright); }
.ms-b:active { transform: scale(0.9); }
.mkt-n {
min-width: 34px;
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* 成交那颗。和别处的按钮区分开：小、贴格子里，不是一整行 */
.mkt-go {
margin-top: 3px;
padding: 3px 12px 4px;
font-family: var(--font-body);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
color: #f7ecd8;
background: linear-gradient(180deg, #6f5a3a, #52412a);
border: 1px solid rgba(64, 48, 31, 0.5);
border-radius: var(--r);
cursor: pointer;
transition: transform 0.12s ease, filter 0.12s ease;
}
.mkt-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.14); }
.mkt-go:active:not(:disabled) { transform: translateY(1px); }
.mkt-go:disabled {
color: rgba(64, 48, 31, 0.45);
background: rgba(255, 250, 238, 0.5);
cursor: not-allowed;
}
/* 他那句话。压在照片上，走亮字那一族 */
.mkt-line {
margin: 0 0 var(--sp-2);
font-size: var(--fs-m);
line-height: 1.8;
color: var(--cine-text);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 16px rgba(0, 0, 0, 0.7);
}
.mkt-want { margin-bottom: var(--sp-3); }
/* 底下那一栏：那颗【刷新货单】要小，不该和成交按钮抢分量 */
.mkt-foot {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.mkt-foot .btn { flex: none; width: auto; font-size: var(--fs-s); padding: 6px 14px 7px; }
/* ── 云游商人：林边隐秘摊位（只作用于 .merchant-scene 所在页面） ── */
.view:has(.merchant-scene) {
position: relative;
isolation: isolate;
}
.view:has(.merchant-scene)::before {
content: '';
position: absolute;
inset: -18px -24px;
z-index: -2;
pointer-events: none;
background:
radial-gradient(32% 24% at 50% 18%, rgba(164, 131, 70, 0.16), transparent 72%),
radial-gradient(48% 42% at 18% 70%, rgba(37, 83, 63, 0.18), transparent 72%),
radial-gradient(44% 40% at 84% 78%, rgba(50, 31, 82, 0.22), transparent 74%),
linear-gradient(180deg, rgba(7, 12, 13, 0.62), rgba(12, 8, 17, 0.74));
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.66);
}
.view:has(.merchant-scene)::after {
content: '';
position: absolute;
inset: -10px -18px;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background:
radial-gradient(circle at 12% 36%, rgba(190, 213, 172, 0.7) 0 1px, transparent 2px),
radial-gradient(circle at 86% 28%, rgba(210, 183, 116, 0.68) 0 1px, transparent 2px),
radial-gradient(circle at 74% 82%, rgba(147, 179, 201, 0.56) 0 1px, transparent 2px);
background-size: 97px 131px, 149px 173px, 181px 157px;
animation: merchantDust 12s linear infinite alternate;
}
@keyframes merchantDust { from { translate: 0 4px; opacity: 0.32; } to { translate: 0 -7px; opacity: 0.58; } }
.view:has(.merchant-scene) .merchant-scene {
position: relative;
padding: 10px 16px 14px;
margin: 0 -6px var(--sp-3);
text-align: center;
background:
linear-gradient(90deg, transparent, rgba(18, 13, 20, 0.78) 13%, rgba(28, 19, 23, 0.9) 50%, rgba(18, 13, 20, 0.78) 87%, transparent),
radial-gradient(60% 100% at 50% 0%, rgba(187, 150, 76, 0.15), transparent 76%);
border-top: 1px solid rgba(202, 166, 91, 0.26);
border-bottom: 1px solid rgba(202, 166, 91, 0.32);
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 238, 180, 0.06);
}
.view:has(.merchant-scene) .merchant-scene::before,
.view:has(.merchant-scene) .merchant-scene::after {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
content: '✦';
color: rgba(219, 187, 111, 0.76);
font-size: 10px;
line-height: 10px;
text-shadow: 0 0 10px rgba(219, 187, 111, 0.62);
translate: 0 -50%;
}
.view:has(.merchant-scene) .merchant-scene::before { left: 4px; }
.view:has(.merchant-scene) .merchant-scene::after { right: 4px; }
.view:has(.merchant-scene) .merchant-scene .label {
color: rgba(190, 165, 120, 0.84);
letter-spacing: 0.2em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.view:has(.merchant-scene) .merchant-scene .name {
color: #f3dfb2;
letter-spacing: 0.16em;
text-shadow: 0 0 16px rgba(207, 157, 72, 0.34), 0 2px 3px rgba(0, 0, 0, 0.88);
}
.view:has(.merchant-scene) .merchant-scene .name::after {
width: min(72%, 280px);
height: 1px;
margin-top: 8px;
background: linear-gradient(90deg, transparent, rgba(213, 176, 91, 0.85) 18%, rgba(213, 176, 91, 0.85) 82%, transparent);
box-shadow: 0 0 8px rgba(213, 176, 91, 0.26);
opacity: 1;
}
.view:has(.merchant-scene) .merchant-scene .note {
max-width: 34rem;
margin: 7px auto 0;
color: rgba(224, 211, 180, 0.76);
font-size: var(--fs-xs);
line-height: 1.75;
}
.view:has(.merchant-scene) > .chapter {
position: relative;
margin-top: var(--sp-4);
color: #d8bd83;
letter-spacing: 0.12em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.view:has(.merchant-scene) > .chapter::before {
content: '⌁';
margin-right: 7px;
color: rgba(127, 170, 143, 0.8);
}
.view:has(.merchant-scene) > .chapter::after {
content: '';
display: block;
height: 1px;
margin-top: 5px;
background: linear-gradient(90deg, rgba(203, 164, 83, 0.5), transparent 82%);
}
.view:has(.merchant-scene) .mkt-sell,
.view:has(.merchant-scene) .mkt-want {
position: relative;
padding: 10px;
border: 1px solid rgba(185, 148, 81, 0.26);
border-radius: 8px;
background:
repeating-linear-gradient(90deg, rgba(255, 231, 170, 0.018) 0 1px, transparent 1px 13px),
linear-gradient(180deg, rgba(22, 17, 19, 0.72), rgba(10, 9, 14, 0.72));
box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.52), 0 10px 24px rgba(0, 0, 0, 0.24);
}
.view:has(.merchant-scene) .mkt-cell {
color: #e8dbc0;
background:
radial-gradient(90% 40% at 50% 0%, rgba(184, 147, 79, 0.13), transparent 72%),
linear-gradient(180deg, rgba(45, 35, 31, 0.92), rgba(18, 15, 20, 0.96));
border-color: rgba(185, 148, 81, 0.38);
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 230, 177, 0.08), 0 5px 13px rgba(0, 0, 0, 0.44);
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.view:has(.merchant-scene) .mkt-cell:hover {
transform: translateY(-3px);
border-color: rgba(224, 190, 116, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 237, 190, 0.14), 0 9px 18px rgba(0, 0, 0, 0.52), 0 0 14px rgba(172, 130, 62, 0.16);
}
.view:has(.merchant-scene) .mkt-art {
width: 54px;
height: 54px;
border: 1px solid rgba(198, 163, 93, 0.3);
border-radius: 50%;
background: radial-gradient(circle, rgba(165, 133, 79, 0.18), rgba(6, 7, 11, 0.56) 72%);
box-shadow: inset 0 0 13px rgba(0, 0, 0, 0.52), 0 0 12px rgba(143, 114, 61, 0.12);
}
.view:has(.merchant-scene) .mkt-name { color: #f1dfb7; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.view:has(.merchant-scene) .mkt-price { color: #d7bb7e; }
.view:has(.merchant-scene) .mkt-have { color: rgba(203, 193, 169, 0.7); }
.view:has(.merchant-scene) .mkt-step { margin-top: 5px; }
.view:has(.merchant-scene) .ms-b {
color: #cbb47e;
background: rgba(12, 10, 14, 0.7);
border-color: rgba(183, 145, 74, 0.42);
}
.view:has(.merchant-scene) .ms-b:hover { color: #f3ddb0; background: rgba(105, 73, 35, 0.54); }
.view:has(.merchant-scene) .mkt-n { color: #f1dfb7; }
.view:has(.merchant-scene) .mkt-go {
color: #f2dfb8;
background: linear-gradient(180deg, rgba(90, 63, 35, 0.92), rgba(35, 26, 24, 0.98));
border-color: rgba(213, 174, 94, 0.52);
box-shadow: inset 0 1px 0 rgba(255, 233, 181, 0.12), 0 2px 7px rgba(0, 0, 0, 0.42);
}
.view:has(.merchant-scene) .mkt-go:hover:not(:disabled) { filter: brightness(1.2); box-shadow: 0 0 11px rgba(205, 164, 83, 0.24); }
.view:has(.merchant-scene) .mkt-special {
border-color: rgba(220, 176, 86, 0.72);
background:
radial-gradient(50% 100% at 12% 50%, rgba(190, 145, 57, 0.22), transparent 72%),
linear-gradient(180deg, rgba(69, 48, 27, 0.96), rgba(29, 21, 20, 0.98));
box-shadow: inset 0 0 18px rgba(206, 160, 70, 0.12), 0 0 18px rgba(184, 132, 45, 0.16);
}
.view:has(.merchant-scene) .mkt-special .mkt-flag {
color: #f5dfaa;
background: rgba(105, 72, 31, 0.78);
border: 1px solid rgba(226, 183, 96, 0.54);
}
.view:has(.merchant-scene) .mkt-line {
color: rgba(224, 211, 180, 0.84);
padding: 8px 12px;
border-left: 2px solid rgba(185, 148, 81, 0.52);
background: linear-gradient(90deg, rgba(34, 25, 26, 0.62), transparent);
}
.view:has(.merchant-scene) .mkt-foot {
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid rgba(185, 148, 81, 0.26);
}
.view:has(.merchant-scene) .mkt-foot .btn {
color: #f0d8a5;
background: rgba(22, 16, 20, 0.82);
border-color: rgba(201, 163, 87, 0.58);
box-shadow: inset 0 1px 0 rgba(255, 233, 181, 0.1), 0 3px 10px rgba(0, 0, 0, 0.42);
}
.view:has(.merchant-scene) .mkt-week { color: rgba(202, 188, 157, 0.72); }
@media (max-width: 560px) {
.view:has(.merchant-scene) .merchant-scene { margin-left: -2px; margin-right: -2px; padding-left: 10px; padding-right: 10px; }
.view:has(.merchant-scene) .mkt-sell,
.view:has(.merchant-scene) .mkt-want { padding: 7px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
.view:has(.merchant-scene)::after { animation: none; }
.view:has(.merchant-scene) .mkt-cell { transition: none; }
}
.mkt-week {
flex: 1 1 180px;
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--cine-dim);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* ── 海格小摊：温暖、粗粝、带一点神奇生物气息 ── */
.view:has(.stall-scene) { position: relative; isolation: isolate; }
.view:has(.stall-scene)::before {
content: ''; position: absolute; inset: -18px -24px; z-index: -2; pointer-events: none;
background: radial-gradient(38% 28% at 50% 16%, rgba(224, 171, 82, 0.22), transparent 70%), radial-gradient(42% 45% at 16% 70%, rgba(101, 137, 76, 0.2), transparent 72%), linear-gradient(180deg, rgba(61, 38, 23, 0.55), rgba(20, 14, 11, 0.78));
box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.6);
}
.view:has(.stall-scene) .stall-scene { position: relative; margin: 0 -6px var(--sp-3); padding: 10px 16px 14px; text-align: center; background: linear-gradient(180deg, rgba(63, 43, 27, 0.74), rgba(28, 20, 15, 0.7)); border-top: 1px solid rgba(224, 178, 100, 0.42); border-bottom: 1px solid rgba(224, 178, 100, 0.28); box-shadow: 0 12px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,240,190,.08); }
.view:has(.stall-scene) .stall-scene .label { color: rgba(223, 192, 137, 0.86); letter-spacing: .18em; }
.view:has(.stall-scene) .stall-scene .name { color: #f5d99e; text-shadow: 0 0 15px rgba(231, 171, 73, .3), 0 2px 3px rgba(0,0,0,.8); }
.view:has(.stall-scene) .stall-scene .name::after { width: min(72%, 250px); height: 2px; margin-top: 8px; background: linear-gradient(90deg, transparent, #bd8540 18%, #e8c078 50%, #bd8540 82%, transparent); opacity: .9; }
.view:has(.stall-scene) > .chapter { color: #e2ba74; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.view:has(.stall-scene) > .chapter::before { content: '♣'; color: #91a86f; margin-right: 7px; }
.view:has(.stall-scene) .mkt-grid { padding: 9px; border: 1px solid rgba(180, 128, 65, .28); border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255,229,168,.018) 0 1px, transparent 1px 12px), linear-gradient(180deg, rgba(55,36,22,.6), rgba(24,18,14,.72)); box-shadow: inset 0 0 24px rgba(0,0,0,.4); }
.view:has(.stall-scene) .mkt-cell { background: radial-gradient(80% 38% at 50% 0%, rgba(208,160,73,.16), transparent 72%), linear-gradient(180deg, #5a422b, #2a2019); border-color: rgba(221, 176, 93, .42); border-radius: 6px; color: #f2dfbc; box-shadow: inset 0 1px 0 rgba(255,237,183,.1), 0 6px 14px rgba(0,0,0,.42); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.view:has(.stall-scene) .mkt-cell:hover { transform: translateY(-3px) rotate(-.3deg); border-color: rgba(246, 208, 126, .82); box-shadow: 0 10px 18px rgba(0,0,0,.5), 0 0 13px rgba(212,163,77,.18); }
.view:has(.stall-scene) .mkt-art { width: 56px; height: 56px; border-radius: 14px 18px 12px 17px; background: radial-gradient(circle, rgba(228,190,112,.18), rgba(21,16,12,.5) 72%); border: 1px solid rgba(235,194,108,.34); box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 10px rgba(213,164,75,.12); }
.view:has(.stall-scene) .mkt-name { color: #ffe7b1; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.view:has(.stall-scene) .mkt-price { color: #f1c979; }
.view:has(.stall-scene) .mkt-have, .view:has(.stall-scene) .mkt-note { color: rgba(229,211,172,.72); }
.view:has(.stall-scene) .ms-b { color: #e8c984; background: rgba(24,17,12,.66); border-color: rgba(220,170,81,.44); }
.view:has(.stall-scene) .ms-b:hover { background: rgba(131,82,37,.58); color: #fff0c8; }
.view:has(.stall-scene) .mkt-n { color: #ffe6ab; }
.view:has(.stall-scene) .mkt-go { color: #ffecc1; background: linear-gradient(180deg, #8a6035, #4d3220); border-color: rgba(237,195,111,.58); box-shadow: inset 0 1px 0 rgba(255,242,199,.14), 0 3px 8px rgba(0,0,0,.42); }
.view:has(.stall-scene) .mkt-go:hover:not(:disabled) { filter: brightness(1.16); box-shadow: 0 0 12px rgba(233,181,83,.25); }
.view:has(.stall-scene) .mkt-line { color: rgba(238,218,179,.84); padding: 7px 11px; border-left: 2px solid rgba(205,157,76,.58); background: linear-gradient(90deg, rgba(77,49,26,.42), transparent); }
.view:has(.stall-scene) .mkt-cell.short { filter: saturate(.55); opacity: .58; }
.view:has(.stall-scene) .mkt-week { color: rgba(225, 204, 162, .74); }
@media (max-width: 560px) { .view:has(.stall-scene) .stall-scene { margin-left: -2px; margin-right: -2px; padding-left: 10px; padding-right: 10px; } .view:has(.stall-scene) .mkt-grid { padding: 6px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .view:has(.stall-scene) .mkt-cell { transition: none; } }
/* 云游商人的主题定义在上一段；这里保留公共货单布局。 */
------------------------------------------------------------
创作者定的长相：**黑半透明 + 紫边**。结构一点没改（还是 .mkt-cell 那一副，
零件借 ui/shopgrid.js 的 cellHead），只盖颜色——四家店同一副骨架这件事不该破。
============================================================ */
/* 巷子里那块牌子（别处的牌子是棕木，只有他是这一身） */
.room-btn.blackmkt {
background:
radial-gradient(70% 60% at 16% 6%, rgba(168, 132, 255, 0.16), transparent 62%),
linear-gradient(180deg, rgba(22, 17, 38, 0.86), rgba(9, 7, 18, 0.9));
border-color: rgba(158, 120, 232, 0.52);
color: #e6dcff;
}
.room-btn.blackmkt:hover {
background: linear-gradient(180deg, rgba(38, 28, 66, 0.92), rgba(16, 12, 30, 0.94));
border-color: rgba(190, 158, 255, 0.78);
}
.room-btn.blackmkt .rb-zh { color: #f0e8ff; }
.room-btn.blackmkt .rb-sub { color: #b7a2e6; }
/* 摊子那一屏 */
.dark-shop { margin-top: var(--sp-3); }
.dark-shop .mkt-cell {
background:
radial-gradient(70% 55% at 14% 5%, rgba(168, 132, 255, 0.14), transparent 62%),
linear-gradient(180deg, rgba(22, 17, 38, 0.84), rgba(9, 7, 18, 0.88));
border-color: rgba(158, 120, 232, 0.5);
color: #e6dcff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(190, 160, 255, 0.12);
}
.dark-shop .mkt-name { color: #f0e8ff; }
.dark-shop .mkt-price { color: #cbb6f5; }
.dark-shop .mkt-only { color: #b7a2e6; }
/* 卖掉了：留在原位、压暗一档（位置不变，玩家才知道这里本来有过什么） */
.dark-shop .mkt-cell.sold { opacity: 0.5; }
.dark-shop .mkt-go {
color: #f2e9ff;
background: linear-gradient(180deg, #4a3577, #2f2150);
border-color: rgba(158, 120, 232, 0.55);
}
.dark-shop .mkt-go:disabled {
color: rgba(230, 220, 255, 0.4);
background: rgba(30, 24, 48, 0.6);
}
/* 底下那一句：这一周的货就三样，下周他自己换 */
.dark-note {
margin-top: var(--sp-2);
font-size: var(--fs-xs);
line-height: 1.7;
letter-spacing: 0.04em;
text-align: center;
color: #a896cf;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/*
* 斗篷内侧那几张配方上面，他压低嗓子说的那一句（原话在 data/dark.js）。
* 比上面那行说明亮一档、也大一号——它是台词，不是注脚。
*/
.dark-shop .dark-lead {
margin: var(--sp-4) 0 var(--sp-2);
font-size: var(--fs-m);
line-height: 1.8;
color: #e6dcff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* ============================================================
16c · 古灵阁：白色 + 香槟金（妖精的贵族银行）
------------------------------------------------------------
创作者定的调子：高贵 / 典雅 / 纯净，白色大理石 + 细金边 + 柔和暖影。
刻意不要的：现代手机银行、科技金融、赛博朋克、廉价金渐变、发光特效。
所以这里没有 box-shadow 发光、没有动画，装饰只有四样：
顶上一道细金线、一枚金徽、两个对角金括号、一层很淡的大理石纹。
钱本身还是那一套（纳特一个单位，见 data/currency.js）——这里只有皮。
============================================================ */
.gb-card {
position: relative;
width: min(94vw, 26rem);
margin: var(--sp-3) auto 0;
padding: var(--sp-4) var(--sp-4) var(--sp-4);
/* 白大理石：两层很淡的斜纹 + 一层象牙白底，最后才是纯色底（顺序不能反） */
background:
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 9px),
radial-gradient(120% 70% at 50% -10%, rgba(216, 189, 133, 0.22), transparent 60%),
linear-gradient(180deg, #fdfaf3 0%, #f6efe1 100%);
border: 1px solid rgba(184, 147, 63, 0.55);
border-radius: var(--r);
color: #2b2620;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 14px 34px rgba(60, 44, 16, 0.22),
0 2px 0 rgba(184, 147, 63, 0.28);
}
/* 两个对角的金括号（左上 / 右下）：细、短，只压住角，不描整条边 */
.gb-card::before,
.gb-card::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1px solid rgba(184, 147, 63, 0.8);
pointer-events: none;
}
.gb-card::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.gb-card::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
/* 顶上一道细金线（中间亮、两头没有） */
.gb-rule {
height: 1px;
margin-bottom: var(--sp-3);
background: linear-gradient(90deg, transparent, rgba(184, 147, 63, 0.85) 20%, rgba(184, 147, 63, 0.85) 80%, transparent);
}
.gb-top {
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* 金徽：一圈金边 + 一圈细金环，中间一个衬线 G（不是印章动画） */
.gb-seal {
flex: none;
width: 34px;
height: 34px;
display: grid;
place-items: center;
font-family: var(--font-body);
font-size: 17px;
letter-spacing: 0;
color: #8a6a22;
background: radial-gradient(70% 70% at 35% 25%, #fffaf0, #e8d7ae);
border: 1px solid rgba(184, 147, 63, 0.85);
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(138, 106, 34, 0.22);
}
.gb-title { flex: 1; min-width: 0; }
.gb-zh {
font-size: var(--fs-l);
letter-spacing: 0.3em;
line-height: 1.25;
color: #241f18;
}
.gb-en {
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(138, 106, 34, 0.9);
}
.gb-sub {
margin-top: 2px;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: #5c5346;
}
.gb-no {
flex: none;
align-self: flex-start;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: rgba(138, 106, 34, 0.95);
}
.gb-cap,
.gb-log-cap {
margin-top: var(--sp-4);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: #6c6153;
}
.gb-log-cap { margin-bottom: var(--sp-2); }
/* 余额那一行：大号衬线数字 + 小一号档位词 */
.gb-balance {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 10px;
padding: 2px 0 0;
}
.gb-b-part { display: inline-flex; align-items: baseline; gap: 3px; }
.gb-b-n {
font-size: clamp(28px, 8.4vw, 42px);
line-height: 1.05;
letter-spacing: 0.02em;
color: #1f1a13;
font-variant-numeric: lining-nums tabular-nums;
}
.gb-b-u { font-size: var(--fs-xs); letter-spacing: 0.14em; color: #6c6153; }
.gb-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.gb-cell {
padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
border-left: 1px solid rgba(184, 147, 63, 0.5);
}
.gb-k { font-size: var(--fs-xs); letter-spacing: 0.1em; color: #6c6153; }
.gb-v {
margin-top: 1px;
font-size: var(--fs-m);
letter-spacing: 0.02em;
color: #241f18;
font-variant-numeric: tabular-nums;
}
.gb-v.gold { color: #8a6a22; }
.gb-acts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
margin-top: var(--sp-4);
}
/*
* 两颗主按钮：象牙白 + 金边 + 深字。hover 只是边框亮一档、底变暖、一点点金色光泽
*
* ⚠️ 后面那两条选择器不是凑数的：**凡穿古灵阁这身皮的地方，里面每一颗键都是这一颗**。
* 大厅那张卡（.gb-card）与每一张 .gringotts 纸（租赁 / 开店 / 登记 / 今日收摊…）里的按钮
* 原来还是通用那张米黄纸 + 左边一道红条，摆在这块大理石上就是两块白斑
* （创作者 2026-10-19 为这件事点到第四次，原话「不允许在一个深绿色的样式里莫名其妙出现浅色按钮」）。
* 挂在皮肤上而不是挂在那几张纸的调用处 = 以后新加的古灵阁纸自动穿这身。
*/
.btn.gb-btn,
.gb-card .btn,
.sheet.gringotts .btn {
width: auto;
padding: 9px 12px 10px;
font-family: var(--font-body);
font-size: var(--fs-s);
letter-spacing: 0.18em;
color: #2b2620;
background: linear-gradient(180deg, #fffdf7, #f0e6d1);
border: 1px solid rgba(184, 147, 63, 0.75);
border-radius: var(--r);
box-shadow: 0 2px 0 rgba(138, 106, 34, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.btn.gb-btn:hover,
.gb-card .btn:hover,
.sheet.gringotts .btn:hover {
background: linear-gradient(180deg, #fffef9, #e9dcbf);
border-color: rgba(206, 168, 82, 0.95);
transform: translateY(-1px);
}
.btn.gb-btn:active,
.gb-card .btn:active,
.sheet.gringotts .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(138, 106, 34, 0.2); }
.btn.gb-btn:disabled,
.gb-card .btn:disabled,
.sheet.gringotts .btn:disabled { opacity: 0.5; transform: none; box-shadow: 0 2px 0 rgba(138, 106, 34, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.gb-dates {
margin-top: var(--sp-4);
padding-top: var(--sp-2);
border-top: 1px solid rgba(184, 147, 63, 0.35);
font-size: var(--fs-xs);
line-height: 1.9;
letter-spacing: 0.06em;
color: #5c5346;
}
/* 流水：整块自己滚（最多存 40 条，见 data/bank.js） */
.gb-log {
max-height: 210px;
overflow-y: auto;
padding-right: 2px;
}
.gb-day {
margin: var(--sp-2) 0 2px;
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(138, 106, 34, 0.95);
}
.gb-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
padding: 4px 0;
border-bottom: 1px solid rgba(184, 147, 63, 0.18);
font-size: var(--fs-s);
}
.gb-kind { letter-spacing: 0.12em; color: #4a4238; }
.gb-kind.interest { color: #8a6a22; }
.gb-amt { font-variant-numeric: tabular-nums; }
.gb-amt.in { color: #3f6b45; }
.gb-amt.out { color: #8a3b34; }
.gb-empty {
padding: var(--sp-2) 0;
font-size: var(--fs-xs);
line-height: 1.7;
color: #6c6153;
}
/* ── 存 / 取那两张面板里的零件（压在羊皮纸那张纸上） ── */
.gb-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
padding: 3px 0;
font-size: var(--fs-s);
color: var(--ink-soft);
}
.gb-line .gb-v { color: var(--ink); }
.gb-field {
display: flex;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-2) 0;
}
.gb-input {
flex: 1;
min-width: 0;
padding: 7px 10px;
font-family: var(--font-body);
font-size: var(--fs-l);
letter-spacing: 0.06em;
color: #241f18;
background: #fffdf7;
border: 1px solid rgba(184, 147, 63, 0.7);
border-radius: var(--r);
box-shadow: inset 0 1px 3px rgba(120, 95, 45, 0.16);
}
.gb-input:focus { outline: none; border-color: rgba(206, 168, 82, 1); }
.gb-unit { font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--ink-soft); }
.gb-all {
padding: 3px 10px 4px;
font-family: var(--font-body);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
color: #2b2620;
background: linear-gradient(180deg, #fffdf7, #f0e6d1);
border: 1px solid rgba(184, 147, 63, 0.6);
border-radius: var(--r);
cursor: pointer;
}
.gb-all:hover { border-color: rgba(206, 168, 82, 0.95); }
.gb-live {
margin-top: var(--sp-2);
font-size: var(--fs-xs);
line-height: 1.7;
letter-spacing: 0.04em;
color: #8a6a22;
}
/*
* 存 / 取那两张面板：也穿古灵阁这身（openSheet 的 skin: 'gringotts'，见 ui/bank.js）。
* 金库那一屏是白的，点开的两张纸却是羊皮卷 + 红描边——同一件事换了一间屋子，
* 所以这一身从卡片上抄下来：同一层大理石纹、同一条金边、同一族字色。
* 顶栏那道**红色**的粗下划线换成金细线（红是全游戏「危险 / 花钱」的颜色，
* 存钱不是）。那枚叉本来就是一块米色小方牌，压在象牙白上正合适，不动它。
*/
.sheet.gringotts {
background-image:
repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 9px),
radial-gradient(120% 70% at 50% -10%, rgba(216, 189, 133, 0.22), transparent 60%),
linear-gradient(180deg, #fdfaf3 0%, #f6efe1 100%);
background-size: auto, auto, auto;
border: 1px solid rgba(184, 147, 63, 0.6);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--fg: #241f18;
--fg-dim: #6c6153;
--fg-accent: #8a6a22;
color: #241f18;
}
.sheet.gringotts .sheet-head {
border-bottom: 1px solid rgba(184, 147, 63, 0.6);
box-shadow: none;
}
.sheet.gringotts .sheet-head h2 {
letter-spacing: 0.2em;
color: #241f18;
}
.sheet.gringotts .muted,
.sheet.gringotts .tiny { color: #6c6153; }
.sheet.gringotts .gb-line { border-bottom: 1px solid rgba(184, 147, 63, 0.18); }
/* 窄屏：两列的（利率/收益、两颗按钮）落成两行，余额那行本来就会 wrap */
@media (max-width: 380px) {
.gb-pair,
.gb-acts { grid-template-columns: minmax(0, 1fr); }
.gb-zh { letter-spacing: 0.2em; }
}
/*
* 出售那扇小窗摆的是**背包那种方块**（.bag-grid / .tile，见 ui/screens-alley.js
* 的 openSellPotion）——它本来就是一扇背包样子的窗户，方块不必另配一套皮。
*/
@media (prefers-reduced-motion: reduce) {
.ms-b, .mkt-go { transition-duration: 0.01ms; }
}
/* ============================================================
24 · 对角巷：一条街、九家门脸，以及那口随身小锅
============================================================ */
/*
* 街上那一行说明（压在照片上，所以取暖白那一族，不用纸上的墨色）。
* 和城堡那几层地图的 .place-hint 是同一类东西，只是这一屏没有屋子，
* 那句话该贴在牌子**上面**，不是压在画面底下。
*/
.alley-note {
margin: 0 0 var(--sp-2);
padding: 0 var(--sp-4);
text-align: center;
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--cine-dim);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
}
/*
* 店名太长的那几块牌子（弗洛林·福斯特克冰淇淋店 / 奥利凡德魔杖店 / 摩金夫人长袍店）。
* 便签是并排钉的，一块顶出两行就会把整排推歪——所以名字缩一档、副名跟着缩，
* 并且容得下换行（不换行的话 nowrap 会把牌子撑破屏幕）。
*/
.place.small {
padding: var(--sp-2) var(--sp-3);
min-width: 5.2em;
max-width: 11.5em;
}
.place.small .place-name,
.place-name.sm { font-size: var(--fs-s); letter-spacing: 0.02em; }
.place.small .place-sub {
font-size: 8.5px;
white-space: normal;
letter-spacing: 0.03em;
}
/*
* 「灰掉、按住的一扇门」这一种样式整段撤了（原来是 .place.is-off / .place:disabled，
* 给帕特奇那口锅买过之后的坩埚店用）。
*
* 撤的理由是创作者提的那个问题：买完东西回头一看，那家店灰了、点不动，
* 玩家以为是自己把它弄坏了。**店不会因为你买过就关门**——
* 现在门照样推得开，进去是那只空了的柜台（见 ui/screens-alley.js 的 renderCauldronEmpty）。
*
* 别把它加回来：地图上的便签（城堡那三层、这条街）现在没有一处该是 disabled 的。
* 「这件事现在做不成」的说法有的是别的（门口摊一张纸、柜台空着、货格上写「今天买满了」），
* 唯独不该是一扇推不开的门。
*/
/* 还没开张的那三家：一张纸、一枚「敬请期待」的红印。 */
.soon-card {
position: relative;
text-align: center;
padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.soon-tag {
display: inline-block;
margin-bottom: var(--sp-3);
padding: 3px 14px 4px;
border: 1.5px solid var(--red);
border-radius: var(--r);
color: var(--red);
font-size: var(--fs-s);
letter-spacing: 0.32em;
text-indent: 0.32em; /* 最后一个字别贴着边 */
transform: rotate(-1.6deg);
}
/*
* 那枚印里放中英一对字时（装备那一屏就是「敬请期待 / Coming Soon」）：
* 外面的字距与缩进让给里面两个 span 各自管，不然中文那四个字会被顶偏。
*/
.soon-tag.has-duo { letter-spacing: 0; text-indent: 0; }
.soon-tag.has-duo .duo-zh { letter-spacing: 0.32em; }
.soon-tag.has-duo .duo-en { letter-spacing: 0.08em; opacity: 0.8; }
/* ============================================================
25b · 装备：背包里那一行，以及门后那一屏
============================================================ */
/*
* 背包里单开的那一行（创作者指的位置：学院那一行下面）。
*
* 左边是栏目名「装备 / Equipment」，右边横躺着一根魔杖，整行点得动。
* 它是**一块钉在纸上的窄木牌**，不是一条普通的按钮：
* 纸色底、细边、下沿压一道实边，看着和上面那枚院徽是同一张纸上的东西。
*/
.bag-gear {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
margin: 0 0 var(--sp-3);
padding: 6px var(--sp-3);
font-family: var(--font-body);
color: var(--ink);
text-align: left;
background: rgba(255, 251, 240, 0.5);
border: 1px solid rgba(64, 48, 31, 0.28);
border-bottom-color: rgba(64, 48, 31, 0.42);
border-radius: var(--r);
cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.bag-gear:hover { border-color: var(--red); background: rgba(255, 251, 240, 0.78); }
.bag-gear:active { transform: translateY(1px); }
.bag-gear-label { flex: none; font-size: var(--fs-m); font-weight: 700; }
.bag-gear-label .duo-en { font-weight: 400; }
/*
* 木牌左下角那行小字：你挑的那根杖叫什么（木 · 芯）。
* 没挑过就没有这一行——那张牌上只留「装备 Equipment」。
*/
.bag-gear-wandname {
display: block;
margin-top: 1px;
font-size: var(--fs-xs);
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ink-soft);
}
/*
* 横躺的那根魔杖。
*
* ⚠️ 素材是**竖着的**（杖柄在上，比例差不多 1:7），这里要它横过来，所以整张图转 90°。
* 麻烦在于**旋转不改布局**：转完那根杖该占多长，浏览器不会自己算，
* 得由盒子先说好「转之前它是多大一块」。硬写一个长度（比如 240px）在窄屏上
* 会撑出这张纸，所以这里让长度**自己长出来**：
*
* 窄道（.bag-gear-wand）固定 34px 高 —— 这是杖的「厚」
* 方盒（.wand-turn）宽 = 窄道剩下的宽，高 = 宽（正方，绝对定位，不占版面）
* 图（.bag-gear-art）厚 34 × 高 100%（= 方盒的高 = 窄道宽），再转 90°
*
* 于是：杖的长 = 窄道剩多宽，而 contain 又保证它缩在这个框里、
* 最厚不超过 34px（按 1:7 长过头就反过来按厚度封顶）。
* 换句话说，**这两个数是一对：厚 × 长**，别把 34px 单独改掉。
*/
.bag-gear-wand {
position: relative;
flex: 1 1 auto;
height: 34px;
min-width: 0;
}
/*
* 正方幽灵盒：要的就是「高 = 宽」这个数，好让里面那张图拿到手。
*
* ⚠️ `pointer-events: none` **不是可选的**，删了会出一个很难查的怪事：
* 这个盒子的高 = 它自己的宽（一整行的宽度，两三百 px），比那条窄木牌
* （约 48px 高）高出四五倍。`top: 50%` + `translateY(-50%)` 之后它上下**各溢出
* 约 (宽−34)/2 ≈ 90~130px**，正好压住上面那一行抬头（学院徽章 + 随身坩埚）。
* 它是 `.bag-gear`（一颗 button）的后代，所以那一片的悬停与点击**全归装备**：
* 看着那行无缘无故亮起来，抬手去点锅，打开的是装备。
* 透明不等于不存在——它只是一层用来量尺寸的框，不该接任何点击，
* 所以这里关掉它的指针事件，让点哪儿都穿过去（魔杖本身在木牌范围内，
* 点魔杖仍然由 `.bag-gear` 收到，那条路不受影响）。
*/
.wand-turn {
position: absolute;
left: 0;
top: 50%;
width: 100%;
aspect-ratio: 1 / 1;
transform: translateY(-50%);
pointer-events: none;
}
/*
* 木牌自己裁一下：把那个溢出盒子的**视觉**也收在木牌里面。
* 上一条管点击，这一条管「别让透明的一层飘到下面钱袋与标签行上」——
* 魔杖是居中画的（厚 34px，木牌加内边距约 48px 高），裁不到它。
*/
.bag-gear { overflow: hidden; }
.bag-gear-art {
position: absolute;
top: 50%;
left: 50%;
/* 34px = 转完之后的「厚」；高 100% = 转完之后的「长」 */
width: 34px;
height: 100%;
object-fit: contain;
/* 转的是「柄朝右」：rotate(90deg) 顺时针，图顶那一段（杖柄）转到右边来 */
transform: translate(-50%, -50%) rotate(90deg);
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
/*
* 轻轻漂一下（创作者 2026-10-14 要的：和装备面板那根杖同一种"悬着"的感觉）。
* ⚠️ 幅度**很小**（±2px）：这是背包里的一行，不是舞台上的主角；
* keyframes 里必须把上面那句 translate + rotate 一起写全——不然动画一跑，
* 杖就跳回竖着的原样（transform 会整条被覆盖）。
*/
animation: bagWandFloat 4.6s ease-in-out infinite;
}
@keyframes bagWandFloat {
0%, 100% { transform: translate(-50%, calc(-50% - 2px)) rotate(90deg); }
50% { transform: translate(-50%, calc(-50% + 2px)) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.bag-gear-art { animation: none; }
}
/*
* 背包抬头右边那颗小坩埚。
*
* 三条硬要求：小、不许捅出这张纸的边、右边还得留出位置给以后要加的功能。
* 所以：不抢中间那行字的宽度（flex 不 grow）、整颗收到抬头那条分隔线以内、
* 图标按**高度**定尺寸（图是透明底的方锅，宽度跟着比例走才不会拉变形）。
*/
.ledger-pot {
flex: 0 0 auto;
margin-left: auto; /* 靠右边缘站 */
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
padding: 3px 4px 2px;
background: none;
border: 0;
border-radius: var(--r);
cursor: pointer;
opacity: 0.86;
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.14s ease, background 0.14s ease;
}
.ledger-pot:hover {
opacity: 1;
background: rgba(140, 47, 47, 0.09);
transform: translateY(-1px);
}
.ledger-pot:active { transform: translateY(1px) scale(0.97); }
.ledger-pot-art {
display: block;
height: 30px;
width: auto;
max-width: 44px; /* 再宽的图也压不出这一格 */
object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}
.ledger-pot-tx {
font-family: var(--font-hand);
font-size: 9.5px;
line-height: 1.2;
letter-spacing: 0.04em;
color: var(--ink-soft);
white-space: nowrap;
}
/* 窄屏：抬头那一行本来就挤，字让掉，只留锅 */
@media (max-width: 420px) {
.ledger-pot-tx { display: none; }
.ledger-pot-art { height: 26px; }
}
/*
* 点不动的那一项（咿啦猫头鹰商店那张羊皮纸）。
*
* 它照样摊在框上方，只是按下去没有反应——「有这条路，但现在走不通」。
* 序号留着：不然下面那一项会从 2 变成 1，键盘党按 1 会选错。
*/
.vn-choice.off {
opacity: 0.44;
cursor: not-allowed;
border-style: dashed;
filter: saturate(0.4);
}
.vn-choice.off:hover {
transform: rotate(var(--tilt));
border-color: rgba(64, 48, 31, 0.44);
}
.vn-choice.off .lbl { color: var(--ink-soft); }
/* ============================================================
25 · 种植箱下面那三格塌过的土
============================================================ */
/*
* 第二排：上面三格是开学就有的，下面那三格塌着。
* 中间那道虚线是「这是一排新东西」的界线——不是同一条土。
*/
.bed-row-shut {
margin-top: 0;
padding-top: var(--sp-3);
border-top: 1px dashed rgba(158, 200, 146, 0.22);
}
/*
* 塌着的那一格。
*
* 压暗、虚线边、锁——但不能压到看不见：玩家得看得出「这儿本来该有三格土」，
* 才知道有东西可以修。所以它不是 `display:none`，也不是灰到糊掉。
*/
.bed.locked {
border-style: dashed;
border-color: rgba(158, 200, 146, 0.18);
background:
linear-gradient(180deg, rgba(232, 240, 224, 0.03), transparent 40%),
rgba(14, 20, 15, 0.5);
color: var(--cine-dim);
opacity: 0.74;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36);
}
.bed.locked:hover {
background: rgba(26, 36, 26, 0.62);
border-color: rgba(158, 200, 146, 0.3);
transform: translateY(-1px);
}
.bed.locked .bed-art { font-size: 24px; opacity: 0.55; }
.bed.locked .bed-act { color: var(--cine-dim); }
/*
* 轮得到的那一格：比后面两格亮一档。
* 土是一格一格往上翻的，三格长得一模一样的话，玩家会挨个点过去试哪一格能修。
*/
.bed.locked.next {
opacity: 0.94;
border-color: rgba(224, 178, 100, 0.42);
}
.bed.locked.next .bed-state { color: var(--cine-gold); }
.bed.locked.next .bed-act { color: var(--cine-gold); }
.bed.locked.next:hover { transform: translateY(-2px); }
/* ============================================================
25b · 兽栏（海格小屋后面那两栏）
------------------------------------------------------------
一栏一张面板，**收着**是窄窄一条、摊开占满一整行（点抬头那一条展开 / 收起）：
抬头 整条就是开关：徽章 + 栏名 + 英文名 + 这一栏的现状 + 折角箭头；
摊开 上排（栏舍画框 + 产出卡）、下排（干草槽 / 窝·桶 两格）、底上买按钮。
两栏同时摊开会挤（创作者点过这个问题），所以默认都收着，一次摊一栏看。
图是 assets.js 的 PEN_BARN_ART / PEN_BIN_ART / HAY_TROUGH_ART 那五张，
同一副暖灯笼光的暗棕木底插画，压在暗卡片上不串味。
============================================================ */
.pen-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: var(--sp-4);
align-items: start;
}
/* ── 兽栏视觉重制：木栏、草地与两种栏舍的独立气质 ── */
.view:has(.pasture-scene) { position: relative; isolation: isolate; }
.view:has(.pasture-scene)::before {
content: ''; position: absolute; inset: -22px -26px; z-index: -2; pointer-events: none;
background:
radial-gradient(38% 24% at 50% 12%, rgba(224, 180, 100, .2), transparent 72%),
radial-gradient(45% 48% at 15% 72%, rgba(108, 143, 76, .22), transparent 74%),
linear-gradient(180deg, rgba(39, 31, 21, .48), rgba(12, 17, 13, .78));
box-shadow: inset 0 0 88px rgba(0,0,0,.58);
}
.view:has(.pasture-scene) .pasture-scene {
position: relative; margin: 0 -6px var(--sp-3); padding: 10px 16px 14px; text-align: center;
background: linear-gradient(180deg, rgba(65, 48, 29, .7), rgba(25, 24, 18, .72));
border-top: 1px solid rgba(221, 177, 95, .42); border-bottom: 1px solid rgba(160, 143, 86, .28);
box-shadow: 0 12px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,242,193,.08);
}
.view:has(.pasture-scene) .pasture-scene .label { color: rgba(213, 190, 139, .86); letter-spacing: .2em; }
.view:has(.pasture-scene) .pasture-scene .name { color: #f3d89f; text-shadow: 0 0 16px rgba(226, 174, 77, .3), 0 2px 3px rgba(0,0,0,.86); }
.view:has(.pasture-scene) .pasture-scene .name::after { width: min(72%, 280px); height: 2px; margin-top: 8px; background: linear-gradient(90deg, transparent, #aa8244 18%, #e9c67e 50%, #aa8244 82%, transparent); opacity: .9; }
.view:has(.pasture-scene) .pen-wrap { gap: 14px; }
.view:has(.pasture-scene) .pen {
position: relative; overflow: hidden; padding: 9px;
border: 1px solid rgba(190, 151, 82, .44); border-radius: 9px;
background: repeating-linear-gradient(90deg, rgba(255, 225, 159, .018) 0 1px, transparent 1px 13px), linear-gradient(180deg, rgba(48, 40, 27, .9), rgba(17, 22, 16, .92));
box-shadow: inset 0 1px 0 rgba(255,239,190,.08), 0 9px 22px rgba(0,0,0,.46);
}
.view:has(.pasture-scene) .pen::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
background: repeating-linear-gradient(90deg, rgba(176, 126, 65, .7) 0 24px, rgba(91, 67, 38, .7) 24px 48px);
}
.view:has(.pasture-scene) .pen-head-in { position: relative; z-index: 1; }
.view:has(.pasture-scene) .btn.pen-fold { background: rgba(23, 28, 19, .68); border-color: rgba(193, 157, 88, .36); }
.view:has(.pasture-scene) .btn.pen-fold:hover { background: rgba(76, 66, 36, .5); border-color: rgba(232, 194, 113, .72); }
.view:has(.pasture-scene) .pen-title { color: #f2d59b; }
.view:has(.pasture-scene) .pen-en { color: rgba(200, 187, 148, .68); }
.view:has(.pasture-scene) .pen-glance { color: rgba(211, 199, 164, .75); }
.view:has(.pasture-scene) .pen-main { gap: 10px; }
.view:has(.pasture-scene) .pen-art { border-color: rgba(194, 157, 87, .46); border-radius: 6px; box-shadow: inset 0 0 28px rgba(0,0,0,.68), 0 4px 12px rgba(0,0,0,.35); }
.view:has(.pasture-scene) .pen-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 28%, rgba(255,239,183,.13) 48%, transparent 65%); opacity: .62; }
.view:has(.pasture-scene) .pen-herd { background: linear-gradient(rgba(12,10,5,0), rgba(12,10,5,.9)); }
.view:has(.pasture-scene) .pen-slot { filter: drop-shadow(0 0 5px rgba(239, 195, 102, .36)); }
.view:has(.pasture-scene) .pen-slot:not(.on) { border-color: rgba(222, 202, 155, .42); }
.view:has(.pasture-scene) .pen-yield,
.view:has(.pasture-scene) .pen-box { border-color: rgba(187, 150, 81, .32); border-radius: 6px; background: linear-gradient(180deg, rgba(76, 61, 37, .56), rgba(22, 26, 19, .72)); box-shadow: inset 0 1px 0 rgba(255,238,182,.06); }
.view:has(.pasture-scene) .pen-y-name,
.view:has(.pasture-scene) .pen-box-title { color: #eed49b; }
.view:has(.pasture-scene) .pen-y-every,
.view:has(.pasture-scene) .pen-box-state { color: rgba(210, 198, 163, .72); }
.view:has(.pasture-scene) .pen-y-next { border-color: rgba(193, 157, 88, .3); color: #daba78; }
.view:has(.pasture-scene) .pen-box-art { border-color: rgba(191, 150, 79, .36); background: #191a12; }
.view:has(.pasture-scene) .hay-slot { background: rgba(205, 193, 143, .08); border-color: rgba(222, 202, 155, .3); }
.view:has(.pasture-scene) .hay-slot.on { background: linear-gradient(180deg, #b8c96c, #637b3b); border-color: #d8df91; box-shadow: 0 0 7px rgba(169, 201, 92, .28), inset 0 -4px 7px rgba(0,0,0,.3); }
.view:has(.pasture-scene) .bin-chip { color: #e5c477; background: rgba(186, 143, 70, .16); border-color: rgba(218, 173, 89, .46); }
.view:has(.pasture-scene) .pen-buy { border-color: rgba(193, 157, 88, .28); }
.view:has(.pasture-scene) .pen-buy-left { color: rgba(211, 195, 155, .72); }
.view:has(.pasture-scene) .pen-buy .btn,
.view:has(.pasture-scene) .pen-box .btn { color: #f3dca8; background: linear-gradient(180deg, rgba(105, 74, 39, .94), rgba(43, 31, 21, .98)); border-color: rgba(222, 178, 91, .56); box-shadow: inset 0 1px 0 rgba(255,239,184,.12), 0 3px 8px rgba(0,0,0,.4); }
.view:has(.pasture-scene) .pen.is-shut { background: rgba(20, 24, 18, .6); border-color: rgba(166, 143, 91, .3); }
.view:has(.pasture-scene) .pen.is-shut .pen-title { color: rgba(220, 199, 151, .68); }
.view:has(.pasture-scene) .pen.is-shut .pen-shut-line { color: rgba(197, 190, 166, .62); }
/* 鸡栏：偏暖的干草金；牛栏：偏深的苔绿。两栏不再只是换个 emoji。 */
.view:has(.pasture-scene) .pen:nth-child(1) { --pen-accent: #d8ad61; }
.view:has(.pasture-scene) .pen:nth-child(2) { --pen-accent: #9bb17b; border-color: rgba(142, 169, 113, .48); background: repeating-linear-gradient(90deg, rgba(185, 213, 153, .018) 0 1px, transparent 1px 13px), linear-gradient(180deg, rgba(35, 51, 31, .9), rgba(14, 22, 16, .94)); }
.view:has(.pasture-scene) .pen:nth-child(2)::before { background: repeating-linear-gradient(90deg, rgba(116, 151, 91, .75) 0 24px, rgba(57, 87, 53, .75) 24px 48px); }
.view:has(.pasture-scene) .pen:nth-child(2) .pen-title,
.view:has(.pasture-scene) .pen:nth-child(2) .pen-box-title { color: #c4d69c; }
.view:has(.pasture-scene) .pen:nth-child(2) .pen-y-next { color: #b7ca8c; }
@media (max-width: 560px) { .view:has(.pasture-scene) .pasture-scene { margin-left: -2px; margin-right: -2px; padding-left: 10px; padding-right: 10px; } .view:has(.pasture-scene) .pen-main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .view:has(.pasture-scene) .pen-art::after { display: none; } .view:has(.pasture-scene) .pen, .view:has(.pasture-scene) .pen-art { transition: none; } }
/*
* 家里农庄的鸡栏牛栏：面板/交互**照搬**海格屋后那座兽栏（同一份 DOM、同一套尺寸），
* 只有颜色从深绿换成深棕（创作者 2026-10-18 点的：UI 一样，绿改棕）。
*/
.view:has(.pasture-scene.home-pasture)::before {
background:
radial-gradient(38% 24% at 50% 12%, rgba(224, 180, 100, .2), transparent 72%),
radial-gradient(45% 48% at 15% 72%, rgba(148, 108, 60, .18), transparent 74%),
linear-gradient(180deg, rgba(39, 31, 21, .48), rgba(17, 12, 8, .78));
}
.view:has(.pasture-scene.home-pasture) .btn.pen-fold {
background: rgba(40, 28, 16, .72);
border-color: rgba(193, 157, 88, .36);
}
.view:has(.pasture-scene.home-pasture) .btn.pen-fold:hover {
background: rgba(92, 64, 36, .55);
border-color: rgba(232, 194, 113, .72);
}
.view:has(.pasture-scene.home-pasture) .pen {
background:
repeating-linear-gradient(90deg, rgba(255, 225, 159, .018) 0 1px, transparent 1px 13px),
linear-gradient(180deg, rgba(48, 40, 27, .9), rgba(24, 16, 9, .94));
}
.view:has(.pasture-scene.home-pasture) .pen-yield,
.view:has(.pasture-scene.home-pasture) .pen-box {
background: linear-gradient(180deg, rgba(76, 58, 35, .56), rgba(28, 19, 11, .74));
}
.view:has(.pasture-scene.home-pasture) .pen-box-art { background: #17120c; }
.view:has(.pasture-scene.home-pasture) .pen.is-shut {
background: rgba(28, 20, 12, .62);
border-color: rgba(166, 143, 91, .3);
}
.view:has(.pasture-scene.home-pasture) .pen:nth-child(2) {
--pen-accent: #c49a5b;
border-color: rgba(190, 151, 82, .48);
background:
repeating-linear-gradient(90deg, rgba(255, 225, 159, .018) 0 1px, transparent 1px 13px),
linear-gradient(180deg, rgba(55, 40, 24, .9), rgba(22, 15, 9, .94));
}
.view:has(.pasture-scene.home-pasture) .pen:nth-child(2)::before {
background: repeating-linear-gradient(90deg, rgba(176, 126, 65, .75) 0 24px, rgba(91, 67, 38, .75) 24px 48px);
}
.view:has(.pasture-scene.home-pasture) .pen:nth-child(2) .pen-title,
.view:has(.pasture-scene.home-pasture) .pen:nth-child(2) .pen-box-title { color: #eed49b; }
.view:has(.pasture-scene.home-pasture) .pen:nth-child(2) .pen-y-next { color: #daba78; }
.view:has(.pasture-scene.home-pasture) .hay-slot.on {
background: linear-gradient(180deg, #d8b36a, #8a5b2c);
border-color: #f0d19a;
box-shadow: 0 0 7px rgba(224, 178, 100, .28), inset 0 -4px 7px rgba(0, 0, 0, .3);
}
.pen {
padding: var(--sp-2);
border: 1px solid rgba(224, 178, 100, 0.28);
border-radius: var(--r);
background: rgba(14, 20, 15, 0.58);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
/*
* 摊开的那一栏占满整行——它里面有画框、有产出卡、有两格槽，
* 半行宽放不下（挤成一团正是要修的那个毛病）。
*/
.pen.is-open { grid-column: 1 / -1; }
.pen.is-open .pen-head-in { margin-bottom: var(--sp-2); }
/* ── 抬头（整条是开关） ── */
.pen-head-in {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--sp-2);
width: 100%;
min-width: 0;
}
.pen-icon {
flex: none;
font-size: var(--fs-l);
line-height: 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.pen-title {
flex: none;
font-family: var(--font-hand);
font-size: var(--fs-l);
letter-spacing: 0.06em;
color: var(--cine-text);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.pen-en {
flex: none;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--cine-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* 收着时那行现状：**自己占一整行**（basis 100%），左对齐压在徽章那一行下面。
* 不让它跟栏名挤在同一行——那行字有长有短，挤着就会折得七零八落、箭头也跟着飘。
*/
.pen-glance {
flex: 1 1 100%;
min-width: 0;
margin-top: 2px;
font-size: var(--fs-xs);
letter-spacing: 0.04em;
color: var(--cine-dim);
overflow-wrap: anywhere;
}
/* 槽空着、栏里又养着东西：「今天白养着」，最该刺眼的一句 */
.pen-glance.warn { color: #e07a5f; }
/* 折角箭头：留在第一行行尾（现状那一行在它后面自己换行） */
.pen-caret { flex: none; margin-left: auto; font-size: var(--fs-s); color: var(--cine-gold); }
/*
* 那一条抬头按钮：盖掉 .btn 那副羊皮纸身板（它是一整条暗底，不是一颗纸按钮）。
* 宽度撑满、不左对齐地把内容交回 .pen-head-in 自己排。
*/
.btn.pen-fold {
width: 100%;
text-align: left;
padding: var(--sp-2) var(--sp-3);
background: rgba(244, 233, 212, 0.06);
border: 1px solid rgba(224, 178, 100, 0.26);
border-radius: var(--r);
box-shadow: none;
}
.btn.pen-fold:hover {
background: rgba(244, 233, 212, 0.12);
border-color: rgba(224, 178, 100, 0.5);
transform: none;
box-shadow: none;
}
.btn.pen-fold:active { transform: scale(0.995); box-shadow: none; }
/* 塌着那一栏的抬头不是按钮，但长得一样（只是没有折角箭头） */
.pen-head-in.is-static { padding: var(--sp-2) var(--sp-3); opacity: 0.85; }
/* ── 上排：栏舍画框 + 产出卡 ── */
.pen-main {
display: grid;
grid-template-columns: 3fr 2fr;
gap: var(--sp-2);
align-items: stretch;
}
.pen-art {
position: relative;
overflow: hidden;
border: 1px solid rgba(224, 178, 100, 0.35);
border-radius: var(--r);
background: #17110b;
box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.65);
}
.pen-art-img {
display: block;
width: 100%;
height: 100%;
min-height: 150px;
object-fit: cover;
}
/* 牲口槽一排：养着的亮成徽章、没买的留虚线空槽——还装得下几只一眼数出来 */
.pen-herd {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
gap: 3px;
padding: 14px 6px 5px;
background: linear-gradient(rgba(10, 8, 4, 0), rgba(10, 8, 4, 0.82));
}
.pen-slot {
width: 19px;
height: 19px;
font-size: 14px;
line-height: 19px;
text-align: center;
}
.pen-slot:not(.on) {
border: 1px dashed rgba(244, 233, 212, 0.38);
border-radius: 50%;
opacity: 0.55;
}
.pen-yield {
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2);
border: 1px solid rgba(224, 178, 100, 0.22);
border-radius: var(--r);
background: rgba(244, 233, 212, 0.06);
}
.pen-y-row { display: flex; align-items: center; gap: 6px; }
/* 产出的小图：真图按 20px 画，emoji 占位照字号 */
.pen-y-icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
font-size: 17px;
line-height: 1;
}
.pen-y-icon-img { width: 20px; height: 20px; object-fit: contain; }
.pen-y-name {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-s);
color: var(--cine-text);
}
.pen-y-every {
flex: none;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--cine-dim);
}
.pen-y-next {
margin-top: auto;
display: flex;
align-items: center;
gap: 6px;
padding-top: var(--sp-2);
border-top: 1px dotted rgba(224, 178, 100, 0.22);
font-size: var(--fs-xs);
color: var(--cine-dim);
}
/* 产不出（槽空 / 栏空）：这块牌要刺眼一点 */
.pen-y-next.warn { color: #e07a5f; }
.pen-y-clock { font-size: 13px; line-height: 1; }
/* ── 下排：干草槽 / 窝·桶 两格 ── */
.pen-boxes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.pen-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--sp-2) var(--sp-2) var(--sp-3);
border: 1px solid rgba(224, 178, 100, 0.22);
border-radius: var(--r);
background: rgba(244, 233, 212, 0.06);
text-align: center;
}
.pen-box-title {
font-size: var(--fs-s);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--cine-text);
}
.pen-box-art {
width: 100%;
overflow: hidden;
border: 1px solid rgba(224, 178, 100, 0.25);
border-radius: var(--r);
background: #17110b;
}
.pen-box-art img {
display: block;
width: 100%;
height: 86px;
object-fit: cover;
}
/* 干草一天一格：亮着 = 槽里还能撑几天（一共 HAY_DAYS 格） */
.hay-slots { display: flex; justify-content: center; gap: 5px; }
.hay-slot {
width: 15px;
height: 15px;
border: 1px solid rgba(244, 233, 212, 0.3);
border-radius: 3px;
background: rgba(244, 233, 212, 0.08);
}
.hay-slot.on {
background: #7d9b4f;
border-color: #a3c46d;
box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.28);
}
.pen-box-state {
font-size: var(--fs-xs);
line-height: 1.6;
color: var(--cine-dim);
overflow-wrap: anywhere;
}
/* 槽空着、栏里又养着东西：「今天白养着」，最该刺眼的一句 */
.pen-box.warn .pen-box-state { color: #e07a5f; }
/* 攒着东西：chips 亮一档——这是玩家来这一趟的理由 */
.bin-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.bin-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 9px;
border: 1px solid rgba(224, 178, 100, 0.42);
border-radius: 999px;
background: rgba(224, 178, 100, 0.13);
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--cine-gold);
}
.bin-chip-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.bin-chip-icon-img { width: 16px; height: 16px; object-fit: contain; }
/* ── 底上：买 ── */
.pen-buy {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-top: var(--sp-3);
padding-top: var(--sp-2);
border-top: 1px dotted rgba(224, 178, 100, 0.2);
}
.pen-buy-left {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--cine-dim);
}
/* 「满了」这类没法按的说明（摆在那儿，但不抢戏） */
.pen-full {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--cine-dim);
}
/*
* 塌着的那一栏：同一副面板骨架，虚线压暗——但不能压到看不见：
* 玩家得看出「这里本来该有一栏」，才知道有东西可以请人清
* （和塌着的那三格土同一处理）。
*/
.pen.is-shut {
border-style: dashed;
border-color: rgba(224, 178, 100, 0.24);
background: rgba(14, 20, 15, 0.42);
}
.pen.is-shut .pen-head { opacity: 0.72; }
.pen-shut-line {
margin: 0 0 var(--sp-3);
font-size: var(--fs-s);
line-height: 1.8;
color: var(--cine-dim);
}
.pen-foot { display: flex; justify-content: flex-start; }
/* ============================================================
26 · （空）丽痕那三摞书
------------------------------------------------------------
这一栏原先是「一行一摞 + 左边一张小图」（.row.row-art / .row-thumb）。
三摞书改成货格摆法之后那两个类没人在挂了，整段删掉——
留着一段没人挂的类，等于给下一个人留一个「这还有人用吗」的问号。
============================================================ */
/* ============================================================
27 · 寝室门牌，以及「他个人的界面」
============================================================ */
/*
* 宿舍区里那扇门。
*
* 一块深灰的长方牌，最前头压着这个人的**学院院徽**，牌子颜色跟着院徽走
* （四个学院的深灰，见 data/houses.js 的 HOUSE_PLATE）。
* 院徽是这块牌子上最该被认出来的东西，所以它压在最上面、
* 而且比牌子高出一头——参考图里就是它先入眼，名字跟在后面。
*/
.dorm-doors {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3);
margin-top: var(--sp-2);
padding-left: 14px; /* 给院徽探出去的那半个身位留地方 */
}
.dorm-doors-label {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--cine-dim);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
}
.dorm-door {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-3);
min-width: 232px;
padding: 13px 26px 14px 62px;
font-family: var(--font-body);
text-align: left;
color: #f4e9d4;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%),
var(--plate, #4a4a44);
border: 1px solid rgba(0, 0, 0, 0.42);
border-radius: 2px;
cursor: pointer;
box-shadow: 0 3px 0 rgba(20, 14, 9, 0.5), 0 12px 26px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, filter 0.16s ease;
}
.dorm-door:hover {
filter: brightness(1.12);
transform: translateY(-2px);
box-shadow: 0 5px 0 rgba(20, 14, 9, 0.44), 0 16px 30px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dorm-door:active { transform: translateY(1px) scale(0.99); }
/*
* 院徽：压在牌子上面，左右各探出去一点。
* 用 absolute + 负位移，让它跨在牌子的左边缘上（参考图就是这个样子）。
*/
.dd-crest {
position: absolute;
left: -20px;
top: 50%;
z-index: 2;
height: 158%;
width: auto;
transform: translateY(-50%);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
.dd-name {
font-size: var(--fs-l);
letter-spacing: 0.1em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* 好感还不够时那句实话：小、靠右、不抢名字 */
.dd-hint {
margin-left: auto;
padding-left: var(--sp-3);
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: rgba(244, 233, 212, 0.66);
white-space: nowrap;
}
/*
* 27a-1b · 韦斯莱双胞胎那块门牌（ui/twins.js）
*
* 和寝室门口那块**同一副样子**（复用 .dorm-door 的全套：院徽探出半个身位、
* 名字跟在后面、牌子颜色跟着院徽走），只多一道**金边**——
* 他们不是住在这层的人，是来做生意的，那道金边就是这一点区别。
* 创作者的原话：「按钮样式和人物寝室样式一样（狮院徽章+框，但是带一个金边）」。
*
* 所以这里**只写「多出来的那一道」**，base 那一套一个字都不重抄：
* 重抄一份，等于把「寝室门牌改了、这块忘了改」的风险翻一倍。
*/
.dorm-door.gold-edge {
/* 外一圈金 + 里头再压一道更暗的金线：一块鎏边的招牌，不是一颗发光的按钮 */
border-color: rgba(224, 178, 100, 0.92);
box-shadow:
0 0 0 1px rgba(224, 178, 100, 0.5),
0 3px 0 rgba(20, 14, 9, 0.5),
0 12px 26px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(224, 178, 100, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dorm-door.gold-edge:hover {
border-color: var(--cine-gold);
box-shadow:
0 0 0 1px rgba(224, 178, 100, 0.8),
0 5px 0 rgba(20, 14, 9, 0.44),
0 16px 30px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(224, 178, 100, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* 金边那一版角上的小字亮一点：它是价目（什么都收 · 六折），不是在说「你进不去」 */
.dorm-door.gold-edge .dd-hint { color: rgba(233, 205, 152, 0.86); }
/* ─────────────────────────────
走廊尽头那扇有求必应屋的门（ui/screens-map.js 的 wishDoor）
───────────────────────────── */
/*
* 这扇门现在只是走廊那一摞里的一块（它那一层 .ror-doorwrap 只是包一下，
* 宽与位置跟着 .room-map > * 走）。原来它钉在照片右下角，和顶上那块【校园公告板】
* 隔着一整间屋子——创作者报的「离得十万八千里」就是这一对。
*/
/*
* 门牌本身：**深紫蓝 + 星空 + 细细的金边**（创作者定的长相）。
*
* 星空是画出来的、不是图片：底下一层深紫蓝的渐变当夜色，
* 上面撒几颗不同大小的小白点（radial-gradient，一个圆一颗星）。
* 用 background 而不是 img，是因为这块牌子要跟着字号一起伸缩——
* 换成图片就得为每个屏幕宽度备一张。
* ⚠️ 最后那一行 linear-gradient 是**底色**，必须排在最后：CSS 的
* background 层里前面的画在上面，夜色垫在底下，星星才浮得出来。
*/
.ror-door {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
width: 100%;
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-body);
color: #ece8ff;
background:
radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.6px),
radial-gradient(circle at 78% 18%, rgba(214, 226, 255, 0.8) 0 1px, transparent 1.5px),
radial-gradient(circle at 43% 62%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.4px),
radial-gradient(circle at 88% 72%, rgba(226, 220, 255, 0.7) 0 1px, transparent 1.3px),
radial-gradient(circle at 26% 84%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.2px),
radial-gradient(circle at 62% 34%, rgba(255, 244, 214, 0.85) 0 1.2px, transparent 2px),
linear-gradient(158deg, #2a1e57 0%, #1a1240 52%, #0d0922 100%);
/* 细细的金边 */
border: 1px solid rgba(224, 178, 100, 0.55);
border-radius: var(--r);
cursor: pointer;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.55),
inset 0 0 20px rgba(122, 100, 214, 0.22);
transition: background-color 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.ror-door:hover {
border-color: rgba(240, 205, 140, 0.9);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.6),
inset 0 0 26px rgba(140, 118, 232, 0.34);
transform: translateY(-2px);
}
.ror-door:active { transform: translateY(0) scale(0.985); }
/* 中文名：这一部一贯的宽字距；比暗底上的灰字亮一档，夜色里才读得清 */
.ror-door .ror-zh { font-size: var(--fs-m); letter-spacing: 0.16em; }
/*
* 英文名：**在中文字下面、小一号**（创作者定的）。
* 深紫蓝底上不能再用深灰（那是照片上的写法），用一层浅浅的月白。
*/
.ror-door .ror-en {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: rgba(206, 200, 246, 0.78);
}
/* 角落里那行小字：说明这门后面是干什么的（星币商城），用金色压轴 */
.ror-door .ror-hint {
margin-top: 3px;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--cine-gold);
}
@media (max-width: 560px) {
/* 窄屏上这块牌子上的字长，降一档字号（宽度跟着 .room-map > * 走，不在这里另定） */
.ror-door .ror-zh { font-size: var(--fs-s); letter-spacing: 0.12em; }
}
/*
* 有求必应屋那一屏（ui/wishroom.js）：屋里那格货架。
*
* 配色跟着门牌走——深紫蓝的卡片、细细的金边、亮一档的字。
* 别改成羊皮纸那套（.card）：那扇门后面是一间夜色里的屋子，
* 换成米黄纸片就断了。
*/
.ror-shelf { display: flex; flex-direction: column; gap: var(--sp-3); }
.ror-cell {
position: relative;
padding: var(--sp-3) var(--sp-4);
border: 1px solid rgba(224, 178, 100, 0.42);
border-radius: var(--r);
background: linear-gradient(158deg, rgba(42, 30, 87, 0.74), rgba(13, 9, 34, 0.84));
box-shadow: inset 0 0 22px rgba(122, 100, 214, 0.18), 0 8px 22px rgba(0, 0, 0, 0.42);
color: #ece8ff;
}
.ror-cell-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.ror-cell-name { font-size: var(--fs-l); letter-spacing: 0.14em; }
/* 英文名跟在后面：手写体、小一号、压暗一档（这一部一贯的双语写法） */
.ror-cell-en {
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.06em;
color: rgba(206, 200, 246, 0.72);
}
.ror-cell-note { margin: 6px 0 0; font-size: var(--fs-s); color: rgba(234, 230, 255, 0.92); }
.ror-cell-line { margin: 4px 0 0; font-size: var(--fs-s); color: rgba(206, 200, 246, 0.78); }
/* 用料那行压到最小：它是「买了之后还得凑什么」，不是卖点 */
.ror-cell-need { margin: 5px 0 0; font-size: var(--fs-xs); color: rgba(206, 200, 246, 0.6); }
/* 价钱用金色——那一行是这一格的重点，和门牌那道金边是同一个意思 */
.ror-cell-price {
margin: 8px 0 0;
font-size: var(--fs-s);
letter-spacing: 0.08em;
color: var(--cine-gold);
}
/* 问不到价时那句实话：不是「操作失败」，是一条要说清楚的缘由，所以用暖红字 */
.ror-cell-warn { margin: 8px 0 0; font-size: var(--fs-xs); color: #e8b3a2; }
.ror-cell-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
/*
* 走廊屋里那一摊落的位置（ui/screens-map.js 的 screenPlace）。
*
* 它现在只是那一摞里的一块（.room-map 从上往下排，见 9c），不再钉角落。
* padding-left 是**给院徽留的地方**：徽章按 .dd-crest 的写法往左探出 20px，
* 不留这一截就会连狮子带边框一起被屋子的左边缘裁掉。
*/
.corridor-stall {
padding-left: 22px;
}
/*
* 这块牌子上的字比寝室那块长得多（「韦斯莱双胞胎的交易」九个字 + 一行英文，
* 寝室那边最多三个字），所以配色不动、**排布要单独收一次**。
* 这些只作用在 .corridor-stall 里，寝室门牌一个字都不受影响。
*
* 🔴 这里踩过一个坑：**字被院徽压住了**（创作者报的）。
* 根因是 `.dd-crest` 那条 `height: 158%` —— 它是按**牌子高度**算的，
* 寝室那块只有一行、没事；这块牌子有两三行，牌子一高，徽章跟着长，
* 宽度是 `width: auto` 按比例跟着长，于是从左边一直顶到字上。
* 改法两条一起用，缺一条都还会压：
* 1. 这里把徽章**定成固定高度**（78px ≈ 寝室那块的实际大小），
* 行数再怎么变它都不再长；
* 2. 文字那一侧把左边留足（padding-left: 84px），
* 即便徽章是正方形的（最宽的情况）也还空着一截。
* 别把 84px 改小、也别把 height 改回百分比——除非你重新量过一遍。
*/
.corridor-stall .dorm-door {
min-width: 0;
max-width: 100%;
/* 左 84px 让给院徽（见上头那两条改法），右 26px 跟着寝室那套 */
padding: 12px 26px 13px 84px;
flex-wrap: wrap;
}
/* 徽章：固定高度、只探出一点点——不再跟着行数长 */
.corridor-stall .dd-crest {
height: 78px;
left: -18px;
}
/* 中文名：降一档字号，九个字尽量一行放得下 */
.corridor-stall .dd-name { font-size: var(--fs-m); letter-spacing: 0.08em; }
/*
* 英文名：跟在中文后面（放得下就并排、放不下自己折行）。
* 手写体、颜色压暗一档；字号压到比中文小很多——中文是牌子上唯一的主角。
*/
.corridor-stall .dd-en {
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(244, 233, 212, 0.66);
}
/*
* 摊子那一屏（ui/twins.js 的 .twin-shop）：分区标题的英文副标同样压到比中文小很多，
* 作用域只在这一屏，别处章节的英文不受影响。
*/
.twin-shop .chapter .ch-en { font-size: 9px; }
/*
* 角上那行小字（什么都收 · 六折）换到自己那一行。
* `.dd-hint` 带着 `white-space: nowrap`，硬挤在名字那一行里一定顶出屏幕。
* 它**只有中文**，所以不跟英文名并排。
*/
.corridor-stall .dd-hint {
flex: 1 1 100%;
margin-left: 0;
margin-top: 3px;
padding-left: 0;
}
/* ─────────────────────────────
27a-3 · 校园公告栏（ui/bulletin.js）
───────────────────────────── */
/*
* 那块**深棕色的板子**：木纹 + 一圈描金边，纸都钉在它上面。
* 底图是走廊那张照片，板子压暗一档才托得住上面浅色的纸。
*/
.bulletin-board {
padding: var(--sp-4) var(--sp-3) var(--sp-5);
border-radius: calc(var(--r) + 6px);
background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px),
linear-gradient(180deg, #4a3120, #2e1e10);
border: 1px solid rgba(224, 178, 100, 0.3);
box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}
.bl-title {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.bl-title-zh { font-family: var(--font-hand); font-size: var(--fs-l); letter-spacing: 0.2em; color: #f0d9a6; }
.bl-title-en { font-family: var(--font-hand); font-size: var(--fs-xs); letter-spacing: 0.2em; color: rgba(224, 178, 100, 0.7); }
/* 纸们错落着钉：flex 换行 + 每档一点上下错开与歪角 */
.bl-papers {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--sp-3);
}
/* 一张钉着的纸：顶上那枚图钉是 ::before */
.bl-paper {
position: relative;
width: 15rem;
padding: var(--sp-3) var(--sp-3) var(--sp-4);
color: var(--ink);
border-radius: 3px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.bl-paper::before {
content: '';
position: absolute;
left: 50%;
top: -6px;
width: 12px;
height: 12px;
margin-left: -6px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f6d9a0, #b07a2c 60%, #6d4413);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
/* 羊皮纸那两种的底图由 JS 铺（路径只在 assets.js 登记），这里只管铺满不重复 */
.bl-paper.pic { background-size: 100% 100%; background-repeat: no-repeat; border: none; }
/* 大小不一：正方 / 长方 / 便签三档 */
.bl-paper.sq { width: 13rem; min-height: 13rem; }
.bl-paper.wide { width: 18rem; min-height: 10rem; }
.bl-paper.note {
width: 14rem;
background:
radial-gradient(80% 50% at 14% 4%, rgba(255, 255, 255, 0.55), transparent 62%),
linear-gradient(180deg, #fbf4e4, #eee1c4);
border: 1px solid rgba(64, 48, 31, 0.38);
}
/* 错落：三档歪角 + 三档上下错开（按序号取模，重画不跳） */
.bl-paper.tilt-a { transform: rotate(-1.6deg); }
.bl-paper.tilt-b { transform: rotate(1.1deg); }
.bl-paper.tilt-c { transform: rotate(-0.5deg); }
.bl-paper.drop-a { margin-top: 0; }
.bl-paper.drop-b { margin-top: var(--sp-4); }
.bl-paper.drop-c { margin-top: var(--sp-2); }
.bl-from {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--red);
margin-bottom: var(--sp-2);
}
.bl-wants { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bl-want { display: flex; align-items: center; gap: var(--sp-2); }
.bl-art {
width: 44px;
height: 44px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
overflow: hidden;
}
.bl-art-img { width: 100%; height: 100%; object-fit: contain; }
.bl-name { font-size: var(--fs-m); font-weight: 700; }
.bl-qty { font-size: var(--fs-xs); color: var(--ink-soft); }
.bl-qty.short { color: var(--red); }
.bl-note { font-size: var(--fs-s); line-height: 1.7; margin: 0 0 var(--sp-2); }
.bl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.bl-foot .btn { width: auto; flex: none; }
.bl-pay { font-family: var(--font-hand); font-size: var(--fs-s); font-weight: 700; color: #8a5a12; }
.bl-done { font-size: var(--fs-xs); color: var(--ink-soft); }
.bl-paper.done { opacity: 0.62; filter: saturate(0.7); }
.bl-paper.empty { width: 16rem; }
/* 窄屏：纸一律占满一行，错落只留歪角不留左右错开 */
@media (max-width: 560px) {
.bl-paper, .bl-paper.sq, .bl-paper.wide, .bl-paper.note, .bl-paper.empty { width: 100%; min-height: 0; }
}
/* ─────────────────────────────
27a-2 · 随机邂逅：地图上那一行名牌（ui/meetup.js）
───────────────────────────── */
/*
* 他今天在外面时，那一层地图底下多出这么一行。
*
* 名牌本身就是 .dorm-door——创作者点名的：地图上这一块和宿舍区那一块
* 要认得出是同一样东西。这里只把尺寸收小一档（地图上牌子本来就挤），
* 再把「在黑湖边」那行小字压成金色：一眼扫过去，先认出是谁，再看出他在哪儿。
*
* 摆位：永远在**所有地点牌下面**，自成一格、上面隔一条细线。
* 地图上牌子多是常态，插进牌堆里迟早互相压（见 ui/meetup.js 顶上那段）。
*/
.meet-row {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-3);
padding-top: var(--sp-3);
/* 一条细到几乎看不见的分隔线：不是框，只是把这一行从上面那堆牌里分出来 */
border-top: 1px solid rgba(255, 255, 255, 0.09);
/* 院徽要往牌子外面探出去半个身位，这一行不能裁 */
overflow: visible;
}
.meet-row-label {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--cine-gold);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92), 0 0 12px rgba(0, 0, 0, 0.8);
}
.meet-plates {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
}
/* 名牌比寝室门牌再小一号（创作者看过地图后点的）：这里是「今天碰得见」，不是一整扇门 */
.meet-door {
min-width: 0;
padding: 8px 15px 9px 38px;
}
.meet-door .dd-name { font-size: var(--fs-s); }
/* 角上写的是他今天在哪儿（「在黑湖边」），不是「还不太熟」——所以用金色 */
.meet-door .dd-hint {
font-size: 11px;
color: var(--cine-gold);
opacity: 0.9;
}
/*
* 「他就在这儿」——钉在他待的那一处**屋子里面**的那一块。
*
* 和地图上那一行是同一套零件（.meet-row-label + .meet-plates + .dorm-door），
* 只是这一处不在地图上：他屋里没有地点牌可挤，所以**不要那条分隔线**，
* 也不用躲谁——它就在抬头正下方，进屋第一眼看见的就是它。
*/
.meet-here {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
margin: 0 0 var(--sp-3);
/* 院徽要往牌子外面探出去半个身位，这一块不能裁 */
overflow: visible;
}
/*
* 指路小条那一排：横着摆，装不下才换行。
* 同时有三个人在外面的时候（周三中午就是这样），竖着堆会把这半屏撑得比地点牌还高。
*/
.meet-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
}
/*
* 别人在别处时那条指路（「黑湖边有人 · 去看看」）。
* 它是一条**线索**，不是一块名牌：不带院徽、不抢眼，但点得动——
* 点一下就走到那一层，人还得自己过去点他。
*/
.meet-chip {
padding: 5px 14px 6px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
color: var(--cine-dim);
background: rgba(12, 9, 6, 0.42);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
cursor: pointer;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.meet-chip:hover {
color: var(--cine-gold);
border-color: rgba(212, 175, 106, 0.42);
background: rgba(20, 15, 9, 0.56);
}
.meet-chip:active { transform: translateY(1px); }
/* ─────────────────────────────
27b · 他个人的界面（ui/screens-char.js）
───────────────────────────── */
/*
* 一屏四样东西：左边的框与人、右边那一叠纸、底下那块名牌与好感条。
*
* 层叠顺序是创作者定的，别改：
* 好感条 ＞ 名牌 ＞ 立绘 ＞ 画框
* 也就是「人名压在画上、好感压在名字上」——一眼扫下去，先看见他是谁、
* 你们到哪一步了，然后才是那张脸。
*/
.cr {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-4);
/*
* 顶部这一条：**把整屏往下挪**，因为立绘的头会从画框顶上探出去。
*
* 探出去多少不是随便一个数：立绘比画框大（见 .cr-portrait 的 --pz），
* 绕底边放大时**往上长**，实测探出画框上沿约画框高的 14%（画框 560px 时约 78px）。
* 而画框上沿离状态栏底边只有 24px（.view 的 sp-2 加这一行原来的 sp-4），
* 于是头顶正好顶进状态栏——创作者点名的就是这个。
*
* 为什么按 **vh** 给：探出去的那一截是跟着画框大小走的，画框又跟着屏高走
* （见 .cr-stage 的 34vh 那一道闸），所以按同样的比例补，小屏大屏都对得上：
* 1086px 高的窗口 → 87px（差不多就是创作者说的「2 厘米」）
* 700px 高的窗口 → 56px（那边画框也小，探出去只剩 51px）
* 上限 104px 是给很高的窗口兜的：超过之后画框已经不再长，补再多只是白留一道空。
*/
padding: clamp(16px, 8vh, 104px) 0 68px;
}
/* ── 左边的框与人 ── */
/*
* 画框那一格。比例照创作者画的红框量：长宽比约 0.65（13/20）。
*
* ⚠️ 三个数是一组，别单独改某一个：
* · `50%` —— 上限由右栏定：那四张纸片还要站得下人，格子再宽就把它们挤扁了。
* · `34vh` —— 高度那一道闸。宽度定了，高度就由长宽比推出来（× 1/0.65），
* 所以 34vh 正好换来「最多占到屏高 52%」。矮屏（横屏笔记本、
* 带地址栏的手机）上靠它兜底，否则框子会顶出画面。
* **这是「再大一点 / 再小一点」时该动的那个数**：它一收，
* 框与人一起小（从前是 39vh，创作者说太大了，收到这里）。
* · `13/20` —— 长宽比。**只写在 aspect-ratio 这一处**：宽度那一行里别再塞
* 一个别的项，否则比例会被悄悄改掉。
*
* `align-self: center`：这一格在那一行里**竖直居中**，而不是顶对齐。
* 创作者的原话是「名牌、畅聊按钮可以压在画框和立绘上，所以往下挪一点没关系」——
* 占位放宽之后，让框在「上沿到名牌之间」居中，比死贴顶上更稳：
* 框缩小时它的下沿会自然落到名牌上沿那里，而不是在两者之间空出一条缝。
* 想让它再低一档、真正压到名牌上，把 center 换成 flex-end 就行（一个词的改动）。
*
* ⚠️ **代价（已知、且是故意的）**：框那张素材是 `object-fit: fill` 铺满这一格的，
* 长宽比从 3/4 变成 13/20，等于把它纵向拉长约 15%，金边与角花会跟着变细长。
* 要让它回到「不拉长」只有两条路：把 13/20 往回挪（0.72 上下几乎看不出拉长，
* 但框就矮一截），或者把右栏那叠纸收窄、腾宽度按原比例放大（会挤纸）。
*/
.cr-stage {
position: relative;
flex: 0 0 auto;
align-self: center;
width: min(50%, 34vh, 420px);
aspect-ratio: 13 / 20;
/* 立绘的头要探出框沿，所以这一格不该裁掉溢出的部分 */
overflow: visible;
}
/* 框在最底下（z 1）：它是一圈装饰，人物压着它 */
.cr-frame {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: fill;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}
/*
* 圆框那张素材的四角是白的（不是透的），直接摆会出现一块白底。
* 拿一个椭圆的蒙版把四角裁掉——只留框子本身那一圈。
*/
.cr-stage[data-shape="oval"] .cr-frame {
-webkit-mask-image: radial-gradient(ellipse 51% 51% at 50% 50%, #000 0 99%, transparent 100%);
mask-image: radial-gradient(ellipse 51% 51% at 50% 50%, #000 0 99%, transparent 100%);
}
/*
* 框里面那层衬底（z 2）：盖住素材中间那片白。
* 有了它，人物才像「装在框里」；没有它，人物是贴在一张白纸上。
* 颜色取深棕的绒面，和两圈框的金边都是一族；形状跟着框走（方框配方衬、圆框配椭圆）。
*/
.cr-matte {
position: absolute;
inset: 9% 8% 10%;
z-index: 2;
background: linear-gradient(180deg, #2b2119, #1a130d);
border-radius: 2px;
box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.75);
}
.cr-stage[data-shape="oval"] .cr-matte { border-radius: 50%; inset: 10% 9% 11%; }
/* 立绘（z 3）：压在框和衬底上，底边对齐、头顶探出框沿 */
.cr-portrait {
position: absolute;
left: 3%;
right: 3%;
bottom: 2%;
z-index: 3;
width: 94%;
height: 104%;
object-fit: contain;
/* 人物的脚要落在框的下沿上，所以图往底边贴 */
object-position: bottom center;
/*
* 这个人要放大多少（--pz，按人给，见 data/charroom.js 的 PORTRAIT_SCALE）。
* 绕**底边中点**放：脚照旧踩在框的下沿上，人往上涨，头就探出框沿了。
*
* ⚠️ 这个数**默认就不是 1**（创作者定的：人要比画框略大一点）：
* 四张立绘各自在画布上留了一圈白，照 `contain` 原样摆出来，
* 人总是缩在框子里、头顶离框沿还有一截。乘上 1.1 左右之后，
* 脚还踩在框底，头顶刚好探出上沿——「人压着框」这件事才真成立。
* 倍数**只用在这一个变量上**（不靠改 width/height，那会连带把长宽比也改掉：
* 图是 contain 的，只给高度不给宽度，实际画出来多大要看图自己的比例）。
*/
transform: scale(var(--pz, 1.12));
transform-origin: bottom center;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
pointer-events: none;
}
/* ── 右边那一叠纸 ── */
.cr-menu {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
/* 四张之间的间隙：从 12px 收到 8px。它们是一叠随手贴的纸，不该像四个按钮那样疏 */
gap: var(--sp-2);
padding-right: var(--sp-2);
}
/*
* 一张纸（便签）。
*
* 宽度按 --w 收（越靠下越宽），每张自己带一点倾角——参考图里它们像随手摊在桌上
* 的一叠，而不是四个并排的按钮。钉子那一小点在左上角。
*
* ⚠️ **「便签感」靠三个数撑着，改字号时三个要一起动**：
* · `padding` 薄（9/10 px）——便签是薄薄一张，留白一多就变成按钮；
* · 中文字号小一档（见 .crc-label）+ 字距收到 0.08em——字挤在一起才像手写的；
* · 阴影轻（见下）——`0 3px 0` 那种硬厚边是立体按钮的做法，不是纸。
* 创作者的原话是「太大了…没有便签的感觉了」，压的就是这三样。
*/
.cr-card {
position: relative;
width: calc(var(--w, 1) * 100%);
max-width: 264px;
padding: 9px 14px 10px;
font-family: var(--font-body);
text-align: center;
color: var(--ink);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.5), transparent 62%),
linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.44);
border-radius: var(--r);
cursor: pointer;
/* 比从前薄一档：硬边从 3px 收到 2px，外扩的投影也收小 */
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.36), 0 8px 18px rgba(0, 0, 0, 0.42);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}
/* 每一张歪一点点，四张不重样 */
.cr-card:nth-child(1) { transform: rotate(-0.8deg); }
.cr-card:nth-child(2) { transform: rotate(0.9deg); }
.cr-card:nth-child(3) { transform: rotate(-0.5deg); }
.cr-card:nth-child(4) { transform: rotate(0.7deg); }
/* 钉子：和便签牌同一处细节（.place::after） */
.cr-card::before {
content: '';
position: absolute;
top: 6px;
left: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(140, 47, 47, 0.7);
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}
.cr-card.on:hover {
border-color: var(--red);
transform: rotate(0deg) translateY(-2px);
box-shadow: 0 4px 0 rgba(50, 37, 24, 0.3), 0 12px 22px rgba(0, 0, 0, 0.48);
}
.cr-card.on:active { transform: rotate(0deg) translateY(0) scale(0.98); }
/*
* 【畅聊】那一张是这一屏的出口，所以它比上面三张都大一号——
* 参考图里就是这个大小差。它是唯一「按得下去」的那一张。
* 大一号只体现在**字号与内边距**上（各高一档），不是把它撑成一块牌子。
*/
.cr-card.on { padding: 15px 18px 16px; }
.crc-label {
display: block;
font-size: var(--fs-m);
font-weight: 700;
/*
* 字距 0.16em → 0.08em。原来是照「按钮标签」那种疏朗排的，
* 可便签上的字该是挤在一起的；疏着排，两个字的标签会摊得像四个字。
*/
letter-spacing: 0.08em;
/* 字距把最后一个字也推出去了，缩回来一点才居中 */
text-indent: 0.08em;
line-height: 1.15;
}
.cr-card.on .crc-label { font-size: var(--fs-l); }
/*
* 纸片上那行英文（互动 / Interact）。
*
* 创作者的口径：**「特别特别小」，它只是中文的附庸**——所以这里不用字号阶
* （最小那一档 --fs-xs 是 12px，还是太抢眼），直接钉 9px，另加手写体与压暗。
* 它不该被单独读懂，只该让人扫到「这里还有一行洋文」。
* 不给 text-indent —— 中文那边是为字距把末字推出去才缩回的，英文不必。
*/
.crc-en {
display: block;
font-family: var(--font-hand);
font-size: 9px;
letter-spacing: 0.08em;
line-height: 1.25;
color: var(--ink-soft);
}
.cr-card.on .crc-en { font-size: 10px; }
.cr-card.soon .crc-en { opacity: 0.8; }
/*
* 还没做的那三张：摆着，但按不动。
* 抽掉它们会让这一屏看着像「这个人只能聊天」；压暗摆着才是实话。
*/
.cr-card.soon {
cursor: not-allowed;
opacity: 0.62;
box-shadow: 0 1px 0 rgba(50, 37, 24, 0.26), 0 6px 14px rgba(0, 0, 0, 0.34);
}
.cr-card.soon .crc-label { color: var(--ink-soft); }
/*
* 【亲密】解锁之后那张便签：名字走**淡淡的粉**（创作者定的）。
* 只给字色，不给底、不给边框——它和另外三张是同一叠纸，
* 粉只是「这一张从此点得动了」的一点暗示，不该比【畅聊】那张更抢眼。
*/
.cr-card.pink .crc-label { color: #d98fab; }
.cr-card.pink.on:hover .crc-label { color: #c9769a; }
/*
* 便签底下那行小字「敬请期待 Coming Soon」。
* 字号从 --fs-xs（12px）压到 10px、离上一行从 3px 收到 2px：
* 它是最不重要的那一行，便签上该是最不起眼的一道注脚。
*/
.crc-note {
display: block;
margin-top: 2px;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.08em;
line-height: 1.25;
color: var(--ink-soft);
}
/*
* 那一行里的中英两半：「敬请期待」+「Coming Soon」，并排一行。
* 英文那半比中文再小半档（同 .crc-en 一条口径：它是附庸）。
* 中英之间那点间隔由 crn-en 自己的左边距给——多一个分隔符（·）反而像两件东西。
*/
.crc-note .crn-en { margin-left: 5px; font-size: 8.5px; opacity: 0.8; }
/* ── 底下那块名牌 + 好感条 ── */
/*
* 名牌（z 5）：压在立绘上。
*
* bottom 这个数是跟着 .cr 下面那条 padding-bottom（68px）定的：
* 舞台的下沿就在离底 68px 那里，名牌（高约 44px）摆在 46px 上，
* 于是它**骑在画框的下沿**上——像参考图那样一条横牌别在画上。
* 放到 68px 以下就整块掉出画框，变成画面底下多出来的一行字。
*/
.cr-plate {
position: absolute;
left: 2%;
bottom: 46px;
z-index: 5;
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 56%;
padding: 11px 26px 12px 64px;
color: #f4e9d4;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%),
var(--plate, #4a4a44);
border: 1px solid rgba(0, 0, 0, 0.42);
border-radius: 2px;
box-shadow: 0 3px 0 rgba(20, 14, 9, 0.5), 0 12px 26px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 院徽跨在名牌的左边缘上（和寝室门牌同一处细节） */
.cp-crest {
position: absolute;
left: -22px;
top: 50%;
z-index: 2;
height: 168%;
width: auto;
transform: translateY(-50%);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
/*
* 名牌上是**全名**，中英并排（创作者定的）：中文大字、英文小字，中文在上。
*
* 中文字距比从前收到 0.1em：牌子上现在写的是「德拉科·马尔福」七个字，
* 还按走廊里喊简称那样排（0.12em），牌子会一路顶到好感条外面去。
*/
.cp-name {
display: flex;
flex-direction: column;
min-width: 0;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cp-name .cpn-zh {
font-size: var(--fs-l);
/*
* 字距收到 0.06em（原来是 0.12em）。名牌上现在是「塞德里克·迪戈里」八个字，
* 名牌是从左边缘一路按内容撑宽的，字距松一格就多压到右边那叠纸上十几像素。
*/
letter-spacing: 0.06em;
line-height: 1.18;
}
.cp-name .cpn-en {
font-family: var(--font-hand);
/* 比中文小两档：它只是同一个名字的另一半，不是第二行标题 */
font-size: var(--fs-xs);
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.15;
opacity: 0.84;
}
/*
* 好感条（z 6）：压在名牌上——这是创作者定的最上一层。
* 它挂在名牌的右下角、往下探出一点，像别在牌子上的一张窄签。
*/
.cp-aff {
position: absolute;
right: -8px;
bottom: -15px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 12px 5px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #eddfc0);
border: 1px solid rgba(64, 48, 31, 0.4);
border-radius: 999px;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.34), 0 6px 14px rgba(0, 0, 0, 0.42);
transform: rotate(-1.2deg);
white-space: nowrap;
}
.cpa-heart { color: var(--red); font-size: 11px; }
/* 十格刻度：点亮的填红，其余留一枚空槽（和手抄本人物簿同一套读法） */
.cpa-bar { display: inline-flex; gap: 2px; }
.cpa-bar i {
width: 7px;
height: 7px;
border-radius: 1px;
background: rgba(64, 48, 31, 0.2);
box-shadow: inset 0 0 0 1px rgba(64, 48, 31, 0.28);
}
.cpa-bar i.on { background: var(--red); box-shadow: none; }
.cpa-word { color: var(--ink-soft); letter-spacing: 0.04em; }
/* 窄屏：框与人收窄一点，那一叠纸跟着让位 */
@media (max-width: 480px) {
/*
* 窄屏上不再单给 .cr-stage 一个尺寸：上面那条 `min(50%, 34vh, 420px)`
* 本来就是按百分比与屏高算的，小屏自然就小，钉死一个 px 反而会把
* 「大屏上放大」这件事一起钉没（190px 那个上限就是这么来的）。
*/
.cr { gap: var(--sp-3); padding-bottom: 62px; }
.cr-menu { gap: var(--sp-2); }
/*
* 窄屏再收一档。⚠️ 这几条要**比基础规则小**才对：
* 从前这里的字号是 --fs-m / --fs-l，后来基础规则也降到了同一个数，
* 这一整段就等于没写——小屏上纸片反而显得比大屏还大。别再让它们相等。
*/
.cr-card { padding: 8px 11px 9px; }
.cr-card.on { padding: 11px 13px 12px; }
.crc-label { font-size: var(--fs-s); }
.cr-card.on .crc-label { font-size: var(--fs-m); }
.crc-en { font-size: 8px; letter-spacing: 0.06em; }
.cr-card.on .crc-en { font-size: 9px; }
.crc-note { font-size: 9px; }
.crc-note .crn-en { font-size: 8px; margin-left: 4px; }
.cr-plate { padding: 9px 18px 10px 52px; min-width: 62%; }
/* 字号挂到中文那一行上：.cp-name 现在是两行的容器，给它定字号管不到里面 */
.cp-name .cpn-zh { font-size: var(--fs-m); }
.cp-name .cpn-en { font-size: var(--fs-xs); letter-spacing: 0.1em; }
.dd-crest { height: 148%; left: -16px; }
.dorm-door { min-width: 190px; padding: 11px 18px 12px 52px; }
.dd-name { font-size: var(--fs-m); }
/* 地图上那一行邂逅名牌：小屏上再收一档，别把地点牌挤到下面去 */
.meet-door { min-width: 0; padding: 7px 12px 8px 34px; }
.meet-row { margin-top: var(--sp-2); padding-top: var(--sp-2); }
}
/* ============================================================
28 · 禁林
------------------------------------------------------------
一屏两截：上面一颗【深入探索】（整行、字大一号），下面一排
「你认得的地方」（每处一块窄牌）。**两截共用一副骨架**：
名字竖着写、代价那一行小字跟在名字右边——一眼看出来是一类事。
两处也是同一个深绿：这一屏的东西都长在林子这块地面上。
============================================================ */
/* 深绿那一族：底子、边框、亮字，两处按钮共用 */
:root {
--forest-bg: rgba(18, 42, 26, 0.82);
--forest-bg-2: rgba(28, 60, 36, 0.9);
--forest-line: rgba(126, 190, 132, 0.3);
--forest-line-2: rgba(126, 190, 132, 0.6);
--forest-ink: #cfe3c8; /* 名字：浅绿白，压在深绿上才看得清 */
--forest-dim: #8fae87; /* 代价那一行小字 */
}
/*
* 两颗按钮共用的骨架：一行里先**竖着写名字**，右边那一行小字跟着排。
* 竖排只在这里处理一次——牌子（.trail）和那颗大的（.btn.forest）共用这副骨架，
* 它们只是块头与底色不同，看上去就该是「一类事」。
*/
.forest-row {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 6px;
}
.forest-row .fr-name {
writing-mode: vertical-rl;
font-size: var(--fs-m);
letter-spacing: 0.16em;
line-height: 1;
}
/* 价钱不是卖点，不该和名字一样大：小一号，压在主标题右边 */
.forest-row .fr-cost {
align-self: flex-end;
font-family: var(--font-hand);
font-size: 10px;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--forest-dim);
}
/*
* 木牌上那行小字**也竖着写**（创作者 2026-10-01）：名字是竖的一列，边上钉一行
* 横着的小字，看着就像贴歪了。
* 只有【深入探索】那一颗留着横写：它是整行宽的一条，横着那截有地方放，
* 竖起来反而把那一颗撑高一倍（而且里面混着数字与点号，竖排会把数字躺倒）。
*/
.trail .fr-cost {
writing-mode: vertical-rl;
}
/*
* 【深入探索】：整行一条、字大一号——它是一屏的正事。
* 骨架和下面的牌子完全一样（名字竖排 + 代价在右），只是更大、更亮一档。
*/
.btn.forest {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-3) var(--sp-4);
color: var(--forest-ink);
background:
radial-gradient(80% 60% at 14% 4%, rgba(190, 232, 190, 0.1), transparent 62%),
linear-gradient(180deg, var(--forest-bg-2), var(--forest-bg));
border: 1px solid var(--forest-line);
border-left-width: 1px; /* 盖掉 .btn 默认那道红色左沿 */
box-shadow: 0 3px 0 rgba(8, 18, 10, 0.5), 0 10px 24px rgba(0, 0, 0, 0.42);
}
.btn.forest:hover {
border-color: var(--forest-line-2);
background:
radial-gradient(80% 60% at 14% 4%, rgba(200, 240, 200, 0.16), transparent 62%),
linear-gradient(180deg, rgba(38, 78, 46, 0.94), rgba(24, 52, 32, 0.92));
}
.btn.forest .fr-name { font-size: var(--fs-l); letter-spacing: 0.2em; }
.btn.forest .fr-cost { font-size: var(--fs-xs); }
/*
* 池子空了（这一片都走遍了）：还是那颗的样子，但压暗、不接点击、也不收钱。
* 走的是同一个 .btn.forest 骨架，只盖颜色与边框——别让它看着像坏了。
*/
.btn.forest.done {
color: var(--forest-dim);
background: rgba(16, 30, 20, 0.6);
border-style: dashed;
border-color: rgba(126, 190, 132, 0.22);
box-shadow: none;
cursor: default;
}
.btn.forest.done .fr-name { font-size: var(--fs-m); letter-spacing: 0.14em; }
.btn.forest.done:hover { transform: none; border-color: rgba(126, 190, 132, 0.22); }
/* 下半截：认下的地方 */
.forest-part { margin-top: var(--sp-5); }
.forest-cap {
margin-bottom: var(--sp-2);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--forest-dim);
}
/*
* 那一排木牌：骨架在上面（.forest-row），这里只管块头与底子。
* 一排窄牌立在林子边上——这是「木牌」的样子，不是菜单行。
*/
/* 原先这一排的摆法（.forest-trails：flex 横排）整块撤了——第 42 节把六处散进了一片地图 */
.trail {
display: flex;
align-items: center;
justify-content: center;
min-height: 104px;
padding: var(--sp-3) 10px;
cursor: pointer;
color: var(--forest-ink);
background:
linear-gradient(180deg, rgba(190, 232, 190, 0.08), transparent 40%),
linear-gradient(180deg, var(--forest-bg-2), var(--forest-bg));
border: 1px solid var(--forest-line);
border-radius: var(--r);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(220, 240, 214, 0.08);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.trail:hover {
border-color: var(--forest-line-2);
transform: translateY(-2px);
}
.trail:active { transform: translateY(0) scale(0.98); }
/* 认得、但这一处还没有事件可走的那几处：暗一档，代价那行写「还没走通」 */
.trail.quiet { background: linear-gradient(180deg, rgba(28, 60, 36, 0.6), rgba(18, 42, 26, 0.6)); }
.trail.quiet .fr-name { color: #a9c2a2; }
/* 回林边时那一句「刚才认下了什么」 */
.forest-note { color: var(--forest-ink); }
/* 天黑之后那一句：这一格走进去今晚就没得睡了（见 ui/screens-forest.js 的 nightHint） */
.forest-hint { margin-top: var(--sp-2); color: var(--forest-dim); }
/* ═══════════ 主线剧情：一篇文（ui/story-screen.js） ═══════════
*
* 这一屏不是对话框，是一张**越写越长的纸**：上面是已经写完的段落，
* 底下是"我还想做什么"。所以排版按**读文章**来定，不按"点着看的对话"来定：
* 1. 正文用衬线体、行距放大到 1.9——一千字连着读，行距不够眼睛会累；
* 2. 行宽收到 34em 左右（中文一行 32～40 字最顺），贴在中间不成一堵墙；
* 3. 段落之间空一行，首行不缩进（中文长文里缩进加空行会显得散）；
* 4. 对白单独成段、左边压一道金线——一眼分得出谁在说话，不用读名牌。
*
* 配色跟着场景照来（这一屏铺的是礼堂那张照片），所以正文用暖白、金线点缀，
* 和恋爱对话那一层是一家的。
*/
.doc-head {
margin-bottom: var(--sp-5);
text-align: center;
}
/* 抬头下面那两行小字：一行说"更早的收起来了"，一行说"现在在哪儿、什么时候" */
.doc-note,
.doc-where {
margin: var(--sp-2) 0 0;
font-size: var(--fs-s);
color: var(--fg-dim);
}
.doc-where { letter-spacing: 0.08em; }
.doc {
/* 读文章的那一栏：窄到一屏读得完一行，宽到不至于每行只落五六个字 */
width: 100%;
max-width: 34em;
margin: 0 auto;
color: var(--cine-text);
cursor: pointer; /* 点纸面 = 剩下的字一次全给你（见 skipReveal） */
}
/* 一轮 = 她走的那一步 + 它写的那一篇 */
.doc-turn { margin-bottom: var(--sp-6); }
/* 「你：…」那一行（.doc-act）在 v45 换成了气泡 .doc-b.you，见第 60 节 */
/* 正文段落。行距 1.9 是这一屏最要紧的一个数：一千字连着读 */
.doc-p {
margin: 0 0 var(--sp-4);
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.9;
letter-spacing: 0.02em;
color: #f2e8d6;
overflow-wrap: anywhere;
}
/* 对白：单独成段，左边一道金线，说话的谁写在小字里 */
.doc-say {
margin: 0 0 var(--sp-4);
padding-left: var(--sp-4);
border-left: 2px solid rgba(224, 178, 100, 0.5);
}
.doc-say .who {
display: block;
margin-bottom: 2px;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--cine-gold);
}
.doc-say .line {
display: block;
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.9;
color: #fbf3e2;
}
/* 正在进行的这一轮（等 AI / 正在浮现 / 没写出来）：新落的墨微微亮一点 */
.doc-turn.pending .doc-p,
.doc-turn.pending .doc-say { animation: docIn 0.42s ease both; }
@keyframes docIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* 没写出来的那一条：她那一步留着（是事实），底下跟一句说明 */
.doc-cut {
margin: 0;
font-size: var(--fs-s);
color: rgba(212, 105, 95, 0.9);
}
/* 等它写的时候那条"墨迹"——它会自己消失，所以做得像纸上洇开的一点墨 */
.doc-ink {
display: flex;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-4) 0;
color: var(--cine-dim);
}
.doc-ink .tx { font-size: var(--fs-s); letter-spacing: 0.1em; }
.doc-ink .hint { font-size: var(--fs-xs); opacity: 0.7; }
.doc-ink .dots { display: inline-flex; gap: 3px; }
.doc-ink .dots i {
width: 4px; height: 4px;
border-radius: 50%;
background: currentColor;
animation: inkPulse 1.1s ease-in-out infinite;
}
.doc-ink .dots i:nth-child(2) { animation-delay: 0.16s; }
.doc-ink .dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes inkPulse {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
/* ---------- 底下：选项 + 输入框 ---------- */
/* 托盘里这两块都是 div（不是 .btn），拿不到 .tray > .btn 那条"占满一行"，
* 所以要自己声明——不然它们会按内容收窄，三条选项并排挤成一团。 */
.tray > .doc-compose,
.tray > .doc-tools { flex: 1 1 100%; }
.doc-compose {
width: 100%;
max-width: 34em;
margin: 0 auto;
}
.doc-compose.busy { text-align: center; }
.doc-status {
margin: 0 0 var(--sp-2);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-align: center;
color: var(--cine-dim);
}
/*
* 这一屏的托盘上面那道 32px 羽化留白，是给"主按钮"留的气口。
* 剧情屏托里全是辅助件（三颗小选项、一个框、三颗小工具），
* 留白只是在正文上再压掉一截——收到 16px，羽化还在，纸面多露出一行字。
* :has() 认不出来就当这条不存在，退回原来的 32px 也不会难看。
*/
.tray:has(> .doc-tools) { padding-top: var(--sp-4); }
.doc-opts { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-2); }
/* 点【展开选项】拉出来那一下：从上面滑下来一点（收着时它根本不进 DOM） */
.doc-opts { animation: docOptsIn 0.18s ease both; }
@keyframes docOptsIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
/*
* 一条选项：羊皮纸那条的观感留着（它本来就是"你可以这么说"），
* 但**不摆序号章**——三条并排在一篇文下面，序号不加信息，
* 只占掉最左边一格。整条可点，点一下是"抄进框里"，不是"做决定"。
*
* 尺寸上刻意压扁：三条只是"接下来能怎么走"，正文才是这一屏的主角。
* 所以行高收到 1.45、上下只留 7px、投影也只有薄薄一层——
* 原来那条 12px 内边距 + 10px 外投影的厚卡片，三条叠起来就把纸面顶掉了。
*/
.doc-opt {
position: relative;
display: block;
width: 100%;
padding: 7px var(--sp-3);
text-align: left;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--ink);
background:
radial-gradient(80% 60% at 14% 4%, rgba(255, 255, 255, 0.44), transparent 62%),
linear-gradient(180deg, rgba(251, 244, 228, 0.94), rgba(238, 225, 196, 0.94));
border: 1px solid rgba(150, 108, 46, 0.5);
border-radius: var(--r);
cursor: pointer;
box-shadow:
0 1px 0 rgba(120, 96, 62, 0.45),
0 5px 12px rgba(0, 0, 0, 0.32),
inset 0 0 0 1px rgba(240, 205, 140, 0.35);
transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s ease;
}
.doc-opt:hover { transform: translateY(-1px); border-color: rgba(190, 140, 60, 0.85); }
.doc-opt:active { transform: translateY(1px) scale(0.995); }
/* 序号只做"键盘 1/2/3 也能选"的提示，所以缩小、压到边上 */
.doc-opt .num {
display: inline-block;
min-width: 1.1em;
margin-right: 5px;
font-family: var(--font-hand);
font-size: 11px;
color: rgba(140, 47, 47, 0.75);
}
.doc-bar { display: flex; gap: var(--sp-2); align-items: flex-end; }
.doc-bar textarea {
flex: 1;
resize: none;
min-height: 44px;
max-height: 104px;
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.6;
color: var(--cine-text);
background: rgba(12, 8, 5, 0.55);
border: 1px solid rgba(224, 178, 100, 0.26);
border-radius: var(--r);
padding: 11px 12px;
}
.doc-bar textarea:focus { outline: none; border-color: rgba(224, 178, 100, 0.6); }
.doc-bar textarea::placeholder { color: rgba(196, 172, 136, 0.68); }
.doc-send {
flex: none;
font-family: var(--font-body);
font-size: var(--fs-m);
color: #2a1c10;
background: linear-gradient(180deg, #f0d49a, #dcb872);
border: 1px solid rgba(224, 178, 100, 0.5);
border-radius: var(--r);
padding: 12px var(--sp-4);
cursor: pointer;
box-shadow: 0 3px 0 rgba(50, 37, 24, 0.4);
}
.doc-send:hover { border-color: rgba(240, 205, 140, 0.9); }
.doc-send:active { transform: translateY(1px); }
/* 底下那三颗工具（背包 / 展开选项 / 离开）排成一行：**背包靠左、离开靠右、
* 中间那颗落在正中**（创作者定的；从前三颗挤在中间一堆）。
*
* 三条讲究：
* 1. **必须是一行**：窄屏那条 `.tray .btn { flex: 1 1 100% }`（见"移动端"段）
* 会让每颗各占一整行，三颗叠三层，正文就被推出屏幕了。这里用更高一档的
* 选择器 .tray .doc-tools .btn 明确写死 flex: 0 1 auto，把它们按回来。
* 2. **够小**：它们是辅助按钮（开背包、拉选项、退出），不是主按钮——
* 字号压到 12px、上下只留 3px、投影收掉，一眼是"三颗小东西"，不跟输入框抢。
* 3. **不换行**：nowrap + 不给下限，320px 宽也排得下。
*/
.doc-tools {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 6px;
width: 100%;
}
.tray .doc-tools .btn {
flex: 0 1 auto;
width: auto;
min-width: 0;
padding: 3px 11px 4px;
font-size: var(--fs-xs);
line-height: 1.5;
letter-spacing: 0.04em;
text-align: center;
box-shadow: none;
white-space: nowrap;
}
.tray .doc-tools .btn:hover { transform: none; box-shadow: none; }
.tray .doc-tools .btn:active { transform: translateY(1px) scale(0.98); }
/*
* 【离开】那一颗要**一眼看得见**（创作者定的）。
* 它和旁边两颗不一样：背包、展开选项是随手用的，这一颗是"这一程先到这儿"。
* 所以它比旁边两颗大一号、字更亮，底子是暖色半透明——压在暗场景上也亮得起来；
* 描边用金色，和这一屏的纸、灯一个调子（不是警示红，是"门在那儿"）。
*/
.tray .doc-tools .btn.exit {
padding: 6px 16px 7px;
font-size: var(--fs-s);
letter-spacing: 0.08em;
color: #fff4dd;
background: rgba(150, 58, 46, 0.62);
border-color: rgba(240, 205, 140, 0.72);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}
.tray .doc-tools .btn.exit:hover {
color: #fffdf6;
background: rgba(178, 72, 56, 0.8);
border-color: rgba(255, 228, 174, 0.95);
}
/* 「再查一次」那一块：结果未知时才出现（见 ui/story-screen.js 的 lookAgainNode） */
.doc-again {
width: 100%;
max-width: 34em;
margin: var(--sp-5) auto 0;
padding: var(--sp-4);
text-align: center;
background: var(--glass);
border: 1px solid var(--glass-line);
border-radius: var(--r);
}
.doc-again p { margin: 0 0 var(--sp-3); }
@media (max-width: 460px) {
.doc-p, .doc-say .line { font-size: var(--fs-s); line-height: 1.85; }
.doc { max-width: none; }
}
/* ═══════════ 设置：右上角那颗齿轮，与里面的十格存档（ui/settings.js） ═══════════
*
* 齿轮为什么是绝对定位：状态栏是「日期在左、账目在右」两栏，中间没有它的位置，
* 硬塞成第三个 flex 孩子只会把右边那两根条挤窄（space-between 还会把它俩挤到中间去）。
* 所以它自己落在右上角，账目那一栏把右边 36px 让出来给它（见下面 .hud-stats 那条）——
* 不让的话钱和两根条会正好铺到齿轮底下：账目栏是**贴内容底部**的，
* 而"它顶在哪"随当天那几行字多长而变，撞不撞得上根本算不准。
* 让开一条固定的位置，就永远撞不上了。
*
* 十格那一段是「一行一格」：左边数字章 + 中间一行信息 + 右边几颗小按钮。
* 一格要报三件事（哪一天、谁的档、什么时候存的），挤成一块两行的信息块
* 比排成三行更省地方，窄屏上也不会把按钮顶到屏幕外面去。
*/
/*
* 日期旁边那枚小信封（【信件】的入口，见 ui/shell.js 的 renderHud 与 ui/letters.js）。
* 它跟在大字日期后面，**不占托盘的地**：托盘不在的屏（文游 / 面板）也靠它进信。
* 做成不高过那行大字的一小块——它是行内的一枚小图标，不是第三颗门牌。
* position: relative 是给右上角那颗没读的红点用的（.hud-mail-dot 钉在它角上）。
*/
.hud-mail {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px;
border: 0;
background: transparent;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.14s ease, transform 0.14s ease;
}
.hud-mail:hover { opacity: 1; transform: translateY(-1px); }
.hud-mail:active { transform: translateY(1px); }
.hud-mail-img { display: block; height: 18px; width: auto; max-width: 24px; object-fit: contain; }
.hud-gear {
position: absolute;
/* 顶边跟日期那行大字对齐（状态栏的 padding-top 就是这个数），
* 齿轮 30px 高、大字那行也差不多 30px——两条并排看着才是一行的东西。 */
top: calc(env(safe-area-inset-top) + var(--sp-3));
right: var(--sp-4);
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
color: var(--cine-dim);
background: rgba(16, 11, 8, 0.55);
border: 1px solid var(--glass-line);
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(6px);
transition: color 0.14s ease, border-color 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-gear:hover { color: #fff6e4; border-color: var(--cine-gold); }
.hud-gear:active { transform: scale(0.92); }
/* 给右上角那颗齿轮腾出右边这一条：账目照样右对齐，只是右缘落在齿轮左边。
* 36px = 齿轮 30 + 中间那条缝，换到的是"什么时候都不会叠在一起"。 */
.hud-stats { padding-right: 36px; }
/* ---------- 设置那一页里的第一节 ---------- */
.set-title {
margin: 0 0 4px;
font-size: var(--fs-m);
color: var(--ink);
letter-spacing: 0.06em;
}
/*
* 标题那一行：标题在左、动作在**最靠右**（存档那一节的【导入】就挂这儿）。
* 底下的间距由这一行出，所以行内的标题自己那个下边距要收掉。
*/
.set-title-row { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 4px; }
.set-title-row .set-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.set-note {
margin: 0 0 var(--sp-3);
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--ink-soft);
}
/* ---------- 滑条（声音那一节的音量、历史那一节的记忆条数，共用这一套） ---------- */
.range-row {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* 滑条本身交给浏览器画，只把颜色对上羊皮纸/朱红这一身 */
.range {
flex: 1 1 auto;
min-width: 0;
accent-color: var(--red);
cursor: pointer;
}
/* 右边那个百分比：定宽，拖动时数字变了整行不会跟着抖 */
.range-n {
flex: none;
min-width: 3.2em;
text-align: right;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--ink);
}
/*
* 「当前提示词字符数」那条细长条（创作者 2026-09-28 定的版式）：
* 它只是个读数，不该占一整张卡——一条矮窄线，字比正文小一档。
*/
.prompt-len { display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-top: 10px;
padding: 4px 10px 5px;
font-size: var(--fs-xs);
color: var(--ink-soft);
border: 1px solid rgba(64, 48, 31, 0.26);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.24);
}
.prompt-len .pl-zh { flex: 1 1 auto; min-width: 0; }
.prompt-len .pl-n {
flex: none;
font-family: var(--font-hand);
color: var(--ink);
}
/* ---------- 设置 · 历史 那一节：两本账的行 ---------- */
.his-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 9px var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.22);
}
.his-row:last-child { border-bottom: 0; }
.his-tx { flex: 1 1 auto; min-width: 0; }
.his-zh { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.his-note { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-soft); }
/* ---------- 对话历史那张纸：一个角色一行 ---------- */
.chat-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 9px var(--sp-3);
border-bottom: 1px dashed rgba(64, 48, 31, 0.22);
}
.chat-row:last-of-type { border-bottom: 0; }
.chat-who { flex: 1 1 auto; min-width: 0; }
.chat-name { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.chat-note { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-soft); }
/* 「进剧情」那个勾：小方块 + 两个字，靠右挤在一行里 */
.chat-lab {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-xs);
color: var(--ink-soft);
cursor: pointer;
}
.chat-pick { accent-color: var(--red); cursor: pointer; }
.set-wait,
.set-warn {
margin: var(--sp-3) 0;
padding: var(--sp-3);
font-size: var(--fs-s);
text-align: center;
color: var(--ink-soft);
background: rgba(213, 189, 146, 0.28);
border: 1px solid var(--paper-3);
border-radius: var(--r);
}
.slot-row {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: 5px;
padding: 7px var(--sp-2) 7px 6px;
background: rgba(255, 250, 240, 0.55);
border: 1px solid var(--paper-3);
border-radius: var(--r);
transition: border-color 0.14s ease, background 0.14s ease;
}
/* 有档的那几行给一点纸白：一列看下去，哪几格有东西一眼就分得出来 */
.slot-row.used { background: var(--bright); }
/* 正被问着的那一格：和底下那条确认**连成一块**。
* 所以要抽掉自己那道下边距、并把下面两个角削平——否则确认条的 border-top: 0
* 会在接缝处露出一道纸色，看着像两块不相干的東西。 */
.slot-row.asking {
margin-bottom: 0;
border-color: var(--red);
background: var(--bright);
border-radius: var(--r) var(--r) 0 0;
}
/* 左边那个数字章：第几格。手写体、压暗，只是个记号 */
.slot-no {
flex: none;
width: 22px;
text-align: center;
font-family: var(--font-hand);
font-size: var(--fs-s);
color: var(--ink-soft);
}
.slot-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.45;
}
/* 信息列的第一行：左边游戏里的日期，右边「几天前存」那点小字。
* 挤的时候截左边那个（日期不能丢，它是认格子的主要依据），所以两端都留 min-width: 0。 */
.slot-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
min-width: 0;
}
.slot-when {
font-size: var(--fs-s);
color: var(--ink);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.slot-row:not(.used) .slot-when { color: var(--ink-soft); }
.slot-who {
font-size: var(--fs-xs);
color: var(--ink-soft);
/* 名字长的玩家不该把这一行撑到按钮底下 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 那点小字不参与压缩：宁可左边日期截断，也要让「几天前」始终看得见
* ——它正是「两格同一天但不同时候存」时唯一分得出来的东西。 */
.slot-age { flex: none; font-size: 11px; color: var(--ink-soft); opacity: 0.8; }
.slot-acts { flex: none; display: flex; gap: 4px; }
/* 一格上的小按钮（存 / 读 / 删）。它们不是主角，压到最小：
* 一页里要摆十行，每颗按钮都按正常尺寸排，十行就成了一张表格。 */
.set-btn {
padding: 4px 9px 5px;
font-family: var(--font-body);
font-size: var(--fs-xs);
line-height: 1.4;
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #efe1c4);
border: 1px solid rgba(64, 48, 31, 0.36);
border-radius: var(--r);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.set-btn:hover { border-color: var(--red); }
.set-btn:active { transform: translateY(1px); }
.set-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* 一行里只该有一颗「主」按钮：空档那颗【存到这一格】，或者确认条上那颗 */
.set-btn.primary { background: linear-gradient(180deg, #f0d49a, #dcb872); border-color: rgba(140, 108, 46, 0.7); }
.set-btn.danger { color: var(--red); }
/* 确认条：贴在被问的那一格底下，说清后果 + 两颗按钮（右边那颗永远能反悔） */
.slot-ask {
/* 贴着上面那一格，中间那道线由那一格自己的下边框出（所以这里 border-top: 0）。
* 不用负边距去对：负 1px 会把那道分隔线盖掉，接缝反而糊成一团。 */
margin: 0 0 var(--sp-3);
padding: var(--sp-3);
background: rgba(140, 47, 47, 0.06);
border: 1px solid var(--red);
border-top: 0;
border-radius: 0 0 var(--r) var(--r);
}
.slot-ask p {
margin: 0 0 var(--sp-2);
font-size: var(--fs-xs);
line-height: 1.6;
color: var(--ink);
}
.set-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; }
/*
* 读档列表最底下那颗【重开一局】：红底整行，跟上面十格分出一条线。
* 它比"读一格"还狠——那一颗是换回去，这一颗是**从头再来**，所以要红、要问一句。
*/
.set-restart {
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid rgba(140, 47, 47, 0.28);
}
.set-restart .slot-ask { border-radius: var(--r); border-top: 1px solid var(--red); }
.set-restart-btn {
display: block;
width: 100%;
padding: var(--sp-3);
font-family: var(--font-body);
font-size: var(--fs-m);
letter-spacing: 0.12em;
color: #fbeceb;
text-align: center;
background: linear-gradient(180deg, #8c2f2f, #5e1c1c);
border: 1px solid rgba(224, 120, 120, 0.5);
border-radius: var(--r);
cursor: pointer;
box-shadow: 0 3px 0 rgba(50, 20, 20, 0.4), 0 10px 22px rgba(0, 0, 0, 0.4);
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.set-restart-btn:hover { background: linear-gradient(180deg, #a33a3a, #6f2222); border-color: var(--red); }
.set-restart-btn:active { transform: translateY(1px); }
.set-restart-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* ---------- 设置顶上那两节：存档 / API设置 ---------- */
.set-tabs {
display: flex;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding-bottom: 6px;
border-bottom: 1px solid var(--paper-3);
}
.set-tab {
padding: 4px 12px 3px;
font: inherit;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--ink-soft);
background: none;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.14s ease, border-color 0.14s ease;
}
.set-tab:hover { color: var(--ink); }
/* 选中那一节：红套印下划线。这是全工程唯一的强调色，别换成金色去抢戏 */
.set-tab.on { color: var(--red); border-bottom-color: var(--red); }
/* 一行一个字段：标签压在输入框上面。
* 标签在上而不是左：地址和模型名都长，左边挤一个标签会把值压成看不全的半截。 */
.api-field { margin: 0 0 var(--sp-2); }
.api-label {
display: block;
margin-bottom: 3px;
font-size: var(--fs-xs);
letter-spacing: 0.1em;
color: var(--ink-soft);
}
.api-input {
display: block;
box-sizing: border-box;
width: 100%;
padding: 6px 8px;
font: inherit;
font-size: var(--fs-xs);
color: var(--ink);
background: rgba(255, 250, 240, 0.72);
border: 1px solid var(--paper-3);
border-radius: var(--r);
}
.api-input:focus { outline: none; border-color: var(--red); background: var(--bright); }
.api-input::placeholder { color: var(--paper-3); }
/* Key 那一行：输入框吃掉剩余宽度，「显 / 藏」那颗小的贴右边 */
.api-key-row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.api-key-row .api-field { flex: 1; min-width: 0; }
.api-peek {
margin-bottom: 2px;
padding: 6px 9px;
font: inherit;
font-size: var(--fs-xs);
color: var(--ink-soft);
background: none;
border: 1px solid var(--paper-3);
border-radius: var(--r);
cursor: pointer;
}
.api-peek:hover { color: var(--ink); border-color: var(--red); }
/* 在用哪一条：一行装下拉 + 两颗小按钮。整行只有一粒字那么高，不抢编辑表的地方 */
.api-pick {
display: flex;
align-items: center;
gap: var(--sp-2);
margin: 0 0 var(--sp-2);
}
.api-pick-label {
flex-shrink: 0;
/* 定宽：场合那三行里「面对面」比别的多一个字，不钉住就把三个下拉框挤成阶梯 */
min-width: 3.6em;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--ink-soft);
}
.api-select {
flex: 1;
min-width: 0;
padding: 5px 7px;
font: inherit;
font-size: var(--fs-s);
color: var(--ink);
background: var(--bright);
border: 1px solid var(--paper-3);
border-radius: var(--r);
/* 名字长了要截断，不能把整行撑开 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.api-select:focus { outline: none; border-color: var(--red); }
/* 三个场合各走哪一条：一小块，紧贴在「默认」那一行底下 */
.api-slots { margin: 0 0 var(--sp-3); }
.api-slots-head {
margin: 0 0 6px;
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: var(--ink-soft);
}
/* 导出 / 导入那张纸上的大框文本 */
.api-io-box {
width: 100%;
min-height: 180px;
padding: 8px 10px;
box-sizing: border-box;
font: inherit;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink);
background: var(--bright);
border: 1px solid var(--paper-3);
border-radius: var(--r);
resize: vertical;
/* 一串 base64 似的东西不许把纸横向撑开 */
word-break: break-all;
}
.api-io-box:focus { outline: none; border-color: var(--red); }
.api-io-box::placeholder { color: var(--paper-3); }
/* 导出前那句 Key 警告：整页唯一一处必须先读一段再按一颗的地方，给它点分量 */
.api-warn {
margin: 0 0 var(--sp-2);
font-size: var(--fs-m);
font-weight: 700;
color: var(--red);
}
/* 刚说过的一句话（通了 / 没通 / 切到哪条了） */
/*
* 设置页里那几行"刚说过的话"（API 那一节的动静、存档那一节的导入导出）。
* 两节共用这三个颜色类——同一种口气的话，在两张纸上不该是两个颜色。
* 一律走小字：那是**回执**，不是标题，不该比它下面那张编辑表还抢眼。
*/
.set-off { font-size: var(--fs-xs); color: var(--ink-soft); }
.set-ok { font-size: var(--fs-xs); color: var(--leaf); }
.set-bad { font-size: var(--fs-xs); color: var(--red); }
/* 编辑表：和上面那列之间给一条缝，别看成一坨 */
.api-edit {
margin: 0 0 var(--sp-3);
padding-top: var(--sp-2);
border-top: 1px solid var(--paper-3);
}
/* 窄屏：三颗按钮要留在原地不换行，所以信息那一段自己收窄——副行压一号字、
* 长了就省略号截断（玩家名加上学院加上钱，本来也不是非读完不可的那一行）。
* 按钮也收一号：一列十行，每行多占 4px 就是白白多滚半屏。 */
@media (max-width: 460px) {
.slot-info .slot-who { font-size: 11px; }
.set-btn { padding: 4px 7px 5px; }
}
/* 窄屏的状态栏左右内边距收到 sp-3（见"移动端"那一段），齿轮跟着收 */
@media (max-width: 560px) {
.hud-gear { right: var(--sp-3); }
}
/* ============================================================
开局 · 入学登记表（三页，像便签一样一页页翻）
------------------------------------------------------------
第 1 页 姓名 / 性别 / 血统、第 2 页 掷属性、第 3 页 选魔杖。
纸是米黄的便签（.setup-note），上头那一小块是抬头，底下是小圆点翻页。
界面在 ui/setup.js。
============================================================ */
.setup { max-width: 46rem; margin: 0 auto; }
.setup-cap { text-align: center; margin: 0 0 var(--sp-3); }
.setup-cap .sc-zh {
font-family: var(--font-hand);
font-size: var(--fs-xl);
letter-spacing: 0.14em;
color: var(--cine-text);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.setup-cap .sc-en {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.3em;
color: var(--cine-gold);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.setup-cap .sc-note { margin-top: 2px; font-size: var(--fs-xs); color: var(--cine-dim); }
/* 那张便签：和信纸同一副身板（米黄、细棕边、厚影），翻开时轻轻落下来 */
.setup-note {
padding: var(--sp-4);
color: var(--ink);
background:
radial-gradient(80% 50% at 14% 4%, rgba(255, 255, 255, 0.55), transparent 62%),
radial-gradient(120% 90% at 52% 112%, rgba(140, 47, 47, 0.07), transparent 72%),
linear-gradient(180deg, #fbf4e4, #eee1c4);
border: 1px solid rgba(64, 48, 31, 0.38);
border-bottom-color: rgba(64, 48, 31, 0.52);
border-radius: var(--r);
box-shadow: var(--sh-paper);
animation: setupIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes setupIn {
from { opacity: 0; transform: translateY(10px) rotate(-0.4deg); }
to { opacity: 1; transform: none; }
}
/* 屏内重画（点选项 / 翻页 / 加减属性）不重播入场动画，否则每点一下整张纸闪一遍 */
.setup-note.still { animation: none; }
/*
* 第 3 页（选魔杖）整张便签换成**透光的暗色磨砂**：米黄的纸不透光、也不神秘，
* 这一页要让礼堂的底图从框后面糊着透出来、压暗一档，配一点金边与内圈微光。
* 底变暗了，纸里那些深色字就得翻成浅色（见下面 .glass 里那一组覆盖）。
*/
.setup-note.glass {
background: rgba(14, 10, 20, 0.42);
border: 1px solid rgba(224, 178, 100, 0.3);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 46px rgba(224, 178, 100, 0.07);
backdrop-filter: blur(10px) saturate(0.92) brightness(0.82);
-webkit-backdrop-filter: blur(10px) saturate(0.92) brightness(0.82);
}
/* 底变暗 → 这一页里原本写在米黄纸上的深色字全部翻成浅色 / 金字 */
.setup-note.glass .setup-hint { color: rgba(244, 233, 212, 0.82); }
.setup-note.glass .wp-title { color: rgba(224, 178, 100, 0.9); }
.setup-note.glass .wp-note { color: rgba(244, 233, 212, 0.72); }
.setup-note.glass .wand-count { color: rgba(244, 233, 212, 0.85); }
.setup-note.glass .wand-arrow {
color: #f0e6d2;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(224, 178, 100, 0.42);
}
.setup-note.glass .wand-arrow:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--cine-gold); }
/* 暗底上那排木/芯小按钮抬亮一档，金边才还看得清 */
.setup-note.glass .wp-chip { background: linear-gradient(180deg, rgba(64, 46, 74, 0.9), rgba(36, 26, 44, 0.9)); }
.setup-pager { display: flex; justify-content: center; gap: 7px; margin-top: var(--sp-3); }
.setup-pager i {
width: 8px; height: 8px;
border: 1px solid rgba(244, 233, 212, 0.45);
border-radius: 50%;
background: rgba(244, 233, 212, 0.18);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.setup-pager i:hover { transform: scale(1.25); }
.setup-pager i.on { background: var(--cine-gold); border-color: var(--cine-gold); }
.setup-page { min-height: 16rem; }
.setup-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-s); line-height: 1.75; color: var(--ink-soft); }
.setup-field { margin-bottom: var(--sp-4); }
.sf-label {
margin-bottom: 5px;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
color: var(--ink-soft);
}
.setup-name {
width: 100%;
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-hand);
font-size: var(--fs-l);
color: var(--red);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(64, 48, 31, 0.34);
border-radius: var(--r);
letter-spacing: 0.06em;
}
.setup-name:focus { outline: none; border-color: var(--red); background: rgba(255, 255, 255, 0.74); }
.setup-name::placeholder { color: var(--paper-3); letter-spacing: 0.18em; }
.setup-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.setup-chip {
flex: 1 1 7rem;
min-width: 0;
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-body);
color: var(--ink);
text-align: center;
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(64, 48, 31, 0.3);
border-radius: var(--r);
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.setup-chip:hover { border-color: var(--red); transform: translateY(-1px); }
.setup-chip.on {
background: rgba(255, 255, 255, 0.77);
border-color: var(--red);
border-left-width: 4px;
cursor: default;
}
.setup-chip .chip-zh { display: block; font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.06em; }
.setup-chip .chip-note { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-soft); }
.setup-foot { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-soft); }
/* ---------- 第 3 页：选魔杖 ---------- */
/*
* 磨砂框里再嵌一道浅槽，把「轮播 + 计数 + 箭头」这一块圈出来当展示位。
* 外层 .setup-note.glass 已经磨过了，这里不再叠第二层 backdrop-filter（叠了会糊）。
*/
.wand-panel {
padding: var(--sp-2) var(--sp-2) var(--sp-3);
margin: 0 0 var(--sp-3);
border-radius: calc(var(--r) + 4px);
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(224, 178, 100, 0.18);
box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.35);
}
/*
* 一排横着摆的魔杖：最前面那根最大，后面的往两边缩、慢慢让出画面（变换在 ui/setup.js 里算）。
* 拖动换一根 —— 所以这一块要 touch-action: none（不然手机上会先滚页面）。
* 高度按屏幕给：最前面那根要占到约三分之一屏高，太小了不像「挑一根杖」。
*/
.wand-stage {
position: relative;
height: clamp(300px, 42dvh, 540px);
margin: 0 0 var(--sp-2);
touch-action: none;
cursor: grab;
}
.wand-stage:active { cursor: grabbing; }
/*
* 最前面那根背后一圈**淡淡的光晕**：从中心往外化开的暖金，压在魔杖底下、
* 浮在磨砂底上——「这根是被挑中的」不用说话也看得出来。
*/
.wand-stage::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: min(70%, 420px);
height: min(88%, 420px);
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(255, 214, 140, 0.3), rgba(255, 214, 140, 0.1) 48%, transparent 74%);
filter: blur(8px);
pointer-events: none;
z-index: 1;
}
.wand-card {
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50% 60%;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease;
will-change: transform;
}
.wand-card.ghost { pointer-events: none; }
.wand-card img {
display: block;
height: clamp(240px, 34dvh, 460px);
width: auto;
-webkit-user-drag: none;
user-select: none;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}
.wand-card.front img {
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 216, 148, 0.55)) drop-shadow(0 0 34px rgba(255, 200, 110, 0.3));
}
/* 最前面那根周围浮的那几点光：慢慢亮起来，又淡下去。
z-index 要压过魔杖（杖那些卡片的 z-index 是 50 往下数），光点才浮在杖前面。 */
.wand-glow { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.wand-glow i {
position: absolute;
width: var(--s, 5px);
height: var(--s, 5px);
margin: calc(var(--s, 5px) / -2);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 242, 208, 0.95), rgba(255, 205, 120, 0));
animation: wandMote 3.6s ease-in-out infinite;
animation-delay: var(--d, 0s);
opacity: 0;
}
@keyframes wandMote {
0%, 100% { opacity: 0; transform: translateY(8px) scale(0.6); }
30% { opacity: 0.95; }
70% { opacity: 0.3; transform: translateY(-14px) scale(1.15); }
}
/* 计数 + 两侧箭头：划不动的玩家靠这两颗小箭头一根根跳 */
.wand-counter {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.wand-count {
min-width: 4em;
text-align: center;
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.16em;
color: var(--ink-soft);
}
.wand-arrow {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 22px;
line-height: 1;
color: var(--ink);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(64, 48, 31, 0.3);
border-radius: 50%;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.wand-arrow:hover { border-color: var(--red); background: rgba(255, 255, 255, 0.72); transform: scale(1.08); }
.wand-arrow:active { transform: scale(0.96); }
.wand-arrow:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }
/* 底下左右两块：魔杖木 / 杖芯 */
.wand-picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.wp-col { min-width: 0; }
.wp-title {
margin-bottom: 5px;
font-size: var(--fs-xs);
letter-spacing: 0.16em;
text-align: center;
color: var(--ink-soft);
}
.wp-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
/*
* 木 / 芯的小按钮走**深色魔法款**：暗紫黑的底、一道金边，选中时金边点亮、
* 外圈泛一点金光——和上面玻璃柜里那排杖是同一套「夜里的手艺」语言。
*/
.wp-chip {
padding: 5px 10px 6px;
font-family: var(--font-body);
font-size: var(--fs-xs);
color: #efe4cd;
background: linear-gradient(180deg, rgba(44, 32, 52, 0.94), rgba(26, 19, 32, 0.94));
border: 1px solid rgba(224, 178, 100, 0.34);
border-radius: var(--r);
cursor: pointer;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.28);
transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.wp-chip:hover { border-color: rgba(224, 178, 100, 0.72); }
.wp-chip.on {
background: linear-gradient(180deg, rgba(78, 54, 88, 0.96), rgba(44, 30, 52, 0.96));
border-color: var(--cine-gold);
box-shadow: 0 0 10px rgba(224, 178, 100, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.wp-chip .wp-zh { display: block; }
.wp-chip .wp-en {
display: block;
margin-top: 1px;
font-family: var(--font-hand);
font-size: 9px;
color: rgba(224, 178, 100, 0.72);
}
.wp-note {
min-height: 2.8em;
margin-top: 6px;
font-size: var(--fs-xs);
line-height: 1.5;
text-align: center;
color: var(--ink-soft);
}
/*
* 那颗【选择这根】：做短、居中、深棕底 + 金边——一枚压在手抄本上的火漆印章，
* 不是从前那条占满一行的纸按钮。primary 那道红左边在这里要盖掉。
*/
.wand-confirm { display: flex; justify-content: center; margin-top: var(--sp-4); }
.wand-confirm .btn {
width: auto;
min-width: 0;
padding: var(--sp-2) var(--sp-5);
font-size: var(--fs-m);
text-align: center;
letter-spacing: 0.2em;
color: #f3e3c0;
background: linear-gradient(180deg, #4a2f1b, #31200f);
border: 1px solid var(--cine-gold);
border-left-width: 1px;
box-shadow: 0 0 0 1px rgba(224, 178, 100, 0.22), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.wand-confirm .btn:hover {
border-color: #f0d9a6;
box-shadow: 0 0 0 1px rgba(224, 178, 100, 0.4), 0 8px 20px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* 窄屏：两列改上下、魔杖缩一号 */
@media (max-width: 560px) {
.wand-stage { height: clamp(240px, 36dvh, 340px); }
.wand-card img { height: clamp(200px, 30dvh, 280px); }
.wand-picks { grid-template-columns: 1fr; gap: var(--sp-2); }
.wand-confirm .btn { width: auto; }
}
/* ─────────────────────────────
钓鱼（ui/fishing.js）+ 钓具店（ui/screens-alley.js）
───────────────────────────── */
/*
* 钓鱼那一屏：中间一片水，结果写在下面；**右下角一个小格**放鱼竿
* （鱼竿不进背包，只在这儿切换）。
*/
.fish-stage { position: relative; margin-top: var(--sp-2); min-height: 42vh; }
.fish-empty { text-align: center; color: var(--cine-dim); padding: 18vh 0; }
/*
* 刚钓上来那一条：从 `left/top`（每抛一竿换一处，见 ui/fishing.js）冒出来，
* 亮一下，再慢慢浮起来化掉——**不常驻**（动画放完 animationend 就把自己收掉）。
*/
.fish-catch {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
pointer-events: none;
animation: catchFloat 2.4s ease forwards;
}
@keyframes catchFloat {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
52% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -64%) scale(0.98); }
}
/* 晕动症的玩家：别飘，短一点、直接淡掉 */
@media (prefers-reduced-motion: reduce) {
.fish-catch { animation: catchFade 1.2s ease forwards; }
@keyframes catchFade {
0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; }
}
}
.fc-art { font-size: 44px; line-height: 1; }
/* 钓上来的那条现在有真图了（鱼约 477×270、杂物方一些）：按高收，别把水面撑爆 */
.fc-art-img { display: block; height: 44px; width: auto; max-width: 88px; object-fit: contain; }
.fc-name { font-size: var(--fs-l); font-weight: 700; color: var(--cine-text); }
.fc-sub { font-size: var(--fs-xs); color: var(--cine-gold); margin-top: 2px; }
/*
* 「你钓起了个大家伙！」那张纸上的立绘窗（ui/fishing.js 的 askCapture）。
* 和战斗里那套「立绘舞台」同一个思路：**一块固定的透明安全区**，
* 全身图按原比例摆进来（contain，不压扁、不裁头），超出的部分由 overflow 收掉。
* 窗本身无边框、无底色——玩家看到的只是那只动物站在纸上。
*/
.fish-big {
position: relative;
width: min(58%, 190px);
aspect-ratio: 1;
margin: 0 auto var(--sp-2);
overflow: hidden;
pointer-events: none;
}
.fish-big .beast-art {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
}
.fb-name {
margin: 0 0 var(--sp-2);
text-align: center;
font-size: var(--fs-l);
letter-spacing: 0.14em;
color: var(--ink);
}
.fb-q { font-size: 54px; color: var(--ink-soft); opacity: 0.6; }
.fish-rod-chip {
position: absolute;
right: 3%;
bottom: 2%;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--r);
background: rgba(46, 30, 18, 0.72);
border: 1px solid rgba(224, 178, 100, 0.35);
color: #e6cf9a;
font-family: var(--font-body);
font-size: var(--fs-xs);
cursor: pointer;
backdrop-filter: blur(6px);
transition: border-color 0.14s ease, background 0.14s ease;
}
.fish-rod-chip:hover { border-color: var(--cine-gold); background: rgba(58, 40, 26, 0.82); }
.fish-rod-art { font-size: 18px; line-height: 1; }
/* 鱼竿图是细长的一根（约 291×813）：这颗小格里按高收，宽度跟着走 */
img.fish-rod-art { height: 26px; width: auto; max-width: 26px; object-fit: contain; }
/*
* 抛竿那一颗：屏幕正中偏下，泡在水里。
* 居中靠**外面这层 wrapper**（left:50% + translateX），按钮自己那两态才不会被这条顶掉。
* 长相照上面那根鱼竿的小格（.fish-rod-chip）来：同一套暗棕底 + 金细边 + 毛玻璃，
* 只把字排成两行——动作名一行，代价一行小字。
*/
.fish-cast-wrap {
position: absolute;
left: 50%;
/* 抬高一截，给正下方那颗「你不会受伤」的小气泡留位置（创作者 2026-10-17 点的位置） */
bottom: 8%;
transform: translateX(-50%);
z-index: 2;
}
.fish-cast-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 16px;
border-radius: var(--r);
background: rgba(46, 30, 18, 0.72);
border: 1px solid rgba(224, 178, 100, 0.35);
color: #e6cf9a;
font-family: var(--font-body);
cursor: pointer;
backdrop-filter: blur(6px);
transition: border-color 0.14s ease, background 0.14s ease;
}
.fish-cast-chip:hover { border-color: var(--cine-gold); background: rgba(58, 40, 26, 0.82); }
.fish-cast-chip:active { background: rgba(36, 23, 14, 0.88); }
.fcc-name { font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.08em; }
.fcc-sub { font-size: var(--fs-xs); line-height: 1.2; color: var(--cine-gold); }
/* 换竿那一扇小窗：竿**一把把竖着**排（每块是竖长的方块，像一根根立着的竿） */
.rod-picks {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--sp-2);
overflow-x: auto;
padding-bottom: 6px;
}
.rod-pick {
flex: 0 0 auto;
width: 84px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--sp-2) 4px;
border-radius: var(--r);
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(64, 48, 31, 0.3);
cursor: pointer;
}
.rod-pick.on { border-color: var(--red); background: rgba(255, 255, 255, 0.78); }
.rod-pick .rp-art {
font-size: 22px;
line-height: 1;
/* 这根竿的图是竖长的一条（约 291×813）：给它一块固定的竖位，名字与说明照旧在下面 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 104px;
}
.rod-pick .rp-art-img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 名字**竖着写**（writing-mode 竖排）——一眼就是一根立起来的竿 */
.rod-pick .rp-zh {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.14em;
font-size: var(--fs-s);
font-weight: 700;
color: var(--ink);
}
.rod-pick .rp-note { font-size: 9px; line-height: 1.35; text-align: center; color: var(--ink-soft); }
.rod-pick .rp-on { font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
/* ─────────────────────────────
马人商人（ui/centaur.js）：以物换物
───────────────────────────── */
/* 就一个框：他说的话 + 那颗按钮 */
.centaur-box {
margin: var(--sp-3) auto 0;
max-width: 30rem;
padding: var(--sp-4);
border-radius: var(--r);
background: rgba(20, 16, 26, 0.42);
border: 1px solid rgba(224, 178, 100, 0.28);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.centaur-box .ct-say { margin: 0 0 var(--sp-2); font-size: var(--fs-s); line-height: 1.85; color: var(--cine-text); }
.centaur-box .btn { margin-top: var(--sp-3); }
/* 摊开的手上东西：**只有名字与数量**（不给看能换到什么） */
.ct-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.ct-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(64, 48, 31, 0.3);
cursor: pointer;
}
.ct-item:hover { border-color: var(--red); background: rgba(255, 255, 255, 0.66); }
.ct-item .ci-name { font-size: var(--fs-s); color: var(--ink); }
.ct-item .ci-qty { font-family: var(--font-hand); font-size: var(--fs-s); color: var(--ink-soft); }
/* 换到的：一列（那时已经进背包了，这张纸只是给看） */
.ct-got { display: flex; flex-direction: column; gap: 6px; }
.ct-get {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 6px 0;
border-bottom: 1px solid rgba(64, 48, 31, 0.14);
}
.ct-get .cg-art { font-size: 20px; line-height: 1; }
.ct-get .cg-name { flex: 1; font-size: var(--fs-s); }
.ct-get .cg-qty { font-family: var(--font-hand); color: var(--ink-soft); }
/* 深色 + 绿边那颗（马人框里的【拿一样吃的来换】/【收下】）：
和下面那张深绿弹页同一身语言——林子里的事，别用奶油色纸按钮 */
.btn.deep {
color: #eef6e6;
background: linear-gradient(180deg, rgba(38, 58, 40, 0.94), rgba(22, 36, 26, 0.96));
border: 1px solid rgba(158, 200, 146, 0.55);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(220, 240, 214, 0.1);
}
.btn.deep:hover {
border-color: #cfe3c2;
background: linear-gradient(180deg, rgba(50, 74, 52, 0.96), rgba(28, 44, 32, 0.96));
}
/*
* 深绿那几张纸（一键播种 / 挑种子 / 温室 / 马人…）里的钮**全走深绿那一身**：
* 纸本身是深绿的，底下却浮着一排米黄纸片，看着像从别的窗口剪贴过来的
* （2026-10-19 创作者：「按钮全统一深色 ui」）。色值与 .btn.deep 同一组，
* 这里只是让"站在这张纸上"就够了，不用每处都记得传 kind: 'deep'。
* ⚠️ 只圈 .sheet.green：米黄纸（默认皮）、家那套深棕皮、图鉴的浅纸都不动。
*/
.sheet.green .btn {
color: #eef6e6;
background: linear-gradient(180deg, rgba(38, 58, 40, 0.94), rgba(22, 36, 26, 0.96));
border-color: rgba(158, 200, 146, 0.55);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(220, 240, 214, 0.1);
}
.sheet.green .btn:hover {
border-color: #cfe3c2;
background: linear-gradient(180deg, rgba(50, 74, 52, 0.96), rgba(28, 44, 32, 0.96));
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 240, 214, 0.14);
transform: translateY(-1px);
}
.sheet.green .btn:active { transform: translateY(1px); }
.sheet.green .btn:disabled { opacity: 0.45; transform: none; }
/* 深绿弹页（skin: 'green'）里那两张纸（马人）：行也走深绿，别留一排奶油色方块 */
.sheet.green .ct-item {
background: rgba(240, 246, 236, 0.1);
border-color: rgba(158, 200, 146, 0.34);
}
.sheet.green .ct-item:hover { background: rgba(240, 246, 236, 0.18); border-color: #cfe3c2; }
.sheet.green .ct-item .ci-name { color: var(--cine-text); }
.sheet.green .ct-item .ci-qty { color: #b6d6a4; }
.sheet.green .ct-get { border-bottom-color: rgba(158, 200, 146, 0.22); }
.sheet.green .ct-get .cg-name { color: var(--cine-text); }
.sheet.green .ct-get .cg-qty { color: #b6d6a4; }
/* ============================================================
18 · 通讯（猫头鹰）：一条条气泡的聊天屏
------------------------------------------------------------
和文游对话框（.vn）是**两层不同的东西**，各占各的 host：
.vn 面对面：旁白 + 台词 + 立绘，一次出一整段
.owl 猫头鹰：一条条短消息，自己的靠右、对面的靠左带小像
创作者 2026-09-29 定的：这两条线不能混着用。
============================================================ */
.owl-host { position: fixed; inset: 0; z-index: 46; pointer-events: none; }
.owl-host:empty { display: none; }
/*
* 聊天时页面那一层让开（和 body.vn-live 那一段同一个理由）：
* 这一层是铺满整屏的，底下那屏的牌子会从边上露出来，
* 看着就是「开着聊天，地图的按钮还在」。用 visibility 不用 display：
* 留着占位，页面高度不塌，合上时滚动位置不会跳。
* class 由聊天屏自己挂 / 摘（ui/owl.js）。
*/
body.owl-live .view,
body.owl-live .tray { visibility: hidden; }
.owl {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
pointer-events: auto;
/* 底图还看得见一点（半透明 + 虚化），但重心全在这一屏的字上 */
background: rgba(9, 7, 5, 0.92);
/* 玩家自己那张背景图是**内联**铺上来的（ui/owl.js 的 paintBg）：
两层——压暗的渐变 + 图本身；没设过时内联是空的，走上面这层纯色 */
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
backdrop-filter: blur(10px);
padding-left: max(var(--sp-4), env(safe-area-inset-left));
padding-right: max(var(--sp-4), env(safe-area-inset-right));
padding-bottom: env(safe-area-inset-bottom);
--fg: var(--cine-text);
--fg-dim: var(--cine-dim);
--fg-accent: var(--cine-gold);
animation: fade 0.18s ease both;
}
/* ---------- 顶上那一行：返回 + 这是谁 + 设置 ---------- */
.owl-head {
position: relative;
flex: none;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: calc(var(--sp-3) + env(safe-area-inset-top)) 0 var(--sp-3);
border-bottom: 1px solid rgba(224, 178, 100, 0.22);
}
.owl-back {
flex: none;
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--font-body);
font-size: var(--fs-s);
color: #e6cf9a;
background: none;
border: 1px solid rgba(224, 178, 100, 0.3);
border-radius: var(--r);
padding: 6px 10px;
cursor: pointer;
transition: border-color 0.14s ease, color 0.14s ease;
}
.owl-back:hover { border-color: var(--cine-gold); color: #fbf0d2; }
.owl-back .ob-arrow { font-size: var(--fs-l); line-height: 1; margin-top: -2px; }
/* 右边留一颗同样宽的空位，名字才是真的居中（不是被返回键挤偏）。
齿轮是**绝对定位**在这一格上的，所以它不参与这行 flex，位置不会把名字带偏。 */
.owl-head::after { content: ''; flex: none; width: 58px; }
.owl-gear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
color: var(--cine-dim);
background: rgba(16, 11, 8, 0.55);
border: 1px solid var(--glass-line);
border-radius: 50%;
cursor: pointer;
transition: color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.owl-gear:hover { color: #fff6e4; border-color: var(--cine-gold); }
.owl-gear:active { transform: translateY(-50%) scale(0.92); }
.owl-who { flex: 1 1 auto; min-width: 0; text-align: center; }
.owl-who .ow-zh {
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--cine-text);
}
.owl-who .ow-en {
margin-top: 1px;
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: var(--cine-dim);
}
/* ---------- 中间那一栏气泡 ---------- */
.owl-thread {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: var(--sp-4) 0;
overscroll-behavior: contain;
}
.owl-line { display: flex; align-items: flex-end; gap: 8px; }
.owl-line.me { justify-content: flex-end; }
.owl-face { flex: none; }
/* 小像本身就带描金画框、自己是透明底，缩到 34px 宽还认得出是谁 */
.owl-face .who-face.art { border: 0; }
/*
* 气泡。
* 尾巴那一角（自己那颗右下 / 对面那颗左下）**不圆**——这是即时通讯软件
* 一眼就能认出来的那个记号；四面一样圆就成了一排圆角方块。
*/
.owl-bubble {
max-width: 76%;
padding: 9px 13px;
border-radius: 12px;
font-size: var(--fs-m);
line-height: 1.55;
letter-spacing: 0.01em;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.owl-line.them .owl-bubble {
background: rgba(52, 35, 21, 0.92);
border: 1px solid rgba(224, 178, 100, 0.26);
color: var(--cine-text);
border-bottom-left-radius: 3px;
}
.owl-line.me .owl-bubble {
background: rgba(140, 47, 47, 0.88);
border: 1px solid rgba(224, 178, 100, 0.3);
color: #fdf3e3;
border-bottom-right-radius: 3px;
}
/* 「他在打字」那一排三点（.dots 那一套在 .vn-busy 里也用过） */
.owl-bubble .dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.owl-bubble .dots i {
width: 5px; height: 5px; border-radius: 50%;
background: var(--cine-dim);
animation: blot 1s ease-in-out infinite;
}
.owl-bubble .dots i:nth-child(2) { animation-delay: 0.15s; }
.owl-bubble .dots i:nth-child(3) { animation-delay: 0.3s; }
/*
* 红包气泡（2026-10-30）：AI 在通讯里发 `{红包：…}` 时，那条气泡换成这个红封套。
* 没拆的是颗按钮（金边 + 「拆红包」），拆过就压暗、写「已拆开」——
* 钱在拆的那一下入账（engine/red-envelope.js），重画多少次都不会再入。
*/
.owl-bubble.envelope {
display: flex;
align-items: center;
gap: 10px;
min-width: 168px;
padding: 10px 14px;
background: linear-gradient(160deg, #a8322a, #7d1f1a 70%);
border: 1px solid rgba(240, 200, 120, 0.55);
border-bottom-left-radius: 3px;
color: #ffe9c9;
text-align: left;
cursor: pointer;
}
.owl-bubble.envelope .env-ico { font-size: 22px; line-height: 1; }
.owl-bubble.envelope .env-tx { display: flex; flex-direction: column; gap: 2px; }
.owl-bubble.envelope .env-amt { font-size: var(--fs-m); font-weight: 700; letter-spacing: 0.02em; }
.owl-bubble.envelope .env-note { font-size: var(--fs-s); opacity: 0.9; }
.owl-bubble.envelope .env-state { font-size: var(--fs-xs); opacity: 0.75; }
.owl-bubble.envelope.opened {
cursor: default;
filter: saturate(0.55) brightness(0.82);
}
.owl-bubble.envelope:not(.opened):hover { border-color: rgba(255, 226, 160, 0.9); }
/*
* 顶上那条系统提示（猫头鹰把联系方式送到了，见 ui/owl.js 的 noticeNode）：
* 居中、压暗、圆角小药丸——和聊天软件里那句「你已添加了 XXX」是同一个位置感。
* 它不在 owlHist 里，所以永远排在最上面，不会被当成一条消息读回去。
*/
.owl-notice {
align-self: center;
max-width: 88%;
margin: 2px 0 12px;
padding: 5px 13px;
text-align: center;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--cine-dim);
background: rgba(255, 247, 232, 0.07);
border-radius: 999px;
}
/* ---------- 底下那条输入栏 ---------- */
.owl-bar {
flex: none;
display: flex;
align-items: flex-end;
gap: var(--sp-2);
padding: var(--sp-3) 0 var(--sp-3);
border-top: 1px solid rgba(224, 178, 100, 0.18);
}
.owl-input {
flex: 1 1 auto;
resize: none;
min-height: 44px;
max-height: 120px;
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: 1.6;
color: var(--cine-text);
background: rgba(255, 247, 232, 0.06);
border: 1px solid var(--glass-line);
border-radius: var(--r);
padding: 10px 12px;
}
.owl-input:focus { outline: none; border-color: var(--glass-line-2); background: rgba(255, 247, 232, 0.1); }
.owl-input::placeholder { color: rgba(189, 169, 138, 0.75); }
.owl-send {
flex: none;
font-family: var(--font-body);
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.06em;
color: #fdf3e3;
background: linear-gradient(180deg, #a63a3a, #7e2626);
border: 1px solid rgba(224, 178, 100, 0.42);
border-radius: var(--r);
padding: 12px var(--sp-4);
cursor: pointer;
box-shadow: 0 3px 0 rgba(50, 20, 20, 0.5);
transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.14s ease;
}
.owl-send:hover { border-color: var(--cine-gold); }
.owl-send:active { transform: translateY(1px); }
.owl-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
@media (max-width: 560px) {
.owl-head::after { width: 48px; }
.owl-bubble { max-width: 84%; }
.owl-thread { padding: var(--sp-3) 0; }
}
/*
* 通讯记录那张纸（【设置 · 历史 · 通讯历史】/ 抬头齿轮里的【历史】点开）：
* 一张大框，玩家自己改——版式走 .profile-input / .memo-box 那一套
* （和【对话历史】里那个人那本逐格对齐），这里不再另配样式。
*/
/* 齿轮里那张纸上的背景预览（【换一张】/【撤掉这张】上面那一条）：
按高裁切成一条横幅，看得见换的是哪张图就够 */
.owl-bg-prev {
margin: 0 0 10px;
border: 1px solid rgba(64, 48, 31, 0.22);
border-radius: var(--r);
overflow: hidden;
}
.owl-bg-prev img { display: block; width: 100%; height: 118px; object-fit: cover; }
/*
* 自由对话里那颗【不聊了】：**暗红底 + 红边**（创作者 2026-09-29 定的）。
* 它和另外三颗（手抄本 / 背包 / 设置）并排挂在对话框上沿——
* 那三颗是「随手点一下」，这一颗是**走**，得在一排里一眼认得出来。
* 尺寸照 .btn.ghost 那一套（同一个托盘里，宽窄要齐），只换皮。
*/
.btn.quit {
width: auto;
font-size: var(--fs-s);
padding: var(--sp-2) var(--sp-3);
color: #f7ded9;
background: linear-gradient(180deg, rgba(94, 28, 28, 0.92), rgba(58, 16, 16, 0.95));
border: 1px solid rgba(198, 74, 74, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
}
.btn.quit:hover {
color: #fff2ee;
border-color: #e37a7a;
background: linear-gradient(180deg, rgba(118, 36, 36, 0.95), rgba(74, 22, 22, 0.96));
}
/*
* 细长一条、字居中、暗棕底（创作者 2026-09-29 看截图后定的口径）。
*
* 谁在用：三张历史纸底下的【存下】，以及长期记忆那一块里的【总结】。
* 和旁边那种「按内容宽的小方块」不是一路——那几颗是随手点一下的动作，
* 这几颗是**这一张纸上要落下的那一笔**，长得就该像一条落款。
*
* ⚠️ 从前点掉过一次「大长条按钮」（见上面 .acts 那段注释），说的是
* 「字靠左、整条横贯纸面」那种；这里是**字居中**的一条，不是那一种。
* 要是不想让它占满整张纸的宽，把 width 改成一个定值就行。
*/
.btn.bar {
width: 100%;
display: block;
text-align: center;
padding: 10px var(--sp-3);
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.24em;
/* 字距是给中文留的气口，末尾那一格会顶出去——缩回来，看着才是居中的 */
text-indent: 0.24em;
color: #f4e6cd;
background: linear-gradient(180deg, #5c4733 0%, #3a2b1e 100%);
border: 1px solid rgba(64, 48, 31, 0.9);
border-radius: var(--r);
box-shadow: 0 3px 0 rgba(28, 20, 12, 0.5), 0 8px 18px rgba(0, 0, 0, 0.28);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.bar:hover {
color: #fff6e4;
background: linear-gradient(180deg, #6d5540 0%, #46341f 100%);
border-color: #8a6f52;
}
.btn.bar:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(28, 20, 12, 0.5); }
.btn.bar:disabled { opacity: 0.5; }
/*
* 他在敲字的时候，抬头那一行整个换成「对方正在输入…」
* （ui/owl.js 的 setTyping）：名字让位给状态，所以压暗一档、不抢眼；
* 英文那一行收起来——两个字的身份换成一整句状态，并排读不通了。
*/
.owl-who.typing .ow-zh {
font-size: var(--fs-m);
font-weight: 400;
letter-spacing: 0.1em;
color: #cdb489;
}
.owl-who.typing .ow-en { display: none; }
/*
* 弹页底下那条按钮栏默认「按内容宽」（见上面 .sheet > .acts 那段注释）。
* 细长那几颗（【存下】【总结】）是**这一张纸上要落下的那一笔**，得走满整张纸——
* 那条规则的特异性比 .btn.bar 高，所以这里照它的写法再压一条，不然只有 72px 宽。
*/
.sheet > .acts > .btn.bar,
.panel-acts > .btn.bar { width: 100%; flex: 1 1 100%; }
/*
* 登记表第 2 页【主角设定】那张大框（见 ui/setup.js 的 pagePersona）。
* 它长在**便签纸**上（不是弹页里），所以底色要跟着纸走：微透的白，
* 让纸的纹理透上来一点，看着还是写在纸上、不是贴了块塑料。
*/
.setup-persona {
width: 100%;
min-height: 9.5em;
resize: vertical;
font-family: var(--font-body);
font-size: var(--fs-s);
line-height: 1.7;
color: var(--ink);
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(64, 48, 31, 0.3);
border-radius: var(--r);
padding: 10px 12px;
}
.setup-persona:focus { outline: none; border-color: var(--red); background: rgba(255, 255, 255, 0.62); }
.setup-persona::placeholder { color: var(--ink-soft); opacity: 0.72; }
.sp-len {
margin-top: 6px;
text-align: right;
font-family: var(--font-hand);
font-size: var(--fs-xs);
color: var(--ink-soft);
}
/* ============================================================
19 · 开始页（开机那一张，见 ui/start.js）
------------------------------------------------------------
黑底 + 紫框 + 金点慢慢往上飘 + HOGWARTS。
创作者 2026-09-29 定的：网页一打开（包括刷新）先看到这一屏。
整屏只有两件事可做：入学 / 查看存档。
============================================================ */
.start {
position: fixed;
inset: 0;
z-index: 30;
display: grid;
/*
* ⚠️ 这一列**必须夹住**（minmax(0, 1fr)）：不夹的话，格子里的 `.start-frame` 是
* `width: min(560px, 100%)`，容器在算这一列有多宽时那个百分比是"不定的"，
* 于是按内容的最大宽度撑（比容器还宽）——框就从右边溢出、右边一截被吃掉，
* 看起来整块往右偏。夹住之后列宽 = 容器内容宽，place-items 才真的把它居中。
*/
grid-template-columns: minmax(0, 1fr);
place-items: center;
padding: var(--sp-5) var(--sp-4);
/* 极暗的底，带一点点紫——像礼堂熄灯之后那种黑，不是纯灰 */
background:
radial-gradient(120% 90% at 50% 108%, rgba(74, 42, 110, 0.34), transparent 62%),
radial-gradient(90% 70% at 50% -10%, rgba(88, 54, 128, 0.20), transparent 60%),
#07060a;
overflow: hidden;
}
/* ---------- 那一圈紫框 ---------- */
.start-frame {
position: relative;
z-index: 2;
width: min(560px, 100%);
padding: clamp(28px, 7vh, 56px) clamp(22px, 6vw, 48px) clamp(24px, 5vh, 40px);
text-align: center;
border: 1px solid rgba(158, 116, 214, 0.55);
border-radius: 6px;
/* 框里再套一圈暗紫：像礼堂门上的双线描金，不发光刺眼 */
box-shadow:
inset 0 0 0 1px rgba(84, 52, 132, 0.55),
inset 0 0 0 9px rgba(12, 9, 20, 0.72),
inset 0 0 0 10px rgba(158, 116, 214, 0.22),
0 24px 70px rgba(0, 0, 0, 0.7);
background: linear-gradient(180deg, rgba(20, 15, 30, 0.72), rgba(10, 8, 16, 0.86));
backdrop-filter: blur(2px);
}
/* 四角那四枚小菱形：紫框的"描金"（纯装饰，不参与布局） */
.start-frame::before,
.start-frame::after {
content: '';
position: absolute;
width: 7px;
height: 7px;
background: rgba(198, 160, 78, 0.85);
transform: rotate(45deg);
}
.start-frame::before { left: 14px; top: 14px; }
.start-frame::after { right: 14px; bottom: 14px; }
.start-mark {
font-size: 22px;
line-height: 1;
color: rgba(198, 160, 78, 0.9);
text-shadow: 0 0 14px rgba(198, 160, 78, 0.5);
}
/* ---------- HOGWARTS ---------- */
.start-title {
margin: 10px 0 6px;
/* 这套字里那个 IM Fell English 正是'老学院'那一路（工程里已有的字体，不另引） */
font-family: var(--font-hand, Georgia, 'Times New Roman', serif);
font-size: clamp(38px, 12vw, 66px);
font-weight: 400;
letter-spacing: 0.18em;
/* 末尾那一个字母的间距会把标题顶偏左，缩回来才真居中 */
text-indent: 0.18em;
line-height: 1.1;
background: linear-gradient(180deg, #f0e3c2 0%, #c9a44f 48%, #8d6f2c 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 10px rgba(158, 116, 214, 0.45));
}
.start-sub {
margin-bottom: clamp(26px, 6vh, 44px);
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.18em;
color: rgba(178, 156, 214, 0.85);
}
/* ---------- 两颗按钮：黑底、紫边、中文大英文极小 ---------- */
.start-btns { display: flex; flex-direction: column; gap: var(--sp-3); }
.start-btn {
display: block;
width: 100%;
padding: 13px var(--sp-4) 11px;
font-family: var(--font-body);
color: #efe6ff;
background: linear-gradient(180deg, rgba(24, 18, 38, 0.95), rgba(12, 9, 20, 0.98));
border: 1px solid rgba(158, 116, 214, 0.6);
border-radius: var(--r);
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.start-btn .sb-zh {
display: block;
font-size: var(--fs-l);
font-weight: 700;
letter-spacing: 0.3em;
text-indent: 0.3em;
}
.start-btn .sb-en {
display: block;
margin-top: 3px;
font-family: var(--font-hand);
font-size: 9px;
letter-spacing: 0.34em;
text-indent: 0.34em;
color: rgba(178, 156, 214, 0.8);
}
.start-btn:hover {
border-color: #b98cf0;
box-shadow: 0 0 0 1px rgba(185, 140, 240, 0.35), 0 10px 26px rgba(0, 0, 0, 0.6);
transform: translateY(-1px);
}
.start-btn:active { transform: translateY(1px); }
.start-btn.primary { border-color: rgba(198, 160, 78, 0.75); }
.start-btn.primary .sb-zh { color: #f6e7bf; }
.start-btn.primary:hover { border-color: #e0bb63; box-shadow: 0 0 0 1px rgba(224, 187, 99, 0.35), 0 10px 26px rgba(0, 0, 0, 0.6); }
.start-foot {
margin-top: clamp(22px, 5vh, 36px);
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.14em;
color: rgba(140, 124, 168, 0.7);
}
/* ---------- 金色光点：从下面慢慢飘上去 ---------- */
.start-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.start-motes i {
position: absolute;
bottom: -8px;
width: var(--s, 3px);
height: var(--s, 3px);
border-radius: 50%;
background: radial-gradient(circle, #ffe9a8 0%, #d9ab48 55%, rgba(217, 171, 72, 0) 72%);
opacity: 0;
animation: moteRise var(--t, 16s) linear var(--d, 0s) infinite;
will-change: transform, opacity;
}
@keyframes moteRise {
0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.7); }
8% { opacity: var(--o, 0.5); }
50% { transform: translateY(-48vh) translateX(9px) scale(1); }
82% { opacity: var(--o, 0.5); }
100% { opacity: 0; transform: translateY(-96vh) translateX(-6px) scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
.start-motes i { animation: none; opacity: 0.22; }
.start-motes i:nth-child(-n+8) { animation: moteBlink 6s ease-in-out infinite; }
@keyframes moteBlink { 0%,100% { opacity: 0.12; } 50% { opacity: 0.3; } }
}
/* 【自由剧情 · 设置】里那一格：关掉「读取游戏内信息」之后才摆的日期框 */
.sg-box {
margin-top: 10px;
padding: 10px 12px;
border: 1px solid rgba(64, 48, 31, 0.22);
border-radius: var(--r);
background: rgba(255, 255, 255, 0.3);
}
.sg-label { margin-bottom: 6px; font-size: var(--fs-s); color: var(--ink-soft); }
.sg-input {
width: 100%;
font-family: var(--font-body);
font-size: var(--fs-m);
color: var(--ink);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(64, 48, 31, 0.3);
border-radius: var(--r);
padding: 8px 10px;
}
.sg-input:focus { outline: none; border-color: var(--red); background: rgba(255, 255, 255, 0.7); }
/* ============================================================
通讯 · 玩家自己传的头像（ui/owl-avatar.js）
============================================================ */
/* 自定义头像那一小块：系统那批小像是透明底的立绘，方照片得自己收个边才像头像 */
.who-face.face-img {
border-radius: 7px;
overflow: hidden;
border: 1px solid rgba(224, 178, 100, 0.45);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.who-face.face-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 齿轮里那张纸上的头像预览：一行居中 */
.owl-face-prev { display: flex; justify-content: center; margin: 0 0 10px; }
/* ---------- 裁剪那一张纸 ---------- */
.ac-wrap { display: flex; justify-content: center; }
/*
* 取景框：正方、overflow 藏住外头的部分。`touch-action: none` 是必须的——
* 少了它，手机上拖图会变成滚页面，图纹丝不动。
*/
.ac-stage {
position: relative;
width: 260px;
height: 260px;
overflow: hidden;
border: 1px solid rgba(64, 48, 31, 0.45);
border-radius: var(--r);
background: repeating-conic-gradient(rgba(64, 48, 31, 0.08) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.ac-stage:active { cursor: grabbing; }
/* 图按自己的像素尺寸摆，缩放与位移全靠 transform（transform-origin 得钉在左上角） */
.ac-img {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
max-width: none;
pointer-events: none;
will-change: transform;
}
/* ---------- 开始页那份公告（ui/start.js 的 notice） ---------- */
/*
* 它盖在整个开始页上：底下一层压暗的幕（点幕不收，只有底下那颗【知道了】能关，
* 见那份「一张纸一个出口」的规矩），中间一张和开始页同一套的紫框黑底卡片。
*/
.start-notice {
/* fixed 而不是 absolute：不管挂在哪一层底下，都永远浮在**屏幕**中间。
手机上那颗【知道了】要是跟着内容沉到屏幕外去，这一层就等于把游戏锁死了。 */
position: fixed;
inset: 0;
z-index: 5;
/* flex + margin:auto 的居中：框放得下就居中，万一放不下也能整层滚动，
不像 grid 的 place-items:center 那样会把溢出的上半截悄悄裁掉 */
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
padding: var(--sp-4);
background: rgba(5, 4, 8, 0.74);
backdrop-filter: blur(3px);
animation: fade 0.22s ease both;
}
.sn-frame {
display: flex;
flex-direction: column;
width: min(520px, 100%);
margin: auto;
/* dvh 那一行盖住上一行：手机的 vh 是连地址栏后面一起算的大视口，
84vh 居中后底边落在可视区的九成上下，按钮正好被地址栏压住（2026-09-30 报的）。 */
max-height: min(84vh, 100%);
max-height: min(84dvh, 100%);
padding: clamp(20px, 4.5vh, 34px) clamp(18px, 5vw, 34px) clamp(16px, 3.5vh, 26px);
border: 1px solid rgba(158, 116, 214, 0.55);
border-radius: 6px;
box-shadow:
inset 0 0 0 1px rgba(84, 52, 132, 0.5),
inset 0 0 0 9px rgba(12, 9, 20, 0.7),
inset 0 0 0 10px rgba(158, 116, 214, 0.2),
0 22px 60px rgba(0, 0, 0, 0.72);
background: linear-gradient(180deg, rgba(20, 15, 30, 0.94), rgba(10, 8, 16, 0.97));
}
.sn-title {
flex: none;
margin-bottom: 6px;
font-family: var(--font-hand);
font-size: var(--fs-l);
letter-spacing: 0.24em;
text-indent: 0.24em;
color: #f0e3c2;
text-align: center;
}
/* 正文可滚：这份东西不短，小屏上不能撑破卡片 */
.sn-body { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.sn-body > div + div { margin-top: 12px; }
.sn-lead {
font-size: var(--fs-m);
color: #efe6ff;
text-align: center;
letter-spacing: 0.06em;
}
.sn-sub {
font-size: var(--fs-s);
color: rgba(178, 156, 214, 0.9);
text-align: center;
letter-spacing: 0.12em;
}
.sn-p { font-size: var(--fs-s); line-height: 1.75; color: rgba(206, 196, 226, 0.82); }
.sn-p > div + div { margin-top: 2px; }
/* 他圈出来的那两行：加粗 + 提亮（金压紫，和开始页那两颗按钮一个色系） */
.sn-hi {
padding: 9px 12px;
border-left: 2px solid rgba(224, 187, 99, 0.85);
border-radius: 3px;
background: rgba(224, 187, 99, 0.09);
font-size: var(--fs-s);
font-weight: 700;
line-height: 1.7;
color: #f6e7bf;
}
.sn-hi > div + div { margin-top: 2px; }
.sn-sign {
font-family: var(--font-hand);
font-size: var(--fs-m);
color: rgba(198, 160, 78, 0.92);
text-align: center;
letter-spacing: 0.14em;
}
.sn-act { flex: none; margin-top: 16px; }
/*
* 公告里那一格联系方式（ui/start.js 的 notice）：
* 金线金底、居中、字号比正文大一档——玩家找的就是它，得在整张纸上跳出来。
* 和「高亮那两行」是两种意思：那两行是重点说明，这一格是**要照着做**的一条路。
*/
.sn-contact {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(198, 160, 78, 0.55);
border-radius: 4px;
background: linear-gradient(180deg, rgba(198, 160, 78, 0.14), rgba(198, 160, 78, 0.06));
text-align: center;
line-height: 1.8;
}
.sn-contact .sc-lead { font-size: var(--fs-s); color: rgba(214, 204, 232, 0.9); }
.sn-contact .sc-link { font-size: var(--fs-m); font-weight: 700; color: #f6e7bf; }
.sn-contact .sc-link a {
color: #ffd98a;
text-decoration: underline;
text-underline-offset: 3px;
/* 长网址在窄屏上不许撑破卡片 */
word-break: break-all;
}
.sn-contact .sc-link a:hover { color: #fff3d0; }
/* ============================================================
开始页 · 更新公告（ui/start.js 的 showUpdates）
------------------------------------------------------------
和那份作品公告同一个壳（.start-notice / .sn-frame），
只多两样：一条一条的版本记录，和「最新那版」的那点强调。
============================================================ */
/* 更新那一张比免责声明窄一点、好读一行 */
.upd-frame { width: min(480px, 100%); }
.upd-item + .upd-item { margin-top: 16px; }
/* 最新那版：左边一道金线 + 抬头提亮（"略微突出"而不是另一种样式） */
.upd-item.fresh {
padding-left: 12px;
border-left: 2px solid rgba(224, 187, 99, 0.75);
}
.upd-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.upd-ver {
font-family: var(--font-hand);
font-size: var(--fs-m);
font-weight: 700;
letter-spacing: 0.1em;
color: #f0e3c2;
}
.upd-item.fresh .upd-ver { color: #ffd98a; }
.upd-date {
font-family: var(--font-hand);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
color: rgba(178, 156, 214, 0.8);
}
.upd-list { font-size: var(--fs-s); line-height: 1.8; color: rgba(206, 196, 226, 0.86); }
.upd-li + .upd-li { margin-top: 2px; }
/* 一条不带编号的补充（比如"这个开关怎么用"） */
.upd-note {
margin-top: 6px;
padding: 7px 10px;
border-radius: 3px;
background: rgba(158, 116, 214, 0.12);
color: rgba(214, 204, 232, 0.9);
line-height: 1.7;
}
/* 首页第三颗按钮：比【入学】【查看存档】小一号、轻一点（它不"进去"，只是看看） */
.start-btn.mini {
padding: 9px var(--sp-4) 8px;
border-color: rgba(158, 116, 214, 0.34);
}
.start-btn.mini .sb-zh {
font-size: var(--fs-m);
font-weight: 400;
letter-spacing: 0.22em;
text-indent: 0.22em;
color: rgba(226, 216, 246, 0.9);
}
.start-btn.mini .sb-en { opacity: 0.7; }
.start-btn.mini:hover { border-color: rgba(185, 140, 240, 0.7); }
/* ---------- 21 · 神奇动物手提箱（ui/beasts.js） ----------
* 整只箱子是一屏全屏层（和通讯屏同一层，压在弹页底下）；
* 箱身是一张干净底图，标签 / 格子 / 按钮全是按百分比贴上去的零件。
* 字号走 cqw：箱子随窗口缩放时，贴上去的字跟着箱子一起缩放。
*/
.case-host {
/* 54：压在背包那层小窗（52）上面、弹页（56）下面——从背包里开箱子时不该被背包盖住 */
position: fixed; inset: 0; z-index: 54;
display: grid; place-items: center;
/* 整屏挡住底下那世界：开着箱子时地图的牌子不该还能点 */
background: rgba(23, 16, 10, 0.55);
}
.case-host:empty { display: none; }
/*
* 箱子开着的那阵（body.case-live，ui/beasts.js 挂/摘）：小窗与弹页整层抬到箱子上面——
* 喂食档是从箱子按出来的，浮在箱子底下等于没弹（创作者 2026-10-01 报的）。
* 顺序：箱子 54 < 小窗 58 < 弹页 60；吐司(70)与飘字(60，DOM 在后)照旧浮在最上。
*/
body.case-live .panel-layer { z-index: 58; }
body.case-live .overlay { z-index: 60; }
.case {
position: relative;
height: min(94vh, 118vw);
max-width: 96vw;
aspect-ratio: 2048 / 2493;
container-type: inline-size;
}
.case > * { position: absolute; }
.case-art { inset: 0; width: 100%; height: 100%; display: block; }
.case-x { top: 1.2%; right: 1.6%; width: 40px; height: 40px; z-index: 3; }
.case-title { left: 7%; top: 3.4%; width: 40%; }
/* 上半两颗入口标签：空白标签纸 + 往上写的黑字 */
.case-tag { background: none; border: 0; padding: 0; cursor: pointer; top: 12%; width: 19%; }
.case-tag.wh { left: 12%; }
.case-tag.breed { left: 36%; }
.case-tag img { width: 100%; display: block; }
.case-tag .ct-box {
position: absolute; inset: 8% 6% 6%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2%;
}
.case-tag .ct-zh {
/* 版式图上那两行黑字只是「这儿要有字」的占位：真字走游戏自己的衬线墨字 */
font-family: var(--font-body);
font-weight: 600; font-size: clamp(13px, 4.1cqw, 24px); line-height: 1.32; letter-spacing: 0.16em;
color: var(--ink); text-align: center;
}
/* 动物仓库摞两行（一行两个字），繁育区一行放下 */
.case-tag.wh .ct-zh { width: 2.5em; }
.case-tag.breed .ct-zh { white-space: nowrap; }
.case-tag .ct-en {
font-family: var(--font-hand);
font-size: clamp(7px, 1.6cqw, 11px); letter-spacing: 0.2em; text-indent: 0.2em;
color: var(--ink-soft); white-space: nowrap;
}
.case-tag:hover img { filter: brightness(1.04); }
.case-tag:active { transform: scale(0.98); }
/* 功能按钮（详情 / 喂食 / 放生）：图就是键面 */
.case-fn { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.case-fn img { width: 100%; display: block; }
.case-fn:hover img { filter: brightness(1.06); }
.case-fn:active { transform: translateY(1px) scale(0.97); }
/* 空格子那颗框：本身是颗键，点去仓库挑一只 */
.case-slotbtn {
background: none; border: 0; padding: 0; cursor: pointer; display: block;
/* 空格子也锁成正方形：这张底图是 485×506（差 4%），不锁的话空的那格比站了动物的矮一截 */
width: 100%; aspect-ratio: 1; overflow: hidden;
}
.case-slotbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-slotbtn:hover img { filter: brightness(1.05); }
.case-slotbtn:active { transform: scale(0.98); }
/* 格子里放了动物：正方形羊皮纸卡（和仓库卡同一味底），中间先摆 ?，以后透明底头像铺这儿。
点它去仓库替换 / 卸下。（圆形那版太丑，创作者 2026-10-01 撤了）
⚠️ overflow: hidden 不是装饰：这盒子是 grid 容器，格子里的立绘默认会把**自动最小尺寸**
顶起来（竖图尤其明显——嗅嗅那张 636×966 能把一格 92 的框撑到 124），
于是三格高矮不一、还有一截戳到框外面。裁在框里才是这里要的（创作者 2026-10-02）。 */
.case-avatar,
.bb-avatar {
position: relative;
width: 100%; aspect-ratio: 1;
overflow: hidden;
background: var(--case-sq-parchment) center / 100% 100% no-repeat;
border: 0; border-radius: 6px;
box-shadow: 0 3px 9px rgba(30, 20, 8, 0.3);
display: grid; place-items: center;
cursor: pointer; padding: 0;
font-family: var(--font-body); font-size: 8cqw; color: var(--ink-soft);
}
/*
* 立绘**钉死在框内 88% 那一方**（四周各留 6%）：不靠百分比高——百分比高在这种
* 由 aspect-ratio 定高的盒子里落不住，图会照自己的比例往下长。
* 裁哪儿照 data/assets.js 那个物种的 focus（object-position 由界面写进 style）。
*/
.case-avatar .beast-art,
.bb-avatar .beast-art {
position: absolute;
top: 6%; left: 6%;
width: 88%; height: 88%;
}
.case-avatar:hover { filter: brightness(1.04); }
.case-avatar:active { transform: scale(0.98); }
/* 繁育槽里那张不吃 cqw（繁育纸不是容器），字号给固定值 */
.bb-avatar { font-size: 26px; }
/*
* 一只动物的立绘，摆在格子 / 纸卡 / 相框正中（ui/beasts.js 的 beastArtNode）。
*
* 创作者要的是**方块里只看到头**：立绘是一整只动物，所以
* · `object-fit: cover` 把装不下的部分裁掉；
* · 裁哪儿（`object-position`）由 data/assets.js 里那个物种的 focus 给——
* 横着侧身站的那几张（独角兽 / 海蛇 / 希拉克鱼）头在左边，竖着站的（嗅嗅 / 凤凰）头在上头，
* 一个全局值会把一半物种裁成没有头。
* 留 12% 的空：图缩在羊皮纸框里头，不压着框边。
*
* ⚠️ `mix-blend-mode: multiply` 是给**白底**擦出来的：这批立绘是白底（创作者说以后换透明底），
* 压在羊皮纸上就是一块白方形。等换成透明底那批，这一行删掉就行。
*/
.beast-art {
width: 88%;
height: 88%;
object-fit: cover;
border-radius: 4px;
mix-blend-mode: multiply;
pointer-events: none;
}
/*
* 详情纸那一格：这是「看这一只」的地方，整只站进来（不裁）。
* 小格子（仓库卡 / 方格 / 繁育槽 / 孵化卡）走的是下面那张裁好的头像，没有头像的才退回 cover 裁头。
*/
.beast-art.full {
width: 94%;
height: 94%;
object-fit: contain;
}
/*
* 已经裁好的头像（assets/avatar/，登记在 data/assets.js 的 BEAST_AVATARS，ui/beasts.js 的 beastArtNode）。
*
* 这一张本来就是头，所以**不再裁**：cover 会把 0.7 的竖构图在方框里削掉上下两成（耳朵、角就没了），
* 换成 contain 让整颗头站进来。这批图是透明底，四周不会留出一个白框。
* 框本身的比例不动（方格是方的、仓库卡那扇窗是方的）——头像各家的裁切高矮不一，
* 统一塞进同一个窗里才看得齐，所以宁可留一点空也不裁。
*/
.beast-art.av {
object-fit: contain;
}
/* 野外那一摞圆圈：自己的规则排在后面，这里按三条选择器的权重压回 contain */
.wild-av .beast-art.av {
object-fit: contain;
}
/*
* 仓库那张竖纸卡（319×503）：头像是一个**正方形的窗**压在卡的上半，
* 不是把整张长条卡都拿来当头像位——那样一条横着站的龙会被拉成只剩半截身子。
* 名字还在卡的下沿（.bf-name），中间那段留白就是纸卡本来的样子。
*/
.beast-face .beast-art {
width: 84%;
height: auto;
aspect-ratio: 1;
align-self: start;
margin-top: 6%;
}
/*
* 头像占满整张纸卡（创作者 2026-10-03 指的图：中间缩成一个方块、四周空着不好看）。
* 图照自己的比例铺满卡片的内框（左右各让 5% 给那道描边），顶端贴着描边往下长，
* 长到哪儿算哪儿 —— 这批头像的宽高比不完全一致（0.6～1.0），所以宁可下面留一点空，
* 也不 cover 二次裁（裁下去龙的角、嗅嗅的耳朵就没了）。
* 名字那颗牌子本来就浮在纸卡下沿，图铺满后正好压在图上。
*/
.beast-face .beast-art.av,
.bd-face .beast-art.av {
width: 90%;
height: auto;
aspect-ratio: auto;
align-self: start;
margin-top: 5%;
}
/*
* 手提箱那几颗方格（出战格 / 三个生产格 / 孵化卡）：框是画在箱子上的正方形，改不了形状，
* 所以头像在这里铺满**整格高度**（原来是 88% 那一方，四周都留空），左右那点空是这批头像的
* 比例（0.7 的竖构图）自带的——再要满就得裁掉上下各一成半，耳朵角会没，所以停在这儿。
*/
.case-avatar .beast-art.av,
.bb-avatar .beast-art.av,
.hs-avatar .beast-art.av {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
}
/* 出战格：格子在上，两颗钮在下 */
.case-slot.fight {
left: 64%; top: 11.5%; width: 21%;
display: flex; flex-direction: column; align-items: center; gap: 4%;
}
.case-slot.fight .case-fn { width: 76%; }
/* 下半：栏目名一条 + 三个生产格（钮在上、格子在下） */
.case-bar { left: 11%; top: 46.6%; width: 25%; }
.case-bar img { width: 100%; display: block; }
.case-bar span {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 3.1cqw; letter-spacing: 0.18em; color: var(--ink);
}
.case-col { top: 52.4%; width: 21.5%; display: flex; flex-direction: column; align-items: center; gap: 2.5%; }
.case-col.c1 { left: 14%; }
.case-col.c2 { left: 40.5%; }
.case-col.c3 { left: 67%; }
.case-col .case-fn { width: 76%; }
/*
* 生产格底下那颗小【收获】（创作者 2026-10-02 指的位子：格子正下方）。
* 小药丸、暗棕底 + 暖金字；右上角那份数 = 这一格攒了几份，没攒下就不挂角标、
* 也不描金（空的那颗不该催人去按）。字号走 cqw：跟着箱子那一屏一起缩放。
*/
.case-harvest {
position: relative;
flex: 0 0 auto;
width: 62%;
padding: 1.1% 0 1.4%;
border: 1px solid rgba(118, 85, 44, 0.75);
border-radius: 999px;
background: linear-gradient(180deg, rgba(72, 51, 32, 0.95), rgba(44, 30, 18, 0.96));
box-shadow: 0 2px 6px rgba(30, 20, 8, 0.35), inset 0 1px 0 rgba(255, 235, 200, 0.12);
color: #f0dcae;
font-family: var(--font-body);
font-size: 2.5cqw;
letter-spacing: 0.16em;
text-indent: 0.16em;
cursor: pointer;
}
.case-harvest:hover { filter: brightness(1.1); }
.case-harvest:active { transform: translateY(1px) scale(0.98); }
.case-harvest.has {
border-color: rgba(224, 189, 120, 0.9);
box-shadow: 0 0 10px rgba(224, 189, 120, 0.35), 0 2px 6px rgba(30, 20, 8, 0.35);
}
.case-harvest .ch-n {
position: absolute;
right: -3%;
top: -40%;
min-width: 3.4cqw;
padding: 0 0.8cqw;
border-radius: 999px;
background: #8c2f2f;
color: #fff3e2;
font-size: 2cqw;
line-height: 3.6cqw;
text-indent: 0;
letter-spacing: 0;
}
.case-note { left: 6%; top: 90%; width: 38%; }
/*
* 按了【收获】之后那张纸：一样一行（图 / 中文名 + 一行极小英文 / 份数）。
* 行的骨架借 .pick-row 那一味（细行 + 点线分隔），只是这里多了图与份数。
*/
.hv-list { display: flex; flex-direction: column; }
.hv-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: 8px 2px;
border-bottom: 1px dotted rgba(64, 48, 31, 0.22);
}
.hv-row:last-child { border-bottom: none; }
.hv-art {
flex: 0 0 auto; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
}
.hv-art-img { width: 30px; height: 30px; object-fit: contain; }
.hv-tx { flex: 1 1 auto; min-width: 0; }
.hv-nm { display: block; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.04em; }
.hv-en {
display: block; margin-top: 1px;
font-size: 9px; letter-spacing: 0.04em; color: var(--ink-soft); opacity: 0.72;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-n { flex: 0 0 auto; font-family: var(--font-hand); font-size: var(--fs-m); color: var(--red); }
/* ── 仓库弹窗：换皮 + 三列卡 ── */
.sheet.beast-wh { background-image: var(--case-wh-panel); max-width: 470px; }
.sheet.beast-wh .sheet-head,
.sheet.beast-detail .sheet-head,
.sheet.beast-breed .sheet-head {
border-bottom: 0; box-shadow: none;
margin-bottom: 2px; padding-bottom: 0; min-height: 34px;
}
.beast-wh-title { position: relative; width: 62%; margin: 2px 0 14px; }
.beast-wh-title img { width: 100%; display: block; }
.beast-wh-title span {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 21px; font-weight: 700; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--ink);
}
.beast-wh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.beast-card { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 8px; }
/* 挑配对那一档：整张卡可点；配不上的变灰点不动；挑中的描一道金边 */
.beast-card.pick { cursor: pointer; }
.beast-card.pick:hover { background: rgba(185, 138, 46, 0.08); }
.beast-card.off { opacity: 0.42; filter: grayscale(0.75); cursor: not-allowed; pointer-events: none; }
.beast-card.sel { outline: 2px solid #b98a2e; outline-offset: 2px; }
.beast-status { align-self: flex-start; width: 78%; display: block; margin: 0 0 -5px 3%; }
/* 繁育中那张牌还没画：同一家族的纸 bar 先拼一颗 */
.beast-status.dom {
display: flex; align-items: center; justify-content: center; gap: 5px;
background: #e9ddc7; border: 1px solid rgba(64, 48, 31, 0.26); border-radius: 6px;
padding: 5px 0 6px; font-size: 12px; letter-spacing: 0.14em; text-indent: 0.14em; color: var(--ink);
}
.beast-status.dom::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: #5d8a4e; }
.beast-face { width: 100%; aspect-ratio: 319 / 503; background: var(--case-beast-card) center / 100% 100% no-repeat; display: grid; place-items: center; position: relative; }
/* 名字浮在纸卡下沿（创作者 2026-10-01 指的图一那个位置） */
.bf-name {
position: absolute; left: 8%; right: 8%; bottom: 9%;
text-align: center; font-size: 12px; letter-spacing: 0.08em; color: var(--ink);
background: rgba(248, 241, 227, 0.85); border-radius: 4px;
padding: 1px 4px 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beast-card .case-fn { width: 90%; }
.beast-card .case-fn + .case-fn { width: 76%; }
/* ── 详情弹窗：横纸 + 三列 ── */
.sheet.beast-detail { background-image: var(--case-detail-panel); max-width: 780px; }
.bd-grid {
display: grid;
grid-template-columns: 30% 1fr 30%;
grid-template-rows: auto auto;
gap: 2px 22px;
align-items: start;
}
/* 详情纸左边那一格：和仓库卡同一张底、同一个比例（从前是 10/9 的横框，把竖纸卡拉扁了） */
.bd-face { position: relative; overflow: hidden; grid-column: 1; grid-row: 1; aspect-ratio: 319 / 503; background: var(--case-beast-card) center / 100% 100% no-repeat; display: grid; place-items: center; }
/* 立绘没给之前的占位：相框里一个 ?（创作者定的） */
.bf-q { font-family: var(--font-body); font-size: 30px; color: var(--ink-soft); opacity: 0.7; }
.bf-q.big { font-size: 54px; }
.bd-lv {
position: absolute; top: 2%; left: 2%;
background: #9a6bd0; color: #fff;
font-size: 12px; letter-spacing: 0.08em;
padding: 2px 8px 3px; border-radius: 4px;
}
.bd-main { grid-column: 2; grid-row: 1; }
/* 名字就地改（创作者 2026-10-01）：平时是字 + 一支羽毛笔，点笔才变输入框 */
.bd-namewrap { display: flex; align-items: center; gap: 8px; }
.bd-name {
display: inline-block; max-width: 100%;
background: transparent; border: 0; border-bottom: 1px dashed transparent;
font-family: var(--font-body); font-size: 26px; font-weight: 700; letter-spacing: 0.1em;
color: var(--ink); padding: 0 2px 2px;
}
input.bd-name { width: 12ch; border-bottom-color: rgba(64, 48, 31, 0.4); }
.bd-pen {
flex: none; background: none; border: 0; padding: 2px 4px; cursor: pointer;
font-size: 16px; line-height: 1; color: var(--ink-soft);
filter: grayscale(0.2);
}
.bd-pen:hover { transform: translateY(-1px) rotate(-8deg); }
.bd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
/*
* chips 按品阶分色（创作者 2026-10-01 二稿：暗色那版撤了，要简约但好看）：
* 传说暖金 / 史诗淡紫 / 一般羊皮白 / 差冷灰，各配一道同族深一点的细边；
* 品级芯片跟同色族走（顶级=金、稀有=紫、普通=白），表现型与性格另两味淡色。
*/
.bd-chip {
position: relative; overflow: hidden;
padding: 3px 13px 4px; border-radius: 999px;
background: #f6efe2; border: 1px solid #b7a687;
color: #4a3a26; font-size: 12px; letter-spacing: 0.14em; text-indent: 0.14em;
cursor: pointer; /* 点一下浮出加成小纸片（见 ui/beasts.js 的 showChipPop） */
}
.bd-chip:active { transform: scale(0.96); }
.bd-chip.t-legend, .bd-chip.g3 {
background: linear-gradient(180deg, #f7dd9a, #ecc469);
border-color: #b98a2e; color: #5a3c05;
}
.bd-chip.t-epic, .bd-chip.g2 {
background: linear-gradient(180deg, #e9dbf7, #d6bdee);
border-color: #8d5fb8; color: #472a68;
}
.bd-chip.t-poor {
background: #e6e4df; border-color: #9b968c; color: #6b665c;
}
/* 表现型三味色（创作者 2026-10-01 定的）：闪耀贝壳色渐变带粒子、白化白底紫边、原始色灰绿 */
.bd-chip.ph-shine {
background: linear-gradient(135deg, #fefeff, #e9def6 45%, #cfe2f4);
border-color: #cbb3e6; color: #5a4a7a;
box-shadow: inset 0 0 6px rgba(203, 179, 230, 0.35);
}
.bd-chip.ph-shine .spark {
background: #f3ebff; box-shadow: 0 0 4px 1px rgba(214, 196, 255, 0.9);
}
.bd-chip.ph-albino { background: #fbf9f4; border-color: #9a6bd0; color: #6b4f8f; }
.bd-chip.ph-original { background: #dfe5d8; border-color: #6f7d68; color: #3f4a3a; }
.bd-chip.ps { background: #e6ead9; border-color: #93a07f; color: #3f4a33; }
/* 传说芯片里一点金色粒子往上升（二稿保留的小细节，浅色底上用亮白金光） */
.bd-chip .spark {
position: absolute; bottom: -3px; width: 2px; height: 2px; border-radius: 50%;
background: #fffbe8; box-shadow: 0 0 4px 1px rgba(255, 244, 200, 0.9);
opacity: 0; pointer-events: none;
animation: sparkUp 2.4s linear infinite;
}
.bd-chip .spark:nth-of-type(1) { left: 18%; animation-delay: 0s; }
.bd-chip .spark:nth-of-type(2) { left: 42%; animation-delay: 0.7s; }
.bd-chip .spark:nth-of-type(3) { left: 66%; animation-delay: 1.3s; }
.bd-chip .spark:nth-of-type(4) { left: 84%; animation-delay: 1.9s; }
@keyframes sparkUp {
0% { transform: translateY(0); opacity: 0; }
18% { opacity: 0.95; }
100% { transform: translateY(-24px); opacity: 0; }
}
/* 点词条 / 性格芯片浮出来的加成小纸片 */
.chip-pop {
position: fixed; z-index: 80; max-width: 240px;
background: #f8f1e3; border: 1px solid #b7a687; border-radius: 8px;
box-shadow: 0 10px 26px rgba(30, 20, 8, 0.35);
padding: 8px 11px 9px;
font-size: 12px; color: var(--ink);
animation: sheetIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chip-pop .cp-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.chip-pop .cp-name { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; }
.chip-pop .cp-sub { color: var(--ink-soft); font-size: 11px; letter-spacing: 0.08em; }
.chip-pop .cp-line { padding: 1px 0; letter-spacing: 0.06em; }
.bd-chip.void {
width: 66px; height: 23px; padding: 0;
background: rgba(64, 48, 31, 0.07);
border: 1px dashed rgba(64, 48, 31, 0.34);
}
.bd-st { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; border-bottom: 1px dashed rgba(64, 48, 31, 0.2); }
.bd-st-zh { font-size: 14px; letter-spacing: 0.22em; color: var(--ink); }
.bd-st-v { font-size: 15px; color: var(--ink); }
.bd-side { grid-column: 3; grid-row: 1; padding-top: 4px; }
.bd-side-row { display: flex; justify-content: space-between; align-items: baseline; margin: 5px 0; font-size: 13.5px; color: var(--ink); }
.bd-side-row .bd-v { font-size: 14px; }
.bd-bar { height: 9px; border-radius: 999px; background: rgba(64, 48, 31, 0.16); overflow: hidden; margin: 3px 0 9px; }
.bd-bar i { display: block; height: 100%; background: #7da05d; }
/* 血条：样式同饱食度，只是红的 */
.bd-bar.red i { background: #b04a3f; }
/* 繁育成功那张纸：中间摆蛋（一枚一个，多胞胎并排） */
.bs-eggs { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.bs-egg { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(30, 20, 8, 0.28)); }
/* 破壳那张纸：头像卡（同一味正方形羊皮纸）+ 名字，点它直接看详情 */
.hs-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: none; border: 0; padding: 0; margin: 0 auto; cursor: pointer;
}
.hs-avatar {
width: 96px; height: 96px;
background: var(--case-sq-parchment) center / 100% 100% no-repeat;
border-radius: 6px; box-shadow: 0 3px 9px rgba(30, 20, 8, 0.3);
display: grid; place-items: center;
font-family: var(--font-body); font-size: 34px; color: var(--ink-soft);
}
.hs-card:hover .hs-avatar { filter: brightness(1.04); }
.hs-card:active { transform: scale(0.98); }
.hs-name { font-size: 14px; letter-spacing: 0.1em; color: var(--ink); }
/* 详情纸右下角那颗喂食 */
.bd-feed-slot { margin-left: auto; }
/* 详情纸里那颗【遗忘特质】（2026-10-20）：跟纸同一身浅色，按内容宽、不吃满一行 */
.bd-forget {
margin-top: 14px;
padding: 6px 14px 7px;
font: inherit;
font-size: 14px;
letter-spacing: 0.14em;
color: var(--ink);
background: linear-gradient(180deg, #fbf4e4, #e9ddc7);
border: 1px solid rgba(64, 48, 31, 0.42);
border-radius: 6px;
box-shadow: 0 2px 0 rgba(50, 37, 24, 0.3), 0 5px 12px rgba(0, 0, 0, 0.18);
cursor: pointer;
}
.bd-forget:hover { filter: brightness(1.03); }
.bd-forget:active { transform: translateY(1px); }
.bd-words { grid-column: 2 / 4; grid-row: 2; }
.bd-words-t { font-size: 14.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink); margin: 10px 0 7px; }
/* ── 繁育弹窗：干花纸 + 两格 + 状态钮 ── */
.sheet.beast-breed { background-image: var(--case-breed-panel); max-width: 660px; }
.sheet.beast-breed .beast-wh-title { width: 38%; margin: 2px 0 6px; }
.bb-slots { display: flex; justify-content: center; gap: 30px; margin: 20px 8px 16px; }
.bb-slot { background: none; border: 0; padding: 0; cursor: pointer; width: 35%; position: relative; }
.bb-slot img { width: 100%; display: block; }
.bb-slot:hover img { filter: brightness(1.05); }
/* 格子里已挑了家长：名字写在格子下沿 */
.bb-who {
position: absolute; left: 6%; right: 6%; bottom: 22%;
font-size: 11px; letter-spacing: 0.06em; color: var(--ink);
background: rgba(248, 241, 227, 0.88); border-radius: 4px;
padding: 1px 4px 2px; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-state { position: relative; display: block; width: 44%; margin: 0 auto 6px; background: none; border: 0; padding: 0; cursor: pointer; }
.bb-state img { width: 100%; display: block; }
.bb-state span {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-indent: 0.16em; color: var(--ink);
}
.bb-state:hover img { filter: brightness(1.05); }
.bb-state:active { transform: scale(0.98); }
/* 背包抬头：手提箱与随身坩埚并排靠右（两颗共用 .ledger-pot-art）
整组靠右由 .ledger-icons 的 margin-left:auto 负责，组内两颗不再各自 auto——
不然 flex 会把多余的空间塞到它们中间，看着就是被拉开两半 */
.ledger-icons { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; }
.ledger-icons .ledger-pot { margin-left: 0; }
/*
* 手提箱那颗要**再大一丢丢**（创作者 2026-10-02）：只放大这一颗的图（30 → 34），
* 坩埚照旧。两颗的盒子因此差 4px 高——靠上面那行 `align-items: flex-end`
* 把**标签底边**对齐，一排看着仍是齐的，不会一个高一个低。
*/
.ledger-pot-art.case-icon { height: 34px; max-width: 50px; }
@media (max-width: 420px) {
.ledger-pot-art.case-icon { height: 30px; }
}
/* ---------- 22 · 钓鱼张力小游戏（ui/fishing-game.js） ----------
* 深海军蓝的一汪水：JS 管位置与判定，这一节只管长相。
* 动效一律慢、软；成功淡金、失败下沉，不用红色警告。
*/
.fg {
position: fixed; inset: 0; z-index: 74;
display: grid; place-items: center; padding: 16px;
background: rgba(8, 16, 32, 0.74);
animation: fgFade 0.24s ease both;
}
@keyframes fgFade { from { opacity: 0; } to { opacity: 1; } }
.fg-panel {
width: min(88vw, 380px);
box-sizing: border-box;
padding: 16px 20px 14px;
text-align: center;
border-radius: 14px;
border: 1px solid rgba(150, 182, 232, 0.34);
background: linear-gradient(180deg, #12253f, #0a1830);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(214, 183, 120, 0.14);
color: #dce8f8;
cursor: pointer;
user-select: none;
touch-action: none;
animation: fgIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fgIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.fg-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fg-zh { font-family: var(--font-body); font-size: 21px; font-weight: 600; letter-spacing: 0.34em; text-indent: 0.34em; color: #eaf2ff; }
.fg-en { font-family: var(--font-hand); font-size: 9.5px; letter-spacing: 0.3em; text-indent: 0.3em; color: rgba(160, 190, 230, 0.6); }
.fg-fish { margin: 7px 0 10px; font-size: 12.5px; letter-spacing: 0.08em; color: #bcd4f2; }
/* 那一汪水：轨道 */
.fg-track {
position: relative;
height: min(262px, 46vh);
border-radius: 10px;
overflow: hidden;
background:
radial-gradient(120% 55% at 50% 0%, rgba(120, 170, 230, 0.1), transparent 62%),
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px),
linear-gradient(180deg, #0a1a30, #10294a 58%, #0a1a30);
box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55);
}
/* 极慢的水波（纯装饰，不影响判定） */
.fg-track::after {
content: '';
position: absolute; inset: -20% -10%;
background: radial-gradient(60% 22% at 50% 50%, rgba(170, 215, 255, 0.07), transparent 70%);
animation: fgWater 9s ease-in-out infinite;
pointer-events: none;
}
@keyframes fgWater {
0%, 100% { transform: translateY(-16%); opacity: 0.5; }
50% { transform: translateY(16%); opacity: 0.95; }
}
/* 目标区：浅蓝半透明 + 一点光晕，大小固定，只呼吸亮度 */
.fg-zone {
position: absolute; left: 6%; right: 6%;
transform: translateY(-50%);
border-radius: 8px;
background: linear-gradient(180deg, rgba(126, 190, 255, 0.3), rgba(126, 190, 255, 0.15));
border: 1px solid rgba(160, 210, 255, 0.5);
box-shadow: 0 0 18px rgba(120, 190, 255, 0.22), inset 0 0 12px rgba(160, 215, 255, 0.22);
display: grid; place-items: center;
animation: fgBreath 3.6s ease-in-out infinite;
}
@keyframes fgBreath {
0%, 100% { box-shadow: 0 0 14px rgba(120, 190, 255, 0.18), inset 0 0 10px rgba(160, 215, 255, 0.18); }
50% { box-shadow: 0 0 22px rgba(120, 190, 255, 0.3), inset 0 0 14px rgba(160, 215, 255, 0.28); }
}
.fg-zone-tx { font-size: 10px; letter-spacing: 0.3em; text-indent: 0.3em; color: rgba(232, 245, 255, 0.72); }
/* 控制条：JS 每一帧写 top / height，这里只给样子 */
.fg-bar {
position: absolute; left: 10%; right: 10%;
transform: translateY(-50%);
border-radius: 999px;
background: linear-gradient(180deg, #eaf4ff, #9cc8f2 46%, #5b9ad6);
box-shadow: 0 0 14px rgba(150, 205, 255, 0.5), inset 0 -2px 6px rgba(20, 60, 100, 0.45);
}
.fg.hold .fg-bar { box-shadow: 0 0 24px rgba(175, 222, 255, 0.8), inset 0 -2px 6px rgba(20, 60, 100, 0.4); }
/* 一次点击的小水波 */
.fg-ripple {
position: absolute; left: 50%; bottom: 10%;
width: 46px; height: 46px; margin-left: -23px;
border-radius: 50%;
border: 1px solid rgba(170, 215, 255, 0.65);
pointer-events: none;
animation: fgRipple 0.8s ease-out forwards;
}
@keyframes fgRipple {
from { transform: scale(0.3); opacity: 0.9; }
to { transform: scale(2.4); opacity: 0; }
}
.fg-label { margin-top: 12px; font-size: 11px; letter-spacing: 0.22em; text-indent: 0.22em; color: rgba(172, 200, 235, 0.82); }
.fg-meter {
margin-top: 6px; height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(150, 185, 235, 0.3);
overflow: hidden;
}
.fg-meter i {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, #6fb6ea, #a8e0ff);
box-shadow: 0 0 10px rgba(150, 210, 255, 0.55);
transition: width 0.12s linear;
}
.fg-msg { margin-top: 12px; min-height: 1.5em; font-size: 13px; letter-spacing: 0.1em; color: #e2efff; }
.fg-foot { margin-top: 3px; font-size: 10.5px; letter-spacing: 0.12em; color: rgba(150, 180, 215, 0.6); }
/* 收杆：成功淡金，失败下沉——都不响不炸 */
.fg.win .fg-panel { border-color: rgba(232, 202, 132, 0.6); }
.fg.win .fg-zone { background: linear-gradient(180deg, rgba(240, 214, 150, 0.34), rgba(240, 214, 150, 0.16)); border-color: rgba(235, 208, 145, 0.7); box-shadow: 0 0 26px rgba(235, 205, 140, 0.5); }
.fg.win .fg-bar { background: linear-gradient(180deg, #fff6dd, #e7c883); box-shadow: 0 0 22px rgba(240, 214, 150, 0.7); }
.fg.win .fg-msg { color: #f4e2b4; }
.fg.lose .fg-bar { animation: fgSink 0.9s ease-in forwards; }
@keyframes fgSink { to { transform: translateY(-50%) translateY(92px); opacity: 0.22; } }
.fg.lose .fg-msg { color: #9fb6d2; }
/* 传奇鱼竿一杆起稀有鱼：屏幕中间那一行字，亮一下再淡去 */
.fish-center-note {
position: fixed; left: 50%; top: 46%;
transform: translate(-50%, -50%);
z-index: 72;
max-width: min(84vw, 520px);
box-sizing: border-box;
padding: 10px 18px 11px;
text-align: center;
font-family: var(--font-body); font-size: 15px; line-height: 1.75; letter-spacing: 0.06em;
color: #f3e6c8;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
background: rgba(20, 14, 8, 0.42);
border: 1px solid rgba(214, 183, 120, 0.35);
border-radius: 8px;
pointer-events: none;
animation: fishNote 3.8s ease both;
}
@keyframes fishNote {
0% { opacity: 0; transform: translate(-50%, -46%); }
14% { opacity: 1; transform: translate(-50%, -50%); }
72% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -54%); }
}
/* ============================================================
29 · 野外遭遇：某一处那一排圆头像 + 捕捉那张纸（ui/wild.js）
------------------------------------------------------------
禁林那四处（石阵遗迹 / 沼泽 / 八眼巨蛛巢穴 / 独角兽深林）每天刷五只，
摆成一排圆头像。边按层级分（创作者 2026-10-02 给的原文）：
**3 级金边 / 2 级紫边 / 1 级无边**。
跑掉的与已经收进箱子的那一只**整个撤掉**（他 2026-10-02 看截图后改的口径：
不留印子、不占位），五只都没了就换一句空态。
圈底是**深色半透明磨砂**（同一批截图里他点的：羊皮纸底太亮）。
============================================================ */
.wild-part { margin-top: var(--sp-3); }
.wild-cap {
margin-bottom: var(--sp-2);
text-align: center;
font-size: var(--fs-xs);
letter-spacing: 0.24em;
color: var(--forest-dim, #bda98a);
}
/*
* 原先这一排的摆法（.wild-row：flex 平均间距横排）整块撤了——
* 第 41 节把这一处改成一片观察区，五只各站自己的位置（见文件末尾那一节）。
*/
.wild-one {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font-family: var(--font-body);
}
/* 那一圈圆头像：**深色半透明磨砂**（创作者 2026-10-02 看截图后定的——原先那层羊皮纸底
压在暗照片上太亮，一排像五个灯泡）。磨砂是背后那张照片透过 blur 来的，不是底色画出来的。
里面的立绘**不再乘底**（这批图本身是透明底，multiply 只会把动物自己压黑）。 */
.wild-av {
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
background: rgba(15, 11, 8, 0.46);
backdrop-filter: blur(7px) saturate(0.9);
-webkit-backdrop-filter: blur(7px) saturate(0.9);
border: 2px solid rgba(224, 189, 120, 0.26);
box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.08), 0 3px 10px rgba(0, 0, 0, 0.5);
}
.wild-av .beast-art {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
mix-blend-mode: normal;
}
/* 还没图的物种：圈里一个浅色问号（不是空白，免得看着像没画出来） */
.wa-q {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 20px;
color: rgba(238, 224, 196, 0.42);
}
/* 3 级：金边 */
.wild-av.g3 {
border-color: #e0bd78;
box-shadow: 0 0 0 1px rgba(118, 85, 44, 0.8), 0 0 14px rgba(224, 189, 120, 0.55);
}
/* 2 级：紫边 */
.wild-av.g2 {
border-color: #a58ac7;
box-shadow: 0 0 0 1px rgba(70, 52, 96, 0.8), 0 0 12px rgba(165, 138, 199, 0.45);
}
/* 1 级：无边（就是上面那圈默认的暗金细边） */
.wild-nm {
max-width: 76px;
font-size: 11px;
line-height: 1.3;
letter-spacing: 0.06em;
color: var(--cine-text);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.wild-cost { margin: var(--sp-2) 0 0; text-align: center; }
.wild-none { margin: 2px 0 0; text-align: center; }
/* ── 捕捉那张纸：一张脸 + 一行概率 + 手上那几瓶药 ── */
.cpt-face {
display: flex;
justify-content: center;
height: 168px;
margin-bottom: var(--sp-2);
}
.cpt-face .beast-art.full { width: auto; height: 100%; max-width: 100%; }
.cpt-name {
margin: 0 0 var(--sp-1);
text-align: center;
font-size: var(--fs-l);
letter-spacing: 0.14em;
color: var(--ink);
}
/* 打过一架那一句（创作者 2026-10-02 指的）：名字上面一行套印红，只在这一只真被打趴过时出现 */
.cpt-weary {
margin: 0 0 2px;
text-align: center;
font-size: var(--fs-s);
letter-spacing: 0.08em;
color: var(--red);
}
/* 颜色 / 属性词条 / 性格那一条：芯片与详情纸共用同一批函数画的，这儿只是居中排一行 */
.trait-strip { justify-content: center; margin: 4px 0 10px; }
.cpt-pots {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: var(--sp-2);
}
.cpt-pot {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
padding: 5px 9px;
border: 1px solid var(--paper-3);
border-radius: var(--r);
background: rgba(255, 250, 240, 0.44);
font-family: var(--font-body);
text-align: left;
cursor: pointer;
}
.cpt-pot.on {
border-color: rgba(140, 47, 47, 0.65);
background: rgba(140, 47, 47, 0.09);
box-shadow: inset 0 0 0 1px rgba(140, 47, 47, 0.22);
}
.cpt-art { flex: 0 0 auto; display: flex; }
.cpt-art img { width: 26px; height: 26px; object-fit: contain; }
.cpt-tx { flex: 1 1 auto; min-width: 0; }
.cpt-nm { display: block; font-size: var(--fs-s); letter-spacing: 0.08em; color: var(--ink); }
.cpt-bonus { display: block; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }
.cpt-qty { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--ink-soft); }
.cpt-tick { flex: 0 0 auto; font-size: 12px; color: var(--red); }
/* ============================================================
30 · 遭遇战那一屏（ui/battle.js）
------------------------------------------------------------
一身暗棕 + 古铜金：昏暗的魔法房间里，古老的金色魔法卡正在发光。
规格里的顺序（第八节）：敌方立绘 → 己方立绘 → 魔力 → 三张手牌 → 结束回合。
立绘舞台（.bp-stage）是**纯视觉层**：无边框、无底色、无阴影、
overflow hidden、pointer-events none——玩家看不见这个框，
只看见动物站在场景里（规格第二、十三节）。图绝不拉伸：
max-width / max-height 装进舞台（保持原比例），再按每个物种自己的
scale / x / y 摆（数在 data/battle.js 的 BATTLE_PORTRAITS）。
层级（规格第八节）：底图 → 立绘 → 特效（.bt-fx）→ 名牌与 HP → 卡牌 → 按钮。
============================================================ */
.battle {
--bt-bg: #211712;
--bt-panel: #2d2018;
--bt-panel-dark: #19110d;
--bt-gold: #c49a55;
--bt-gold-light: #e0bd78;
--bt-gold-dark: #76552c;
--bt-paper: #d5c09a;
--bt-text: #f1dfbd;
--bt-danger: #8f4a3d;
display: flex;
flex-direction: column;
gap: var(--sp-2);
width: min(94%, 40rem);
margin: 0 auto;
padding: var(--sp-3) var(--sp-3) var(--sp-4);
border: 1px solid rgba(196, 154, 85, 0.42);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(45, 32, 24, 0.94), rgba(25, 17, 13, 0.96)),
radial-gradient(120% 80% at 50% 0%, rgba(224, 189, 120, 0.14), rgba(0, 0, 0, 0));
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 200, 0.08);
color: var(--bt-text);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bt-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 6px;
border-bottom: 1px solid rgba(196, 154, 85, 0.28);
}
.bt-turn { font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--bt-gold); }
.bt-vs {
font-family: var(--font-hand);
font-size: var(--fs-s);
letter-spacing: 0.28em;
color: var(--bt-paper);
opacity: 0.85;
}
/* ── 场地：敌方在上、己方在下，中间那一层放飘字 ── */
.bt-arena {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
min-height: min(52vh, 420px);
padding: var(--sp-2) 0;
}
.bt-side {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 4px 6px 6px;
border: 1px solid transparent;
border-radius: 8px;
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
/* 拖着牌经过时，这一边亮一圈暗金（规格第十一节：目标区域出现暗金色魔法光晕） */
.bt-side.drop-hot {
border-color: rgba(224, 189, 120, 0.7);
background: radial-gradient(70% 70% at 50% 50%, rgba(224, 189, 120, 0.16), rgba(0, 0, 0, 0));
box-shadow: 0 0 22px rgba(196, 154, 85, 0.3);
}
/* 立绘舞台：透明安全区，超出的部分裁掉 */
.bp-stage {
position: relative;
overflow: hidden;
pointer-events: none;
width: min(58%, 260px);
height: min(24vh, 190px);
}
.enemy-portrait-stage { height: min(25vh, 200px); }
.bp-img {
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
transition: transform 220ms ease, opacity 320ms ease;
}
.bp-none {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: rgba(213, 192, 154, 0.5);
}
/* 那一层柔光：治疗 / 护盾 / 暴击都借它发光（平时是灭的） */
.bp-glow {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease;
}
/* 立绘调试（DEBUG_BATTLE_PORTRAIT，或 localStorage 的 hw:bp-debug = '1'）：
把安全区画出来，并把这一只此刻用的三个数写在角上。正式游戏里这一段一个节点都不生成。 */
.bp-stage:has(.bp-dbg) { outline: 1px dashed rgba(224, 189, 120, 0.85); outline-offset: -1px; }
.bp-dbg {
position: absolute;
left: 2px;
bottom: 2px;
z-index: 3;
padding: 1px 4px;
font-size: 10px;
letter-spacing: 0.04em;
color: #ffe9b8;
background: rgba(10, 7, 5, 0.7);
}
/* 名牌 + HP + 五维那三行（在立绘下面，绝不被立绘盖住） */
.bt-plate { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-nm {
font-size: var(--fs-s);
letter-spacing: 0.16em;
color: var(--bt-gold-light);
}
.bt-hprow { display: flex; align-items: center; gap: 7px; }
.bt-hp {
position: relative;
width: min(46vw, 190px);
height: 9px;
overflow: hidden;
border: 1px solid rgba(196, 154, 85, 0.65);
border-radius: 5px;
background: linear-gradient(180deg, #100b08, #1d1410);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bt-hp i {
display: block;
height: 100%;
background: linear-gradient(180deg, #c1553f, #7d2a22);
box-shadow: 0 0 8px rgba(193, 85, 63, 0.45);
transition: width 300ms ease;
}
/* 低于三成：轻微呼吸（只是视觉，**不加捕捉概率**——规格第十七节点了两遍） */
.bt-hp.low i { animation: btBreath 1.5s ease-in-out infinite; }
@keyframes btBreath {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.45); }
}
.bt-hpnum { font-size: 11px; letter-spacing: 0.06em; color: var(--bt-paper); opacity: 0.9; }
.bt-sub { font-size: 10px; letter-spacing: 0.08em; color: rgba(213, 192, 154, 0.62); }
/* 防御中那枚小牌（规格第六节：🛡 防御中，不做 Buff 图标系统） */
.bt-shield {
position: absolute;
left: 50%;
bottom: 4px;
z-index: 3;
transform: translateX(-50%);
padding: 1px 8px 2px;
font-size: 11px;
letter-spacing: 0.12em;
color: #cfe0ea;
background: rgba(24, 38, 48, 0.8);
border: 1px solid rgba(150, 190, 210, 0.45);
border-radius: 10px;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.bt-shield.on { opacity: 1; }
/* ── 立绘上的那几个动作（都只动立绘，不出安全区） ── */
.bp-stage.lunge .bp-img { animation: btLunge 260ms ease; }
@keyframes btLunge {
0% { translate: 0 0; }
40% { translate: 0 12px; }
100% { translate: 0 0; }
}
.mine .bp-stage.lunge .bp-img { animation-name: btLungeUp; }
@keyframes btLungeUp {
0% { translate: 0 0; }
40% { translate: 0 -12px; }
100% { translate: 0 0; }
}
.bp-stage.hurt .bp-img { animation: btHurt 320ms ease; }
@keyframes btHurt {
0%, 100% { translate: 0 0; }
20% { translate: -7px 0; }
45% { translate: 6px 0; }
70% { translate: -4px 0; }
}
.bp-stage.dodge .bp-img { animation: btDodge 340ms ease; }
@keyframes btDodge {
0%, 100% { translate: 0 0; opacity: 1; }
40% { translate: 26px 0; opacity: 0.55; }
}
.bp-stage.crit .bp-glow {
opacity: 1;
background: radial-gradient(60% 60% at 50% 45%, rgba(255, 226, 150, 0.55), rgba(255, 200, 90, 0));
}
.bp-stage.healing .bp-glow {
opacity: 1;
background: radial-gradient(60% 60% at 50% 55%, rgba(150, 220, 160, 0.4), rgba(120, 200, 140, 0));
}
.bp-stage.shielded .bp-glow {
opacity: 1;
background: radial-gradient(62% 62% at 50% 50%, rgba(150, 195, 220, 0.32), rgba(120, 170, 200, 0));
}
/* 倒下：整只轻轻缩一下、淡出去（规格第九节） */
.bp-stage.down .bp-img { transform: translate(-50%, -46%) scale(0.94); opacity: 0; }
/* 特效层：飘起来的伤害数字（在立绘之上、名牌之下） */
.bt-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bt-num {
position: absolute;
transform: translate(-50%, -50%);
font-family: var(--font-hand);
font-size: 22px;
letter-spacing: 0.06em;
color: #f6e3b6;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
animation: btNum 950ms ease-out forwards;
}
.bt-num.dmg { color: #f0cfa4; }
.bt-num.crit { font-size: 30px; color: #ffe6a8; }
.bt-num.crit::after { content: ' CRITICAL'; font-size: 12px; letter-spacing: 0.22em; color: #e0bd78; }
.bt-num.miss { font-size: 17px; letter-spacing: 0.24em; color: #cfd6dd; }
.bt-num.heal { font-size: 21px; color: #b9e3bd; }
.bt-num.shield { font-size: 17px; color: #c6dcea; }
@keyframes btNum {
0% { opacity: 0; margin-top: 8px; }
18% { opacity: 1; margin-top: 0; }
70% { opacity: 1; }
100% { opacity: 0; margin-top: -26px; }
}
/* 胜负那一下横在场地上的一行字 */
.bt-banner {
position: absolute;
left: 50%;
top: 42%;
z-index: 6;
transform: translate(-50%, -50%);
padding: 8px 22px 10px;
font-size: var(--fs-l);
letter-spacing: 0.22em;
color: #ffe9b8;
text-align: center;
white-space: nowrap;
background: rgba(16, 11, 8, 0.72);
border-top: 1px solid rgba(224, 189, 120, 0.6);
border-bottom: 1px solid rgba(224, 189, 120, 0.6);
animation: btBanner 1.6s ease both;
pointer-events: none;
}
@keyframes btBanner {
0% { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
78% { opacity: 1; }
100% { opacity: 0; }
}
/* ── 战况那一行 ── */
.bt-log {
min-height: 2.4em;
padding: 5px 10px 6px;
font-size: var(--fs-xs);
line-height: 1.6;
letter-spacing: 0.06em;
text-align: center;
color: rgba(241, 223, 189, 0.86);
border: 1px solid rgba(196, 154, 85, 0.22);
border-radius: 4px;
background: rgba(12, 8, 6, 0.42);
}
/* ── 底下那一条：魔力 / 三张手牌 / 结束回合 ── */
.bt-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid rgba(196, 154, 85, 0.28);
}
.bt-mana { display: flex; align-items: center; gap: 7px; }
.bt-mana-lb { font-size: var(--fs-xs); letter-spacing: 0.24em; color: var(--bt-gold); }
.bt-gem {
width: 13px;
height: 13px;
transform: rotate(45deg);
border: 1px solid rgba(196, 154, 85, 0.7);
background: rgba(10, 7, 5, 0.6);
transition: background 240ms ease, box-shadow 240ms ease;
}
.bt-gem.on {
background: linear-gradient(135deg, #f0d79a, #b9873f);
box-shadow: 0 0 9px rgba(224, 189, 120, 0.6);
}
.bt-hand {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 10px;
min-height: 138px;
padding: 6px 4px 0;
}
/* 一张魔法卡：暗底 + 古铜金边 + 一点纸纹（规格第九节） */
.bt-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
width: 92px;
height: 128px;
padding: 9px 7px 8px;
border: 1px solid rgba(196, 154, 85, 0.72);
border-radius: 9px;
background:
linear-gradient(180deg, rgba(60, 43, 31, 0.96), rgba(28, 19, 14, 0.98)),
repeating-linear-gradient(45deg, rgba(255, 240, 210, 0.03) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 235, 200, 0.1);
color: var(--bt-text);
cursor: grab;
/* 移动端：拖牌的时候不许带着页面滚（规格第二十三节） */
touch-action: none;
user-select: none;
-webkit-user-select: none;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
/* 卡面上那道符文装饰：一圈暗金细线，不抢名字 */
.bt-card::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(196, 154, 85, 0.24);
border-radius: 6px;
pointer-events: none;
}
.bc-cost {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-bottom: 2px;
font-family: var(--font-hand);
font-size: 14px;
color: #1b120c;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #f4dfa8, #b9873f);
box-shadow: 0 0 8px rgba(224, 189, 120, 0.4);
}
.bc-name { font-size: 14px; letter-spacing: 0.14em; color: #f6e6c2; }
.bc-desc {
margin-top: auto;
font-size: 10px;
line-height: 1.5;
letter-spacing: 0.04em;
text-align: center;
color: rgba(213, 192, 154, 0.82);
}
/* 六种卡各自那一身颜色（只改那道边与那颗费，整体仍是暗棕金体系） */
.bt-card.c-grey { border-color: rgba(168, 160, 148, 0.6); }
.bt-card.c-grey .bc-cost { background: radial-gradient(circle at 34% 30%, #d6d0c4, #8b8578); }
.bt-card.c-gold { border-color: rgba(224, 189, 120, 0.72); }
.bt-card.c-red { border-color: rgba(178, 92, 74, 0.78); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(143, 74, 61, 0.28); }
.bt-card.c-red .bc-cost { background: radial-gradient(circle at 34% 30%, #f0c3a4, #9c4a35); }
.bt-card.c-green { border-color: rgba(126, 160, 122, 0.66); }
.bt-card.c-green .bc-cost { background: radial-gradient(circle at 34% 30%, #cfe3c4, #5f7d55); }
.bt-card.c-blue { border-color: rgba(126, 158, 178, 0.66); }
.bt-card.c-blue .bc-cost { background: radial-gradient(circle at 34% 30%, #cfe0ea, #4e6d80); }
.bt-card.c-purple { border-color: rgba(154, 128, 178, 0.66); }
.bt-card.c-purple .bc-cost { background: radial-gradient(circle at 34% 30%, #ddcdee, #6a5188); }
/* 悬停：抬起来、金边变亮、影子加重，左右两张让一让（规格第十节，不要霓虹） */
.bt-card:hover {
transform: translateY(-18px) scale(1.03);
border-color: rgba(240, 214, 150, 0.95);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.66), 0 0 18px rgba(196, 154, 85, 0.28);
z-index: 3;
}
.bt-card:has(+ .bt-card:hover) { transform: translateX(-9px); }
.bt-card:hover + .bt-card { transform: translateX(9px); }
/* 魔力不足 / 这一回合用过了：压暗、费用转暗红、拖不动（规格第十四节） */
.bt-card.off {
cursor: not-allowed;
opacity: 0.52;
filter: brightness(0.74) saturate(0.7);
}
.bt-card.off .bc-cost { color: #e6c9bd; background: radial-gradient(circle at 34% 30%, #7e4437, #4a2a22); box-shadow: none; }
.bt-card.off:hover { transform: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); border-color: rgba(196, 154, 85, 0.4); }
/* 拖起来的那张（跟手的复制品）与留在手里的那个空位 */
.bt-card.drag {
cursor: grabbing;
transform: scale(1.08);
box-shadow: 0 22px 40px rgba(0, 0, 0, 0.7), 0 0 26px rgba(196, 154, 85, 0.34);
border-color: rgba(240, 214, 150, 0.95);
}
.bt-card.lifted { opacity: 0.22; }
/* 松手在空处：弹回来之后轻轻抖一下（牌不消失） */
.bt-card.nope { animation: btNope 260ms ease; }
@keyframes btNope {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
60% { transform: translateX(4px); }
}
/* 底下那两颗（【逃跑】+【结束回合】）：**跟着这一屏一身**——
暗棕底 + 古铜金边 + 暖金字，不再是全局那副羊皮纸（创作者 2026-10-02 指的：
「结束回合按键和战斗背景风格统一」）。两颗并排一律等高、同字号。 */
.bt-acts {
display: flex;
gap: 10px;
width: min(100%, 24rem);
}
.bt-acts .btn {
flex: 1 1 0;
width: auto;
min-width: 0;
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-s);
letter-spacing: 0.14em;
text-align: center;
color: var(--bt-gold-light);
background: linear-gradient(180deg, rgba(58, 41, 28, 0.95), rgba(28, 19, 14, 0.97));
border: 1px solid rgba(196, 154, 85, 0.58);
border-radius: 5px;
box-shadow: 0 3px 0 rgba(10, 7, 5, 0.6), 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 235, 200, 0.08);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bt-acts .btn:hover {
color: #fff2d2;
border-color: rgba(240, 214, 150, 0.95);
box-shadow: 0 3px 0 rgba(10, 7, 5, 0.6), 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 16px rgba(196, 154, 85, 0.22), inset 0 1px 0 rgba(255, 235, 200, 0.1);
}
.bt-acts .btn:active { transform: translateY(1px); }
/* 正事那颗（结束回合）：金边重一档，和【逃跑】一眼分得开 */
.bt-acts .btn.bt-go {
border-color: rgba(224, 189, 120, 0.8);
background: linear-gradient(180deg, rgba(78, 55, 33, 0.96), rgba(36, 24, 16, 0.97));
}
/* 【逃跑】走全局那副暗红（和【不聊了】同一身），只把尺寸跟着这一排对齐 */
.bt-acts .btn.quit {
color: #f7ded9;
background: linear-gradient(180deg, rgba(94, 28, 28, 0.92), rgba(58, 16, 16, 0.95));
border: 1px solid rgba(198, 74, 74, 0.9);
box-shadow: 0 3px 0 rgba(10, 7, 5, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45);
}
.bt-acts .btn.quit:hover {
color: #fff2ee;
border-color: #e37a7a;
background: linear-gradient(180deg, rgba(118, 36, 36, 0.95), rgba(74, 22, 22, 0.96));
}
/* ── 窄屏（手机）：舞台矮一点、卡小一点，比例不变（规格第十二节） ── */
@media (max-width: 560px) {
.battle { width: 98%; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.bt-arena { min-height: min(46vh, 340px); }
.bp-stage { width: min(52%, 200px); height: min(19vh, 150px); }
.enemy-portrait-stage { height: min(20vh, 158px); }
.bt-hand { gap: 7px; min-height: 118px; }
.bt-card { width: 78px; height: 110px; padding: 7px 5px 6px; }
.bc-name { font-size: 13px; letter-spacing: 0.08em; }
.bc-desc { font-size: 9px; }
.bt-num { font-size: 19px; }
.bt-num.crit { font-size: 25px; }
.wild-av { width: 52px; height: 52px; }
}
/* ============================================================
32 · 捕捉那张纸换成战斗那一身（ui/wild.js 的 skin: 'cpt-night'）
------------------------------------------------------------
创作者 2026-10-02：捕捉和战斗是同一件事的两头，别摊一张羊皮纸。
所以这一张的底、边、字、按钮全部取战斗那一屏的那套数（第 30 段）：
暗棕渐变 + 顶部一层暖金泛光、古铜金细边、暗金按钮。
**词条芯片照原样**（浅色按档分色是他 2026-10-01 定的二稿），只垫一圈影子。
============================================================ */
.sheet.cpt-night {
/* 纸上那套色令牌整个翻回暗场景：正文 / 小字 / 强调跟着走，不用一处一处补 */
--fg: #f1dfbd;
--fg-dim: rgba(213, 192, 154, 0.78);
--fg-accent: #e0bd78;
--fg-danger: #e0a49a;
--bt-gold: #c49a55;
--bt-gold-light: #e0bd78;
--bt-paper: #d5c09a;
background:
linear-gradient(180deg, rgba(45, 32, 24, 0.97), rgba(25, 17, 13, 0.98)),
radial-gradient(120% 80% at 50% 0%, rgba(224, 189, 120, 0.14), rgba(0, 0, 0, 0)) #211712;
border: 1px solid rgba(196, 154, 85, 0.42);
border-radius: 6px;
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 200, 0.08);
color: var(--fg);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* 抬头那条：2px 墨线 + 红影换成一道暗金细线；标题降一档重（名字才是主角） */
.sheet.cpt-night .sheet-head {
border-bottom: 1px solid rgba(196, 154, 85, 0.28);
box-shadow: none;
}
.sheet.cpt-night .sheet-head h2 {
font-size: var(--fs-m);
letter-spacing: 0.18em;
color: var(--bt-gold);
}
/* 立绘：这批图本身是透明底，压在暗底上绝不能再乘底（multiply 会把动物整个吃进背景里） */
.sheet.cpt-night .cpt-face .beast-art {
mix-blend-mode: normal;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.sheet.cpt-night .cf-q {
font-size: 46px;
color: rgba(213, 192, 154, 0.5);
}
.sheet.cpt-night .cpt-name { color: var(--bt-gold-light); }
.sheet.cpt-night .cpt-weary { color: var(--fg-danger); }
/* 芯片不动颜色族，只垫一圈暗影子，免得看着像浮在纸上 */
.sheet.cpt-night .bd-chip { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
/* 那一列药水瓶：浅色纸行 → 暗槽 + 古铜金细边，选中那一行亮一圈暖金 */
.sheet.cpt-night .cpt-pot {
border: 1px solid rgba(196, 154, 85, 0.3);
border-radius: 4px;
background: rgba(12, 8, 6, 0.42);
color: var(--fg); /*