/* ============================================================
   Social Bingo — Base: reset, typography, layout, header, footer
   Depends on tokens.css
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

/* Any author `display` on a component would otherwise beat the UA [hidden] rule */
[hidden]{ display:none !important; }
a{ color:inherit; }
button{ font:inherit; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; }
h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.08; }
h2{ font-size:var(--fs-h2); line-height:1.15; }
h3{ font-size:var(--fs-h3); line-height:1.25; }
p{ margin:0; line-height:1.6; }

/* ---------- Scrollbars ----------
   Branded sitewide. Firefox gets `scrollbar-color`; WebKit gets the pseudo
   elements. Both keep the track transparent so it reads as part of the panel
   rather than a grey system rail bolted on.
   Deliberately NOT hidden — a scrollbar people can't see is a scrollbar they
   don't know to use. --------------------------------------------------- */
html{
  scrollbar-color: rgba(255,122,184,0.55) transparent;   /* thumb, track */
  scrollbar-width: thin;
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--magenta-soft), var(--magenta));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;      /* inset the thumb off the edge */
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #ff9ac9, var(--magenta));
  background-clip:padding-box;
}
*::-webkit-scrollbar-corner{ background:transparent; }

/* Inner panels get a slimmer, quieter bar than the page itself */
.chat-scroll, .doc-toc, .emoji-grid, .table-wrap, .wiz-log, .admin-side, .history{
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.chat-scroll::-webkit-scrollbar,
.doc-toc::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.wiz-log::-webkit-scrollbar,
.admin-side::-webkit-scrollbar{ width:6px; height:6px; }
.chat-scroll::-webkit-scrollbar-thumb,
.doc-toc::-webkit-scrollbar-thumb,
.emoji-grid::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.wiz-log::-webkit-scrollbar-thumb,
.admin-side::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.22); border:none; border-radius:999px;
}
.chat-scroll::-webkit-scrollbar-thumb:hover,
.doc-toc::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.38); }

/* Horizontal strips that scroll by design keep no visible bar at all */
.history::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.wiz-rail::-webkit-scrollbar,
.settings-nav::-webkit-scrollbar{ display:none; }
.history, .chips, .wiz-rail, .settings-nav{ scrollbar-width:none; }

/* Accessible focus — visible on every interactive element */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--width-marketing); margin:0 auto; padding:0 var(--sp-6); }
.wrap-app{ max-width:var(--width-app); margin:0 auto; padding:0 var(--sp-4); }
.section{ padding:var(--sp-16) 0; }
@media (max-width:820px){ .section{ padding:var(--sp-12) 0; } }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:var(--sp-8); flex-wrap:wrap; gap:var(--sp-3);
}

.eyebrow{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--magenta-soft); margin-bottom:var(--sp-2); display:block;
}
.eyebrow-gold{ color:var(--gold); }

.lede{ font-size:17px; line-height:1.6; color:var(--text-muted); max-width:52ch; }
.muted{ color:var(--text-muted); }

/* ---------- Site header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5) 0; gap:var(--sp-4); position:relative; z-index:var(--z-nav);
}
.nav-links{ display:flex; gap:var(--sp-6); font-weight:700; font-size:14px; }
.nav-links a{ opacity:0.8; text-decoration:none; transition:opacity var(--dur-fast); }
.nav-links a:hover,.nav-links a[aria-current="page"]{ opacity:1; }
.nav-cta{ display:flex; gap:var(--sp-2); align-items:center; }
@media (max-width:900px){ .nav-links{ display:none; } }
@media (max-width:520px){
  .site-header{ padding:var(--sp-4) 0; }
  .wordmark-text{ font-size:18px; }
  .hide-xs{ display:none !important; }
}

/* Mobile bottom nav (app screens) */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:var(--z-nav);
  display:none; justify-content:space-around;
  background:rgba(21,8,38,0.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--sp-2); text-decoration:none; font-size:10px; font-weight:800;
  color:var(--text-dim); min-height:52px; justify-content:center;
}
.bottom-nav a[aria-current="page"]{ color:var(--gold); }
/* 21px, not the 19px the emoji had: a two-colour glyph carries at a size a
   1.5px stroke does not. */
.bottom-nav .ico{ font-size:21px; line-height:1; display:flex; }
@media (max-width:820px){
  .bottom-nav{ display:flex; }
  body.has-bottom-nav{ padding-bottom:76px; }
}

/* ---------- Footer ---------- */
.site-footer{ padding:var(--sp-10) var(--sp-6) var(--sp-8); text-align:center; }
.site-footer .wordmark{ justify-content:center; margin-bottom:var(--sp-3); }
.site-footer p{ font-size:12px; color:var(--text-dim); margin:var(--sp-1) 0; }
.site-footer .links{ display:flex; justify-content:center; gap:var(--sp-4); margin:var(--sp-4) 0; flex-wrap:wrap; }
.site-footer .links a{ font-size:12px; color:var(--text-muted); text-decoration:none; }
.site-footer .links a:hover{ color:var(--cream); }
/* The everyday version: small print, not a warning label. A bordered pill
   with a red badge made a free game look like a licensed operator. */
.age-notice{
  margin-top:var(--sp-4); font-size:12px; color:var(--text-dim);
}

/* The version for pages that actually carry operator or casino content,
   where looking like a compliance notice is the entire point. */
.age-notice.is-strong{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:11px; font-weight:800; letter-spacing:0.4px;
  color:var(--text-muted); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:6px 12px;
}
.age-notice.is-strong .badge-18{
  background:var(--danger); color:#fff; border-radius:var(--radius-pill);
  padding:1px 7px; font-size:10px;
}
.age-notice.is-strong a{ color:var(--gold); }

/* ---------- Reduced motion (rules.md R-UI-05) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Icons (Lucide sprite, tools/build-icons.sh) ----------
   1em square and currentColor, so an icon inherits size and colour from the
   text it sits beside — no per-icon styling. */
.icon{
  width:1em; height:1em; flex-shrink:0;
  vertical-align:-0.125em;   /* optically centres against lowercase text */
}