/* ===================== 抓娃娃机 H5 - 霓虹游乐场风格（精修版） ===================== */
:root{
  --bg-1:#150429;
  --bg-2:#2d0a4e;
  --neon-pink:#ff3ec9;
  --neon-purple:#a855f7;
  --neon-cyan:#22d3ee;
  --neon-gold:#ffd24a;
  --gold-deep:#f59e0b;
  --danger:#ff4d6d;
  --glass:rgba(255,255,255,.08);
  --glass-brd:rgba(255,255,255,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;            /* 禁 iOS 长按"复制/选择/分享"系统菜单 */
  -webkit-user-select:none;user-select:none;
  touch-action:none;                      /* 阻止浏览器默认触摸手势（滚动/缩放/滑动后退） */
  overscroll-behavior:none}               /* 禁下拉刷新/滚动链 */
html,body{margin:0;padding:0;height:100%;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(60% 42% at 12% 0%, rgba(255,62,201,.16), transparent 62%),
    radial-gradient(52% 38% at 88% 6%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(70% 50% at 50% 100%, rgba(168,85,247,.10), transparent 65%),
    radial-gradient(circle at 50% 0%, var(--bg-2), var(--bg-1) 72%);
  color:#fff}
button{font-family:inherit;cursor:pointer;border:none;outline:none;color:#fff}

/* 背景漂浮光斑 */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx i{position:absolute;bottom:-140px;border-radius:50%;filter:blur(18px);opacity:.28;
  animation:floatUp linear infinite}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.28}
  85%{opacity:.22}
  100%{transform:translateY(-115vh) scale(1.15);opacity:0}
}

/* ===================== 顶栏 ===================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;
  background:linear-gradient(180deg,rgba(21,4,41,.92),rgba(21,4,41,.25));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.coins-box{display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#3a1070,#5b1f9e);
  padding:6px 14px;border-radius:20px;font-weight:700;font-size:15px;
  border:1px solid rgba(255,210,74,.35);
  box-shadow:0 0 14px rgba(168,85,247,.5),inset 0 1px 0 rgba(255,255,255,.15)}
.coin-ico{font-size:18px;animation:spin 3s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotateY(360deg)}}

.top-actions{display:flex;gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);font-size:17px;
  transition:transform .12s,background .12s;
}
.icon-btn:active{transform:scale(.9);background:rgba(255,255,255,.16)}

/* 充值按钮 - 金色脉冲呼吸 */
.recharge-btn{
  position:relative;
  background:linear-gradient(135deg,var(--neon-gold),var(--gold-deep));
  color:#3a1a00;font-weight:800;font-size:12px;
  padding:5px 14px;border-radius:20px;
  box-shadow:0 0 18px rgba(255,210,74,.7),inset 0 1px 0 rgba(255,255,255,.5);
  animation:pulseGold 1.8s ease-in-out infinite;
}
@keyframes pulseGold{
  0%,100%{box-shadow:0 0 18px rgba(255,210,74,.7),inset 0 1px 0 rgba(255,255,255,.5);transform:scale(1)}
  50%{box-shadow:0 0 30px rgba(255,210,74,1),inset 0 1px 0 rgba(255,255,255,.6);transform:scale(1.05)}
}

/* ===================== 跑马灯 ===================== */
.broadcast{
  position:fixed;top:52px;left:0;right:0;z-index:40;
  height:26px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,62,201,.12),rgba(34,211,238,.12));
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;
}
.broadcast-track{
  display:flex;gap:40px;white-space:nowrap;padding-left:100%;
  animation:marquee 22s linear infinite;font-size:12px;
}
.broadcast-track span{color:#ffe7a0}
.broadcast-track span b{color:var(--neon-gold)}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ===================== 房间选择器 ===================== */
.room-bar{
  position:fixed;top:84px;left:0;right:0;z-index:41;
  display:flex;gap:8px;padding:6px 12px;justify-content:center;
  background:linear-gradient(180deg,rgba(21,4,41,.7),rgba(21,4,41,.15));
}
.room-btn{
  flex:1;max-width:112px;padding:6px 8px;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-brd);
  font-size:12px;font-weight:700;color:#cbd5e1;text-align:center;line-height:1.3;
  transition:transform .12s,box-shadow .2s;
}
.room-btn:active{transform:scale(.95)}
.room-btn.active{
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-pink));
  border-color:var(--neon-gold);color:#fff;
  box-shadow:0 0 14px rgba(255,62,201,.55),inset 0 1px 0 rgba(255,255,255,.3);
}
.room-btn .cost{font-size:10px;color:var(--neon-gold);font-weight:800}
.room-btn.active .cost{color:#fff}

/* ===================== 游戏区：真实机柜造型 ===================== */
.stage{position:absolute;top:126px;left:8px;right:8px;bottom:256px;display:flex;justify-content:center;z-index:1}

/* 机柜外框：深紫箱体 + 金边描线 + 大投影 */
.cabinet{
  position:relative;width:100%;max-width:486px;height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,#43107a 0%,#2a0850 55%,#1c0538 100%);
  border-radius:18px;
  box-shadow:
    0 0 0 2px rgba(255,210,74,.4),
    0 0 34px rgba(168,85,247,.28),
    0 22px 48px rgba(0,0,0,.55);
}
/* 顶部灯泡招牌（嘉年华追逐灯） */
.marquee{
  position:relative;height:40px;flex:0 0 auto;
  border-radius:16px 16px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#ffe27a 0%,#f5a623 55%,#c67c0e 100%);
  box-shadow:inset 0 -4px 8px rgba(120,53,4,.45),inset 0 2px 2px rgba(255,255,255,.55);
}
.marquee::before,.marquee::after{
  content:'';position:absolute;left:6px;right:6px;height:9px;
  background-image:radial-gradient(circle 3.2px at 9px 4.5px,#fffbe8 88%,rgba(255,255,255,0) 100%);
  background-size:24px 9px;background-repeat:repeat-x;
  filter:drop-shadow(0 0 3px #fff3b0);
}
.marquee::before{top:2px;animation:chaseA 1.1s steps(2,jump-none) infinite}
.marquee::after{bottom:2px;background-position:12px 0;animation:chaseB 1.1s steps(2,jump-none) infinite}
@keyframes chaseA{0%,49.9%{opacity:1}50%,100%{opacity:.18}}
@keyframes chaseB{0%,49.9%{opacity:.18}50%,100%{opacity:1}}
.marquee-title{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:17px;letter-spacing:5px;color:#7c2d12;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(255,236,160,.6);
}
/* 玻璃展示区 */
.cabinet-glass{
  flex:1;position:relative;margin:5px 6px 0;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#3b1470 0%,#1a0633 72%);
  box-shadow:
    inset 0 0 0 2px rgba(255,210,74,.28),
    inset 0 0 34px rgba(0,0,0,.6);
}
/* 玻璃反光斜纹 */
.cabinet-glass::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.075) 45%,rgba(255,255,255,.02) 52%,transparent 62%);
}
#game{width:100%;height:100%;display:block}
/* 机柜底托 */
.cabinet-base{
  flex:0 0 auto;height:12px;margin:5px 6px 6px;border-radius:8px;
  background:linear-gradient(180deg,#5b21b6,#2e1065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.5);
}

/* LED 面板（计时/计局，数码管风格，机器面板左右对称） */
.led-panel{
  position:absolute;top:50px;z-index:30;
  background:linear-gradient(180deg,#0a0a0a,#1a0a02);
  border:2px solid #3a2a00;border-radius:8px;
  padding:4px 10px 5px;text-align:center;min-width:62px;
  box-shadow:0 0 12px rgba(255,170,0,.35),inset 0 0 8px rgba(0,0,0,.8);
  pointer-events:none;
}
.led-left{left:20px}
.led-right{right:20px}
.led-panel.warn{
  border-color:#5a0010;background:linear-gradient(180deg,#1a0000,#2a0008);
  box-shadow:0 0 14px rgba(255,77,109,.9),inset 0 0 8px rgba(0,0,0,.8);
  animation:timerPulse .6s ease-in-out infinite;
}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.led-panel.warn .round-led-digits{color:#ff4d6d;text-shadow:0 0 6px #ff4d6d,0 0 14px rgba(255,77,109,.9)}
.led-panel.warn .round-led-label{color:#8a0030}

.round-led-label{
  font-size:8px;letter-spacing:2px;color:#6b4a00;font-weight:800;line-height:1;
  margin-bottom:2px;
}
.round-led-digits{
  font-family:"DSEG7 Classic","DSEG7 Local","DS-Digital","Courier New",monospace;
  font-size:24px;font-weight:900;letter-spacing:2px;line-height:1;
  color:#ff8a00;
  text-shadow:0 0 4px #ff8a00,0 0 10px rgba(255,138,0,.8),0 0 18px rgba(255,138,0,.5);
}
@media (max-width:360px){ .led-panel{min-width:54px;padding:3px 8px 4px} .round-led-digits{font-size:20px} }
/* 局数翻动：新一局时数字闪一下（模拟数码管刷新） */
.round-led-digits.flip{animation:ledFlip .4s ease}
@keyframes ledFlip{
  0%{opacity:.2;transform:translateY(-3px)}
  50%{opacity:1;text-shadow:0 0 8px #ff8a00,0 0 18px rgba(255,138,0,1),0 0 28px rgba(255,138,0,.7)}
  100%{opacity:1;transform:translateY(0)}
}

/* ===================== 底部控制（三行布局） ===================== */
.controls{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;flex-direction:column;gap:6px;
  padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(45,10,78,.55),rgba(16,3,32,.98) 40%);
  border-top:2px solid rgba(255,210,74,.28);
  backdrop-filter:blur(10px);
}
.ctrl-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
/* 第一行：功能按钮等分 */
.fn-row .fn-btn{flex:1;text-align:center}
.fn-btn{
  font-size:12px;padding:8px 4px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid var(--glass-brd);
  white-space:nowrap;color:#e9d5ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.3);
  transition:transform .12s,box-shadow .2s;
}
.fn-btn:active{transform:scale(.93);background:rgba(255,255,255,.18)}

/* 第二行：功能按钮等分 */
.play-row{justify-content:space-evenly;gap:12px;padding:2px 6px 0}
/* 十字方向键：圆形金属底盘 + 中心轴毂 */
.dpad{
  position:relative;width:138px;height:138px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#3b1470 0%,#20083e 68%,#16042c 100%);
  box-shadow:
    0 0 0 2px rgba(255,210,74,.3),
    0 8px 20px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(255,255,255,.1),
    inset 0 -6px 12px rgba(0,0,0,.55);
}
.dpad::after{
  content:'';position:absolute;top:50%;left:50%;width:36px;height:36px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 30%,#6d28d9,#2e1065 75%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.5);
}
.dp-btn{
  position:absolute;width:44px;height:44px;border-radius:12px;z-index:1;
  background:linear-gradient(180deg,#8b5cf6 0%,#6d28d9 45%,#4c1d95 100%);
  border:1.5px solid rgba(196,163,255,.65);
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.35);
  font-size:17px;font-weight:900;color:#f3e8ff;text-shadow:0 1px 2px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s,filter .08s;
}
.dp-btn:active{filter:brightness(1.35);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 2px 6px rgba(0,0,0,.4)}
.dp-up{top:5px;left:50%;transform:translateX(-50%)}
.dp-left{top:50%;left:5px;transform:translateY(-50%)}
.dp-right{top:50%;right:5px;transform:translateY(-50%)}
.dp-down{bottom:5px;left:50%;transform:translateX(-50%)}
.dp-up:active{transform:translateX(-50%) scale(.9)}
.dp-left:active{transform:translateY(-50%) scale(.9)}
.dp-right:active{transform:translateY(-50%) scale(.9)}
.dp-down:active{transform:translateX(-50%) scale(.9)}

/* ===================== 虚拟摇杆（替代十字方向键） ===================== */
/* 结构：.joystick 容器(触摸热区) > .js-base(圆形底座) + .js-knob(可拖动手柄)
   与 .dpad 尺寸一致(138×138)，方便在两种布局中互换。 */
.joystick{
  position:relative;width:138px;height:138px;flex:0 0 auto;border-radius:50%;
  touch-action:none;            /* 摇杆区禁止浏览器手势，全由 JS 接管 */
  /* 底座：金属紫渐变 + 金边 + 内外阴影（沿用 dpad 视觉语言） */
  background:radial-gradient(circle at 50% 38%,#3b1470 0%,#20083e 68%,#16042c 100%);
  box-shadow:
    0 0 0 2px rgba(255,210,74,.3),
    0 8px 20px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(255,255,255,.1),
    inset 0 -6px 12px rgba(0,0,0,.55);
}
/* 底座中心圆环装饰（方向暗示） */
.js-base{
  position:absolute;top:50%;left:50%;width:92px;height:92px;border-radius:50%;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(255,210,74,.22);
  pointer-events:none;          /* 装饰层不拦截触摸 */
}
/* 可拖动手柄：实心球 + 高光，JS 控制 transform 平移 */
.js-knob{
  position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 30%,#a78bfa 0%,#7c3aed 50%,#4c1d95 100%);
  border:2px solid rgba(255,255,255,.45);
  box-shadow:
    0 4px 10px rgba(0,0,0,.5),
    inset 0 2px 4px rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(0,0,0,.4);
  pointer-events:none;          /* 手柄不拦截触摸，触摸事件全归容器 */
  transition:transform .12s cubic-bezier(.2,.8,.2,1);  /* 松手回弹动画 */
}
.joystick.active .js-knob{transition:none}   /* 拖动中禁用回弹动画，跟手 */

/* 抓取按钮：大红圆钮 + 金属环 + 呼吸光环 */
.grab-btn{
  position:relative;flex:0 0 auto;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ff7ab8 0%,#f43f8e 38%,#c81e6b 72%,#8f1049 100%);
  border:4px solid #ffe9f3;
  box-shadow:
    0 0 0 5px rgba(255,62,201,.28),
    0 0 30px rgba(255,62,201,.75),
    0 8px 18px rgba(0,0,0,.5),
    inset 0 3px 6px rgba(255,255,255,.45),
    inset 0 -8px 14px rgba(0,0,0,.4);
  font-size:18px;font-weight:900;letter-spacing:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  animation:pulseGrab 1.4s ease-in-out infinite;
  transition:transform .08s;
}
@keyframes pulseGrab{
  0%,100%{box-shadow:0 0 0 5px rgba(255,62,201,.28),0 0 26px rgba(255,62,201,.7),0 8px 18px rgba(0,0,0,.5),inset 0 3px 6px rgba(255,255,255,.45),inset 0 -8px 14px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 0 7px rgba(255,62,201,.4),0 0 44px rgba(255,62,201,1),0 8px 18px rgba(0,0,0,.5),inset 0 3px 6px rgba(255,255,255,.45),inset 0 -8px 14px rgba(0,0,0,.4)}
}
.grab-btn:active{transform:scale(.9)}
.grab-btn:disabled{opacity:.45;animation:none;filter:grayscale(.35)}

/* 连击显示 */
.combo-badge{
  position:fixed;top:88px;right:14px;z-index:45;
  background:linear-gradient(135deg,#ff3ec9,#ff8a00);
  padding:4px 12px;border-radius:14px;font-weight:900;font-size:13px;
  box-shadow:0 0 14px rgba(255,138,0,.7);
  opacity:0;transition:opacity .3s;
}
.combo-badge.show{opacity:1}
.combo-num{font-size:20px;color:#fff;text-shadow:0 0 6px #fff}

/* ===================== 弹层通用 ===================== */
.mask{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
}
.mask.show{display:flex}
.sheet{
  position:relative;
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#2d0a4e,#1a0633);
  border-radius:22px 22px 0 0;border-top:1px solid rgba(255,210,74,.35);
  padding:18px 16px 28px;animation:slideUp .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -12px 40px rgba(0,0,0,.5);
  touch-action:pan-y;            /* 弹层内容允许纵向滚动（覆盖全局 touch-action:none） */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet h3{margin:0 0 14px;text-align:center;font-size:18px;
  background:linear-gradient(90deg,var(--neon-pink),var(--neon-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sheet-close{position:absolute;top:12px;right:16px;font-size:24px;color:#aaa;width:32px;height:32px;background:transparent}

/* 套餐卡 */
.pkg-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pkg{
  position:relative;border-radius:14px;padding:14px 10px;text-align:center;
  background:linear-gradient(160deg,rgba(168,85,247,.2),rgba(34,211,238,.1));
  border:1px solid var(--glass-brd);transition:transform .15s;
}
.pkg:active{transform:scale(.97)}
.pkg.hot{border-color:var(--neon-gold);box-shadow:0 0 16px rgba(255,210,74,.5)}
.pkg .price{font-size:22px;font-weight:900;color:var(--neon-gold)}
.pkg .price small{font-size:12px}
.pkg .coins{font-size:13px;color:#fff;margin:4px 0}
.pkg .bonus{font-size:11px;color:#ff8a00;font-weight:700}
.pkg .tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  background:var(--danger);color:#fff;font-size:10px;padding:2px 8px;border-radius:8px;white-space:nowrap}
.pkg .pay-btn{width:100%;margin-top:8px;padding:7px;border-radius:10px;
  background:linear-gradient(135deg,var(--neon-gold),var(--gold-deep));color:#3a1a00;font-weight:800;font-size:13px}

/* 中奖弹窗 */
.win-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(255,210,74,.2),rgba(0,0,0,.85))}
.win-modal.show{display:flex}
.win-card{text-align:center;animation:winPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes winPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.win-emoji{font-size:120px;filter:drop-shadow(0 0 30px var(--neon-gold));animation:winBounce 1s ease infinite}
@keyframes winBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.win-name{font-size:26px;font-weight:900;margin:10px 0 4px;
  background:linear-gradient(90deg,var(--neon-gold),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.win-rarity{display:inline-block;padding:2px 12px;border-radius:10px;font-size:12px;margin-bottom:12px}
.r-SSR{background:#ff3ec9;color:#fff;box-shadow:0 0 12px #ff3ec9}
.r-SR{background:#a855f7;color:#fff}
.r-R{background:#22d3ee;color:#032027}
.r-N{background:#6b7280;color:#fff}
.win-ok{padding:12px 40px;border-radius:24px;font-size:16px;font-weight:800;
  background:linear-gradient(135deg,var(--neon-gold),var(--gold-deep));color:#3a1a00;
  box-shadow:0 0 20px rgba(255,210,74,.7)}

/* 失败提示 */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:150;
  background:rgba(10,2,24,.88);padding:16px 28px;border-radius:14px;font-size:15px;
  border:1px solid rgba(255,210,74,.3);display:none;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:80vw}
.toast.show{display:block;animation:toastIn .3s}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* 背包/记录列表 */
.list-row{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:10px;background:var(--glass);margin-bottom:8px}
.list-row .l{display:flex;align-items:center;gap:10px}
.list-row .e{font-size:30px}
.list-row .cnt{background:var(--neon-pink);padding:2px 10px;border-radius:10px;font-size:12px;font-weight:700}

/* 签到日历 */
.sign-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.sign-day{text-align:center;padding:10px 4px;border-radius:8px;background:var(--glass);font-size:11px}
.sign-day.done{background:linear-gradient(135deg,#ff8a00,#ff3ec9);box-shadow:0 0 10px rgba(255,138,0,.5)}
.sign-day.today{border:2px solid var(--neon-gold)}
.sign-day .d{font-size:10px;color:#aaa}
.sign-day .r{font-weight:800;color:var(--neon-gold)}

/* 兑换 */
.ex-row{display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-radius:12px;background:var(--glass);margin-bottom:10px;border:1px solid var(--glass-brd)}
.ex-need{font-size:11px;color:#bbb;margin-top:4px}
.ex-btn{padding:8px 14px;border-radius:10px;font-size:12px;font-weight:800;
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-pink))}

/* 邀请 */
.invite-box{text-align:center;padding:20px 0}
.invite-code{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--neon-gold);
  background:var(--glass);padding:12px 24px;border-radius:12px;display:inline-block;margin:12px 0;
  border:1px dashed var(--neon-gold)}
.copy-btn{padding:8px 20px;border-radius:20px;background:var(--neon-cyan);color:#032027;font-weight:700}

/* 金光扫光 */
.shine{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;overflow:hidden}
.shine.go{animation:shineAnim .8s ease-out}
@keyframes shineAnim{0%{opacity:0}30%{opacity:.6}100%{opacity:0}}
.shine::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);
  transform:translateX(-100%);animation:shineSweep .8s ease-out}
@keyframes shineSweep{to{transform:translateX(100%)}}

/* 滚动条 */
.sheet::-webkit-scrollbar{width:4px}
.sheet::-webkit-scrollbar-thumb{background:var(--neon-purple);border-radius:2px}

.empty{text-align:center;color:#777;padding:30px 0;font-size:13px}

/* ===================== 投币口（预购局数） ===================== */
.coin-row{justify-content:center;gap:12px}
.coin-progress{display:flex;align-items:center;gap:8px;min-height:34px;flex:1;justify-content:flex-start;padding-left:4px}
/* 预购局数计数 */
.cp-count{
  font-size:18px;font-weight:900;color:var(--neon-gold);
  background:rgba(255,210,74,.12);padding:4px 12px;border-radius:16px;
  border:1px solid rgba(255,210,74,.4);
  text-shadow:0 0 8px rgba(255,210,74,.6);
  animation:coinPop .25s ease;
}
.cp-free{font-size:12px;color:#22d3ee;font-weight:700;background:rgba(34,211,238,.12);padding:3px 8px;border-radius:12px}
@keyframes coinPop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
/* 投币按钮 */
.insert-btn{
  flex:0 0 auto;padding:9px 22px;border-radius:22px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,#22d3ee,#0891b2);color:#032027;
  box-shadow:0 0 16px rgba(34,211,238,.6),inset 0 1px 0 rgba(255,255,255,.4);
  letter-spacing:1px;min-width:96px;
}
.insert-btn:active{transform:scale(.93)}
.insert-btn:disabled{opacity:.4;box-shadow:none}
/* 投币提示文案 */
.cp-hint{font-size:11px;color:#ffe7a0;align-self:center}

/* ============================================================
   横屏布局（body.landscape 时生效）
   三列：左列(摇杆+功能键) | 中列(机柜舞台) | 右列(投币+抓取)
   顶栏压成单行，跑马灯/房间栏/连击在横屏下隐藏以腾空间。
   ============================================================ */

/* 根容器：横屏时整体用 flex 行布局，三列横向排列 */
body.landscape{
  display:flex;flex-direction:row;align-items:stretch;
  height:100%;width:100%;overflow:hidden;
}

/* 顶栏：横屏下变成左侧顶部的小信息条，固定宽度 */
body.landscape .topbar{
  position:absolute;top:0;left:0;right:0;z-index:60;
  height:38px;padding:4px 10px;
  background:linear-gradient(180deg,rgba(21,4,41,.95),rgba(21,4,41,.4));
}
body.landscape .topbar .recharge-btn{padding:4px 10px;font-size:12px}
body.landscape .topbar .icon-btn{width:30px;height:30px;font-size:14px}

/* 跑马灯/房间栏/连击：横屏隐藏，腾出舞台空间 */
body.landscape .broadcast,
body.landscape .room-bar,
body.landscape .combo-badge{display:none}

/* 舞台：横屏下从 absolute 改为 flex 中列，居中放大 */
body.landscape .stage{
  position:absolute;top:42px;bottom:0;left:0;right:0;z-index:1;
}
/* 机柜在横屏下限制最大宽度，避免过宽变形 */
body.landscape .cabinet{max-width:none;height:calc(100% - 8px);margin:4px auto}

/* LED 面板：横屏下移到舞台内部合适位置 */
body.landscape .led-panel{top:8px}
body.landscape .led-left{left:12px}
body.landscape .led-right{right:12px}

/* 底部控制：横屏下从底部 fixed 改为绝对覆盖在舞台两侧
   做法：controls 本身定位在底部，但内部三行用绝对定位分到左右两列浮于舞台上 */
body.landscape .controls{
  position:absolute;bottom:0;left:0;right:0;z-index:55;
  background:none;border:none;backdrop-filter:none;padding:0;
  display:block;height:0;             /* 容器本身不占空间，子元素绝对定位 */
}

/* 横屏下：第一行(功能键) → 左列底部纵向小条 */
body.landscape .fn-row{
  position:absolute;left:10px;bottom:10px;
  flex-direction:column;width:auto;max-width:120px;gap:5px;
}
body.landscape .fn-row .fn-btn{padding:6px 10px;font-size:11px}

/* 横屏下：第二行(投币) → 右列顶部 */
body.landscape .coin-row{
  position:absolute;right:14px;top:50px;
  flex-direction:column;align-items:center;gap:6px;width:auto;
}
body.landscape .coin-progress{justify-content:center;flex:none}

/* 横屏下：第三行(摇杆+抓取) → 摇杆左下，抓取右下 */
body.landscape .play-row{
  position:absolute;left:0;right:0;bottom:0;height:0;
}
body.landscape .joystick{
  position:absolute;left:18px;bottom:18px;
  width:120px;height:120px;
}
body.landscape .grab-btn{
  position:absolute;right:22px;bottom:22px;
  width:84px;height:84px;
}