/* ================================================================
   NEON WAVE RUNNER — console-batchd2.css (v1.24.76, Batch D2)
   Console page chrome for: visual filter picker (#filterPanel),
   hangout poker panel (#pokerPanel — #tradePanel is Batch C's), and the
   character generator (#genPanel).

   Injected at runtime by filters.js / hangout.js (guarded, once) —
   never edit style.css; everything batch-D2 lives here.

   Chrome language: fullscreen flex-column console page, BACK pill +
   centered glowing Orbitron title, nested cyan-bordered body, zero
   scroll, 240ms slide+fade enter/exit. Theme-aware via var(--cyan);
   hardware buttons carry .nn-sysbtn filter immunity (see style.css).
   Typography: Orbitron 700 headings, Montserrat body. No emoji UI.
   ================================================================ */

/* ---------- shared console primitives (b2-*) ---------- */
.b2-chead {
  /* Two rows: BACK + reserved widget zone on row 1, full-width centered
     title on row 2 — the floating music/reset/power widgets park in the
     reserved zone, never on text. */
  flex:0 0 auto; display:grid;
  grid-template-columns:auto 1fr; gap:2px 12px; align-items:center;
  margin-bottom:10px;
}
.b2-wspace { min-width:120px; min-height:44px; }
.b2-ctitle {
  grid-column:1 / -1; margin:0; padding:0 2px;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700;
  font-size:clamp(16px, 3.4vw, 24px); letter-spacing:.28em; text-indent:.28em;
  color:#eafcff; text-align:center; white-space:nowrap;
  text-shadow:0 0 16px color-mix(in srgb, var(--cyan, #22d3ee) 50%, transparent);
}
.b2-back {
  font-family:'Orbitron','Montserrat',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.18em; text-indent:.18em;
  padding:12px 20px; border-radius:12px; min-height:44px; margin:0;
  border:1px solid color-mix(in srgb, var(--cyan, #22d3ee) 40%, transparent);
  background:color-mix(in srgb, var(--cyan, #22d3ee) 8%, transparent);
  color:#cdeeff; cursor:pointer; box-shadow:none;
  transition:transform 120ms ease-out, background 150ms ease-out;
}
.b2-back:active { transform:scale(.94); }
@media (hover:hover) {
  .b2-back:hover { background:color-mix(in srgb, var(--cyan, #22d3ee) 18%, transparent); }
}
.b2-back:focus-visible { outline:2px solid var(--cyan, #22d3ee); outline-offset:3px; }
.b2-cbody {
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid color-mix(in srgb, var(--cyan, #22d3ee) 16%, transparent);
  border-radius:16px; background:rgba(10,18,30,.55);
  padding:clamp(10px, 3vw, 20px);
  width:100%; box-sizing:border-box;
}
/* v1.24.76 fix: filter card grid is a bounded internal scroll region so the
   last card never clips on short viewports (page itself never scrolls) */
#filterPanel.filter-console .filter-cards { overflow-y:auto; min-height:0; }
.b2-ceyebrow {
  flex:none; margin:0 0 8px;
  font:700 10px 'Montserrat',Arial,sans-serif; letter-spacing:.24em;
  color:color-mix(in srgb, var(--cyan, #22d3ee) 75%, #ffffff);
}
.b2-csec {
  flex:none; margin:10px 0 8px; padding-bottom:4px;
  font:700 11px 'Orbitron','Montserrat',sans-serif; letter-spacing:.14em;
  color:var(--cyan, #22d3ee); white-space:nowrap;
  border-bottom:2px solid color-mix(in srgb, var(--cyan, #22d3ee) 35%, transparent);
  text-shadow:0 0 10px color-mix(in srgb, var(--cyan, #22d3ee) 55%, transparent);
}
.b2-svg { width:1.15em; height:1.15em; vertical-align:-0.2em; }

/* ---------- console page roots: fullscreen, zero scroll, slide+fade ----------
   Scoped #id.class (1,1,0) so this beats body.filter-* .panel rules (0,3,1)
   and the .panel card box (position/size/shadow/background). */
#filterPanel.filter-console,
#genPanel.gen-console,
#pokerPanel.hang-console {
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column;
  width:auto; max-height:none; margin:0;
  padding:max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing:border-box; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cyan, #22d3ee) 10%, transparent) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #05090f 0%, #030509 100%);
  border:0; border-radius:0; box-shadow:none;
  color:#e8f6ff;
  /* Batch E: 240ms slide+fade enter/exit — transform/opacity only. */
  transition:transform 240ms ease-out, opacity 240ms ease-out;
}
#filterPanel.filter-console::before,
#genPanel.gen-console::before,
#pokerPanel.hang-console::before { display:none; }
/* "Closed" keeps the class (JS still keys off it) but renders as an
   invisible, non-interactive, translated-away page — this is what makes
   the exit slide+fade possible. The poker override beats
   #pokerPanel.room.hidden{display:none} (1,3,0 > 1,2,0). */
#filterPanel.filter-console.hidden,
#genPanel.gen-console.hidden,
#pokerPanel.hang-console.hidden,
#pokerPanel.hang-console.room.hidden {
  display:flex !important; visibility:hidden; opacity:0;
  transform:translateX(6%); pointer-events:none;
}

/* ================= FILTER PICKER ================= */
#filterPanel.filter-console .filter-cards {
  display:flex; flex-direction:column; gap:6px; width:100%; margin:0;
}
#filterPanel.filter-console .filter-big { padding:7px 10px; gap:10px; margin:0; min-height:48px; }
#filterPanel.filter-console .filter-big .f-emoji img { width:26px; height:26px; }
#filterPanel.filter-console .filter-big .f-name { font-size:12px; }
#filterPanel.filter-console .filter-big .f-desc { font-size:10px; }
/* short landscape: 3-column card grid, compact cards — still zero scroll */
@media (orientation:landscape) and (max-height:540px) {
  #filterPanel.filter-console .filter-cards {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; align-content:start;
  }
  #filterPanel.filter-console .filter-big { padding:7px 9px; gap:8px; }
  #filterPanel.filter-console .filter-big .f-emoji img { width:24px; height:24px; }
  #filterPanel.filter-console .filter-big .f-name { font-size:11px; }
  #filterPanel.filter-console .filter-big .f-desc { font-size:9px; }
}

/* ================= CHARACTER GENERATOR ================= */
/* v1.22.54 kept .gen-sticky as the preview wrapper (test-pinned structure);
   with zero page scroll the sticky pin is a no-op — restyle as a static strip. */
#genPanel.gen-console .gen-sticky {
  position:static; flex:none;
  display:flex; align-items:center; gap:12px;
  margin:0 0 8px; padding:0; background:transparent; z-index:auto;
}
#genPanel.gen-console #genPreview { margin:0; flex:none; }
#genPanel.gen-console #genLore { margin:0; text-align:left; }
/* GEOMETRIC EXCEPTION (v1.24.76): 75+ controls + 15 mastery cards ≈ 1130px of
   legible content vs 502px available — no-scroll is impossible without tabs
   (behavior change) or illegible 28px controls. The chrome converts fully
   (console page, BACK, title, theme vars, slide+fade); the groups keep the
   ORIGINAL scroll behavior. Full-width groups with 4-across legible labels. */
#genPanel.gen-console .gen-groups {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; padding-bottom:4px;
}
#genPanel.gen-console .gen-group { flex:none; margin:0 0 10px; }
#genPanel.gen-console .gen-group > span {
  display:block; margin:0 0 6px;
  font:700 10px 'Orbitron','Montserrat',sans-serif; letter-spacing:.18em;
  color:color-mix(in srgb, var(--cyan, #22d3ee) 80%, #ffffff);
}
#genPanel.gen-console .gen-btns { display:flex; flex-wrap:wrap; gap:6px; }
#genPanel.gen-console .gen-btns:not(.swatches) button {
  flex:1 1 21%; min-height:36px; margin:0; padding:6px 8px;
  font:700 9px 'Orbitron','Montserrat',sans-serif; letter-spacing:.06em;
  white-space:normal; overflow:visible; line-height:1.25;
  /* v1.24.116: the batch-D2 chrome styled layout but left the base pink fill —
     option buttons go console (swatches keep their inline colors) */
  background:rgba(10,18,30,.7); background-image:none;
  border:1px solid color-mix(in srgb, var(--cyan, #22d3ee) 40%, transparent);
  border-radius:10px; color:#dff6ff;
  box-shadow:3px 3px 0 color-mix(in srgb, var(--cyan, #22d3ee) 60%, transparent);
}
#genPanel.gen-console #genStickers button { flex:1 1 21%; height:40px; font-size:18px; padding:0; }
#genPanel.gen-console #genAcc button { flex:1 1 44%; } /* lock icons + long names need room */
#genPanel.gen-console #genPresets button { flex:1 1 21%; }
/* CORE / GLOW: full-width rows — label + swatch strip + custom picker */
#genPanel.gen-console .gen-colors { display:flex; align-items:center; gap:8px; }
#genPanel.gen-console .gen-colors > span { margin:0; flex:none; }
#genPanel.gen-console .gen-colors .gen-btns { flex:1 1 auto; flex-wrap:nowrap; }
#genPanel.gen-console .gen-btns.swatches button {
  flex:1 1 0; min-width:0; height:36px; padding:0;
  border:2px solid #ffffff55;
}
#genPanel.gen-console .gen-colors input[type=color] {
  flex:none; width:44px; height:36px; margin:0; padding:2px;
  border:1px solid color-mix(in srgb, var(--cyan, #22d3ee) 40%, transparent);
  background:#05020b; cursor:pointer;
}
/* VISOR MASTERY: vrows stack — visor name + progress on top, 5 stage cards
   in a full-width row below (room for names). The micro intro line is hidden
   — vrows already state "N/5 stages complete". */
#genPanel.gen-console #visorMastery { margin-top:6px; }
#genPanel.gen-console #visorMastery > p.micro:first-child { display:none; }
#genPanel.gen-console #visorMastery .vrow { display:block; margin:4px 0; padding:6px 8px; }
#genPanel.gen-console #visorMastery .vrow > b { font-size:11px; }
#genPanel.gen-console #visorMastery .vrow > span { font-size:10px; margin:0 0 0 6px; }
#genPanel.gen-console #visorMastery .vstages { display:flex; gap:4px; margin-top:6px; }
#genPanel.gen-console #visorMastery .vstage { flex:1; min-width:0; padding:4px 2px; min-height:52px; }
#genPanel.gen-console #visorMastery .vstage b { font-size:12px; }
#genPanel.gen-console #visorMastery .vstage span { font-size:8px; }
#genPanel.gen-console #visorMastery .vstage i { font-size:9px; }
/* short landscape: preview docks left, groups flow in three columns */
@media (orientation:landscape) and (max-height:540px) {
  #genPanel.gen-console .b2-cbody { flex-direction:row; gap:12px; align-items:stretch; }
  #genPanel.gen-console .gen-sticky {
    flex-direction:column; align-items:center; justify-content:flex-start;
    margin:0; gap:8px;
  }
  #genPanel.gen-console #genLore { text-align:center; max-width:240px; }
  #genPanel.gen-console .gen-btns button { min-height:34px; }
  #genPanel.gen-console #genStickers button { height:38px; }
  #genPanel.gen-console .gen-btns.swatches button { height:34px; }
  #genPanel.gen-console .gen-colors input[type=color] { height:34px; }
}

/* ================= HANGOUT: POKER ================= */
/* The cinematic room canvas IS the page body — keep it visible behind the
   chrome (transparent layers over the art, never an opaque fill). */
#pokerPanel.hang-console { background:linear-gradient(180deg, #05090f 0%, #030509 100%); }
#pokerPanel.hang-console .b2-chead { margin-bottom:6px; }
/* tool row: ambiance / feed / help / convert — wraps, never overlaps */
#pokerPanel.hang-console .pk-tools {
  flex:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 6px; position:relative; z-index:2;
}
#pokerPanel.hang-console .pk-potline {
  flex:none; margin:0 0 4px; position:relative; z-index:2;
  font:700 11px 'Montserrat',Arial,sans-serif; letter-spacing:.18em; color:#cdeeff;
}
#pokerPanel.hang-console .pk-potline b { color:#fff; }
/* squad box glyphs (rendered by hangout.js): SVG shield/crown replace 🛡️/👑 */
.sq-shield, .sq-crown { width:1em; height:1em; vertical-align:-0.12em; }
.sq-leader { font-weight:700; }

/* ================================================================
   v1.24.132 — CONSOLE BATCH 132: "no old-looking panels left".
   This batch ships as the tail section of console-batchd2.css
   rather than a new file: the boot request budget (v1.24.127,
   guarded by the loadspeed tests) has no room for another eager
   stylesheet, and this section must sit after the earlier batches
   in the cascade anyway.
   Final sweep of the whole-game console conversion: every panel
   family that still wore the pre-console design language (legacy
   purple fills #17072d/#090414/#12041f/#0d061d/#120a22, legacy
   accent hexes #c470a0/#6ab8c4/#7df9ff/#66ccff, pink base-button
   fill leaking through classes that set no background, flat
   off-palette popups, hard-coded #00e5ff chrome that cannot
   follow the active filter theme) is restated in the console
   system: console body fill rgba(10,18,30,*), borders and glows
   in color-mix(var(--cyan)) so every converted panel follows the
   active filter theme, Orbitron console buttons with glow
   shadows. Chrome only — no layout, behavior, or text changes.
   Loads last; wins over the legacy rules it restates.
   ================================================================ */

/* ---- shared bottom-sheet (battle-pass converter + friend actions):
   purple gradient card and pink buttons -> console card + buttons.
   The sheet itself still stacked at z-index 60 — underneath the
   console panels (z 97xx) it opens from — so it rendered behind
   the Arsenal / Friends panels; it now stacks above them. */
body .sheet { z-index: 9850; }
.sheet-card {
  background: rgba(10, 18, 30, .96);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  border-radius: 18px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 18%, transparent), 0 24px 50px rgba(0, 0, 0, .55);
}
.sheet .sheet-close { color: #eafcff; }
/* Sheet buttons themselves were converted in v1.24.116 (ID-scoped
   #convertSheet / #friendSheet rules in style.css) — they keep that
   treatment; only the card and its close control were still old. */

/* ---- arsenal converter card: a bare button inside the (converted)
   arsenal panel — it wore the pink base fill and its label spans
   collided. Console chrome + the row layout its markup intends:
   balance block left, CONVERT action right, nothing overlapping. */
#arsenalPanel #arsenalConvert .conv-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; text-align: left; box-sizing: border-box;
  background: color-mix(in srgb, var(--cyan) 10%, rgba(10, 18, 30, .88));
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  border-radius: 12px; color: #eafcff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 22%, transparent);
}
#arsenalPanel #arsenalConvert .conv-bal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#arsenalPanel #arsenalConvert .conv-rate { font-size: 10px; letter-spacing: .06em; color: #9fd8e8; }
#arsenalPanel #arsenalConvert .conv-go {
  flex: none; font-family: 'Orbitron', 'Arial Black', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .1em; color: var(--cyan);
}

/* ---- poker help + win modals: flat purple card -> console card
   (the PLAY AGAIN card was converted in v1.24.110; these follow it). */
.pk-modal-card {
  background: rgba(10, 18, 30, .96);
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 18%, transparent), 0 18px 44px rgba(0, 0, 0, .5);
}

/* ---- chess sheets + rows + lobby buttons: purple fills and
   #7df9ff chrome -> console navy + theme cyan. Semantic accents
   (go green, danger rose, warn gold) keep their meaning. */
.chess-sheet {
  background: rgba(10, 18, 30, .97);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 20%, transparent), 0 18px 44px rgba(0, 0, 0, .5);
}
.chess-row {
  background: color-mix(in srgb, var(--cyan) 6%, rgba(10, 18, 30, .8));
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
}
.chess-btn {
  background: color-mix(in srgb, var(--cyan) 8%, rgba(10, 18, 30, .6));
  border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent);
  color: #cdeeff;
  box-shadow: none;
}
.chess-btn.go { background: rgba(57, 255, 136, .08); border-color: rgba(57, 255, 136, .55); color: #39ff88; }
.chess-btn.danger { background: rgba(255, 77, 109, .10); border-color: rgba(255, 77, 109, .55); color: #ff8fa5; }
.chess-btn.warn { background: rgba(255, 209, 102, .08); border-color: rgba(255, 209, 102, .6); color: #ffd166; }

/* ---- story intro card: purple gradient -> console card.
   Kicker/rule keep the story brand accents; the card chrome joins
   the console system and the kicker follows the filter theme. */
.story-card {
  background: rgba(10, 18, 30, .96);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--cyan) 22%, transparent), 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 60px color-mix(in srgb, var(--cyan) 5%, transparent);
}
.story-kicker { color: var(--cyan); }

/* ---- collection cards + detail popup: purple fill and grey
   borders -> console tints and theme borders. */
.cc-card { border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); }
.cc-detail-box {
  background: rgba(10, 18, 30, .97);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 20%, transparent), 0 18px 44px rgba(0, 0, 0, .5);
}
.cc-x { border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); color: #eafcff; }

/* ---- quest rows inside the (converted) quests shell:
   purple tint + legacy teal border -> console tint + theme border. */
.qrow {
  background: color-mix(in srgb, var(--cyan) 5%, rgba(10, 18, 30, .5));
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
}

/* ---- Boots FPS settings panel (both FPS hosts): hard-coded
   #00e5ff chrome -> var(--cyan), so the panel follows the active
   filter theme like every other console surface. */
.bfp-setpanel { border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 25%, transparent); }
.bfp-setpanel h3 { color: var(--cyan); text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent); }
.bfp-row { border-bottom: 1px solid color-mix(in srgb, var(--cyan) 14%, transparent); }
.bfp-seg { border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.bfp-seg button { color: color-mix(in srgb, var(--cyan) 75%, #ffffff); box-shadow: none; }
.bfp-seg button.on { background: var(--cyan); color: #04141a; box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent); }
.bfp-btn { border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); box-shadow: none; }

/* ---- chat emoji / reaction pickers: flat black boxes with
   hard-coded cyan borders -> console popups. */
.emoji-picker, .react-picker {
  background: rgba(10, 18, 30, .97);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 20%, transparent), 0 14px 34px rgba(0, 0, 0, .5);
}

/* ---- push nudge card: purple-gradient toast card -> console. */
#pushNudgeCard {
  background: rgba(10, 18, 30, .96);
  border-left: 3px solid var(--cyan);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 20%, transparent), 0 14px 34px rgba(0, 0, 0, .5);
}
.pn-go { background: var(--cyan); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 40%, transparent); }

/* ---- toasts: legacy purple fill -> console fill. Per-toast
   accent borders (quest green, collection gold) are separate
   rules and keep their meaning; only the shared fill and the
   plain toast's legacy-rose border change. The main toast wears
   the comic speech-bubble skin (#toast.comic): its borders and
   glow already follow the theme, so only the purple fill and
   the matching bubble tail change. */
#toast, #questToast, #collectToast { background: rgba(10, 18, 30, .95); }
#toast { border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 25%, transparent); }
#toast.comic { background: rgba(10, 18, 30, .95); }
#toast.comic::after, #toast.comic.show-win::after, #toast.comic.show-reconnect::after { background: rgb(10, 18, 30); }

/* ---- Options admin player rows: purple fill + legacy-rose
   border -> console row treatment. */
.admin-player {
  background: color-mix(in srgb, var(--cyan) 5%, rgba(10, 18, 30, .8));
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
}

/* ---- friend panel inners: squad box + invite banner. */
.squad-box { background: rgba(10, 18, 30, .55); border: 1px solid color-mix(in srgb, var(--cyan) 25%, transparent); }
.sq-head { color: var(--cyan); font-family: 'Orbitron', 'Arial Black', sans-serif; }
.invite-banner {
  background: color-mix(in srgb, #39ff88 8%, rgba(10, 18, 30, .6));
  border: 1px solid color-mix(in srgb, #39ff88 35%, transparent);
}
.invite-banner button { border-radius: 10px; box-shadow: none; }

/* ---- Boots lobby cards + loadout slots: legacy purple fill and
   legacy-teal dashed borders -> console. */
.boots-card {
  background: rgba(10, 18, 30, .88);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
}
.boots-slot { border: 1px dashed color-mix(in srgb, var(--cyan) 35%, transparent); }
.boots-slot.filled { background: color-mix(in srgb, var(--cyan) 7%, transparent); }

/* ---- menu-search friend rows: legacy-teal chrome -> console. */
.menu-search-friend { border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent); }
.menu-search-friend .msf-ava { border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); color: var(--cyan); }
.menu-search-empty { color: #8fb8c8; }

/* ---- chat log well: magenta-tinted border -> console border. */
.chat-log { border: 1px solid color-mix(in srgb, var(--cyan) 16%, transparent); }

/* ---- character-generator buttons: solid hard offset shadow ->
   the console primary form (color-mix 55%), matching the story
   CONTINUE treatment from v1.24.116. */
.gen-btns button { box-shadow: 3px 3px 0 color-mix(in srgb, var(--cyan) 55%, transparent); }

/* ================= v1.24.139 — BUTTON LAW, APP-WIDE =================
   The Bible's law (1.24.138) leaves the Bible: chrome buttons are
   small custom-drawn symbols only. Back = lone chevron, close = x.
   This section carries the shared symbol-button form and wins over
   the older pill rules (it loads last among the general sheets). */

/* The shared back button: a 40px square, glyph only. */
.nn-dash-back,
.bb-chead .nn-dash-back,
.batchc-chead .nn-dash-back {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; letter-spacing: 0; text-indent: 0;
  border-radius: 10px;
}
.nn-dash-back svg { width: 20px; height: 20px; display: block; }

/* Generic symbol button form for converted chrome. Original classes
   keep their colors/borders; this fixes the box to the symbol size. */
.nn-symbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; width: 40px; height: 40px;
  padding: 0; line-height: 1; flex: none;
}
.nn-symbtn svg { width: 20px; height: 20px; display: block; }
.nn-symbtn.nn-wide { width: auto; min-width: 40px; padding: 0 12px; }

/* Wide ghost pills that were backs become small chevrons, left-set. */
.ghost.wide.nn-backbtn {
  width: 40px; min-width: 40px; max-width: 40px; height: 40px;
  min-height: 40px; padding: 0; margin-right: auto;
  font-size: 20px; letter-spacing: 0; text-indent: 0;
}
.ghost.wide.nn-backbtn svg { width: 20px; height: 20px; display: block; }

/* Boots FPS settings close (was the word CLOSE). */
.bfp-setx.nn-symbtn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
.bfp-setx.nn-symbtn svg { width: 18px; height: 18px; }

/* Reader single-translation label sits in the tools row. */
.bible-reader .br-vernote { align-self: center; }