/**
 * PA Lucky Wheel Black Gold UI Styles
 * Version: 1.0.4
 * 
 * Color Scheme:
 * - Background: Deep black (#020617)
 * - Gold accents: #d4af37, #facc15
 * - Text: Light gray (#e5e7eb)
 * - Muted text: Medium gray (#9ca3af)
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --lw-bg: #020617;
  --lw-bg-soft: #020617;
  --lw-text: #e5e7eb;
  --lw-muted: #9ca3af;
  --lw-gold: #d4af37;
  --lw-gold-soft: #facc15;
  --lw-radius-xl: 18px;
  --lw-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.85);
  --lw-border-subtle: rgba(212, 175, 55, 0.25);
}

/* ========================================
   Page Shell & Layout
   ======================================== */
.lw-page {
  padding: 40px 0;
  background: radial-gradient(circle at top, #020617 0%, #020617 60%, #000 100%);
  color: var(--lw-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.lw-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 18px 40px;
  background: radial-gradient(circle at top, #111320 0%, #020617 60%);
  border-radius: 24px;
  border: 1px solid var(--lw-border-subtle);
  box-shadow: var(--lw-shadow-lg);
  position: relative;
  overflow: hidden;
}

/* ======================================== 
   Header Section (Updated Layout)
   ======================================== */
.lw-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-start !important; /* ⭐ 强制靠左 */
}
/* 左侧区域：金币 + Spins */
.lw-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: -8px !important; /* ⭐ 加大偏移量 + !important */
  margin-right: auto; /* ⭐ 推到左边 */
}
/* （如果以后你还想用 logo，可以保留这几段） */
.lw-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lw-logo-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 0, #facc15 0%, #a16207 45%, #020617 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #020617;
  font-weight: 800;
  font-size: 20px;
  box-shadow:
    0 0 0 1px rgba(250, 250, 249, 0.8),
    0 0 20px rgba(250, 204, 21, 0.9);
  flex-shrink: 0;
}

.lw-title-block h1 {
  margin: 0 0 2px;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.lw-title-block p {
  margin: 0;
  font-size: 12px;
  color: var(--lw-muted);
  line-height: 1.4;
}

/* Gold Coins · Spins pill */
.lw-balance-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.85);
  font-size: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.lw-balance-pill strong {
  color: var(--lw-gold-soft);
}

/* 右侧区域：Event Rules 靠右贴边 */
.lw-header-right {
  margin-left: auto;             /* ⭐ 关键：把右侧推到最右边 */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Event Rules 按钮 */
.lw-rules-btn {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.7);
  color: var(--lw-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.lw-rules-btn:hover {
  border-color: var(--lw-gold);
  color: var(--lw-gold);
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
  transform: translateY(-1px);
}

.lw-rules-btn:active {
  transform: translateY(0);
}

/* ========================================
   Main Layout (Two Columns)
   ======================================== */
.lw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .lw-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  
  .lw-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .lw-header-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ========================================
   Wheel Card (Left Column)
   ======================================== */
.lw-wheel-card {
  background: radial-gradient(circle at 20% 0, #0f172a 0%, #020617 60%);
  border-radius: var(--lw-radius-xl);
  border: 1px solid rgba(15, 23, 42, 0.9);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  padding: 12px 8px;
  position: relative;
  margin-top: -20px; /* ⭐ 往上移动20px */
}

.lw-wheel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.lw-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lw-gold-soft);
  margin-bottom: 4px;
  font-weight: 600;
  display: none !important; 
}

.lw-wheel-header h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.lw-wheel-header p {
  margin: 0;
  font-size: 12px;
  color: var(--lw-muted);
  line-height: 1.4;
}

/* ========================================
   Wheel Component
   ======================================== */
.lw-wheel-inner {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 16px;
}

/* Pointer/Arrow — 旧轮盘保留占位（苹果机不用） */
.lw-pointer {
  display: none;
}

/* Wheel Frame Container */
.lw-wheel-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 12px auto 6px;
  aspect-ratio: 1;
}

/* ========================================
   Prize Panel (Right Column)
   ======================================== */
.lw-panel {
  background: radial-gradient(circle at 100% 0, #020617 0%, #020617 60%, #000 100%);
  border-radius: var(--lw-radius-xl);
  border: 1px solid rgba(30, 64, 175, 0.8);
  padding: 14px 14px 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.85);
}

