/* av-game-panel.css — the shell-owned INFO PANEL of a game page: session stats, rules and payouts,
   round / bet log (the right-hand #sidebar built from .sb-* rows). In the v2 design this panel is
   part of the platform shell, not of the game: same look and place on every game. The game keeps
   filling it with its own numbers and log lines (markup and scripts untouched); this sheet only
   gives it the shell's look. Stage and bet controls are NOT touched here.
   Later step: the shell renders the panel itself from a small API and the per-game copies go away.
   Scoped to .av-v2 #sidebar, so removing the class rolls a page back. */
.av-v2 #sidebar{background:var(--av-panel);border-left:0}
.av-v2 #sidebar,.av-v2 #sidebar *{font-family:var(--av-font);font-variant-numeric:tabular-nums}
.av-v2 #sidebar .sb-sec{border-bottom:1px solid var(--av-raised)}
.av-v2 #sidebar .sb-title,.av-v2 #sidebar .rules-lbl,.av-v2 #sidebar .sb-log-hdr{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--av-white)}
.av-v2 #sidebar .sb-row{padding:5px 0}
.av-v2 #sidebar .sb-lbl{font-size:12px;letter-spacing:0;color:var(--av-muted)}
.av-v2 #sidebar .sb-val{font-size:12px;font-weight:600;color:var(--av-white)}
.av-v2 #sidebar .sb-val.pos{color:var(--av-win)}
.av-v2 #sidebar .sb-val.neg{color:var(--av-loss)}
.av-v2 #sidebar .sb-val.gold{color:var(--av-white)}
.av-v2 #sidebar #chart-pl-label{font-size:12px;letter-spacing:0;color:var(--av-white)}
.av-v2 #sidebar #chart-pl-label.pos{color:var(--av-win)}
.av-v2 #sidebar #chart-pl-label.neg{color:var(--av-loss)}
.av-v2 #sidebar #chart-pl-label.zero{color:var(--av-muted)}
.av-v2 #sidebar #session-chart-bar,.av-v2 #sidebar #rules-sec{border-color:var(--av-raised)}
.av-v2 #sidebar #rules-toggle .rules-arr{color:var(--av-muted)}
.av-v2 #sidebar .le{font-size:12px;border-bottom:1px solid var(--av-raised)}
.av-v2 #sidebar .le:first-child{background:var(--av-raised)}
.av-v2 #sidebar .lm,.av-v2 #sidebar .lp2{font-size:12px}
.av-v2 #sidebar .lm.won,.av-v2 #sidebar .lp2.pos{color:var(--av-win)}
.av-v2 #sidebar .lm.lost,.av-v2 #sidebar .lp2.neg{color:var(--av-loss)}
.av-v2 #sidebar .lc{font-size:11px;color:var(--av-muted)}
.av-v2 #sidebar .r-head{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--av-accent-soft)}
.av-v2 #sidebar .r-line{font-size:11px;letter-spacing:0;color:var(--av-muted)}

/* ── tabs (AV_Panel): one tab bar, same on every game ── */
.av-v2 [data-av-panel] .av-panel-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;flex:none;border-bottom:1px solid var(--av-raised)}
.av-v2 [data-av-panel] .av-panel-tab{flex:1 1 auto;border:0;background:var(--av-bg);color:var(--av-text);font:500 12px var(--av-font);padding:7px 8px;border-radius:var(--av-r);cursor:pointer;white-space:nowrap}
.av-v2 [data-av-panel] .av-panel-tab:hover{background:var(--av-raised);color:var(--av-white)}
.av-v2 [data-av-panel] .av-panel-tab.is-on{background:var(--av-raised);color:var(--av-white);font-weight:600}
.av-v2 [data-av-panel] .av-panel-panes{flex:1;min-height:0;display:flex;flex-direction:column}
.av-v2 [data-av-panel] .av-panel-pane{display:none;flex:1;min-height:0;overflow-y:auto}
.av-v2 [data-av-panel] .av-panel-pane.is-on{display:flex;flex-direction:column}
.av-v2 [data-av-panel] .av-panel-pane #rules-toggle{display:none}
.av-v2 [data-av-panel] .av-panel-pane #rules-body{max-height:none!important;overflow:visible}
.av-v2 [data-av-panel] .av-panel-pane #rules-sec{border-top:0}
.av-v2 [data-av-panel] .av-panel-pane #round-log{flex:1;min-height:0;overflow-y:auto}
.av-v2 [data-av-panel]{display:flex;flex-direction:column}

