/* ═══════════════════════════════════════════════════════════════════════════
   🎨 web/theme.css —— 鸽邮「主题层」token（正式游戏要引用的那一层）
   ───────────────────────────────────────────────────────────────────────────

   这是什么：整款游戏的**一套 CSS 变量**。色板 / 圆角 / 阴影 / 描边 / 间距 /
             字号 / **动效时长与缓动** 全在这里，组件只吃 token，不写死值。

   谁引用：web/index.html（正式游戏本体）· web/motion-demo.html（动效样张）
           · web/theme-preview.html（色板对照）。三者共用这一份，改一处全局生效。

   怎么切主题：<html data-theme="journal">  ←→ 不带属性（= 现状暗黑风，默认）
               · 不带属性 = 暗黑风（值 = style.css 原样，**默认观感一个像素都不变**）
               · data-theme="dark"    = 暗黑风（显式写法，将来当「夜间模式」用）
               · data-theme="journal" = 手账清新（甲方 2026-10-03 拍板的主线基准）
               URL：?theme=journal / ?theme=dark，localStorage 记住选择。

   怎么切动效：<html data-motion="off|weak|standard|lively">（默认 standard）
               —— 只改「强度乘子」和「交错步长」，不动曲线。

   ⚠️ 纪律：这里只放 **token**。组件的动效规则在 web/motion.css，别写进本文件。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ ① 默认档：暗黑风（= 现状，与 web/style.css 的 :root 逐字一致） ═══════════ */