.lw-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.lw-panel-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.lw-panel-sub {
  font-size: 11px;
  color: var(--lw-muted);
  margin-top: 2px;
}

.lw-pill {
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: var(--lw-muted);
  white-space: nowrap;
}

/* Statistics Row */
.lw-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--lw-muted);
}

.lw-stat-row strong {
  color: #fefce8;
  font-weight: 600;
}

/* Prize List */
.lw-prize-list {
  border-radius: 14px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 8px 8px 6px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.4));
  margin-bottom: 8px;
}

.lw-prize-list h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 5px;
  color: var(--lw-gold-soft);
  font-weight: 600;
}

.lw-prize-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px; /* Prevent layout shift when empty */
}

/* 新版 Badge 样式 */
.lw-badge {
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e5e7eb;
  line-height: 1.2;
}

.lw-badge.jackpot {
  border-color: rgba(250, 204, 21, 0.9);
  background: radial-gradient(circle at 0 0, rgba(250, 204, 21, 0.14), rgba(15, 23, 42, 0.9));
  color: #fefce8;
  font-weight: 600;
}

.lw-badge.mid {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(30, 58, 138, 0.3);
}

/* ========================================
   Current Result Card
   ======================================== */
.lw-current-card {
  border-radius: 14px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 10px 10px 11px;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 1));
  margin-bottom: 10px;
}

.lw-current-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lw-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.lw-current-main {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--lw-text);
  line-height: 1.4;
}

.lw-current-desc {
  font-size: 11px;
  color: var(--lw-muted);
  line-height: 1.4;
}

/* ========================================
   Recent Wins
   ======================================== */
.lw-recent {
  margin-top: 8px;
  font-size: 11px;
  color: var(--lw-muted);
}

.lw-recent strong {
  display: block;
  margin-bottom: 4px;
  color: #e5e7eb;
  font-weight: 600;
}

.lw-recent-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}

/* ========================================
   Toast Notifications
   ======================================== */
.lw-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 14px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 9999;
  max-width: 90%;
  text-align: center;
  backdrop-filter: blur(8px);
  animation: lw-toast-in 0.3s ease;
}

@keyframes lw-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.lw-toast--error {
  border-color: rgba(248, 113, 113, 0.9);
  background: rgba(127, 29, 29, 0.95);
  color: #fecaca;
}

.lw-toast--success {
  border-color: rgba(34, 197, 94, 0.9);
  background: rgba(20, 83, 45, 0.95);
  color: #bbf7d0;
}

/* ========================================
   Rules Bar
   ======================================== */
.lw-rules-bar {
  margin-top: 18px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--lw-muted);
  line-height: 1.5;
  display: none; /* Hidden by default, toggled by JS */
  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.12), rgba(15,23,42,1));
}

.lw-rules-bar strong {
  color: var(--lw-gold-soft);
  font-weight: 600;
}

/* ========================================
   Error States
   ======================================== */
.lw-error {
  padding: 20px;
  text-align: center;
  color: #ef4444;
  background: #1f2937;
  border-radius: 12px;
  margin: 20px 0;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.lw-error strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
  .lw-shell {
    padding: 20px 14px 30px;
  }
  
  .lw-panel {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .lw-title-block h1 {
    font-size: 16px;
  }
  
  .lw-balance-pill {
    font-size: 11px;
    padding: 5px 10px;
  }
  
  .lw-wheel-caption {
    font-size: 11px;
  }
}

/* =========================================================
   APPLE / FRUIT SLOT MACHINE STYLES (scoped to .lw-shell)
   ========================================================= */

/* 只在 Lucky Wheel 外壳内部重置 box-sizing，避免污染全站 */
.lw-shell .machine,
.lw-shell .machine * {
  box-sizing: border-box;
}

/* 机器整体外框 */
.lw-shell .machine {
  width: 100%;
  max-width: 560px;
  height: 820px; /* 加高，底部不会溢出 */
  background: linear-gradient(180deg,#f6d58a 0,#f3b24a 40%,#c26d30 90%);
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(0,0,0,.55);
  padding: 14px 16px;
  position: relative;
  margin: -30px auto 0;
}

.lw-shell .machine .inner {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top,#ffe9b3 0,#f3b24a 40%,#8b4513 95%);
  border-radius: 24px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.4);
  padding: 14px 16px;
  position: relative;
}

/* 顶部标题区（保持英文 / 不参与多语言） */
.lw-shell .machine .header {
  text-align: center;
  margin-bottom: 6px;
}

.lw-shell .machine .header-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .26em;
  color: #b91014;
  text-shadow: 0 1px 0 #fff,0 0 8px rgba(255,255,255,.8);
}

