/* ===== VIBE SLOT · 1952 — 木质黄铜拟物 ===== */
:root {
  --wood-1: #2c1b10;
  --wood-2: #4a2e1b;
  --wood-3: #6e4528;
  --brass-hi: #f3dd8e;
  --brass: #c9a227;
  --brass-dk: #7a5c14;
  --enamel: #efe3cb;
  --enamel-dk: #ddcdab;
  --paper: #e8d9b8;
  --red: #b3372b;
  --ink: #2a211a;
  --room: #16100c;
  --font-disp: 'Limelight', 'Georgia', serif;
  --font-mono: 'Cutive Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: var(--room);
  font-family: var(--font-mono);
  user-select: none; -webkit-user-select: none; touch-action: none;
  overflow: hidden;
}

#room {
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
  padding: max(10px, env(safe-area-inset-top)) 6px max(10px, env(safe-area-inset-bottom));
  /* 暗室氛围：顶光 + 四角压暗 */
  background:
    radial-gradient(120% 90% at 50% -10%, #2b2018 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, #000 130%),
    var(--room);
}

/* ===== 机柜 ===== */
#machine {
  width: min(80vw, 400px);
  border-radius: 18px 18px 10px 10px;
  padding: 0 14px 14px;
  position: relative;
  /* 木纹：多层渐变叠条纹 */
  background:
    repeating-linear-gradient(94deg, transparent 0 7px, rgba(0,0,0,.13) 7px 9px, transparent 9px 16px, rgba(255,255,255,.025) 16px 18px),
    repeating-linear-gradient(2deg, transparent 0 34px, rgba(0,0,0,.08) 34px 36px),
    linear-gradient(180deg, var(--wood-3), var(--wood-2) 30%, var(--wood-1));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -3px 8px rgba(0,0,0,.5),
    inset 4px 0 9px -4px rgba(0,0,0,.55),
    inset -4px 0 9px -4px rgba(0,0,0,.55),
    0 18px 50px rgba(0,0,0,.75);
}
/* 黄铜铆钉四角 */
#machine::before, #machine::after,
#crown::before, #crown::after {
  content: '';
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 55%, var(--brass-dk));
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 -1px 1px rgba(0,0,0,.4);
}
#machine::before { left: 7px; bottom: 7px; }
#machine::after  { right: 7px; bottom: 7px; }
#crown::before   { left: -7px; top: 14px; }
#crown::after    { right: -7px; top: 14px; }