:root{
  /* 色板 */
  --ocean:#26608a; --ocean-dk:#1d4676;
  --bg:#161c28; --bg2:#20283a; --bg3:#2c374e; --bg4:#3a4761;
  --line:#3c4860; --line2:#4e5d78;
  --text:#e8eef6; --dim:#8fa0b8; --dim2:#6b7c96;
  --accent:#f5be46; --accent2:#ee7468; --ok:#7ece8c; --teal:#78d6d2;

  /* 形状 / 密度 */
  --r:10px; --r-sm:7px; --r-lg:14px; --bw:1px;
  --sp1:6px; --sp2:9px; --sp3:13px; --sp4:18px;
  --fs-xs:10px; --fs-sm:11.5px; --fs-md:12.5px; --fs-lg:15px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;

  /* 阴影 / 内嵌面板 / 手账点缀（暗黑档一律隐身 —— 保证默认观感不变） */
  --panel-sunk:#141821;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow-press:0 1px 2px rgba(0,0,0,.35);   /* 按下时收紧的阴影 */
  --scrim:rgba(10,13,20,.72);
  --tape:transparent; --note:#1b2334; --paper-dot:transparent;

  /* ── 组件面（硬编码深色清扫 2026-10-03 抽出来的 token）──────────────
     暗黑档的值 = 清扫前 style.css 里写死的原值 ⇒ **默认观感一个像素不变**；
     手账清新档在下面 ④ 覆盖成暖色 ⇒ 不再有"深色小窗残留"。
     谁生成的：tools/sweep-hardcoded-dark.mjs（清单见 docs/主题硬编码清扫.md） */
  --sunken-2:#151b26; --sunken-3:#171d27; --sunken-4:#1d2733; --sunken-5:#171b22;
  --sunken-6:#1b1e24; --sunken-7:#151d28; --sunken-8:#141b25;
  --deep-1:#111620; --deep-2:#10161f; --deep-3:#0e1116;
  --icon-bg:#2a3444;
  --sel:#2a2c26; --sel-2:#2a3040;
  --on-accent:#2a2210;
  --accent-tint:#241f14; --accent-tint-2:#3a3020; --accent-tint-3:#2a2118;
  --mail-unread:#232a3c;
  --info-bg:#22303f; --info-bg-2:#1b2430; --info-line:#3d5a72; --info-on-bg:#26405a;
  --ok-bg:#1e2a22; --ok-bg-2:#213626;
  --ok-line:#3d5a44; --ok-line-2:#3d5a52; --ok-line-3:#3f6a4e; --ok-line-4:#2c4a37;
  --ok-line-5:#28453a; --ok-line-6:#3c4a2a; --ok-line-7:#2f5a3c; --ok-line-8:#3f6b4a;
  --warn-bg:#4a2523; --warn-bg-2:#3a2320; --warn-line:#5c3a38;
  --line-3:#2f3b52; --line-4:#33455a; --line-5:#26313f; --line-6:#3c4d63;
  --glass:rgba(22,28,40,.82); --glass-soft:rgba(22,28,40,.78); --glass-solid:rgba(22,28,40,.96);
  --glass-strong:rgba(32,40,58,.9); --glass-card:rgba(24,31,42,.98); --glass-modal:rgba(28,35,48,.97);
  --scrim-2:rgba(12,14,20,.72); --scrim-3:rgba(5,8,12,.74); --scrim-4:rgba(6,10,14,.84);
  --login-a:#2a3550; --login-b:#1b2334; --login-c:#12171f;
  /* 地图下方「信件的信息」条（ticker）与各种小标记 */
  --tk-bg:rgba(44,55,78,.9);
  --quest-bg:#5a2418; --quest-fg:#ffb9a0;
  --accent-soft:rgba(245,190,70,.14); --accent-soft-fg:#f0d68a;
  --teal-soft:rgba(120,214,210,.12); --teal-soft-fg:#9fe6e3;
  --warn-fg:#ffb9a0;

  /* ── 动效 token（唯一的时长 / 缓动来源，别在别处硬编码） ────────────── */
  --dur-instant:80ms;    /* 按下反馈 / 松手回弹 */
  --dur-fast:120ms;      /* hover、小 chip、图标 */
  --dur-ui:180ms;        /* 常规 UI：列表项入场、消息上滑、页面切 */
  --dur-panel:280ms;     /* 大面板 / 弹窗生长 */
  --dur-slow:420ms;      /* 数字滚动、光晕收尾 */
  --ease-out:cubic-bezier(.23,1,.32,1);        /* 进入一律用它（起手快） */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* 屏上位移 */
  --ease-drawer:cubic-bezier(.32,.72,0,1);     /* iOS 抽屉曲线（滑动吸附） */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);       /* 轻微过冲（卡片/面板入场） */
  --ease-spring-soft:cubic-bezier(.22,1.20,.36,1);  /* 更害羞的过冲 */
  /* 弹簧（给 JS 用的等价参数·CSS 只是近似）：
     UI 默认  { type:'spring', stiffness:220, damping:26, mass:1 }  ≈ 无过冲、~300ms 落定
     面板     { type:'spring', stiffness:170, damping:18, mass:1 }  ≈ 轻微过冲 4~6%
     跟手吸附 { type:'spring', stiffness:260, damping:30, mass:1 }  ≈ 阻尼比 .93 */
  --press-scale:.96;     /* 按下缩到 96% */
  --press-shadow-y:1px;  /* 按下阴影收紧 */
  --stagger:32ms;        /* 列表交错步长（20~40ms 区间） */
  --motion-scale:1;      /* 强度乘子：0 = 关，1 = 标准 */
}

/* ═══════════ ② 动效强度档：只改乘子与步长，曲线不动 ═══════════ */
:root[data-motion="off"]     { --motion-scale:0;    --stagger:0ms;  --press-scale:1; }
:root[data-motion="weak"]    { --motion-scale:.55;  --stagger:18ms; --press-scale:.98; }
:root[data-motion="standard"]{ --motion-scale:1;    --stagger:32ms; --press-scale:.96; }
:root[data-motion="lively"]  { --motion-scale:1.25; --stagger:48ms; --press-scale:.94; }

/* ═══════════ ③ 暗黑风（显式写法 —— 将来当「夜间模式」） ═══════════
   值 = :root 那套，一字不改。?theme=dark 或 data-theme="dark" 走这里。
   （选择器同时写 `:root[x]` 和 `[x]`：后者让"局部套主题"也能用 —— 比如
    web/theme-preview.html 并排两栏色板，一栏一个主题。） */
:root[data-theme="dark"], [data-theme="dark"]{
  --ocean:#26608a; --ocean-dk:#1d4676;
  --bg:#161c28; --bg2:#20283a; --bg3:#2c374e; --bg4:#3a4761;
  --line:#3c4860; --line2:#4e5d78;
  --text:#e8eef6; --dim:#8fa0b8; --dim2:#6b7c96;
  --accent:#f5be46; --accent2:#ee7468; --ok:#7ece8c; --teal:#78d6d2;
  --r:10px; --r-sm:7px; --r-lg:14px; --bw:1px;
  --sp1:6px; --sp2:9px; --sp3:13px; --sp4:18px;
  --fs-xs:10px; --fs-sm:11.5px; --fs-md:12.5px; --fs-lg:15px;
  --panel-sunk:#141821;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow-press:0 1px 2px rgba(0,0,0,.35);
  --scrim:rgba(10,13,20,.72);
  --tape:transparent; --note:#1b2334; --paper-dot:transparent;
}

