@font-face{
  font-family:Huninn;
  src:url('fonts/huninn.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --ink:#2f3550;
  --muted:#6f7390;
  --cream:#faf7f1;
  --paper:#fffdf8;
  --line:#e6e1d6;
  --lilac:#8b7db0;
  --lilac-deep:#5e497f;
  --peach:#e8a07a;
  --mint:#6f9e8f;
  --gold:#c9a15b;
  --coral:#c56b6b;
  --bunny:#d9e7f4;
  --bonus:#fff0d8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 88% 18%,#e8dff5 0 1.5px,transparent 3px),
    linear-gradient(180deg,#f4f0fa 0,#faf7f1 420px,#fffdf8 100%);
  font-family:Huninn,"PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.7;
}
button,input,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 5%;
  background:#2a2548;
  background-image:radial-gradient(circle at 14px 18px,#ffffffaa 0 1px,transparent 1.6px),linear-gradient(115deg,#1b2240,#302955 66%,#443564);
  background-size:140px 110px,100% 100%;
  color:#f3efff;
  border-bottom:1px solid #aab4d044;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:48px;height:48px;object-fit:contain;border-radius:50%;
  background:#fff8ee;border:2px solid #f0e6d4;flex-shrink:0;
}
.brand strong{display:block;font-size:18px;letter-spacing:1px;font-weight:600}
.brand small{display:block;font-size:12px;opacity:.82;letter-spacing:.4px}
.topbar-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topbar-meta span{
  font-size:12px;padding:6px 12px;border-radius:999px;
  background:#ffffff18;border:1px solid #ffffff2a;
}

main{max-width:980px;margin:0 auto;padding:28px 20px 60px}

.hero{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px 28px 22px;
  box-shadow:0 12px 36px #2f35500c;
}
.eyebrow{margin:0;color:var(--lilac);letter-spacing:2px;font-size:13px}
.hero h1{
  margin:10px 0 14px;font-size:clamp(28px,5vw,40px);
  line-height:1.35;font-weight:600;letter-spacing:.5px;color:#3a3160;
}
.lede{margin:0;color:var(--muted);font-size:15px;max-width:46em}

.chance-note{
  margin:4px 0 18px;
  padding:16px 18px 15px;
  background:linear-gradient(165deg,#fff8ee,#f7f1ff 70%,#fff);
  border:1px solid #e6d9c4;
  border-left:4px solid #c9a15b;
  border-radius:4px 16px 16px 4px;
  box-shadow:0 3px 0 #ebe3d4;
}
.chance-note-label{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:1px;
  color:#8a7148;
  display:flex;
  align-items:center;
  gap:6px;
}
.chance-note-body{
  margin:0;
  font-size:clamp(16px,2.4vw,19px);
  line-height:1.75;
  color:#4a3f2e;
  font-weight:600;
  max-width:40em;
}
.stats{
  margin:16px 0 0;display:inline-flex;gap:10px;flex-wrap:wrap;
  font-size:14px;color:#4d4570;
}
.stats b{
  background:#efeaf8;border:1px solid #ddd4eb;border-radius:999px;
  padding:4px 12px;font-weight:600;
}

.rules{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0;
}
.prize-card{
  border-radius:18px;padding:20px 22px;border:1px solid var(--line);
  box-shadow:0 4px 0 #e7e1d4;
}
.prize-bunny{background:linear-gradient(160deg,#eef5fb,#f7fbfe)}
.prize-bonus{background:linear-gradient(160deg,#fff6e8,#fffaf1)}
.prize-tag{
  display:inline-block;font-size:12px;letter-spacing:1px;
  color:#6a6288;background:#fff;border:1px solid #e5dfd2;
  border-radius:999px;padding:3px 10px;margin-bottom:8px;
}
.prize-card h2{margin:0 0 6px;font-size:22px;font-weight:600;color:#3d355f}
.prize-card p{margin:0;color:var(--muted);font-size:14px}

.settings{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:8px 0 18px;padding:14px 16px;background:#fff;
  border:1px dashed #d8d1e4;border-radius:14px;
}
.toggle{display:flex;align-items:center;gap:10px;color:#4d4570;font-size:14px;flex:1}
.toggle input{width:18px;height:18px;accent-color:var(--lilac-deep)}

.ghost,.primary{
  border-radius:12px;padding:11px 18px;border:1px solid transparent;
  transition:transform .15s,background .15s,box-shadow .15s;
}
.ghost{
  background:#fff;border-color:#d9d2e4;color:#5a5278;
}
.ghost:hover{background:#f7f4fc}
.ghost.danger{color:var(--coral);border-color:#efc7c7}
.primary{
  background:var(--lilac-deep);color:#fff;border:0;
  box-shadow:0 3px 0 #463567;
}
.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.primary:disabled,.draw-btn:disabled{
  opacity:.45;cursor:not-allowed;transform:none;filter:none;
}

.edit-panel{
  background:#fffdf8;border:1px solid #e2dacb;border-radius:16px;
  padding:20px;margin-bottom:22px;
}
.edit-panel h2{margin:0 0 8px;font-size:20px}
.edit-panel p{margin:0 0 12px;color:var(--muted);font-size:14px}
.edit-panel code{background:#f3eee4;padding:2px 6px;border-radius:6px}
.edit-panel textarea{
  width:100%;border:1px solid #d9d1c2;border-radius:12px;
  padding:14px;background:#fff;color:var(--ink);resize:vertical;
  line-height:1.6;min-height:220px;
}
.edit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.feedback{min-height:1.4em;color:var(--mint);font-size:14px}

.draw-board{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 18px;
}
.draw-col{
  background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:22px;text-align:center;
  box-shadow:0 10px 28px #2f355008;
}
.draw-col h2{margin:0 0 6px;font-size:22px;color:#3a3160}
.need{margin:0 0 16px;color:var(--muted);font-size:14px}
.need strong{color:var(--lilac-deep);font-size:18px}
.roller{
  min-height:88px;display:grid;place-items:center;
  margin:0 auto 16px;padding:18px 12px;
  border-radius:16px;border:2px dashed #d5cce4;
  background:linear-gradient(180deg,#f8f5fd,#fff);
  font-size:clamp(22px,4vw,30px);font-weight:600;color:#4a3f72;
  letter-spacing:.3px;
}
.roller.rolling{
  animation:pulse .18s ease-in-out infinite alternate;
  border-style:solid;border-color:var(--lilac);color:var(--lilac-deep);
}
.roller.winner{
  border-style:solid;border-color:var(--gold);
  background:linear-gradient(180deg,#fff8e8,#fff);
  color:#7a5a1e;box-shadow:0 0 0 4px #f3e2b855;
}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.02)}}

.winners{
  list-style:none;margin:18px 0 0;padding:0;text-align:left;
  display:grid;gap:8px;
}
.winners:empty::before{
  content:"尚未開出";display:block;text-align:center;
  color:#9a95ad;font-size:13px;padding:8px 0;
}
.winners li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f6f3fb;border:1px solid #e4dcee;border-radius:12px;
  padding:10px 14px;font-size:15px;
}
.winners li.highlight{
  background:#fff6df;border-color:#e8d39a;
  animation:pop .45s ease;
}
.winners .place{color:#8a7a4a;font-size:13px}
.winners .handle{font-weight:600;color:#3d355f}
@keyframes pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}

.timestamp{
  text-align:center;color:var(--muted);font-size:13px;min-height:1.5em;margin:0 0 28px;
}

.entrant-section{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;
}
.section-head h2{margin:0 0 6px;font-size:22px;color:#3a3160}
.section-head p{margin:0 0 16px;color:var(--muted);font-size:14px}
.entrant-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}
.entrant-list li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:12px;background:#faf8f3;
  border:1px solid #ece6da;font-size:14px;
}
.entrant-list .handle{font-weight:600;color:#3d355f;overflow-wrap:anywhere}
.entrant-list .count{
  flex-shrink:0;background:#efeaf8;color:#5e497f;
  border-radius:999px;padding:2px 9px;font-size:12px;
}
.entrant-list li.won-bunny{box-shadow:inset 3px 0 0 #7aa7c9}
.entrant-list li.won-bonus{box-shadow:inset 3px 0 0 #d4a65a}
.entrant-list li.won-bunny.won-bonus{box-shadow:inset 3px 0 0 #7aa7c9, inset 6px 0 0 #d4a65a}

footer{
  text-align:center;padding:10px 20px 48px;color:#8a879c;font-size:13px;line-height:2;
}
footer strong{color:#4d4570;letter-spacing:1px}

@media(max-width:720px){
  .rules,.draw-board{grid-template-columns:1fr}
  .topbar{padding:12px 4%;align-items:flex-start}
  .brand-logo{width:42px;height:42px}
  .hero{padding:22px 18px}
  .draw-col{padding:18px 14px}
  .settings{align-items:flex-start}
}