/* ═══ 厦门中秋博饼 · 大气海报风 ═══ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --gold:#f5c66b; --gold-d:#c9922f; --red:#a41919; --red-d:#5f0d0d;
  --ink:#2a1205; --paper:#fff7e8;
}
body{
  font-family:"PingFang SC","Microsoft YaHei",serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #7a1414 0%, transparent 60%),
    linear-gradient(180deg,#3d0808 0%, #6b1010 45%, #8c1a1a 100%);
  color:var(--paper); min-height:100vh; overflow-x:hidden;
}
#petals{ position:fixed; inset:0; pointer-events:none; z-index:5; }

/* ─── 海报头 ─── */
.poster{ position:relative; text-align:center; padding:90px 20px 70px; overflow:hidden; }
.moon{
  position:absolute; top:36px; left:50%; transform:translateX(-50%);
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #fff8e0, #f7d98b 55%, #e8b955);
  box-shadow:0 0 90px 30px rgba(245,198,107,.45), 0 0 200px 80px rgba(245,198,107,.18);
}
.cloud{ position:absolute; width:150px; height:34px; background:rgba(245,198,107,.05);
  border-radius:34px; animation:drift 20s ease-in-out infinite alternate; pointer-events:none; }
.cloud::before,.cloud::after{ content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud::before{ width:52px; height:52px; top:-22px; left:24px; }
.cloud::after{ width:38px; height:38px; top:-12px; right:26px; }
.c1{ top:95px; left:12%; } .c2{ top:265px; right:6%; animation-delay:-6s; transform:scale(.85); }
.c3{ top:72px; right:22%; animation-delay:-11s; transform:scale(.65); }
@keyframes drift{ from{ margin-left:-24px; } to{ margin-left:24px; } }

.eyebrow{ position:relative; letter-spacing:.55em; font-size:12px; color:var(--gold); opacity:.85; margin-bottom:22px; }
.title-wrap{ position:relative; }
.title{ position:relative; display:inline-block; font-size:clamp(58px,11vw,120px); font-weight:900;
  line-height:1.15; letter-spacing:.1em; color:#f7d98b;
  text-shadow:0 1px 0 #d4a94e, 0 2px 0 #a5761f, 0 3px 0 #7a5310,
              0 6px 18px rgba(0,0,0,.55), 0 0 36px rgba(245,198,107,.3);
  animation:titleIn 1.2s cubic-bezier(.2,1.4,.4,1) both; }
.title span{ display:inline-block; animation:bob 3.2s ease-in-out infinite; }
.title span:nth-child(2){ animation-delay:.15s } .title span:nth-child(3){ animation-delay:.3s } .title span:nth-child(4){ animation-delay:.45s }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes titleIn{ from{ opacity:0; transform:scale(1.35); } to{ opacity:1; transform:scale(1); } }
.subtitle{ position:relative; margin-top:14px; font-size:clamp(15px,2.6vw,22px); letter-spacing:.5em; color:#ffe6ad; }
.divider{ position:relative; margin:26px auto 14px; display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); }
.divider i{ display:block; width:min(180px,26vw); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold)); }
.divider i:last-child{ transform:scaleX(-1); }
.slogan{ position:relative; color:#f3d9a4; opacity:.85; font-size:14px; letter-spacing:.15em; }
.cta{
  position:relative; display:inline-block; margin-top:36px; padding:15px 58px;
  font-size:19px; letter-spacing:.35em; text-indent:.35em; color:var(--red-d); font-weight:700;
  background:linear-gradient(180deg,#ffe9b0,var(--gold) 55%,var(--gold-d));
  border-radius:999px; text-decoration:none;
  box-shadow:0 8px 26px rgba(245,198,107,.4), inset 0 2px 0 rgba(255,255,255,.7);
  transition:transform .25s, box-shadow .25s;
}
.cta:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 34px rgba(245,198,107,.55); }

/* ─── 游戏区 ─── */
.game{ position:relative; max-width:860px; margin:0 auto; padding:40px 16px 60px; text-align:center; }
.bowl-wrap{ position:relative; width:min(620px,92vw); height:300px; margin:0 auto; }
.bowl{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; height:230px; border-radius:50% / 46%;
  background:radial-gradient(ellipse at 50% 30%, #8c1f1f 0%, #5f0d0d 55%, #3d0808 100%);
  box-shadow:inset 0 -26px 50px rgba(0,0,0,.65), inset 0 14px 30px rgba(255,180,90,.22),
             0 24px 50px rgba(0,0,0,.5);
  border:6px solid var(--gold-d);
}
.bowl::after{ /* 碗沿高光 */
  content:""; position:absolute; left:6%; right:6%; top:7%; height:34%;
  border-radius:50%; background:radial-gradient(ellipse at 50% 40%, rgba(255,215,140,.28), transparent 70%);
}
.bowl::before{ /* 碗底淡水印 */
  content:"aomidou.com"; position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  font-family:Arial,Helvetica,sans-serif; font-size:12px; letter-spacing:3px;
  color:rgba(255,226,175,.14); pointer-events:none; white-space:nowrap; z-index:1;
}
.dice-row{ position:absolute; left:50%; bottom:70px; transform:translateX(-50%);
  display:flex; gap:clamp(8px,2.4vw,22px); z-index:2; perspective:900px; }

/* 3D 骰子 */
.dice{ width:64px; height:64px; }
.cube{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.05s cubic-bezier(.16,.84,.3,1); }
.face{
  position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(145deg,#fffdf6,#f3e6c8);
  box-shadow:inset 0 0 10px rgba(120,70,0,.25);
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
}
.pips{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:70%; height:70%; }
.pips span{ border-radius:50%; }
.pips span.on{ background:radial-gradient(circle at 35% 30%, #4a4a4a, #101010); box-shadow:inset 0 -1px 2px rgba(255,255,255,.3); }
.pips.red span.on{ background:radial-gradient(circle at 35% 30%, #ff6b5e, #b31212); }

/* 投掷动画 */
.dice.rolling .cube{ animation:tumble .9s cubic-bezier(.3,.7,.4,1) infinite; }
.dice.rolling{ animation:bounce .9s ease-in-out infinite; }
@keyframes tumble{
  0%{ transform:rotateX(0) rotateY(0) rotateZ(0); }
  100%{ transform:rotateX(720deg) rotateY(540deg) rotateZ(360deg); }
}
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-46px) } }

/* 控件 */
.controls{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px; }
#nick{
  width:min(320px,80vw); padding:13px 20px; text-align:center; font-size:16px; letter-spacing:.1em;
  color:var(--ink); background:var(--paper); border:2px solid var(--gold-d); border-radius:999px; outline:none;
}
#nick:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,198,107,.25); }
.roll-btn{
  padding:17px 86px; font-size:26px; font-weight:900; letter-spacing:.4em; text-indent:.4em;
  color:#fff8e6; cursor:pointer; border:none; border-radius:999px;
  background:linear-gradient(180deg,#d42b2b,#a41919 60%,#7a0f0f);
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .15s, filter .15s;
}
.roll-btn:hover:not(:disabled){ transform:translateY(-2px) scale(1.02); filter:brightness(1.1); }
.roll-btn:disabled{ filter:grayscale(.6) brightness(.75); cursor:not-allowed; }
.chance{ color:#f3d9a4; font-size:14px; letter-spacing:.12em; }
.chance b{ color:var(--gold); font-size:18px; }

/* 结果牌匾 */
.result{ position:relative; margin:36px auto 0; padding:30px 26px; max-width:480px;
  background:linear-gradient(160deg,#fff3d6,#f7dfa8); color:var(--ink); border-radius:14px;
  border:3px solid var(--gold-d); box-shadow:0 16px 40px rgba(0,0,0,.4);
  animation:pop .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.6) translateY(24px); } to{ opacity:1; transform:scale(1); } }
.seal{
  display:inline-block; padding:10px 30px; font-size:30px; font-weight:900; letter-spacing:.2em;
  color:#fff8e6; background:linear-gradient(180deg,#c62828,#8e1111);
  border:2px solid var(--gold); border-radius:8px; transform:rotate(-2deg);
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
#resultDesc{ margin-top:14px; font-size:15px; color:#6b4a12; }
.hidden{ display:none; }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:20; }

/* ─── 规则 ─── */
.rules{ max-width:1020px; margin:30px auto; padding:50px 18px; text-align:center; }
.rules h2, .board-wrap h2{ font-size:26px; letter-spacing:.4em; text-indent:.4em; color:var(--gold); margin-bottom:22px; }
.rules-tip{ color:#f3d9a4; opacity:.85; margin-bottom:30px; letter-spacing:.1em; }
.rule-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.rule-card{
  padding:24px 22px; text-align:left; border-radius:12px;
  background:rgba(255,244,214,.07); border:1px solid rgba(245,198,107,.35);
  backdrop-filter:blur(4px); transition:transform .25s, background .25s;
}
.rule-card:hover{ transform:translateY(-5px); background:rgba(255,244,214,.14); }
.rule-card h3{ font-size:21px; color:var(--gold); letter-spacing:.15em; margin-bottom:10px; }
.rule-card h3 em{ font-style:normal; font-size:13px; color:#ffe6ad; margin-left:8px; opacity:.85; }
.rule-card p{ font-size:13.5px; line-height:1.8; color:#f3e2bd; opacity:.9; }

/* ─── 奖品 & 榜 ─── */
.board-wrap{ max-width:1020px; margin:0 auto; padding:20px 18px 60px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; }
.prizes ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.prizes li{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:10px;
  background:rgba(255,244,214,.07); border:1px solid rgba(245,198,107,.3); }
.p-name{ width:56px; font-weight:700; color:var(--gold); letter-spacing:.1em; }
.p-bar{ flex:1; height:10px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.p-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold-d),var(--gold));
  transition:width .6s ease; }
.p-left{ width:58px; text-align:right; font-size:13px; color:#ffe6ad; }
.rank-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.rank-list li{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:10px;
  background:rgba(255,244,214,.07); border:1px solid rgba(245,198,107,.3); font-size:14px; }
.rank-list li.empty{ justify-content:center; color:#f3d9a4; opacity:.7; }
.rank-no{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(245,198,107,.18); color:var(--gold); font-weight:700; flex:none; }
.rank-list li:nth-child(1) .rank-no{ background:linear-gradient(180deg,#ffe9b0,var(--gold-d)); color:var(--red-d); }
.rank-nick{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-prize{ color:var(--gold); font-weight:700; letter-spacing:.08em; }
.rank-time{ font-size:12px; opacity:.6; }
footer{ text-align:center; padding:36px 16px 44px; color:#f3d9a4; opacity:.6; font-size:13px; letter-spacing:.25em; }

@media (max-width:560px){
  .dice{ width:46px; height:46px; }
  .face{ border-radius:9px; } .pips{ gap:3.5px; }
  .bowl-wrap{ height:240px; } .bowl{ height:185px; }
  .dice-row{ bottom:56px; }
}

/* ─── 分场版新增 ─── */
.round-bar{ display:flex; justify-content:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
.round-bar span{ padding:9px 22px; border-radius:999px; background:rgba(255,244,214,.08);
  border:1px solid rgba(245,198,107,.4); color:#ffe6ad; font-size:14px; letter-spacing:.1em; }
.board-sub{ text-align:center; color:#f3d9a4; opacity:.75; font-size:12.5px; margin:-12px 0 16px; letter-spacing:.12em; }
.rank-score{ color:var(--gold); font-weight:700; white-space:nowrap; }
.medal-list .rank-no{ width:44px; border-radius:8px; }
.medal-list li:nth-child(1) .rank-no{ background:linear-gradient(180deg,#ffe9b0,#c9922f); color:#5f0d0d; }
.medal-list li:nth-child(2) .rank-no{ background:linear-gradient(180deg,#f4f4f4,#9d9d9d); color:#333; }
.medal-list li:nth-child(3) .rank-no{ background:linear-gradient(180deg,#f0c08a,#9c6228); color:#3a2005; }
.rule-card.sc h3{ color:#ffe9b0; }

/* ─── 奥米豆对接版新增 ─── */
.guest-tip{ color:#f3d9a4; font-size:13px; letter-spacing:.08em; }
.guest-tip a{ color:var(--gold); font-weight:700; }
.chance b#coinLeft{ color:#ffe9b0; }
.exhaust-box{ max-width:520px; margin:22px auto 0; padding:20px 24px; border-radius:12px;
  background:rgba(255,244,214,.08); border:1px solid rgba(245,198,107,.45); font-size:14px; line-height:1.9; }
.exhaust-box a{ color:var(--gold); font-weight:700; }
.exhaust-box b{ color:var(--gold); }
.buy-btn{ margin-top:12px; padding:11px 34px; font-size:16px; font-weight:700; letter-spacing:.15em;
  color:#5f0d0d; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#ffe9b0,var(--gold) 55%,var(--gold-d));
  box-shadow:0 6px 18px rgba(245,198,107,.35); transition:transform .2s; }
.buy-btn:hover{ transform:translateY(-2px) scale(1.02); }
.invite-tip{ margin-top:10px; font-size:12.5px; opacity:.75; }
.pts-table{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.pts-table span{ padding:8px 16px; border-radius:999px; font-size:13px; letter-spacing:.08em;
  background:rgba(255,244,214,.07); border:1px solid rgba(245,198,107,.3); color:#f3e2bd; }
.pts-table b{ color:var(--gold); margin-left:4px; }
.history-list .rank-nick{ flex:none; width:130px; color:#ffe6ad; }
.history-list .rank-prize{ text-align:right; }

/* ─── 邀请卡 ─── */
.invite-card{ margin-top:14px; padding:14px 16px; border-radius:10px; text-align:left;
  background:rgba(0,0,0,.28); border:1px solid rgba(245,198,107,.3); }
.invite-title{ color:var(--gold); font-size:14px; letter-spacing:.08em; margin-bottom:10px; }
.invite-row{ display:flex; gap:10px; }
.invite-row input{ flex:1; min-width:0; padding:10px 14px; border-radius:8px; font-size:13px;
  color:#f5e6c8; background:rgba(0,0,0,.35); border:1px solid rgba(245,198,107,.3); outline:none; }
.copy-btn{ flex:none; padding:10px 20px; border:none; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.08em; color:#5f0d0d;
  background:linear-gradient(180deg,#ffe9b0,var(--gold) 55%,var(--gold-d));
  transition:transform .2s, filter .2s; }
.copy-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.copy-btn.copied{ background:linear-gradient(180deg,#b8f0c0,#5cb86a); color:#0c3a14; }
.exhaust-box .invite-tip{ margin-top:10px; font-size:12.5px; opacity:.75; line-height:1.7; }