/* SpinJoy HU — Neon Cyberpunk | Compact-list | Black-neon-orange | Slot-reel-hover */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@700;800;900&family=Inter:wght@300;400;500&display=swap');

:root {
  --color-primary: #FF6B00;
  --color-primary-bright: #FF8C00;
  --color-secondary: #1a0a00;
  --color-bg: #0a0a0f;
  --color-surface: #111118;
  --color-surface2: #18181f;
  --color-border: rgba(255,107,0,0.18);
  --color-text: #f0eeff;
  --color-text-muted: #8a8aa8;
  --font-heading: 'Exo 2', 'Rajdhani', sans-serif;
  --font-body: 'Inter', 'Rajdhani', sans-serif;
  --radius-card: 4px;
  --radius-btn: 3px;
  --shadow-neon: 0 0 14px rgba(255,107,0,0.35), 0 0 28px rgba(255,107,0,0.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden;}
a{color:var(--color-primary);text-decoration:none;transition:color .2s;}
a:hover{color:var(--color-primary-bright);}
img{max-width:100%;height:auto;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;letter-spacing:0.03em;text-transform:uppercase;}

/* COOKIE BANNER */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#0f0f18;border-top:1px solid var(--color-primary);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
#cookie-banner p{font-size:0.84rem;color:var(--color-text-muted);}
#cookie-banner a{color:var(--color-primary);}
.cookie-btns{display:flex;gap:10px;}
.btn-accept{background:var(--color-primary);color:#fff;border:none;padding:8px 18px;border-radius:var(--radius-btn);cursor:pointer;font-family:var(--font-heading);font-weight:700;font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;}
.btn-accept:hover{background:var(--color-primary-bright);}
.btn-decline{background:transparent;color:var(--color-text-muted);border:1px solid rgba(255,255,255,0.15);padding:8px 18px;border-radius:var(--radius-btn);cursor:pointer;font-size:0.82rem;}

/* HEADER */
.site-header{position:sticky;top:0;z-index:900;background:rgba(10,10,15,0.96);border-bottom:1px solid var(--color-border);backdrop-filter:blur(12px);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;height:62px;}
.brand{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;color:var(--color-text);letter-spacing:0.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;}
.brand-icon{width:32px;height:32px;flex-shrink:0;display:block;}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
.footer-brand .brand-icon{margin-bottom:8px;}
.brand span{color:var(--color-primary);text-shadow:var(--shadow-neon);}
.nav-links{display:flex;list-style:none;gap:4px;margin-left:auto;}
.nav-links a{color:var(--color-text-muted);font-size:0.84rem;font-family:var(--font-heading);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-btn);transition:all .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--color-primary);background:rgba(255,107,0,0.08);}
.nav-cta{background:var(--color-primary);color:#fff !important;padding:9px 20px;border-radius:var(--radius-btn);font-family:var(--font-heading);font-weight:700;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-neon);transition:all .2s;}
.nav-cta:hover{background:var(--color-primary-bright);box-shadow:0 0 20px rgba(255,107,0,0.5);}
.hamburger{display:none;background:none;border:none;color:var(--color-primary);font-size:1.4rem;cursor:pointer;margin-left:auto;}
.mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;z-index:800;background:#0d0d15;border-bottom:1px solid var(--color-border);padding:18px 24px;gap:8px;flex-direction:column;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:var(--font-heading);font-weight:600;font-size:0.9rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--color-text-muted);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.page-top{height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:0.5;}

/* HERO — SPLIT LEFT */
.hero-split{min-height:86vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;overflow:hidden;}
.hero-content{padding:80px 60px 80px 80px;}
.hero-badge{display:inline-block;background:rgba(255,107,0,0.12);border:1px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-heading);font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:5px 14px;border-radius:var(--radius-btn);margin-bottom:22px;box-shadow:var(--shadow-neon);}
.hero-title{font-size:clamp(2.4rem,4vw,4rem);color:var(--color-text);line-height:1.1;margin-bottom:18px;}
.hero-title .neon-word{color:var(--color-primary);text-shadow:var(--shadow-neon);}
.hero-sub{font-size:1.05rem;color:var(--color-text-muted);margin-bottom:32px;max-width:440px;font-family:var(--font-body);font-weight:300;text-transform:none;}
.hero-cta-group{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{display:inline-block;background:var(--color-primary);color:#fff;padding:14px 32px;border-radius:var(--radius-btn);font-family:var(--font-heading);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;box-shadow:var(--shadow-neon);transition:all .2s;border:none;cursor:pointer;}
.btn-primary:hover{background:var(--color-primary-bright);box-shadow:0 0 22px rgba(255,107,0,0.55);color:#fff;}
.btn-secondary{display:inline-block;background:transparent;color:var(--color-primary);padding:14px 32px;border-radius:var(--radius-btn);font-family:var(--font-heading);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--color-primary);transition:all .2s;}
.btn-secondary:hover{background:rgba(255,107,0,0.1);}
.hero-stats{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;}
.stat-item{text-align:left;}
.stat-num{font-family:var(--font-heading);font-size:1.6rem;font-weight:800;color:var(--color-primary);line-height:1;}
.stat-label{font-size:0.76rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:3px;}
.hero-image{height:100%;min-height:86vh;position:relative;overflow:hidden;}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hero-image::after{content:'';position:absolute;left:0;top:0;bottom:0;width:80px;background:linear-gradient(90deg,var(--color-bg),transparent);}
.hero-image::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,0,0.12) 0%,transparent 60%);}

