:root{
  --bg:#0b0c10;           /* page background */
  --panel:#1f2833;        /* cards / sections */
  --ink:#ffffff;          /* text */
  --muted:#cfd6df;        /* subtle text */
  --accent:#ffcc00;       /* gold accent */
  --accent-ink:#14120b;   /* text on gold */
  --line:rgba(255,255,255,.08);
  --shadow:0 12px 28px rgba(0,0,0,.28);
  --radius:16px; --radius-sm:10px;
}

* { box-sizing:border-box }
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Layout helpers */
.container{ max-width:1200px; margin:0 auto; padding:0 16px }
.section{ padding:48px 0 }
.card{
  background:var(--panel); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Header */
.header{ background:#11151a; position:sticky; top:0; z-index:30 }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{
  color:#fff; text-decoration:none; font-weight:900; font-size:1.25rem; letter-spacing:.4px;
}
.logo:hover{ color:var(--accent) }
.nav-links{ display:flex; gap:20px; list-style:none; margin:0; padding:0 }
.nav-links a{
  color:#e9eef5; text-decoration:none; font-weight:600; opacity:.95; transition:opacity .2s,color .2s;
}
.nav-links a:hover{ opacity:1 }
.nav-links a.active{ color:var(--accent) }

/* Hero */
.hero{
  position:relative; isolation:isolate;
  background: radial-gradient(80% 80% at 10% 10%, rgba(255,204,0,.15), transparent 40%),
              radial-gradient(80% 80% at 90% 10%, rgba(255,204,0,.08), transparent 45%),
              #0e1116;
  padding:72px 0 64px;
}
.hero:after{
  content:""; position:absolute; inset:0;
  background: url("./assets/images/hero-bg.jpg") center/cover no-repeat;
  opacity:.12; z-index:-1; filter: saturate(0.8) contrast(1.1);
}
.hero h1{ font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); margin:0 0 8px; }
.hero p { color:var(--muted); margin:0 0 18px; max-width:760px }

/* Buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800;
  padding:12px 18px; border-radius:var(--radius-sm); text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.25); transition:transform .15s,filter .15s,box-shadow .15s;
}
.btn-primary:hover{ filter:brightness(.96); transform:translateY(-1px) }

/* Feature grid */
.features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.feature-card{
  background:var(--panel); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card:hover{ transform:translateY(-2px); border-color:rgba(255,204,0,.35) }
.feature-card h3{ margin:6px 0 6px; font-size:1.05rem }
.feature-card p{ color:var(--muted); margin:0 }

/* Odds board */
.odds-wrap{ display:grid; grid-template-columns: 1.35fr .65fr; gap:16px }
.board, .slots{ border:1px solid var(--line) }
.board h3, .slots h3{ margin:0 0 12px; padding:12px 16px; border-bottom:1px solid var(--line) }
.list{ padding:8px 0 }
.match{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--line) }
.match:first-child{ border-top:0 }
.teams{ display:flex; align-items:center; gap:10px; font-weight:700 }
.badges{ display:flex; align-items:center; gap:8px }
.badges img{ width:22px; height:22px; object-fit:contain }
.odds{ display:flex; gap:8px }
.odd{
  padding:8px 10px; background:#141a21; border-radius:10px; border:1px solid var(--line);
  min-width:56px; text-align:center; font-weight:700; transition: border-color .15s, transform .15s;
}
.odd:hover{ border-color:rgba(255,204,0,.35); transform:translateY(-1px) }

