/* ==========================================================================
   到场（Arrive）· 手作涂鸦覆盖层（V2.3 视觉改版）
   风格基准：设计稿「风格4 · 手作涂鸦风」——蜡笔三色 + 手绘墨线边框 +
   纸面纹理点 + 贴纸标签 + 跳跳入场。全程只覆盖令牌与观感，不动任何
   class/id/结构，JS 契约零改动。加载顺序：style.css → fun.css → 页面 css → 本文件。
   深浅主题机制沿用：默认深色 = 夜光涂鸦，html[data-theme="light"] = 暖纸涂鸦。
   ========================================================================== */

/* ---------- 1. 令牌覆盖 ---------- */
:root,
:root:not([data-theme="light"]) {
  /* 夜光涂鸦（深色默认） */
  --bg: #182038;
  --panel: rgba(26, 36, 64, .92);
  --panel-2: #1a2440;
  --panel-solid: #1a2440;
  --field: #1a2440;
  --line: #6b7fb5;
  --line-soft: rgba(107, 127, 181, .35);
  --text: #e8f0ff;
  --muted: #9db0d6;
  --accent: #7ee08a;
  --accent-deep: #58a05c;
  --accent-ink: #0a0c10;
  --warn: #ffe27a;
  --danger: #ff9d8a;
  --accent-2: #a9f2b2;
  --gold: #ffe27a;
  --grad-accent: linear-gradient(135deg, #7ee08a 0%, #58a05c 100%);
  --grad-line: linear-gradient(90deg, rgba(107, 127, 181, .6), rgba(107, 127, 181, .08));
  --ring: 0 0 0 2px #6b7fb5;
  --shadow-1: 2px 2px 0 rgba(107, 127, 181, .28);
  --shadow-2: 4px 4px 0 rgba(107, 127, 181, .22);
  --shadow-glow: 3px 3px 0 rgba(126, 224, 138, .35);
  --grad-hero: radial-gradient(120% 130% at 18% 0%, rgba(126, 224, 138, .10), transparent 46%),
               radial-gradient(90% 110% at 92% 8%, rgba(255, 226, 122, .08), transparent 52%);
  /* 手绘圆角：不对称弧度，遮住颜色也能认出这是手账 */
  --radius: 16px 6px 18px 7px / 7px 18px 6px 16px;
  --radius-sm: 12px 5px 14px 6px / 6px 14px 5px 12px;
  --dd-ink: #6b7fb5;
  --dd-crayon-g: #7ee08a;
  --dd-crayon-y: #ffe27a;
  --dd-crayon-c: #ff9d8a;
  --dd-ink-text: #0a0c10;
  --dd-dot: rgba(160, 190, 255, .09);
}

html[data-theme="light"] {
  /* 暖纸涂鸦（浅色） */
  --bg: #fdf6e3;
  --panel: #fffdf5;
  --panel-2: #fbf3dd;
  --panel-solid: #fffdf5;
  --field: #fffdf5;
  --line: #3a3530;
  --line-soft: rgba(58, 53, 48, .28);
  --text: #3a3530;
  --muted: #847c72;
  --accent: #58a05c;
  --accent-deep: #3f7d44;
  --accent-ink: #fdf6e3;
  --warn: #f0c14b;
  --danger: #e8846b;
  --accent-2: #6fb874;
  --gold: #f0c14b;
  --grad-accent: linear-gradient(135deg, #6fb874 0%, #3f7d44 100%);
  --grad-line: linear-gradient(90deg, rgba(58, 53, 48, .5), rgba(58, 53, 48, .06));
  --ring: 0 0 0 2px #3a3530;
  --shadow-1: 2px 2px 0 rgba(58, 53, 48, .25);
  --shadow-2: 4px 4px 0 rgba(58, 53, 48, .18);
  --shadow-glow: 3px 3px 0 rgba(88, 160, 92, .3);
  --grad-hero: radial-gradient(120% 130% at 18% 0%, rgba(88, 160, 92, .10), transparent 46%),
               radial-gradient(90% 110% at 92% 8%, rgba(240, 193, 75, .12), transparent 52%);
  --dd-ink: #3a3530;
  --dd-crayon-g: #58a05c;
  --dd-crayon-y: #f0c14b;
  --dd-crayon-c: #e8846b;
  --dd-ink-text: #fdf6e3;
  --dd-dot: rgba(58, 53, 48, .08);
}

/* ---------- 2. 纸面与全局 ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Yuanti SC", "YouYuan", "PingFang SC", "Noto Sans SC", sans-serif;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
/* 纸面纹理点：手账本纸 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--dd-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
body > .wrap { position: relative; z-index: 1; }

/* 浮空小星星：一左一右两颗，慢慢飘 */
body::after {
  content: "✦";
  position: fixed;
  top: 84px;
  right: 18px;
  font-size: 22px;
  color: var(--dd-crayon-y);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
  animation: dd-bob 3.6s ease-in-out infinite;
}

/* ---------- 3. 公共壳：顶栏 / 底栏 / fab ---------- */
.topbar {
  background: var(--bg);
  border-bottom: 2px solid var(--dd-ink);
  box-shadow: none;
}
.topbar::after { display: none; }
.brand { font-weight: bold; transform: rotate(-1deg); }
.brand img { filter: drop-shadow(1px 1px 0 var(--dd-ink)); }
.nav-item {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background: transparent;
}
.nav-item:hover {
  border-color: var(--dd-ink);
  background: transparent;
  transform: rotate(-1.5deg);
}
.nav-item.on {
  border-color: var(--dd-ink);
  background: var(--dd-crayon-y);
  color: var(--dd-ink-text);
  box-shadow: 2px 2px 0 var(--dd-ink);
}
html[data-theme="light"] .nav-item.on,
body.theme-night .nav-item.on { color: var(--dd-ink-text); }

.tabbar {
  background: var(--bg);
  border-top: 2px solid var(--dd-ink);
  box-shadow: none;
}
.tab { color: var(--muted); transition: transform var(--t-1) var(--ease); }
.tab:hover { transform: translateY(-3px) rotate(-2deg); }
.tab.on { color: var(--accent); background: transparent; box-shadow: none; }

.fab {
  border: 2px solid var(--dd-ink);
  border-radius: 18px 7px 20px 8px / 8px 20px 7px 18px;
  background: var(--dd-crayon-g);
  color: var(--dd-ink-text);
  box-shadow: 3px 3px 0 var(--dd-ink);
}
.fab:hover { transform: rotate(-1deg) scale(1.03); }
.fab:active { box-shadow: 1px 1px 0 var(--dd-ink); transform: rotate(1.5deg) scale(.97); }

/* ---------- 4. 卡片：手绘边框 + 错位偏移阴影 ---------- */
.card {
  background: var(--panel);
  border: 2px solid var(--dd-ink);
  border-radius: 16px 6px 18px 7px / 7px 18px 6px 16px;
  box-shadow: 3px 3px 0 var(--shadow-2, rgba(58, 53, 48, .25));
  backdrop-filter: none;
}
.card::before { display: none; }   /* 玻璃卡高光撤掉 */
.card:hover { transform: rotate(-.4deg); }

/* 浅色主题下，营页夜景门楼（.night-hero）被 .card 覆盖为浅底，
   标题/副题必须跟着换深色，否则白字看不见（2026-11-13 站长反馈） */
html[data-theme="light"] .night-hero h1 { color: var(--text); }
html[data-theme="light"] .night-hero .night-sub { color: var(--muted); }
html[data-theme="light"] .night-hero::before {
  background:
    linear-gradient(180deg, rgba(95, 155, 137, .10), transparent 40%),
    linear-gradient(180deg, #fffdf5 0%, #fbf3dd 100%);
}

/* 浅色主题下，问一下 / 结营报告 / 许愿池等页硬编码的夜色浅字换主题深字；
   .room-night（沉浸夜屋）与 .task-card（自带深底）保持夜色字不动 */
html[data-theme="light"] .ask-promise h2,
html[data-theme="light"] .ask-kind span,
html[data-theme="light"] .ask-receipt p,
html[data-theme="light"] .ask-self summary,
html[data-theme="light"] .report-title,
html[data-theme="light"] .report-nums dd,
html[data-theme="light"] .report-spirit { color: var(--text); }
html[data-theme="light"] .ask-promise p,
html[data-theme="light"] .ask-kinds legend,
html[data-theme="light"] .report-nums dt,
html[data-theme="light"] .report-nums dd small,
html[data-theme="light"] .wish-desc,
html[data-theme="light"] .wish-date,
html[data-theme="light"] .wish-badge-doing,
html[data-theme="light"] .how-card summary::after { color: var(--muted); }
/* 选项条自带硬编码深底，浅色主题换浅底浅描边 */
html[data-theme="light"] .ask-kind { background: #fbf3dd; border-color: #d8cfba; }
html[data-theme="light"] .ask-self details { border-top-color: #e6dcc4; }

/* 主行动卡 / 输入区保留呼吸光但换成手绘底 */
.capture {
  border: 2px solid var(--dd-ink);
  border-radius: 18px 8px 20px 9px / 9px 20px 8px 18px;
}

/* ---------- 5. 按钮：蜡笔按压 ---------- */
.btn {
  font-weight: bold;
  border: 2px solid var(--dd-ink);
  border-radius: 14px 5px 16px 6px / 6px 16px 5px 14px;
  box-shadow: 3px 3px 0 var(--dd-ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn.primary, .btn:not(.ghost):not(.text):not(.danger):not(.small) {
  background: var(--dd-crayon-g);
  color: var(--dd-ink-text);
}
.btn.ghost { background: var(--panel); color: var(--text); }
.btn.danger { background: var(--dd-crayon-c); color: var(--dd-ink-text); }
.btn:hover { transform: rotate(-1deg) scale(1.03); }
.btn:active { border-width: 3px; transform: rotate(1.5deg) scale(.97); box-shadow: 1px 1px 0 var(--dd-ink); }
.btn.small { border-radius: var(--radius-sm); box-shadow: 2px 2px 0 var(--dd-ink); }

/* ---------- 6. 表单：手账格线 ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea, select {
  border: 2px solid var(--dd-ink);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--ring);
}
.field-label { font-weight: bold; }

/* ---------- 7. 标签贴纸（chip/tag 类复用） ---------- */
.chip, .tag, .pill, .badge {
  border: 2px dashed var(--dd-ink);
  border-radius: 18px 6px 20px 8px / 8px 20px 6px 18px;
  background: var(--panel-2);
  box-shadow: none;
  font-weight: bold;
}

/* ---------- 8. 标题气质：轻微歪斜的手写感 ---------- */
h1, .home-head { transform: rotate(-.6deg); }
h2 { transform: rotate(-.3deg); }

/* ---------- 9. 跳跳入场（复用滚动揭示时机不受影响，仅补卡片自身弹性） ---------- */
@keyframes dd-pop {
  from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes dd-bob {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(-9px) rotate(14deg); }
}
main.wrap > .card,
main > .card,
.wrap > main > .card { animation: dd-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
main.wrap > .card:nth-of-type(2), main > .card:nth-of-type(2) { animation-delay: .08s; }
main.wrap > .card:nth-of-type(3), main > .card:nth-of-type(3) { animation-delay: .16s; }
main.wrap > .card:nth-of-type(4), main > .card:nth-of-type(4) { animation-delay: .24s; }
main.wrap > .card:nth-of-type(5), main > .card:nth-of-type(5) { animation-delay: .32s; }

/* ---------- 10. 夜光涂鸦：夜间导航与 theme-night 页 ---------- */
body.theme-night { --dd-ink: #6b7fb5; }
body.theme-night .topbar,
body.theme-night .tabbar {
  background: #182038;
  border-color: #6b7fb5;
}
body.theme-night .nav-item.on,
body.theme-night .tab.on { color: #7ee08a; }
body.theme-night .card {
  background: #1a2440;
  border-color: #6b7fb5;
  box-shadow: 3px 3px 0 rgba(107, 127, 181, .22);
}

/* 房间页沉浸夜屋例外：保留夜空体系，只把卡片描边统一成夜光墨线 */
body.theme-night .room-night .card,
body.theme-night .night-sky .card {
  border-color: rgba(107, 127, 181, .5);
  box-shadow: none;
  transform: none;
}
body.theme-night .room-night .card:hover { transform: none; }

/* ---------- 11. 动效关停（站点开关 + 系统偏好双保险） ---------- */
html[data-motion="off"] body::after { display: none; }
html[data-motion="off"] main.wrap > .card,
html[data-motion="off"] main > .card,
html[data-motion="off"] .wrap > main > .card,
html[data-motion="off"] .btn,
html[data-motion="off"] .nav-item,
html[data-motion="off"] .tab,
html[data-motion="off"] .fab,
html[data-motion="off"] .card { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 12. 桌面端适配 ---------- */
@media (min-width: 768px) {
  body::after { top: 110px; right: 40px; font-size: 26px; }
  .card:hover { transform: rotate(-.4deg) translateY(-2px); }
}

/* ==========================================================================
 9. V2.3.0 灯系留存层（灯芯卡 / 火柴 / 灯窗墙）——只走 --dd-* 手作涂鸦 token，
 深浅两套主题自动生效；不新增结构契约，纯装饰。
 ========================================================================== */
.lamp-card {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
}
.lamp-visual {
 flex: 0 0 auto;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: var(--dd-dot);
 display: grid;
 place-items: center;
}
.lamp-flame {
 width: 18px;
 height: 26px;
 border-radius: 50% 50% 45% 45%;
 background: var(--dd-crayon-y);
 box-shadow: 0 0 10px 2px var(--dd-crayon-y);
 opacity: .55;
}
.lamp-flame.lamp-wick-1 { opacity: .85; width: 20px; height: 30px; box-shadow: 0 0 16px 4px var(--dd-crayon-y); }
.lamp-flame.lamp-wick-2 { opacity: 1; width: 22px; height: 34px; box-shadow: 0 0 22px 6px var(--dd-crayon-y); }
.lamp-info { flex: 1 1 200px; min-width: 0; }
.lamp-line { margin: 0 0 4px; font-weight: 700; }
.lamp-sub { margin: 0; }
.lamp-sit { flex: 0 0 auto; }
.lamp-sit-btn { white-space: nowrap; }

.lamp-windows { margin-top: 14px; }
.lamp-win-row {
 display: flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
 padding: 8px 4px;
 border-radius: 12px;
}
.lamp-win-row:hover .lamp-win-go { transform: translateX(3px); }
.lamp-win-strip { display: flex; gap: 6px; flex: 0 0 auto; }
.lamp-win {
 width: 14px;
 height: 20px;
 border-radius: 4px 4px 2px 2px;
 background: var(--dd-crayon-y);
 box-shadow: 0 0 8px 1px var(--dd-crayon-y);
 opacity: .9;
}
.lamp-win:nth-child(2n) { opacity: .7; animation: lamp-win-breathe 3.2s ease-in-out infinite alternate; }
.lamp-win:nth-child(3n) { animation: lamp-win-breathe 4.1s ease-in-out infinite alternate-reverse; }
@keyframes lamp-win-breathe { from { opacity: .55; } to { opacity: 1; } }
.lamp-win-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lamp-win-go { flex: 0 0 auto; transition: transform .2s ease; }
.lamp-win-empty { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
 .lamp-win { animation: none !important; }
}

/* ==========================================================================
 10. V2.3.1 全站悬浮客服按钮（.ask-fab）——手作涂鸦观感，蜡笔黄描边；
 房间页沉浸夜屋（body.theme-night）下压深底色不抢戏。
 ========================================================================== */
.ask-fab {
 position: fixed;
 right: 16px;
 bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* 避开 tabbar 高度 */
 z-index: 60;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 text-decoration: none;
 font-weight: 700;
 font-size: 17px;
 color: var(--dd-ink-text, var(--text));
 background: var(--dd-crayon-y, var(--accent));
 border: 2px solid var(--dd-ink, currentColor);
 box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
 transition: transform .15s ease;
}
.ask-fab:hover { transform: rotate(-4deg) scale(1.05); }
/* 页面自带主行动 fab（如营页「开始」）时，问按钮挪到它左边，避免重叠 */
body:has(.fab) .ask-fab { right: calc(16px + 54px + 14px); }
/* 桌面端没有 tabbar，落低一点更顺眼 */
@media (min-width: 768px) {
 .ask-fab { bottom: 24px; right: 24px; }
 /* 桌面 fab 带文字宽度不定，问按钮改叠到 fab 上方 */
 body:has(.fab) .ask-fab { bottom: calc(26px + 54px + 16px); right: 26px; }
}
body.theme-night .ask-fab {
 color: #141B2B;
 background: var(--dd-crayon-y, #F5C97A);
 border-color: rgba(255, 255, 255, .18);
}