/* ===== 顶冠 ===== */
#crown {
  position: relative;
  margin: 0 -14px;
  padding: 12px 10px 8px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, var(--wood-2), transparent 90%);
  border-bottom: 3px solid var(--brass-dk);
  box-shadow: 0 3px 0 rgba(243,221,142,.18);
  text-align: center;
}
#bulbs { display: flex; justify-content: space-between; padding: 0 8px 8px; }
.bulb {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6d5b33, #3c3019 65%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.6), 0 0 0 1.5px var(--brass-dk);
  transition: background .12s, box-shadow .12s;
}
.bulb.on {
  background: radial-gradient(circle at 38% 32%, #fff8d8, #ffd95e 45%, #d99a18);
  box-shadow: 0 0 0 1.5px var(--brass-dk), 0 0 10px 2px rgba(255,214,90,.8), 0 0 22px 6px rgba(255,190,60,.35);
}
#marquee {
  font-family: var(--font-disp);
  font-size: clamp(26px, 8.4vw, 38px);
  letter-spacing: .06em;
  /* 流金字：渐变填充 + 缓慢流动 */
  background: linear-gradient(100deg, #b08a1e 15%, var(--brass-hi) 35%, #fffbe8 50%, var(--brass-hi) 65%, #b08a1e 85%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 1px #4a3a0c) drop-shadow(0 0 16px rgba(243,221,142,.4));
  animation: goldflow 5.5s linear infinite;
}
@keyframes goldflow { to { background-position: -230% 0; } }
#sub {
  margin-top: 2px;
  font-size: 10.5px; letter-spacing: .22em;
  color: #b89868;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* ===== 赔率表（做旧纸卡压玻璃下） ===== */
#paytable {
  margin: 10px 0;
  padding: 6px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  border-radius: 6px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(160deg, rgba(120,80,30,.16), transparent 35%),
    var(--paper);
  border: 2px solid var(--brass-dk);
  box-shadow: inset 0 0 14px rgba(90,58,20,.35), inset 0 0 3px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.45);
  color: var(--ink);
}
.pt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5px 2px;
  border-bottom: 1px dotted rgba(90,58,20,.3);
  border-radius: 3px;
  transition: background .15s;
}
.pt-row:nth-last-child(-n+2) { border-bottom: none; }
/* 头奖横幅：独占整行，红金压轴 */
.pt-row.banner {
  grid-column: 1 / -1;
  justify-content: center; gap: 14px;
  margin-bottom: 2px;
  padding: 3px 2px;
  border-bottom: 1.5px solid rgba(122,92,20,.55);
  background: linear-gradient(90deg, transparent, rgba(201,47,36,.1) 25%, rgba(201,47,36,.16) 50%, rgba(201,47,36,.1) 75%, transparent);
}
.pt-row.banner .pt-pay { font-size: 16px; }
.pt-row.banner .pt-syms svg { width: 21px; height: 21px; }
.pt-syms { display: flex; gap: 3px; align-items: center; }
.pt-syms svg { width: 17px; height: 17px; display: block; }
.pt-pay { font-size: 13px; font-weight: bold; letter-spacing: .04em; }
.pt-row.gold .pt-pay { color: var(--red); }
.pt-row.lit {
  background: linear-gradient(90deg, rgba(255,205,70,.55), rgba(255,205,70,.18));
  box-shadow: 0 0 9px rgba(255,200,60,.55);
  animation: litpulse .42s ease-in-out infinite alternate;
}
@keyframes litpulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* ===== 转轴窗 ===== */
#reelbox {
  position: relative;
  display: flex; gap: 7px;
  padding: 9px;
  border-radius: 9px;
  background: linear-gradient(180deg, #1a130c, #0f0a06);
  border: 3px solid var(--brass-dk);
  box-shadow:
    inset 0 0 0 1px rgba(243,221,142,.25),
    inset 0 6px 16px rgba(0,0,0,.85),
    0 2px 4px rgba(0,0,0,.5);
}
.reel {
  position: relative;
  flex: 1;
  height: 216px;            /* 3 行 × 72，须与 reels.js cellH 同步 */
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, #cfc3a6, #f4ecd8 28% 72%, #c8bb9c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.strip { will-change: transform; }
.cell {
  height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.cell svg { width: 53px; height: 53px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.reel.blur .cell svg { filter: blur(2.2px) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* 圆柱明暗：上下行压暗收缩感 */
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(40,26,12,.62) 0%, rgba(40,26,12,.18) 17%, transparent 34%,
      transparent 66%, rgba(40,26,12,.18) 83%, rgba(40,26,12,.62) 100%);
}
.reel.hit { animation: reelhit .3s; }
@keyframes reelhit {
  30% { box-shadow: inset 0 0 0 2.5px rgba(255,205,70,.9), inset 0 0 18px rgba(255,205,70,.5); }
}
#payline {
  position: absolute; left: 4px; right: 4px; top: 50%;
  height: 2.5px; margin-top: -1.25px;
  background: linear-gradient(90deg, transparent, var(--brass) 12%, var(--brass-hi) 50%, var(--brass) 88%, transparent);
  opacity: .65;
  pointer-events: none;
  z-index: 2;
}
/* 玻璃罩：斜向高光 */
#glass {
  position: absolute; inset: 0; border-radius: 6px;
  background:
    linear-gradient(112deg, transparent 28%, rgba(255,255,255,.13) 33%, rgba(255,255,255,.05) 40%, transparent 46%),
    linear-gradient(112deg, transparent 60%, rgba(255,255,255,.07) 64%, transparent 70%);
  pointer-events: none;
  z-index: 3;
}

/* ===== 操作面板 ===== */
#deck {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--enamel), var(--enamel-dk));
  border: 2px solid var(--brass-dk);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 5px rgba(90,58,20,.3), 0 2px 4px rgba(0,0,0,.45);
  position: relative;
}
#plate {
  flex: 1;
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #17120c, #241a10);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.5);
}
#plate-label { font-size: 9.5px; letter-spacing: .2em; color: #8a7148; }
#balance {
  margin-left: auto;
  font-size: 22px; font-weight: bold; letter-spacing: .1em;
  color: #ffd95e;
  text-shadow: 0 0 8px rgba(255,200,60,.5);
}
#balance.shake { animation: balshake .35s; }
@keyframes balshake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
#coinslot {
  width: 30px; height: 38px; border-radius: 4px;
  background: radial-gradient(circle at 35% 25%, var(--brass-hi), var(--brass) 55%, var(--brass-dk));
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
#coinslot i {
  display: block; width: 4px; height: 22px; border-radius: 2px;
  background: #1c1409;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,255,255,.35);
}
#debt {
  position: absolute; right: 16px; bottom: -2px;
  font-size: 10px; color: #c97f5e; letter-spacing: .1em;
}