.lw-shell .machine .header-sub {
  font-size: 11px;
  color: #7c2d12;
  margin-top: 2px;
}

/* 棋盘主区域 */
.lw-shell .machine .board {
  position: relative;
  width: 100%;
  height: 420px;
  margin: 10px auto 8px;
  background: radial-gradient(circle at center,#f4d492 0,#9b4b1e 70%);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(7,1fr);
  gap: 6px;
}

/* 外围各个格子 */
.lw-shell .machine .slot {
  background: linear-gradient(145deg,#fff4d6,#f0c456);
  border-radius: 12px;
  box-shadow:
    0 0 0 2px rgba(177,113,23,.7) inset,
    0 2px 3px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 24px;
}

.lw-shell .machine .slot span{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.lw-shell .machine .big-icon{
  font-size: 28px;
}

.lw-shell .machine .small-icon{
  font-size: 18px;
}

/* BAR 统一高端色（深紫金 + 发光） */
.lw-shell .machine .bar-icon{
  color:#3b0764;
  text-shadow:
    0 0 2px #fff,
    0 0 6px rgba(192,132,252,0.9);
}

/* 木瓜 emoji 容器 */
.lw-shell .machine .papaya-icon{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lw-shell .machine .papaya-icon::before{
  content: '🥭';
  font-size: 26px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.lw-shell .machine .papaya-icon-small::before{
  font-size: 18px; /* 小木瓜 */
}

/* 角落文字，例如 x2 / MAX */
.lw-shell .machine .slot-label{
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #8a1b11;
  text-shadow: 0 0 2px #fff;
}

/* 中心大区域（黑屏 + 跑圈） */
.lw-shell .machine .center{
  grid-row: 2/7;
  grid-column: 2/7;
  border-radius: 22px;
  background: radial-gradient(circle at center,#ffeab1 0,#f7b844 35%,#944018 80%);
  box-shadow: 0 0 18px rgba(173,83,0,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 24px;
  position: relative;
  overflow: hidden;
}

.lw-shell .machine .center-border{
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 3px dotted rgba(255,255,255,.9);
  box-shadow: 0 0 10px rgba(255,255,255,.8);
  animation: borderPulse 3.2s ease-in-out infinite;
}

@keyframes borderPulse{
  0%{
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 0 10px rgba(255,255,255,.8);
  }
  50%{
    border-color: rgba(250,204,21,.95);
    box-shadow: 0 0 18px rgba(250,204,21,1);
  }
  100%{
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 0 10px rgba(255,255,255,.8);
  }
}

/* 顶部文字区域（可以留空，中心黑屏显示 Fruit Machine） */
.lw-shell .machine .center-title{
  position: relative;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.3em;  /* ⭐ 减小间距到 0.3em */
  color: #b91014;
  margin-bottom: 10px;
  text-shadow: 0 0 4px #fff;
  text-align: center;     /* ⭐ 确保居中 */
  margin-right: -0.3em;   /* ⭐ 补偿最后一个字符的letter-spacing */
}
/* 中心黑屏 */
.lw-shell .machine .center-display{
  position: relative;
  width: 190px;
  height: 90px;
  border-radius: 12px;
  background: #020617;
  border: 2px solid #ffb347;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DS-Digital","Courier New",monospace;
  font-size: 32px;
  color: #ff2c2c;
  box-shadow: inset 0 0 12px #000;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.1;
  flex-direction: column;
}

/* 中心 Fruit Machine 文案（字号缩小约 30%） */
.lw-shell .machine .center-display .center-brand{
  font-size: 20px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color:#facc15;
}

/* 输的时候黑屏文案 */
.lw-shell .machine .lose-main{
  font-size: 28px;
  margin-bottom: 4px;
}

.lw-shell .machine .lose-sub{
  font-size: 12px;
}

/* 赢的时候黑屏文案 + 小女孩弹出 */
.lw-shell .machine .win-main{
  font-size: 26px;
  color: #facc15;
  text-shadow: 0 0 8px rgba(250,204,21,.9);
  margin-bottom: 2px;
}

.lw-shell .machine .win-sub{
  font-size: 14px;
  color: #fee9a5;
}

.lw-shell .machine .girl-popup{
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%,0);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  animation: girlPop 1.3s ease-out forwards;
}

.lw-shell .machine .girl-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(145deg,#fecaca,#f97316);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0,0,0,.45);
  font-size: 18px;
}

.lw-shell .machine .girl-bubble{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.95);
  color: #fee2e2;
  font-size: 11px;
  white-space: nowrap;
}

@keyframes girlPop{
  0%{
    transform: translate(-50%,40px) scale(.6);
    opacity: 0;
  }
  40%{
    transform: translate(-50%,0) scale(1);
    opacity: 1;
  }
  100%{
    transform: translate(-50%,-10px) scale(1);
    opacity: 0;
  }
}

/* 中心 8 个小灯圈 */
.lw-shell .machine .ring{
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 16px;
  z-index: 2;
}

.lw-shell .machine .ring-dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 3px rgba(0,0,0,.45);
  transition: background .08s,box-shadow .08s,opacity .08s;
}

.lw-shell .machine .ring-dot.active{
  background: #ef4444;
  box-shadow:
    0 0 6px rgba(220,38,38,1),
    0 0 14px rgba(252,165,165,1);
}
/* Neon chase for 8-dot ring (guess High/Low) */
.lw-shell .machine .ring-dot.ring-tail {
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
  opacity: 0.85;
}

.lw-shell .machine .ring-dot.ring-tail-2 {
  box-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
  opacity: 0.7;
}

/* 跑灯 / luck 高亮状态 */
.lw-shell .machine .slot.active{
  box-shadow:
    0 0 12px rgba(255, 64, 160, 1),
    0 0 20px rgba(255, 128, 192, .95),
    0 0 0 2px rgba(255, 64, 160, 1) inset;
  transform: scale(1.05);
  transition: transform .06s ease-out,box-shadow .06s ease-out;
}

.lw-shell .machine .slot.luck1{
  box-shadow:
    0 0 10px rgba(56,189,248,1),
    0 0 18px rgba(56,189,248,.9),
    0 0 0 2px rgba(56,189,248,1) inset;
  transform: scale(1.04);
}

.lw-shell .machine .slot.luck2{
  box-shadow:
    0 0 10px rgba(250,204,21,1),
    0 0 18px rgba(250,204,21,.9),
    0 0 0 2px rgba(250,204,21,1) inset;
  transform: scale(1.04);
}

.lw-shell .machine .slot.luck3{
  box-shadow:
    0 0 10px rgba(251,113,133,1),
    0 0 18px rgba(251,113,133,.9),
    0 0 0 2px rgba(251,113,133,1) inset;
  transform: scale(1.04);
}
/* Neon chase MAIN slot – hot pink highlight */
.lw-shell .machine .slot.chase-main {
  background: linear-gradient(145deg, #ffe6f7, #ff5fb5); /* 很亮的粉色渐变 */
  box-shadow:
    0 0 14px rgba(255, 105, 180, 1),
    0 0 26px rgba(255, 182, 193, 1),
    0 0 0 2px rgba(255, 192, 203, 0.95) inset;
  transform: scale(1.06);
  transition: box-shadow 0.08s linear, transform 0.08s linear, background 0.08s linear;
}

/* 尾巴 1：亮粉色霓虹 */
.lw-shell .machine .slot.chase-tail {
  box-shadow:
    0 0 14px rgba(255, 105, 180, 0.95),   /* 更亮的霓虹粉 */
    0 0 26px rgba(255, 182, 193, 0.85);  /* 外扩柔光 */
  opacity: 0.92;                         /* 几乎不透明 */
  transform: scale(1.03);                /* 稍微放大一点点 */
  transition: box-shadow 0.08s linear, opacity 0.08s linear;
}

/* 尾巴 2：淡粉紫光尾 */
.lw-shell .machine .slot.chase-tail-2 {
  box-shadow:
    0 0 10px rgba(255, 182, 193, 0.75),  /* 更淡的粉色 */
    0 0 18px rgba(255, 192, 203, 0.55);  /* 离主灯更远 */
  opacity: 0.75;
  transform: scale(1.01);
  transition: box-shadow 0.08s linear, opacity 0.08s linear;
}

/* BIG WIN 蒙层 */
.lw-shell .machine .bigwin{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at center,rgba(255,248,196,.9),rgba(180,62,2,.96));
  z-index: 20;
  overflow: hidden;
}

.lw-shell .machine .bigwin-title{
  font-size: 66px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #ffcf32;
  text-shadow:
    0 0 16px rgba(255,188,31,1),
    0 0 36px rgba(255,255,255,.9);
  margin-bottom: 10px;
  z-index: 2;
}

.lw-shell .machine .bigwin-text{
  font-size: 15px;
  color: #7c2d12;
  z-index: 2;
}

/* 樱花飘落效果背景 */
.lw-shell .machine .sakura-container{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.lw-shell .machine .sakura{
  position: absolute;
  top: -10%;
  font-size: 24px;
  opacity: .9;
  animation: sakuraFall linear infinite;
}

@keyframes sakuraFall{
  0%{
    transform: translateY(-10%) rotate(0deg);
    opacity: .9;
  }
  100%{
    transform: translateY(110%) rotate(360deg);
    opacity: 0;
  }
}

.lw-shell .machine .sakura:nth-child(1){left:5%;  animation-duration:6s;  animation-delay:0s;}
.lw-shell .machine .sakura:nth-child(2){left:15%; animation-duration:7s;  animation-delay:1s;}
.lw-shell .machine .sakura:nth-child(3){left:25%; animation-duration:5.5s;animation-delay:.5s;}
.lw-shell .machine .sakura:nth-child(4){left:35%; animation-duration:7.5s;animation-delay:1.2s;}
.lw-shell .machine .sakura:nth-child(5){left:45%; animation-duration:6.5s;animation-delay:.8s;}
.lw-shell .machine .sakura:nth-child(6){left:55%; animation-duration:7.2s;animation-delay:1.5s;}
.lw-shell .machine .sakura:nth-child(7){left:65%; animation-duration:5.8s;animation-delay:.3s;}
.lw-shell .machine .sakura:nth-child(8){left:75%; animation-duration:6.8s;animation-delay:1.8s;}
.lw-shell .machine .sakura:nth-child(9){left:85%; animation-duration:7.1s;animation-delay:.9s;}
.lw-shell .machine .sakura:nth-child(10){left:95%;animation-duration:5.9s;animation-delay:1.3s;}

/* 底部控制按钮与状态区域 */
.lw-shell .machine .controls{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lw-shell .machine .btn{
  flex: 1;
  padding: 10px 0;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  transition: transform .07s ease-out,box-shadow .07s ease-out,filter .07s ease-out;
}

.lw-shell .machine .btn:active{
  transform: translateY(1px) scale(.97);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  filter: brightness(.96);
}

.lw-shell .machine .btn-blue{
  max-width: 76px;
  background: linear-gradient(145deg,#5ad2ff,#1f9ee5);
  color: #012235;
}

.lw-shell .machine .btn-small{
  max-width: 90px;
  background: linear-gradient(145deg,#8be68f,#32b44a);
  color: #053014;
}

.lw-shell .machine .btn-big{
  max-width: 90px;
  background: linear-gradient(145deg,#9fe1ff,#1f9ee5);
  color: #022642;
}

.lw-shell .machine .btn-start{
  flex: 1.4;
  background: radial-gradient(circle at 30% 0,#ffeceb 0,#ff3b3b 40%,#a80716 100%);
  color: #fff;
  font-size: 16px;
}

.lw-shell .machine .btn-active{
  box-shadow: 0 0 12px rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.9);
}

/* 总金币显示 */
.lw-shell .machine .total-wrap{
  margin-top: 4px;
  display: flex;
  justify-content: center;
}

.lw-shell .machine .total-coins{
  background: #020617;
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 12px;
  color: #facc15;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}

/* 底部提示文字 */
.lw-shell .machine .status{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: #7c2d12;
  min-height: 18px;
}

.lw-shell .machine .status-strong{
  color: #fbbf24;
  font-weight: 600;
}

/* 猜大小下注面板 */
.lw-shell .machine .gamble-panel{
  margin-top: 6px;
  background: rgba(251,191,36,.16);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: #7c2d12;
}

.lw-shell .machine .gamble-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}

.lw-shell .machine .gamble-row input{
  width: 80px;
  padding: 3px 4px;
  border-radius: 6px;
  border: 1px solid #b45309;
  font-size: 12px;
}

.lw-shell .machine .gamble-btn{
  flex: 1;
  padding: 6px 0;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #fefce8;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.lw-shell .machine .gamble-small{
  background: linear-gradient(145deg,#16a34a,#15803d);
}

.lw-shell .machine .gamble-big{
  background: linear-gradient(145deg,#2563eb,#1d4ed8);
}

/* payout 数字行 */
.lw-shell .machine .payout-row{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 2px 0;
}

.lw-shell .machine .payout-cell{
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-family: "DS-Digital","Courier New",monospace;
  padding: 2px 0;
  background: #020617;
  color: #38bdf8;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* 最底部押注图标行 */
.lw-shell .machine .bet-row{
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 2px 0;
  border-top: 1px solid rgba(148,27,11,.35);
}

.lw-shell .machine .bet-cell{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
}

.lw-shell .machine .bet-icon{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(145deg,#fff4d6,#f0c456);
  box-shadow:
    0 0 0 1px rgba(177,113,23,.8) inset,
    0 1px 2px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  font-size: 18px;
  cursor: pointer;
}

/* 押注 BAR 图标也用高端色 */
.lw-shell .machine .bet-icon.bar-icon{
  color:#3b0764;
  text-shadow:
    0 0 2px #fff,
    0 0 6px rgba(192,132,252,0.9);
}

.lw-shell .machine .bet-amount{
  font-size: 11px;
  color: #f97316;
  margin-bottom: 2px;
}

.lw-shell .machine .bet-controls{
  display: flex;
  gap: 2px;
  width: 100%;
  justify-content: center;
}

.lw-shell .machine .bet-btn{
  flex: 1;
  font-size: 10px;
  border-radius: 6px;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  background: #0f172a;
  color: #f9fafb;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* 在CSS文件最底部添加 */

/* ⭐⭐⭐ 超级强力版本 - Header靠左 ⭐⭐⭐ */
.lw-shell .lw-header {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding-left: 20 !important;
}

.lw-shell .lw-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: -8px !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

.lw-shell .lw-header-right {
  margin-left: auto !important;
}
.lw-hero-banner{
  margin: 12px 0 24px;
  padding: 18px 26px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, rgba(250,204,21,0.14), rgba(15,23,42,0.95));
  border: 1px solid rgba(250,204,21,0.25);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}

.lw-hero-main{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fde68a;
  margin-bottom: 4px;
}

.lw-hero-sub{
  font-size: 13px;
  color: #e5e7eb;
  opacity: .85;
  line-height: 1.5;
}
/* ===========================
   Regal Fruit Machine Banner
   =========================== */
.lw-banner {
  width: 100%;
  min-height: 120px;
  margin: 20px 0 30px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 0, rgba(250,204,21,0.12), rgba(15,23,42,0.85));
  border: 1px solid rgba(250,204,21,0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 26px 20px;
}

.lw-banner-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #facc15; /* 高级金色 */
  text-shadow: 0 0 8px rgba(250,204,21,0.55);
  margin-bottom: 10px;
}

.lw-banner-sub {
  font-size: 15px;
  color: #e5e7eb;
  opacity: 0.85;
  max-width: 900px;
  line-height: 1.5;
}
/* 顶部 Regal Fruit Machine 横幅 */
.lw-banner {
  margin: 0 0 20px;
  padding: 16px 24px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: radial-gradient(
    circle at 0 0,
    rgba(250, 204, 21, 0.18),
    rgba(15, 23, 42, 0.98)
  );
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

.lw-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: #fefce8;
  margin-bottom: 6px;
}

.lw-banner-sub {
  font-size: 14px;
  color: #e5e7eb;
  opacity: 0.85;
}
/* 底部提示文字：居中对齐 */
.lw-shell #lw-wheel-caption {
  text-align: center;
  width: 100%;
  margin-top: 4px;
  display: block;
}
/* 底部白色说明文字：往下挪一点 */
.lw-wheel-caption {
  margin-top: 32px;        /* 和上面的机器拉开距离，数值可以 24 / 32 / 40 自己调 */
  text-align: center;      /* 顺便确保居中 */
}
/* 拉长整个水果机区域，让 gamble 区域与下边框分开 */
.lw-wheel-inner .machine {
  padding-bottom: 40px;       /* 控制底部预留空间，原来几乎 0，现在拉长 */
}

.machine .inner {
  padding-bottom: 40px;        /* 内层也加 padding，避免按钮贴边 */
}