:root{
  --bg-1: #0b0f17;
  --bg-2: #0f1724;
  --glass: rgba(255,255,255,0.04);
  --accent: #b8860b;
  --muted: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, #071022 0%, transparent 20%), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px}
.game-wrap{display:flex;gap:32px;align-items:center;max-width:1100px;width:100%;justify-content:center}
.wheel-area{position:relative;display:flex;align-items:center;justify-content:center}
.pointer{position:absolute;top:-36px;font-size:40px;color:var(--accent);text-shadow:0 6px 18px rgba(0,0,0,0.6);filter:drop-shadow(0 6px 12px rgba(0,0,0,0.6))}
.cards-area{display:flex;align-items:center;justify-content:center;width:100%}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:720px;width:100%;margin:0 auto}
.cards-header{max-width:920px;margin:0 auto 18px;text-align:center}
.cards-header h1{margin:0;font-size:22px;color:#fff;letter-spacing:0.4px}
.cards-header .lead{margin:6px 0 0;color:rgba(255,255,255,0.72)}
.cards-panel{max-width:920px;margin:0 auto 18px;padding:20px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:0 12px 40px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04);position:relative;overflow:hidden}
.cards-panel:before{content:'';position:absolute;inset:-40% -10% auto -10%;height:220px;background:radial-gradient(circle at 10% 20%, rgba(184,134,11,0.06), transparent 10%), linear-gradient(90deg, rgba(255,255,255,0.02), transparent 30%);transform:rotate(-12deg);pointer-events:none}
.cards-panel:after{content:'';position:absolute;right:-60px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,215,120,0.04), transparent 40%);pointer-events:none}
/* Header badge */
.cards-header .header-top{display:flex;align-items:center;gap:12px;justify-content:center}
.cards-header .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ffd966,#b8860b);color:#071017;font-weight:800;font-size:13px;box-shadow:0 6px 18px rgba(184,134,11,0.08)}

/* Card decorative panels + premium finishes */
.gift-card{position:relative;overflow:visible}
.gift-card::before{content:'';position:absolute;inset:6px;border-radius:12px;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));pointer-events:none;transition:transform .36s ease,opacity .36s ease}
.gift-card::after{content:'';position:absolute;right:-30px;top:-30px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04), transparent 40%);opacity:0.18;pointer-events:none}
.gift-card .card-inner{position:relative;z-index:2}
.gift-card .card-front{font-size:36px;filter:drop-shadow(0 6px 20px rgba(0,0,0,0.5))}
.gift-card .card-back{font-size:15px}
.gift-card:hover::before{transform:scale(1.02);opacity:1}
.gift-card.disabled{opacity:0.7;pointer-events:none}

/* subtle ribbon accent on top-left */
.gift-card .ribbon{position:absolute;left:8px;top:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.06);font-weight:700;font-size:12px;z-index:3}

/* per-card panel customization to make backs distinct */
.gift-card[data-index="0"] .card-back{background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.45));}
.gift-card[data-index="1"] .card-back{background:linear-gradient(180deg,rgba(0,0,0,0.52),rgba(0,0,0,0.46));}
.gift-card[data-index="2"] .card-back{background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.42));}
.gift-card[data-index="3"] .card-back{background:linear-gradient(180deg,rgba(0,0,0,0.54),rgba(0,0,0,0.48));}