/* ===== 金币托盘 ===== */
#tray {
  position: relative;
  height: 64px;
  margin: 10px 6px 0;
  border-radius: 0 0 14px 14px;
  background:
    radial-gradient(100% 130% at 50% -20%, rgba(0,0,0,.75) 30%, transparent 70%),
    linear-gradient(180deg, #3a3631, #211e1a 60%, #161310);
  border: 2px solid #4d463d;
  border-top: none;
  box-shadow: inset 0 6px 12px rgba(0,0,0,.85), inset 0 -2px 4px rgba(255,255,255,.06), 0 3px 7px rgba(0,0,0,.5);
  overflow: hidden;
}
#tray-lip {
  position: absolute; top: 0; left: -2px; right: -2px; height: 7px;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 50%, var(--brass-dk));
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.coin {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe9a0, #e3b33c 52%, #9a7115);
  box-shadow: inset 0 0 0 2px rgba(122,92,20,.65), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.55);
  animation: coindrop .55s cubic-bezier(.22,2.4,.5,1) both;
}
.coin::after {
  content: '★';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(122,92,20,.8);
}
@keyframes coindrop {
  0% { transform: translateY(-78px) rotate(-40deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(0) rotate(12deg); opacity: 1; }
}
#winpop {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: bold; letter-spacing: .08em;
  color: #ffd95e;
  text-shadow: 0 0 12px rgba(255,200,60,.8), 0 2px 3px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none;
}
#winpop.show { animation: winpop 1.6s ease-out both; }
@keyframes winpop {
  0% { opacity: 0; transform: translateY(16px) scale(.7); }
  18% { opacity: 1; transform: translateY(0) scale(1.12); }
  30% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ===== 拉杆 ===== */
#lever {
  position: relative;
  width: 56px; height: 240px;
  flex: none;
  perspective: 560px;
}
#slotbase {
  position: absolute; left: 50%; top: 38px; bottom: 26px;
  width: 14px; margin-left: -7px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--brass-dk), var(--brass) 30%, var(--brass-hi) 50%, var(--brass) 70%, var(--brass-dk));
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.6);
}
#slotbase::before {
  content: '';
  position: absolute; left: 50%; top: 8px; bottom: 8px; width: 4px; margin-left: -2px;
  border-radius: 2px;
  background: #140e07;
  box-shadow: inset 0 1px 3px #000;
}
#arm {
  position: absolute; left: 0; right: 0; top: 0; bottom: 30px;
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--pull, 0) * 1deg));
  /* 无 transition：拖拽直跟手指，回弹由 JS 阻尼弹簧驱动 */
  will-change: transform;
}
#rod {
  position: absolute; left: 50%; top: 22px; bottom: 0;
  width: 9px; margin-left: -4.5px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(90deg, #6a6a72, #d9dade 45%, #9a9aa4 60%, #55555c);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
#ball {
  position: absolute; left: 50%; top: 0;
  width: 38px; height: 38px; margin-left: -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ef8d7c, var(--red) 45%, #6d1b13 88%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.65), inset 0 2px 3px rgba(255,255,255,.3);
}
#lever.held #ball { filter: brightness(1.1); }

/* ===== 提示条（老板娘） ===== */
#toast {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(140%);
  max-width: 78vw;
  padding: 8px 16px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px; letter-spacing: .05em; text-align: center;
  border: 1.5px solid var(--brass-dk);
  box-shadow: 0 4px 14px rgba(0,0,0,.6), inset 0 0 10px rgba(90,58,20,.2);
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
  z-index: 30;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ===== JACKPOT 头奖海报 ===== */
#jackpot {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
}
#jackpot[hidden] { display: none; }
#poster { position: absolute; inset: 0; width: 100%; height: 100%; }
#jp-card {
  position: absolute; left: 50%; top: 14%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
