/* 「吃什么」生产样式——C「街角灯箱」设计系统（docs/design-system.md，拍板 2026-09-03）
   集成纪律（refinement preserves）：交互逻辑、功能文案、埋点点位三不动。
   本文件＝设计 token＋组件化重皮；暗色为第一公民；reduced-motion 全尊重。 */
:root{
  --bg-0:#0F1F18;--bg-1:#14281F;--bg-2:#1B3327;--bg-3:#24402F;
  --ink-1:#F2EFE6;--ink-2:#A8B5A3;--ink-3:#6E8274;
  --y:#FFC53D;--y-ink:#101A14;--r:#FF8A6E;--c:#3DDAD7;
  --line:#2A4436;--focus:#3DDAD7;--sticker-bd:#FFC53D;
  --s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --r-card:12px;--r-btn:12px;
  --shadow-pop:0 4px 0 rgba(0,0,0,.5);
  --shadow-press:0 1px 0 rgba(0,0,0,.5);
  --t-press:90ms cubic-bezier(.3,0,.7,.4);
  --t-flip:240ms cubic-bezier(.2,.7,.3,1.12);
  --t-lit:60ms linear;
  --t-fade:160ms ease-out;
  --ok:#7bc47f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-0);color:var(--ink-1);
  font:400 16px/1.6 -apple-system,"PingFang SC","HarmonyOS Sans SC","MiSans",
    "Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  min-height:100vh}
::selection{background:var(--y);color:var(--y-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press),box-shadow var(--t-press),
    background-color var(--t-lit),opacity var(--t-fade)}
.hidden{display:none!important}
.num{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums}
.wrap{max-width:420px;margin:0 auto;padding:var(--s-5) var(--s-5) 48px}
header h1{margin:8px 0 0;font-size:22px;font-weight:900;letter-spacing:.02em}
.sub{margin:0 0 var(--s-4);color:var(--ink-2);font-size:13px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 贴纸卡（灯箱面） */
.card{position:relative;background:var(--bg-1);
  border:3px solid var(--sticker-bd);border-radius:var(--r-card);
  box-shadow:var(--shadow-pop);padding:var(--s-5);margin:var(--s-3) 0}
.modal{position:fixed;inset:0;background:rgba(6,12,9,.6);display:flex;
  align-items:flex-end;justify-content:center;z-index:40}
.modal .card{width:100%;max-width:420px;border-radius:var(--r-card)
  var(--r-card) 0 0;padding:var(--s-6) var(--s-5)}
.kicker{display:inline-block;background:var(--y);color:var(--y-ink);
  border-radius:8px;padding:4px 12px;font-weight:900;font-size:14px;
  letter-spacing:.06em;margin:var(--s-5) 0 0}

/* 按钮（≥44px 触达） */
.primary,.ghost,.linklike{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:12px var(--s-4);border-radius:var(--r-btn)}
.primary{background:var(--y);color:var(--y-ink);font-weight:900;font-size:17px;
  letter-spacing:.08em;border:3px solid var(--y-ink);box-shadow:var(--shadow-pop)}
.primary:active{transform:translateY(3px);box-shadow:var(--shadow-press)}
.primary:disabled{opacity:.45;pointer-events:none}
.ghost{border:2px solid var(--line);color:var(--ink-1);font-weight:500;
  font-size:15px;min-height:48px}
.ghost:active{transform:translateY(2px);background:var(--bg-2)}
.ghost:disabled{opacity:.4;pointer-events:none}
.linklike{width:auto;min-height:44px;background:none;color:var(--r);
  font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:0 var(--s-2)}
.linklike:disabled{opacity:.6;pointer-events:none}
.danger{background:#5c1f1f;color:#ffd9d9}
.row{display:flex;gap:var(--s-3);margin:var(--s-3) 0;align-items:center}
.row button{flex:1}
.big{font-size:19px;padding:16px}

/* 文案 */
.q{font-weight:700;margin:var(--s-2) 0}
.copy{font-size:16px;line-height:1.6;margin:var(--s-3) 0}
.hint{color:var(--ink-2);font-size:13px;line-height:1.5}
.disclaimer{color:var(--ink-2);font-size:11px}
.links a{color:var(--ink-2);font-size:13px}
footer{margin-top:32px}
code{background:#000;padding:8px 10px;border-radius:8px;font-size:12px;
  word-break:break-all;flex:1}
input{background:#000;border:1px solid #333;color:var(--ink-1);border-radius:10px;
  padding:12px;flex:1;font-size:16px}
label{font-size:13px;color:var(--ink-2);display:block;margin:10px 0 4px}
#dish-name{font-size:30px;line-height:1.2;margin:4px 0 8px;font-weight:900}

/* 旧类保留（re-ask 兼容渲染路径） */
.choice{display:block;width:100%;text-align:left;min-height:52px;
  border:2px solid var(--line);border-radius:var(--r-btn);padding:12px 16px;
  background:var(--bg-1);font-size:16px}
.choice.on{background:var(--y);color:var(--y-ink);border-color:var(--y);font-weight:900}
.tag{display:inline-block;background:var(--bg-1);border-radius:999px;
  padding:8px 14px;margin:6px 4px;font-size:15px;cursor:pointer;
  border:2px solid var(--line)}
.tag.on{background:var(--y);color:var(--y-ink);border-color:var(--y);font-weight:900}
#quiz-body .q{margin:14px 0 4px;color:var(--ink-2);font-size:14px}

/* 单词卡闯关（设计拍板＋owner 修订①—⑤：全卷单选卡牌） */
.qwrap{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-4);padding-top:var(--s-3)}
.q-center{display:inline-flex;align-items:center;gap:14px;text-align:center;
  font-weight:900;font-size:24px;line-height:1.35;margin:var(--s-2) 0}
.q-center::before,.q-center::after{content:"";width:20px;height:4px;
  border-radius:2px;background:var(--y);flex:none}
.bulbs{display:flex;gap:10px;justify-content:center}
.bulb{width:12px;height:12px;border-radius:50%;border:2px solid var(--line)}
.bulb.on{background:var(--y);border-color:var(--y)}
.flash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
  width:100%;margin:var(--s-3) 0}
.flash-grid.two{grid-template-columns:repeat(2,1fr)}
.flash-card{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:76px;padding:12px 8px;border-radius:var(--r-card);
  border:2px solid var(--line);background:var(--bg-1);
  font-weight:700;font-size:16px;box-shadow:var(--shadow-pop);
  transition:transform var(--t-press),background-color var(--t-lit),
    color var(--t-lit),border-color var(--t-lit);
  animation:deal 200ms ease-out both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes deal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.flash-card:active{transform:translateY(2px)}
.flash-card[aria-pressed="true"]{background:var(--y);color:var(--y-ink);
  border-color:var(--y);font-weight:900;transform:translateY(-2px)}
.flash-card.dim{opacity:.35}
.flash-card.big{min-height:150px;font-size:19px;font-weight:900;color:var(--y);
  letter-spacing:.04em}
.flipwrap{perspective:900px}
.flip{transform-origin:50% 0;animation:flip var(--t-flip) both}
@keyframes flip{from{transform:rotateX(92deg)}to{transform:rotateX(0)}}