/* ============ 基础：设计令牌、重置、通用控件 ============ */
/* patch175：字体子集化 + WOFF2
   原来 wawa.ttf 是 2629 KB 的全字库，但游戏实际只用到 2175 个字符。
   子集化后 322 KB（-88%），并转成 WOFF2（所有现代浏览器都支持）。
   如果极老的浏览器不支持 WOFF2，会自动回落到 --font-ui 里的系统字体，不会白屏。 */
@font-face{
  font-family:'HKWaWaTi';
  src:url('../assets/fonts/wawa-subset.woff2') format('woff2');
  font-display:swap;
}
:root{
  --paper:#faf4e8;
  --paper-2:#f4ecdc;
  --card:#fffdf7;
  --ink:#3b352c;
  --ink-soft:#6f675a;
  --ink-faint:#978d7c;
  --line:#e7dcc7;
  --line-strong:#d8c9ab;

  --mist:#7fa8c9;
  --sage:#8fae8b;
  --peach:#f0a58a;
  --honey:#eec163;
  --rose:#d98a8a;
  --plum:#9b8bb4;

  --radius:3px;
  --radius-sm:2px;
  --shadow-sm:0 1px 2px rgba(96,80,58,.06), 0 6px 16px -12px rgba(96,80,58,.35);
  --shadow-md:0 2px 4px rgba(96,80,58,.07), 0 18px 36px -22px rgba(96,80,58,.45);
  --focus:#b98a2f;

  --font-ui:'HKWaWaTi',"PingFang SC","Microsoft YaHei",sans-serif;
  --font-title:'HKWaWaTi',"PingFang SC","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

/* 纸张纹理（内联 SVG，无外部请求） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
#app{position:relative;z-index:1;}

h1,h2,h3,h4{margin:0;font-family:var(--font-title);font-weight:700;letter-spacing:.02em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- 触控优化 ---------- */
button,.btn,.choice,.action,.trait,.style-chip,.theme-dot{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
input,textarea,select,button{ font-family:inherit; }
input[type="text"]{ font-size:16px; }  /* ≥16px 避免 iOS 聚焦时自动放大页面 */
body{ padding-bottom:env(safe-area-inset-bottom); }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;
  border:1px solid var(--line-strong);border-radius:3px;
  background:var(--card);color:var(--ink);
  font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1.2;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--honey);}
.btn:active:not(:disabled){transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btn svg{width:18px;height:18px;flex:none;}

.btn-primary{background:var(--honey);border-color:#d9a83f;color:#4a3a12;}
.btn-primary:hover:not(:disabled){background:#f3cb78;}
.btn-ghost{background:transparent;border-color:var(--line);box-shadow:none;color:var(--ink-soft);}
.btn-ghost:hover:not(:disabled){background:var(--paper-2);color:var(--ink);}
.btn-danger{color:#a8433f;border-color:#e3b7b3;}
.btn-danger:hover:not(:disabled){background:#fbeceb;border-color:#d99a95;}
.btn-sm{min-height:34px;padding:5px 12px;font-size:13px;box-shadow:none;}
.btn-icon{min-height:38px;width:38px;padding:0;border-radius:50%;}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.card-title{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-title);font-size:16px;font-weight:700;
  margin-bottom:10px;
}
.card-title .num{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ink-faint);}
.card-title svg{width:18px;height:18px;color:var(--honey);}

/* ---------- 徽章 / 标签 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:2px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);white-space:nowrap;
}
.chip svg{width:14px;height:14px;}
.chip-up{background:#e8f3ea;border-color:#c3ddc8;color:#3f6b48;}
.chip-down{background:#fbeceb;border-color:#e9c6c2;color:#8f4340;}

/* ---------- 弹窗 ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(59,53,44,.42);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  animation:fade-in .18s ease both;
}
.modal{
  width:min(560px,100%);max-height:min(86dvh,860px);
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:22px;
  animation:pop-in .2s cubic-bezier(.2,.9,.3,1.2) both;
}
.modal-title{font-family:var(--font-title);font-size:20px;margin-bottom:12px;}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px;}

/* ---------- Toast ---------- */
.toast-root{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:min(92vw,420px);
}
.toast{
  background:var(--ink);color:#fdf8ee;
  padding:9px 16px;border-radius:2px;font-size:13px;
  box-shadow:var(--shadow-md);
  animation:toast-in .22s ease both;
  text-align:center;
}
.toast.leaving{animation:toast-out .25s ease both;}

/* ---------- 动画 ---------- */
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes pop-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px);}}
@keyframes page-turn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes drift-x{from{transform:translateX(-16%);}to{transform:translateX(110%);}}
@keyframes fall-y{from{transform:translateY(-16px);}to{transform:translateY(220px);}}
@keyframes glow-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes delta-pop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}
@keyframes spin-slow{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}