/* 田园像素个人站。外观依据 docs/DESIGN.md，类名依据 docs/SPEC.md。
   顺序：令牌、世界、基础、HUD、对话框、肖像、菜单、页签、物品栏、内容、告示牌、页脚、焦点、换页、中屏、窄屏、减少动效。
   字体不在这里：css/fonts.css（tools/font-shards.py 生成的 unicode-range 分片），每页先于本文件引入。 */

@import url("ambience.css");
@import url("board-pins.css");
@import url("life.css");

/* ---------------------------------------------------------------- 令牌 */

:root {
  /* 界面的 1 个美术像素等于几个 CSS 像素。木框、图标、肖像都按它放大。
     字是 12px 的像素字放大成 --fs，字的一个像素和木框的一个像素一样粗：--fs = 12 × --px。 */
  --px: 2px;
  --fs: 24px;
  --lh: 1.5;
  /* 农场是背景，单独放大，不和界面比粗细。 */
  --wpx: 3px;

  /* 外壳像素字，正文现代字。像素字号仍是 12 × --px。 */
  --font-pixel: "Ark Pixel", monospace;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --ink: #5b2a12;
  --ink-soft: #6e3b1b;
  --menu: #ffc97f;
  --menu-deep: #f7b768;
  --slot: #ffe2ad;
  --line: #d48f4c;
  --cream: #fff1d6;
  --shadow: #2a140a;
  --focus: #3b1d0e;
  --dim: rgb(30 16 8 / 0.55);
  --dim-inner: rgba(18, 14, 10, 0.42);

  --edge: #4e974c;
  --grass: #84c669;
  --grass-dark: #4e974c;
  color-scheme: light;
}

html[data-season="summer"] { --edge: #3d8543; --grass: #6fb752; --grass-dark: #3d8543; }
html[data-season="autumn"] { --edge: #9a7c3c; --grass: #c8ad60; --grass-dark: #9a7c3c; }
html[data-season="winter"] { --edge: #b3c4d6; --grass: #e6eef5; --grass-dark: #b3c4d6; }

/* ---------------------------------------------------------------- 世界 */

html {
  background: var(--edge);
}

.world {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--edge) url("../img/farm-spring.png") no-repeat calc(50% + var(--cam-x, 0px)) calc(38% + var(--cam-y, 0px));
  background-size: calc(896 * var(--wpx)) calc(512 * var(--wpx));
  image-rendering: pixelated;
}

html[data-season="summer"] .world { background-image: url("../img/farm-summer.png"); }
html[data-season="autumn"] .world { background-image: url("../img/farm-autumn.png"); }
html[data-season="winter"] .world { background-image: url("../img/farm-winter.png"); }

/* 天色跟着钟点：清晨偏暖，傍晚偏红，夜里压一层蓝。界面不跟着变。 */
.world::before {
  content: "";
  position: absolute;
  inset: 0;
}

html[data-phase="dawn"] .world::before { background: rgb(255 170 110 / 0.12); }
html[data-phase="dusk"] .world::before { background: rgb(160 70 90 / 0.2); }
html[data-phase="night"] .world::before { background: rgb(14 22 62 / 0.45); }

/* 阅读态遮罩（DESIGN.md .farm-backdrop-dim）：内页木框打开时压暗农场；
   首页标准落地页态（.home:not(.is-farm-mode)）铺一层《星露谷》开始菜单风格的蓝天白云与田园天际线。 */
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dim-inner);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

html[data-theme="farm"] .inner .world::after,
.is-gaming .world::after { opacity: 1; }

/* 落地页模式（首页及所有内页默认态）：铺一层《星露谷》开始菜单风格的蓝天白云与田园天际线，去掉黑幕 */
html:not([data-theme="farm"]) .world::after,
.home:not(.is-farm-mode):not(.is-gaming) .world::after {
  opacity: 1;
  background:
    radial-gradient(ellipse 180px 44px at 18% 19%, rgba(255, 255, 255, 0.72) 0 65%, transparent 70%),
    radial-gradient(ellipse 240px 52px at 82% 15%, rgba(255, 255, 255, 0.65) 0 65%, transparent 70%),
    radial-gradient(ellipse 160px 36px at 64% 28%, rgba(255, 255, 255, 0.48) 0 65%, transparent 70%),
    radial-gradient(ellipse 75% 24% at 22% 76%, rgba(124, 189, 107, 0.42) 0 70%, transparent 72%),
    radial-gradient(ellipse 80% 26% at 78% 78%, rgba(105, 173, 94, 0.38) 0 70%, transparent 72%),
    linear-gradient(180deg, #4b9be1 0%, #7ec4ef 26%, #bfe6fa 52%, #e5f2d5 74%, #f6ebd4 100%);
}

html[data-phase="dawn"]:not([data-theme="farm"]) .world::after,
html[data-phase="dawn"] .home:not(.is-farm-mode):not(.is-gaming) .world::after {
  background:
    radial-gradient(ellipse 200px 46px at 20% 18%, rgba(255, 240, 224, 0.58) 0 65%, transparent 70%),
    radial-gradient(ellipse 230px 50px at 80% 16%, rgba(255, 232, 210, 0.52) 0 65%, transparent 70%),
    linear-gradient(180deg, #698cc7 0%, #c898a8 30%, #f5c69c 58%, #f7ebd4 100%);
}

html[data-phase="dusk"]:not([data-theme="farm"]) .world::after,
html[data-phase="dusk"] .home:not(.is-farm-mode):not(.is-gaming) .world::after {
  background:
    radial-gradient(ellipse 210px 46px at 22% 18%, rgba(255, 214, 186, 0.42) 0 65%, transparent 70%),
    radial-gradient(ellipse 240px 50px at 78% 16%, rgba(255, 198, 170, 0.38) 0 65%, transparent 70%),
    linear-gradient(180deg, #484a83 0%, #a86475 30%, #e4976b 58%, #f3e2c7 100%);
}

html[data-phase="night"]:not([data-theme="farm"]) .world::after,
html[data-phase="night"] .home:not(.is-farm-mode):not(.is-gaming) .world::after {
  background:
    radial-gradient(circle 2px at 15% 14%, rgba(255, 248, 214, 0.85) 0 60%, transparent 100%),
    radial-gradient(circle 2px at 34% 9%, rgba(255, 248, 214, 0.7) 0 60%, transparent 100%),
    radial-gradient(circle 2px at 68% 12%, rgba(255, 248, 214, 0.8) 0 60%, transparent 100%),
    radial-gradient(circle 2px at 85% 20%, rgba(210, 226, 255, 0.75) 0 60%, transparent 100%),
    linear-gradient(180deg, #131c38 0%, #1e2d56 36%, #2b3f6e 68%, #23304c 100%);
}

/* ---------------------------------------------------------------- 角色层 */

/* 首页走动的 Ricardo 和村民。层本身不吃点击，能点的地、NPC 单独开 pointer-events。
   没有脚本时这一层不存在，首页就是农场加对话。 */
.roam {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.inner .roam,
.home:not(.is-farm-mode) .roam { display: none; }

/* 和 .world 的背景同一个锚点：图的 50% 38% 对齐视口的 50% 38%。
   镜头变量由 js/walk.js 每帧写在 .world 和这一层上（不写在 <html> 上，根上一改整页样式都要重算），
   位移走 transform，不碰 left/top，省得走一路重排一路。 */
.roam-map {
  position: absolute;
  left: 50%;
  top: 38%;
  width: calc(896 * var(--wpx));
  height: calc(512 * var(--wpx));
  transform: translate(-50%, -38%) translate(var(--cam-x, 0px), var(--cam-y, 0px));
}

.roam-hit {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none; /* 长按走路时别让浏览器把页面滚走或缩放 */
}

.actor {
  position: absolute;
  width: calc(16 * var(--wpx));
  height: calc(16 * var(--wpx));
  image-rendering: pixelated;
}

/* 小人每帧挪位置靠 js/walk.js 写 transform，left/top 定在原点不动。 */
.actor-ricardo {
  left: 0;
  top: 0;
  background: url("../img/walk-ricardo.png") 0 0 / calc(128 * var(--wpx)) calc(16 * var(--wpx));
}

.actor-npc {
  background: url("../img/walk-npcs-busy.png") 0 0 / calc(80 * var(--wpx)) calc(16 * var(--wpx));
  pointer-events: auto;
}

/* 地图交互极简指示：无背景色，仅在头顶正中悬浮一枚温润原木象牙白像素感叹号（!） */
.bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4 * var(--px));
  z-index: 3;
  width: calc(6 * var(--px));
  height: calc(14 * var(--px));
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 14'%3E%3Cpath d='M1 0.8h4v7.6H1zM1 10.4h4v2.8H1z' fill='%23fff4d4' stroke='%233a1c0d' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / contain !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 calc(1.5 * var(--px)) calc(2 * var(--px)) rgba(35, 18, 8, 0.45));
  transform: translateX(-50%);
  pointer-events: none;
  animation: bubble-beacon 2s ease-in-out infinite;
  transition: opacity 160ms ease, transform 160ms ease;
}

@keyframes bubble-beacon {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(calc(-4 * var(--px))); }
}

.actor.is-near .bubble,
.actor:hover .bubble {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-6 * var(--px)));
}

/* 大面积区域（池塘、菜地、牲口棚）：感叹号居中悬浮在区域正上方中心 */
.actor-zone > .bubble {
  bottom: auto;
  top: 38%;
}

.nametag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2 * var(--px));
  z-index: 4;
  padding: var(--px) calc(2.5 * var(--px));
  background: rgba(24, 15, 10, 0.88);
  border: var(--px) solid rgba(255, 234, 190, 0.65);
  box-shadow: 0 var(--px) 0 rgba(12, 7, 4, 0.65);
  color: var(--cream);
  line-height: 1.2;
  text-shadow: var(--px) var(--px) 0 var(--shadow);
  white-space: nowrap;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.actor.is-near .nametag,
.actor:hover .nametag {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 小游戏与小程序入口（池塘、矿车街机、菜地、古井）：金框暖底更醒目 */
.actor-game > .nametag,
.actor-arcade > .nametag {
  background: rgba(44, 24, 10, 0.94);
  border-color: #ffd34d;
  color: #ffe891;
}

.actor-arcade {
  z-index: 250 !important;
  cursor: pointer;
}

/* 大面积区域（池塘、菜地、牲口棚）：提示牌居中悬浮在区域正上方 */
.actor-zone > .nametag {
  bottom: auto;
  top: 42%;
}

.actor-zone > .bubble {
  bottom: auto;
  top: calc(42% - var(--fs) - 5 * var(--px));
}

/* 信箱紧挨着小满：名牌挂在信箱下沿，避免和左侧小满的名牌重叠 */
.actor-low > .nametag {
  bottom: auto;
  top: calc(100% + var(--px));
}

.actor-npc, .actor-fixture { cursor: pointer; }

/* 手机上一格小人只有三十来像素，手指点不准：可点范围往外扩一圈（保证至少 48×48px 触控热区）。 */
.actor-npc::after, .actor-fixture::after {
  content: "";
  position: absolute;
  left: calc(-8 * var(--wpx));
  right: calc(-8 * var(--wpx));
  top: calc(-10 * var(--wpx));
  bottom: calc(-6 * var(--wpx));
}

.actor:hover > .nametag,
.actor.is-near > .nametag {
  z-index: 4;
  background: #d9772f;
  border-color: #fff4dc;
  color: #fff4dc;
}

@keyframes nametag-float {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, calc(-1.5 * var(--px))); }
}

@keyframes bubble-pop {
  from {
    opacity: 0;
    transform: translate(-50%, calc(3 * var(--px))) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* 场景微交互与彩蛋反馈 */
.actor-campfire {
  cursor: pointer;
  pointer-events: auto;
}

.actor-campfire::before {
  content: "🪵";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--wpx));
  font-size: calc(9 * var(--wpx));
  line-height: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 var(--wpx) 0 #4a2810);
}

.actor-campfire::after {
  content: "🔥";
  position: absolute;
  left: 50%;
  bottom: calc(4 * var(--wpx));
  font-size: calc(11 * var(--wpx));
  line-height: 1;
  transform: translateX(-50%);
  animation: campfire-flicker 0.7s infinite alternate ease-in-out;
}