/* SECTION BASICS */
.section-inner{max-width:1280px;margin:0 auto;padding:0 24px;}
.section-header{text-align:center;margin-bottom:36px;}
.section-header h2{font-size:1.8rem;color:var(--color-text);}
.divider{width:48px;height:2px;background:var(--color-primary);margin:12px auto 0;box-shadow:var(--shadow-neon);}

/* PROMO COMPACT LIST */
.promo-list{display:flex;flex-direction:column;gap:2px;}
.promo-list-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:18px 24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);transition:all .2s;cursor:default;}
.promo-list-item:hover{border-color:var(--color-primary);background:var(--color-surface2);}
.promo-icon{font-size:1.8rem;width:48px;text-align:center;}
.promo-body h3{font-family:var(--font-heading);font-size:0.95rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:3px;}
.promo-body p{font-size:0.82rem;color:var(--color-text-muted);}
.promo-badge{background:rgba(255,107,0,0.12);color:var(--color-primary);font-family:var(--font-heading);font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-btn);border:1px solid rgba(255,107,0,0.3);white-space:nowrap;}

/* GAME CARDS — SLOT REEL HOVER */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.game-card{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-border);cursor:pointer;transition:border-color .3s,box-shadow .3s;}
.game-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-neon);}
.game-card-img{width:100%;aspect-ratio:4/3;background:var(--color-surface2);overflow:hidden;position:relative;}
.game-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(0.23,1,0.32,1);}
.game-card:hover .game-card-img img{transform:translateY(-8px) scale(1.05);}
/* Slot reel spin effect on hover */
.game-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:0;transition:opacity .3s;z-index:2;}
.game-card:hover::before{opacity:1;}
.reel-strip{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s;z-index:1;}
.game-card:hover .reel-strip{opacity:1;}
.reel-strip::after{content:'7♠♦⭐';font-size:1.6rem;position:absolute;left:50%;transform:translateX(-50%);animation:reelSpin .4s steps(4) infinite;color:rgba(255,107,0,0.3);}
@keyframes reelSpin{from{top:-100%}to{top:100%}}
.game-card-info{padding:12px;background:var(--color-surface);}
.game-card-info h3{font-family:var(--font-heading);font-size:0.82rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:4px;}
.game-card-info .play-btn{display:block;width:100%;background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-heading);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;text-align:center;padding:6px;border-radius:var(--radius-btn);transition:all .2s;margin-top:6px;}
.game-card-info .play-btn:hover{background:var(--color-primary);color:#fff;}

/* CATEGORY CHIPS */
.cat-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:28px;}
.cat-chip{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);font-family:var(--font-heading);font-size:0.76rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;padding:7px 18px;border-radius:var(--radius-btn);cursor:pointer;transition:all .2s;}
.cat-chip:hover,.cat-chip.active{background:rgba(255,107,0,0.1);border-color:var(--color-primary);color:var(--color-primary);}

/* WINNERS FEED */
.winners-feed{display:flex;flex-direction:column;gap:8px;}
.winner-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);}
.winner-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-secondary),var(--color-primary));display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:0.9rem;font-weight:800;color:#fff;flex-shrink:0;border:1px solid rgba(255,107,0,0.3);}
.winner-info{flex:1;min-width:0;}
.winner-info strong{font-size:0.84rem;font-family:var(--font-heading);font-weight:700;color:var(--color-text);display:block;}
.winner-info span{font-size:0.75rem;color:var(--color-text-muted);}
.winner-amount{font-family:var(--font-heading);font-weight:800;color:var(--color-primary);font-size:0.9rem;flex-shrink:0;}

/* PROVIDERS */
.providers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.provider-chip{padding:12px 10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);text-align:center;font-family:var(--font-heading);font-size:0.75rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--color-text-muted);transition:all .2s;}
.provider-chip:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* REGISTER SECTION */
.register-section{padding:80px 24px;text-align:center;background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-bg) 100%);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.register-inner{max-width:640px;margin:0 auto;}
.register-section h2{font-size:2rem;color:var(--color-text);margin-bottom:12px;}
.register-section p{color:var(--color-text-muted);margin-bottom:28px;}
.register-note{font-size:0.76rem;color:var(--color-text-muted);margin-top:16px;}

/* PAGE HERO (inner pages) */
.page-hero{padding:52px 24px 44px;text-align:center;background:linear-gradient(180deg,var(--color-secondary) 0%,var(--color-bg) 100%);border-bottom:1px solid var(--color-border);}
.page-hero h1{font-size:2.2rem;color:var(--color-text);}
.page-hero p{color:var(--color-text-muted);margin-top:10px;}
.breadcrumb{font-size:0.78rem;color:var(--color-text-muted);margin-bottom:16px;}
.breadcrumb a{color:var(--color-text-muted);}
.breadcrumb a:hover{color:var(--color-primary);}

