/* 布局：单列手机舞台——上半是夜色里的树，下半是抽奖券式的题卡。单一深色主题，刻意不跟随系统明暗。 */
:root{
  --night:#0d1f1c; --night-2:#173a31; --pine:#2f7d57; --pine-2:#266a4a; --pine-edge:#0f3426;
  --bark:#6b4429; --box:#c48d55; --box-edge:#7a5230;
  --paper:#f7f1e3; --paper-2:#fffaf0; --ink:#1c2925; --muted:#94ada3; --muted-ink:#5b6b65;
  --gold:#f2c14b; --berry:#d2445a; --ice:#8fd0ff; --snow:#eaf2ee; --ok:#2f9a5f; --bad:#c93d52;
  /* 不引外部字体（国内访问 Google Fonts 不稳），全部用系统字体 */
  --f-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --f-num:"DIN Alternate","Bahnschrift","DIN Condensed","Arial Black",sans-serif;
  --f-body:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--night);color:var(--snow);font-family:var(--f-body);font-size:15px;line-height:1.55}
a{color:var(--berry);font-weight:700}
.wrap{max-width:460px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 48px;display:flex;flex-direction:column;gap:14px}
.hero{display:flex;flex-direction:column;gap:4px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.12em;color:var(--muted)}
h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1.25;text-wrap:balance;color:var(--snow)}
h1 .who{color:var(--gold)}
.sub{margin:0;color:var(--muted);font-size:14px}
.mood{margin:4px 0 0;align-self:flex-start;background:var(--gold);color:var(--ink);font-weight:700;font-size:13px;padding:3px 12px;border-radius:999px;border:2px solid var(--ink)}
.reveal{margin:0;font-size:13px;color:var(--muted-ink);border-left:3px solid var(--gold);padding-left:10px}
.stage{position:relative;border-radius:22px;background:radial-gradient(ellipse at 50% 28%,var(--night-2),var(--night) 72%);border:1px solid var(--pine-edge);display:flex;justify-content:center;overflow:hidden}
.tree{display:block;width:100%;max-width:420px;height:auto;max-height:60vh}
.row.a{fill:var(--pine)} .row.b{fill:var(--pine-2)}
.row{stroke:var(--pine-edge);stroke-width:2;stroke-linejoin:round}
.trunk{fill:var(--bark)}
.flake{fill:var(--snow);opacity:.45}
.mound{fill:var(--snow);opacity:.9}
.boxbody,.boxflap{fill:var(--box);stroke:var(--box-edge);stroke-width:2}
.tape{fill:var(--box-edge);opacity:.35}
.star{fill:var(--gold);stroke:var(--box-edge);stroke-width:1.5}
.tick{fill:var(--muted);font:700 10px var(--f-num);text-anchor:end}
.bulb{animation:twinkle 2s ease-in-out infinite}
.bulb.c0{fill:var(--gold)} .bulb.c1{fill:var(--berry)} .bulb.c2{fill:var(--ice)} .bulb.c3{fill:var(--snow)}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.ball{transition:transform .9s cubic-bezier(.3,1.35,.5,1)}
.ball .hook{stroke:var(--gold);stroke-width:1.5}
.ball .cap{fill:var(--gold)}
.ball .shine{fill:#ffffff;opacity:.35}
.ball .ini{fill:#ffffff;font:700 10px var(--f-body);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ball .ring{fill:none;stroke:var(--gold);stroke-width:3}
.ball .tagbg{fill:var(--gold)}
.ball .tagtx{fill:var(--ink);font:700 10px var(--f-body);text-anchor:middle;dominant-baseline:central}
.bubble{position:absolute;right:12px;bottom:12px;max-width:72%;margin:0;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.panel{display:flex;flex-direction:column;gap:12px}
.ticket{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px 16px 20px;display:flex;flex-direction:column;gap:12px;position:relative;min-width:0;margin:0}
.ticket::before{content:"";position:absolute;left:14px;right:14px;top:8px;border-top:2px dashed var(--muted)}
.ticket h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:21px}
.ticket h3{margin:8px 0 0;font-size:15px}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.qno{font-weight:700;color:var(--muted-ink);font-variant-numeric:tabular-nums}
.qno b{font-family:var(--f-num);color:var(--ink);font-size:18px}
.dots{display:flex;gap:4px}
.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted)}
.dot.y{background:var(--ok);border-color:var(--ok)} .dot.n{background:var(--bad);border-color:var(--bad)} .dot.now{border-color:var(--ink)}
.stem{margin:0;font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.35}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{font-family:var(--f-num);font-weight:700;font-size:36px;line-height:1;padding:20px 0 18px;background:var(--paper-2);color:var(--ink);border:2px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.opt:disabled{cursor:default}
.opt.right{background:var(--ok);color:#ffffff}
.opt.wrong{background:var(--bad);color:#ffffff}
.lbl{font-weight:700;font-size:14px}
input[type=text],input[type=password]{font:16px var(--f-body);color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
input[aria-invalid=true]{border-color:var(--bad)}
.btn{font:800 17px var(--f-display);color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:12px 16px;cursor:pointer}
.btn.primary{background:var(--gold);width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.small{font:600 13px var(--f-body);padding:5px 10px;box-shadow:none;border-width:1.5px}
.btn.small.danger{background:var(--bad);color:#ffffff;border-color:var(--bad)}
.fine{margin:0;font-size:13px;color:var(--muted-ink)}
.warn{margin:0;font-size:13px;color:var(--bad);font-weight:700}
.count{margin:0;font-weight:700}
.count b{font-family:var(--f-num);font-size:18px}
.badge{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.3}
.big{margin:0;font-size:16px;font-weight:700}
.num{font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums}
.big .num{font-size:22px}
.picks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.picks li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-ink)}
.picks li .num{font-size:16px;color:var(--ink)}
.picks li i{font-style:normal;font-weight:700}
.picks li.y i{color:var(--ok)} .picks li.n i{color:var(--bad)}
.qrow{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.qrow legend{font-weight:700;font-size:13px;color:var(--muted-ink);padding:0;margin-bottom:6px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chip{font:700 20px var(--f-num);color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;padding:10px 0 8px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--gold)}
.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.roster li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--muted)}
.roster .who{font-weight:700;min-width:0;overflow-wrap:anywhere;flex:1}
.roster .lv{font-size:13px;color:var(--muted-ink);white-space:nowrap}
.rowbtns{display:flex;gap:10px;flex-wrap:wrap}
.rowbtns .btn{flex:1 1 140px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--snow);border:1px solid var(--muted);padding:10px 16px;border-radius:12px;font-weight:700;max-width:calc(100% - 48px);z-index:20}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bulb{animation:none}.ball{transition:none}}