:root {
  --ink: #0B0A0E;
  --gold-dark: #4E3512;
  --gold: #B08534;
  --gold-light: #E8CD8C;
  --gold-hi: #FFF5D8;
  --text: rgba(232, 205, 140, 0.86);
  --text-dim: rgba(232, 205, 140, 0.48);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --caps: "Cormorant SC", "Noto Serif SC", serif;
  --tier: #E8CD8C;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 1.5px solid var(--gold-light); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
body.ready #gl { opacity: 1; }

#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity .9s var(--ease-out) .25s;
}
body.ready #app { opacity: 1; }

/* ---------- 顶栏 ---------- */
.top {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 48px;
}
.mark { width: 22px; height: 22px; color: var(--gold); justify-self: start; margin-left: 8px; }
.mark svg { width: 100%; height: 100%; display: block; }
/* 标题：烫金字 + 两侧细金线 */
.title { position: relative; justify-self: center; font-size: 0; }
.title span {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .5em;
  padding-left: .5em;
  background: linear-gradient(180deg, #FFF8E1 0%, #F1D894 38%, #B8893A 62%, #E8CD8C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 10px rgba(232, 180, 90, .25));
}
.title::before, .title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.title::before { right: 100%; margin-right: 6px; }
.title::after { left: 100%; transform: scaleX(-1); }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 245, 216, .1), transparent 60%),
    linear-gradient(180deg, #1b1612, #0b0909);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .14),
    inset 0 0 0 1px rgba(176, 133, 52, .35),
    0 6px 16px -6px rgba(0, 0, 0, .8);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .mute { display: none; }
.icon-btn[data-on="false"] .wave { display: none; }
.icon-btn[data-on="false"] .mute { display: inline; }
.icon-btn[data-on="false"] { color: var(--text-dim); }

/* ---------- 舞台 ---------- */
#stage {
  position: relative;
  display: grid;
  place-items: center;
  touch-action: none;
  container-type: size;
}
#anchor {
  position: relative;
  height: min(52dvh, calc((100vw - 132px) * 1.4), 540px);
  height: min(calc(100cqh - 150px), calc((100vw - 132px) * 1.4), 540px);
  aspect-ratio: 1 / 1.4;
  margin: 46px 0 9%;
  border-radius: 7%;
  touch-action: none;
  cursor: pointer;
}
body:not([data-phase="idle"]) #anchor { cursor: default; }

