/* ════════════════════════════════════════════════════════════════
   活动互动大屏 · 视觉系统 (frontend-design 重建版)
   主题：午夜深蓝 × 电光珊瑚(能量) × 暖金(荣誉) × 柔紫(数据)
   签名动效：能量波抽球 —— 抽奖时名字从中心向外爆裂，金光粒子
   字体：系统中文优先，ZCOOL KuaiLe / Noto Sans SC / JetBrains Mono 增强
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* 中性底色 */
  --bg-deep:      #070B12;
  --bg-card:      #0E1626;
  --bg-elevated:  #16203A;
  /* 签名三色 */
  --coral:        #FF5C35;   /* 能量 / 主操作 */
  --coral-glow:   rgba(255,92,53,.35);
  --gold:         #FFC24B;   /* 荣誉 / 中奖高光 */
  --gold-glow:    rgba(255,194,75,.42);
  --violet:       #8A6CFF;   /* 数据 / 次级 */
  --violet-glow:  rgba(138,108,255,.30);
  /* 文本 */
  --text-primary:   #F3F6FC;
  --text-secondary: rgba(243,246,252,.62);
  --text-muted:     rgba(243,246,252,.32);
  /* 网格 */
  --grid:        rgba(138,108,255,.05);
  /* 字体 */
  --font-display: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --font-body:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow: hidden; }

/* ── 环境氛围：点阵网格 + 双色柔光 + 扫描线 ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,92,53,.10), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(138,108,255,.12), transparent 45%),
    radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 34px 34px;
  background-position: 0 0, 0 0, 0 0;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
              rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px);
}

/* ════════════════════════════════════════════════════════════════
   落地页 (Landing)
   ════════════════════════════════════════════════════════════════ */
body.landing { overflow: auto; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.landing-wrap {
  position: relative; z-index: 2;
  text-align: center; padding: 6vh 5vw; max-width: 720px; width: 100%;
}
.brand {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .28em;
  color: var(--text-secondary); text-transform: uppercase; margin-bottom: 3vh;
}
.landing-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88px); line-height: 1.1;
  color: var(--text-primary);
  text-shadow: 0 0 50px var(--coral-glow); margin-bottom: 5vh;
}
.qr-box { display: inline-block; }
.qr-box img {
  width: clamp(180px, 26vw, 280px); height: clamp(180px, 26vw, 280px);
  background: #fff; border-radius: 18px; padding: 12px;
  box-shadow: 0 0 60px var(--coral-glow), 0 20px 60px rgba(0,0,0,.5);
}
.qr-tip { margin-top: 2.4vh; color: var(--text-secondary); font-size: clamp(13px,1.4vw,17px); line-height: 1.7; }
.landing-actions { margin-top: 5vh; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* 通用按钮 */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none; display: inline-block; transition: all .18s ease;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 8px 26px var(--coral-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--coral-glow); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid rgba(243,246,252,.2); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════
   大屏舞台
   ════════════════════════════════════════════════════════════════ */
#stage {
  position: relative; z-index: 2;
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
}
.scene {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 5vh 5vw; position: relative;
}
.scene.active { display: flex; }

/* 场景标题条 */
.scene-head {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 3vh; display: flex; align-items: center; gap: .7em;
}
.scene-head .count, .scene-head b {
  font-family: var(--font-mono); font-weight: 700; color: var(--gold);
  text-shadow: 0 0 18px var(--gold-glow);
}
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 14px var(--coral-glow);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* ── 空闲首页 ── */
#scene-idle .big-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 140px); line-height: 1.05;
  color: var(--text-primary); text-shadow: 0 0 70px var(--coral-glow);
  margin-bottom: 1.5vh;
}
#scene-idle .big-sub {
  font-weight: 300; color: var(--text-secondary);
  font-size: clamp(15px, 1.7vw, 24px); letter-spacing: .18em; margin-bottom: 3vh;
}
#scene-idle .qr-center {
  width: clamp(170px, 20vw, 260px); height: clamp(170px, 20vw, 260px);
  background: #fff; border-radius: 16px; overflow: hidden; padding: 10px;
  box-shadow: 0 0 50px var(--coral-glow);
}
#scene-idle .qr-center img { width: 100%; height: 100%; object-fit: contain; }