#jp-title {
  font-family: var(--font-disp);
  font-size: clamp(40px, 13vw, 72px);
  color: var(--brass-hi);
  text-shadow: 0 2px 0 #8a6d1f, 0 4px 2px #4a3a0c, 0 0 38px rgba(255,210,90,.6), 0 6px 18px rgba(0,0,0,.8);
  animation: jptitle 1.1s ease-in-out infinite alternate;
}
@keyframes jptitle { from { filter: brightness(1); } to { filter: brightness(1.35); } }
#jp-amount {
  margin-top: 4px;
  font-size: clamp(26px, 8vw, 44px);
  font-weight: bold; letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 18px rgba(255,200,60,.9), 0 2px 6px rgba(0,0,0,.9);
}
#jp-sub {
  margin-top: 10px;
  font-size: 11px; letter-spacing: .3em;
  color: rgba(243,221,142,.85);
  text-shadow: 0 1px 3px #000;
}

/* 小屏适配：拉杆贴边 */
@media (max-width: 420px) {
  #room { gap: 0; }
  #lever { width: 48px; }
  #ball { width: 34px; height: 34px; margin-left: -17px; }
}

/* ===== v2.1 炫酷层 ===== */
/* 顶冠玻璃扫光 */
#shine {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
#shine::after {
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 34%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255,248,214,.16) 45%, rgba(255,255,255,.3) 50%, rgba(255,248,214,.16) 55%, transparent);
  transform: skewX(-12deg);
  animation: shinesweep 4.8s ease-in-out infinite;
}
@keyframes shinesweep { 0%, 60% { left: -45%; } 90%, 100% { left: 115%; } }

/* 中奖光环（套在机柜外） */
#machine { transition: filter .35s; }
body.win-sm #machine { filter: drop-shadow(0 0 26px rgba(255,190,60,.4)); }
body.win-big #machine { filter: drop-shadow(0 0 48px rgba(255,190,60,.75)) brightness(1.06); }

/* 机柜锁定顿挫 */
#machine.bump { animation: bump .16s; }
@keyframes bump { 40% { transform: translateY(2.5px); } }

/* payline 爆闪 */
#payline.flash {
  opacity: 1; height: 3.5px;
  box-shadow: 0 0 16px 3px rgba(255,210,90,.9);
  animation: paylineflash .42s ease-in-out 4;
}
@keyframes paylineflash { 50% { filter: brightness(2); } }

/* 中线中奖符号弹跳发光 */
.cell.pop svg {
  animation: sympop .5s cubic-bezier(.2, 2.2, .4, 1) 3 alternate;
  filter: drop-shadow(0 0 9px rgba(255,210,90,.95)) drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
@keyframes sympop { to { transform: scale(1.22); } }

/* 托盘光芒轮 */
#rays {
  position: absolute; inset: -55% -20%;
  pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,90,.25) 0deg 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle at 50% 62%, #000 0%, transparent 60%);
  mask: radial-gradient(circle at 50% 62%, #000 0%, transparent 60%);
}
#rays.on { animation: raysspin 2.2s ease-out; }
@keyframes raysspin {
  0% { opacity: 0; transform: rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(150deg); }
}

/* 屏闪 */
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0;
  background: radial-gradient(120% 100% at 50% 45%, rgba(255,226,140,.55), rgba(255,190,60,.16) 55%, transparent 78%);
}
#flash.go { animation: flashgo .5s ease-out; }
#flash.go.big { animation: flashgo .5s ease-out 3; }
@keyframes flashgo { 12% { opacity: 1; } 100% { opacity: 0; } }

/* 抛物线金币 */
.flycoin {
  position: fixed; width: 18px; height: 18px; border-radius: 50%;
  z-index: 35; pointer-events: none;
  background: radial-gradient(circle at 36% 30%, #ffe9a0, #e3b33c 52%, #9a7115);
  box-shadow: inset 0 0 0 1.5px rgba(122,92,20,.65), 0 2px 4px rgba(0,0,0,.5);
  animation: flyarc .78s cubic-bezier(.3, .1, .62, 1) both;
}
@keyframes flyarc {
  0% { transform: translate(0, 0) rotate(0) scale(.7); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translate(calc(var(--dx) * .6), -72px) rotate(200deg) scale(1.06); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(430deg) scale(.9); opacity: 1; }
}

/* JACKPOT 光轮 */
#jp-rays {
  position: absolute; left: 50%; top: 22%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255,214,90,.13) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 56%);
  mask: radial-gradient(circle, #000 0%, transparent 56%);
  animation: jprays 16s linear infinite;
}
@keyframes jprays { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 拉杆球头高光 */
#ball::after {
  content: '';
  position: absolute; left: 18%; top: 11%; width: 34%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent);
  filter: blur(.5px);
}