/* ═══════════ ④ 手账清新（甲方拍板的主线基准） ═══════════
   纸质暖白底 + 低饱和贴纸色 + 细描边 #E7DFD2 + 大圆角 + 柔和阴影 + 胶带/便签点缀 */
:root[data-theme="journal"], [data-theme="journal"]{
  --bg:#FBF7F0; --bg2:#FFFDF8; --bg3:#F4EEE3; --bg4:#EDE5D6;
  --line:#E7DFD2; --line2:#D8CCB8;
  --text:#4A4238; --dim:#8F8474; --dim2:#B0A594;
  --accent:#E0A94A; --accent2:#D98A7B; --ok:#7FAE8A; --teal:#74A9A0;
  --ocean:#6E93B0; --ocean-dk:#5B7E9B;
  --panel-sunk:#F6F0E6;
  --r:14px; --r-sm:9px; --r-lg:20px; --bw:1px;
  --sp1:6px; --sp2:10px; --sp3:14px; --sp4:20px;
  --fs-xs:10px; --fs-sm:11.5px; --fs-md:12.5px; --fs-lg:15px;
  --shadow:0 6px 18px rgba(140,120,90,.14);
  --shadow-sm:0 2px 6px rgba(140,120,90,.10);
  --shadow-press:0 1px 2px rgba(140,120,90,.16);
  --scrim:rgba(74,66,56,.44);
  --tape:rgba(224,169,74,.35); --note:#FFF7DC; --paper-dot:rgba(150,120,80,.06);

  /* 组件面：暗黑档那些"写死的深色小窗"在这里全部换成暖色纸面
     （值与原深色一一对应，见 :root 里同一组 token 的注释） */
  --sunken-2:#F6F0E6; --sunken-3:#F6F0E6; --sunken-4:#F4EEE3; --sunken-5:#FFFDF8;
  --sunken-6:#F6F0E6; --sunken-7:#FFFDF8; --sunken-8:#FBF7F0;
  --deep-1:#FFFDF8; --deep-2:#F4EEE3; --deep-3:#F6F0E6;
  --icon-bg:#EDE5D6;
  --sel:#F6EEDC; --sel-2:#F6EEDC;
  --on-accent:#FFFDF8;
  --accent-tint:#FFF3DC; --accent-tint-2:#FFF3DC; --accent-tint-3:#FFF3DC;
  --mail-unread:#F6EFE1;
  --info-bg:#EDF1F3; --info-bg-2:#EDF1F3; --info-line:#C9D6DD; --info-on-bg:#DCE7EE;
  --ok-bg:#EAF3EA; --ok-bg-2:#EAF3EA;
  --ok-line:#B8D3BE; --ok-line-2:#B8D3BE; --ok-line-3:#B8D3BE; --ok-line-4:#B8D3BE;
  --ok-line-5:#B8D3BE; --ok-line-6:#B8D3BE; --ok-line-7:#B8D3BE; --ok-line-8:#B8D3BE;
  --warn-bg:#F7E4E1; --warn-bg-2:#F7E4E1; --warn-line:#E0B4AC;
  --line-3:#E7DFD2; --line-4:#E7DFD2; --line-5:#E7DFD2; --line-6:#D8CCB8;
  --glass:rgba(255,253,248,.88); --glass-soft:rgba(255,253,248,.86); --glass-solid:rgba(251,247,240,.94);
  --glass-strong:rgba(255,253,248,.9); --glass-card:rgba(255,253,248,.98); --glass-modal:rgba(255,253,248,.97);
  --scrim-2:rgba(74,66,56,.42); --scrim-3:rgba(74,66,56,.42); --scrim-4:rgba(74,66,56,.5);
  --login-a:#FFF3D9; --login-b:#FBF7F0; --login-c:#F0E7D8;
  /* ticker（"信件的信息"条）与小标记：暖白纸面 + 低饱和贴纸色 */
  --tk-bg:rgba(255,253,248,.92);
  --quest-bg:#F7E4E1; --quest-fg:#8A4B41;
  --accent-soft:rgba(224,169,74,.18); --accent-soft-fg:#8A6A21;
  --teal-soft:rgba(116,169,160,.16); --teal-soft-fg:#3F6B66;
  --warn-fg:#8A4B41;
}

