* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%;
  overflow:hidden;
  font-family:'Noto Sans SC','Orbitron',-apple-system,sans-serif;
  background: radial-gradient(ellipse at top, #1a0f3a 0%, #0d0d1f 50%, #000 100%);
  color:#fff;
  user-select:none;
}

#stars { position:fixed; inset:0; z-index:1; }

.scene {
  position:fixed; inset:0;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px;
  z-index:5;
  opacity:0;
  transition:opacity .6s ease;
}
.scene.active { display:flex; opacity:1; }

/* ═══════ INTRO SCENE ═══════ */
.brand { display:flex; align-items:center; gap:14px; margin-bottom:40px; animation:fadeDown .8s ease .2s both; }
.logo-ring {
  width:66px; height:66px; border-radius:50%;
  background: conic-gradient(from 0deg, #ffd700, #ff8c00, #ff1493, #9370db, #ffd700);
  position:relative;
  animation: spin 3s linear infinite;
  box-shadow: 0 0 30px rgba(255,215,0,.6);
}
.logo-ring::before {
  content:'巨富'; position:absolute; inset:4px;
  background:#0d0d1f; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Sans SC',serif; font-weight:900; font-size:18px;
  color:#ffd700;
  animation: spin 3s linear infinite reverse;
}
.logo-text .logo-cn { font-size:22px; font-weight:900; color:#ffd700; letter-spacing:2px; }
.logo-text .logo-vn { font-size:11px; color:#c9b0ff; letter-spacing:1px; margin-top:2px; }

.slot {
  display:flex; gap:8px; padding:16px;
  background: linear-gradient(180deg, #2a1055, #0d0d1f);
  border-radius:18px;
  border:3px solid #ffd700;
  box-shadow: 0 0 40px rgba(255,215,0,.5), inset 0 0 20px rgba(255,215,0,.2);
  animation: slotBounce .8s ease .4s both;
}
.reel {
  width:70px; height:90px; overflow:hidden;
  background:#000; border-radius:10px;
  border:2px solid #ffaa00;
  position:relative;
}
.reel-inner {
  font-size:54px; line-height:90px; text-align:center;
  transform:translateY(0);
  will-change:transform;
}
.reel.spinning .reel-inner {
  animation: spinReel .08s linear infinite;
}
@keyframes spinReel {
  from { transform:translateY(0); }
  to   { transform:translateY(-90px); }
}

.slot-status {
  margin-top:26px; font-size:14px; letter-spacing:2px;
  color:#ffd700; animation:fadeUp .6s ease .8s both;
}
.blink { animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ═══════ WIN SCENE ═══════ */
.fireworks { position:fixed; inset:0; pointer-events:none; z-index:2; }
.fw {
  position:absolute; width:8px; height:8px; border-radius:50%;
  box-shadow: 0 0 0 0 transparent;
}
.fw1 { top:20%; left:20%; background:#ffd700; animation:burst 2s ease-out .2s infinite; }
.fw2 { top:30%; right:20%; background:#ff1493; animation:burst 2s ease-out .8s infinite; }
.fw3 { bottom:30%; left:15%; background:#00ffff; animation:burst 2s ease-out 1.4s infinite; }
.fw4 { bottom:20%; right:18%; background:#7cfc00; animation:burst 2s ease-out 2s infinite; }
@keyframes burst {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity:1; transform:scale(1); }
  100% { box-shadow: 0 0 0 120px transparent; opacity:0; transform:scale(3); }
}

.trophy {
  font-size:90px;
  animation: trophyPop .8s cubic-bezier(.18,1.25,.4,1) both, float 2.5s ease-in-out 1s infinite;
  filter: drop-shadow(0 0 30px rgba(255,215,0,.8));
}
@keyframes trophyPop {
  0%   { transform:scale(0) rotate(-180deg); opacity:0; }
  60%  { transform:scale(1.3) rotate(10deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes float { 50% { transform:translateY(-10px); } }

.win-title {
  text-align:center; margin:12px 0 24px;
  animation:fadeUp .6s ease .3s both;
}
.title-cn {
  font-size:26px; font-weight:900; color:#ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,.6);
  letter-spacing:3px;
}
.title-vn {
  font-size:13px; color:#fff; letter-spacing:4px;
  margin-top:4px; opacity:.85;
}

.prize-card {
  position:relative;
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,20,147,.1));
  border:2px solid rgba(255,215,0,.6);
  border-radius:24px;
  padding:28px 40px 22px;
  text-align:center;
  margin-bottom:20px;
  animation: prizePop .8s cubic-bezier(.18,1.25,.4,1) .5s both;
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.prize-glow {
  position:absolute; inset:-50%;
  background: conic-gradient(from 0deg, transparent, #ffd700, transparent, #ff1493, transparent);
  animation: rotate 4s linear infinite;
  opacity:.3;
  z-index:-1;
}
@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes prizePop {
  0% { transform:scale(0) rotate(-10deg); opacity:0; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

.prize-amount {
  display:flex; align-items:flex-start; justify-content:center;
  font-family:'Orbitron',sans-serif; font-weight:900;
  line-height:1;
}
.currency { font-size:38px; color:#ffd700; margin-right:4px; margin-top:6px; }
.amount {
  font-size:78px;
  background:linear-gradient(180deg,#fff8c2 0%,#ffd700 45%,#ff8c00 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 4px 20px rgba(255,215,0,.5);
}
.prize-label { font-size:12px; color:#ffd700; letter-spacing:3px; margin-top:6px; font-weight:700; }
.prize-sub { font-size:11px; color:#c9b0ff; margin-top:4px; }

.countdown {
  margin-bottom:20px;
  padding:8px 18px;
  background:rgba(255,20,20,.15);
  border:1px solid rgba(255,80,80,.5);
  border-radius:20px;
  font-size:13px;
  color:#ff6666;
  animation:pulseRed 1.5s ease-in-out infinite, fadeUp .6s ease .9s both;
}
@keyframes pulseRed {
  50% { box-shadow: 0 0 20px rgba(255,20,20,.5); }
}

.cta-btn {
  position:relative; overflow:hidden;
  display:block;
  padding:18px 50px;
  background: linear-gradient(135deg, #ff1493 0%, #ff8c00 50%, #ffd700 100%);
  border-radius:60px;
  text-decoration:none;
  color:#000;
  font-weight:900;
  text-align:center;
  box-shadow: 0 8px 30px rgba(255,140,0,.6), 0 0 0 4px rgba(255,215,0,.3);
  animation: ctaPulse 1.5s ease-in-out infinite, fadeUp .6s ease 1.1s both;
  transition: transform .2s;
}
.cta-btn:active { transform:scale(.95); }
.cta-text { display:flex; flex-direction:column; gap:2px; position:relative; z-index:2; }
.cta-zh { font-size:18px; letter-spacing:2px; }
.cta-vi { font-size:13px; letter-spacing:3px; }
.cta-shine {
  position:absolute; top:0; left:-50%;
  width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shine 2.5s ease-in-out infinite;
}
@keyframes shine {
  0%   { left:-50%; }
  100% { left:150%; }
}
@keyframes ctaPulse {
  50% { box-shadow: 0 8px 40px rgba(255,140,0,.9), 0 0 0 8px rgba(255,215,0,.4); }
}

.trust {
  display:flex; gap:16px;
  margin-top:22px;
  font-size:11px;
  color:#c9b0ff;
  animation:fadeUp .6s ease 1.4s both;
}
.trust span { letter-spacing:.5px; }

/* ═══════ COIN RAIN ═══════ */
.coin-rain {
  position:fixed; inset:0; pointer-events:none;
  z-index:3; overflow:hidden;
}
.coin {
  position:absolute;
  font-size:28px;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform:translateY(-10vh) rotate(0); opacity:0; }
  10%  { opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
}

/* ═══════ SHARED ANIMATIONS ═══════ */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slotBounce {
  0%   { transform:scale(0) rotate(-10deg); opacity:0; }
  60%  { transform:scale(1.1); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-height: 700px) {
  .trophy { font-size:64px; }
  .amount { font-size:60px; }
  .currency { font-size:30px; }
  .title-cn { font-size:22px; }
  .prize-card { padding:20px 32px 16px; margin-bottom:16px; }
  .brand { margin-bottom:26px; }
  .slot { padding:12px; }
  .reel { width:60px; height:78px; }
  .reel-inner { font-size:44px; line-height:78px; }
}
@media (max-width: 360px) {
  .cta-btn { padding:16px 34px; }
  .cta-zh { font-size:16px; }
  .trust { gap:10px; font-size:10px; }
}