/* ============================================
   888 · 实物盲盒  —— 暗金奢享 / 丝绒礼盒风
   ============================================ */
:root {
  --bg-deep: #0d0b09;
  --bg-card: #17130e;
  --bg-raise: #1f1a13;
  --gold: #c9a227;
  --gold-lt: #e8c86a;
  --gold-dim: #8a6f1c;
  --ink: #f2ece0;
  --ink-dim: #9c9282;
  --line: rgba(201, 162, 39, 0.18);
  --shadow: 0 24px 60px rgba(0, 0, 0, .6);
  --radius: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  background: var(--bg-deep);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* 丝绒纹理 + 金色光晕 */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(201,162,39,.16), transparent 70%),
    radial-gradient(ellipse 45% 35% at 12% 105%, rgba(201,162,39,.08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  pointer-events: none; z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- 顶部 ---------- */
.top {
  text-align: center;
  padding: 46px 0 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.crest {
  width: 52px; height: 52px; margin: 0 auto 18px;
  border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: var(--gold-lt);
  box-shadow: 0 0 30px rgba(201,162,39,.28), inset 0 0 22px rgba(201,162,39,.14);
  background: radial-gradient(circle, rgba(201,162,39,.14), transparent 72%);
  animation: crestIn 1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes crestIn { from { opacity:0; transform: scale(.5) rotate(-25deg);} to { opacity:1; transform:none;} }

.brand {
  font-size: 30px; font-weight: 700; letter-spacing: .22em;
  background: linear-gradient(180deg, #f6e5b4, var(--gold) 62%, var(--gold-dim));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-indent: .22em;
}
.sub {
  font-size: 10.5px; letter-spacing: .44em; color: var(--ink-dim);
  margin-top: 11px; text-indent: .44em; text-transform: uppercase;
}
.divider {
  width: 46px; height: 1px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.divider::after {
  content: "◆"; position: absolute; left: 50%; top: -8px;
  transform: translateX(-50%); font-size: 8px; color: var(--gold);
  background: var(--bg-deep); padding: 0 7px;
}

/* ---------- 库存条 ---------- */
.stock-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ink-dim); margin-bottom: 26px;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.stock-bar b { color: var(--gold-lt); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 盲盒主体 ---------- */
.stage { perspective: 1400px; margin-bottom: 30px; }

.box-scene { position: relative; height: 236px; display: flex; align-items: center; justify-content: center; }

.box {
  position: relative; width: 168px; height: 168px; cursor: pointer;
  transform-style: preserve-3d; transition: transform .85s cubic-bezier(.34,1.32,.5,1);
}
.box-idle { animation: float 4.2s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0) rotateY(-9deg); }
  50%     { transform: translateY(-13px) rotateY(9deg); }
}

.box-lid {
  position: absolute; top: -20px; left: 50%;
  width: 178px; height: 46px; margin-left: -89px;
  background: linear-gradient(150deg, #3b3021, #241c12 62%, #16110b);
  border: 1px solid var(--gold-dim); border-radius: 3px;
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.5,-.2,.3,1.3), opacity .5s .2s;
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(232,200,106,.35);
  z-index: 3;
}
.box-lid::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid var(--gold); transform: rotate(45deg);
  background: rgba(201,162,39,.13);
}
.box-body {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,39,.09) 0 1px, transparent 1px 15px),
    linear-gradient(160deg, #33291b, #1d160e 66%, #100c07);
  border: 1px solid var(--gold-dim); border-radius: 3px;
  box-shadow: var(--shadow), inset 0 0 40px rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
}
.box-emblem {
  font-size: 46px; filter: drop-shadow(0 3px 10px rgba(201,162,39,.5));
  transition: transform .5s;
}

/* 开盖状态 */
.box.opening .box-lid { transform: translateX(-14px) translateY(-124px) rotate(-32deg); opacity: .92; }
.box.opening { animation: none !important; }
.box.opening .box-emblem { transform: scale(.5); opacity: 0; }

.glow {
  position: absolute; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.5), transparent 66%);
  opacity: 0; pointer-events: none; transition: opacity .55s;
}
.box.opening ~ .glow, .glow.on { opacity: 1; animation: pulseGlow 1.5s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { transform: scale(1); opacity:.65;} 50% { transform: scale(1.16); opacity:1;} }