/* ── 签到墙 ── */
#scene-checkin .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
.checkin-wall {
  display: flex; flex-wrap: wrap; gap: 1vh 1.2vw; justify-content: center;
  max-height: 82vh; overflow-y: auto; padding: 1vh 0; align-content: flex-start;
}
.checkin-wall::-webkit-scrollbar { width: 5px; }
.checkin-wall::-webkit-scrollbar-thumb { background: var(--coral); border-radius: 3px; }
.checkin-tag {
  font-weight: 700; font-size: clamp(13px, 1.5vw, 20px);
  padding: .55vh .9vw; border-radius: 6px;
  background: var(--bg-elevated); border-left: 3px solid var(--coral);
  color: var(--text-primary); white-space: nowrap;
  animation: tag-pop .34s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tag-pop { from{opacity:0;transform:scale(.6) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }

/* ── 抽奖：能量波抽球（签名） ── */
#scene-lottery .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
#scene-lottery .scene-head .round-name { font-family: var(--font-mono); color: var(--gold); }
.lottery-main { position: relative; display: flex; flex-direction: column; align-items: center; }
.draw-stage {
  position: relative; width: clamp(320px, 40vw, 620px); height: clamp(180px, 26vh, 320px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255,92,53,.10), transparent 70%);
}
.draw-stage::before {
  content: ''; position: absolute; inset: -2px; border-radius: 24px;
  border: 1px solid rgba(138,108,255,.25);
  box-shadow: inset 0 0 60px rgba(138,108,255,.12);
}
.draw-stage.rolling { animation: stage-breathe 1.1s ease-in-out infinite; }
@keyframes stage-breathe {
  0%,100% { box-shadow: inset 0 0 50px rgba(255,92,53,.10); }
  50%     { box-shadow: inset 0 0 90px rgba(255,92,53,.28); }
}
.lottery-roll {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 104px); letter-spacing: .04em;
  color: var(--coral); text-shadow: 0 0 40px var(--coral-glow), 0 0 80px var(--coral-glow);
  text-align: center; line-height: 1.1; z-index: 2;
}
.draw-stage.win .lottery-roll { color: var(--gold); text-shadow: 0 0 50px var(--gold-glow), 0 0 100px var(--gold-glow); }
/* 能量波纹 */
.ripple {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--coral);
  transform: translate(-50%,-50%); opacity: 0; pointer-events: none;
}
.ripple.go { animation: ripple-out 1.6s ease-out forwards; }
@keyframes ripple-out {
  0%   { width: 10px; height: 10px; opacity: .9; }
  100% { width: 900px; height: 900px; opacity: 0; }
}
.lottery-winners {
  display: flex; flex-wrap: wrap; gap: 1.4vw 1.8vw; justify-content: center;
  max-width: 92vw; margin-top: 3vh;
}
.winner-card {
  font-weight: 700; font-size: clamp(16px, 2.2vw, 30px);
  padding: .8vh 1.6vw; border-radius: 10px;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid var(--gold); color: var(--gold);
  box-shadow: 0 0 28px var(--gold-glow);
  animation: winner-burst .55s cubic-bezier(.34,1.56,.64,1) both; position: relative; overflow: hidden;
}
.winner-card span { color: var(--text-secondary); font-family: var(--font-mono); font-size: .7em; margin-left: .5em; }
.winner-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,194,75,.18), transparent);
  animation: shimmer 2.2s ease-in-out infinite;
}
@keyframes winner-burst { from{opacity:0;transform:scale(0) rotate(-12deg);} to{opacity:1;transform:scale(1) rotate(0);} }
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ── 投票 ── */
#scene-vote .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
.vote-q {
  font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 48px);
  color: var(--text-primary); text-align: center; margin-bottom: 4vh; line-height: 1.3;
}
.vote-bars { width: min(82vw, 860px); display: flex; flex-direction: column; gap: 1.6vh; }
.vote-row { display: flex; align-items: center; gap: 1.2vw; }
.vote-label {
  font-weight: 700; font-size: clamp(14px, 1.6vw, 20px); color: var(--text-primary);
  min-width: 22%; text-align: right;
}
.vote-bar-track {
  flex: 1; height: clamp(26px, 3.4vh, 46px); background: var(--bg-elevated);
  border-radius: 8px; overflow: hidden; position: relative;
}
.vote-bar-fill {
  height: 100%; border-radius: 8px; width: 0;
  background: linear-gradient(90deg, var(--coral), var(--violet));
  transition: width .65s cubic-bezier(.4,0,.2,1); position: relative;
}
.vote-bar-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  background: #fff; opacity: .7; box-shadow: 0 0 12px #fff;
}
.vote-pct { font-family: var(--font-mono); font-size: clamp(13px, 1.3vw, 17px); color: var(--text-secondary); min-width: 13%; }

