:root { --ink:#25201d; --muted:#806f67; --paper:#fffaf5; --line:#f0e2d7; --accent:#f45d2b; --accent-soft:#fff0e9; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(150deg,#fff1e9 0%,#fffaf5 48%,#f7efe8 100%); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.page { max-width:620px; min-height:100vh; margin:auto; background:rgba(255,250,245,.75); }
.hero { padding:50px 24px 30px; background:radial-gradient(circle at 90% 5%,#ffbd9d 0 4%,transparent 4.3%),radial-gradient(circle at 83% 15%,#ff8053 0 8%,transparent 8.3%),linear-gradient(135deg,#3c2922,#6f382a); color:#fff9f5; border-radius:0 0 34px 34px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.5px; opacity:.72; } h1 { font-size:32px; line-height:1.15; letter-spacing:-.7px; margin:12px 0 10px; } .hero p { margin:0; color:#f7dcd0; line-height:1.55; font-size:14px; }.meta { display:flex; gap:10px; margin-top:22px; font-size:12px; }.meta span { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.15); border-radius:100px; padding:7px 10px; }
.content { padding:26px 20px 30px; }.hint { margin:0 0 14px; color:var(--muted); font-size:13px; }.options { display:grid; gap:12px; }.option { position:relative; overflow:hidden; text-align:left; min-height:100px; padding:17px 16px; border:1px solid var(--line); border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 5px 18px rgba(72,43,29,.045); cursor:pointer; font:inherit; transition:transform .15s, border-color .15s; }.option:active { transform:scale(.98); }.option:disabled { cursor:default; }.option.selected { border-color:var(--accent); background:var(--accent-soft); }.row { position:relative; z-index:1; display:flex; align-items:center; gap:12px; }.emoji { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#fff3eb; font-size:23px; }.name { font-size:17px; font-weight:700; }.detail { margin-top:3px; color:var(--muted); font-size:12px; }.count { margin-left:auto; color:var(--accent); font-size:13px; font-weight:700; white-space:nowrap; }.bar { position:absolute; bottom:0; left:0; height:5px; background:linear-gradient(90deg,#ff9a72,var(--accent)); transition:width .4s ease; }.notice { min-height:20px; margin:18px 3px 12px; text-align:center; color:var(--accent); font-size:13px; }.footer { padding-top:12px; border-top:1px solid var(--line); text-align:center; color:#ae9c92; font-size:11px; }
.result { margin:22px 0 18px; padding:18px; border:1px solid #f5cbbb; border-radius:18px; background:linear-gradient(135deg,#fff0e8,#fffaf6); }.result h2 { margin:0 0 7px; font-size:17px; }.result p { margin:0; color:var(--muted); font-size:13px; }.winner { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px; border-radius:13px; background:#fff; font-weight:700; }.winner span { font-size:22px; }.winner small { display:block; margin-top:3px; color:var(--accent); font-size:12px; }
.admin-open { display:block; margin:22px auto 14px; border:0; background:transparent; color:#9a857b; font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }.modal { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(38,25,20,.45); }.modal[hidden] { display:none; }.modal-card { position:relative; width:min(100%,420px); padding:26px; border-radius:22px; background:#fffaf5; box-shadow:0 20px 60px rgba(0,0,0,.25); }.modal-card h2 { margin:0 0 8px; font-size:21px; }.modal-card p { color:var(--muted); font-size:13px; line-height:1.5; }.modal-card input { width:100%; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; }.modal-card label { display:block; color:var(--muted); font-size:13px; }.primary,.danger { width:100%; padding:12px; border:0; border-radius:10px; color:#fff; font:inherit; font-weight:700; cursor:pointer; }.primary { background:var(--accent); }.danger { background:#a63d32; }.modal-card hr { margin:22px 0; border:0; border-top:1px solid var(--line); }.danger-text { color:#a63d32 !important; }.modal-close { position:absolute; top:12px; right:15px; border:0; background:transparent; color:var(--muted); font-size:25px; cursor:pointer; }.admin-notice { min-height:18px; margin:14px 0 0 !important; color:var(--accent) !important; text-align:center; }
@media (min-width:650px) { body { padding:24px 0; }.page { min-height:calc(100vh - 48px); border-radius:28px; overflow:hidden; box-shadow:0 20px 50px rgba(61,35,26,.12); } }