/* ===== v2.2 平衡 + 氛围层 ===== */
/* 拉杆挂上机柜：黄铜支架 + 居中补偿 */
#room { padding-left: calc(6px + 34px); } /* 补偿右侧拉杆宽度，让机柜+拉杆整体居中 */
#lever { margin-left: -14px; align-self: center; }
#mount {
  position: absolute; left: -16px; top: 58px;
  width: 30px; height: 96px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #5a4012, var(--brass-dk) 25%, var(--brass) 60%, var(--brass-dk));
  box-shadow: inset 0 2px 3px rgba(255,248,214,.35), inset 0 -3px 5px rgba(0,0,0,.45), 3px 3px 8px rgba(0,0,0,.55);
}
#mount::before, #mount::after {
  content: '';
  position: absolute; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--brass-dk) 75%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}
#mount::before { top: 8px; }
#mount::after { bottom: 8px; }
#slotbase { top: 30px; bottom: 34px; }
#pulltag {
  position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%);
  font-size: 9px; letter-spacing: .3em; text-indent: .3em;
  color: var(--brass);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  animation: pulltag 2.4s ease-in-out infinite;
}
@keyframes pulltag { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 机器落地：暖光池 */
#floorglow {
  position: absolute; left: 6%; right: 6%; bottom: -34px;
  height: 40px;
  background: radial-gradient(50% 60% at 50% 40%, rgba(255,190,90,.18), transparent 75%);
  filter: blur(7px);
  pointer-events: none;
}

/* 顶部聚光 */
#room::before {
  content: '';
  position: absolute; left: 50%; top: -4%;
  width: 130%; height: 64%;
  transform: translateX(-50%);
  background: radial-gradient(46% 100% at 50% 0%, rgba(255,214,140,.09), transparent 72%);
  pointer-events: none;
}

/* 漂浮尘埃（暗室氛围） */
#motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#motes i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,224,150,.35);
  filter: blur(.6px);
  animation: mote linear infinite;
}
#motes i:nth-child(1) { left: 18%; top: 22%; animation-duration: 11s; }
#motes i:nth-child(2) { left: 72%; top: 14%; animation-duration: 14s; animation-delay: -4s; width: 2px; height: 2px; }
#motes i:nth-child(3) { left: 36%; top: 8%;  animation-duration: 17s; animation-delay: -9s; }
#motes i:nth-child(4) { left: 85%; top: 42%; animation-duration: 12s; animation-delay: -6s; width: 2px; height: 2px; }
#motes i:nth-child(5) { left: 8%;  top: 55%; animation-duration: 16s; animation-delay: -2s; }
#motes i:nth-child(6) { left: 58%; top: 30%; animation-duration: 19s; animation-delay: -12s; width: 2px; height: 2px; }
@keyframes mote {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .6; }
  88%  { opacity: .25; }
  100% { transform: translate(26px, 64vh); opacity: 0; }
}

/* 转轴窗内灯：滚动时点亮 */
#reelbox .reel { transition: box-shadow .4s; }
#reelbox.lit .reel {
  box-shadow: inset 0 0 26px rgba(255,200,90,.3), inset 0 0 0 1px rgba(0,0,0,.35);
}

/* 小屏：补偿收紧 */
@media (max-width: 420px) {
  #room { padding-left: calc(6px + 22px); }
  #lever { margin-left: -10px; }
}

/* 托盘钢印（空盘不显得是黑洞） */
#tray::after {
  content: '· VIBE SLOT · 1952 ·';
  position: absolute; left: 0; right: 0; top: 52%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 10px; letter-spacing: .34em; text-indent: .34em;
  color: rgba(255,236,180,.13);
  text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
  pointer-events: none;
}

