/* Dice & Dominion — pixel battle HUD (client/js/battleView.js + client/js/dnd_battle.js + castflow.js).
   Same tokens as the pixel home (dnd_home.css) and hero builder (dnd_builder.css): umber panels, ink outlines,
   bevelled rims, Jersey 15 headings, Inter body text. Everything is scoped to D&D battles so other worlds' HUDs are untouched. */
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

body[data-world=dnd][data-screen=battle] {
  --px-ink: #120d09; --px-panel: #2a221b; --px-panel2: #231c15; --px-card: #1c1611; --px-rim: #7a5c36; --px-rim-hi: #a8824c;
  --px-line: #3a3025; --px-line2: #574735; --px-text: #f1e6cc; --px-muted: #bba98a; --px-dim: #8c7e68;
  --px-gold: #f0c060; --px-gold-hi: #f6e2b0; --px-blue: #3e68b0; --px-blue-hi: #6a9ae0; --px-green: #8fd06a; --px-red: #e0664a;
  --px-head: 'Jersey 15', 'Inter', sans-serif;
  --px-clip: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
  --px-btn: linear-gradient(#4a3c2c 0 50%, #40342a 50%); --px-btn-h: linear-gradient(#5a4834 0 50%, #4c3e30 50%);
  --px-btn-sh: inset 0 2px 0 rgba(255, 240, 200, .14), inset 0 -3px 0 rgba(0, 0, 0, .35);
  --px-pri: linear-gradient(#e2b04a 0 50%, #cf9a36 50%); --px-pri-h: linear-gradient(#f0c060 0 50%, #dca844 50%);
  --px-on: linear-gradient(#3e68b0 0 50%, #355c9e 50%);
  --px-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23120d09' d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%237a5c36' d='M1 1h10v10H1z'/%3E%3Cpath fill='%23a8824c' d='M2 1h8v1H2zM1 2h1v8H1z'/%3E%3Cpath fill='%23503a22' d='M2 10h8v1H2zM10 2h1v8h-1z'/%3E%3Cpath fill='%23120d09' d='M2 2h8v1H2zM2 9h8v1H2zM2 2h1v8H2zM9 2h1v8H9z'/%3E%3Cpath fill='%232a221b' d='M3 3h6v6H3z'/%3E%3C/svg%3E") 4 fill / 8px / 0 stretch;
  --gold: var(--px-gold);
  & #app { background: #16120f; }

  /* ------------------------------------------------------------ shared pieces: buttons, fields, scrollbars */
  & .battle .btn, & .castflow .btn {
    background: var(--px-btn); border: 2px solid var(--px-ink); border-radius: 0; box-shadow: var(--px-btn-sh); clip-path: var(--px-clip);
    color: var(--px-text); font: 600 12.5px/1.2 var(--font); padding: 6px 11px;
  }
  & .battle .btn:hover:not(:disabled), & .castflow .btn:hover:not(:disabled) { background: var(--px-btn-h); border-color: var(--px-ink); }
  & .battle .btn:active:not(:disabled), & .castflow .btn:active:not(:disabled) { transform: none; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); }
  & .battle .btn.sm, & .castflow .btn.sm { padding: 4px 8px; font-size: 12px; }
  & .battle .btn.primary, & .castflow .btn.primary { background: var(--px-pri); color: #1e1408; }
  & .battle .btn.primary:hover:not(:disabled), & .castflow .btn.primary:hover:not(:disabled) { background: var(--px-pri-h); }
  & .battle .btn.on, & .castflow .btn.on { background: var(--px-on); color: #fff; }
  & .battle .btn.danger { background: linear-gradient(#6a2a1e 0 50%, #5a2218 50%); color: #ffd0c4; }
  & .battle .btn.ghost { background: transparent; box-shadow: none; }
  & .battle input[type=text], & .battle input[type=search], & .battle select {
    background: var(--px-card); border: 2px solid var(--px-ink); border-radius: 0; box-shadow: inset 0 0 0 1px #3a2e22; color: var(--px-text); font: 500 13px var(--font);
  }
  & .battle input:focus, & .battle select:focus { box-shadow: inset 0 0 0 1px var(--px-gold); }
  & .battle * { scrollbar-color: #574735 transparent; scrollbar-width: thin; }

  /* ------------------------------------------------------------ layout */
  & .battle { background: #16120f; grid-template-columns: 284px 1fr 320px; }
  & .battle.log-hidden { grid-template-columns: 284px 1fr 0; }
  & .b-top {
    min-height: 58px; padding: 5px 10px; gap: 10px; background: linear-gradient(#2e251d 0 50%, #282019 50%);
    border-bottom: 2px solid var(--px-ink); box-shadow: inset 0 -2px 0 #4a3a28, 0 2px 0 rgba(0, 0, 0, .3); position: relative; z-index: 5;
  }
  & .b-left, & .b-right { background: #1f1913; }
  & .b-left { border-right: 2px solid var(--px-ink); box-shadow: inset -2px 0 0 #3a2e22; padding: 8px 10px; }
  & .b-right { border-left: 2px solid var(--px-ink); box-shadow: inset 2px 0 0 #3a2e22; }
  & .b-center { background: #16120f; }
  & .b-bottom {
    padding: 6px 10px 8px; min-height: 0; background: linear-gradient(#2e251d 0 50%, #282019 50%);
    border-top: 2px solid var(--px-ink); box-shadow: inset 0 2px 0 #4a3a28, 0 -2px 0 rgba(0, 0, 0, .3); position: relative; z-index: 5;
  }

  /* ------------------------------------------------------------ top bar: round + turn order */
  & .b-round { font: 400 26px/1 var(--px-head) !important; color: var(--px-gold-hi) !important; letter-spacing: .02em;
    text-shadow: 2px 0 0 var(--px-ink), -2px 0 0 var(--px-ink), 0 2px 0 var(--px-ink), 0 -2px 0 var(--px-ink), 0 3px 0 #6a4a20; }
  & #b-theme { font-size: 11px; color: var(--px-muted); margin-top: 2px; }
  & .initiative { gap: 5px; align-items: center; padding: 2px 2px 4px; scrollbar-width: none; }
  & .init-chip {
    width: 52px; padding: 3px 2px 4px; border-radius: 0; background: var(--px-card); border: 2px solid var(--px-ink);
    box-shadow: inset 0 0 0 1px #4a3a28; clip-path: var(--px-clip); font: 600 10.5px/1.2 var(--font); color: var(--px-text);
  }
  & .init-chip:hover { box-shadow: inset 0 0 0 1px var(--px-rim-hi); }
  & .init-chip.cur { border-color: var(--px-ink); box-shadow: inset 0 0 0 2px var(--px-gold); background: #2e2614; transform: translateY(-1px); }
  & .init-chip.acting { box-shadow: inset 0 0 0 2px #8a7030; }
  & .init-chip.done { opacity: .5; }
  & .init-chip.done::after { top: 2px; right: 3px; width: 13px; height: 13px; display: grid; place-items: center; font: 700 9px/1 var(--font); color: #dfffd0; background: #3e7a3a; border: 2px solid var(--px-ink); }
  & .init-chip.dead { opacity: .35; filter: grayscale(1); }
  & .init-chip .ic { width: 34px; height: 34px; margin: 0 auto 2px; border-radius: 0; border-width: 2px; }
  & .init-chip .ic.px { width: 40px; height: 40px; box-sizing: border-box; border: 2px solid var(--px-ink); overflow: hidden; background: linear-gradient(#26324a 0 70%, #3a4a28 70% 76%, #2e3a20 76%); }
  & .init-chip .ic.px.enemy { background: linear-gradient(#4a2626 0 70%, #4a3a28 70% 76%, #3a2e20 76%); }
  & .init-chip .ic.px img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
  & .init-chip .hpb { height: 4px; margin: 2px 3px 0; border-radius: 0; background: var(--px-ink); }
  & .init-sep { font: 400 15px/1 var(--px-head); color: var(--px-muted); letter-spacing: .04em; padding: 0 6px; }
  & .init-sep.party { color: #9ec0f0; }
  & .init-sep.enemy { color: #f0a090; }
  & #b-retreat { font: 400 17px/1 var(--px-head); padding: 6px 12px; }

  /* ------------------------------------------------------------ left: the inspected unit */
  & .sheet-quick { gap: 3px; margin-bottom: 6px; }
  & .sheet-quick .btn { font: 400 15px/1 var(--px-head); padding: 4px 9px; }
  & .unit-avatar { margin: 0 0 6px; border: 8px solid transparent; border-image: var(--px-frame); image-rendering: pixelated; border-radius: 0; background: none; }
  & .unit-avatar canvas { background: linear-gradient(#26324a 0 66%, #3a4a28 66% 72%, #2e3a20 72%); image-rendering: pixelated; }
  & .unit-avatar.enemy canvas { background: linear-gradient(#3a2228 0 66%, #4a3a28 66% 72%, #3a2e20 72%); }
  & .ua-state { border-radius: 0 !important; border: 2px solid var(--px-ink) !important; font: 400 14px/1 var(--px-head) !important; padding: 2px 6px !important; }
  & .unit-panel h3 { font: 400 26px/1 var(--px-head); color: var(--px-gold-hi); letter-spacing: .01em; margin-top: 2px; text-shadow: 0 2px 0 #000; }
  & .unit-panel .tiny.muted { color: var(--px-muted); }
  & .ua-conds .eff, & .eff { border-radius: 0; border-width: 2px; border-color: var(--px-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); backdrop-filter: none; }
  & .ua-conds .eff.good { background: #22381c; }
  & .ua-conds .eff.bad { background: #3e1a14; }
  & .ua-conds .eff.conc { background: #2e1f4a; color: #e2ccff; border-color: var(--px-ink); }
  & .conc-x { border-radius: 0; border: 2px solid var(--px-ink); }
  & .hpline { height: 12px; border-radius: 0; border: 2px solid var(--px-ink); background: #120d09; margin: 6px 0 3px; }
  & .hpline > div:first-child { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .25); }
  & .unit-panel > .row.small b { font-weight: 700; }
  & .sheet-tabs { margin: 8px 0 0; border-bottom: 2px solid var(--px-line); gap: 0; }
  & .sheet-tabs div { flex: 1; font: 400 17px/1 var(--px-head); color: var(--px-dim); padding: 6px 2px 7px; margin-bottom: -2px; border: 2px solid transparent; border-bottom: 0; box-shadow: none; }
  & .sheet-tabs div:hover { color: var(--px-text); }
  & .sheet-tabs div.on { color: var(--px-gold); background: var(--px-panel2); border-color: var(--px-line); border-bottom: 2px solid var(--px-panel2); box-shadow: none; }
  & .sheet-body { padding: 8px 2px 4px; }
  & .sheet-body h4 { font: 400 18px/1.1 var(--px-head); color: var(--px-gold); letter-spacing: .01em; margin: 12px 0 5px; }
  & .sheet-body h4 .tiny { font-family: var(--font); }
  & .sheet-item { border-bottom: 1px solid #2a2219; }
  & .abil-grid { gap: 4px; }
  & .abil { background: var(--px-card); border: 2px solid var(--px-ink); border-radius: 0; box-shadow: inset 0 0 0 1px #3a2e22; padding: 3px 2px 4px; }
  & .abil.prof { border-color: var(--px-ink); box-shadow: inset 0 0 0 2px #8a7030; }
  & .abil .k { font: 400 14px/1 var(--px-head); color: var(--px-muted); letter-spacing: .06em; }
  & .abil .v { font: 400 22px/1 var(--px-head); color: var(--px-text); }
  & .kv.uses { background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; padding: 6px 8px; }
  & .kv.uses .n b { color: var(--px-gold); }
  & .pip { border-radius: 0; width: 8px; height: 8px; border: 2px solid var(--px-ink); background: #2a2240; }
  & .pip.full { background: #b48cff; }
  & #b-auto { font: 400 17px/1 var(--px-head); padding: 7px 10px; }

  /* ------------------------------------------------------------ right: log & chat */
  & .log-tabs { border-bottom: 2px solid var(--px-line); padding: 6px 6px 0; gap: 2px; background: #1a1511; }
  & .log-tabs div { font: 400 18px/1 var(--px-head); color: var(--px-dim); padding: 6px 8px 8px; margin-bottom: -2px; border: 2px solid transparent; border-bottom: 0; box-shadow: none; }
  & .log-tabs div.on { color: var(--px-gold); background: #1f1913; border-color: var(--px-line); border-bottom: 2px solid #1f1913; box-shadow: none; }
  & .log-tabs .log-hide { flex: none; }
  & .log { font-size: 12.5px; line-height: 1.5; padding: 8px 10px; }
  & .log div { border-bottom: 1px solid #2a2219; }
  & .log .sys { font: 400 17px/1.15 var(--px-head); color: var(--px-gold); letter-spacing: .01em; padding: 6px 0; text-transform: none; }
  & .chat-input { padding: 6px; gap: 4px; border-top: 2px solid var(--px-line); }
  & .log-show { font: 400 17px/1 var(--px-head); }
  & .log-show .badge { border-radius: 0; border: 2px solid var(--px-ink); background: var(--px-red); }

  /* ------------------------------------------------------------ the map overlays */
  & .turn-banner {
    top: 10px; padding: 5px 16px 6px; border-radius: 0; background: rgba(42, 34, 27, .94); border: 2px solid var(--px-ink);
    box-shadow: inset 0 0 0 2px var(--px-rim), 0 4px 0 rgba(0, 0, 0, .35); font: 400 21px/1 var(--px-head); color: var(--px-text); letter-spacing: .02em; clip-path: none;
    max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis;
  }
  & .turn-banner.mine { color: var(--px-gold-hi); box-shadow: inset 0 0 0 2px var(--px-gold), 0 4px 0 rgba(0, 0, 0, .35); border-color: var(--px-ink); }
  & .hint { border-radius: 0; background: rgba(28, 22, 17, .92); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; color: var(--px-text); font: 500 12px var(--font); bottom: 12px; }
  & .cam-ctrl { gap: 3px; right: 10px; top: 10px; }
  & .cam-ctrl .btn { width: 34px; height: 32px; padding: 0; font: 700 15px/1 var(--font); display: grid; place-items: center; }
  & .tooltip { border-radius: 0; background: rgba(28, 22, 17, .97); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28, 0 4px 0 rgba(0, 0, 0, .4); color: var(--px-text); }
  & .tooltip b:first-child { font: 400 18px/1 var(--px-head); letter-spacing: .01em; }
  & .odds { font-weight: 700; }
  & .odds.good { color: #b8f090; }
  & .odds.mid { color: var(--px-gold); }
  & .odds.bad { color: #ffa48c; }
  & .end-overlay h1 { font: 400 72px/1 var(--px-head); letter-spacing: .04em; text-shadow: 4px 0 0 var(--px-ink), -4px 0 0 var(--px-ink), 0 4px 0 var(--px-ink), 0 -4px 0 var(--px-ink), 0 8px 0 rgba(0, 0, 0, .5); }
  & .reveal-banner { border-radius: 0 !important; }
  & .cleared-bar { font: 400 18px/1 var(--px-head); }
  & .hover-card { border-radius: 0; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28, 0 6px 0 rgba(0, 0, 0, .4); color: var(--px-text); }
  & .hover-card .hc-name { font: 400 21px/1 var(--px-head); color: var(--px-gold-hi); }

  /* ------------------------------------------------------------ the cast confirmation */
  & .castflow { border-radius: 0; background: none; border: 8px solid transparent; border-image: var(--px-frame); image-rendering: auto; box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); padding: 4px 6px; color: var(--px-text); min-width: 340px; }
  & .castflow .cf-head { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid var(--px-ink); box-shadow: 0 2px 0 #4a3a28; }
  & .castflow .cf-head b { font: 400 24px/1 var(--px-head); color: var(--px-gold-hi); letter-spacing: .01em; }
  & .cf-odds { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; }
  & .cf-odd { display: grid; grid-template-columns: 58px auto 1fr; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; font-size: 12.5px; }
  & .cf-odd.none { display: block; color: var(--px-muted); padding: 5px 8px; }
  & .cf-pct { font: 400 24px/1 var(--px-head); text-align: center; padding: 2px 0 3px; border: 2px solid var(--px-ink); }
  & .cf-odd.good .cf-pct { background: #1f3a1a; color: #b8f090; }
  & .cf-odd.mid .cf-pct { background: #3e3214; color: var(--px-gold); }
  & .cf-odd.bad .cf-pct { background: #3e1a14; color: #ffa48c; }
  & .cf-on { font-weight: 700; white-space: nowrap; }
  & .cf-on i { font-style: normal; font-size: 11px; color: #9ec0f0; }
  & .cf-odd.ally { box-shadow: inset 0 0 0 1px #3e68b0; }
  & .cf-why { color: var(--px-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .cf-grp { border-radius: 0; border-width: 2px; }
  & .cf-grp.on { border-color: var(--px-gold); background: rgba(240, 192, 96, .1); }
  & .cf-lv { font: 400 16px/1 var(--px-head); color: var(--px-muted); }
  & .cf-bub { border-radius: 2px; border: 2px solid var(--px-ink); background: linear-gradient(#c8b0ff 0 50%, #9a78f0 50%); width: 16px; height: 16px; }
  & .cf-bub.spent { background: #241e30; border-color: #3a3050; }
  & .cf-bub.sel { box-shadow: 0 0 0 2px var(--px-gold), 0 0 10px 2px rgba(240, 192, 96, .7); }
  & .cf-preview { color: var(--px-muted); }
  & .cf-preview.up { color: var(--px-gold); }
  & .cf-note { color: var(--px-muted); }
  & .cf-foot { border-top: 2px solid var(--px-ink); box-shadow: inset 0 2px 0 #4a3a28; padding-top: 8px; }
  & .cf-foot .btn, & .cf-foot .btn.sm { font: 400 17px/1 var(--px-head); padding: 6px 12px; }
  & .cf-foot .btn .tiny { font: 600 10px var(--font); opacity: .75; }

  /* ------------------------------------------------------------ bottom bar */
  & .bb { display: flex; flex-direction: column; gap: 6px; }
  & .bb-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  & .bb-left { flex: 0 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 360px; }
  & .bb-econ { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
  & .bpip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 5px; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; font: 400 16px/1 var(--px-head); color: var(--px-dim); }
  & .bpip i { width: 10px; height: 10px; border: 2px solid var(--px-ink); background: #2a2219; }
  & .bpip.full { color: var(--px-text); }
  & .bpip.action.full i { background: #7ad070; box-shadow: inset 0 -2px 0 #3e8a3a; }
  & .bpip.bonus.full i { background: #f0c060; box-shadow: inset 0 -2px 0 #a07020; }
  & .bpip.react.full i { background: #b48cff; box-shadow: inset 0 -2px 0 #6a48b0; }
  & .bpip.action.full { box-shadow: inset 0 0 0 1px #3e6a32; }
  & .bpip.bonus.full { box-shadow: inset 0 0 0 1px #7a5a20; }
  & .bpip.mv { color: var(--px-text); }
  & .bpip.mv b { font-weight: 400; color: #9ec0f0; font-size: 18px; }
  & .econ-slots { display: inline-flex; gap: 3px; cursor: pointer; padding: 3px 5px; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; }
  & .econ-slots:hover { box-shadow: inset 0 0 0 1px #b48cff; }
  & .econ-slots .es { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border: 0; background: none; }
  & .econ-slots .es b { font: 400 15px/1 var(--px-head); color: #d6c2ff; margin-right: 1px; }
  & .econ-slots .es i { width: 7px; height: 9px; border-radius: 0; border: 1px solid var(--px-ink); background: #2a2240; }
  & .econ-slots .es i.full { background: #b48cff; }
  & .econ-slots .es.empty b { color: #6a6080; }
  & .bb-explore, & .bb-armed { align-self: flex-start; font: 600 11px/1 var(--font); padding: 4px 7px; border: 2px solid var(--px-ink); }
  & .bb-explore { background: #22381c; color: #c8f0b0; }
  & .bb-armed { background: #4a3a14; color: var(--px-gold); }
  & .bb-wait { font-size: 12.5px; color: var(--px-muted); max-width: 340px; }
  & .bb-wait b { color: var(--px-text); }
  & .bb-hot { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: visible; padding: 2px 0; }
  & .bb.waiting .bb-hot { opacity: .5; filter: grayscale(.5); }
  & .bb-btns { flex: none; display: flex; align-items: center; gap: 5px; }
  & .bbtn {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 70px; height: 58px; padding: 4px 10px;
    cursor: pointer; color: var(--px-text); background: var(--px-btn); border: 2px solid var(--px-ink); box-shadow: var(--px-btn-sh); clip-path: var(--px-clip);
  }
  & .bbtn b { font: 400 19px/1 var(--px-head); font-weight: 400; letter-spacing: .01em; }
  & .bbtn kbd { position: absolute; top: 3px; right: 4px; font: 600 9px/1 var(--font); color: var(--px-muted); }
  & .bbtn:hover:not(:disabled) { background: var(--px-btn-h); }
  & .bbtn:active:not(:disabled) { box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); }
  & .bbtn.on { background: var(--px-on); color: #fff; }
  & .bbtn.on kbd { color: #cfe0ff; }
  & .bbtn:disabled { opacity: .45; cursor: not-allowed; }
  & #a-end.bbtn, & .bbtn.end { height: 58px; flex-direction: column; }
  & .bbtn.end { min-width: 112px; color: #1e1408; background: var(--px-pri); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .3); }
  & .bbtn.end b { font-size: 22px; }
  & .bbtn.end kbd { color: #5a4010; }
  & .bbtn.end:hover:not(:disabled) { background: var(--px-pri-h); }
  & .bbtn.end.calm { background: var(--px-btn); color: var(--px-text); }
  & .bbtn.end.glow { animation: bb-glow 1s steps(2) infinite; }
  & .bbtn.ping { color: #2a1d2e; background: #fbf3dc; }
  & .bbtn.ping:hover:not(:disabled) { background: #fff8e6; }
  & .bbtn.ping kbd { color: #8a6a4a; }
  @keyframes bb-glow { 50% { background: linear-gradient(#ffd878 0 50%, #f0b848 50%); transform: translateY(-2px); } }
  & .bpx-ico { display: inline-block; width: 22px; height: 22px; flex: none; }
  & .bpx-ico svg { width: 100%; height: 100%; display: block; }
  & .bb-cmd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font: 400 15px/1 var(--px-head); color: var(--px-muted); }
  & .bb-who { font: 400 16px/1 var(--px-head); padding: 4px 9px; cursor: pointer; color: var(--px-text); background: var(--px-card); border: 2px solid var(--px-ink); clip-path: var(--px-clip); }
  & .bb-who.on { background: var(--px-on); color: #fff; }
  & .bb-who.done { color: var(--px-muted); }
  & .bb-btns .btn, & .bb-btns .btn.sm { font: 400 16px/1 var(--px-head); padding: 7px 10px; }

  /* the hotbar, pixel dress (bar and menu) */
  & .bb .hotbar, & .bm .hotbar { margin: 0; gap: 4px; }
  & .bb-hot .hotbar { flex-wrap: nowrap; }
  & .bb .hotbar .hb-slot, & .bm .hotbar .hb-slot {
    width: 132px; height: 52px; padding: 3px 6px 3px 50px; border-radius: 0; background: var(--px-card); border: 2px solid var(--px-ink);
    box-shadow: inset 0 0 0 2px #3e3022; clip-path: var(--px-clip); transition: none;
  }
  & .bb .hotbar .hb-slot .hb-ico, & .bm .hotbar .hb-slot .hb-ico { left: 4px; top: 4px; width: 40px; height: 40px; inset: 4px auto auto 4px; border-radius: 0; box-shadow: 0 0 0 2px var(--px-ink); }
  & .bb .hotbar .hb-slot .hb-ico svg, & .bm .hotbar .hb-slot .hb-ico svg { width: 40px; height: 40px; }
  & .bb .hotbar .hb-slot .hb-key, & .bm .hotbar .hb-slot .hb-key { font: 400 15px/1 var(--px-head); top: 1px; left: 5px; color: #fff; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
  & .bb .hotbar .hb-slot .hb-name, & .bm .hotbar .hb-slot .hb-name { font: 600 11.5px/1.15 var(--font); color: var(--px-text); }
  & .bb .hotbar .hb-slot .hb-lv, & .bm .hotbar .hb-slot .hb-lv { font: 400 13px/1 var(--px-head); color: var(--px-muted); letter-spacing: .02em; }
  & .bb .hotbar .hb-slot:hover:not(.off):not(.empty), & .bm .hotbar .hb-slot:hover:not(.off):not(.empty) { transform: none; box-shadow: inset 0 0 0 2px var(--px-rim-hi); border-color: var(--px-ink); }
  & .bb .hotbar .hb-slot.on, & .bm .hotbar .hb-slot.on { box-shadow: inset 0 0 0 2px var(--px-gold); background: #2e2614; border-color: var(--px-ink); }
  & .bb .hotbar .hb-slot.recast, & .bm .hotbar .hb-slot.recast { background: #1a2238; box-shadow: inset 0 0 0 2px #3e68b0; }
  & .hb-pop { border-radius: 0; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 2px var(--px-gold), 0 6px 0 rgba(0, 0, 0, .4); }
  & .hb-pop::after { border-top-color: var(--px-ink); }
  & .hb-edit { border-radius: 0 !important; border: 2px dashed var(--px-line2) !important; background: transparent !important; color: var(--px-muted) !important; font: 400 16px/1 var(--px-head) !important; clip-path: none; }
  & .hb-edit:hover { color: var(--px-gold) !important; border-color: var(--px-gold) !important; }
  & .hotbar.empty .hb-edit { height: 52px; padding: 0 14px; }
  & .bb .hb-edit, & .bm .hb-edit { flex: none; white-space: nowrap; }

  /* ------------------------------------------------------------ the Actions menu (Space) */
  & .bm-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(12, 9, 7, .55); }
  & .bm {
    position: fixed; z-index: 951; left: 50%; top: 66px; transform: translateX(-50%); width: min(1040px, calc(100vw - 24px)); height: min(660px, calc(100vh - 160px)); min-height: 300px;
    display: flex; flex-direction: column; border: 8px solid transparent; border-image: var(--px-frame); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)); color: var(--px-text);
  }
  & .bm-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; flex-wrap: wrap; }
  & .bm-title { font: 400 32px/1 var(--px-head); color: var(--px-gold-hi); text-shadow: 0 2px 0 #000; }
  & .bm-who { font: 400 20px/1 var(--px-head); color: var(--px-muted); margin-right: 4px; }
  & .bm-head .bb-econ { flex-wrap: nowrap; }
  & .bm-kbd { font: 600 10px/1 var(--font); color: var(--px-muted); padding: 4px 6px; border: 2px solid var(--px-ink); background: var(--px-card); }
  & .bm-x { flex: none; width: 30px; height: 30px; cursor: pointer; color: var(--px-text); background: #3a2e24; border: 2px solid var(--px-ink); font: 700 13px/1 var(--font); clip-path: var(--px-clip); }
  & .bm-x:hover { background: #8a3a22; }
  & .bm-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--px-line); padding: 0 4px; overflow-x: auto; scrollbar-width: none; flex: none; }
  & .bm-tab { font: 400 21px/1 var(--px-head); padding: 7px 16px 9px; margin-bottom: -2px; border: 2px solid transparent; border-bottom: 0; background: transparent; color: var(--px-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  & .bm-tab:hover { color: var(--px-text); }
  & .bm-tab.on { color: var(--px-gold); background: var(--px-panel2); border-color: var(--px-line); border-bottom: 2px solid var(--px-panel2); text-shadow: 0 2px 0 #000; }
  & .bm-tab em { font: 600 11px/1 var(--font); font-style: normal; padding: 2px 6px; background: #2a2219; color: var(--px-muted); border: 1px solid var(--px-ink); text-shadow: none; }
  & .bm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 4px; background: var(--px-panel2); flex: none; }
  & .bm-search { flex: 1 1 200px; max-width: 320px; padding: 6px 9px; }
  & .bm-chips { display: inline-flex; gap: 0; }
  & .bm-chip { font: 400 17px/1 var(--px-head); padding: 5px 11px; cursor: pointer; color: var(--px-muted); background: var(--px-card); border: 2px solid var(--px-ink); margin-left: -2px; }
  & .bm-chip:first-child { margin-left: 0; }
  & .bm-chip:hover { color: var(--px-text); }
  & .bm-chip.on { background: var(--px-on); color: #fff; }
  & .bm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 6px 10px 4px; background: var(--px-panel2); }
  & .bm-hide { display: none !important; }
  & .bm-empty { padding: 26px 10px; text-align: center; color: var(--px-muted); font-size: 13.5px; line-height: 1.8; }
  & .bm-empty.hidden { display: none; }
  & .bm-note, & .bm-sub { font-size: 12px; color: var(--px-muted); margin: 8px 2px; }
  & .bm-sub { margin-top: 0; }
  & .bm-h { font: 400 20px/1 var(--px-head); color: var(--px-gold); margin: 4px 2px 8px; }
  & .bm-h + .submenu, & .bm-h + .spell-board { margin-bottom: 14px; }
  & .bm-mods { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 8px; margin-bottom: 10px; background: var(--px-card); border: 2px solid var(--px-ink); font-size: 12.5px; }
  & .bm-hot .hotbar { flex-wrap: wrap; }
  & .bm-hot .hotbar .hb-slot { width: 196px; height: 64px; padding-left: 62px; }
  & .bm-hot .hotbar .hb-slot .hb-ico { width: 52px; height: 52px; }
  & .bm-hot .hotbar .hb-slot .hb-ico svg { width: 52px; height: 52px; }
  & .bm-hot .hotbar .hb-slot .hb-name { font-size: 13px; }
  & .bm-hot .hotbar .hb-edit { height: 64px; }
  /* class abilities / moves / potions: the old dropdown list as a card grid */
  & .bm .submenu { position: static; width: auto; max-width: none; max-height: none; overflow: visible; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
  & .bm .sp-row { align-items: flex-start; padding: 8px 10px 8px 8px; border-radius: 0; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; }
  & .bm .sp-row:hover:not(.disabled) { background: #2a2116; border-color: var(--px-ink); box-shadow: inset 0 0 0 2px var(--px-rim-hi); }
  & .bm .sp-row .sp-ico, & .bm .sp-row .bpx-ico { flex: none; width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--px-ink); }
  & .bm .sp-row b { font: 400 19px/1.05 var(--px-head); color: var(--px-gold-hi); letter-spacing: .01em; }
  & .bm .sp-row .tiny.muted { font-size: 11.5px; line-height: 1.4; margin-top: 2px; color: var(--px-muted); }
  & .bm .sp-row .cost { flex: none; font: 400 14px/1 var(--px-head); padding: 2px 6px; background: #3a2e24; color: var(--px-text); border: 2px solid var(--px-ink); }
  & .bm .sp-row .btn.sm { font: 400 15px/1 var(--px-head); }
  /* attacks */
  & .bm-grid.atk { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
  & .bm-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; cursor: pointer; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; }
  & .bm-card:hover:not(.disabled) { background: #2a2116; box-shadow: inset 0 0 0 2px var(--px-rim-hi); }
  & .bm-card.disabled { opacity: .45; cursor: not-allowed; }
  & .bm-card-h { display: flex; align-items: center; gap: 8px; }
  & .bm-card-h b { flex: 1; font: 400 21px/1 var(--px-head); color: var(--px-gold-hi); }
  & .bm-card-h .bm-ico { flex: none; box-shadow: 0 0 0 2px var(--px-ink); }
  & .bm-tag { font: 600 10px/1 var(--font); padding: 3px 5px; border: 2px solid var(--px-ink); background: #3a2e24; }
  & .bm-tag.gold { background: #4a3a14; color: var(--px-gold); }
  & .bm-stats { display: flex; gap: 16px; }
  & .bm-stats span { display: flex; flex-direction: column; }
  & .bm-stats b { font: 400 22px/1 var(--px-head); color: #fff; }
  & .bm-stats i { font-style: normal; font-size: 10.5px; color: var(--px-muted); }
  & .bm-odds { display: flex; flex-wrap: wrap; gap: 4px; }
  & .bm-odd { font-size: 11.5px; padding: 2px 6px 3px 3px; border: 2px solid var(--px-ink); background: #120d09; display: inline-flex; align-items: center; gap: 5px; }
  & .bm-odd b { font: 400 17px/1 var(--px-head); padding: 1px 4px; }
  & .bm-odd.good b { background: #1f3a1a; color: #b8f090; }
  & .bm-odd.mid b { background: #3e3214; color: var(--px-gold); }
  & .bm-odd.bad b { background: #3e1a14; color: #ffa48c; }
  & .bm-odd.none { color: var(--px-dim); padding: 4px 6px; }
  /* spells (the spell board, embedded) */
  & .bm .spell-board.sb2.embed { position: static; transform: none; width: auto; max-width: none; max-height: none; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; display: block; }
  & .bm .sb2-body { flex-direction: column; gap: 10px; }
  & .bm .sb2-side { flex: none; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
  & .bm .sb2-side-h { align-self: center; font: 400 17px/1 var(--px-head); color: var(--px-gold); text-transform: none; letter-spacing: .01em; margin-right: 2px; }
  & .bm .sb2-slot { border-radius: 0; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; padding: 3px 7px; min-width: 76px; }
  & .bm .sb2-slot.sb2-f { cursor: pointer; }
  & .bm .sb2-slot.sb2-f:hover { box-shadow: inset 0 0 0 1px var(--px-rim-hi); }
  & .bm .sb2-slot.on { box-shadow: inset 0 0 0 2px var(--px-gold); background: #2e2614; }
  & .bm .sb2-slot b { font: 400 16px/1 var(--px-head); }
  & .bm .sb2-slot .cnt { font: 400 16px/1 var(--px-head); color: var(--px-gold); }
  & .bm .sb2-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0 0 0 6px; padding: 0; border: 0; font-size: 12px; color: var(--px-muted); }
  & .bm .sb2-meta b { color: var(--px-text); }
  & .bm .sb2-grid { overflow: visible; padding: 0; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px; }
  & .bm .sb2-tile { border-radius: 0; background: var(--px-card); border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3a2e22; min-height: 56px; padding: 7px 28px 7px 8px; transition: none; }
  & .bm .sb2-tile:hover:not(.disabled) { transform: none; background: #2a2116; border-color: var(--px-ink); box-shadow: inset 0 0 0 2px var(--px-rim-hi); }
  & .bm .sb2-tile.open { box-shadow: inset 0 0 0 2px var(--px-gold); background: #2e2614; }
  & .bm .sb2-tile.disabled { opacity: .4; }
  & .bm .sb2-ico { border-radius: 0; box-shadow: 0 0 0 2px var(--px-ink); }
  & .bm .sb2-name b { font: 400 19px/1.05 var(--px-head); color: var(--px-gold-hi); letter-spacing: .01em; }
  & .bm .sb2-name .tiny { font-size: 11px; color: var(--px-muted); }
  & .bm .sb2-lv { border-radius: 0; border: 2px solid var(--px-ink); background: #4a3a14; color: var(--px-gold); font: 400 13px/1 var(--px-head); height: 16px; min-width: 16px; left: 2px; top: 2px; }
  & .bm .sb2-i { border-radius: 0; border: 2px solid var(--px-ink); background: #2a2240; color: #d6c2ff; font: 400 14px/1 var(--px-head); width: 18px; height: 18px; line-height: 14px; }
  & .bm .sb2-pop { border-radius: 0; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 2px var(--px-gold); margin-top: 8px; }
  & .bm .sb2-info { position: absolute; top: 156px; right: 14px; border-radius: 0; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 2px #7a5cc8, 0 6px 0 rgba(0, 0, 0, .45); max-height: calc(100% - 124px); }
  & .bm .sb2-info h3 { font: 400 26px/1 var(--px-head); color: var(--px-gold-hi); }
  & .bm .meta-bar { margin-bottom: 8px; }
  & .bm .meta-btn { border-radius: 0; }
}

/* ------------------------------------------------------------ narrower screens */
@media (max-width: 1100px) {
  body[data-world=dnd][data-screen=battle] {
    & .battle { grid-template-columns: 236px 1fr 270px; }
    & .battle.log-hidden { grid-template-columns: 236px 1fr 0; }
    & .bb-row { flex-wrap: wrap; }
    & .bb-left { max-width: none; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; order: 0; }
    & .bb-econ { flex-wrap: wrap; }
    & .bb-hot { order: 1; flex: 1 1 0; }
    & .bb-btns { order: 2; }
  }
}
@media (max-width: 900px) {
  body[data-world=dnd][data-screen=battle] {
    & .battle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 58vh) auto auto auto; }
    & .battle.log-hidden { grid-template-columns: minmax(0, 1fr); }
    & .battle > * { min-width: 0; }
    & .initiative { min-width: 0; }
    & .b-top { order: 0; }
    & .b-center { order: 1; }
    & .b-bottom { order: 2; position: sticky; bottom: 0; }
    & .b-left { order: 3; border-right: 0; border-top: 2px solid var(--px-ink); box-shadow: none; max-height: none; }
    & .b-right { order: 4; border-left: 0; border-top: 2px solid var(--px-ink); box-shadow: none; max-height: 300px; }
    & .unit-avatar canvas { max-height: 130px; }
  }
}
@media (max-width: 640px) {
  body[data-world=dnd][data-screen=battle] {
    & .b-top { gap: 6px; padding: 4px 6px; min-height: 50px; }
    & .b-roundbox { min-width: 0 !important; }
    & .b-round { font-size: 21px !important; white-space: nowrap; }
    & #b-theme { display: none; }
    & .init-chip { width: 42px; font-size: 9.5px; }
    & .init-chip .ic { width: 28px; height: 28px; }
    & .init-chip .ic.px { width: 28px; height: 28px; } /* a 24px face inside the 2px border */
    & .init-sep { font-size: 12px; padding: 0 2px; }
    & #b-retreat { font-size: 14px; padding: 5px 7px; }
    & .turn-banner { font-size: 16px; top: 6px; padding: 4px 10px 5px; max-width: calc(100% - 64px); left: calc(50% - 22px); }
    & .cam-ctrl { right: 6px; top: 6px; }
    & .cam-ctrl .btn { width: 30px; height: 28px; font-size: 13px; }
    & .castflow { min-width: 0; width: calc(100% - 12px); }
    & .b-bottom { padding: 5px 6px 6px; }
    & .bb-row { gap: 6px; }
    & .bb-left { gap: 3px; }
    & .bpip { font-size: 14px; padding: 2px 5px 2px 4px; }
    & .bb-hot { flex: 1 1 100%; order: 1; }
    & .bb-hot .hotbar .hb-slot { width: 52px; padding: 0; }
    & .bb-hot .hotbar .hb-slot .hb-name, & .bb-hot .hotbar .hb-slot .hb-lv { display: none !important; }
    & .bb-btns { order: 2; flex: 1 1 100%; }
    & .bbtn, & #a-end.bbtn { flex: 1; min-width: 0; height: 50px; }
    & .bbtn.end { flex: 1.4; min-width: 0; }
    & .bbtn b { font-size: 17px; }
    & .bbtn.end b { font-size: 19px; }
    & .bm { top: 6px; height: calc(100dvh - 12px); width: calc(100vw - 12px); }
    & .bm-head { gap: 6px; padding-bottom: 6px; }
    & .bm-title { font-size: 26px; }
    & .bm-head .bb-econ { order: 5; flex: 1 1 100%; flex-wrap: wrap; }
    & .bm-kbd { display: none; }
    & .bm-tab { font-size: 18px; padding: 6px 10px 8px; }
    & .bm-search { flex-basis: 100%; max-width: none; }
    & .bm .submenu, & .bm-grid.atk { grid-template-columns: 1fr; }
    & .bm .sb2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    & .bm .sb2-tile { min-height: 50px; padding: 5px 22px 5px 5px; gap: 6px; }
    & .bm .sb2-ico { flex-basis: 32px; width: 32px; height: 32px; }
    & .bm .sb2-ico svg { width: 32px; height: 32px; }
    & .bm .sb2-name b { font-size: 16px; white-space: normal; }
    & .bm .sb2-i { right: 3px; top: 3px; }
    & .bm-hot .hotbar .hb-cell { width: calc(50% - 2px); }
    & .bm-hot .hotbar .hb-slot { width: 100%; }
    & .bm .sb2-info { top: 8px; left: 8px; right: 8px; width: auto; max-height: calc(100% - 16px); }
  }
}

/* ------------------------------------------------------------ v2: side nav, spell sections, resources in the unit card */
body[data-world=dnd][data-screen=battle] {
  & .bm-main { flex: 1 1 auto; min-height: 0; display: flex; border-top: 2px solid var(--px-line); }
  & .bm-nav { flex: none; width: 158px; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 2px; border-right: 2px solid var(--px-line); overflow-y: auto; scrollbar-width: none; }
  & .bm-nav .bm-tab { width: 100%; justify-content: flex-start; gap: 8px; padding: 6px 8px; margin: 0 -2px 0 0; border: 2px solid transparent; border-right: 0; font-size: 20px; }
  & .bm-nav .bm-tab.on { background: var(--px-panel2); border-color: var(--px-line); border-right: 2px solid var(--px-panel2); }
  & .bm-nav .bm-tab:hover:not(.on) { background: #241d16; }
  & .bm-tico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--px-ink); background: #120d09; }
  & .bm-tico svg { width: 26px; height: 26px; display: block; }
  & .bm-tl { flex: 1; text-align: left; }
  & .bm-nav .bm-tab em { margin-left: auto; }
  & .bm-pane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--px-panel2); }
  & .bm-head { padding-bottom: 6px; }
  & .bm-title { font-size: 28px; }
  & .bm-head .bpip { font-size: 14px; padding: 2px 6px 2px 4px; }
  /* spells by level */
  & .sb2-mini { font-size: 12px; color: var(--px-muted); margin: -2px 2px 10px; }
  & .sb2-mini b { color: var(--px-text); }
  & .sb2-mini .conc { color: #c8b3ff; }
  & .sb2-sec { margin-bottom: 14px; }
  & .sb2-sech { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; padding-bottom: 4px; border-bottom: 2px solid var(--px-line); }
  & .sb2-sech b { font: 400 21px/1 var(--px-head); color: var(--px-gold); }
  & .sec-slots { display: inline-flex; align-items: center; gap: 6px; font: 400 17px/1 var(--px-head); color: #d6c2ff; }
  & .sec-pips { display: inline-flex; gap: 2px; }
  & .sec-pips i { width: 9px; height: 11px; border: 2px solid var(--px-ink); background: #2a2240; }
  & .sec-pips i.full { background: #b48cff; box-shadow: inset 0 -2px 0 #6a48b0; }
  & .sec-note { font-size: 11.5px; color: var(--px-dim); }
  & .sec-note.warn { color: #ffa48c; }
  & .sb2-sec.off .sb2-sech b, & .sb2-sec.off .sec-slots { color: var(--px-dim); }
  & .sb2-sec.off .sb2-grid { opacity: .55; filter: grayscale(.5); }
  /* the acting hero's resources, in the unit card under HP / AC */
  & .uc-econ { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
  & .uc-econ .bb-econ { flex-wrap: wrap; }
  & .uc-econ .bpip { font-size: 15px; padding: 2px 6px 2px 4px; }
  & .uc-econ .bpip.mv b { font-size: 16px; }
  & .uc-slots .econ-slots { display: inline-flex; flex-wrap: wrap; }
  & .uc-econ .bb-explore, & .uc-econ .bb-armed { align-self: flex-start; }
}
@media (max-width: 640px) {
  body[data-world=dnd][data-screen=battle] {
    & .bm-main { flex-direction: column; }
    & .bm-nav { order: 2; width: auto; flex-direction: row; padding: 0 2px 2px; border-right: 0; border-top: 2px solid var(--px-line); overflow-x: auto; overflow-y: hidden; gap: 0; }
    & .bm-nav .bm-tab { width: auto; flex: 1 0 auto; flex-direction: column; gap: 2px; padding: 5px 6px 4px; margin: -2px 0 0; border: 2px solid transparent; border-top: 0; font-size: 14px; position: relative; }
    & .bm-nav .bm-tab.on { border-color: var(--px-line); border-top: 2px solid var(--px-panel2); border-right: 2px solid var(--px-line); }
    & .bm-nav .bm-tab em { position: absolute; top: 2px; right: 2px; margin: 0; padding: 1px 3px; font-size: 9px; }
    & .bm-tico, & .bm-tico svg { width: 22px; height: 22px; }
    & .bm-tl { text-align: center; }
    & .bm-pane { flex: 1 1 auto; min-height: 0; }
  }
}
@media (max-width: 640px) { body[data-world=dnd][data-screen=battle] .sb2-sech .sec-note:not(.warn) { display: none; } }

/* the inspected hero's headshot beside their name (client/js/portrait.js) */
.uc-face { flex: none; width: 72px; height: 72px; image-rendering: pixelated; margin-right: 10px; align-self: center; box-shadow: 0 0 0 2px #0d0b09, 0 0 0 4px #574735; border-radius: 1px; margin-left: 4px; }
.init-chip .ic.px img { image-rendering: pixelated; }