/* premium micro-animations */
@keyframes floatUp{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.gift-card{animation:none}
.gift-card:hover{animation:floatUp 560ms ease-in-out}

/* Ad modal styles */
.ad-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,6,12,0.6);z-index:120;opacity:0;pointer-events:none;transition:opacity .18s ease}
.ad-modal.visible{opacity:1;pointer-events:auto}
.ad-panel{background:linear-gradient(180deg,#02060a,#08121a);padding:12px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.7);max-width:920px;width:92%;max-height:88vh;display:flex;flex-direction:column;align-items:stretch}
.ad-panel iframe{width:100%;height:62vh;border:0;border-radius:8px;background:#000}
.ad-controls{display:flex;justify-content:center;padding-top:10px}
.gift-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:0;border:1px solid rgba(255,255,255,0.04);height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}
.gift-card:focus{outline:2px solid rgba(184,134,11,0.18)}
.gift-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
.card-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.card-front{font-size:34px}
.card-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:0.4px;padding:10px;text-align:center;background:rgba(0,0,0,0.6);color:#fff;opacity:0;transform:translateY(12px);transition:opacity .18s ease,transform .18s ease}
.gift-card.revealed{background:linear-gradient(180deg, rgba(255,215,0,0.06), rgba(255,255,255,0.02));border:1px solid rgba(255,215,0,0.14)}
.gift-card.revealed .card-front{opacity:0.08}
.gift-card.revealed .card-back{opacity:1;transform:translateY(0)}

/* distinct card colors */
.gift-card[data-index="0"]{background:linear-gradient(135deg,#1e3a8a,#334155);border:1px solid rgba(30,58,138,0.18)}
.gift-card[data-index="1"]{background:linear-gradient(135deg,#0f766e,#115e59);border:1px solid rgba(15,118,110,0.18)}
.gift-card[data-index="2"]{background:linear-gradient(135deg,#7c2d12,#8b5a36);border:1px solid rgba(124,45,18,0.18)}
.gift-card[data-index="3"]{background:linear-gradient(135deg,#6d28d9,#5b21b6);border:1px solid rgba(109,40,217,0.18)}

.gift-card .card-back{background:rgba(0,0,0,0.42)}

/* overlay result */
.result-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:60;opacity:0;pointer-events:none;transition:opacity .18s ease}
.result-overlay.visible{opacity:1;pointer-events:auto}
.result-box{background:linear-gradient(180deg,#071020,#0b1522);padding:26px;border-radius:12px;min-width:320px;text-align:center;border:1px solid rgba(255,255,255,0.04);color:#fff}
.result-emoji{font-size:40px;margin-bottom:8px;color:#ffd966}
.result-actions{margin-top:14px}
.try-btn{padding:10px 16px;border-radius:10px;border:none;background:linear-gradient(180deg,#b8860b,#8c6a07);color:#071017;font-weight:800}
.wheel:before{content:'';position:absolute;inset:8px;border-radius:50%;box-shadow:inset 0 18px 40px rgba(0,0,0,0.5), 0 0 40px rgba(184,134,11,0.03);pointer-events:none}
.wheel.spinning{box-shadow:0 0 80px rgba(184,134,11,0.28), 0 18px 80px rgba(2,6,23,0.9);}
.segment-label{position:absolute;left:50%;top:50%;transform-origin:center center;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,0.6)}
.segment-label .emoji{font-size:28px;margin-bottom:6px}
.segment-label .text{font-size:15px;white-space:nowrap;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.22);backdrop-filter:blur(4px)}
.label-1{transform:rotate(315deg) translate(-50%,-110px) rotate(-315deg)}
.label-2{transform:rotate(45deg) translate(-50%,-110px) rotate(-45deg)}
.label-3{transform:rotate(135deg) translate(-50%,-110px) rotate(-135deg)}
.label-4{transform:rotate(225deg) translate(-50%,-110px) rotate(-225deg)}
.center-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%, rgba(255,215,120,0.12), transparent 20%), linear-gradient(180deg,#0b0f12,#0f1216);color:var(--accent);box-shadow:0 10px 40px rgba(184,134,11,0.08), inset 0 8px 28px rgba(255,215,0,0.02);border:2px solid rgba(255,215,0,0.06)}
.result-card{backdrop-filter:blur(8px);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);padding:22px;border-radius:14px;max-width:320px;min-height:220px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .36s ease,transform .36s ease}
.result-card.visible{opacity:1;transform:translateY(0)}
.result-inner{text-align:center}
.result-emoji{font-size:42px;margin-bottom:8px}
.controls{margin-top:16px}
.btn{padding:10px 18px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(2,6,23,0.6);transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,0.7)}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none}

.btn.large{padding:14px 22px;border-radius:14px;font-size:16px;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));box-shadow:0 14px 36px rgba(2,6,23,0.65);border:1px solid rgba(255,215,0,0.06)}
.below-controls{margin-top:22px;display:flex;justify-content:center}

/* spinning glow animation */
@keyframes wheelPulse{0%{box-shadow:0 12px 40px rgba(184,134,11,0.08)}50%{box-shadow:0 20px 80px rgba(184,134,11,0.22)}100%{box-shadow:0 12px 40px rgba(184,134,11,0.08)}}
.wheel.spinning{animation:wheelPulse 1.4s ease-in-out infinite}

/* Responsive sizes */
@media (max-width:920px){
  .cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .game-wrap{flex-direction:column;align-items:center;padding:20px 12px}
  .result-card{order:2;margin-top:12px}
  .cards-area{order:1}
}
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .gift-card{height:120px}
  .result-box{min-width:260px}
}
@media (max-width:420px){
  .cards{grid-template-columns:repeat(1,1fr);gap:12px}
  .gift-card{height:120px}
  .cards-header h1{font-size:18px}
  .cards-header .lead{font-size:13px}
  .result-box{min-width:90%;padding:18px}
}

/* small touches */
.result-card h2{margin:0 0 8px 0;font-size:20px}
.result-card p{margin:0;color:var(--muted)}

/* Banner Ad Container */
.ad-banner-container{display:flex;justify-content:center;align-items:center;margin-top:24px;padding:12px;background:rgba(255,255,255,0.02);border-radius:12px;border:1px solid rgba(255,255,255,0.04);min-height:320px}
.ad-banner-container iframe{max-width:100%;height:auto}