/*
  Runa Casino Static Site Styles
  Theme: Dark (#171717 base)
  Notes:
  - Uses modern CSS with responsive utilities and accessible focus styles
  - Mobile screen lock via body height + overflow on body and scroll area on <main>
  - Tables are mobile-adaptive using data-label attributes
*/

/* CSS Reset: minimal normalize for consistency */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Color tokens */
:root{
  --bg:#171717;            /* Dark theme background */
  --bg-elev:#1f1f1f;       /* Elevated surfaces */
  --text:#f5f5f5;          /* Primary text */
  --muted:#c4c4c4;         /* Secondary text */
  --brand:#22c55e;         /* Primary brand (green) */
  --brand-600:#16a34a;     /* Hover shade */
  --stroke:#2a2a2a;        /* Borders */
  --focus:#60a5fa;         /* Focus ring */
}

/* Typography */
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4{line-height:1.25}
h1{font-size:clamp(1.75rem,2.2vw,2.25rem);margin:0 0 .75rem}
h2{font-size:clamp(1.35rem,1.8vw,1.75rem);margin:2rem 0 .5rem}
h3{font-size:clamp(1.1rem,1.4vw,1.25rem);margin:1.5rem 0 .5rem}
h4{font-size:1rem;margin:1rem 0 .25rem;color:var(--muted)}
p{color:#e7e7e7}

/* Container and layout utilities */
.container{width:min(1200px,92%);margin-inline:auto}
.prose p{margin:.75rem 0}
.visually-hidden{position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important}

/* Focus styles for accessibility */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(23,23,23,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:inline-flex;align-items:center;gap:.5rem}
.primary-nav .nav-list{display:flex;gap:.5rem;align-items:center;list-style:none;margin:0;padding:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;padding:.6rem 1rem;font-weight:600;transition:.2s background,.2s color,.2s border-color;cursor:pointer}
.btn-primary{background:var(--brand);color:#0a0a0a}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:transparent;border-color:var(--stroke);color:var(--text)}
.btn-ghost:hover{border-color:#3a3a3a;background:#1c1c1c}

/* Hero */
.hero{border-bottom:1px solid var(--stroke);background:linear-gradient(180deg,#1a1a1a,transparent)}
.hero-inner{padding:1rem 0 1.25rem;display:grid;gap:1rem;position:relative}
.hero-image{width:100%;height:auto;border-radius:12px;border:1px solid var(--stroke)}
.hero-cta{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.8rem;max-width:min(620px,84%);background:rgba(17,17,17,.78);border:1px solid var(--stroke);padding:1.25rem 1.5rem;border-radius:12px;backdrop-filter:blur(6px);min-height:220px;justify-content:center}
.hero-cta-title{margin:0;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.25}
.hero-cta-sub{margin:0;color:var(--muted)}
.hero-cta-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* Mobile adjustments */
@media (max-width: 767px){
  /* Center CTA on mobile over the banner */
  .hero-cta{left:50%;top:50%;transform:translate(-50%,-50%);justify-content:center;align-items:center;text-align:center;width:calc(100% - 1rem);max-width:none;min-height:200px;padding:1.1rem 1.25rem}
  .hero-cta-actions{justify-content:center}
}

/* Tables */
.table-wrap{width:100%;overflow:auto;border:1px solid var(--stroke);border-radius:10px;background:var(--bg-elev)}
.table{width:100%;border-collapse:collapse;min-width:620px}
.table-caption{caption-side:top;text-align:left;color:var(--muted);font-size:.9rem;padding:.75rem 1rem}
.table th,.table td{border-top:1px solid var(--stroke);padding:.75rem 1rem;text-align:left}
.table thead th{position:sticky;top:0;background:#1b1b1b;z-index:1}

/* Mobile table (stacked) */
@media (max-width:640px){
  .table{min-width:0;border-collapse:separate;border-spacing:0 .75rem}
  .table thead{display:none}
  .table tbody tr{display:grid;grid-template-columns:1fr;gap:.25rem;padding:.75rem;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);border-radius:8px;margin:0 .5rem;background:#1c1c1c}
  .table td{display:block;border:0;padding:.35rem 0}
  .table td::before{content:attr(data-label);display:block;color:var(--muted);font-weight:700;font-size:.9rem;line-height:1.2;margin-bottom:.15rem}
}

/* Lists */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{padding-left:0;margin:.4rem 0}

/* Slots grid */
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.slot-card{display:block;border:1px solid var(--stroke);border-radius:10px;overflow:hidden;background:#1b1b1b;transition:transform .15s ease, border-color .2s ease}
.slot-card:hover{transform:translateY(-2px);border-color:#3a3a3a}
.slot-card img{aspect-ratio:16/10;object-fit:cover}

/* Payments grid */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:1rem;list-style:none;margin:1rem 0 0;padding:0}
.pay-grid li{display:flex;align-items:center;justify-content:center;padding:.75rem;border:1px dashed var(--stroke);border-radius:8px;background:#161616}

/* CTAs */
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

/* Footer */
.site-footer{margin-top:2rem;border-top:1px solid var(--stroke);background:#131313}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 0;color:var(--muted)}
.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}