@keyframes campfire-flicker {
  0% { transform: translateX(-50%) scale(0.92) translateY(0); filter: drop-shadow(0 0 3px #ff9800); }
  100% { transform: translateX(-50%) scale(1.12) translateY(calc(-2 * var(--wpx))); filter: drop-shadow(0 0 8px #ff5722); }
}

.is-hopping {
  animation: chicken-hop 0.4s ease-out;
}

@keyframes chicken-hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(calc(-8 * var(--wpx))) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}

/* 场景实时气泡提示 */
.speech-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6 * var(--px));
  transform: translateX(-50%) translateY(0);
  padding: calc(3 * var(--px)) calc(5 * var(--px));
  background: #fff9eb;
  border: calc(2 * var(--px)) solid var(--ink);
  border-radius: calc(3 * var(--px));
  box-shadow: 0 calc(2 * var(--px)) 0 rgba(20, 10, 5, 0.4);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: calc(200 * var(--px));
  text-align: center;
  pointer-events: none;
  z-index: 1000;
  animation: speech-pop 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: calc(5 * var(--px)) calc(5 * var(--px)) 0;
  border-style: solid;
  border-color: var(--ink) transparent transparent;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: calc(3 * var(--px)) calc(3 * var(--px)) 0;
  border-style: solid;
  border-color: #fff9eb transparent transparent;
  z-index: 1;
}

.speech-bubble.is-fading {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-4 * var(--px)));
}

@keyframes speech-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(calc(6 * var(--px))) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 680px), (pointer: coarse) {
  .actor-npc::after, .actor-fixture::after {
    left: calc(-12 * var(--wpx));
    right: calc(-12 * var(--wpx));
    top: calc(-14 * var(--wpx));
    bottom: calc(-10 * var(--wpx));
    min-width: 48px;
    min-height: 48px;
  }
}

/* 天色也盖在角色层上，和 .world::before 一样，不然夜里小人还是亮的。 */
.roam::after {
  content: "";
  position: absolute;
  inset: 0;
}

html[data-phase="dawn"] .roam::after { background: rgb(255 170 110 / 0.12); }
html[data-phase="dusk"] .roam::after { background: rgb(160 70 90 / 0.2); }
html[data-phase="night"] .roam::after { background: rgb(14 22 62 / 0.45); }

/* ---------------------------------------------------------------- 基础 */

* { box-sizing: border-box; }

/* 长页、短页之间换来换去时，给滚动条留好位置，菜单不左右晃。 */
html { scrollbar-gutter: stable; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* 游戏外壳保持像素字。 */
.hud,
nav,
.panel h1,
.panel h2,
.panel h3,
.nameplate,
button,
.btn,
.nametag,
.bubble,
.walk-hint,
.credit {
  font-family: var(--font-pixel);
}

/* 内页正文改用系统无衬线，长文和输入框好读。 */
.panel p:not(.nameplate):not(.landing-scroll),
.panel li,
.panel dd,
.panel dt,
.panel .row,
.panel .greet,
.panel .empty,
.panel .hint,
.letter .prose,
.letter .meta,
.board .field,
.board input,
.board textarea,
.board .note-title,
.board .note-when,
.board .day,
.board .cal-week,
.board .cal-foot,
.board .pin-hint,
.board label {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.02rem, 16px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
}

/* 行内代码跟着正文走（不然会继承像素字的 24px，混在 16px 正文里突兀）；
   等宽字符没有断行点，requestAnimationFrame 这类长 API 名在窄屏要允许断开。 */
code {
  font-size: clamp(13px, 0.92rem, 14px);
  overflow-wrap: anywhere;
}

/* 标题、按钮就算落在正文容器里，也仍用像素字。 */
.panel h1,
.panel h2,
.panel h3,
.panel .nameplate,
.panel .landing-scroll,
.panel button,
.panel .btn,
.board button,
.board .btn,
.board .cal-step,
.board .drawer > summary,
.board .note-group h3 {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.panel button,
.panel .btn,
.board button,
.board .btn {
  font-size: var(--fs);
  line-height: var(--lh);
}

a { color: inherit; }

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }

h1, h2, h3 { font: inherit; }

img { display: block; }

[hidden] { display: none !important; }

.pixel { image-rendering: pixelated; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: calc(4 * var(--px));
  top: -200px;
  z-index: 9;
  padding: var(--px) calc(4 * var(--px));
  background: var(--menu);
  border: var(--px) solid var(--focus);
}

.skip:focus { top: calc(4 * var(--px)); }

/* 内容还没写的地方。 */
.todo { color: var(--ink-soft); }

/* ---------------------------------------------------------------- HUD：天色、日期、时间、季节 */

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(3 * var(--px));
  padding: calc(4 * var(--px)) calc(4 * var(--px)) 0;
}

/* 落地页模式下：时间胶囊水平居中，位于大标题木牌上方，形成对称典雅的主视觉轴 */
.home:not(.is-farm-mode) .hud {
  justify-content: center;
  padding: 18px 16px 4px;
  width: 100%;
}

.inner .hud-mode-switch {
  display: none;
}

.hud-box {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: 0 calc(2 * var(--px)) 0 0;
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab.png") 5 fill / calc(5 * var(--px)) stretch;
  image-rendering: pixelated;
}

/* 落地页模式下的现代毛玻璃药丸胶囊 HUD：轻巧雅致，无像素厚框 */
html:not([data-theme="farm"]) .hud-box,
html[data-theme="landing"] .hud-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-image: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(35, 18, 8, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #4a200b;
  letter-spacing: 0.02em;
}