/* ── 弹幕 ── */
#scene-danmu .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
.danmu-stage {
  width: 100%; height: 78vh; position: relative; overflow: hidden;
  background: rgba(255,255,255,.012); border-radius: 14px;
  border: 1px solid rgba(243,246,252,.06);
}
.danmu-item {
  position: absolute; white-space: nowrap; font-weight: 700;
  font-size: clamp(16px, 2.2vw, 30px); color: #fff;
  padding: .35em .7em; border-radius: 999px;
  background: rgba(7,11,18,.7); border: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 0 12px rgba(0,0,0,.8); animation: danmu-fly linear forwards;
}
.danmu-item.coral  { color: var(--coral); border-color: var(--coral-glow); }
.danmu-item.gold   { color: var(--gold); border-color: var(--gold-glow); }
.danmu-item.violet { color: var(--violet); border-color: var(--violet-glow); }
@keyframes danmu-fly { from{left:105%;} to{left:-115%;} }

/* ── 答题 PK ── */
#scene-quiz .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
.quiz-q {
  font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 48px);
  text-align: center; margin-bottom: 3vh; line-height: 1.35; color: var(--text-primary);
}
.quiz-opts { display: flex; flex-wrap: wrap; gap: 2vw; justify-content: center; margin-bottom: 4vh; }
.quiz-opt {
  font-weight: 700; font-size: clamp(16px, 2.2vw, 28px);
  padding: 1.3vh 2.4vw; border-radius: 12px;
  background: var(--bg-elevated); border: 2px solid rgba(243,246,252,.08); color: var(--text-primary);
  animation: opt-pop .32s cubic-bezier(.34,1.56,.64,1) both;
}
.quiz-opt.correct { border-color: var(--coral); color: var(--coral); box-shadow: 0 0 24px var(--coral-glow); }
.quiz-opt.wrong { border-color: var(--text-muted); color: var(--text-muted); }
@keyframes opt-pop { from{opacity:0;transform:scale(.7);} to{opacity:1;transform:scale(1);} }
.quiz-rank { width: min(82vw, 760px); display: flex; flex-direction: column; gap: 1vh; }
.rank-row {
  display: flex; align-items: center; gap: 1.2vw; padding: .9vh 1.3vw;
  background: var(--bg-elevated); border-radius: 8px; border-left: 3px solid var(--coral);
  animation: rank-in .42s ease both;
}
.rank-row:nth-child(1) { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,194,75,.12), var(--bg-elevated)); }
.rank-row:nth-child(2) { border-color: #C9D2E0; }
.rank-row:nth-child(3) { border-color: #CD7F32; }
.rank-pos { font-family: var(--font-mono); font-weight: 700; font-size: clamp(18px,2.6vw,34px); color: var(--coral); min-width: 2.4em; text-align: center; }
.rank-name { font-weight: 700; font-size: clamp(15px,1.8vw,24px); color: var(--text-primary); flex: 1; }
.rank-score { font-family: var(--font-mono); font-size: clamp(14px,1.5vw,19px); color: var(--text-secondary); }
@keyframes rank-in { from{opacity:0;transform:translateX(-22px);} to{opacity:1;transform:translateX(0);} }

/* ── 摇一摇 ── */
#scene-shake .scene-head { font-size: clamp(17px, 2.2vw, 30px); }
.shake-rank { width: min(82vw, 760px); display: flex; flex-direction: column; gap: 1vh; }
.shake-row {
  display: flex; align-items: center; gap: 1.2vw; padding: .9vh 1.3vw;
  background: var(--bg-elevated); border-radius: 8px; border-left: 3px solid var(--violet);
  animation: rank-in .34s ease both;
}
.shake-row .rank-pos { color: var(--violet); }
.shake-count { font-family: var(--font-mono); font-size: clamp(14px,1.5vw,19px); color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════
   主控台 Dock
   ════════════════════════════════════════════════════════════════ */
#dock-toggle {
  position: fixed; bottom: 2.4vh; right: 2vw; z-index: 100;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid rgba(243,246,252,.12);
  color: var(--text-secondary); font-size: 22px; cursor: pointer;
  transition: all .2s; box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
#dock-toggle:hover { background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: 0 6px 26px var(--coral-glow); }
#dock {
  position: fixed; bottom: 2.4vh; right: 2vw; z-index: 99;
  width: min(390px, 86vw); max-height: 78vh;
  background: var(--bg-card); border: 1px solid rgba(243,246,252,.1);
  border-radius: 16px; box-shadow: 0 18px 64px rgba(0,0,0,.62);
  display: flex; flex-direction: column; overflow: hidden;
  animation: dock-in .26s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dock-in { from{opacity:0;transform:translateY(22px) scale(.95);} to{opacity:1;transform:translateY(0) scale(1);} }
#dock.hidden { display: none; }
.dock-head {
  padding: 1.3vh 1.6vw; font-weight: 700; font-size: 14px; color: var(--text-secondary);
  border-bottom: 1px solid rgba(243,246,252,.07); display: flex; align-items: center; justify-content: space-between;
}
.dock-head .brand-dot { width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px var(--coral-glow);display:inline-block;margin-right:.5em;vertical-align:middle; }
.dock-logout { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.dock-logout:hover { color: var(--coral); }
.dock-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 1vh 1vw; border-bottom: 1px solid rgba(243,246,252,.07); }
.dock-tabs button {
  font-weight: 700; font-size: 12px; padding: .5vh .9vw; border-radius: 6px;
  background: transparent; border: 1px solid rgba(243,246,252,.1); color: var(--text-secondary); cursor: pointer; transition: all .15s;
}
.dock-tabs button:hover, .dock-tabs button.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.dock-body { flex: 1; overflow-y: auto; padding: 1.6vw; }
.dock-body::-webkit-scrollbar { width: 5px; }
.dock-body::-webkit-scrollbar-thumb { background: var(--coral); border-radius: 3px; }
.dock-pane { display: none; }
.dock-pane.active { display: block; }
.dock-pane p { font-size: 12px; color: var(--text-secondary); margin-bottom: 1vh; }
.dock-pane .muted { color: var(--text-muted); font-size: 11px; line-height: 1.6; }

.form { display: flex; flex-direction: column; gap: .9vh; }
.form input, .form textarea {
  font-family: var(--font-body); font-size: 13px; padding: .9vh 1vw; border-radius: 8px;
  background: var(--bg-elevated); border: 1px solid rgba(243,246,252,.1); color: var(--text-primary);
  outline: none; transition: border-color .15s;
}
.form input:focus, .form textarea:focus { border-color: var(--coral); }
.form textarea { resize: vertical; min-height: 90px; }
.btn-row { display: flex; gap: .8vw; flex-wrap: wrap; margin-top: 1vh; }
.btn.s { background: var(--coral); color: #fff; font-size: 13px; padding: .65vh 1.3vw; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; transition: all .15s; }
.btn.s:hover { background: #e84d28; box-shadow: 0 4px 16px var(--coral-glow); }
.btn.ghost { background: transparent; border: 1px solid rgba(243,246,252,.14); color: var(--text-secondary); }
.btn.ghost:hover { border-color: var(--coral); color: var(--coral); }
.list { margin-top: 1vh; display: flex; flex-direction: column; gap: .6vh; }
.list-item {
  font-size: 12px; padding: .7vh .9vw; background: var(--bg-elevated); border-radius: 6px;
  color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; gap: .6em;
}
.list-item .meta { display: flex; gap: .5em; align-items: center; }
.list-item .badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(138,108,255,.2); color: var(--violet); }
.list-item .remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.list-item .remove:hover { color: var(--coral); }
.list-item .draw { background: var(--gold); color: #1a1300; border: none; border-radius: 6px; font-weight: 700; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.list-item .draw:hover { box-shadow: 0 0 16px var(--gold-glow); }
label { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: .45em; cursor: pointer; margin: .2vh 0; }
label input[type="checkbox"] { accent-color: var(--coral); }

/* ════════════════════════════════════════════════════════════════
   手机端 H5
   ════════════════════════════════════════════════════════════════ */
body.phone-body { overflow: auto; background: var(--bg-deep); }
.phone-app {
  position: relative; z-index: 2; max-width: 520px; margin: 0 auto;
  min-height: 100vh; padding: 18px 16px 40px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,92,53,.10), transparent 40%),
    radial-gradient(circle at 6% 90%, rgba(138,108,255,.12), transparent 42%);
}
.phone-head {
  font-family: var(--font-display); font-size: 22px; text-align: center;
  color: var(--text-primary); padding: 8px 0 18px; letter-spacing: .04em;
  text-shadow: 0 0 24px var(--coral-glow);
}
.card {
  background: var(--bg-card); border: 1px solid rgba(243,246,252,.08);
  border-radius: 16px; padding: 18px 16px; margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card h2 { font-family: var(--font-display); font-size: 24px; margin-bottom: 16px; color: var(--text-primary); }
.card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.card input {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  padding: 13px 14px; border-radius: 10px; margin-bottom: 12px;
  background: var(--bg-elevated); border: 1px solid rgba(243,246,252,.1);
  color: var(--text-primary); outline: none; transition: border-color .15s;
}
.card input:focus { border-color: var(--coral); }
.btn.primary { background: var(--coral); color: #fff; }
.btn.primary:hover { background: #e84d28; }
.btn.block { width: 100%; display: block; text-align: center; padding: 14px; font-size: 16px; }
.btn.s { background: var(--coral); color: #fff; padding: 9px 16px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; font-size: 14px; }
.hint { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.me {
  background: linear-gradient(135deg, rgba(255,194,75,.14), var(--bg-card));
  border: 1px solid var(--gold); border-radius: 12px; padding: 12px 14px;
  font-size: 14px; color: var(--text-primary); margin-bottom: 16px;
}
.me b { color: var(--gold); }
.q { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; line-height: 1.4; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opts button {
  width: 100%; text-align: left; font-family: var(--font-body); font-size: 16px; font-weight: 700;
  padding: 14px 16px; border-radius: 12px; background: var(--bg-elevated);
  border: 2px solid rgba(243,246,252,.08); color: var(--text-primary); cursor: pointer; transition: all .15s;
}
.opts button:hover { border-color: var(--coral); }
.opts button.chosen { border-color: var(--gold); color: var(--gold); background: rgba(255,194,75,.1); }
.opts button:disabled { opacity: .85; cursor: default; }
.timer { font-family: var(--font-mono); font-size: 14px; color: var(--coral); margin-bottom: 12px; }
.shake-btn {
  width: 100%; font-family: var(--font-display); font-size: 30px; padding: 22px;
  border-radius: 18px; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--coral));
  box-shadow: 0 10px 30px var(--violet-glow); transition: transform .08s;
  display: flex; align-items: center; justify-content: center; gap: .3em;
}
.shake-btn:active { transform: scale(.96); }
.shake-btn span { font-family: var(--font-mono); font-size: 22px; }
.wheel {
  width: 92px; height: 92px; margin: 6px auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  background: radial-gradient(circle at 50% 50%, rgba(255,194,75,.25), var(--bg-elevated));
  border: 2px solid var(--gold); box-shadow: 0 0 26px var(--gold-glow);
}
.wheel.go { animation: wheel-spin 1.8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wheel-spin { from{transform:rotate(0);} to{transform:rotate(1440deg);} }
.row { display: flex; gap: 10px; }
.row input { flex: 1; margin-bottom: 0; }
.hidden { display: none !important; }

/* 可访问性：键盘聚焦 & 减弱动效 */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}