chore: 初始化 ApiState 服务

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-07-16 09:01:06 +02:00
commit f539710b86
25 changed files with 2383 additions and 0 deletions
@@ -0,0 +1,164 @@
+const $ = (selector) => document.querySelector(selector)
+const fields = (name) => document.querySelectorAll(`[data-field="${name}"]`)
+const setField = (name, value) => fields(name).forEach((node) => { node.textContent = String(value) })
+
+const button = $('#draw-button')
+const stage = $('.draw-stage')
+const statusLine = $('#draw-status')
+const rankingBody = $('#ranking-body')
+const recordList = $('#record-list')
+const creditMode = $('#credit-mode')
+const dialog = $('#winner-dialog')
+
+let state = null
+let drawing = false
+
+function money(value, digits = 2) {
+  return Number(value).toLocaleString('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits })
+}
+
+function compact(value) {
+  return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(Number(value))
+}
+
+function localTime(value) {
+  return new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(value))
+}
+
+function renderRanking(ranking) {
+  const rows = ranking?.rows ?? []
+  if (!rows.length) {
+    rankingBody.innerHTML = '<tr><td colspan="4" class="empty">当前窗口暂无用量</td></tr>'
+    return
+  }
+  rankingBody.innerHTML = rows.map((row) => `<tr>
+    <td>${String(row.rank).padStart(2, '0')}</td>
+    <td><b>${escapeHtml(row.displayName)}</b></td>
+    <td>$${money(row.actualCost, 3)}</td>
+    <td>${compact(row.requests)} 次<span class="usage-detail">${compact(row.tokens)} tokens</span></td>
+  </tr>`).join('')
+}
+
+function renderRecords(records) {
+  if (!records?.length) {
+    recordList.innerHTML = '<li class="empty">第一位幸运用户，会是谁？</li>'
+    return
+  }
+  recordList.innerHTML = records.map((record, index) => `<li>
+    <span class="record-badge">#${String(index + 1).padStart(2, '0')}</span>
+    <span class="record-main"><b>${escapeHtml(record.winnerDisplayName)}</b><small>${localTime(record.drawnAt)} · ${record.eligibleCount} 人等概率</small></span>
+    <span class="record-prize">$${money(record.prizeAmountUsd, 0)}<small>${creditLabel(record.creditStatus)}</small></span>
+  </li>`).join('')
+}
+
+function creditLabel(status) {
+  return ({ succeeded: '已充值', dry_run: '模拟充值', disabled: '充值未开启', pending: '充值待确认', failed: '充值失败' })[status] ?? status
+}
+
+function escapeHtml(value) {
+  const node = document.createElement('span')
+  node.textContent = String(value)
+  return node.innerHTML
+}
+
+function render(next) {
+  state = next
+  setField('active-hours', next.activeWithinHours)
+  setField('prize', money(next.prizeAmountUsd, 0))
+  setField('remaining', next.remainingDraws)
+  setField('eligible', next.eligibleUserCount ?? '—')
+  setField('daily-grant', next.dailyGrantCount)
+  setField('next-grant', localTime(next.nextGrantAt))
+  setField('ranking-label', next.rankingWindowDays === 1 ? '今日' : `近 ${next.rankingWindowDays} 日`)
+  setField('ranking-total', `$${money(next.ranking?.totals?.actualCost ?? 0)}`)
+  renderRanking(next.ranking)
+  renderRecords(next.records)
+  const autoEnabled = next.automaticCredit?.enabled === true
+  creditMode.textContent = autoEnabled ? (next.automaticCredit.mode === 'live' ? '自动充值已开启' : '自动充值模拟中') : '自动充值暂未开启'
+  button.disabled = drawing || Number(next.remainingDraws) < 1 || Number(next.eligibleUserCount) < 1
+  statusLine.textContent = Number(next.remainingDraws) < 1 ? '今天的机会已用完，明早 06:00 再来' : `${next.eligibleUserCount} 名候选人已就位`
+}
+
+async function requestJson(url, options = {}) {
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 12000)
+  try {
+    const response = await fetch(url, { ...options, signal: controller.signal })
+    const raw = await response.text()
+    let data = null
+    try { data = raw ? JSON.parse(raw) : null } catch { /* handled below */ }
+    if (!response.ok || !data?.ok) throw new Error(data?.error ?? `服务暂不可用（HTTP ${response.status}）`)
+    return data
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') throw new Error('请求超时，请稍后重试')
+    throw error
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+async function loadState() {
+  const data = await requestJson('/api/public/state', { cache: 'no-store' })
+  render(data)
+}
+
+function showStateError(error) {
+  const message = error instanceof Error ? error.message : String(error)
+  statusLine.textContent = `${message}，正在重试…`
+  rankingBody.innerHTML = '<tr><td colspan="4" class="empty">服务暂时不可用，正在重试…</td></tr>'
+  creditMode.textContent = '连接中断'
+  button.disabled = true
+}
+
+function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) }
+
+async function draw() {
+  if (drawing) return
+  drawing = true
+  button.disabled = true
+  stage.classList.add('is-drawing')
+  const phrases = ['锁定活跃用户…', '打乱候选顺序…', '正在碰撞好运…', '马上揭晓！']
+  let phraseIndex = 0
+  const ticker = setInterval(() => {
+    statusLine.textContent = phrases[phraseIndex % phrases.length]
+    phraseIndex += 1
+  }, 620)
+  try {
+    const request = requestJson('/api/public/draw', { method: 'POST', headers: { 'content-type': 'application/json' } })
+    const [, data] = await Promise.all([sleep(2900), request])
+    $('#winner-name').textContent = data.record.winnerDisplayName
+    $('#winner-prize').textContent = money(data.record.prizeAmountUsd, 0)
+    $('#winner-meta').textContent = `${data.record.eligibleCount} 人等概率 · ${creditLabel(data.record.creditStatus)}`
+    dialog.showModal()
+    await loadState()
+  } catch (error) {
+    statusLine.textContent = error instanceof Error ? error.message : String(error)
+    await loadState().catch((stateError) => {
+      state = null
+      showStateError(stateError)
+      setTimeout(boot, 5000)
+    })
+  } finally {
+    clearInterval(ticker)
+    drawing = false
+    stage.classList.remove('is-drawing')
+    button.disabled = !state || Number(state.remainingDraws) < 1 || Number(state.eligibleUserCount) < 1
+  }
+}
+
+button.addEventListener('click', draw)
+$('#winner-close').addEventListener('click', () => dialog.close())
+dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close() })
+
+async function boot() {
+  try { await loadState() } catch (error) {
+    showStateError(error)
+    setTimeout(boot, 5000)
+  }
+}
+
+boot()
+
+setInterval(() => {
+  if (!drawing && !document.hidden) loadState().catch(showStateError)
+}, 30000)
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#10100f" />
+    <title>Sub2Rank 幸运额度站</title>
+    <meta name="description" content="PK01 Sub2API 活跃用户每日等概率抽奖与用量排行榜" />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23dfff00'/%3E%3Ctext x='32' y='42' text-anchor='middle' font-size='30' font-family='sans-serif' font-weight='900'%3ES2%3C/text%3E%3C/svg%3E" />
+    <link rel="stylesheet" href="/styles.css" />
+    <script src="/app.js" type="module"></script>
+  </head>
+  <body>
+    <div class="noise" aria-hidden="true"></div>
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="Sub2Rank 首页">
+        <span class="brand-mark">S2</span>
+        <span><b>SUB2RANK</b><small>幸运额度站</small></span>
+      </a>
+      <div class="live-sign"><i></i> PK01 LIVE</div>
+      <p class="rule-copy">最近 <span data-field="active-hours">24</span> 小时活跃用户 · 等概率</p>
+    </header>
+
+    <main>
+      <section class="hero" aria-labelledby="hero-title">
+        <div class="hero-copy">
+          <p class="eyebrow">DAILY CREDIT DRAW / 每日额度抽奖</p>
+          <h1 id="hero-title">今天，<br /><em>好运值多少钱？</em></h1>
+          <p class="hero-note">任何人都可以按下按钮。开奖瞬间从符合条件的活跃用户中等概率抽出一位。</p>
+          <dl class="stats-strip">
+            <div><dt>本期奖金</dt><dd><span class="currency">$</span><span data-field="prize">—</span></dd></div>
+            <div><dt>剩余次数</dt><dd><span data-field="remaining">—</span><small> 次</small></dd></div>
+            <div><dt>候选人数</dt><dd><span data-field="eligible">—</span><small> 人</small></dd></div>
+          </dl>
+        </div>
+
+        <div class="draw-stage">
+          <div class="orbit orbit-one" aria-hidden="true"></div>
+          <div class="orbit orbit-two" aria-hidden="true"></div>
+          <div class="draw-machine" id="draw-machine">
+            <div class="machine-label"><span>ONE PRESS</span><span>ONE WINNER</span></div>
+            <button class="draw-button" id="draw-button" type="button" disabled>
+              <span class="button-glare" aria-hidden="true"></span>
+              <span class="button-copy"><b>立即抽奖</b><small>PRESS TO DRAW</small></span>
+            </button>
+            <div class="machine-status" aria-live="polite" id="draw-status">正在连接开奖台…</div>
+          </div>
+          <p class="next-grant">下次增加 <b data-field="daily-grant">—</b> 次：<time data-field="next-grant">—</time></p>
+        </div>
+      </section>
+
+      <section class="board-grid">
+        <article class="panel ranking-panel">
+          <header class="panel-head">
+            <div><p class="panel-index">01 / USAGE</p><h2>用量排行榜</h2></div>
+            <div class="range-chip"><span data-field="ranking-label">今日</span><b data-field="ranking-total">$—</b></div>
+          </header>
+          <div class="table-wrap">
+            <table aria-label="Sub2API 用户用量排行榜">
+              <thead><tr><th>名次</th><th>用户</th><th>用量</th><th>请求 / Token</th></tr></thead>
+              <tbody id="ranking-body"><tr><td colspan="4" class="empty">正在载入排行榜…</td></tr></tbody>
+            </table>
+          </div>
+        </article>
+
+        <article class="panel records-panel">
+          <header class="panel-head">
+            <div><p class="panel-index">02 / ARCHIVE</p><h2>开奖记录</h2></div>
+            <span class="credit-mode" id="credit-mode">充值状态读取中</span>
+          </header>
+          <ol class="record-list" id="record-list"><li class="empty">暂无开奖记录</li></ol>
+        </article>
+      </section>
+    </main>
+
+    <dialog id="winner-dialog" class="winner-dialog" aria-labelledby="winner-title">
+      <div class="burst" aria-hidden="true"></div>
+      <p class="winner-kicker">TODAY'S LUCKY USER</p>
+      <h2 id="winner-title">恭喜 <span id="winner-name">—</span></h2>
+      <p class="winner-prize">获得 <b>$<span id="winner-prize">—</span></b> 额度</p>
+      <p class="winner-meta" id="winner-meta"></p>
+      <button id="winner-close" type="button">收下好运</button>
+    </dialog>
+
+    <footer><span>SUB2RANK / PK01</span><span>配置与排除名单由 YAML 控制</span></footer>
+  </body>
+</html>
@@ -0,0 +1,146 @@
+:root {
+  --ink: #11110f;
+  --paper: #f0eadb;
+  --acid: #dfff00;
+  --signal: #ff4d2e;
+  --cyan: #60e8df;
+  --line: rgba(240, 234, 219, 0.19);
+  --muted: #a8a496;
+  --serif: "Bodoni 72", "Noto Serif SC", "Songti SC", Georgia, serif;
+  --sans: "Avenir Next Condensed", "DIN Condensed", "Noto Sans SC", sans-serif;
+}
+
+* { box-sizing: border-box; }
+html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; font-family: var(--sans); background:
+  linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.026) 50%, transparent 50.1%) 0 0 / 7.5rem 7.5rem,
+  linear-gradient(rgba(255,255,255,.026) 49.9%, transparent 50.1%) 0 0 / 7.5rem 7.5rem,
+  radial-gradient(circle at 78% 24%, rgba(255,77,46,.11), transparent 31rem), var(--ink); }
+.noise { position: fixed; inset: 0; opacity: .07; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
+
+.topbar { min-height: 5.6rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem clamp(1.2rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
+.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; width: fit-content; }
+.brand-mark { display: grid; place-items: center; width: 2.55rem; aspect-ratio: 1; background: var(--acid); color: var(--ink); font: 900 1rem/1 var(--sans); clip-path: polygon(50% 0, 100% 20%, 90% 100%, 10% 100%, 0 20%); }
+.brand b { display: block; letter-spacing: .16em; font-size: .86rem; }
+.brand small { color: var(--muted); font-size: .72rem; }
+.live-sign { border: 1px solid var(--line); border-radius: 99px; padding: .48rem .8rem; font-size: .68rem; letter-spacing: .16em; }
+.live-sign i { display: inline-block; width: .46rem; height: .46rem; background: var(--signal); border-radius: 50%; margin-right: .42rem; box-shadow: 0 0 0 .25rem rgba(255,77,46,.15); animation: pulse 1.6s infinite; }
+.rule-copy { justify-self: end; color: var(--muted); font-size: .78rem; margin: 0; }
+
+main { width: min(1500px, 100%); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 4.5rem) 4rem; }
+.hero { min-height: 43rem; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(25rem, .98fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); border-bottom: 1px solid var(--line); }
+.eyebrow, .panel-index { color: var(--acid); letter-spacing: .22em; font-size: .7rem; font-weight: 800; }
+h1 { max-width: 14ch; font: 400 clamp(3.8rem, 5.7vw, 7.1rem)/.88 var(--serif); letter-spacing: -.065em; margin: 1rem 0 1.8rem; }
+h1 em { color: var(--acid); font-weight: 400; }
+.hero-note { max-width: 37rem; color: var(--muted); font: 400 clamp(.9rem, 1.3vw, 1.05rem)/1.75 var(--sans); }
+.stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem 0 0; border-block: 1px solid var(--line); }
+.stats-strip div { padding: 1.2rem 1rem 1.2rem 0; }
+.stats-strip div + div { border-left: 1px solid var(--line); padding-left: 1.2rem; }
+.stats-strip dt { color: var(--muted); font-size: .7rem; letter-spacing: .1em; }
+.stats-strip dd { margin: .35rem 0 0; font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 var(--serif); }
+.stats-strip small, .currency { font: 700 .75rem/1 var(--sans); color: var(--acid); }
+
+.draw-stage { min-height: 36rem; display: grid; place-items: center; position: relative; isolation: isolate; overflow: clip; }
+.draw-machine { width: clamp(18rem, 31vw, 29rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; background: radial-gradient(circle, #373732 0 45%, #171715 46% 58%, #292924 59% 60%, #121210 61%); box-shadow: inset 0 0 2rem #000, 0 3rem 6rem rgba(0,0,0,.55); }
+.draw-machine::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; border: 1px dashed rgba(223,255,0,.38); animation: rotate 24s linear infinite; }
+.machine-label { position: absolute; inset: 1.5rem 0 auto; display: flex; justify-content: center; gap: 1.3rem; color: var(--muted); letter-spacing: .18em; font-size: .5rem; }
+.draw-button { width: 50%; aspect-ratio: 1; border: 0; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; color: #fff5e9; background: radial-gradient(circle at 36% 26%, #ff9a70, var(--signal) 37%, #c52912 70%); box-shadow: 0 .8rem 0 #76180d, 0 1.4rem 3rem rgba(255,77,46,.32), inset 0 .25rem .35rem rgba(255,255,255,.45); transition: transform .18s, filter .18s, box-shadow .18s; z-index: 2; }
+.draw-button:not(:disabled):hover { transform: translateY(-.25rem) scale(1.025); filter: saturate(1.2); }
+.draw-button:focus-visible, .winner-dialog button:focus-visible, .brand:focus-visible { outline: .22rem solid var(--cyan); outline-offset: .3rem; }
+.draw-button:not(:disabled):active { transform: translateY(.45rem) scale(.98); box-shadow: 0 .25rem 0 #76180d, 0 .6rem 1.6rem rgba(255,77,46,.28), inset 0 .25rem .35rem rgba(255,255,255,.35); }
+.draw-button:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.65); }
+.button-glare { position: absolute; inset: 7% 18% 56%; border-radius: 50%; background: rgba(255,255,255,.24); filter: blur(.35rem); }
+.button-copy { position: relative; display: grid; gap: .25rem; }
+.button-copy b { font-size: clamp(1.35rem, 2.4vw, 2.2rem); letter-spacing: .04em; }
+.button-copy small { font-size: .52rem; letter-spacing: .18em; }
+.machine-status { position: absolute; bottom: 18%; z-index: 3; width: 70%; text-align: center; color: var(--paper); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
+.orbit-one { width: 88%; aspect-ratio: 1; border: 1px solid rgba(96,232,223,.25); transform: rotate(-14deg) scaleY(.38); }
+.orbit-two { width: 104%; aspect-ratio: 1; border: 1px solid rgba(223,255,0,.2); transform: rotate(19deg) scaleY(.52); }
+.next-grant { position: absolute; bottom: 1.1rem; color: var(--muted); font-size: .72rem; letter-spacing: .04em; }
+.next-grant b { color: var(--acid); }
+.draw-stage.is-drawing .draw-machine { animation: machineCharge 2.8s cubic-bezier(.32,.02,.26,1); }
+.draw-stage.is-drawing .draw-button { animation: buttonCharge .38s alternate infinite; }
+.draw-stage.is-drawing .orbit-one { animation: orbitDash .7s linear infinite; border-color: var(--acid); }
+.draw-stage.is-drawing .orbit-two { animation: orbitDash .95s linear infinite reverse; border-color: var(--signal); }
+
+.board-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr); border-inline: 1px solid var(--line); }
+.panel { min-width: 0; padding: clamp(1.3rem, 3vw, 2.4rem); }
+.panel + .panel { border-left: 1px solid var(--line); }
+.panel-head { min-height: 5.5rem; display: flex; justify-content: space-between; align-items: start; gap: 1rem; border-bottom: 1px solid var(--line); }
+.panel-head h2 { margin: .3rem 0 1.2rem; font: 400 clamp(1.8rem, 3.2vw, 2.8rem)/1 var(--serif); }
+.panel-index { margin: 0; }
+.range-chip, .credit-mode { text-align: right; color: var(--muted); font-size: .67rem; letter-spacing: .08em; }
+.range-chip span, .range-chip b { display: block; }
+.range-chip b { color: var(--paper); font: 400 1.35rem/1.4 var(--serif); }
+.credit-mode { border: 1px solid var(--line); padding: .5rem .65rem; }
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th { color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-align: left; font-weight: 500; padding: .9rem .5rem; }
+td { border-top: 1px solid rgba(240,234,219,.1); padding: 1rem .5rem; font-size: .82rem; }
+td:first-child { width: 4rem; color: var(--acid); font: 400 1.6rem/1 var(--serif); }
+td:nth-child(3) { font: 400 1.1rem/1 var(--serif); }
+.usage-detail { display: block; color: var(--muted); font-size: .63rem; margin-top: .3rem; }
+tbody tr { transition: background .2s, transform .2s; }
+tbody tr:hover { background: rgba(223,255,0,.04); transform: translateX(.2rem); }
+.record-list { list-style: none; margin: 0; padding: 0; }
+.record-list li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .8rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(240,234,219,.1); }
+.record-badge { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--acid); color: var(--acid); font: 700 .6rem/1 var(--sans); }
+.record-main b { display: block; font: 400 1.05rem/1.25 var(--serif); }
+.record-main small, .record-prize small { color: var(--muted); font-size: .61rem; }
+.record-prize { text-align: right; font: 400 1.25rem/1 var(--serif); }
+.empty { color: var(--muted) !important; text-align: center !important; padding: 2.6rem 1rem !important; font: .75rem/1.5 var(--sans) !important; }
+.record-list li.empty { display: block; }
+
+.winner-dialog { width: min(38rem, calc(100% - 2rem)); border: 1px solid rgba(223,255,0,.5); color: var(--paper); background: #171714; padding: clamp(2rem, 6vw, 4.5rem); text-align: center; overflow: hidden; box-shadow: 0 2rem 8rem #000; }
+.winner-dialog::backdrop { background: rgba(5,5,4,.82); backdrop-filter: blur(.7rem); }
+.winner-dialog[open] { animation: reveal .65s cubic-bezier(.18,.85,.3,1.15); }
+.winner-kicker { color: var(--acid); font-size: .68rem; letter-spacing: .2em; }
+.winner-dialog h2 { font: 400 clamp(2.3rem, 7vw, 4rem)/1 var(--serif); margin: 1rem 0; }
+.winner-dialog h2 span { display: block; color: var(--acid); font-size: clamp(1.65rem, 5vw, 3.3rem); overflow-wrap: anywhere; margin-top: .3rem; }
+.winner-prize { color: var(--muted); }
+.winner-prize b { display: block; color: var(--signal); font: 400 clamp(3.4rem, 10vw, 6rem)/1 var(--serif); margin-top: .5rem; }
+.winner-meta { color: var(--muted); font-size: .72rem; min-height: 1em; }
+.winner-dialog button { margin-top: 1.5rem; padding: .8rem 1.5rem; border: 0; background: var(--acid); color: var(--ink); font-weight: 800; cursor: pointer; }
+.burst { position: absolute; inset: 50%; width: 1px; height: 1px; box-shadow: 0 -12rem 0 1px var(--acid), 8rem -8rem 0 1px var(--signal), 12rem 0 0 1px var(--cyan), 8rem 8rem 0 1px var(--acid), 0 12rem 0 1px var(--signal), -8rem 8rem 0 1px var(--cyan), -12rem 0 0 1px var(--acid), -8rem -8rem 0 1px var(--signal); animation: burst 1.4s ease-out both; }
+footer { display: flex; justify-content: space-between; padding: 1.2rem clamp(1.2rem, 4vw, 4.5rem); border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; letter-spacing: .12em; }
+
+@keyframes pulse { 50% { opacity: .45; } }
+@keyframes rotate { to { transform: rotate(360deg); } }
+@keyframes orbitDash { to { rotate: 360deg; } }
+@keyframes buttonCharge { to { filter: brightness(1.35) saturate(1.4); transform: scale(1.035); } }
+@keyframes machineCharge { 20% { transform: scale(.98); } 55% { transform: scale(1.035); filter: hue-rotate(20deg); } 100% { transform: scale(1); } }
+@keyframes reveal { from { opacity: 0; transform: translateY(2rem) scale(.88) rotate(-1deg); } }
+@keyframes burst { from { transform: scale(.2) rotate(0); opacity: 1; } to { transform: scale(1.4) rotate(50deg); opacity: 0; } }
+
+@media (max-width: 960px) {
+  .topbar { grid-template-columns: 1fr auto; }
+  .rule-copy { display: none; }
+  .hero { grid-template-columns: 1fr; padding-block: 4rem 2rem; }
+  .hero-copy { text-align: center; }
+  h1, .hero-note { margin-inline: auto; }
+  .stats-strip { text-align: left; }
+  .draw-stage { min-height: 31rem; }
+  .board-grid { grid-template-columns: 1fr; }
+  .panel + .panel { border-left: 0; border-top: 1px solid var(--line); }
+}
+
+@media (max-width: 560px) {
+  .topbar { min-height: 4.6rem; padding: .8rem 1rem; }
+  .live-sign { font-size: .55rem; }
+  main { padding-inline: 1rem; }
+  h1 { font-size: 3.4rem; }
+  .stats-strip dd { font-size: 1.7rem; }
+  .draw-stage { min-height: 26rem; }
+  .draw-machine { width: min(21rem, 92vw); }
+  .board-grid { border-inline: 0; }
+  .panel { padding-inline: .5rem; }
+  th:last-child, td:last-child { display: none; }
+  .record-list li { grid-template-columns: 2.6rem 1fr; }
+  .record-prize { grid-column: 2; text-align: left; }
+  footer { gap: 1rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
+}