/* MYBC reward popup v2, brand-book round (2026-10-14). Shared by every slot prelander. Pairs with popup.js (window.MYBCPopup).
   Follows MYBC Brand Guidelines v2.0 (Figma "MYBC Brand", July 2026; ~/Desktop/GIORGI/6-Documents/_KEEP-DOCS/MYBC-brand-guidelines.md),
   with ~/mybc-brandbook/MYBC-BRANDBOOK.md v1.0 used only where it agrees (#1B1941, Gilroy weights):
   - Logo: the master LogoMBC.svg (assets/logo.svg, white #FEFEFE hand script), flat on the base, no plate, no glow, never
     recoloured or stretched, clear space = the height of the "M", min 24px tall.
   - Colour: card = Base #1B1941, tiles = Surface #1E2048, border #484384, neutral controls = glass white 4% / 8% border;
     one accent, Supernova #FBCE04, for the money numbers and the one primary CTA (flat, #110E24 label, radius 8, 48px).
     Text white, secondary Muted #B2B8D2. No drop shadows, no glows, no gradient fills, no textures.
   - Type: Gilroy only (local() first, the site's woff2 in assets/fonts as fallback), letter-spacing 0, line height = size + 2:
     title 24/26 ExtraBold, amounts 24/26 ExtraBold, unit 15/17 Bold, body 13/15 Medium, caption 12/14.
   - Shape: radius 8 buttons / 12 card and bar / 14 feature tiles / full pills; spacing 2/4/8/12/16 only.
   - Tile art (10-14 polish): the art library's rendered 3D objects (ic-v-free-rounds / ic-v-gift / ic-v-birthday, velvet + satin gold),
     cut out, 42px on a dark 64px well with clear air (no glow); the bar keeps its Solar Bold twin in a glass chip.
   - Panel ground (10-14 polish): one soft radial orb at the top, a faint grain, and the oversized wordmark watermark at 4% white
     (brand book 02: 3-5%, max one per screen), clipped by the panel. Still no velvet, no stacked gradient fills.
   - Focus: the selected-state formula (Supernova 30% border), never outline removal.
   - Shell (10-14 verdict, "I liked the slot-themed popup"): per-game themes (data-theme) give the frame + one flat panel colour
     of that game (Olympus = the game's gold frame on deep purple, Hades = ember on red-black, ...); content above stays identical.
   Pure DOM/CSS. Everything is namespaced .mbp-* so it can sit next to the old kit/win.css. */