html[data-phase="night"]:not([data-theme="farm"]) .hud-box,
html[data-phase="night"][data-theme="landing"] .hud-box {
  background: rgba(24, 34, 62, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f0f4ff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html:not([data-theme="farm"]) .hud-sky,
html[data-theme="landing"] .hud-sky {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-image: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="farm"]) .hud-sky::after,
html[data-theme="landing"] .hud-sky::after {
  display: none;
}

html:not([data-theme="farm"]) .hud-lines,
html[data-theme="landing"] .hud-lines {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
}

html:not([data-theme="farm"]) .hud-lines p,
html[data-theme="landing"] .hud-lines p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

html:not([data-theme="farm"]) .hud-lines p:first-child::after,
html[data-theme="landing"] .hud-lines p:first-child::after {
  content: "·";
  margin: 0 2px;
  opacity: 0.45;
}

html:not([data-theme="farm"]) .hud-season,
html[data-theme="landing"] .hud-season {
  background: rgba(140, 90, 50, 0.08);
  border: 1px solid rgba(140, 90, 50, 0.14);
  border-radius: 999px;
  padding: 1px 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  box-shadow: none;
}

html[data-phase="night"]:not([data-theme="farm"]) .hud-season,
html[data-phase="night"][data-theme="landing"] .hud-season {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f0f4ff;
}

/* 农场漫游态下的退出/返回主页按钮：左上角温润金琥珀药丸，带微反光与 Esc 提示 */
.is-farm-mode .hud-mode-switch {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #5b2a12;
  border-image: none;
  background: linear-gradient(180deg, #ffe0a3 0%, #f6ba60 100%);
  box-shadow: 0 4px 14px rgba(35, 18, 8, 0.28), inset 0 1px 0 #fff7e0;
  color: #4a200b;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}

.is-farm-mode .hud-mode-switch:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(35, 18, 8, 0.38), inset 0 1px 0 #fff7e0;
}

.is-farm-mode .hud-mode-switch:active {
  transform: translateY(1px);
}

.is-farm-mode .hud-mode-switch .switch-arrow {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.is-farm-mode .hud-mode-switch .switch-kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(74, 32, 11, 0.14);
  color: #5b2a12;
  border: 1px solid rgba(74, 32, 11, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .is-farm-mode .hud-mode-switch {
    top: 8px;
    left: 10px;
    padding: 5px 12px;
    font-size: 12px;
  }
  .is-farm-mode .hud-mode-switch .switch-kbd {
    display: none;
  }
}

/* 农场漫游态右上角的显眼出口：和左上角开关同款式但更醒目，头三下轻轻搏动引人注意。 */
.farm-exit-pill {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid #5b2a12;
  background: linear-gradient(180deg, #ffe0a3 0%, #f6ba60 100%);
  box-shadow: 0 4px 14px rgba(35, 18, 8, 0.32), inset 0 1px 0 #fff7e0;
  color: #4a200b;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}

.farm-exit-pill[hidden] { display: none; }

.farm-exit-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 7px 20px rgba(35, 18, 8, 0.42), inset 0 1px 0 #fff7e0;
}

.farm-exit-pill:active { transform: translateY(1px); }

.farm-exit-pill:focus-visible {
  outline: 2px solid #3b1d0e;
  outline-offset: 2px;
}

.farm-exit-pill .switch-kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(74, 32, 11, 0.14);
  color: #5b2a12;
  border: 1px solid rgba(74, 32, 11, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.is-farm-mode .farm-exit-pill { animation: farm-exit-pulse 2.4s ease-in-out 3; }

@keyframes farm-exit-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(35, 18, 8, 0.32), inset 0 1px 0 #fff7e0; }
  50% { box-shadow: 0 4px 22px rgba(246, 186, 96, 0.85), inset 0 1px 0 #fff7e0; }
}

@media (prefers-reduced-motion: reduce) {
  .is-farm-mode .farm-exit-pill { animation: none; }
}

/* 头一回进农场的浮层引导：钉在右上角按钮下方，点一下或 10 秒后自己收起。 */
.farm-exit-tip {
  position: fixed;
  top: 112px;
  right: 16px;
  z-index: 10;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 14px;
  border: 2px solid #5b2a12;
  border-radius: 10px;
  background: #ffefc9;
  color: #4a200b;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.65;
  box-shadow: 0 6px 18px rgba(35, 18, 8, 0.35);
  cursor: pointer;
  animation: game-fade-in 200ms ease-out both;
}

.farm-exit-tip::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 26px;
  width: 12px;
  height: 12px;
  background: #ffefc9;
  border-left: 2px solid #5b2a12;
  border-top: 2px solid #5b2a12;
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .farm-exit-pill {
    top: 78px;
    right: 10px;
    padding: 7px 13px;
    font-size: 12.5px;
  }
  .farm-exit-pill .switch-kbd { display: none; }
  .farm-exit-tip {
    top: 122px;
    right: 10px;
    font-size: 12.5px;
  }
}

/* 內页木框弹窗有自己的红叉返回，农场出口只在首页漫游态出现。 */
.inner .farm-exit-pill,
.inner .farm-exit-tip { display: none; }

/* 一小块天：颜色跟着钟点走，太阳或月亮沿弧线挪，底下一条当季的草。 */
.hud-sky {
  position: relative;
  flex: none;
  width: calc(34 * var(--px));
  height: calc(20 * var(--px));
  overflow: hidden;
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: linear-gradient(#6fbde0 0 35%, #92d0ea 35% 65%, #bfe4f1 65%) padding-box;
}

html[data-phase="dawn"] .hud-sky { background: linear-gradient(#8fb2dd 0 30%, #efb7a3 30% 60%, #ffd79b 60%) padding-box; }
html[data-phase="dusk"] .hud-sky { background: linear-gradient(#6c6aa8 0 30%, #e08a7c 30% 60%, #f6b878 60%) padding-box; }
html[data-phase="night"] .hud-sky { background: linear-gradient(#1b2244 0 45%, #2a3462 45%) padding-box; }

.hud-sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(4 * var(--px));
  background: var(--grass);
  box-shadow: inset 0 var(--px) 0 var(--grass-dark);
}

/* 夜里几颗星。 */
.hud-sky::before {
  content: "";
  position: absolute;
  left: calc(4 * var(--px));
  top: calc(3 * var(--px));
  width: var(--px);
  height: var(--px);
  background: #fff7d6;
  box-shadow:
    calc(9 * var(--px)) calc(4 * var(--px)) 0 #fff7d6,
    calc(17 * var(--px)) calc(1 * var(--px)) 0 #fff7d6,
    calc(23 * var(--px)) calc(6 * var(--px)) 0 #c9d6ff,
    calc(4 * var(--px)) calc(8 * var(--px)) 0 #c9d6ff;
  opacity: 0;
}

html[data-phase="night"] .hud-sky::before { opacity: 1; }

.hud-sun {
  position: absolute;
  left: calc(var(--sx, 13) * var(--px));
  top: calc(var(--sy, 3) * var(--px));
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("../img/sky-sun.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

html[data-phase="night"] .hud-sun { background-image: url("../img/sky-moon.png"); }

.hud-lines p {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  white-space: nowrap;
}

/* 换季：做成一个不起眼的季节小牌，点一下换到下一季，只在这次浏览里有效。 */
.hud-season {
  display: inline-flex;
  align-items: center;
  gap: var(--px);
  margin-left: auto;
  padding: 0 var(--px);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

.hud-season:hover { background: var(--menu-deep); }

.hud-season-icon {
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  background: url("../img/season-spring.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.hud-season-name::before { content: "春"; }

html[data-season="summer"] .hud-season-icon { background-image: url("../img/season-summer.png"); }
html[data-season="autumn"] .hud-season-icon { background-image: url("../img/season-autumn.png"); }
html[data-season="winter"] .hud-season-icon { background-image: url("../img/season-winter.png"); }
html[data-season="summer"] .hud-season-name::before { content: "夏"; }
html[data-season="autumn"] .hud-season-name::before { content: "秋"; }
html[data-season="winter"] .hud-season-name::before { content: "冬"; }

/* 声音：季节小牌旁边一个小喇叭，点开是声音面板（js/sound.js 画）。没有脚本、出不了声时不露出来。 */
.hud {
  position: relative;
  z-index: 5;
}

.hud-sound {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--px);
  border: 0;
  background: none;
  cursor: pointer;
}

.hud-sound:hover,
.hud-sound[aria-expanded="true"] { background: var(--menu-deep); }

.hud-sound-icon {
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  background: url("../img/sound-off.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.hud-sound[data-state="on"] .hud-sound-icon,
.hud-sound[data-state="wait"] .hud-sound-icon { background-image: url("../img/sound-on.png"); }

/* 首访声音小木签：只在农场出现，尾巴指向小喇叭。 */
.hud-lines p:last-child { position: relative; }

.sound-cue {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: 44px;
  padding: 8px 12px;
  border: var(--px) solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 calc(2 * var(--px)) 0 var(--shadow);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.5;
  white-space: normal;
  cursor: pointer;
  animation: sound-cue-breathe 2.8s ease-in-out infinite;
  transition: opacity 220ms ease;
}

.sound-cue::before {
  content: "";
  position: absolute;
  right: calc(3 * var(--px));
  top: -8px;
  width: 10px;
  height: 10px;
  border-top: var(--px) solid var(--ink);
  border-left: var(--px) solid var(--ink);
  background: var(--cream);
  transform: rotate(45deg);
}

.sound-cue.is-dismissed {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

html:not([data-theme="farm"]) .sound-cue { display: none; }

@keyframes sound-cue-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* 开着但浏览器还不让出声：喇叭淡一点，等访客点一下页面。 */
.hud-sound[data-state="wait"] .hud-sound-icon { opacity: 0.5; }

.sound-panel {
  position: absolute;
  top: 100%;
  right: calc(4 * var(--px));
  display: grid;
  gap: calc(2 * var(--px));
  width: min(100vw - 8 * var(--px), calc(190 * var(--px)));
  margin-top: var(--px);
  padding: calc(2 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px));
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab.png") 5 fill / calc(5 * var(--px)) stretch;
  image-rendering: pixelated;
}

.sound-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sound-head b { font-weight: normal; }

.sound-row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: calc(3 * var(--px));
  align-items: center;
}

.sound-row .btn { justify-self: end; }

/* 「加一首」是包着文件选择框的小木牌，键盘移到里面时照样有焦点框。 */
.btn:has(:focus-visible) {
  outline: var(--px) solid var(--focus);
  outline-offset: var(--px);
}

.sound-note { color: var(--ink-soft); }

.sound-note:empty { display: none; }

.sound-mine {
  display: grid;
  gap: var(--px);
  padding: 0;
  list-style: none;
}

.sound-mine:empty { display: none; }

.sound-mine li {
  display: flex;
  justify-content: space-between;
  gap: calc(3 * var(--px));
}

.sound-mine span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-mine button {
  padding: 0 var(--px);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

/* 音量滑块：一道凹槽，一块深色小木块。 */
.sound-slider {
  width: 100%;
  height: calc(10 * var(--px));
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sound-slider::-webkit-slider-runnable-track {
  height: calc(4 * var(--px));
  border: var(--px) solid var(--line);
  background: var(--slot);
}

.sound-slider::-moz-range-track {
  height: calc(4 * var(--px));
  border: var(--px) solid var(--line);
  background: var(--slot);
}

.sound-slider::-webkit-slider-thumb {
  width: calc(4 * var(--px));
  height: calc(8 * var(--px));
  margin-top: calc(-2 * var(--px));
  border: 0;
  background: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.sound-slider::-moz-range-thumb {
  width: calc(4 * var(--px));
  height: calc(8 * var(--px));
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

/* ---------------------------------------------------------------- 首页：对话框 */

.stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(6 * var(--px)) calc(6 * var(--px)) 0;
}

/* 首页：农场漫游态时对话框浮在角色层上面；标准落地页态时按内页木框排布。 */
.home .stage {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.home:not(.is-farm-mode) .stage {
  justify-content: flex-start;
  padding: 0;
  pointer-events: auto;
}

.home:not(.is-farm-mode) .dialogue,
.home:not(.is-farm-mode) .walk-peep {
  display: none !important;
}

.home.is-farm-mode .landing-wrap {
  display: none;
}

.home .stage .dialogue,
.home .stage .landing-wrap { pointer-events: auto; }

.dialogue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(6 * var(--px));
  width: min(100%, calc(460 * var(--px)));
  margin: 0 auto;
}

.dialogue-text {
  padding: calc(4 * var(--px)) calc(6 * var(--px));
  border-style: solid;
  border-width: calc(8 * var(--px));
  border-image: url("../img/ui-dialogue.png") 8 / calc(8 * var(--px)) stretch;
  background: linear-gradient(#ffe6b4, #ffd391 55%, #f6b766) padding-box;
  image-rendering: pixelated;
  cursor: default;
}

.dialogue-line { min-height: calc(var(--fs) * var(--lh)); }

.choices {
  display: grid;
  margin-top: calc(3 * var(--px));
}

.choices a {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: 0 calc(3 * var(--px));
  text-decoration: none;
  white-space: nowrap;
}

.choices a::before {
  content: "";
  flex: none;
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("../img/ui-pointer.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
  visibility: hidden;
}

.choices a:hover,
.choices a:focus-visible {
  background: rgb(224 128 48 / 0.28);
}

/* 「再逛逛」和选项一个样子。 */
.choices button {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: 0 calc(3 * var(--px));
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.choices button::before {
  content: "";
  flex: none;
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("../img/ui-pointer.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
  visibility: hidden;
}

.choices button:hover,
.choices button:focus-visible {
  background: rgb(224 128 48 / 0.28);
}

.choices button:hover::before,
.choices button:focus-visible::before { visibility: visible; }

.choices a:hover::before,
.choices a:focus-visible::before { visibility: visible; }

.choices small {
  margin-left: auto;
  padding-left: calc(4 * var(--px));
  font-size: inherit;
  color: var(--ink-soft);
}

/* 打字时先不给选项，像游戏里一样。没有脚本时这个类不会出现。 */
.is-typing .choices { visibility: hidden; }

/* 选项放开折行：宽屏上放得下时仍是单行，不受影响；
   手机与分屏等窄视口里，nowrap 的长选项（比如「在农场里走走（钓鱼 · 矿车 · 种菜 · 抽签）」）
   会以六百多像素的最小内容宽度把对话木框撑出屏幕，必须能折。 */
.choices a,
.choices button { white-space: normal; }

.choices small { flex: none; }

/* 手机上对话框只有两三百像素宽：页脚栏目收窄字号保持一行。
   像素字界面层（对话、选项、HUD、页签、按钮、内页标题）整体从 24px 收到 20px：
   阅读正文本来就是 14-16px 不动，只有游戏外壳跟着小一档；
   20px 在 3x 屏（多数手机）上是 12px 网格字体的整数倍，像素依然干净。 */
@media (max-width: 640px) {
  :root { --fs: 20px; }

  .credit { font-size: calc(9 * var(--px)); }

  .credit a { padding: 0 0.3em; }
}

/* 走起来以后招呼对话藏起来，从左下角的小按钮再打开；键盘和读屏走这个按钮。 */
.is-walking .stage .dialogue { visibility: hidden; }

/* 和村民说话时对话框再出来。 */
.is-walking.is-talking .stage .dialogue { visibility: visible; }

/* 换页过场：小人跑回屋门这段路，地和村民都不吃点击。 */
.is-leaving .roam-hit, .is-leaving .actor-npc, .is-leaving .actor-fixture { pointer-events: none; }

.walk-peep {
  position: fixed;
  left: calc(6 * var(--px));
  bottom: calc(6 * var(--px));
  z-index: 2;
  pointer-events: auto;
}

/* 漫游时不让隐藏的宽对话框撑大手机横屏的布局视口。 */
.home.is-farm-mode.is-walking:not(.is-talking) .stage .dialogue { display: none; }

/* 触屏十字键只占四个方向格，留空处仍能点到农场。 */
.walk-pad {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(152px + env(safe-area-inset-bottom));
  z-index: 3;
  display: none;
  grid-template: repeat(3, 44px) / repeat(3, 44px);
  gap: 2px;
  opacity: 0.45;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 120ms ease;
}

.walk-pad.is-held, .walk-pad:focus-within { opacity: 0.8; }

.walk-pad-key {
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--px) solid var(--ink);
  background: var(--slot);
  box-shadow: inset 0 -4px var(--line), 0 2px var(--shadow);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.walk-pad-key::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 35%, 50% 0, 100% 35%, 70% 35%, 70% 100%, 30% 100%, 30% 35%);
}

.walk-pad-key[data-direction="up"] { grid-area: 1 / 2; }
.walk-pad-key[data-direction="left"] { grid-area: 2 / 1; }
.walk-pad-key[data-direction="right"] { grid-area: 2 / 3; }
.walk-pad-key[data-direction="down"] { grid-area: 3 / 2; }
.walk-pad-key[data-direction="left"]::before { transform: rotate(-90deg); }
.walk-pad-key[data-direction="right"]::before { transform: rotate(90deg); }
.walk-pad-key[data-direction="down"]::before { transform: rotate(180deg); }

.walk-pad[data-direction="up"] [data-direction="up"],
.walk-pad[data-direction="left"] [data-direction="left"],
.walk-pad[data-direction="right"] [data-direction="right"],
.walk-pad[data-direction="down"] [data-direction="down"] {
  background: var(--menu-deep);
  box-shadow: inset 0 3px var(--line);
}

.walk-pad-key:focus-visible, .sound-cue:focus-visible {
  outline: var(--px) solid var(--focus);
  outline-offset: calc(2 * var(--px));
}

@media (any-pointer: coarse) {
  .home.is-farm-mode.is-walking:not(.is-talking):not(.is-gaming) .walk-pad { display: grid; }
  .home.is-farm-mode .walk-peep {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

/* 走动提示：一行小字，颜色压浅。 */
.walk-hint {
  margin-top: calc(3 * var(--px));
  color: var(--ink-soft);
}

/* NPC 说话时，肖像框里放村民的小图，放大三倍和肖像一样大。 */
.portrait-npc {
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  background: url("../img/walk-npcs.png") 0 0 / calc(240 * var(--px)) calc(48 * var(--px));
  image-rendering: pixelated;
}

.dialogue-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--px));
  align-self: end;
}

/* ---------------------------------------------------------------- 肖像和名字卷轴 */

.portrait-box {
  padding: calc(2 * var(--px));
  border-style: solid;
  border-width: calc(8 * var(--px));
  border-image: url("../img/ui-menu.png") 8 fill / calc(8 * var(--px)) stretch;
  image-rendering: pixelated;
}

.portrait-box img {
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  background: linear-gradient(#9fd3ec 0 40%, #bfe3f2 40% 75%, #e3efe0 75%);
  image-rendering: pixelated;
}

.nameplate {
  height: calc(16 * var(--px));
  padding: 0 calc(2 * var(--px));
  border-style: solid;
  border-width: 0 calc(4 * var(--px));
  border-image: url("../img/ui-scroll.png") 0 4 fill / 0 calc(4 * var(--px)) stretch;
  line-height: calc(16 * var(--px));
  /* 名牌纸卷永远是奶油底，深墨字在昼夜两种面板上都成立。 */
  color: var(--ink);
  white-space: nowrap;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- 内页：菜单窗 */

.menu-wrap {
  position: relative;
  width: min(100% - 12 * var(--px), calc(440 * var(--px)));
  margin: calc(4 * var(--px)) auto 0;
}

.menu {
  position: relative;
  z-index: 1;
  padding: calc(8 * var(--px));
  border-style: solid;
  border-width: calc(8 * var(--px));
  border-image: url("../img/ui-menu.png") 8 fill / calc(8 * var(--px)) stretch;
  image-rendering: pixelated;
}

/* 信纸：没有木框，纸边不规整，纸上有纤维。 */
.letter {
  position: relative;
  z-index: 1;
  padding: calc(8 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px));
  border-style: solid;
  border-width: calc(6 * var(--px));
  border-image: url("../img/ui-letter.png") 6 / calc(6 * var(--px)) repeat;
  background: #ffefc9 url("../img/paper-grain.png") 0 0 / calc(16 * var(--px)) padding-box;
  filter: drop-shadow(calc(2 * var(--px)) calc(2 * var(--px)) 0 rgb(20 10 5 / 0.45));
  image-rendering: pixelated;
}

.letter .meta {
  color: var(--ink-soft);
}

.letter .meta + .prose { margin-top: calc(6 * var(--px)); }

.letter ul {
  padding-left: 1.2em;
}

.letter li + li { margin-top: var(--px); }

.letter .prose p + p,
.letter .prose p + ul,
.letter .prose ul + p { margin-top: calc(4 * var(--px)); }

.letter .prose h2 { margin-top: calc(8 * var(--px)); }

.sign {
  margin-top: calc(8 * var(--px));
  text-align: right;
}

.close {
  position: absolute;
  top: calc(-14 * var(--px));
  right: calc(-14 * var(--px));
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  background: url("../img/ui-close.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

/* 平板与手机宽度：面板几乎贴住屏幕边，红叉收进木框角上，别挂出去被裁掉。 */
@media (max-width: 960px) {
  html[data-theme="farm"] .close {
    top: calc(2 * var(--px));
    right: calc(2 * var(--px));
  }
}

.close:hover { filter: brightness(1.15); }

/* ---------------------------------------------------------------- 页签：方块，图标在上，字在下 */

.tabs {
  position: relative;
  display: flex;
  gap: var(--px);
  padding-left: calc(8 * var(--px));
  margin-bottom: calc(-6 * var(--px));
}

.tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--px);
  min-width: calc(24 * var(--px));
  padding: var(--px) var(--px) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab-dim.png") 5 fill / calc(5 * var(--px)) stretch;
  line-height: 1;
  text-decoration: none;
  image-rendering: pixelated;
}

.tabs a:hover,
.tabs a:focus-visible { border-image-source: url("../img/ui-tab.png"); }

/* 聚焦的页签浮到菜单上面，焦点框才不会被压住。 */
.tabs a:focus-visible {
  position: relative;
  z-index: 3;
}

/* ---------------------------------------------------------------- 落地页模式：内页清爽卡片化 */

html:not([data-theme="farm"]) .menu-wrap {
  width: min(100% - 32px, 860px);
  margin: 16px auto 36px;
}

html:not([data-theme="farm"]) .panel.menu,
html:not([data-theme="farm"]) .panel.letter,
html:not([data-theme="farm"]) .panel.board {
  border: 1px solid rgba(140, 90, 50, 0.18);
  border-image: none;
  border-radius: 20px;
  background: rgba(255, 254, 250, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(35, 18, 8, 0.12), 0 2px 6px rgba(35, 18, 8, 0.05);
  padding: clamp(20px, 4vw, 36px);
  font-family: var(--font-sans);
  color: var(--ink);
  filter: none;
}

html[data-phase="night"]:not([data-theme="farm"]) .panel.menu,
html[data-phase="night"]:not([data-theme="farm"]) .panel.letter,
html[data-phase="night"]:not([data-theme="farm"]) .panel.board {
  background: rgba(24, 32, 54, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e6eef5;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* 夜间深卡片里，槽位行、招呼语与纸张仍然是暖琥珀底：文字要回到深墨，
   别继承面板的浅夜色，不然浅字压浅底看不清。 */
html[data-phase="night"]:not([data-theme="farm"]) .panel .row,
html[data-phase="night"]:not([data-theme="farm"]) .panel .sheet,
html[data-phase="night"]:not([data-theme="farm"]) .panel .greet {
  color: var(--ink);
}

html:not([data-theme="farm"]) .close {
  border-image: none;
  border-radius: 50%;
  background: rgba(140, 90, 50, 0.12);
  border: 1px solid rgba(140, 90, 50, 0.2);
  width: 32px;
  height: 32px;
  top: 14px;
  right: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}

html:not([data-theme="farm"]) .close:hover {
  background: rgba(140, 90, 50, 0.22);
  transform: scale(1.1);
  filter: none;
}

html:not([data-theme="farm"]) .tabs {
  border-image: none;
  background: rgba(255, 254, 250, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(140, 90, 50, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(35, 18, 8, 0.1);
  padding: 4px 10px;
  margin: 0 auto 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  display: flex;
  justify-content: center;
  gap: 4px;
}

html:not([data-theme="farm"]) .tabs a {
  border-image: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 14px;
  color: var(--ink);
  transition: background-color 0.18s ease, color 0.18s ease;
}

html:not([data-theme="farm"]) .tabs a[aria-current="page"] {
  background: #ecd4ad;
  color: #4a200b;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tabs img {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
}

/* 当前页签压到菜单边框上，盖住它。 */
.tabs a[aria-current="page"],
.tabs a.is-section {
  position: relative;
  z-index: 2;
  border-image-source: url("../img/ui-tab.png");
  transform: translateY(calc(3 * var(--px)));
}

/* ---------------------------------------------------------------- 物品栏 */

/* 一排格子。空格子也是物品栏的一部分，不放假东西进去。 */
.bag + .empty { margin-top: calc(2 * var(--px)); }

.bag {
  display: grid;
  grid-template-columns: repeat(12, calc(18 * var(--px)));
  gap: var(--px);
  justify-content: center;
  padding: 0;
  list-style: none;
}

.slot {
  position: relative;
  aspect-ratio: 1;
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  image-rendering: pixelated;
}

.bag-note {
  margin-top: calc(2 * var(--px));
  color: var(--ink-soft);
  text-align: center;
}

/* 横穿菜单的木条，两头压进木框里。 */
.divider {
  height: calc(6 * var(--px));
  margin: calc(6 * var(--px)) calc(-11 * var(--px));
  border-style: solid;
  border-width: 0 calc(2 * var(--px));
  border-image: url("../img/ui-divider.png") 0 2 fill / 0 calc(2 * var(--px)) stretch;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- 内容 */

/* 页标题和正文一样大，写在名字纸卷上，靠纸卷认出是标题。 */
.panel h1 {
  display: table;
  height: calc(16 * var(--px));
  margin: 0 0 calc(4 * var(--px)) calc(-2 * var(--px));
  padding: 0 calc(3 * var(--px));
  border-style: solid;
  border-width: 0 calc(4 * var(--px));
  border-image: url("../img/ui-scroll.png") 0 4 fill / 0 calc(4 * var(--px)) stretch;
  line-height: calc(16 * var(--px));
  /* 纸卷底永远是奶油色，深墨字在昼夜两种面板上都成立。 */
  color: var(--ink);
  white-space: nowrap;
  image-rendering: pixelated;
}

.page-head h1 { margin-bottom: 0; }

/* ---------------------------------------------------------------- 首页落地页：开始菜单式首屏 + 现代清爽卡片 */

.landing-wrap {
  position: relative;
  width: min(100% - 32px, 940px);
  margin: 0 auto 32px;
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 1rem, 16px);
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
}

/* 全景背景层：蓝天、飘动的云朵、层叠远山与松林天际线（固定在视口底层）。 */
.title-scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #2868bc 0%, #4d94df 30%, #86caf3 58%, #cbeBfc 78%, #e4f3d2 100%);
}

html[data-phase="dawn"] .title-scenery {
  background: linear-gradient(180deg, #4b6cb7 0%, #9b7bb8 30%, #e69d96 60%, #ffe0a8 84%, #f4ebd2 100%);
}

html[data-phase="dusk"] .title-scenery {
  background: linear-gradient(180deg, #2b2e63 0%, #7d4870 32%, #d4755d 64%, #f5b971 86%, #ede0c8 100%);
}

html[data-phase="night"] .title-scenery {
  background:
    radial-gradient(circle 2px at 14% 12%, #fff8d6 0 70%, transparent 100%),
    radial-gradient(circle 1.5px at 28% 22%, #fff8d6 0 70%, transparent 100%),
    radial-gradient(circle 2px at 46% 9%, #d8e6ff 0 70%, transparent 100%),
    radial-gradient(circle 1.5px at 67% 16%, #fff8d6 0 70%, transparent 100%),
    radial-gradient(circle 2px at 84% 11%, #fff8d6 0 70%, transparent 100%),
    radial-gradient(circle 1.5px at 91% 26%, #d8e6ff 0 70%, transparent 100%),
    linear-gradient(180deg, #0b1126 0%, #162247 38%, #243769 72%, #1d2b4f 100%);
}

.title-clouds {
  position: absolute;
  inset: 0 0 35% 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    24px -14px 0 8px rgba(255, 255, 255, 0.88),
    62px -10px 0 12px rgba(255, 255, 255, 0.84),
    96px -2px 0 4px rgba(255, 255, 255, 0.78),
    0 6px 0 rgba(186, 218, 246, 0.55);
  animation: cloud-drift linear infinite;
}

html[data-phase="dusk"] .cloud {
  background: rgba(255, 224, 198, 0.68);
  box-shadow:
    24px -14px 0 8px rgba(255, 224, 198, 0.7),
    62px -10px 0 12px rgba(255, 214, 186, 0.65),
    0 6px 0 rgba(168, 102, 112, 0.45);
}

html[data-phase="night"] .cloud {
  opacity: 0.22;
}

.cloud-1 { width: 140px; top: 11%; left: -180px; animation-duration: 78s; animation-delay: -12s; }
.cloud-2 { width: 170px; top: 22%; left: -220px; transform: scale(0.85); animation-duration: 96s; animation-delay: -54s; }
.cloud-3 { width: 130px; top: 15%; left: -160px; transform: scale(1.1); animation-duration: 112s; animation-delay: -82s; }
.cloud-4 { width: 150px; top: 30%; left: -200px; transform: scale(0.75); animation-duration: 88s; animation-delay: -31s; }

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 380px)); }
}

.title-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(190px, 36vh, 340px);
  display: block;
}

.mtn-far { fill: #7498cf; }
.mtn-mid { fill: #5179b0; }
.hill-near { fill: #5da657; }
.forest-line { fill: #2c6134; }

html[data-season="autumn"] .hill-near { fill: #c89446; }
html[data-season="autumn"] .forest-line { fill: #7e4b21; }
html[data-season="winter"] .hill-near { fill: #d0e0ee; }
html[data-season="winter"] .forest-line { fill: #6c87a3; }

html[data-phase="dusk"] .mtn-far { fill: #735782; }
html[data-phase="dusk"] .mtn-mid { fill: #513c66; }
html[data-phase="dusk"] .hill-near { fill: #4a6b49; }
html[data-phase="dusk"] .forest-line { fill: #263d29; }

html[data-phase="night"] .mtn-far { fill: #1c2c54; }
html[data-phase="night"] .mtn-mid { fill: #142142; }
html[data-phase="night"] .hill-near { fill: #18342d; }
html[data-phase="night"] .forest-line { fill: #0d1f1b; }

/* 第一屏：一屏完整的开始菜单（上木牌、中下竖向木牌按钮、底端滚动提示）。 */
.title-screen {
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 2.5vh, 28px) 0 clamp(14px, 3vh, 28px);
  text-align: center;
}

.title-plaque-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(4px, 1.5vh, 18px);
}

/* 复刻《星露谷物语》主标题木牌：横向木板拼接纹理、雕花内框、四角铆钉与藤蔓绿叶。 */
.title-plaque {
  position: relative;
  width: min(100%, 660px);
  padding: 28px 40px 24px;
  border-radius: 18px;
  border: 4px solid #4a200b;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 28px,
      rgba(128, 62, 18, 0.14) 28px 30px
    ),
    linear-gradient(180deg, #ffe3a3 0%, #f6c06a 48%, #df993e 100%);
  box-shadow:
    inset 0 2px 0 #fff5d8,
    inset 0 -4px 0 #b36620,
    inset 0 0 0 6px #d18537,
    inset 0 0 0 8px rgba(74, 32, 11, 0.35),
    0 18px 42px rgba(22, 10, 4, 0.28);
}

/* 左上与右上藤蔓树叶装饰（可点按触发彩蛋）。 */
.title-vine {
  position: absolute;
  top: -12px;
  width: 68px;
  height: 36px;
  border: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 18px 11px at 22px 18px, #5eb84d 0 70%, #2c6e26 72% 88%, transparent 90%),
    radial-gradient(ellipse 20px 12px at 44px 14px, #77cc5c 0 70%, #2c6e26 72% 88%, transparent 90%),
    radial-gradient(ellipse 15px 10px at 12px 26px, #499e3d 0 70%, #245c1f 72% 88%, transparent 90%);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.title-vine-left { left: 16px; transform: rotate(-8deg); }
.title-vine-right { right: 16px; transform: scaleX(-1) rotate(-8deg); }

.title-vine:hover {
  transform: scale(1.12) rotate(-4deg);
}

.title-vine-right:hover {
  transform: scaleX(-1) scale(1.12) rotate(-4deg);
}

/* 四角铆钉（可点击飞出蝴蝶）。 */
.title-nail {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #4a200b;
  background: radial-gradient(circle at 35% 35%, #ffd899, #9e531d);
  box-shadow: 0 1px 0 rgba(255, 244, 214, 0.6);
  cursor: pointer;
}

.nail-tl { top: 14px; left: 16px; }
.nail-tr { top: 14px; right: 16px; }
.nail-bl { bottom: 14px; left: 16px; }
.nail-br { bottom: 14px; right: 16px; }

.title-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #7c3f18;
}

.title-main {
  margin: 4px 0 2px;
  font-family: var(--font-pixel);
  font-size: clamp(44px, 6.5vw, 68px);
  line-height: 1.08;
  letter-spacing: 0.05em;
  color: #fff3cf;
  text-shadow:
    0 2px 0 #f5a638,
    0 4px 0 #9e4c16,
    2px 5px 0 #4a200b,
    -2px 5px 0 #4a200b,
    0 7px 14px rgba(42, 20, 10, 0.35);
  -webkit-font-smoothing: none;
}

.title-en {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #6e3715;
}

/* 铁链悬挂在主木牌下方的副标题窄木牌。 */
.title-sub-plaque {
  position: relative;
  margin-top: 10px;
  padding: 8px 24px;
  max-width: min(100%, calc(100vw - 32px));
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  border-radius: 10px;
  border: 3px solid #4a200b;
  background: linear-gradient(180deg, #ffe6b0 0%, #f2b863 100%);
  box-shadow:
    inset 0 1px 0 #fff8e6,
    0 8px 20px rgba(24, 12, 5, 0.2);
  color: #4a200b;
  font-size: clamp(12.5px, 3.6vw, 15.5px);
  font-weight: 700;
  animation: sign-sway 5.5s ease-in-out infinite;
  transform-origin: 50% -10px;
}

/* 标题木牌下方的悬浮像素农舍漫游按钮 */
.farm-cabin-entrance-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 2px solid #5b2a12;
  background: linear-gradient(180deg, #ffe0a3 0%, #f6ba60 100%);
  box-shadow: 0 4px 14px rgba(42, 20, 10, 0.18), inset 0 1px 0 #fff5d8;
  color: #4a200b;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

.farm-cabin-entrance-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(42, 20, 10, 0.25), inset 0 1px 0 #fff5d8;
}

.farm-cabin-entrance-btn .cabin-icon {
  font-size: 16px;
  line-height: 1;
}

.farm-cabin-entrance-btn .cabin-tag {
  background: rgba(74, 32, 11, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: #5b2a12;
}

.title-chain {
  position: absolute;
  top: -13px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: #4a200b;
  box-shadow: 0 0 0 1px rgba(255, 232, 186, 0.35);
}

.chain-left { left: 28px; }
.chain-right { right: 28px; }

@keyframes sign-sway {
  0%, 100% { transform: rotate(-0.4deg); }
  50% { transform: rotate(0.4deg); }
}

/* 开始菜单标志性的竖向木牌按钮组（带内嵌浅色画窗 + 底部标题）。 */
.title-menu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 152px));
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: auto 0;
  padding: 14px 0;
  font-family: var(--font-sans);
}

.title-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 12px;
  border-radius: 14px;
  border: 3px solid #4a200b;
  background: linear-gradient(180deg, #fad089 0%, #e5a14b 100%);
  box-shadow:
    inset 0 2px 0 #fff0c7,
    inset 0 -3px 0 #b36620,
    0 10px 24px rgba(22, 10, 4, 0.22);
  color: var(--ink);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, filter 0.15s ease;
}

/* 木牌按钮上半部分的凹陷浅色画窗（对标《星露谷》按钮里的内嵌插画框）。 */
.title-btn-window {
  display: grid;
  place-items: center;
  width: 100%;
  height: 68px;
  margin-bottom: 8px;
  border-radius: 9px;
  border: 2px solid #8c4a1e;
  background: linear-gradient(180deg, #d8effc 0%, #fff9eb 68%, #d7eec6 100%);
  box-shadow:
    inset 0 2px 5px rgba(74, 32, 11, 0.16),
    0 1px 0 rgba(255, 248, 226, 0.75);
}

.title-btn.is-primary {
  background: linear-gradient(180deg, #ffe28a 0%, #f5b038 100%);
  box-shadow:
    inset 0 2px 0 #fff9db,
    inset 0 -3px 0 #b86914,
    0 12px 28px rgba(42, 20, 10, 0.28);
}

.title-btn.is-primary .title-btn-window {
  background: linear-gradient(180deg, #b8e3ff 0%, #fff7d6 65%, #b8e49c 100%);
}

.title-btn:hover,
.title-btn:focus-visible {
  transform: translateY(-6px) scale(1.03);
  filter: brightness(1.05);
  box-shadow:
    inset 0 2px 0 #fff6d6,
    inset 0 -3px 0 #b36620,
    0 16px 32px rgba(22, 10, 4, 0.3);
}

.title-btn img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.title-btn:hover img {
  transform: scale(1.12);
}

.title-btn-label {
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.25;
  color: #421b08;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.7);
}

.title-btn small {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b3514;
  white-space: nowrap;
}

/* 首屏底部向下滚动引导条。 */
.title-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 214, 0.55);
  background: rgba(36, 20, 10, 0.58);
  color: #fff4dc;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(18, 10, 5, 0.2);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.title-scroll-cue:hover {
  background: rgba(36, 20, 10, 0.76);
  transform: translateY(-2px);
}

.title-scroll-cue i {
  font-style: normal;
  animation: cue-bounce 1.8s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* 开始菜单彩蛋粒子（点击树叶或铆钉飞出的蝴蝶与翠鸟）。 */
.title-easter-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.title-critter {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(20, 10, 5, 0.25));
  animation: critter-fly 4.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes critter-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  12% {
    opacity: 1;
    transform: translate(calc(var(--dx, 120px) * 0.15), -24px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 220px), var(--dy, -180px)) scale(0.9);
  }
}

/* 下方现代清爽卡片流：只保留羊皮纸/暖木配色，去掉像素边框。 */
.landing-body {
  display: grid;
  gap: 20px;
  padding-top: 12px;
  scroll-margin-top: 20px;
}

.clean-card {
  padding: 24px 26px;
  border-radius: 14px;
  border: 1px solid rgba(186, 120, 58, 0.34);
  background: rgba(255, 250, 240, 0.94);
  box-shadow:
    0 8px 28px rgba(68, 34, 14, 0.08),
    0 1px 3px rgba(68, 34, 14, 0.05);
}

/* 落地页底端漫游农场小径卡片 */
.farm-trail-card {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(255, 248, 230, 0.96) 0%, rgba(254, 238, 205, 0.92) 100%);
  border: 1.5px solid rgba(160, 100, 40, 0.28);
  box-shadow: 0 10px 32px rgba(42, 20, 10, 0.1);
}

.farm-trail-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.farm-trail-icon {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #f6c87e;
  border: 2px solid #5b2a12;
  box-shadow: 0 4px 10px rgba(42, 20, 10, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.farm-trail-text {
  flex: 1;
  min-width: 0;
}

.farm-trail-heading {
  font-family: var(--font-sans);
  font-size: 17.5px;
  font-weight: 700;
  color: #4a200b;
  margin-bottom: 4px;
}

.farm-trail-desc {
  font-size: 13.5px;
  color: #6e3b1b;
  line-height: 1.5;
  margin: 0;
}

.farm-trail-action {
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.clean-profile-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

.clean-avatar {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  border: 2px solid #c98849;
  background: linear-gradient(180deg, #9fd3ec 0 42%, #bfe3f2 42% 76%, #e3efe0 76%);
  box-shadow: 0 4px 12px rgba(91, 42, 18, 0.12);
  image-rendering: pixelated;
}

.clean-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.clean-card h2,
.clean-section-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.2rem, 20px);
  font-weight: 700;
  line-height: 1.35;
  color: #4a200b;
}

.clean-badge,
.clean-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 126, 56, 0.45);
  background: #ffebb8;
  color: #633012;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.clean-tag.is-green {
  border-color: rgba(88, 148, 76, 0.45);
  background: #e1f2d5;
  color: #265321;
}

.clean-lead {
  color: #5b2a12;
  margin-bottom: 10px;
}

.clean-status {
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #d98236;
  background: rgba(255, 232, 186, 0.52);
  color: #683516;
  font-size: 14px;
}

/* 首屏生活化状态挂件：四格“木屋里此刻在做什么”（V7 Task 28 / DESIGN §5） */
.now-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.now-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 143, 76, 0.26);
  background: rgba(255, 244, 222, 0.6);
}

.now-key {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
}

.now-body {
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #683516;
}

.now-body b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a200b;
}

/* 木屋工坊代表作卡片：寄语与造轮子叙事（V7 Task 28 / DESIGN §5 / CONTENT §4） */
.craft-motto {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: #7c421c;
  letter-spacing: 0.01em;
}

.craft-why,
.craft-note {
  margin: 0 0 8px;
  color: #633418;
  font-size: 14px;
  line-height: 1.68;
}

.craft-why b,
.craft-note b {
  color: #4a200b;
}

.clean-actions,
.clean-mini-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.clean-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(180, 112, 50, 0.48);
  background: #fff6e4;
  color: #5b2a12;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.clean-btn:hover,
.clean-btn:focus-visible {
  background: #ffe6b8;
  border-color: #9e5924;
}

.clean-btn.is-solid {
  border-color: #7c3f18;
  background: #f5b864;
  color: #3d1907;
}

.clean-btn.is-solid:hover,
.clean-btn.is-solid:focus-visible {
  background: #ffca7a;
}

/* 简历（CV）下载：首页简介卡与关于页顶部共用，一眼可见的一键取用。 */
.clean-btn.is-cv {
  border-color: #7c3f18;
  background: linear-gradient(180deg, #ffd98f 0%, #f5b864 100%);
  color: #3d1907;
  font-weight: 700;
}

.clean-btn.is-cv:hover,
.clean-btn.is-cv:focus-visible {
  background: #ffca7a;
}

/* 关于页顶部的简历行：木框按钮放大加粗，说明字随面板配色自动适应昼夜。 */
.cv-download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--px) calc(4 * var(--px));
  margin-bottom: calc(4 * var(--px));
}

.cv-download-row .btn.is-cv {
  padding: calc(2 * var(--px)) calc(6 * var(--px));
  font-weight: 700;
}

.cv-note {
  margin: 0;
  opacity: 0.75;
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.92rem, 14px);
}

.clean-section {
  display: grid;
  gap: 12px;
}

.clean-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.clean-card .clean-section-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 143, 76, 0.28);
}

.clean-more {
  color: #7c421c;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.clean-more:hover { text-decoration: underline; }

.clean-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.clean-project {
  display: flex;
  flex-direction: column;
}

.clean-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.clean-meta {
  font-size: 12.5px;
  color: #824d29;
}

.clean-project h3 {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #4a200b;
}

.clean-project p {
  color: #633418;
  font-size: 14.5px;
  line-height: 1.68;
}

.clean-project .clean-actions {
  margin-top: auto;
  padding-top: 14px;
}

.clean-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.clean-list-item,
.clean-log-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 143, 76, 0.26);
  background: rgba(255, 241, 214, 0.55);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.clean-list-item:hover {
  background: rgba(255, 228, 178, 0.72);
  border-color: rgba(180, 112, 50, 0.48);
}

.clean-date {
  font-size: 12px;
  font-weight: 600;
  color: #87502a;
}

.clean-list-item strong {
  font-size: 15px;
  color: #4a200b;
}

.panel h2 {
  margin: 0 0 calc(2 * var(--px));
  padding-bottom: var(--px);
  border-bottom: var(--px) solid var(--line);
}

.panel p + p { margin-top: calc(3 * var(--px)); }

.panel section + section { margin-top: calc(8 * var(--px)); }

/* 标题一行：左标题，右边浅色的日期之类。 */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 calc(6 * var(--px));
  margin-bottom: calc(4 * var(--px));
}

.stamp {
  color: var(--ink-soft);
  /* 状态戳可能很长（比如跨设备剪贴板的说明），必须能折行：
     否则 nowrap 的最小内容宽度会把 grid 列撑出纸外，整页横向晃。 */
  white-space: normal;
}

.back {
  display: inline-block;
  margin-bottom: calc(2 * var(--px));
  color: var(--ink-soft);
  text-decoration: none;
}

.back:hover { text-decoration: underline; }

/* 空状态：一个凹格，字居中。可以带一个物件图。 */
.empty img {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin: 0 auto calc(2 * var(--px));
  image-rendering: pixelated;
}

.empty {
  padding: calc(4 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  color: var(--ink-soft);
  text-align: center;
  image-rendering: pixelated;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(4 * var(--px));
  margin-top: calc(5 * var(--px));
}

/* 小木牌按钮。 */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0 calc(3 * var(--px));
  border-style: solid;
  border-width: calc(4 * var(--px));
  border-image: url("../img/ui-button.png") 4 fill / calc(4 * var(--px)) stretch;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  image-rendering: pixelated;
}

.btn:hover { filter: brightness(1.06); }

.btn:active {
  border-image-source: url("../img/ui-button-down.png");
  transform: translateY(var(--px));
}

.btn:disabled {
  border-image-source: url("../img/ui-button-off.png");
  color: var(--ink-soft);
  filter: none;
  transform: none;
  cursor: not-allowed;
}

.hint {
  margin-top: calc(2 * var(--px));
  color: var(--ink-soft);
}

/* 联系页：地址和抄下按钮一行。 */
.copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--px)) calc(6 * var(--px));
}

/* 邮箱一整串 27 个字符没有断行机会，窄屏要允许在字符间断开，不然整行被撑出卡片。 */
.copy-row a[data-copy-text] { overflow-wrap: anywhere; }

/* 关于页：左边人像，右边名牌一样的几行。 */
.character {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(10 * var(--px));
  align-items: start;
}

.profile-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--px));
}

.greet {
  margin-bottom: calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  image-rendering: pixelated;
}

/* 一行一条：履历、关于页的几行、流水、笔记目录都用它。 */
.rows {
  display: grid;
  gap: calc(2 * var(--px));
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  gap: calc(6 * var(--px));
  padding: var(--px) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  image-rendering: pixelated;
}

.row-key {
  flex: none;
  min-width: 5em;
  color: var(--ink-soft);
}

/* 整行是链接的时候（笔记目录）。 */
a.row {
  text-decoration: none;
}

a.row:hover { background-color: var(--menu-deep); }

.row-note {
  color: var(--ink-soft);
}

/* 任务日志：近况、流水的一行，左边一个小纸卷。信箱：笔记目录的一行，左边一个信封。
   图标钉在行首的左边距里，对齐第一行字；后面的字怎么折行都不挤它。 */
.quest,
.mail {
  position: relative;
  padding-left: calc(17 * var(--px));
}

.quest::before,
.mail::before {
  --h: calc(9 * var(--px));
  content: "";
  position: absolute;
  left: calc(4 * var(--px));
  top: calc(var(--px) + (var(--fs) * var(--lh) - var(--h)) / 2);
  width: calc(10 * var(--px));
  height: var(--h);
  background: url("../img/icon-quest.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.mail::before {
  --h: calc(8 * var(--px));
  width: calc(11 * var(--px));
  background-image: url("../img/icon-contact.png");
}

/* 状态标签：一定写字，颜色只是辅助。 */
.tag {
  flex: none;
  align-self: center;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--focus);
  background: #ffd34d;
  color: var(--focus);
  line-height: calc(14 * var(--px));
  white-space: nowrap;
}

.tag[data-status="stuck"] { background: #f09a84; }
.tag[data-status="done"] { background: #9fd47a; }
.tag[data-status="shelved"] { background: #d8ccb6; }

.entry-link {
  margin-left: auto;
  white-space: nowrap;
}

/* 流水按月：当月展开，更早的折起来。 */
.month + .month { margin-top: calc(6 * var(--px)); }

.month summary {
  padding: var(--px) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--menu-deep) padding-box;
  list-style: none;
  cursor: pointer;
  image-rendering: pixelated;
}

.month summary::-webkit-details-marker { display: none; }

.month summary::before { content: "＋ "; }

.month[open] summary::before { content: "－ "; }

.month[open] summary { margin-bottom: calc(2 * var(--px)); }

/* 作品：一个项目一条，左边一格放物件。 */
.bundle {
  display: grid;
  grid-template-columns: calc(18 * var(--px)) 1fr;
  gap: calc(6 * var(--px));
  align-items: start;
  scroll-margin-top: calc(10 * var(--px));
}

.bundle + .bundle { margin-top: calc(6 * var(--px)); }

.bundle h2 {
  border: 0;
  padding: 0;
}

.bundle-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--px));
  margin-top: calc(2 * var(--px));
}

/* 格子里的物件和提示框。提示框是缩小的木框：名字、浅色类别、一句说明。 */
.item {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.slot img {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  image-rendering: pixelated;
}

.tip {
  position: absolute;
  left: 50%;
  /* 往下弹：往上会被压在边框上的当前页签挡住。 */
  top: calc(100% + 2 * var(--px));
  z-index: 5;
  display: none;
  width: max-content;
  max-width: calc(160 * var(--px));
  padding: 0 calc(2 * var(--px));
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab.png") 5 fill / calc(5 * var(--px)) stretch;
  transform: translateX(-50%);
  text-align: left;
  image-rendering: pixelated;
}

.tip b {
  display: block;
  font-weight: normal;
}

.tip small {
  display: block;
  color: var(--ink-soft);
  font-size: inherit;
}

/* EDC 装备 RPG 属性词条（V7 Task 28 / CONTENT §3）：羊皮纸上的一行小字加成 */
.tip-stats {
  display: block;
  margin: calc(1 * var(--px)) 0;
  color: #a4551c;
  font-size: inherit;
  line-height: 1.5;
}

.slot:hover .tip,
.slot:focus-within .tip { display: block; }

/* 靠边的格子，提示框往里靠，不出框。 */
.bag .slot:nth-child(12n + 1) .tip,
.bag .slot:nth-child(12n + 2) .tip {
  left: 0;
  transform: none;
}

.bag .slot:nth-child(12n) .tip,
.bag .slot:nth-child(12n + 11) .tip {
  left: auto;
  right: 0;
  transform: none;
}

/* ---------------------------------------------------------------- 告示牌：本人自己记截止日期 */

/* 木框里铺横木板。纸片、便条用图钉钉在上面，字直接写在木板上时用奶油色加错位阴影。 */
.board {
  position: relative;
  z-index: 1;
  padding: calc(4 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px));
  border-style: solid;
  border-width: calc(8 * var(--px));
  border-image: url("../img/ui-board.png") 8 / calc(8 * var(--px)) stretch;
  background: #a5592a url("../img/board-planks.png") 0 0 / calc(48 * var(--px)) calc(24 * var(--px)) padding-box;
  image-rendering: pixelated;
}

.board .stamp,
.note-group h3,
.drawer > summary {
  color: var(--cream);
  text-shadow: var(--px) var(--px) 0 var(--shadow);
}

/* 木板上不垫纸的说明字（钉便签引导语、离线工作台状态）：
   农场木板用奶油色，落地页夜间深卡片用夜色，别让纸墨色压进深底里。 */
html[data-theme="farm"] .board .board-pin-guide,
html[data-theme="farm"] .board .pwa-tools .hint {
  color: var(--cream);
  text-shadow: var(--px) var(--px) 0 var(--shadow);
}

html[data-phase="night"]:not([data-theme="farm"]) .board .board-pin-guide,
html[data-phase="night"]:not([data-theme="farm"]) .board .pwa-tools .hint {
  color: rgba(230, 238, 245, 0.78);
  text-shadow: none;
}

.board .page-head { margin-bottom: calc(3 * var(--px)); }

/* 钉在木板上的纸：和信纸同一种毛边、纤维，顶上正中一颗灰图钉。 */
.sheet {
  position: relative;
  padding: calc(3 * var(--px)) calc(5 * var(--px)) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(6 * var(--px));
  border-image: url("../img/ui-letter.png") 6 / calc(6 * var(--px)) repeat;
  background: #ffefc9 url("../img/paper-grain.png") 0 0 / calc(16 * var(--px)) padding-box;
  filter: drop-shadow(calc(2 * var(--px)) calc(2 * var(--px)) 0 rgb(20 10 5 / 0.45));
  image-rendering: pixelated;
}

.sheet::before {
  content: "";
  position: absolute;
  top: calc(-5 * var(--px));
  left: calc(50% - 3 * var(--px));
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("../img/pin-gray.png") 0 0 / 100% 100%;
}

/* 一格可以写字的凹槽：输入框、日期、钟点都用它。 */
.field {
  min-width: 0;
  padding: 0 calc(2 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  border-radius: 0;
  background: var(--slot) padding-box;
  color: var(--ink);
  font: inherit;
  line-height: var(--lh);
  image-rendering: pixelated;
}

.field::placeholder { color: var(--ink-soft); }

/* 钉一张：一句话、日子、钟点、钉上、私密。 */
.pin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: calc(2 * var(--px));
  align-items: stretch;
}

.pin-hint {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}

.scratchpad {
  display: grid;
  gap: calc(2 * var(--px));
  margin-bottom: calc(4 * var(--px));
}

.scratchpad .page-head {
  margin-bottom: 0;
}

.scratchpad h2 {
  margin: 0;
  color: var(--ink);
  text-shadow: none;
}

.scratchpad .stamp {
  color: var(--ink-soft);
  text-shadow: none;
}

.scratchpad-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--px) calc(2 * var(--px));
}

.scratchpad-chip {
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--line);
  background: var(--slot);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.85rem, 13px);
  line-height: 1.5;
  cursor: pointer;
}

.scratchpad-chip:hover {
  background: var(--menu-deep);
}

.scratchpad textarea,
[data-log-form] textarea {
  width: 100%;
  min-height: calc(36 * var(--px));
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  resize: vertical;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.02rem, 16px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
  image-rendering: auto;
}

[data-log-form] {
  display: grid;
  gap: calc(2 * var(--px));
}

.log-del {
  margin-left: auto;
  padding: 0 var(--px);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.log-del:hover { text-decoration: underline; }

.scratchpad-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--px));
  margin: 0;
}

.scratchpad-tip {
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.85rem, 13px);
  color: var(--ink-soft);
}

.scratchpad-btns {
  display: flex;
  gap: calc(2 * var(--px));
  margin-left: auto;
}

.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--px)) calc(6 * var(--px));
  margin-bottom: calc(4 * var(--px));
}

.board-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(2 * var(--px)) calc(4 * var(--px));
}

.board-head-main h1 {
  margin: 0;
}

.board-head-tools {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.board-check {
  display: inline-flex;
  align-items: center;
  gap: var(--px);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.board-check input {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  margin: 0;
  accent-color: var(--ink);
}

.board .board-auto-open {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  margin: 0;
  background: rgba(35, 18, 10, 0.55);
  border: var(--px) solid rgba(220, 180, 130, 0.45);
  border-radius: calc(2 * var(--px));
  box-sizing: border-box;
  max-width: 100%;
  color: var(--cream);
  text-shadow: var(--px) var(--px) 0 var(--shadow);
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.88rem, 13px);
  line-height: 1.35;
  white-space: normal;
}

.pin-form .board-check {
  align-self: center;
}

.note-private {
  color: var(--ink-soft);
}

.board-body {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
  grid-template-areas: "cal notes";
  gap: calc(6 * var(--px));
  align-items: start;
  margin-top: calc(7 * var(--px));
}

.notes { grid-area: notes; }

.notes .empty { margin-top: calc(2 * var(--px)); }

/* 日历：一张钉上去的月历。今天描深框，过去的日子发灰，有事的日子插图钉。 */
/* 宽屏时便条长，日历跟着往下滚，一直看得到。 */
.cal {
  position: sticky;
  top: calc(4 * var(--px));
  z-index: 2;
  grid-area: cal;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(2 * var(--px));
}

.panel .cal-head h2 {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  margin: 0;
  padding: 0;
  border: 0;
}

.cal-season {
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  background: url("../img/season-autumn.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.cal-season[data-cal-season="spring"] { background-image: url("../img/season-spring.png"); }
.cal-season[data-cal-season="summer"] { background-image: url("../img/season-summer.png"); }
.cal-season[data-cal-season="winter"] { background-image: url("../img/season-winter.png"); }

.cal-step {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  border: 0;
  background: url("../img/ui-pointer.png") 50% 50% / calc(7 * var(--px)) no-repeat;
  cursor: pointer;
  image-rendering: pixelated;
}

.cal-step:hover { background-color: var(--slot); }

.cal-step[data-step="-1"] { transform: scaleX(-1); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--px);
  padding: 0;
  list-style: none;
}

.cal-week {
  margin-bottom: var(--px);
  color: var(--ink-soft);
  text-align: center;
}

.cal-days li { position: relative; }

.day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: calc(19 * var(--px));
  padding: var(--px) calc(2 * var(--px)) calc(2 * var(--px));
  border: var(--px) solid #d9b57e;
  background: #fff7e2;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.day:hover { background: var(--slot); }

/* 过去的日子发灰，像翻过去的页。 */
.day.is-past {
  background: #ecdcbc;
  color: var(--ink-soft);
}

.day[aria-current="date"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--ink);
}

.day.is-picked { background: var(--menu-deep); }

.day-n { line-height: 1; }

.day-pins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.day-pins i {
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  margin-right: calc(-2 * var(--px));
  background: url("../img/pin-gray.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

.cal-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(2 * var(--px));
}

.cal-today {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

.cal-today:hover,
.note-tools button:hover,
.toast button:hover { text-decoration: underline; }

/* 日历格子的提示框：哪天、几件事。靠两头的往里靠。 */
.cal-days li:hover .tip,
.cal-days li:focus-within .tip { display: block; }

.cal-days .tip small { color: var(--ink); }

.cal-days li:nth-child(7n + 1) .tip,
.cal-days li:nth-child(7n + 2) .tip {
  left: 0;
  transform: none;
}

.cal-days li:nth-child(7n) .tip,
.cal-days li:nth-child(7n + 6) .tip {
  left: auto;
  right: 0;
  transform: none;
}

/* 便条：按急不急分组，图钉颜色跟着变，倒数一定写字。 */
.note-group + .note-group { margin-top: calc(5 * var(--px)); }

.note-group h3 { margin-bottom: calc(2 * var(--px)); }

.note-list {
  display: grid;
  gap: calc(4 * var(--px));
  padding: 0;
  list-style: none;
}

.note {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(3 * var(--px));
  align-items: start;
  padding: calc(3 * var(--px)) calc(3 * var(--px)) calc(2 * var(--px));
  border: var(--px) solid #c99a5a;
  background: #ffefc9 url("../img/paper-grain.png") 0 0 / calc(16 * var(--px));
  box-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 rgb(20 10 5 / 0.45);
  image-rendering: pixelated;
}

.note::before {
  content: "";
  position: absolute;
  top: calc(-4 * var(--px));
  left: calc(50% - 3 * var(--px));
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  background: url("../img/pin-gray.png") 0 0 / 100% 100%;
}

.note[data-due="late"]::before,
.day-pins [data-pin="red"] { background-image: url("../img/pin-red.png"); }
.note[data-due="today"]::before,
.day-pins [data-pin="orange"] { background-image: url("../img/pin-orange.png"); }
.note[data-due="soon"]::before,
.day-pins [data-pin="gold"] { background-image: url("../img/pin-gold.png"); }
.note[data-due="later"]::before,
.day-pins [data-pin="green"] { background-image: url("../img/pin-green.png"); }

/* 左边一个小凹格，点一下就算做完；指上去先露出勾。 */
.note-check {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  margin-top: calc(1 * var(--px));
  padding: 0;
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  cursor: pointer;
  image-rendering: pixelated;
}

.note-check:hover,
.note-check:focus-visible {
  background: url("../img/ui-tick.png") 50% 50% / calc(7 * var(--px)) no-repeat, var(--menu-deep) padding-box;
}

.note-title { overflow-wrap: anywhere; }

.panel .note-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 calc(3 * var(--px));
  margin-top: 0;
  color: var(--ink-soft);
}

.due {
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--focus);
  background: #c7e6a8;
  color: var(--focus);
  line-height: calc(14 * var(--px));
  white-space: nowrap;
}

.due[data-due="late"] { background: #f09a84; }
.due[data-due="today"] { background: #ffb65c; }
.due[data-due="soon"] { background: #ffd34d; }
.due[data-due="none"] { background: #d8ccb6; }

.note-tools {
  display: flex;
  gap: calc(2 * var(--px));
}

.note-tools button,
.toast button {
  padding: 0 var(--px);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

/* 改便条：同一张纸上换成小表单。 */
.note.is-editing { grid-template-columns: minmax(0, 1fr); }

.note-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(2 * var(--px));
}

.note-edit .field:first-child,
.note-edit-actions { grid-column: 1 / -1; }

.note-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(3 * var(--px));
}

/* 做完的、钥匙：木板底下两个抽屉。 */
.drawer { margin-top: calc(7 * var(--px)); }

.drawer + .drawer { margin-top: calc(4 * var(--px)); }

.drawer > summary {
  list-style: none;
  cursor: pointer;
}

.drawer > summary::-webkit-details-marker { display: none; }

.drawer > summary::before { content: "＋ "; }

.drawer[open] > summary::before { content: "－ "; }

.drawer[open] > summary { margin-bottom: calc(3 * var(--px)); }

.done-row {
  align-items: center;
  justify-content: space-between;
}

.done-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(4 * var(--px));
}

.key ol {
  margin: calc(2 * var(--px)) 0;
  padding-left: 1.2em;
}

.key-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(2 * var(--px)) calc(4 * var(--px));
  align-items: center;
  margin-top: calc(4 * var(--px));
}

.key-actions {
  display: flex;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.panel .key-actions { margin-top: calc(2 * var(--px)); }

/* 刚做的事和「放回」：浮在屏幕底下，几秒后自己收起。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(6 * var(--px));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  width: max-content;
  max-width: calc(100% - 12 * var(--px));
  padding: 0 calc(3 * var(--px));
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab.png") 5 fill / calc(5 * var(--px)) stretch;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.toast button {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- 首页像素小游戏弹窗 */

.game-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: calc(8 * var(--px)) calc(4 * var(--px));
  overflow-y: auto;
  background: rgba(18, 14, 10, 0.42);
  animation: game-fade-in 200ms ease-out both;
}

.game-modal {
  position: relative;
  width: min(100%, calc(360 * var(--px)));
  margin: auto;
  animation: game-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes game-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes game-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes game-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.game-nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--px));
  margin-bottom: calc(3 * var(--px));
}

.game-nav button {
  padding: var(--px) calc(3 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  color: var(--ink-soft);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.25;
  cursor: pointer;
  image-rendering: pixelated;
}

.game-nav button:hover,
.game-nav button:focus-visible {
  color: var(--ink);
  filter: brightness(1.06);
}

.game-nav button.is-active {
  background-color: var(--menu-deep);
  color: var(--focus);
  box-shadow: inset 0 0 0 var(--px) var(--focus);
}

.game-screen {
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: #1c1524 padding-box;
  image-rendering: pixelated;
}

.game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  image-rendering: pixelated;
}

.game-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--px) calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  background: rgba(22, 14, 10, 0.72);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.25;
  text-shadow: var(--px) var(--px) 0 var(--shadow);
  pointer-events: none;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(6 * var(--px));
  background: rgba(18, 12, 8, 0.56);
  pointer-events: none;
  animation: game-fade-in 180ms ease-out both;
}

.game-card {
  width: min(100%, calc(250 * var(--px)));
  padding: calc(4 * var(--px)) calc(5 * var(--px));
  border-style: solid;
  border-width: calc(5 * var(--px));
  border-image: url("../img/ui-tab.png") 5 fill / calc(5 * var(--px)) stretch;
  color: var(--ink);
  text-align: center;
  overflow-wrap: break-word;
  pointer-events: auto;
  image-rendering: pixelated;
  animation: game-card-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.game-card canvas {
  display: block;
  width: calc(36 * var(--px));
  height: calc(24 * var(--px));
  margin: 0 auto calc(2 * var(--px));
  image-rendering: pixelated;
}

.panel .game-card-title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.35;
}

.panel .game-card-sub {
  margin: var(--px) 0 0;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.95rem, 15px);
  line-height: 1.55;
  white-space: pre-line;
}

.panel .game-card-badge {
  display: inline-block;
  margin-top: calc(2 * var(--px));
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--focus);
  background: #ffd34d;
  color: var(--focus);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.3;
}

/* 瓶中信（V7 Task 29）：钓鱼结算卡里追加的一行访客留痕，sans 阅读字体。 */
.panel .game-card-bottle {
  margin: calc(2 * var(--px)) 0 0;
  padding-top: calc(2 * var(--px));
  border-top: var(--px) dashed rgba(124, 54, 17, 0.5);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 0.88rem, 14px);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- 篝火打卡册（V7 Task 29，SPEC §7） */

.guestbook-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: calc(6 * var(--px)) calc(4 * var(--px));
  overflow-y: auto;
  background: rgba(18, 14, 10, 0.42);
  animation: game-fade-in 200ms ease-out both;
}

.guestbook-panel {
  width: min(100%, calc(320 * var(--px)));
  max-height: min(82vh, 640px);
  overflow-y: auto;
  padding: calc(5 * var(--px)) calc(6 * var(--px));
  border-style: solid;
  border-width: calc(8 * var(--px));
  border-image: url("../img/ui-menu.png") 8 / calc(8 * var(--px)) stretch;
  background: #ffe9bd padding-box;
  color: var(--ink);
  image-rendering: pixelated;
  animation: game-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.guestbook-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--px));
}

.guestbook-head h2 {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-pixel);
  font-size: calc(14px * var(--px, 1));
  line-height: 1.3;
}

.guestbook-close {
  flex: none;
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  border: calc(2 * var(--px)) solid #7c3611;
  background: #d9772f;
  color: #fff4dc;
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1;
  cursor: pointer;
}

.guestbook-close:hover { background: #ffb65c; }

.guestbook-form {
  display: grid;
  gap: calc(3 * var(--px));
  margin-top: calc(3 * var(--px));
}

.guestbook-badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--px));
}

.guestbook-badge-btn {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  border: calc(2 * var(--px)) solid transparent;
  border-radius: calc(2 * var(--px));
  background: transparent;
  font-size: calc(10 * var(--px));
  line-height: 1;
  cursor: pointer;
}

.guestbook-badge-btn:hover,
.guestbook-badge-btn:focus-visible {
  border-color: rgba(124, 54, 17, 0.45);
  background: rgba(255, 244, 220, 0.7);
}

.guestbook-badge-btn.is-picked {
  border-color: #7c3611;
  background: #ffd34d;
}

.guestbook-input {
  width: 100%;
  padding: calc(2 * var(--px)) calc(3 * var(--px));
  border: calc(2 * var(--px)) solid #c9874a;
  border-radius: calc(2 * var(--px));
  background: #fff6e4;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1rem, 16px);
  line-height: 1.6;
  resize: vertical;
}

.guestbook-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--px));
}

.guestbook-hint {
  flex: 1 1 12em;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.85rem, 13.5px);
  line-height: 1.5;
}

.guestbook-list {
  display: grid;
  gap: calc(3 * var(--px));
  margin: calc(3 * var(--px)) 0 0;
  padding: 0;
  list-style: none;
}

.guestbook-item {
  padding: calc(3 * var(--px));
  border: calc(2 * var(--px)) solid rgba(201, 135, 74, 0.55);
  border-radius: calc(2 * var(--px));
  background: rgba(255, 246, 228, 0.8);
}

.guestbook-item-head {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  margin: 0 0 var(--px);
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.3;
}

.guestbook-item-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 0.95rem, 15px);
  line-height: 1.6;
  overflow-wrap: break-word;
}

.guestbook-empty {
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.9rem, 14.5px);
  line-height: 1.6;
}

