/* ============================================================
   FBM TRIVIA — layout + adapter on top of the official
   FBM design system (css/fbm-theme.css).
   Load order in HTML:  fbm-theme.css  →  theme.css
   This file only (a) maps the prototype's old token names to the
   real FBM tokens, and (b) adds page-layout classes in FBM style.
   ============================================================ */

:root{
  /* ---- Map prototype aliases → real FBM tokens ---- */
  --brand-primary:   var(--fbm-red);      /* primary accent / buttons */
  --brand-secondary: var(--neon-blue);    /* timer ring, highlights, Q x/y */
  --brand-accent:    var(--gold);          /* winnings, leaderboard #1 */
  --brand-warn:      var(--gold);
  --brand-danger:    var(--bad);

  /* ---- FBM theme: ~80% black + ~15% dark royal blue + ~5% red ---- */
  --neon-purple:#2f5fd0;         /* royal-blue for borders/glow */
  --bg:#060709;                  /* near-black page base */
  --panel:#0b1126;               /* card surface (very dark navy) */
  --panel2:#0f1730;              /* raised panel */

  --bg-0: #060709;
  --bg-1: #0a0f22;
  --bg-2: #0f1730;
  --surface:   rgba(70,110,235,.06);
  --surface-2: rgba(70,110,235,.13);
  --stroke:    rgba(80,120,235,.22);

  --text-0: var(--white);
  --text-1: #c4cef0;
  --text-2: var(--dim);

  /* ---- Typography (FBM fonts) ---- */
  --font-display: var(--font-display);     /* Bungee — titles */
  --font-body:    var(--font-ui);          /* Chakra Petch — body/questions */
  --q-size: 60px;
  --q-weight: 700;
  --q-tracking: 0;
  --opt-size: 32px;   /* answer option text size (adjustable in Theme panel) */

  /* ---- Timer placement (customizable) ---- */
  --timer-top: 56px; --timer-right: 72px; --timer-left: auto; --timer-bottom: auto;
  --timer-size: 190px; --timer-ring: var(--neon-blue);

  --bg-image: none;
  --r-sm:12px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body{ font-family:var(--font-body); color:var(--white); }

/* FBM page background: ~80% black, ~15% dark royal-blue gradient, ~5% red accent */
.aurora{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(640px 440px at 86% 0%, rgba(227,0,15,.11), transparent 58%),      /* ~5% red */
    radial-gradient(1200px 820px at 8% 112%, rgba(22,52,140,.30), transparent 62%),   /* ~15% dark royal blue */
    radial-gradient(760px 560px at 99% 99%, rgba(20,48,128,.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.010) 0 2px, transparent 2px 26px),
    #050608;                                                                          /* ~80% black */
}
.aurora::after{ content:""; position:absolute; inset:-50%;
  background-image:var(--bg-image); background-size:cover; background-position:center; opacity:.25; }

/* Chips → FBM neon pill look */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill);
  font-family:var(--font-num); font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,200,255,.1); border:1px solid var(--neon-blue); color:#9fe4ff; }

/* Glass card → dark panel (black-navy) */
.glass{ background:linear-gradient(180deg,var(--panel),#070a16);
  border:1px solid rgba(80,120,235,.22); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(22,52,140,.13); }

/* ---- FBM game title (red word + white word) ---- */
.game-title{ font-family:var(--font-display); line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); }
.game-title .red{ color:var(--fbm-red); text-shadow:0 0 22px var(--red-glow),0 3px 0 rgba(0,0,0,.4); }
.game-title .white{ color:#fff; }

/* ============ ICON TILES (admin nav / stats) — FBM arcade 3D ============
   Hard offset shadow (not blur) = the FBM arcade depth. */
.icon3d{ position:relative; width:46px; height:46px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; font-size:22px; line-height:1; color:#fff;
  background:linear-gradient(180deg, var(--i-a,#ff2733), var(--i-b,#c00812));
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 5px 0 rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.25);
  transition:transform .12s var(--ease), box-shadow .12s; }
.icon3d:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.25); }

/* Buttons — reuse FBM .btn base; add the aliases the prototype markup uses */
.btn{ font-family:var(--font-ui); font-weight:700; font-size:15px; border:none; cursor:pointer; color:#fff;
  padding:15px 22px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg,#ff2733,var(--fbm-red)); box-shadow:0 5px 0 var(--red-dark);
  transition:transform .1s, box-shadow .1s; }
.btn:active{ transform:translateY(2px); box-shadow:0 3px 0 var(--red-dark); }
.btn.secondary{ background:linear-gradient(180deg,#2ad4ff,#0093c4); box-shadow:0 5px 0 var(--blue-dark); }
.btn.secondary:active{ box-shadow:0 3px 0 var(--blue-dark); }
.btn.success{ background:linear-gradient(180deg,#25f39b,var(--ok-dark)); box-shadow:0 5px 0 #052e1d; }
.btn.success:active{ box-shadow:0 3px 0 #052e1d; }
.btn.danger{ background:linear-gradient(180deg,#ff5566,var(--bad)); box-shadow:0 5px 0 var(--bad-dark); }
.btn.gold{ background:linear-gradient(180deg,#ffd24a,#c9920a); color:#3a2700; font-weight:800; box-shadow:0 5px 0 var(--gold-dark); }
.btn.ghost{ background:rgba(70,110,235,.10); border:1.5px solid rgba(80,120,235,.5); color:#c4cef0; box-shadow:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Responsible-gaming footer (PAGCOR — mandatory on broadcast assets) */
.rg-footer{ padding:10px 18px; border-radius:12px; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12); font-family:var(--font-ui); font-size:12px;
  line-height:1.5; color:var(--dim); text-align:center; }
.rg-footer b{ color:#fff; }

.scrollbar::-webkit-scrollbar{ width:10px; height:10px; }
.scrollbar::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:99px; }

/* Toggle switch (styled checkbox) */
.switch{ -webkit-appearance:none; appearance:none; margin:0; flex:0 0 auto; cursor:pointer;
  width:56px; height:30px; border-radius:999px; position:relative;
  background:var(--surface-2); border:1px solid var(--stroke); transition:background .2s, border-color .2s; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.45); transition:transform .2s var(--ease); }
.switch:checked{ background:linear-gradient(180deg,#2ad4ff,#0093c4); border-color:transparent; }
.switch:checked::after{ transform:translateX(26px); }