/* CONTENT SECTION (legal pages) */
.content-section{max-width:840px;margin:0 auto;padding:56px 24px;}
.content-section h2{font-size:1.1rem;color:var(--color-primary);margin:28px 0 12px;font-family:var(--font-heading);text-transform:uppercase;}
.content-section p,.content-section li{color:var(--color-text-muted);font-size:0.9rem;margin-bottom:10px;}
.content-section ul{margin-left:20px;}
.content-section a{color:var(--color-primary);}

/* GAME PAGE */
.game-page{padding:40px 24px;}
.game-page-inner{max-width:1100px;margin:0 auto;}
.game-frame-wrapper{margin:24px 0;border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-neon);}
.game-frame-wrapper iframe{display:block;}
.game-desc{color:var(--color-text-muted);margin-bottom:18px;font-size:0.92rem;}
.game-legal{font-size:0.78rem;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:12px 16px;margin-top:14px;}

/* CONTACT / FAQ */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;}
.contact-info{color:var(--color-text-muted);}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:0.82rem;font-family:var(--font-heading);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text-muted);}
.form-group input,.form-group textarea,.form-group select{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:10px 14px;color:var(--color-text);font-family:var(--font-body);font-size:0.88rem;outline:none;transition:border-color .2s;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary);}
.form-group textarea{min-height:120px;resize:vertical;}
.btn-submit{background:var(--color-primary);color:#fff;border:none;padding:12px 28px;border-radius:var(--radius-btn);font-family:var(--font-heading);font-weight:700;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;align-self:flex-start;box-shadow:var(--shadow-neon);}
.btn-submit:hover{background:var(--color-primary-bright);}
.faq-item{border-bottom:1px solid var(--color-border);}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;font-family:var(--font-heading);font-size:0.9rem;font-weight:600;letter-spacing:0.04em;color:var(--color-text);}
.faq-icon{color:var(--color-primary);font-size:1.2rem;transition:transform .3s;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{display:none;padding:0 0 16px;font-size:0.88rem;color:var(--color-text-muted);}
.faq-item.open .faq-answer{display:block;}

/* FOOTER */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:40px 24px 24px;}
.footer-inner{max-width:1280px;margin:0 auto;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.footer-links a{font-size:0.8rem;color:var(--color-text-muted);}
.footer-links a:hover{color:var(--color-primary);}
.rg-logos{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.rg-logo{background:var(--color-surface2);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:7px 14px;font-size:0.78rem;color:var(--color-text-muted);display:flex;align-items:center;gap:7px;}
.rg-logo img{height:26px;width:auto;object-fit:contain;}
.rg-logos a.rg-logo, .rg-logos a.rg-chip { text-decoration: none; color: inherit; transition: opacity .2s, border-color .2s; }
.rg-logos a.rg-logo:hover, .rg-logos a.rg-chip:hover { opacity: 1; border-color: var(--color-primary); }
.footer-rg{display:flex;gap:18px;align-items:center;margin-bottom:24px;flex-wrap:wrap;}
.footer-rg img{height:36px;filter:grayscale(0.5);transition:filter .2s;}
.footer-rg img:hover{filter:none;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;border-top:1px solid var(--color-border);}
.footer-legal{font-size:0.76rem;color:var(--color-text-muted);max-width:600px;}
.footer-meta{display:flex;align-items:center;gap:14px;}
.footer-age{background:var(--color-primary);color:#fff;font-family:var(--font-heading);font-weight:800;font-size:0.8rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-copy{font-size:0.76rem;color:var(--color-text-muted);}
.footer-copy a{color:var(--color-text-muted);}

/* AGE GATE */
.age-gate{position:fixed;inset:0;z-index:9998;background:rgba(10,10,15,0.97);display:flex;align-items:center;justify-content:center;padding:24px;}
.age-gate-box{background:var(--color-surface);border:1px solid var(--color-primary);border-radius:6px;padding:44px;max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-neon);}
.age-gate-icon{font-size:3rem;margin-bottom:16px;}
.age-gate-box h2{font-size:1.6rem;color:var(--color-text);margin-bottom:8px;}
.age-gate-box p{font-size:0.88rem;color:var(--color-text-muted);margin-bottom:28px;}
.age-gate-btns{display:flex;flex-direction:column;gap:12px;}
.age-confirm{background:var(--color-primary);color:#fff;border:none;padding:14px;border-radius:var(--radius-btn);font-family:var(--font-heading);font-size:0.92rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-neon);}
.age-deny{background:transparent;border:1px solid rgba(255,255,255,0.15);color:var(--color-text-muted);padding:12px;border-radius:var(--radius-btn);font-size:0.85rem;cursor:pointer;}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-split{grid-template-columns:1fr;}
  .hero-content{padding:60px 32px;}
  .hero-image{display:none;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:block;}
  .hero-content{padding:40px 20px;}
  .hero-title{font-size:2rem;}
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .hero-stats{gap:18px;}
}