/* Nerobet Live — OnePage skin. Brand palette via --nb-* variables. */
:root{
  --nb-bg:#0B0E17;
  --nb-surface:#121A2A;
  --nb-border:#1A2740;
  --nb-fg:#E8F0FF;
  --nb-sub:#B6C3D9;
  --nb-primary:#F5B700;   /* amber */
  --nb-secondary:#4D7CFE; /* blue */
  --nb-accent:#22C55E;    /* green */
  --nb-danger:#FF4D4F;
  --nb-radius:18px;
  --nb-gap:14px;
  --nb-shadow:0 8px 24px rgba(0,0,0,.35);
  --nb-h1:clamp(28px,3.4vw,40px);
  --nb-h2:clamp(20px,2.8vw,30px);
  --nb-h3:clamp(16px,2.2vw,22px);
  --nb-tabbar-h:60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--nb-fg);
  background:linear-gradient(180deg,#0A1020 0%, var(--nb-bg) 60%, #0E1730 100%);
  padding-bottom:calc(var(--nb-tabbar-h) + env(safe-area-inset-bottom));
}
@media(min-width:1025px){ body{padding-bottom:0} }
a{color:inherit;text-decoration:none}
a:focus,button:focus,.nxp-chip:focus{outline:2px solid var(--nb-accent);outline-offset:2px;border-radius:8px}