@font-face { font-family: 'MBP Gilroy'; src: local('Gilroy-Regular'), local('Gilroy Regular'), url(assets/fonts/Gilroy-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MBP Gilroy'; src: local('Gilroy-Medium'), local('Gilroy Medium'), url(assets/fonts/Gilroy-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'MBP Gilroy'; src: local('Gilroy-SemiBold'), local('Gilroy SemiBold'), url(assets/fonts/Gilroy-Bold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'MBP Gilroy'; src: local('Gilroy-Bold'), local('Gilroy Bold'), url(assets/fonts/Gilroy-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'MBP Gilroy'; src: local('Gilroy-ExtraBold'), local('Gilroy ExtraBold'), url(assets/fonts/Gilroy-Heavy.woff2) format('woff2'); font-weight: 800; font-display: swap; }

.mbp, .mbp-bar {
  --mbp-font: 'MBP Gilroy', 'Gilroy', system-ui, sans-serif;
  --mbp-ebony: #110E24;
  --mbp-base: #1B1941;
  --mbp-surface: #1E2048;
  --mbp-border: #484384;
  --mbp-glass: rgba(255, 255, 255, .04);
  --mbp-glass-line: rgba(255, 255, 255, .08);
  --mbp-yellow: #FBCE04;
  --mbp-yellow-30: rgba(251, 206, 4, .3);
  --mbp-text: #FFFFFF;
  --mbp-muted: #B2B8D2;
  --mbp-icon-muted: #91A1C0;
  /* theme slots (defaults = the brand dialog) */
  --mbp-panel: #1B1941;
  --mbp-frame: 1px solid #484384;
  --mbp-frame-out: 0 solid transparent;
  --mbp-radius: 12px;
  --mbp-tile: #1E2048;
  --mbp-tile-line: #484384;
  --mbp-edge: #484384;
  --mbp-scrim: rgba(17, 14, 36, .8);
  --mbp-orb: rgba(86, 79, 176, .34);      /* the brand overlay purple, as one soft top glow */
  --mbp-well: rgba(17, 14, 36, .42);       /* dark well under the tile art */
  font-family: var(--mbp-font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

html.mbp-lock, html.mbp-lock body { overflow: hidden; }

/* ---------- overlay ---------- */
.mbp { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.mbp[hidden] { display: none; }
/* prewarmed and closed: fully laid out, fonts and images ready, just not visible (open() swaps .is-warm for .is-open) */
.mbp.is-warm { visibility: hidden; pointer-events: none; }
.mbp__dim { position: absolute; inset: 0; background: var(--mbp-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---------- the card: a frame shell (.mbp__card) around one flat panel (.mbp__panel) ----------
   Default = the brand dialog (Base #1B1941, 1px #484384, radius 12). A game theme (data-theme, see the end of this file)
   swaps only the frame and the panel colour so the popup feels part of that game; the content never changes. */
.mbp__card { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: 100%; box-sizing: border-box;
  border-radius: var(--mbp-radius); border: var(--mbp-frame); outline: var(--mbp-frame-out); outline-offset: 0; background: var(--mbp-panel);
  color: var(--mbp-text); text-align: center; will-change: transform, opacity; }
.mbp__panel { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 24px 16px 16px; border-radius: inherit; }
.mbp__panel::-webkit-scrollbar { display: none; }
.mbp__panel { isolation: isolate; }
/* ground: one radial orb at the top + a faint grain (::before), the giant cropped wordmark at 4% (::after); both sit under the content */
.mbp__panel::before, .mbp__panel::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.mbp__panel::before { inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(70% 220px at 50% 0, var(--mbp-orb), transparent); }
.mbp__panel::after { left: -18%; bottom: -10%; width: 150%; aspect-ratio: 1812 / 837; opacity: .04;
  background: url(assets/logo.svg) center / contain no-repeat; }

/* close: neutral glass button, 36px visual, 44px hit area */
.mbp__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 8px; border: 1px solid var(--mbp-glass-line); background: var(--mbp-glass); color: var(--mbp-icon-muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease; }
.mbp__x::before { content: ""; position: absolute; inset: -4px; }
.mbp__x:hover { color: var(--mbp-text); background: rgba(255, 255, 255, .08); }
.mbp__x:focus-visible, .mbp a:focus-visible, .mbp-bar button:focus-visible, .mbp-bar a:focus-visible { outline: 2px solid var(--mbp-yellow-30); outline-offset: 2px; }

/* 1. logo: the master wordmark, flat on the base; clear space around it is kept by the margins */
.mbp__logo { display: block; width: auto; height: 36px; aspect-ratio: 1812 / 837; margin: 4px auto 0; }

/* 2. context: a neutral pill with the game result */
.mbp__ctx { display: inline-flex; align-items: center; gap: 4px; margin: 24px 0 0; padding: 4px 12px; border-radius: 999px;
  background: var(--mbp-glass); border: 1px solid var(--mbp-glass-line); font-size: 12px; line-height: 14px; font-weight: 500; color: var(--mbp-muted); }
.mbp__ctx:empty { display: none; }
.mbp__ctx b { font-weight: 700; color: var(--mbp-text); font-variant-numeric: tabular-nums; }

/* 3. headline */
.mbp__title { margin: 12px 0 0; font-size: 24px; line-height: 26px; font-weight: 800; color: var(--mbp-text); outline: none; }

/* 4. three feature tiles: icon chip, number first, plain words */
.mbp__tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.mbp__tile { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  border-radius: 14px; border: 1px solid var(--mbp-tile-line); background: var(--mbp-tile); }
/* glass tiles (10-14): translucent white over a 12px backdrop blur, so the orb and watermark read softly through */
.mbp__tile, .mbp__ctx { background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mbp__ic { display: block; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--mbp-glass-line); background: var(--mbp-glass); box-sizing: border-box;
  color: var(--mbp-text); position: relative; }
.mbp__ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--mbp-ic) center / 24px 24px no-repeat; mask: var(--mbp-ic) center / 24px 24px no-repeat; }
/* tile art: a rendered library object on a dark well, flat (no glow, no shadow) */
.mbp__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--mbp-well);
  border: 1px solid var(--mbp-glass-line); box-sizing: border-box; }
.mbp__art img { display: block; width: 42px; height: 42px; object-fit: contain; }
.mbp__txt { display: grid; gap: 2px; min-width: 0; }
.mbp__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.mbp__big b { font-size: 24px; line-height: 26px; font-weight: 800; color: var(--mbp-yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbp__big i { font-style: normal; font-size: 15px; line-height: 17px; font-weight: 700; color: var(--mbp-text); }
.mbp__big i.mbp__pre { font-size: 13px; line-height: 15px; font-weight: 500; color: var(--mbp-muted); }
.mbp__sub { font-size: 13px; line-height: 15px; font-weight: 500; color: var(--mbp-muted); }

/* 5. how: three numbered steps */
.mbp__how { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none;
  font-size: 13px; line-height: 15px; font-weight: 600; color: var(--mbp-text); }
.mbp__how li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mbp__how li + li::before { content: ""; width: 12px; height: 1px; background: var(--mbp-tile-line); }
.mbp__how em { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; font-style: normal;
  font-size: 12px; line-height: 14px; font-weight: 700; color: var(--mbp-text); background: var(--mbp-tile); border: 1px solid var(--mbp-tile-line); }

/* 6. the one primary CTA: flat Supernova, dark label */
.mbp__cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 16px 0 0; box-sizing: border-box;
  border-radius: 8px; border: 0; background: var(--mbp-yellow); color: var(--mbp-ebony); text-decoration: none; cursor: pointer;
  font: 800 16px/18px var(--mbp-font); letter-spacing: 0; transition: background-color .15s ease; }
.mbp__cta:hover { background: #FFD83A; }
.mbp__cta:active { background: #E9BF00; }

.mbp__fine { margin: 12px 0 0; font-size: 12px; line-height: 14px; font-weight: 500; color: var(--mbp-muted); }

/* ---------- entrance: fast, no bloom (visible in ~200 ms, tiles land by ~380 ms) ---------- */
.mbp.is-open .mbp__dim { animation: mbp-fade .18s ease-out both; }
.mbp.is-open .mbp__card { animation: mbp-in .22s cubic-bezier(.2, .9, .25, 1) both; }
.mbp.is-open .mbp__tile { animation: mbp-up .26s cubic-bezier(.2, .9, .25, 1) backwards; }
.mbp.is-open .mbp__tile:nth-child(1) { animation-delay: .05s; }
.mbp.is-open .mbp__tile:nth-child(2) { animation-delay: .1s; }
.mbp.is-open .mbp__tile:nth-child(3) { animation-delay: .15s; }
.mbp.is-again .mbp__tile { animation: none; }
@keyframes mbp-fade { from { opacity: 0; } }
@keyframes mbp-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mbp-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* ---------- after closing: pinned "Your pack is reserved" bar ---------- */
.mbp-bar { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 990; box-sizing: border-box; width: min(440px, calc(100% - 32px));
  transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--mbp-text);
  background: var(--mbp-panel); border: 2px solid var(--mbp-edge); animation: mbp-bar .26s cubic-bezier(.2, .9, .25, 1) both; }
.mbp-bar[hidden] { display: none; }
.mbp-bar__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  font-family: var(--mbp-font); }
.mbp-bar__open .mbp__ic { flex: none; width: 40px; height: 40px; }
.mbp-bar__open span { display: grid; gap: 2px; min-width: 0; }
.mbp-bar__open strong { font-size: 14px; line-height: 16px; font-weight: 700; }
.mbp-bar__open small { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--mbp-muted); }
.mbp-bar__open b { color: var(--mbp-yellow); font-weight: 700; font-variant-numeric: tabular-nums; }
.mbp-bar__cta { flex: none; display: grid; place-items: center; height: 44px; padding: 0 16px; border-radius: 8px; background: var(--mbp-yellow); color: var(--mbp-ebony);
  text-decoration: none; font: 800 14px/16px var(--mbp-font); transition: background-color .15s ease; }
.mbp-bar__cta:hover { background: #FFD83A; }
@keyframes mbp-bar { from { opacity: 0; transform: translate3d(-50%, 12px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }

/* ---------- sizes ---------- */
@media (max-width: 360px) {
  .mbp__panel { padding: 16px 12px 12px; }
  .mbp__tile { padding: 12px; grid-template-columns: 56px 1fr; }
  .mbp__art { width: 56px; height: 56px; }
  .mbp__art img { width: 36px; height: 36px; }
  .mbp__big b { font-size: 20px; line-height: 22px; }
}
@media (max-height: 680px) {
  .mbp__panel { padding-top: 16px; }
  .mbp__ctx { margin-top: 16px; }
  .mbp__tile { padding-top: 8px; padding-bottom: 8px; grid-template-columns: 56px 1fr; }
  .mbp__art { width: 56px; height: 56px; }
  .mbp__art img { width: 36px; height: 36px; }
}
@media (min-width: 600px) {
  .mbp__panel { padding: 24px 24px 16px; }
  .mbp__logo { height: 40px; }
}

/* ---------- game themes: MYBCPopup.open({ theme }) or the page's game slug picks one; unknown = the brand dialog ----------
   One frame + one flat panel colour per game, taken from each game's own popup. No textures, no gradient fills, no glows.
   Tiles become a darker wash of the panel; numbers stay Supernova, the CTA stays the flat Supernova button. */
.mbp[data-theme], .mbp-bar[data-theme] { --mbp-tile: rgba(0, 0, 0, .24); --mbp-tile-line: rgba(255, 255, 255, .14); --mbp-muted: #D3D0E6;
  --mbp-orb: rgba(255, 255, 255, .07); --mbp-well: rgba(0, 0, 0, .26); }

/* Gates of Olympus: the game's own gold frame (assets/themes/olympus-frame.webp) on its deep purple */
.mbp[data-theme="olympus"], .mbp-bar[data-theme="olympus"] { --mbp-panel: #3A1462; --mbp-frame: 0; --mbp-radius: 0; --mbp-edge: #E8B530;
  --mbp-tile-line: rgba(255, 210, 110, .3); --mbp-scrim: rgba(20, 4, 40, .62); --mbp-orb: rgba(150, 92, 255, .3); }
.mbp[data-theme="olympus"] .mbp__card { margin: 12px 10px; }
.mbp[data-theme="olympus"] .mbp__card::before { content: ""; position: absolute; inset: -8px -10px; z-index: 2; pointer-events: none;
  border-style: solid; border-width: 62px 52px; border-image: var(--mbp-frame-img) 260 220 260 220 stretch; }
.mbp[data-theme="olympus"] .mbp__panel { padding-top: 28px; padding-left: 20px; padding-right: 20px; }
.mbp[data-theme="olympus"] .mbp__x { top: 22px; right: 24px; z-index: 3; }
/* Starlight Princess: the same Pragmatic gold, on its pink-violet */
.mbp[data-theme="starlight"], .mbp-bar[data-theme="starlight"] { --mbp-panel: #46185F; --mbp-frame: 3px solid #E8B530; --mbp-frame-out: 3px solid #5A2A08;
  --mbp-radius: 14px; --mbp-edge: #E8B530; --mbp-tile-line: rgba(255, 210, 110, .3); --mbp-scrim: rgba(30, 6, 40, .62); --mbp-orb: rgba(214, 96, 255, .26); }
/* Gates of Hades: ember orange on red-black */
.mbp[data-theme="hades"], .mbp-bar[data-theme="hades"] { --mbp-panel: #230A0E; --mbp-frame: 2px solid #FF7A1A; --mbp-frame-out: 4px solid #3A0D10;
  --mbp-radius: 14px; --mbp-edge: #FF7A1A; --mbp-tile: rgba(0, 0, 0, .3); --mbp-tile-line: rgba(255, 140, 60, .3); --mbp-scrim: rgba(14, 4, 8, .66); }
/* Sweet Bonanza / Sugar Rush: candy pink */
.mbp[data-theme="candy"], .mbp-bar[data-theme="candy"] { --mbp-panel: #7A1460; --mbp-frame: 4px solid #FF9AD8; --mbp-frame-out: 3px solid #B0127E;
  --mbp-radius: 14px; --mbp-edge: #FF9AD8; --mbp-tile: rgba(60, 0, 50, .32); --mbp-tile-line: rgba(255, 180, 230, .32); --mbp-muted: #F6D3EA; --mbp-scrim: rgba(60, 10, 70, .55); }
/* The Dog House: warm wood with a yard-green edge */
.mbp[data-theme="doghouse"], .mbp-bar[data-theme="doghouse"] { --mbp-panel: #5E2A12; --mbp-frame: 4px solid #D98A3C; --mbp-frame-out: 3px solid #3F7A22;
  --mbp-radius: 14px; --mbp-edge: #D98A3C; --mbp-tile: rgba(40, 14, 4, .32); --mbp-tile-line: rgba(255, 200, 140, .28); --mbp-muted: #F2DCC6; --mbp-scrim: rgba(30, 12, 4, .6); }
/* Big Bass Bonanza / Bigger Bass: ocean blue, lure-yellow edge */
.mbp[data-theme="bass"], .mbp-bar[data-theme="bass"] { --mbp-panel: #0A4C8C; --mbp-frame: 3px solid #FFD23A; --mbp-frame-out: 3px solid #B5470B;
  --mbp-radius: 14px; --mbp-edge: #FFD23A; --mbp-tile: rgba(0, 20, 50, .34); --mbp-tile-line: rgba(255, 255, 255, .18); --mbp-muted: #D2E4F6; --mbp-scrim: rgba(2, 16, 36, .62); }
/* Wolf Gold: desert-night navy, canyon gold */
.mbp[data-theme="wolf"], .mbp-bar[data-theme="wolf"] { --mbp-panel: #1A2342; --mbp-frame: 3px solid #E2A93B; --mbp-frame-out: 3px solid #5A3A12;
  --mbp-radius: 14px; --mbp-edge: #E2A93B; --mbp-tile-line: rgba(226, 169, 59, .28); --mbp-scrim: rgba(6, 10, 24, .64); }
/* Fruit Party: grape purple, orange edge */
.mbp[data-theme="fruit"], .mbp-bar[data-theme="fruit"] { --mbp-panel: #4A1A7A; --mbp-frame: 3px solid #FF9F1C; --mbp-frame-out: 3px solid #2A0E48;
  --mbp-radius: 14px; --mbp-edge: #FF9F1C; --mbp-tile-line: rgba(255, 190, 110, .28); --mbp-scrim: rgba(24, 6, 44, .6); --mbp-orb: rgba(150, 92, 255, .28); }
/* Aviator: red on black */
.mbp[data-theme="aviator"], .mbp-bar[data-theme="aviator"] { --mbp-panel: #141016; --mbp-frame: 2px solid #E50539; --mbp-frame-out: 0 solid transparent;
  --mbp-radius: 12px; --mbp-edge: #E50539; --mbp-tile: #1F1A22; --mbp-tile-line: rgba(255, 255, 255, .1); --mbp-muted: #B2B8D2; --mbp-scrim: rgba(6, 4, 8, .7); }

/* reduced motion: instant */
.pl-reduced .mbp.is-open .mbp__dim, .pl-reduced .mbp.is-open .mbp__card, .pl-reduced .mbp.is-open .mbp__tile, .pl-reduced .mbp-bar { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mbp.is-open .mbp__dim, .mbp.is-open .mbp__card, .mbp.is-open .mbp__tile, .mbp-bar { animation: none; }
}