/* ===== BIG WIN 砸屏庆祝 ===== */
#bigwin {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
}
#bigwin.show { opacity: 1; }
.bw-title {
  font-family: var(--font-disp);
  font-size: clamp(52px, 17vw, 96px);
  letter-spacing: .04em;
  background: linear-gradient(100deg, #b08a1e 15%, var(--brass-hi) 35%, #fffbe8 50%, var(--brass-hi) 65%, #b08a1e 85%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 2px #4a3a0c) drop-shadow(0 0 28px rgba(255,210,90,.75)) drop-shadow(0 8px 22px rgba(0,0,0,.8));
  animation: goldflow 2.2s linear infinite;
  transform: scale(0);
}
#bigwin.show .bw-title {
  animation: goldflow 2.2s linear infinite, bwslam .55s cubic-bezier(.18, 2.4, .4, 1) forwards;
}
@keyframes bwslam { to { transform: scale(1); } }
.bw-amount {
  font-size: clamp(30px, 10vw, 52px);
  font-weight: bold; letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 0 22px rgba(255,200,60,1), 0 3px 8px rgba(0,0,0,.9);
  transform: scale(0);
}
#bigwin.show .bw-amount {
  animation: bwslam .5s cubic-bezier(.18, 2.4, .4, 1) .18s forwards;
}
#bigwin.out { transition: opacity .45s; opacity: 0; }

/* 作者署名（黄铜小牌，链到 GitHub） */
#about {
  position: fixed; left: 50%; bottom: max(6px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 5px 12px;
  font-size: 9.5px; letter-spacing: .28em; text-indent: .28em;
  color: #8a7148;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  z-index: 20;
  transition: color .2s, text-shadow .2s;
}
#about:hover, #about:active {
  color: var(--brass-hi);
  text-shadow: 0 0 10px rgba(243,221,142,.5);
}

/* ===== Loading：机器预热 ===== */
#loader {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  background:
    radial-gradient(120% 90% at 50% -10%, #2b2018 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 50%, #000 125%),
    var(--room);
  transition: opacity .65s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
#ld-title {
  font-family: var(--font-disp);
  font-size: clamp(34px, 11vw, 52px);
  letter-spacing: .06em;
  background: linear-gradient(100deg, #b08a1e 15%, var(--brass-hi) 35%, #fffbe8 50%, var(--brass-hi) 65%, #b08a1e 85%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 1px #4a3a0c) drop-shadow(0 0 20px rgba(243,221,142,.35));
  animation: goldflow 4s linear infinite;
}
#ld-sub {
  font-size: 10px; letter-spacing: .34em; text-indent: .34em;
  color: #8a7148;
}
#ld-bulbs { display: flex; gap: 10px; margin-top: 14px; }
#ld-bulbs .bulb { width: 13px; height: 13px; }
#ld-status {
  margin-top: 4px;
  font-size: 11px; letter-spacing: .22em; text-indent: .22em;
  color: #6f5a3a;
  animation: pulltag 1.8s ease-in-out infinite;
}

/* 揭幕：机器升起 */
#machine.preload, #lever.preload { opacity: 0; transform: translateY(14px) scale(.97); }
#machine, #lever { transition: opacity .7s ease, transform .7s cubic-bezier(.2, 1.3, .4, 1), filter .35s; }

/* ===== 分享 ===== */
#sharebtn, #mutebtn {
  position: fixed; right: 10px; top: max(10px, env(safe-area-inset-top));
  z-index: 20;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .24em; text-indent: .24em;
  color: #8a7148;
  background: linear-gradient(180deg, rgba(74,46,27,.9), rgba(44,27,16,.9));
  border: 1px solid var(--brass-dk);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(243,221,142,.18), 0 2px 6px rgba(0,0,0,.5);
  cursor: pointer;
}
#sharebtn:active, #mutebtn:active { transform: translateY(1px); color: var(--brass-hi); }
#mutebtn { right: 84px; }
#mutebtn.off { color: #5a4a30; text-decoration: line-through; }

#share {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(8,5,3,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#share.show { opacity: 1; pointer-events: auto; }
#shareCanvas {
  width: auto;
  height: min(74vh, 78dvh);
  aspect-ratio: 1080 / 1920;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(201,162,39,.35);
}
#share-actions { display: flex; gap: 12px; }
#share-actions button {
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .12em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--enamel), var(--enamel-dk));
  border: 1.5px solid var(--brass-dk);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 8px rgba(0,0,0,.5);
  cursor: pointer;
}
#share-actions button:active { transform: translateY(1px); filter: brightness(.95); }
#shClose { opacity: .85; }