.rays {
  position: absolute; width: 320px; height: 320px; opacity: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(232,200,106,.24) 12deg, transparent 24deg,
    transparent 60deg, rgba(232,200,106,.24) 72deg, transparent 84deg,
    transparent 120deg, rgba(232,200,106,.24) 132deg, transparent 144deg,
    transparent 180deg, rgba(232,200,106,.24) 192deg, transparent 204deg,
    transparent 240deg, rgba(232,200,106,.24) 252deg, transparent 264deg,
    transparent 300deg, rgba(232,200,106,.24) 312deg, transparent 324deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
  mask: radial-gradient(circle, #000 12%, transparent 62%);
  animation: spin 22s linear infinite;
  pointer-events: none;
}
.rays.on { opacity: 1; transition: opacity .6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 开盒按钮 ---------- */
.draw-btn {
  width: 100%; padding: 19px 0; margin-bottom: 11px;
  background: linear-gradient(135deg, #e8c86a, #c9a227 48%, #96751a);
  color: #14100a; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 16.5px; font-weight: 700;
  letter-spacing: .16em; text-indent: .16em; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 34px rgba(201,162,39,.3), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .2s, box-shadow .3s, opacity .3s;
}
.draw-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(201,162,39,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.draw-btn:active:not(:disabled) { transform: translateY(0); }
.draw-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.draw-btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation: sheen 3.6s ease-in-out infinite;
}
@keyframes sheen { 0%,72% { left:-130%; } 100% { left: 170%; } }
.draw-btn.shaking { animation: shake .42s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-6px) rotate(-1.4deg); }
  46% { transform: translateX(6px) rotate(1.4deg); }
  72% { transform: translateX(-3px); }
}

.hint { text-align: center; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 32px; }
.hint b { color: var(--gold-lt); font-weight: 600; }

/* ---------- 奖品陈列 ---------- */
.section-title {
  font-size: 15px; letter-spacing: .2em; color: var(--ink);
  margin-bottom: 20px; display: flex; align-items: center; gap: 13px;
  text-indent: .2em;
}
.section-title::before, .section-title::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 34px; }
.prize {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 14px; text-align: center;
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.prize::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,162,39,.11), transparent 68%);
  opacity: 0; transition: opacity .35s;
}
.prize:hover { transform: translateY(-3px); border-color: rgba(201,162,39,.42); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.prize:hover::before { opacity: 1; }
.prize .ico { font-size: 34px; margin-bottom: 11px; display: block; }
.prize .nm { font-size: 13.5px; line-height: 1.55; margin-bottom: 9px; min-height: 42px; }
.prize.sold-out { opacity: .35; filter: grayscale(1); }

.tag {
  display: inline-block; font-size: 10px; padding: 3px 11px;
  border: 1px solid currentColor; border-radius: 999px;
  letter-spacing: .1em; line-height: 1.5;
}
.t-legendary { color: #ffb545; }
.t-epic { color: #b98cff; }
.t-rare { color: #4fc3f7; }
.t-common { color: #7d7566; }

/* ---------- 最近战报 ---------- */
.feed { border-top: 1px solid var(--line); padding-top: 6px; }
.feed li {
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; padding: 12px 2px;
  font-size: 12.5px; border-bottom: 1px dashed rgba(201,162,39,.1);
}
.feed li span:first-child { color: var(--ink-dim); }
.feed li .who { color: var(--ink); }

.empty { text-align: center; color: var(--ink-dim); font-size: 13px; padding: 34px 0; }

/* ---------- 结果弹层 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6,5,4,.9); backdrop-filter: blur(11px);
  display: none; align-items: center; justify-content: center; padding: 22px;
}
.modal.on { display: flex; animation: fade .35s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.result {
  width: 100%; max-width: 350px; text-align: center;
  background: linear-gradient(165deg, var(--bg-raise), var(--bg-card) 55%, #0f0c08);
  border: 1px solid var(--gold-dim); border-radius: 5px;
  padding: 40px 26px 30px; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  animation: rise .55s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes rise { from { opacity:0; transform: translateY(34px) scale(.94);} to { opacity:1; transform:none;} }
.result::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.result .glowline {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 34% at 50% 0%, rgba(232,200,106,.22), transparent 70%);
}

.res-tag { font-size: 11px; letter-spacing: .34em; color: var(--gold-lt); margin-bottom: 22px; text-indent: .34em; }
.res-ico { font-size: 62px; margin-bottom: 18px; display: block; animation: pop .65s cubic-bezier(.2,1.5,.4,1) both .12s; }
@keyframes pop { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }
.res-name { font-size: 22px; font-weight: 700; margin-bottom: 11px; line-height: 1.4; }
.res-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.75; margin-bottom: 6px; }
.res-no { font-size: 10.5px; color: var(--gold-dim); letter-spacing: .07em; margin-bottom: 26px; word-break: break-all; }

.gold-btn {
  width: 100%; padding: 14px 0; margin-bottom: 10px;
  background: linear-gradient(135deg, #e8c86a, #c9a227 50%, #96751a);
  color: #14100a; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  letter-spacing: .12em; cursor: pointer;
}
.ghost-btn {
  width: 100%; padding: 13px 0;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 13.5px; letter-spacing: .12em; cursor: pointer;
  transition: all .25s;
}
.ghost-btn:hover { color: var(--gold-lt); border-color: var(--gold-dim); }

/* ---------- 兑奖表单 ---------- */
.form { display: none; text-align: left; margin-top: 22px; }
.form.on { display: block; animation: rise .4s both; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; color: var(--gold-lt); margin-bottom: 8px; letter-spacing: .08em; }
.field input, .field textarea {
  width: 100%; padding: 12px 13px;
  background: rgba(0,0,0,.42); border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink);
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .25s;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }

/* ---------- 提示条 ---------- */
.toast {
  position: fixed; left: 50%; top: 26px; transform: translateX(-50%) translateY(-90px);
  background: rgba(28,23,16,.97); border: 1px solid var(--gold-dim);
  color: var(--gold-lt); padding: 13px 24px; border-radius: 3px;
  font-size: 13.5px; z-index: 120; opacity: 0;
  transition: all .38s cubic-bezier(.2,1.1,.3,1); max-width: 86%; text-align: center;
  box-shadow: 0 14px 36px rgba(0,0,0,.6);
}
.toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }

.link-top {
  display: block; text-align: center; margin-top: 34px;
  font-size: 12.5px; color: var(--ink-dim); text-decoration: none;
  letter-spacing: .1em; padding-top: 22px; border-top: 1px solid var(--line);
}
.link-top:hover { color: var(--gold-lt); }

.legal { text-align: center; font-size: 10.5px; color: #6b6459; margin-top: 16px; line-height: 1.7; }

/* 稀有度光效 */
.prize[data-tier="legendary"] { border-color: rgba(255,181,69,.42); }
.prize[data-tier="legendary"] .ico { filter: drop-shadow(0 0 12px rgba(255,181,69,.55)); }
.prize[data-tier="epic"] .ico { filter: drop-shadow(0 0 10px rgba(185,140,255,.45)); }