.game-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--px));
  margin-top: calc(4 * var(--px));
}

.panel .game-status {
  flex: 1 1 12em;
  min-width: 0;
  margin: 0;
  font-family: var(--font-pixel);
  font-size: var(--fs);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.game-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(2 * var(--px));
  margin-left: auto;
}

.game-action,
.game-sub {
  flex: none;
  touch-action: none;
  user-select: none;
}

.game-bag {
  grid-template-columns: repeat(auto-fit, calc(18 * var(--px)));
  margin-top: calc(2 * var(--px));
}

.game-bag .slot {
  cursor: pointer;
}

.game-bag .slot.is-selected {
  background-color: var(--menu-deep);
  box-shadow: inset 0 0 0 var(--px) var(--focus);
}

.game-bag .slot canvas {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  image-rendering: pixelated;
}

.panel .game-detail {
  margin-top: calc(3 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  border-style: solid;
  border-width: calc(2 * var(--px));
  border-image: url("../img/ui-slot.png") 2 / calc(2 * var(--px)) stretch;
  background: var(--slot) padding-box;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.96rem, 15px);
  line-height: 1.6;
  text-align: center;
  overflow-wrap: break-word;
  image-rendering: pixelated;
}

.is-gaming .stage,
.is-gaming .walk-peep {
  visibility: hidden;
}

