/* ============================================================
   BANK OR BREAK — 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 old alias token names to the real FBM
   tokens, and (b) adds shared page-layout classes in FBM style.
   Game-specific styling (prize wall, pocket) lives in each page.
   ============================================================ */

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

  --bg-0: var(--bg);
  --bg-1: #0a1228;
  --bg-2: var(--panel2);
  --surface:   rgba(43,107,255,.08);
  --surface-2: rgba(43,107,255,.16);
  --stroke:    rgba(43,107,255,.35);

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

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

  /* ---- Timer placement (customizable via Theme panel) ---- */
  --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: red radial top-right + purple bottom-left + diagonal sheen */
.aurora{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  /* ~80% black + ~15% dark royal-blue gradient + ~5% red gradient + diagonal pattern */
  background:
    radial-gradient(560px 340px at 84% -4%, rgba(227,0,15,.12), transparent 55%),
    radial-gradient(1000px 720px at 6% 110%, rgba(42,79,208,.24), transparent 62%),
    radial-gradient(760px 560px at 100% 104%, rgba(42,79,208,.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px),
    var(--bg);
}
.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 → FBM panel */
.glass{ background:linear-gradient(180deg,var(--panel),#0a1228);
  border:1px solid rgba(43,107,255,.35); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(43,107,255,.12); }

/* ---- 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 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.danger:active{ box-shadow:0 3px 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.gold:active{ box-shadow:0 3px 0 var(--gold-dark); }
.btn.ghost{ background:rgba(43,107,255,.08); border:1.5px solid rgba(43,107,255,.5); color:#bcd0ff; 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; }