:root {
    --bg: #050510;
    --surface: rgba(15,15,25,0.8);
    --gold: #d4a843;
    --gold-light: #f0d078;
    --neon-pink: #ff00ff;
    --neon-cyan: #00ffff;
    --neon-purple: #9d00ff;
    --text: #e0dcd0;
    --text-muted: #8a8578;
    --card-shadow: 0 8px 32px rgba(0,0,0,0.6);
    --glass-bg: rgba(10,10,20,0.7);
    --glass-border: rgba(255,255,255,0.1);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', 'Courier New', monospace;
    background: var(--bg);
    background-image: radial-gradient(circle at 50% 10%, #1a0b2e 0%, #000000 100%);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Particles */
.bg-particles { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.3; }
.particle { position:absolute; border-radius:50%; background:var(--neon-cyan); animation:floatUp linear infinite; opacity:0; }
@keyframes floatUp { 0%{ transform:translateY(100vh) scale(0); opacity:0; } 10%{ opacity:0.7; } 90%{ opacity:0.1; } 100%{ transform:translateY(-10vh) scale(1.5); opacity:0; } }

/* Header */
header {
    position: sticky; top:0; z-index:100;
    background: rgba(5,5,16,0.85); backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--glass-border); padding: 0 1.5rem;
}
.header-inner {
    max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
    min-height:70px; flex-wrap:wrap; gap:12px; padding:8px 0;
}
.logo {
    display:flex; align-items:center; gap:10px; font-size:1.5rem; font-weight:900;
    background: linear-gradient(135deg, var(--gold-light), var(--neon-pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    cursor:pointer; white-space:nowrap;
}
.logo-icon { font-size:1.8rem; -webkit-text-fill-color: initial; filter: drop-shadow(0 0 10px var(--neon-cyan)); }
.nav-links { display:flex; gap:4px; flex-wrap:wrap; }
.nav-btn {
    background:transparent; border:1px solid transparent; color:var(--text-muted);
    padding:10px 18px; border-radius:30px; cursor:pointer; font-weight:700;
    font-size:0.85rem; transition:all 0.3s; letter-spacing:0.5px; font-family:inherit;
}
.nav-btn:hover { color:#fff; border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); }
.nav-btn.active { background:var(--gold); color:#0a0a0f; border-color:var(--gold); box-shadow:0 0 20px rgba(212,168,67,0.5); }
.credits-area { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.credits-display, .threshold-display {
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:50px;
    padding:8px 18px; font-weight:700; font-size:0.85rem; backdrop-filter:blur(15px); white-space:nowrap;
}
.credits-display { color:var(--gold-light); box-shadow:0 0 15px rgba(212,168,67,0.3); }
.threshold-display { color:#ccc; }
.threshold-display span { color:var(--gold-light); }
.coin { font-size:1.2rem; animation:coinPulse 2s ease-in-out infinite; }
@keyframes coinPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
.action-btns { display:flex; gap:6px; }
.btn-header {
    padding:9px 18px; border-radius:50px; font-weight:700; letter-spacing:0.5px;
    cursor:pointer; border:none; transition:all 0.3s; font-size:0.8rem;
    text-transform:uppercase; font-family:inherit; white-space:nowrap;
}
.deposit-btn { background:#27ae60; color:#fff; box-shadow:0 4px 12px rgba(39,174,96,0.3); }
.deposit-btn:hover { box-shadow:0 6px 20px rgba(39,174,96,0.5); transform:translateY(-2px); }
.cashout-btn { background:var(--gold); color:#0a0a0f; box-shadow:0 4px 12px rgba(212,168,67,0.3); }
.cashout-btn:hover { box-shadow:0 6px 20px rgba(212,168,67,0.5); transform:translateY(-2px); }
.daily-btn {
    background:var(--neon-purple); color:#fff; box-shadow:0 4px 12px rgba(157,0,255,0.3);
    animation:dailyPulse 2s ease-in-out infinite;
}
.daily-btn:disabled { animation:none; opacity:0.5; cursor:not-allowed; box-shadow:none !important; }
@keyframes dailyPulse { 0%,100%{ box-shadow:0 4px 12px rgba(157,0,255,0.3); } 50%{ box-shadow:0 4px 24px rgba(157,0,255,0.7); } }

/* Main layout */
main { position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:2rem 1.5rem; min-height:calc(100vh - 70px); }
.game-section { display:none; animation:fadeSlideIn 0.4s ease; }
.game-section.active { display:block; }
@keyframes fadeSlideIn { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* Home */
.hero { text-align:center; padding:2rem 1rem; }
.hero h1 { font-size:3rem; font-weight:900; background:linear-gradient(180deg, #fef5d4 0%, #d4a843 40%, #ff00ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 12px rgba(212,168,67,0.5)); margin-bottom:0.3rem; }
.subtitle { font-size:1rem; color:var(--text-muted); letter-spacing:3px; text-transform:uppercase; }
.promo-box { max-width:600px; margin:1.8rem auto; background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid rgba(212,168,67,0.4); border-radius:20px; padding:1.8rem; color:#ddd; line-height:1.6; box-shadow:0 0 25px rgba(212,168,67,0.15); }
.promo-box strong { color:var(--gold-light); }
.game-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.game-card { background:var(--glass-bg); backdrop-filter:blur(15px); border:1px solid var(--glass-border); border-radius:20px; padding:2rem 1.5rem; text-align:center; cursor:pointer; transition:all 0.4s; box-shadow:0 8px 30px rgba(0,0,0,0.5); position:relative; overflow:hidden; }
.game-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold), var(--neon-pink), transparent); opacity:0; transition:opacity 0.4s; }
.game-card:hover { transform:translateY(-8px); border-color:rgba(212,168,67,0.5); box-shadow:0 16px 45px rgba(0,0,0,0.7), 0 0 30px rgba(212,168,67,0.2); }
.game-card:hover::before { opacity:1; }
.game-card .icon { font-size:3.5rem; display:block; margin-bottom:0.5rem; filter:drop-shadow(0 0 10px rgba(212,168,67,0.4)); }
.game-card h3 { font-size:1.3rem; margin-bottom:0.3rem; color:#fff; }
.game-card p { color:var(--text-muted); font-size:0.9rem; }
.card-cta { display:inline-block; margin-top:1.2rem; padding:10px 28px; background:var(--gold); color:#0a0a0f; border-radius:50px; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:0.85rem; transition:all 0.3s; }
.game-card:hover .card-cta { box-shadow:0 0 25px rgba(212,168,67,0.6); }

/* History panel */
.history-panel { background:var(--glass-bg); backdrop-filter:blur(15px); border:1px solid var(--glass-border); border-radius:16px; padding:1rem; max-width:800px; margin:1.5rem auto; max-height:200px; overflow-y:auto; color:#aaa; font-size:0.8rem; }
.history-panel h4 { color:var(--gold-light); margin-bottom:0.5rem; text-align:center; }
.history-item { display:flex; justify-content:space-between; padding:4px 8px; border-bottom:1px solid rgba(255,255,255,0.05); }
.history-item.win { color:#27ae60; }
.history-item.loss { color:#e74c3c; }

/* Slots */
.slot-machine { background:var(--glass-bg); backdrop-filter:blur(20px); border:2px solid var(--neon-purple); border-radius:20px; padding:1.5rem; max-width:700px; margin:1.5rem auto; box-shadow:0 0 30px rgba(157,0,255,0.25); position:relative; }
.slot-machine h2 { text-align:center; color:#fff; text-shadow:0 0 10px var(--neon-cyan); margin-bottom:1rem; }
.free-spins-badge { position:absolute; top:-12px; right:-12px; background:var(--neon-pink); color:#000; padding:8px 14px; border-radius:50%; font-weight:900; font-size:12px; box-shadow:0 0 20px var(--neon-pink); display:none; z-index:5; transform:rotate(10deg); }
.reels-board { display:flex; gap:8px; background:#000; padding:12px; border-radius:12px; border:2px solid #333; box-shadow:inset 0 0 30px rgba(0,0,0,0.9); justify-content:center; }
.reel-col { display:flex; flex-direction:column; gap:8px; flex:1; max-width:100px; }
.sym-cell { width:100%; aspect-ratio:1; min-height:55px; background:linear-gradient(135deg, #111 0%, #1a1a1a 100%); border:2px solid #333; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:inset 0 0 12px rgba(0,0,0,0.8); transition:all 0.3s; }
.spinning .sym-cell { filter:blur(3px); opacity:0.75; }
.sym-cell.win { border-color:var(--neon-cyan); background:linear-gradient(135deg, #002222, #001111); box-shadow:0 0 18px var(--neon-cyan); animation:winPop 0.5s infinite alternate; }
.sym-cell.wild-win { border-color:var(--neon-pink); box-shadow:0 0 20px var(--neon-pink); }
@keyframes winPop { from{ transform:scale(1); } to{ transform:scale(1.1); } }
.slot-controls { display:flex; gap:10px; margin-top:1rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.slot-bet-input { background:#1a1a25; border:2px solid rgba(255,255,255,0.2); color:#fff; padding:10px 16px; border-radius:50px; width:90px; text-align:center; font-weight:700; font-family:inherit; }
.slot-bet-input:focus { outline:none; border-color:var(--neon-cyan); box-shadow:0 0 14px rgba(0,255,255,0.3); }
.btn-spin, .btn-auto, .btn-paytable { padding:12px 24px; border-radius:8px; font-weight:900; font-family:inherit; text-transform:uppercase; letter-spacing:2px; cursor:pointer; transition:all 0.3s; }
.btn-spin { background:transparent; color:var(--neon-pink); border:2px solid var(--neon-pink); box-shadow:0 0 12px rgba(255,0,255,0.2); }
.btn-spin:hover:not(:disabled) { background:var(--neon-pink); color:#000; box-shadow:0 0 25px var(--neon-pink); }
.btn-auto { background:transparent; color:var(--neon-cyan); border:2px solid var(--neon-cyan); }
.btn-auto.active { background:var(--neon-cyan); color:#000; box-shadow:0 0 22px var(--neon-cyan); }
.btn-paytable { background:transparent; color:#aaa; border:1px solid #555; font-size:0.8rem; }
.slot-result-msg { text-align:center; margin-top:0.8rem; font-weight:700; font-size:1rem; min-height:1.4rem; }
.shake { animation:shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{ transform:translate3d(-3px,0,0); } 20%,80%{ transform:translate3d(5px,0,0); } 30%,50%,70%{ transform:translate3d(-7px,0,0); } 40%,60%{ transform:translate3d(7px,0,0); } }

/* Blackjack */
.bj-table { background:#1a5c2a; border-radius:100px; max-width:700px; margin:1.5rem auto; padding:2rem 1.5rem; border:6px solid #3d2b1f; box-shadow:0 0 0 4px #1a0f00, 0 18px 50px rgba(0,0,0,0.7); text-align:center; }
.bj-table h2 { color:#fef5d4; letter-spacing:2px; margin-bottom:0.5rem; }
.bj-area { margin:0.8rem 0; }
.bj-label { font-weight:700; color:#fef5d4; font-size:0.9rem; }
.cards-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:80px; align-items:center; }
.card-el { width:50px; height:74px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; color:#1a1a1a; box-shadow:0 3px 10px rgba(0,0,0,0.4); animation:dealCard 0.35s ease; border:2px solid #ddd; }
.card-el.red { color:#c0392b; }
.card-el.face-down { background:linear-gradient(135deg, #1a3a6c, #0d2240); color:transparent; border:2px solid #4a7ab5; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px); }
@keyframes dealCard { from{ transform:translateY(-50px) rotate(-12deg); opacity:0; } to{ transform:translateY(0) rotate(0); opacity:1; } }
.bj-controls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:1.2rem; }
.bj-btn { padding:12px 24px; border-radius:50px; font-weight:700; text-transform:uppercase; cursor:pointer; border:none; transition:all 0.3s; font-family:inherit; }
.bj-btn.hit { background:#e74c3c; color:#fff; }
.bj-btn.stand { background:#f39c12; color:#fff; }
.bj-btn.deal { background:var(--gold); color:#0a0a0f; }
.bj-btn:disabled { opacity:0.4; cursor:not-allowed; }
.bj-score { font-weight:700; color:#fef5d4; }
.bj-result { font-size:1.3rem; font-weight:800; letter-spacing:2px; min-height:2rem; margin-top:0.4rem; }

/* Roulette */
.roulette-area { background:var(--glass-bg); backdrop-filter:blur(20px); border-radius:20px; padding:1.5rem; max-width:600px; margin:1.5rem auto; border:1px solid var(--glass-border); text-align:center; box-shadow:0 8px 30px rgba(0,0,0,0.5); }
.roulette-area h2 { color:var(--gold-light); letter-spacing:2px; margin-bottom:0.8rem; }
.wheel-container { position:relative; width:220px; height:220px; margin:0 auto 1rem; }
.wheel-svg { width:100%; height:100%; transition:transform 4s cubic-bezier(0.17,0.67,0.12,0.99); }
.wheel-pointer { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:24px solid #f0d078; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6)); z-index:2; }
.roulette-bets { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:0.8rem 0; }
.rbet-btn { padding:10px 18px; border-radius:50px; font-weight:700; cursor:pointer; border:2px solid transparent; transition:all 0.3s; font-size:0.85rem; background:#1a1a25; color:#fff; font-family:inherit; }
.rbet-btn.red-bet { border-color:#c0392b; color:#e74c3c; }
.rbet-btn.black-bet { border-color:#333; color:#ccc; }
.rbet-btn.green-bet { border-color:#27ae60; color:#2ecc71; }
.rbet-btn.selected { background:var(--gold); color:#0a0a0f; border-color:var(--gold); box-shadow:0 0 18px rgba(212,168,67,0.5); }
.spin-wheel-btn { background:linear-gradient(135deg, #d4a843, #f0d078, #b8861e); color:#0a0a0f; border:none; padding:14px 36px; border-radius:50px; font-size:1rem; font-weight:800; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:all 0.3s; box-shadow:0 5px 18px rgba(212,168,67,0.35); font-family:inherit; }
.spin-wheel-btn:disabled { opacity:0.5; cursor:not-allowed; }
.roulette-result { font-size:1.2rem; font-weight:700; min-height:1.8rem; margin-top:0.5rem; }

/* Modals */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:300; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.modal { background:var(--surface); backdrop-filter:blur(30px); border:1px solid var(--gold); border-radius:24px; padding:2rem; max-width:400px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.8); animation:modalPop 0.3s ease; }
@keyframes modalPop { from{ transform:scale(0.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal h3 { font-size:1.6rem; margin-bottom:0.8rem; color:var(--gold-light); }
.modal input { width:100%; padding:14px; border-radius:50px; border:2px solid rgba(255,255,255,0.2); background:#1a1a25; color:#fff; font-size:1rem; text-align:center; margin:0.6rem 0; font-weight:700; font-family:inherit; }
.modal input:focus { outline:none; border-color:var(--gold); }
.btn-group { display:flex; gap:8px; margin-top:1rem; justify-content:center; }
.btn { padding:12px 28px; border-radius:50px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:none; transition:all 0.3s; font-family:inherit; }
.btn-confirm { background:#27ae60; color:#fff; }
.btn-cancel { background:#555; color:#fff; }
.paytable-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index:200; }
.paytable-overlay.show { display:flex; }
.paytable-modal { background:var(--surface); backdrop-filter:blur(25px); border:2px solid var(--neon-purple); border-radius:16px; padding:1.5rem; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:0 0 40px rgba(157,0,255,0.5); color:#ccc; }
.paytable-modal h3 { color:var(--neon-cyan); text-align:center; margin-bottom:1rem; }
.paytable-modal table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.paytable-modal td, .paytable-modal th { padding:8px; border:1px solid #333; text-align:center; }
.paytable-modal th { background:#111; color:var(--gold-light); }
.paytable-close { display:block; margin:1rem auto 0; padding:10px 30px; background:var(--neon-purple); color:#fff; border:none; border-radius:50px; cursor:pointer; font-weight:700; }

/* Bitcoin Address Box */
.btc-address-box { background:rgba(20,20,30,0.7); border:1px solid var(--gold); border-radius:12px; padding:12px 16px; margin-bottom:16px; text-align:center; }
.btc-label { display:block; color:var(--gold-light); font-size:0.8rem; letter-spacing:1px; margin-bottom:6px; }
.btc-address-row { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.btc-address { background:#000; padding:8px 12px; border-radius:8px; color:var(--neon-cyan); font-family:'Courier New', monospace; font-size:0.75rem; word-break:break-all; flex:1; min-width:200px; border:1px solid var(--neon-purple); }
.btn-copy { background:var(--neon-purple); border:none; color:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:1rem; transition:all 0.3s; line-height:1; }
.btn-copy:hover { background:var(--neon-cyan); color:#000; box-shadow:0 0 15px var(--neon-cyan); }
.copied-msg { display:none; color:#27ae60; font-size:0.7rem; margin-top:4px; font-weight:700; }

/* Toast */
.toast { position:fixed; top:80px; right:20px; background:var(--surface); border:1px solid var(--gold); color:var(--gold-light); padding:14px 24px; border-radius:12px; font-weight:700; z-index:250; animation:toastIn 0.4s ease, toastOut 0.4s ease 3s forwards; box-shadow:0 10px 30px rgba(0,0,0,0.7); letter-spacing:1px; font-size:0.9rem; }
@keyframes toastIn { from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes toastOut { from{ transform:translateX(0); opacity:1; } to{ transform:translateX(120%); opacity:0; } }

footer { text-align:center; padding:1.5rem; color:var(--text-muted); font-size:0.7rem; border-top:1px solid var(--glass-border); letter-spacing:1px; }
footer span { color:var(--gold); }

@media (max-width:768px) {
    .hero h1 { font-size:2rem; }
    .header-inner { justify-content:center; }
    .reels-board { gap:4px; }
    .sym-cell { font-size:1.5rem; min-height:45px; }
    .card-el { width:40px; height:60px; font-size:0.9rem; }
    .wheel-container { width:180px; height:180px; }
    .nav-btn { padding:8px 12px; font-size:0.75rem; }
}