/* ---------------------------------------------------------------- 页脚 */

.credit {
  position: relative;
  z-index: 1;
  width: min(100% - 12 * var(--px), calc(460 * var(--px)));
  margin: auto auto 0;
  padding: calc(4 * var(--px)) 0 calc(6 * var(--px));
  color: var(--cream);
  text-align: center;
  text-shadow: var(--px) var(--px) 0 var(--shadow);
}

/* 世界只压暗一点，页脚导航和声明垫一块暗底并拉开主次层级。 */
.credit p {
  display: table;
  margin: 0 auto;
  padding: var(--px) calc(3 * var(--px));
  background: var(--dim);
}

.credit p:has(a) {
  border: var(--px) solid rgba(255, 241, 214, 0.28);
}

.credit p:not(:has(a)) {
  color: rgba(255, 241, 214, 0.78);
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.82rem, 13px);
  line-height: 1.5;
}

.credit p + p { margin-top: calc(1.5 * var(--px)); }

.credit a {
  display: inline-block;
  padding: 0 0.45em;
  text-decoration: none;
  white-space: nowrap;
}

.credit a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 焦点 */

:focus-visible {
  outline: var(--px) solid var(--focus);
  outline-offset: var(--px);
}

.credit :focus-visible,
.skip:focus-visible,
.drawer > summary:focus-visible { outline-color: var(--cream); }

:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- 换页：站内换页和跨页过渡 */

/* 世界、右上角面板、页签留在原地；菜单在内页之间就地换内容、木框的大小顺着变，从农场进出时浮起或落下。
   站内换页（js/nav.js）用同一套名字做页内过渡；整页打开时用跨页过渡。浏览器都不支持时，照常换页。 */
@view-transition {
  navigation: auto;
}

.world { view-transition-name: world; }
.hud { view-transition-name: hud; }
.dialogue { view-transition-name: dialogue; }
.menu-wrap { view-transition-name: menu; }
.tabs { view-transition-name: tabs; }
.credit { view-transition-name: credit; }

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-new(menu):only-child,
::view-transition-new(tabs):only-child,
::view-transition-new(dialogue):only-child {
  animation: panel-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

::view-transition-old(menu):only-child,
::view-transition-old(tabs):only-child,
::view-transition-old(dialogue):only-child {
  animation: panel-out 180ms ease-in both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes panel-out {
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------------------------------------------------------------- 中屏 */

@media (min-width: 1800px) {
  :root {
    --px: 3px;
    --fs: 36px;
    --wpx: 4px;
  }
}

@media (max-width: 960px) {
  :root { --wpx: 2px; }

  /* 手机页脚折成好几行：小木牌改钉在舞台左下，正好停在页脚上面。 */
  .stage { position: relative; }

  .walk-peep { position: absolute; }

  .title-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clean-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 告示牌放不下两栏：便条在上，日历在下。 */
  .board-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "notes" "cal";
  }

  .cal { position: relative; }
}

/* 夜间落地页：深蓝天幕上的栏目标题与「全部 →」链接提亮为奶油色。
   不限定 .clean-section 直系：首页的笔记/日常区块没有这个类，夜间同样要亮。 */
html[data-phase="night"] .clean-section-head h2,
html[data-phase="night"] .clean-section-head .clean-more {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(10, 14, 28, 0.75);
}

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
  }

  .landing-wrap {
    width: calc(100% - 16px);
    margin: 4px auto 16px;
  }

  .title-plaque {
    padding: 16px 14px 14px;
    max-width: calc(100vw - 20px);
  }

  .title-main {
    font-size: clamp(34px, 9.5vw, 56px);
  }

  .title-sub-plaque {
    padding: 6px 12px;
    font-size: clamp(11.5px, 3.4vw, 13.5px);
    max-width: calc(100vw - 24px);
  }

  .farm-cabin-entrance-btn {
    padding: 6px 14px;
    font-size: 13px;
  }

  .hud {
    padding: 6px 10px 0;
  }

  html:not([data-theme="farm"]) .hud-box,
  html[data-theme="landing"] .hud-box {
    padding: 2px 10px 2px 4px;
    font-size: 12px;
    gap: 6px;
  }

  html:not([data-theme="farm"]) .hud-lines,
  html[data-theme="landing"] .hud-lines {
    font-size: 12px;
  }

  html:not([data-theme="farm"]) .menu-wrap {
    width: calc(100% - 16px);
    margin: 10px auto 24px;
  }

  html:not([data-theme="farm"]) .panel.menu,
  html:not([data-theme="farm"]) .panel.letter,
  html:not([data-theme="farm"]) .panel.board {
    padding: 18px 14px;
    border-radius: 16px;
  }

  html:not([data-theme="farm"]) .tabs {
    padding: 3px 6px;
    max-width: calc(100% - 16px);
  }

  html:not([data-theme="farm"]) .tabs a {
    font-size: 12.5px;
    padding: 5px 10px;
  }

  .title-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .title-btn.is-primary {
    grid-column: 1 / -1;
  }

  .clean-card {
    padding: 18px 16px;
  }

  .clean-profile-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .clean-title-row,
  .clean-profile .clean-actions {
    justify-content: center;
  }

  .clean-status {
    text-align: left;
  }

  .now-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

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

  .dialogue-face {
    order: -1;
    align-self: start;
    margin-bottom: calc(-4 * var(--px));
  }

  .dialogue-face .portrait-box { display: none; }

  .character { grid-template-columns: 1fr; justify-items: center; }

  .character-info { justify-self: stretch; }

  .bag { grid-template-columns: repeat(6, calc(18 * var(--px))); }

  .bag .slot:nth-child(6n + 1) .tip {
    left: 0;
    right: auto;
    transform: none;
  }

  .bag .slot:nth-child(6n) .tip {
    left: auto;
    right: 0;
    transform: none;
  }

  .menu { padding: calc(5 * var(--px)) calc(3 * var(--px)); }

  .letter { padding: calc(5 * var(--px)) calc(4 * var(--px)) calc(6 * var(--px)); }

  .board { padding: calc(3 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)); }

  .sheet { padding: calc(2 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px)); }

  /* 手机上：第一行一句话加「钉上」，第二行日期和钟点各占一半。 */
  .pin-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }

  .pin-title { grid-column: 1 / 4; }

  .pin-form .btn {
    grid-column: 4;
    grid-row: 1;
  }

  .pin-form [type="date"] { grid-column: 1 / 3; }

  .pin-form [type="time"] { grid-column: 3 / 5; }

  .pin-form .board-check { grid-column: 1 / -1; }

  .board-head {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(2 * var(--px));
  }

  .board-head-tools {
    width: 100%;
  }

  .board .board-auto-open {
    width: 100%;
    margin: calc(1 * var(--px)) 0 calc(2 * var(--px));
    padding: calc(2 * var(--px)) calc(3 * var(--px));
  }

  .day {
    min-height: calc(17 * var(--px));
    padding: var(--px);
  }

  .day-pins i { margin-right: calc(-3 * var(--px)); }

  .row { flex-wrap: wrap; gap: 0 calc(4 * var(--px)); }

  /* 手机上六个页签放不下字：只留图标，字留给读屏。页标题在纸卷上写着。 */
  .tabs { padding-left: calc(3 * var(--px)); }

  .tabs a {
    min-width: calc(17 * var(--px));
    padding-bottom: calc(2 * var(--px));
  }

  .tabs span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .close {
    top: calc(-11 * var(--px));
    right: calc(-6 * var(--px));
  }
}


/* 横过来的手机、或者很矮的窗口：选项排两栏、边距收一点，一屏放得下不用滚。 */
@media (max-height: 540px) {
  .stage { padding: calc(3 * var(--px)) calc(4 * var(--px)) 0; }

  /* 矮屏漫游态下天色面板浮在农场上空，不占正文的竖向空间。 */
  .home.is-farm-mode .hud {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }

  .choices {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(8 * var(--px));
  }

  /* 矮屏上把行高压一点：字号不动，一屏才放得下整段对话加页脚。 */
  .dialogue-text { padding: calc(2 * var(--px)) calc(4 * var(--px)); }

  .dialogue-line, .choices a, .choices button, .walk-hint { line-height: 1.25; }

  .walk-hint { margin-top: var(--px); }

  .credit { padding: var(--px) 0 calc(2 * var(--px)); }
}

/* ---------------------------------------------------------------- 减少动效 */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}