/* 品阶标签：跟着卡牌走，揭示完成后砸入 */
.tier {
  position: absolute;
  bottom: calc(100% + 16px);
  left: -60px;
  right: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
body.show-tier .tier { opacity: 1; }
.tier-key {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: .2em;
  padding-left: .2em;
  color: var(--tier);
  text-shadow: 0 0 18px var(--tier), 0 0 2px rgba(255, 255, 255, .6);
}
body.show-tier .tier-key { animation: tier-in .6s cubic-bezier(.2, 1.5, .4, 1) both; }
/* 只动 transform/opacity：字距动画每帧都要重排，正好落在揭晓最吃性能的那一刻 */
@keyframes tier-in {
  0% { opacity: 0; transform: scale(2.4, 2.1); }
  55% { opacity: 1; }
  100% { transform: none; }
}
.tier-name { font-size: 13px; letter-spacing: .5em; padding-left: .5em; color: var(--text); }
.tier-line {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tier));
  opacity: .8;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out) .2s;
}
.tier-line:last-child { transform-origin: left; background: linear-gradient(270deg, transparent, var(--tier)); }
body.show-tier .tier-line { transform: scaleX(1); }
.tier[data-tier="SSR"] .tier-key {
  background: linear-gradient(180deg, #FFF6D6, #FFC24A 55%, #B07A1E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 194, 74, .8));
}

/* 抽卡时让出注意力 */
.top { transition: opacity .5s var(--ease-out); }
body:is([data-phase="charging"], [data-phase="spinning"]) .top { opacity: .25; }

/* ---------- 按钮：切角金属板 + 倒角框 + 刻线 + 角饰 ---------- */
.actions {
  position: relative;
  height: 60px;
  margin: 4px 0 18px;
  --spring-soft: cubic-bezier(.22, 1.25, .36, 1);
  /* 角饰：同一花样四向镜像，作为遮罩，颜色由 --orn-c 决定 */
  --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13.5V7.5l5-5h6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 4.9l2.7 2.7-2.7 2.7-2.7-2.7z'/%3E%3Ccircle cx='13.5' cy='2.5' r='1.1'/%3E%3Ccircle cx='2.5' cy='13.5' r='1.1'/%3E%3C/svg%3E");
  --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M2.5 13.5V7.5l5-5h6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 4.9l2.7 2.7-2.7 2.7-2.7-2.7z'/%3E%3Ccircle cx='13.5' cy='2.5' r='1.1'/%3E%3Ccircle cx='2.5' cy='13.5' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='matrix(1 0 0 -1 0 16)'%3E%3Cpath d='M2.5 13.5V7.5l5-5h6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 4.9l2.7 2.7-2.7 2.7-2.7-2.7z'/%3E%3Ccircle cx='13.5' cy='2.5' r='1.1'/%3E%3Ccircle cx='2.5' cy='13.5' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 -1 16 16)'%3E%3Cpath d='M2.5 13.5V7.5l5-5h6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M7.6 4.9l2.7 2.7-2.7 2.7-2.7-2.7z'/%3E%3Ccircle cx='13.5' cy='2.5' r='1.1'/%3E%3Ccircle cx='2.5' cy='13.5' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* 各阶段容器：隐藏时不可点；子元素 .in 负责错峰入场 */
.act {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s .3s;
}
.act-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 10px;
}
.act-solo {
  display: grid;
  grid-template-columns: 1fr minmax(0, 236px) 1fr;
  gap: 10px;
  align-items: center;
}
.act .in {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .18s var(--ease-out), transform .25s var(--ease-out);
}
body:is([data-phase="boot"], [data-phase="idle"], [data-phase="charging"]) .act-draw,
body.show-result[data-phase="revealed"] .act-pair,
body[data-phase="decided"] .act-solo {
  visibility: visible;
  transition-delay: 0s;
}
body:is([data-phase="boot"], [data-phase="idle"], [data-phase="charging"]) .act-draw .in,
body.show-result[data-phase="revealed"] .act-pair .in,
body[data-phase="decided"] .act-solo .in {
  opacity: 1;
  transform: none;
  transition: opacity .4s var(--ease-out) var(--d, 0s), transform .7s var(--spring-soft) var(--d, 0s);
}

/* ---- 按钮骨架 ---- */
.btn {
  position: relative;
  display: block;
  width: 100%;
  height: 58px;
  touch-action: none;
  --c: 10px;          /* 切角 */
  --rim: 1.5px;       /* 金属框厚度 */
  --k: var(--c);
}
.btn:focus-visible { outline-offset: 4px; }
.btn::before {        /* 落地阴影：clip-path 会吃掉 box-shadow，所以单独画 */
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: -12px; height: 22px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  pointer-events: none;
}
.halo {
  position: absolute;
  left: -10%; right: -10%; top: -45%; bottom: -55%;
  pointer-events: none;
  transition: opacity .2s;
  --halo: rgba(240, 190, 95, .3);
}
.halo::before, .halo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, var(--halo), transparent);
  opacity: .7;
}
.halo::after { opacity: 0; }

.plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform .14s var(--ease-out);
}
.plate > * { position: absolute; z-index: 1; }
.plate::before, .plate::after { content: ""; position: absolute; z-index: 0; }
.plate::before, .plate::after, .field, .press {
  clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)),
                     calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k));
}
.plate::before { inset: -1px; --k: calc(var(--c) + .6px); background: rgba(8, 5, 2, .92); }  /* 外描边 */
.plate::after  { inset: 0; background: var(--rim-bg); }                                     /* 金属倒角框 */
.field, .press { inset: var(--rim); --k: calc(var(--c) - var(--rim) * .586); }
.field { overflow: hidden; }
.press { opacity: 0; transition: opacity .12s; background: var(--press-bg); }