/* ── Roulette's sidebar (#rl-sidebar, .rl-panel blocks): same shell look ── */
.av-v2 #rl-sidebar{background:var(--av-panel);border-left:0}
.av-v2 #rl-sidebar,.av-v2 #rl-sidebar *{font-family:var(--av-font);font-variant-numeric:tabular-nums}
.av-v2 #rl-sidebar .rl-panel{background:transparent;border:0;border-bottom:1px solid var(--av-raised);border-radius:0}
.av-v2 #rl-sidebar .rl-panel-title{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--av-white)}
.av-v2 #rl-sidebar .toggle-icon{color:var(--av-muted)}
.av-v2 #rl-sidebar .stat-item{background:var(--av-raised);border:0;border-radius:var(--av-r)}
.av-v2 #rl-sidebar .stat-lbl,.av-v2 #rl-sidebar .hc-lbl{font-size:11px;letter-spacing:0;text-transform:none;color:var(--av-muted)}
.av-v2 #rl-sidebar .stat-val{font-size:14px;font-weight:600;color:var(--av-white)}
.av-v2 #rl-sidebar .stat-val.pos{color:var(--av-win)}
.av-v2 #rl-sidebar .stat-val.neg{color:var(--av-loss)}

/* ── Phone: the info panel is a bottom sheet (opened by #av-panel-open), replacing each game's own phone drawer ── */
.av-panel-open, .av-panel-backdrop, .av-panel-close { display: none; }
@media (max-width: 820px) {
  .av-v2 [data-av-sheet] {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: 72dvh !important;
    display: block !important; overflow-y: auto !important; z-index: 700 !important; margin: 0 !important;
    background: var(--av-panel) !important; border: 0 !important; border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
    transform: translateY(105%) !important; transition: transform .25s cubic-bezier(.22,1,.36,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .av-v2 [data-av-sheet].av-open { transform: none !important; }
  .av-v2 [data-av-sheet] .av-panel-tabs { position: sticky; top: 36px; z-index: 2; }
  .av-panel-close {
    display: flex; position: sticky; top: 0; z-index: 3; width: 100%; height: 36px; padding: 0 14px; align-items: center; justify-content: flex-end;
    background: var(--av-panel); border: 0; color: var(--av-muted); font-size: 14px; cursor: pointer;
  }
  .av-panel-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 690; }
  /* a handle on the right edge, vertically centred: it never sits on a game's info bar or bet buttons. The tap area (30 x 84) is much bigger than
     the pill you see (16 x 60), so it is easy to hit with a thumb; the pill is drawn by ::after, the icon by ::before. */
  .av-panel-open {
    display: flex; position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 400;
    width: 30px; height: 84px; border: 0; background: transparent; padding: 0; cursor: pointer;
    align-items: center; justify-content: flex-end; -webkit-tap-highlight-color: transparent;
  }
  .av-panel-open::after {
    content: ""; width: 16px; height: 60px; border-radius: 10px 0 0 10px; background: var(--av-accent); opacity: .85; transition: opacity .15s, width .15s;
  }
  .av-panel-open:active::after { opacity: 1; width: 20px; }
  .av-panel-open::before {
    content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); z-index: 1; width: 12px; height: 12px; 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='M3 15h18'/%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='M3 15h18'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* the games' own phone drawers and their openers are replaced by the sheet */
  .av-v2:has([data-av-sheet]) #mobile-btn, .av-v2:has([data-av-sheet]) #mobile-drawer-actions, .av-v2:has([data-av-sheet]) #mob-drawer,
  .av-v2:has([data-av-sheet]) #drawer-backdrop, .av-v2:has([data-av-sheet]) .mobile-drawer-btn { display: none !important; }
  /* the Stake opener some games keep sits below the sheet button */
  .av-v2 #mobile-stats-btn { top: calc(var(--av-nav, 52px) + 48px) !important; }
}

/* v4 rewards tab (av-rewards.js, economy window): the panel is narrow (about 240px), so each claim row stacks:
   label and hint on top, amount and Claim button underneath. */
.av-v2 .av-rw-claim { flex-direction: column; align-items: stretch; gap: 8px; }
.av-v2 .av-rw-claim > div:last-child { width: 100%; justify-content: space-between; }
.av-v2 .av-rw-claim-amt { white-space: nowrap; }
.av-v2 .av-rw-claim-btn { min-height: 32px; min-width: 76px; }
.av-v2 .av-rw-levelrow { gap: 8px; flex-wrap: wrap; }