/* 纸质点阵（只有手账清新有；暗黑档 --paper-dot:transparent = 看不见） */
:root[data-theme="journal"] body{
  background-image:radial-gradient(var(--paper-dot) 1px,transparent 1px);
  background-size:12px 12px;
}

/* ── 手账清新专修：只剩**还没 token 化**的少数几处（其余全部已走 :root/[data-theme] 变量） ──
   ⚠️ 这不是改 style.css，是"在主题层给 journal 打补丁"；默认档完全不受影响。 */
:root[data-theme="journal"] .wg-q{background:var(--bg3)!important;color:var(--dim2)}
:root[data-theme="journal"] .pk img{background:var(--bg3)}
:root[data-theme="journal"] #toyrev .card{background:var(--bg2)}

/* ── 无障碍：系统「减少动态效果」= 自动最弱档（不是没反馈，是不位移） ── */
@media (prefers-reduced-motion: reduce){
  :root{ --motion-scale:0; --stagger:0ms; --press-scale:1; }
}

/* ═══════════════════════════════════════════════════════════════════
   ⑤ 「🎨 换皮 / 动效」开关 UI（由 theme-runtime.js 注入；纯视觉，不碰玩法）
   —— 给甲方现场来回切：默认暗黑 ↔ 手账清新、关/弱/标准/活泼
   ═══════════════════════════════════════════════════════════════════ */
#moThemeBtn{flex:0 0 auto}
.mo-theme-panel{
  position:fixed;right:10px;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:96;
  display:none;width:min(252px,86vw);
  background:var(--bg2);color:var(--text);
  border:var(--bw) solid var(--line2);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:12px 12px 10px;
}
.mo-theme-panel.show{display:block;animation:mo-fade var(--dur-fast) var(--ease-out) both}
.mt-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin-bottom:9px}
.mt-h .mt-x{margin-left:auto;background:none;border:0;color:var(--dim);font-size:16px;line-height:1;padding:0 2px;cursor:pointer}
.mt-grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:9px}
.mt-l{flex:0 0 100%;font-size:10.5px;color:var(--dim2);letter-spacing:.5px}
.mt-b{
  flex:1 1 auto;font:inherit;font-size:11.5px;padding:6px 9px;cursor:pointer;
  background:var(--bg3);color:var(--text);border:var(--bw) solid var(--line);border-radius:var(--r-sm);
  transition:transform calc(var(--dur-fast)*var(--motion-scale)) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.mt-b:active{transform:scale(var(--press-scale))}
.mt-b.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.mt-foot{font-size:10px;color:var(--dim2);line-height:1.6;overflow-wrap:anywhere;border-top:1px solid var(--line);padding-top:7px}
.mo-theme-url{color:var(--dim);font-family:var(--mono);font-size:9.5px}

/* ═══════════════════════════════════════════════════════════════════
   ⑥ 图标层：自家金币图 + 本地 Twemoji 兜底
   —— 金币不再用 emoji（🪙 / 💰 在部分 Windows 与老安卓字体里是空方框）。
      统一走 /assets/coin.png，尺寸跟随字号（1em），基线微调对齐数字。
   —— .emj 是 emoji.js 用本地 Twemoji 图替换"本机字体画不出"的 emoji 时加的类。
      来源：Twemoji（twitter/twemoji）CC-BY 4.0，见 web/emoji.js 顶部署名。
   ═══════════════════════════════════════════════════════════════════ */
.coin-ico{width:1em;height:1em;vertical-align:-0.14em;display:inline-block;
  object-fit:contain;image-rendering:auto;flex:0 0 auto}
.emj{width:1em;height:1em;vertical-align:-0.14em;display:inline-block;object-fit:contain}
/* 数字滚动（motion.js 的 .mo-roll）里金币要跟得上：那一格字号 19px，图标 = 1em */
.farm-head .coins .coin-ico{vertical-align:-0.14em}