.line {               /* 内嵌刻线，四角让给角饰 */
  inset: 5px;
  border: 1px solid var(--line-c);
  box-shadow: inset 0 1px 0 var(--line-hi);
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 28px) 100% no-repeat,
                linear-gradient(#000 0 0) center / 100% calc(100% - 28px) no-repeat;
          mask: linear-gradient(#000 0 0) center / calc(100% - 28px) 100% no-repeat,
                linear-gradient(#000 0 0) center / 100% calc(100% - 28px) no-repeat;
}
.orn {
  inset: 3px;
  z-index: 2;
  background: var(--orn-c);
  -webkit-mask: var(--orn-tl) left top / 16px 16px no-repeat, var(--orn-tr) right top / 16px 16px no-repeat,
                var(--orn-bl) left bottom / 16px 16px no-repeat, var(--orn-br) right bottom / 16px 16px no-repeat;
          mask: var(--orn-tl) left top / 16px 16px no-repeat, var(--orn-tr) right top / 16px 16px no-repeat,
                var(--orn-bl) left bottom / 16px 16px no-repeat, var(--orn-br) right bottom / 16px 16px no-repeat;
}
.sheen {
  top: -10%; bottom: -10%; left: -50%;
  width: 50%;
  background: linear-gradient(90deg, transparent 15%, var(--sheen) 50%, transparent 85%);
  transform: translateX(0) skewX(-16deg);
}
.content {
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.label {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .34em;
  margin-right: -.34em;
}
.ico { width: 20px; height: 20px; flex: none; display: block; }

/* 按下：整块下沉 + 内阴影 */
.btn:active .plate,
body[data-phase="charging"] .btn-draw .plate { transform: translateY(1.5px) scale(.988); }
.btn:active .press,
body[data-phase="charging"] .btn-draw .press { opacity: 1; }
.btn:active .halo { opacity: .55; }

/* ---- 拉丝金（主） ---- */
.btn-gold {
  --c: 11px;
  --rim: 2.5px;
  --rim-bg: linear-gradient(180deg, #FFF7DA 0%, #EBCB80 16%, #9A6D26 48%, #5C3E12 60%, #C99D4C 86%, #FBE7AE 100%);
  --line-c: rgba(92, 60, 16, .5);
  --line-hi: rgba(255, 246, 220, .45);
  --orn-c: linear-gradient(180deg, #6A4612, #3E270A);
  --press-bg: linear-gradient(180deg, rgba(60, 32, 2, .34), rgba(60, 32, 2, 0) 55%);
  --sheen: rgba(255, 252, 238, .6);
}
.btn-gold .field {
  background:
    radial-gradient(80% 120% at 50% -35%, rgba(255, 252, 236, .55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(60, 35, 5, .05) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #F9E6B0 0%, #E7C47A 34%, #C99A45 49%, #A87A2E 51%, #BF9142 72%, #E3BE72 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 240, .9),
    inset 0 -1px 0 rgba(255, 236, 180, .5),
    inset 0 -12px 16px -12px rgba(90, 55, 10, .4);
}
.btn-gold .label {
  color: #2A1806;
  text-shadow: 0 1px 0 rgba(255, 243, 208, .6), 0 -1px 0 rgba(90, 55, 10, .22);
}

/* ---- 黑漆洒金（次） ---- */
.btn-lacquer {
  --rim-bg: linear-gradient(180deg, #F6E2A8 0%, #C29545 26%, #5E4115 55%, #9C7330 78%, #E2C27A 100%);
  --line-c: rgba(201, 160, 78, .42);
  --line-hi: transparent;
  --orn-c: linear-gradient(180deg, #F3DC9E, #A87C30);
  --press-bg: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 60%);
  --sheen: rgba(255, 236, 190, .14);
  color: #E8CD8C;
}
.btn-lacquer .field {
  background:
    radial-gradient(circle at 30% 40%, rgba(232, 200, 130, .5) 0 .55px, transparent .9px) 0 0 / 19px 13px,
    radial-gradient(circle at 70% 70%, rgba(232, 200, 130, .32) 0 .5px, transparent .9px) 7px 3px / 29px 23px,
    radial-gradient(120% 90% at 50% -25%, rgba(255, 236, 190, .16), transparent 58%),
    radial-gradient(70% 120% at 105% 125%, rgba(111, 163, 216, .11), transparent 60%),
    linear-gradient(180deg, #221a15 0%, #120d0b 52%, #0a0807 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .14), inset 0 -8px 14px -8px rgba(0, 0, 0, .8);
}
.btn-lacquer .label {
  background: linear-gradient(180deg, #FFF3CF 0%, #E8CD8C 55%, #B8893A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 抽卡：蓄力 ---- */
.btn-draw { --charge: 0; }
.btn-draw .label { font-size: 20px; letter-spacing: .7em; margin-right: -.7em; }
.btn-draw .fill {
  inset: 0;
  transform: translate3d(calc((var(--charge) - 1) * 100%), 0, 0);
  background: linear-gradient(90deg, rgba(255, 247, 222, 0) 0%, rgba(255, 247, 222, .3) 70%, rgba(255, 251, 238, .78) 97%);
}
.btn-draw .fill::after {    /* 填充前沿的亮线 */
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 2px;
  background: #FFFDF4;
  box-shadow: 0 0 8px 2px rgba(255, 236, 190, .9), 0 0 22px 6px rgba(255, 214, 140, .45);
}
.field > * { position: absolute; }
.pips {
  left: 50%; bottom: 7px;
  width: 38px; height: 5px;
  margin-left: -19px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
}
.pips i {
  position: relative;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: rgba(74, 46, 10, .5);
  box-shadow: 0 1px 0 rgba(255, 244, 210, .5);
}
.pips i::after {
  content: "";
  position: absolute;
  inset: -.5px;
  background: #FFFBEA;
  box-shadow: 0 0 6px 1px rgba(255, 230, 170, .9);
  opacity: clamp(0, var(--charge) * 3 - var(--n) + 1, 1);
}
.btn-draw .halo::after {
  --halo: rgba(255, 220, 150, .55);
  opacity: var(--charge);
  transform: scale(calc(.92 + var(--charge) * .16));
}
body[data-phase="charging"] .btn-draw .sheen { opacity: 0; }
body:is([data-phase="boot"], [data-phase="idle"]) .btn-draw .sheen { animation: sheen 5.5s ease-in-out 1.2s infinite; }
body:is([data-phase="boot"], [data-phase="idle"]) .btn-draw .halo::before { animation: breathe 3.6s ease-in-out infinite; }
body.hint .act-draw .btn { animation: nudge 2.4s var(--ease-out) infinite; }

/* ---- 就它了：朱印图标，光晕带上品阶色 ---- */
.btn-pick .halo { --halo: color-mix(in srgb, color-mix(in srgb, var(--tier) 45%, #F0BE5F) 40%, transparent); }
.ico-seal {
  width: 22px; height: 22px;
  transform: rotate(-6deg);
  transition: transform .18s var(--spring);
}
.btn-pick:active .ico-seal { transform: translateY(1px) scale(.86) rotate(-10deg); }
body.show-result[data-phase="revealed"] .btn-pick .sheen {
  animation: sheen-once .9s var(--ease-out) .5s both, sheen 6s ease-in-out 3s infinite;
}
body.show-result[data-phase="revealed"] .btn-pick .halo::before { animation: breathe 3.2s ease-in-out .6s infinite; }

/* ---- 再来一次：独立居中，景泰蓝徽章 + 两侧铜线 ---- */
.btn-solo {
  --rim: 2px;
  --rim-bg: linear-gradient(180deg, #FFF3CC 0%, #DDB665 22%, #6E4C18 52%, #B08534 78%, #F2D898 100%);
  --sheen: rgba(255, 236, 190, .22);
}
.btn-solo .halo { --halo: rgba(232, 190, 110, .22); }
.btn-solo .content { gap: 11px; padding-right: 4px; }
.medal {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #F6E2A6;
  background: radial-gradient(circle at 35% 30%, #4a8c9a, #17414d 58%, #0a1f27);
  box-shadow:
    inset 0 0 0 1.5px #E2BC70,
    inset 0 0 0 2.5px #4E3512,
    inset 0 -3px 5px rgba(0, 0, 0, .5),
    0 1px 2px rgba(0, 0, 0, .6);
}
.medal::after {       /* 珐琅高光 */
  content: "";
  position: absolute;
  inset: 4px 8px 15px 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent);
}
.ico-loop { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.btn-solo:active .ico-loop { transform: rotate(-40deg); }
body[data-phase="decided"] .ico-loop { animation: loop-in .9s var(--ease-out) .65s backwards; }
body[data-phase="decided"] .btn-solo .sheen {
  animation: sheen-once 1s var(--ease-out) .9s both, sheen 7s ease-in-out 4s infinite;
}
body[data-phase="decided"] .btn-solo .halo::before { animation: breathe 4s ease-in-out 1s infinite; }

.rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 160, 78, 0), rgba(201, 160, 78, .75));
  transform-origin: right center;
}
.rule::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #FFF0C2, #B08534);
  box-shadow: 0 0 6px rgba(232, 190, 110, .6);
}
.rule.r { background: linear-gradient(270deg, rgba(201, 160, 78, 0), rgba(201, 160, 78, .75)); transform-origin: left center; }
.rule.r::after { right: auto; left: -3px; }
.act-solo .rule.in { transform: scaleX(0); }

@keyframes sheen      { 0%, 70% { transform: translateX(0) skewX(-16deg); } 100% { transform: translateX(320%) skewX(-16deg); } }
@keyframes sheen-once { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(320%) skewX(-16deg); } }
@keyframes breathe    { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes loop-in    { from { transform: rotate(-270deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nudge {
  0%, 60%, 100% { transform: none; }
  70% { transform: translateY(-2px); }
  80% { transform: translateY(0); }
}

/* ---------- 卡池托盘：黑漆托盘 + 黄铜嵌线 + 角饰 ---------- */
.tray {
  --brass: linear-gradient(160deg, #FFF0C2 0%, #C9A04E 28%, #6B4A18 55%, #B08534 78%, #4E3512 100%);
  position: relative;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 8px 10px 9px;
  background:
    var(--noise) padding-box,
    linear-gradient(180deg, rgba(255, 236, 200, .07) 0%, rgba(255, 236, 200, .015) 34%, transparent 35%) padding-box,
    radial-gradient(90% 120% at 50% -30%, rgba(255, 214, 150, .09), transparent 60%) padding-box,
    linear-gradient(180deg, #1c1211 0%, #120b0b 55%, #0a0707 100%) padding-box,
    var(--brass) border-box;
  background-size: 160px, auto, auto, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .8),
    0 0 0 1px rgba(0, 0, 0, .75),
    0 18px 36px -18px rgba(0, 0, 0, .95);
}
/* 内圈黄铜嵌线（渐变描边，顶部受光更亮） */
.tray::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(232, 205, 140, .55), rgba(176, 133, 52, .22) 40%, rgba(176, 133, 52, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* 底部两颗黄铜铆钉 */
.tray::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 5px;
  background:
    radial-gradient(circle at 2.5px 2.5px, #FFF5D8 0, #C9A04E 1.1px, #4E3512 2.2px, transparent 2.6px) left / 5px 5px no-repeat,
    radial-gradient(circle at 2.5px 2.5px, #FFF5D8 0, #C9A04E 1.1px, #4E3512 2.2px, transparent 2.6px) right / 5px 5px no-repeat;
  pointer-events: none;
}
.tray-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tc {
  position: absolute;
  top: 2px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7));
}
.tc-l { left: 2px; }
.tc-r { right: 2px; transform: scaleX(-1); }

/* ---------- 标题行：刻字 + 菱形分隔 + 计数铭牌 ---------- */
.tray-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 18px;
  margin: 0 16px 6px 18px;
}
.th-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5em;
  padding-left: .5em;
  background: linear-gradient(180deg, #F3DDA2, #B08534 60%, #7a5820);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 1px 0 rgba(255, 230, 170, .12));
}
.th-rule {
  position: relative;
  flex: 1;
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(176, 133, 52, .55) 30%, rgba(176, 133, 52, .55) 70%, transparent) center / 100% 1px no-repeat;
}
.th-rule::before,
.th-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #FFF0C2, #B08534 55%, #4E3512);
  box-shadow: 0 0 0 1.5px #120b0b, 0 0 0 2.2px rgba(176, 133, 52, .5);
}
.th-rule::after {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #120b0b;
  box-shadow: none;
}
.th-count {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  font-family: var(--caps);
  font-weight: 600;
  line-height: 18px;
  font-size: 11px;
  color: var(--text-dim);
  background: linear-gradient(180deg, #0a0707, #1a1210);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(176, 133, 52, .35),
    0 1px 0 rgba(255, 230, 170, .08);
}
.th-count b {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, #FFF5D8, #E8CD8C 50%, #B08534);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.th-count s { text-decoration: none; opacity: .5; margin: 0 1px; }
.th-count.bump b { animation: bump .45s var(--spring); }
@keyframes bump { 0% { transform: scale(1.35) translateY(-1px); } 100% { transform: none; } }
.th-count.low b { background: linear-gradient(180deg, #FFD9C8, #E8836B 55%, #A3201C); -webkit-background-clip: text; background-clip: text; }

/* ---------- 凹槽陈列架：8 个币座一字排开 ---------- */
.chips {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  padding: 7px 3px 4px;
  border-radius: 9px;
  background:
    var(--noise),
    linear-gradient(180deg, #070505 0%, #110b0a 100%);
  background-size: 160px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    0 1px 0 rgba(255, 230, 170, .09),
    0 -1px 0 rgba(0, 0, 0, .5);
}

.chip {
  --c3: color-mix(in srgb, var(--c2) 55%, white);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  touch-action: manipulation;
}
.seat {
  position: relative;
  width: min(90%, 42px);
  aspect-ratio: 1;
  transition: opacity .4s var(--ease-out);
}
/* 币座凹洞：币被抬起或翻面下沉时露出 */
.seat::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #030202 52%, #1b1310 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 230, 170, .1);
}
/* 抬起时投在币座里的影子 */
.seat::after {
  content: "";
  position: absolute;
  inset: 10% 8% -4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.lift {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  perspective: 240px;
  transition: transform .45s var(--spring);
}
body:not(.ready) .lift { opacity: 0; }
body.ready .lift { animation: seat-in .7s var(--spring) backwards; animation-delay: calc(.7s + var(--i) * 55ms); }
@keyframes seat-in { from { opacity: 0; transform: translateY(-12px) scale(.85); } }

.coin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .65s var(--spring);
}
.face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
}

/* 正面：珐琅釉 + 扭索纹（guilloché）+ 掐丝内圈 + 釉面高光 */
.face.f {
  background:
    radial-gradient(55% 38% at 34% 24%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 60%, transparent 72%),
    radial-gradient(40% 30% at 70% 82%, color-mix(in srgb, var(--c2) 45%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0 5deg, rgba(0, 0, 0, .1) 5deg 10deg),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c1) 78%, white 22%) 0%, var(--c1) 46%, color-mix(in srgb, var(--c1) 40%, black) 100%);
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, .45),
    0 0 0 .5px rgba(0, 0, 0, .8),
    0 3px 5px -1px rgba(0, 0, 0, .75);
}
/* 铸币外圈：锥形黄铜 + 滚边齿纹 + 左上受光倒角 */
.face.f::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .35), transparent 42%, rgba(0, 0, 0, .4)),
    repeating-conic-gradient(rgba(0, 0, 0, .3) 0 2deg, transparent 2deg 5deg),
    conic-gradient(from 210deg, #6b4a18, #FFF0C2, #C9A04E, #4E3512, #E8CD8C, #8a6224, #6b4a18);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
/* 掐丝金线内圈 */
.face.f::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow:
    0 0 0 .8px rgba(255, 236, 190, .8),
    0 1px 1px .8px rgba(0, 0, 0, .35),
    inset 0 1px 2px rgba(0, 0, 0, .3);
}
/* 浮雕金字 */
.g {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: clamp(12px, 4.1vw, 18px);
  line-height: 1;
  background: linear-gradient(180deg, #FFF8E0 0%, #F0D58F 45%, #A57A2C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 -.5px 0 rgba(255, 250, 225, .45));
}
/* 掠光：逐枚错开，像一道光沿陈列架扫过 */
.sh {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70.5%);
  mask: radial-gradient(circle, #000 69%, transparent 70.5%);
  pointer-events: none;
}
.sh::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 250, 230, .55) 50%, transparent 90%);
  transform: translateX(-130%) skewX(-14deg);
  animation: coin-sweep 8s var(--ease-out) infinite;
  animation-delay: calc(2.4s + var(--i) * 90ms);
}
/* 抽卡动画期间卡池的循环光效先停，把合成器让给画布 */
body:is([data-phase="charging"], [data-phase="spinning"]) .sh::before { animation-play-state: paused; }
@keyframes coin-sweep {
  0%, 84% { transform: translateX(-130%) skewX(-14deg); }
  100% { transform: translateX(330%) skewX(-14deg); }
}

/* 背面：黑漆洒金 + 阴刻字 + 朱砂封印 */
.face.b {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 28% 66%, rgba(232, 205, 140, .55) 0 .6px, transparent 1px),
    radial-gradient(circle at 72% 30%, rgba(232, 205, 140, .45) 0 .5px, transparent 1px),
    radial-gradient(circle at 60% 78%, rgba(232, 205, 140, .35) 0 .5px, transparent 1px),
    radial-gradient(60% 40% at 35% 25%, rgba(255, 240, 210, .12), transparent 70%),
    radial-gradient(circle at 50% 45%, #1e1714, #070505 78%);
  box-shadow:
    inset 0 0 0 1.5px rgba(176, 133, 52, .5),
    inset 0 0 0 2.5px color-mix(in srgb, var(--c1) 55%, black),
    inset 0 0 0 4.5px rgba(0, 0, 0, .55),
    inset 0 0 0 5.2px rgba(176, 133, 52, .2),
    0 2px 3px rgba(0, 0, 0, .7);
}
.gb {
  font-weight: 900;
  font-size: clamp(12px, 4.1vw, 18px);
  line-height: 1;
  color: #15100d;
  text-shadow: 0 1px 0 rgba(255, 225, 170, .16), 0 -1px 0 rgba(0, 0, 0, .9);
}
.seal {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(6px, 1.9vw, 9px);
  line-height: 1;
  color: rgba(255, 228, 210, .9);
  background: radial-gradient(circle at 35% 30%, #D9452F, #9C2116 72%);
  box-shadow:
    inset 0 0 0 .8px rgba(255, 220, 200, .4),
    inset 0 0 0 1.6px #9C2116,
    0 1px 2px rgba(0, 0, 0, .6);
  transform: rotate(-9deg);
}
.seal::before { content: "封"; }

/* 名签：阴刻在币座下方 */
.nm {
  font-size: clamp(8.5px, 2.4vw, 10px);
  line-height: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: rgba(232, 205, 140, .55);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9);
  transition: opacity .4s var(--ease-out), color .4s;
}

/* 轻点反馈 + 翻面时的黄铜涟漪 */
.lift::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 230, 170, .85), 0 0 8px rgba(255, 210, 140, .5);
  opacity: 0;
  pointer-events: none;
}
.chip.ping .lift::after { animation: ping .55s var(--ease-out); }
@keyframes ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
.chip:active .lift { transform: scale(.9); transition-duration: .08s; }

/* 排除：翻到背面、沉进币座、名签变暗，封印落下 */
.chip.off .coin { transform: rotateY(180deg); }
.chip.off .lift { transform: scale(.9); }
.chip.off .nm { opacity: .3; }
.chip.off .seal { animation: seal-in .38s .3s var(--spring) backwards; }
@keyframes seal-in { from { opacity: 0; transform: rotate(-24deg) scale(1.9); } }

/* 抽中：抬起、放光、射线与火星；其余币暗下去 */
.ray {
  position: absolute;
  inset: -75%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s var(--ease-out), transform .8s var(--spring);
  pointer-events: none;
}
.ray::before,
.ray::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ray::before {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c3) 70%, transparent) 0 3deg, transparent 3deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 100%);
  mask: radial-gradient(closest-side, #000 22%, transparent 100%);
  animation: spin 14s linear infinite;
  animation-play-state: paused;
}
.ray::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 75%, transparent), color-mix(in srgb, var(--c2) 22%, transparent) 45%, transparent 75%);
}
@keyframes spin { to { transform: rotate(360deg); } }

.spark {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 3;
  pointer-events: none;
}
.spark::before,
.spark::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--c3);
  opacity: 0;
}
.spark::before { box-shadow: -11px 6px 0 -.3px var(--c3), 10px 2px 0 0 #FFF5D8, 4px 10px 0 -.4px var(--c3); }
.spark::after { box-shadow: -6px -2px 0 -.3px #FFF5D8, 12px 9px 0 -.3px var(--c3), -13px 12px 0 -.2px var(--c3); }

.chip.hit { z-index: 2; }
.chip.hit .lift { transform: translateY(-7px) scale(1.1); }
.chip.hit:active .lift { transform: translateY(-7px) scale(1.02); }
.chip.hit .seat::after { opacity: 1; }
.chip.hit .ray { opacity: 1; transform: none; }
.chip.hit .ray::before { animation-play-state: running; }
.chip.hit .spark::before { animation: rise 1.8s var(--ease-out) .5s infinite; }
.chip.hit .spark::after { animation: rise 1.8s var(--ease-out) 1.4s infinite; }
@keyframes rise {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}
.chip.hit .sh::before { animation: coin-sweep-once 1s var(--ease-out) .25s; }
@keyframes coin-sweep-once { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(330%) skewX(-14deg); } }
.chip.hit .nm { color: #FFF0C2; text-shadow: 0 0 8px color-mix(in srgb, var(--c2) 70%, transparent), 0 -1px 0 rgba(0, 0, 0, .9); }
.chips.has-hit .chip:not(.hit) .seat { opacity: .5; }
.chips.has-hit .chip:not(.hit) .nm { opacity: .3; }

/* 只剩一枚时拒绝排除 */
.chip.deny .lift { animation: deny .4s ease; }
@keyframes deny { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- 无 WebGL2 的退化 ---------- */
.no-gl #gl { display: none; }
.no-gl body, body.no-gl { background: radial-gradient(80% 60% at 50% 40%, #241a12, var(--ink)); }
.flat-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.flat-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 7%;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flat-face.is-front { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .sheen, .halo::before, .ico-loop, body.hint .act-draw .btn,
  .sh::before, .ray::before, .chip.hit .spark::before, .chip.hit .spark::after,
  body.ready .lift, .chip.off .seal, body.show-tier .tier-key { animation: none !important; }
  .act .in { transition-duration: .01s !important; }
}