/* Slots */
.slots-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:12px 16px 18px }
.slot{ background:#141a21; border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:transform .15s, border-color .15s }
.slot:hover{ transform:translateY(-2px); border-color:rgba(255,204,0,.35) }
.slot img{ width:100%; height:92px; object-fit:cover; display:block }
.slot .t{ padding:8px 10px; font-size:.92rem }

/* Compliance badges */
.compliance{ background:#0e1116; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.badge-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:stretch }
.badge{
  display:flex; align-items:center; gap:10px; justify-content:center; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 10px;
}
.badge svg{ width:22px; height:22px }
.badge span{ font-weight:700; font-size:.92rem }

/* CTA band */
.cta{ background:linear-gradient(180deg, rgba(255,204,0,.08), rgba(255,204,0,0)); border-top:1px solid var(--line) }
.cta-content{ padding:28px 0; text-align:center }
.cta-content h2{ margin:0 0 10px; font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem) }

/* Footer */
.footer{ background:#11151a; border-top:1px solid var(--line) }
.footer .container{ padding:14px 0; text-align:center; color:#c8c8c8 }

/* Responsive */
@media (max-width: 1100px){
  .badge-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px){
  .features{ grid-template-columns:1fr; }
  .odds-wrap{ grid-template-columns:1fr; }
  .slots-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px){
  .nav-links{ gap:12px }
  .slot img{ height:80px }
  .badge-grid{ grid-template-columns:repeat(2,1fr); }
}
/* === Make BetRolly Bigger & Centered === */
/* === Make BetRolly Logo Bigger (Keep Original Style & Position) === */
header .logo,
.navbar-brand,
.site-title,
.brand,
.header-brand,
.logo-text {
  font-size: 42px !important;   /* Increase size, same style */
  font-weight: 700 !important;  /* Keep the original boldness */
  letter-spacing: normal;       /* Keep original spacing */
  text-transform: none;         /* Keep BetRolly casing */
  margin-left: 0;               /* Keep it aligned to the left */
  text-align: left;             /* Ensures it's positioned at the start */
}
/* ======================================
   BETROLLY FINAL RESPONSIVE OPTIMIZATION
   ====================================== */
@media (max-width: 1024px) {
  /* Slightly reduce general padding on tablets */
  section, .container, .wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ----------- Phones ----------- */
@media (max-width: 768px) {
  html, body {
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* Navbar: compact and balanced */
  header, .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .logo, .logo-text, .brand, .site-title {
    font-size: 22px !important;
    line-height: 1.05;
    white-space: nowrap;
  }
  .nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
  }
  .nav-links a {
    font-size: 0.92rem;
    padding: 4px 0;
  }

  /* Hero Section */
  .hero {
    padding: 48px 16px 36px;
    text-align: left;
  }
  .hero h1 {
    font-size: clamp(1.7rem, 1rem + 3vw, 2.3rem);
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .hero p {
    font-size: 1rem;
    max-width: 38ch;
  }
  .hero .cta, .btn, .btn-primary {
    padding: 14px 18px;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
  }

  /* Featured Matches */
  .featured-matches {
    padding: 16px;
  }
  .featured-matches h2 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    text-align: center;
  }
  .match-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .match-row .teams {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .match-row .odds {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 8px;
    justify-content: end;
  }
  .match-row .odds span,
  .match-row .odds button {
    background: rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 60px;
  }

  /* Live Casino Section */
  .live-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .live-item img {
    height: 140px;
    object-fit: cover;
  }
  .live-meta {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .live-cta {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .live-cta .btn {
    width: 100%;
  }

  /* About Page Columns */
  .about-grid, .about-columns, .about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ----------- Small Phones ----------- */
@media (max-width: 420px) {
  .logo, .logo-text, .brand, .site-title {
    font-size: 20px !important;
  }
  .live-grid {
    grid-template-columns: 1fr;
  }
  .live-item img {
    height: 180px;
  }
}
/* ============ LIVE CASINO — DESKTOP + MOBILE TUNE ============ */
/* Desktop (default) */
.live-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
.live-item{
  border-radius:14px;
  overflow:hidden;
}
.live-item img{
  width:100%;
  height:150px;           /* smaller on desktop */
  object-fit:cover;       /* keeps images from looking stretched */
  display:block;
}

/* Provider logos row (keeps small & centered) */
.live-providers{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin:16px 0;
}
.live-providers .provider-logo{ max-height:36px; width:auto; opacity:.9; }

/* Tablets */
@media (max-width: 1024px){
  .live-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .live-item img{ height:140px; }
}

/* Phones */
@media (max-width: 768px){
  .live-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .live-item img{ height:120px; }   /* smaller on phones */
  .live-providers .provider-logo{ max-height:32px; }
}

/* Small phones */
@media (max-width: 420px){
  .live-grid{ grid-template-columns: 1fr; }
  .live-item img{ height:180px; }   /* a bit taller for single-column cards */
}

.live-meta .live-title {
    font-weight: 700;
    color: #ffffff !important;
}
.live-meta .live-provider {
    color: rgba(255,255,255,0.8) !important; /* slightly softer white */
}
/* Default: hide hamburger + drawer */
/* Hide floating button on desktop */
.side-menu-btn { display: none; }

/* ===== Header defaults (keep or adjust to your theme) ===== */
.header{ position: sticky; top:0; z-index:50; background: transparent; }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; position:relative; }
.logo{ color:#fff; text-decoration:none; font-weight:800; font-size:28px; }

/* Side-menu button hidden by default (desktop) */
.side-menu-btn{ display:none; }

/* Drawer base hidden on desktop */
.drawer{ display:none; }

/* =====================  MOBILE ONLY  ===================== */
@media (max-width: 992px){

  /* Hide desktop links on mobile, header becomes positioning context */
  .nav-links{ display:none !important; }
  .navbar{ position: relative; }

  /* --- Header-aligned transparent button (top-right) --- */
  .side-menu-btn{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    z-index:10;

    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:46px;
    height:38px;
    background:rgba(255,255,255,.08);     /* transparent look */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.3);
    cursor:pointer;

    box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
  }
  .side-menu-btn:hover{
    background:rgba(255,255,255,.15);
    box-shadow:0 4px 14px rgba(0,0,0,.45);
    transform:translateY(-50%) scale(1.05);
  }

  /* White bars */
  .side-menu-btn span{
    display:block;
    width:20px;
    height:2.5px;
    margin:3.5px 0;
    background:#fff;
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  /* Animate into X when open */
  .side-menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .side-menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .side-menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* --- Drawer shell --- */
  .drawer{ display:block; position:fixed; inset:0; pointer-events:none; z-index:9999; }
  .drawer.open{ pointer-events:auto; }
  .drawer-overlay{
    position:absolute; inset:0;
    background:rgba(10,12,16,0.95);
    opacity:0; transition:opacity .3s ease;
  }
  .drawer.open .drawer-overlay{ opacity:1; }

  /* --- Right-side frosted panel --- */
  
  .drawer-panel {
    background: rgba(10, 12, 16, 0.92) !important; /* less transparent, keeps premium look */
    backdrop-filter: blur(6px) !important;          /* soft blur behind panel */
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.5);

  transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column; padding:18px 18px 24px;
     z-index: 2;
}
  
  .drawer.open .drawer-panel{ transform:translateX(0); }

  /* Drawer header + links */
  .drawer-header{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; }
  .drawer-title{ font-weight:700; font-size:18px; color:#fff; }
  .drawer-close{ background:none; border:0; font-size:28px; color:#fff; cursor:pointer; }

  .drawer-links{ list-style:none; margin:8px 0 16px; padding:0; }
  .drawer-links li{ margin:2px 0; }
  .drawer-links a{
    display:block; padding:12px 8px; text-decoration:none; color:#ffffff !important; font-weight:700; border-radius:6px;
    transition:background .2s ease, transform .15s ease;
  }
  .drawer-links a:hover {
    color: #ffcc00 !important;           /* gold hover */
    background: rgba(255,255,255,0.08) !important;
    opacity: 1 !important;
}

  /* Drawer login button (not yellow) */
  .btn-login{
    margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:10px; border:1.5px solid #fff; color:#fff; text-decoration:none; font-weight:700;
    transition:background .25s ease, color .25s ease;
  }
  .btn-login:hover{ background:#fff; color:#000; }

  /* Lock page scroll when drawer open */
  body.no-scroll{ overflow:hidden; }
}
/* Base header look at page top (transparent over hero) */
/* Always solid black */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0a0c10; /* solid black */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}


/* When scrolled: solid black header bar */
.header.is-stuck{
  background: rgba(10,12,16,.95);          /* rich black */
  backdrop-filter: saturate(110%) blur(4px);
  -webkit-backdrop-filter: saturate(110%) blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Keep logo readable on dark bar */
.header.is-stuck .logo{ color: #fff; }

/* Make the mobile menu button look right on the solid header */
@media (max-width: 992px){
  .header.is-stuck .side-menu-btn{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
}