:root{
  --bg:#f5f2ea;        /* 米白 */
  --ink:#16140f;       /* 近黑 */
  --muted:#8a857a;     /* 暖灰 */
  --line:#ded8c9;      /* 细线 */
  --card:#fbf9f3;      /* 卡片白 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
  display:flex; flex-direction:column; align-items:center; padding:20px 18px;
  -webkit-font-smoothing:antialiased;
}
.badge{
  margin-top:4px; font-size:12px; color:var(--muted);
  border:1px solid var(--line); padding:5px 12px; border-radius:2px; letter-spacing:.3px;
}
.app{width:100%; max-width:400px; flex:1; display:flex; align-items:center; justify-content:center}
.screen{display:none; width:100%; text-align:center}
.screen.active{display:block}

h1{font-size:34px; font-weight:700; letter-spacing:1px}
h1 span{font-weight:300}
.sub{color:var(--muted); margin:16px 0 30px; line-height:1.7; font-size:15px}
.tiny{color:var(--muted); font-size:12px; margin-top:14px; line-height:1.6}

button{font:inherit; cursor:pointer; border-radius:2px; padding:15px 24px; font-weight:600; transition:opacity .15s}
.primary{background:var(--ink); color:var(--bg); width:100%; font-size:16px; border:1px solid var(--ink)}
.primary:active{opacity:.7}
.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.row{display:flex; gap:10px; margin-top:14px}
.row .primary{flex:2} .row .ghost{flex:1}

.stage{position:relative; width:100%; aspect-ratio:3/4; border-radius:3px; overflow:hidden;
  background:#000; margin-bottom:18px; border:1px solid var(--line)}
#video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
#overlay{position:absolute; inset:0; width:100%; height:100%}
#hud{position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start}
.hr{background:rgba(255,255,255,.92); border-radius:2px; padding:5px 11px; display:flex; align-items:baseline; gap:4px}
.hr span{font-size:28px; font-weight:700; color:var(--ink)}
.hr small{color:var(--muted); font-size:12px}
.quality{background:rgba(255,255,255,.92); border-radius:2px; padding:6px 9px; font-size:12px; color:var(--muted)}

.phase.hidden{display:none}
.big{font-size:18px; font-weight:600; margin-bottom:8px}
.q{font-size:21px; font-weight:600; line-height:1.6; margin:8px 2px 22px; min-height:68px}
.bar{height:3px; background:var(--line); border-radius:0; overflow:hidden; margin-top:16px}
.bar i{display:block; height:100%; width:0; background:var(--ink); transition:width .25s}

.packs{display:flex; gap:10px; margin-bottom:16px}
.pack{flex:1; background:var(--card); border:1px solid var(--line); border-radius:2px; padding:14px 8px; font-size:14px}
.pack.sel{border-color:var(--ink)}
.pack .lock{font-size:11px; color:var(--muted); margin-top:5px}

.card{background:var(--card); border:1px solid var(--line); border-radius:3px; padding:30px 22px}
.emoji{font-size:54px; filter:grayscale(1)}
.r-title{font-size:24px; font-weight:700; margin:8px 0}
.r-delta{font-size:17px; color:var(--muted)}
.r-delta b{color:var(--ink); font-size:22px; margin-left:6px; font-weight:700}
.r-breakdown{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px}
.chip{font-size:13px; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:4px 9px}
.r-cap{margin-top:14px; color:var(--ink); font-size:15px; line-height:1.6}

footer{color:var(--muted); font-size:11px; text-align:center; max-width:400px; margin-top:20px; line-height:1.7}