/* av-game-shell.css — everything a game page takes from the v2 shell stylesheet-wise.
   The shell owns the frame around a game (top bar, rail, bottom nav). The game inside keeps
   its own look, like a provider's game inside Stake or Gamdom: this file does NOT touch the
   game's colors, fonts, felt, machine, cards, chips or controls.
   Load with class="av-v2" data-av-layout="game" on <body>, or on <html> for pages whose scripts rewrite <body>.className. Its only job: full-width fixed layers
   sit beside the rail (--av-side) instead of under it.
   - #topbar and #crash-bar are position:fixed on every game page, so they always get the offset.
   - #main is fixed on some pages, static or relative on others. A fixed #main is declared by the
     page with data-av-main="fixed"; a static one is already offset by the shell's body padding-left,
     and a relative one would be shifted twice, so it must not be listed. */
.av-v2 #topbar,
.av-v2 #crash-bar { left: var(--av-side, 0px); }
.av-v2[data-av-main="fixed"] #main { left: var(--av-side, 0px); }

/* Standard strip: balance lives in the shell top bar, so hide a page's own balance segment
   (the page script may still write to it, so it is hidden, not removed). */
.av-v2 #top-center .seg:has(#tb-bal),
.av-v2 #top-center .seg:has(#tb-bal) + .divider { display: none; }

/* Phone fluidity (found by the 375px audit): decorative felt glow must not widen the page, and a crowded
   topbar button row must fit the screen. */
.av-v2 .felt-glow { inset: 0; animation: none; }
@media (max-width: 420px) {
  .av-v2 #topbar .tb-right { gap: 3px; min-width: 0; }
  .av-v2 #topbar .tb-right .icon-btn { padding-left: 6px; padding-right: 6px; min-width: 0; }
}

/* The floating drawer-opener (stats/rules) sat on top of the bet buttons at the bottom right on phones.
   Park it in the top-right corner of the stage instead (below the shell bar and the game title strip). */
@media (max-width: 820px) {
  .av-v2 #mobile-btn, .av-v2 #mobile-stats-btn {
    top: calc(var(--av-nav, 52px) + 56px) !important; bottom: auto !important; right: 10px !important; left: auto !important;
  }
}

/* The drawer-opener had a different glyph on every game (an emoji, a hexagon, or an empty span that nothing fills).
   One icon for all of them: the "panel" icon, drawn here so it never depends on page scripts. */
.av-v2 #mobile-btn { font-size: 0 !important; display: none; align-items: center; justify-content: center; }
@media (max-width: 820px) { .av-v2 #mobile-btn { display: flex !important; } }
.av-v2 #mobile-btn::before {
  content: ""; width: 20px; height: 20px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The games' own loading overlay uses the same bouncing spade as the page-to-page loader (shell: AV_Loader). */
.av-v2 #av-loading { background: var(--av-bg, #0F1923); }
.av-v2 #av-loading img { display: none; }
.av-v2 #av-loading::before {
  content: ""; display: block; width: 68px; height: 68px; margin-bottom: 8px;
  background: var(--av-spade-url) center / contain no-repeat;
  animation: avBounce .9s cubic-bezier(.3, 0, .4, 1) infinite; transform-origin: 50% 100%;
}
.av-v2 #av-load-status { font-family: var(--av-font, Inter, sans-serif); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--av-muted, #6F8197); }
.av-v2 #av-load-err { font-family: var(--av-font, Inter, sans-serif); font-size: 13px; letter-spacing: 0; }
.av-v2 #av-load-back { font-family: var(--av-font, Inter, sans-serif); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--av-muted, #6F8197); }

/* The slim game header (built by buildStandardTopbar): the game's name in the shell's own type, no mono caps. */
.av-v2 #topbar .tb-brand { font-family: var(--av-font, Inter, system-ui, sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--av-white, #F2F5F9) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
@media (max-width: 480px) { .av-v2 #topbar .tb-brand { font-size: 13px; } }

/* The old logo watermark behind the table is gone from every game. */
.felt-logo{display:none!important}

/* Card backs: every card game shows the VirtuAce spade centered on the back of a face-down card (replaces each game's
   own back and the old logo). One rule here instead of eight page edits; hole cards, shoe stacks and Video Poker backs all use it.
   The spade comes from --av-spade-url (shared-nav.js). Games that build their own card use the .av-card-back class in av-ui.css. */
.av-v2 .card.down, .av-v2 .card-back-face, .av-v2 .shoe-card.sc4 {
  background: linear-gradient(145deg, #4A3499, #2A1B63) !important; border-color: rgba(255,255,255,.14) !important; overflow: hidden !important;
}
.av-v2 .card.down::before, .av-v2 .card-back-face::before, .av-v2 .shoe-card.sc4::before {
  content: "" !important; position: absolute !important; inset: 0 !important; margin: auto !important;
  width: 52% !important; height: 52% !important; background: var(--av-spade-url, none) center / contain no-repeat !important;
  mix-blend-mode: normal !important; opacity: 1 !important; filter: none !important; transform: translate(2%, 1.6%) !important; z-index: 1 !important;   /* the artwork sits 2% left and 1.6% high inside its box (measured): nudged so the spade itself is centered */
}
.av-v2 .card.down::after, .av-v2 .card-back-face::after, .av-v2 .shoe-card.sc4::after { border-color: rgba(255,255,255,.16) !important; }