.nxp-shell{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
@media(max-width:1024px){.nxp-shell{grid-template-columns:1fr}}

/* Sidebar */
.nxp-sidebar{
  position:sticky;top:0;height:100vh;background:var(--nb-surface);
  border-right:1px solid var(--nb-border);padding:18px 14px;display:flex;flex-direction:column;gap:14px
}
@media(max-width:1024px){.nxp-sidebar{display:none}}
.nxp-logo{display:inline-flex;align-items:center;gap:8px}
.nxp-brand{font-weight:700;letter-spacing:.2px}
.nxp-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nxp-nav a{padding:8px 10px;border-radius:12px;color:var(--nb-sub);display:flex;align-items:center;gap:8px;font-size:14px}
.nxp-nav a[aria-current="true"], .nxp-nav a:hover{background:#0E182C;color:var(--nb-fg)}

/* Container */
.nxp-container{max-width:980px;margin:0 auto;width:100%;overflow:visible}

/* Mobile tab bar */
.nxp-tabbar{
  position:fixed;left:0;right:0;bottom:0;background:rgba(18,26,42,.95);
  backdrop-filter: blur(8px);border-top:1px solid var(--nb-border);display:none;z-index:50;height:var(--nb-tabbar-h)
}
@media(max-width:1024px){.nxp-tabbar{display:block}}
.nxp-tabbar ul{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:6px 8px;list-style:none;height:100%}
.nxp-tabbar a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;height:100%;color:var(--nb-sub);font-size:11px;border-radius:12px}
.nxp-tabbar a[aria-current="true"]{color:var(--nb-fg);background:#0E182C}

/* Main */
.nxp-main{padding:18px}
@media(min-width:1025px){.nxp-main{padding:24px 24px 36px}}

/* Sections */
.nxp-section{background:rgba(18,26,42,.65);border:1px solid var(--nb-border);border-radius:var(--nb-radius);padding:22px;box-shadow:var(--nb-shadow);margin-bottom:var(--nb-gap)}
.nxp-section h2{font-size:var(--nb-h2);margin:0 0 10px}
.nxp-kicker{font-size:11px;letter-spacing:.18em;color:var(--nb-accent);text-transform:uppercase}

/* HERO */
.nxp-hero{
  background:var(--nb-surface);
  border:1px solid var(--nb-border);
  border-radius:var(--nb-radius);
  box-shadow:var(--nb-shadow);
  padding:18px;
  margin:0 0 18px;
}
.nxp-hero-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch}
@media(max-width:1024px){.nxp-hero-wrap{grid-template-columns:1fr;gap:12px}}
.nxp-hero-left{padding:8px 8px 12px}
.nxp-hero-left .nxp-title{font-size:var(--nb-h1);margin:4px 0 8px}
.nxp-hero-left p{color:var(--nb-sub);margin:0 0 12px}
.nxp-cta{display:inline-flex;gap:8px;align-items:center;background:var(--nb-primary);color:#111;border-radius:12px;padding:10px 14px;font-weight:700}
.nxp-cta:active{transform:translateY(1px)}
.nxp-hero-right{padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.nxp-mini{background:linear-gradient(180deg,#111A2E 0%,#0E182C 100%);border:1px solid var(--nb-border);border-radius:14px;padding:12px}
.nxp-mini h3{font-size:var(--nb-h3);margin:4px 0 6px}

/* Chips */
.nxp-chips{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.nxp-chip{flex:0 0 auto;scroll-snap-align:start;background:#0E182C;border:1px solid var(--nb-border);border-radius:999px;padding:8px 12px;color:var(--nb-sub);cursor:pointer;white-space:nowrap}
.nxp-chip[aria-current="true"]{background:var(--nb-secondary);color:#fff}

/* Grid */
.nxp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--nb-gap);margin-top:12px}
@media(max-width:1200px){.nxp-grid{grid-template-columns:repeat(8,1fr)}}
@media(max-width:1024px){.nxp-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.nxp-grid{grid-template-columns:repeat(2,1fr)}}
.nxp-card{grid-column:span 4;border:1px solid transparent;border-radius:14px;padding:14px;color:#fff;position:relative}
@media(max-width:1024px){.nxp-card{grid-column:span 6}}
@media(max-width:640px){.nxp-card{grid-column:span 2}}
.nxp-card h3{margin:8px 0 6px;font-size:16px}
.nxp-meta{font-size:12px;color:#EEF3FF}
.nxp-card[hidden]{display:none!important}

/* Card image for live casino */
.nxp-thumb{display:block;width:100%;height:auto;object-fit:cover;border-radius:12px;overflow:hidden;border:1px solid #233355;background:#0F182C}
.nxp-play{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%) scale(1);opacity:1;z-index:2;padding:12px 16px;border-radius:999px;background:var(--nb-primary);color:#111;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(245,183,0,.35);transition:transform .18s ease,box-shadow .18s ease}
.nxp-card:hover .nxp-play,.nxp-card:focus-within .nxp-play{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 10px 26px rgba(245,183,0,.5)}
.nxp-play i{font-size:.95em}

/* Timeline */
.nxp-timeline{position:relative;padding-left:22px;margin-top:6px}
.nxp-timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#1C2740}
.nxp-step{position:relative;margin:0 0 12px;padding:8px 10px;border-radius:12px;background:#0F182C;border:1px solid var(--nb-border)}
.nxp-step:before{content:"";position:absolute;left:-7px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--nb-secondary);box-shadow:0 0 0 3px #0F182C}

/* Contact */
.nxp-contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.nxp-contacts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nxp-contacts{grid-template-columns:1fr}}
.nxp-contact{display:flex;gap:10px;align-items:center;background:#0F182C;border:1px solid var(--nb-border);border-radius:14px;padding:10px}

/* Footer */
.nxp-footer{color:#9FB1D4;text-align:center;padding:28px 10px 80px}
@media(min-width:1025px){.nxp-footer{padding-bottom:18px}}

/* Vibrant demo backgrounds for text-only cards */
.nxp-card:nth-child(6n+1){background:linear-gradient(135deg,#6E00FF 0%,#BA00FF 100%);border-color:#9A2BFF}
.nxp-card:nth-child(6n+2){background:linear-gradient(135deg,#FF5F6D 0%,#FFC371 100%);border-color:#FF8A6C}
.nxp-card:nth-child(6n+3){background:linear-gradient(135deg,#00C6FF 0%,#0072FF 100%);border-color:#2A8FFF}
.nxp-card:nth-child(6n+4){background:linear-gradient(135deg,#00F260 0%,#0575E6 100%);border-color:#1BBE80}
.nxp-card:nth-child(6n+5){background:linear-gradient(135deg,#F7971E 0%,#FFD200 100%);border-color:#F9B23C;color:#1b1b1b}
.nxp-card:nth-child(6n+6){background:linear-gradient(135deg,#e53935 0%,#e35d5b 100%);border-color:#F26A67}

/* Utilities and missing classes */
.nxp-muted{color:var(--nb-sub)}
.nxp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nxp-hr{height:1px;background:var(--nb-border);border:0;margin:8px 0}
.nxp-faq details{border:1px solid var(--nb-border);background:#0F182C;border-radius:12px;padding:10px;margin:8px 0}
.nxp-faq details[open]{background:#0E182C}
.nxp-faq summary{cursor:pointer;font-weight:700;list-style:none}
.nxp-faq summary::-webkit-details-marker{display:none}

/* Also style chips selected state via aria-selected for a11y */
.nxp-chip[aria-selected="true"]{background:var(--nb-secondary);color:#fff}