/* ============================================================
 * console-batchb.css — v1.24.76 batch B console chrome
 * (ARSENAL, ARMORY, LOADOUT KITS, SKILL TREE).
 *
 * Loaded via JS injection (arsenal.js / armory.js / game.js carry the
 * same sentinel block) — style.css is never touched.
 *
 * Theme rule: chrome is theme-aware via var(--cyan) + color-mix, so
 * every filter theme (CLASSIC hardcoded cyan, neon, monokai,
 * cyberpunk, anime, …) re-tints the chrome. Hardware chrome buttons
 * carry .nn-sysbtn (added in JS) for filter-art immunity.
 * Zero scroll / zero overlap / zero truncation / ≥44px touch targets.
 * ============================================================ */

/* ---------- fullscreen console page shell ---------- */
.bb-console {
  position:fixed; inset:0; z-index:9500;
  display:flex; flex-direction:column;
  box-sizing:border-box; overflow:hidden;
  margin:0; width:auto; max-height:none; max-width:none;
  padding:max(14px, env(safe-area-inset-top,0px)) 16px max(16px, env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cyan) 10%, transparent) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#05090f 0%,#030509 100%);
  color:#e8f6ff;
}
/* ID-level .panel overrides (1,1,0 beats #skillPanel / #arsenalPanel) */
#skillPanel.bb-console, #arsenalPanel.bb-console,
#armoryPanel.bb-console, #kitPanel.bb-console {
  max-height:none; overflow:hidden; padding:max(14px, env(safe-area-inset-top,0px)) 16px max(16px, env(safe-area-inset-bottom,0px));
  width:auto; margin:0;
}
/* v1.24.76: a pre-existing style.css landscape rule makes #armoryPanel
   display:grid (old 2-col door layout) — the console page stays flex. */
#armoryPanel.bb-console { display:flex; }
.bb-console::before { display:none; } /* kill .panel's inset border */
/* ID-level: beats .panel:not(#lobby)'s panelIn (1,1,0) — the console pages
   always enter with the spec'd 240ms slide+fade, never the card pop. */
#skillPanel.bb-console:not(.hidden), #arsenalPanel.bb-console:not(.hidden),
#armoryPanel.bb-console:not(.hidden), #kitPanel.bb-console:not(.hidden) {
  animation:bbIn 240ms ease-out;
}
@keyframes bbIn {
  from { transform:translateX(6%); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}

/* ---------- header: BACK pill + widget park zone + centered title ---------- */
.bb-chead {
  flex:0 0 auto; display:grid;
  grid-template-columns:auto 1fr; gap:2px 12px; align-items:center;
  margin-bottom:10px;
}
.bb-chead .nn-dash-back { min-height:44px; } /* ≥44px touch target */
.bb-wspace { min-width:140px; min-height:44px; } /* draggable widget park zone */
.bb-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-shadow:0 0 16px color-mix(in srgb, var(--cyan) 50%, transparent);
  text-align:center; white-space:nowrap;
}
.bb-csub {
  grid-column:1 / -1; margin:6px 0 0; text-align:center;
  font:700 10px 'Montserrat',sans-serif; letter-spacing:.18em; color:#cdeeff;
  line-height:1.8;
}
.bb-csub .bb-dim { color:#8b9cb3; font-weight:600; }

/* ---------- body: nested console panel, zero scroll ---------- */
.bb-cbody {
  flex:1 1 auto; min-height:0; overflow:hidden; position:relative;
  display:flex; flex-direction:column; gap:10px;
  border:1px solid color-mix(in srgb, var(--cyan) 16%, transparent);
  border-radius:16px; background:rgba(10,18,30,.55);
  padding:clamp(10px,3vw,18px);
  box-sizing:border-box;
}
.bb-nest {
  border:1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  border-radius:12px; background:rgba(13,20,34,.6);
  padding:12px 14px; box-sizing:border-box;
}

/* ---------- footer ---------- */
.bb-cfoot { flex:0 0 auto; display:flex; gap:10px; padding-top:10px; }

/* ---------- console buttons ---------- */
.bb-console .bb-btn {
  min-height:48px; padding:12px 20px; border-radius:999px;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.16em; cursor:pointer; box-sizing:border-box;
  border:1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  background:rgba(10,18,30,.85); color:var(--cyan);
  text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--cyan) 18%, transparent),
             inset 0 0 12px color-mix(in srgb, var(--cyan) 8%, transparent);
}
.bb-console .bb-btn-primary {
  background:var(--cyan); border-color:var(--cyan); color:#04121a; text-shadow:none;
  box-shadow:0 0 22px color-mix(in srgb, var(--cyan) 55%, transparent);
}
.bb-console .bb-btn:active { transform:scale(.97); }

/* small inline SVG icons (door / lock / kit glyphs) */
.bb-ico { width:22px; height:22px; flex:none; vertical-align:-4px; }

/* ============================================================
 * ARSENAL
 * ============================================================ */
#arsenalPanel #weaponList {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:6px; overflow-y:auto; margin:0;
}
#arsenalPanel .wcard {
  flex:1 1 0; min-height:44px; margin:0; padding:6px 14px;
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  background:rgba(13,20,34,.72);
  border:1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius:12px; text-align:left; cursor:pointer;
}
#arsenalPanel .wcard.equipped {
  border-color:color-mix(in srgb, var(--cyan) 70%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent);
}
#arsenalPanel .wcard.locked { opacity:.62; }
#arsenalPanel .wicon { font-size:26px; line-height:1.25; flex:none; display:flex; align-items:center; }
#arsenalPanel .whead .wicon.big { font-size:48px; line-height:1.15; }
#arsenalPanel .wicon .bb-ico { width:26px; height:26px; }
#arsenalPanel .wname {
  flex:1 1 auto; min-width:0;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.06em; color:#fff;
}
#arsenalPanel .wname .proto-tag {
  font:700 8px 'Montserrat',sans-serif; font-style:normal; letter-spacing:.14em;
  color:#0a1420; background:var(--cyan); border-radius:3px; padding:2px 5px;
  vertical-align:2px; white-space:nowrap;
}
#arsenalPanel .wstate {
  flex:none; font:700 10px 'Montserrat',sans-serif; letter-spacing:.1em;
  color:var(--cyan); white-space:nowrap;
}
/* weapon detail */
#arsenalPanel #weaponDetail {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:8px; overflow:hidden;
}
#arsenalPanel .bb-back2 {
  flex:none; align-self:flex-start; min-height:44px; padding:10px 18px;
  border-radius:999px; cursor:pointer; box-sizing:border-box;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.14em; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  background:rgba(10,18,30,.85);
  box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 16%, transparent);
}
#arsenalPanel .wd-cols {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:8px; overflow:hidden;
}
#arsenalPanel .wd-left, #arsenalPanel .wd-right {
  display:flex; flex-direction:column; gap:8px; min-height:0;
}
#arsenalPanel .wd-right { flex:1 1 auto; }
/* v1.24.182: the left column takes its natural height. As a shrinkable flex
   item (flex:0 1 auto, min-height:0) it was squeezed below its content and
   its flex:none children (stat bars, tint group) painted over the right
   column's MOD SLOTS label and slot cards. The picker below absorbs the
   squeeze instead — it is the detail's scroll region. */
#arsenalPanel .wd-left { flex:none; }
#arsenalPanel .whead { flex:none; display:flex; gap:12px; align-items:center; margin:0; }
#arsenalPanel .whead h3 {
  margin:0; font-family:'Orbitron','Montserrat',sans-serif; font-weight:700;
  font-size:17px; letter-spacing:.1em; color:#fff;
}
#arsenalPanel .lore { margin:4px 0 0; font:400 12px 'Montserrat',sans-serif; font-style:normal; color:#b9a6cc; }
#arsenalPanel .stat-bars { flex:none; }
#arsenalPanel .stat-row { margin:4px 0; }
#arsenalPanel .bb-aoe { flex:none; margin:0; font:700 10px 'Montserrat',sans-serif; letter-spacing:.12em; color:#8b9cb3; }
#arsenalPanel .gen-group { flex:none; margin:0; }
#arsenalPanel .gen-group > span {
  display:block; font:700 9px 'Montserrat',sans-serif; letter-spacing:.2em;
  color:#8b9cb3; margin-bottom:6px;
}
#arsenalPanel #wTint { width:100%; height:44px; margin:0; padding:2px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  border-radius:10px; background:#05020b; }
#arsenalPanel .slotrow { display:flex; gap:8px; }
#arsenalPanel .slotbtn {
  flex:1 1 0; min-height:48px; padding:8px 6px; cursor:pointer; box-sizing:border-box;
  background:rgba(20,8,38,.8);
  border:1px solid color-mix(in srgb, var(--cyan) 33%, transparent);
  border-radius:10px; color:#fff;
  font:700 11px 'Montserrat',sans-serif;
}
#arsenalPanel #modPicker {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:6px; overflow-y:auto; overflow-x:hidden;
  /* v1.24.182: the picker is the panel's bounded scroll region (the batch-C
     idiom) — the page itself never scrolls, but the mod list must: with
     overflow:hidden the cards past the leftover height were clipped and
     unreachable, so below-fold attachments could not be equipped. */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
#arsenalPanel #modPicker:empty { display:none; }
#arsenalPanel #modPicker .eyebrow { margin:0; font-size:10px; letter-spacing:.2em; }
#arsenalPanel .mcard {
  /* v1.24.182: natural height inside the scroll region (was flex:1 1 0,
     which stretched/compressed cards to the leftover box and clipped the
     overflow instead of scrolling it). */
  flex:none; min-height:48px; margin:0; padding:6px 12px;
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  background:rgba(20,8,38,.8);
  border:1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius:10px; text-align:left; cursor:pointer; color:#fff;
}
#arsenalPanel .mcard.slotted {
  border-color:#fff35c;
  box-shadow:0 0 12px color-mix(in srgb, #fff35c 30%, transparent);
}
#arsenalPanel #wAction {
  flex:none; min-height:52px; width:100%; margin:0; border-radius:999px;
  cursor:pointer; box-sizing:border-box;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.14em; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 60%, transparent);
  background:rgba(10,18,30,.9);
  box-shadow:0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent);
}
#arsenalPanel #wAction.buy {
  background:var(--cyan); border-color:var(--cyan); color:#04121a;
  box-shadow:0 0 22px color-mix(in srgb, var(--cyan) 55%, transparent);
}
#arsenalPanel #arsenalConvert { flex:none; }
#arsenalPanel #arsenalConvert .conv-card { width:100%; box-sizing:border-box; }

/* ============================================================
 * ARMORY (doors) + LOADOUT KITS
 * ============================================================ */
#armoryPanel .door {
  flex:1 1 0; min-height:66px; margin:0; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:4px; padding:10px 16px; text-align:left; cursor:pointer; color:#eaf6ff;
  background:rgba(13,20,34,.72);
  border:1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  border-radius:14px;
  box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 10%, transparent);
}
#armoryPanel .door b {
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.14em; color:#fff; display:flex; align-items:center; gap:10px;
  text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 45%, transparent);
}
#armoryPanel .door > span { font:600 11px/1.5 'Montserrat',sans-serif; color:#c4b5d6; }
#armoryPanel .door em { font-style:normal; color:var(--cyan); font-weight:700; }
#armoryPanel .door:active { transform:scale(.985); }
#armoryPanel #armNext, #armoryPanel #armQuit { flex:none; width:100%; margin:0; box-sizing:border-box; }
#armoryPanel .quit-confirm {
  flex:none; display:flex; align-items:center; gap:10px;
  border:1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  border-radius:12px; background:rgba(13,20,34,.72);
  padding:10px 14px; box-sizing:border-box;
  font:700 11px 'Montserrat',sans-serif; letter-spacing:.12em; color:#eaf6ff;
}
#armoryPanel .quit-confirm.hidden { display:none; }
#armoryPanel .quit-confirm button {
  flex:1 1 0; min-height:44px; border-radius:999px; cursor:pointer; box-sizing:border-box;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.12em; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  background:rgba(10,18,30,.85);
}
/* kits */
#kitPanel #kitList {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:8px; overflow:hidden; margin:0;
}
#kitPanel .kcard {
  flex:1 1 0; min-height:0; margin:0; padding:8px 14px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:2px; width:100%; box-sizing:border-box; cursor:pointer; color:#fff;
  background:rgba(13,20,34,.72);
  border:1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius:12px; text-align:left;
}
#kitPanel .kcard b {
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.12em; color:#fff; display:flex; align-items:center; gap:8px;
}
#kitPanel .kcard > span { font:600 11px/1.45 'Montserrat',sans-serif; color:#c4b5d6; }
#kitPanel .kcard .klore { font-style:normal; font-size:10.5px; color:#9a8aa8; }
#kitPanel .kcard em {
  align-self:flex-end; font:700 9px 'Montserrat',sans-serif; font-style:normal;
  letter-spacing:.14em; color:var(--cyan); white-space:nowrap;
}
#kitPanel .kcard.sel {
  border-color:color-mix(in srgb, #fff35c 80%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, #fff35c 35%, transparent);
}
#kitPanel .kcard.sel em { color:#fff35c; }
#kitPanel .kcard.locked { opacity:.62; }
#kitPanel .kcard.locked em { color:#9a8aa8; }

/* ============================================================
 * SKILL TREE — panel chrome is console; the SVG constellation keeps
 * its 3 branches × 6 nodes, colors, icons and links (badges are
 * bigger + text more readable per the user's redesign order).
 * ============================================================ */
#skillPanel #skillHint {
  margin:0; font:700 10px 'Montserrat',sans-serif; letter-spacing:.16em;
  color:var(--cyan);
}
#skillPanel .sk-scope {
  margin:3px 0 0; font:600 9px 'Montserrat',sans-serif; letter-spacing:.14em;
  color:#8b9cb3;
}
#skillPanel #skillArmoryHint {
  margin:3px 0 0; font:700 9px 'Montserrat',sans-serif; letter-spacing:.14em;
  color:#fff35c;
}
#skillPanel #skillSvg {
  flex:1 1 0; min-height:0; width:100%; display:block;
}
/* bigger, easier-to-read badges (base style.css sizes overridden here) */
#skillPanel.bb-console #skillSvg .node .icon { font-size:30px; }
#skillPanel.bb-console #skillSvg .node .nm { font-size:13px; letter-spacing:.06em; }
#skillPanel.bb-console #skillSvg .node .cost { font-size:12px; }
#skillPanel.bb-console #skillSvg .node .sub { font-size:10px; }
#skillPanel.bb-console #skillSvg .branch-label { font-size:16px; }
/* fat invisible touch target: the whole badge disc answers taps */
#skillPanel.bb-console #skillSvg .sk-hit {
  fill:#000; fill-opacity:0; stroke:none; pointer-events:all;
}
/* clearly visible controller/keyboard focus ring */
#skillPanel.bb-console #skillSvg .sk-ring {
  fill:none; stroke:#ffffff; stroke-width:3; stroke-dasharray:12 7;
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 0 12px var(--cyan));
  transition:opacity .15s ease-out;
}
#skillPanel.bb-console #skillSvg g.node.padnav-focus .sk-ring,
#skillPanel.bb-console #skillSvg g.node:focus-visible .sk-ring { opacity:1; }
#skillPanel.bb-console #skillSvg g.node.padnav-focus circle.face,
#skillPanel.bb-console #skillSvg g.node:focus-visible circle.face {
  stroke:#fff; stroke-width:5;
}
/* detail card: console sheet anchored to the TOP of the body (the draggable
   power/reset/music widgets default to bottom-right — a bottom sheet would
   trap its buttons under them), dismissible, never scrolls */
#skillPanel #skillDetail {
  position:absolute; left:10px; right:10px; top:10px; z-index:60; margin:0;
  background:rgba(8,14,26,.97);
  border:1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  border-radius:14px; padding:14px 16px; box-sizing:border-box;
  box-shadow:0 10px 44px rgba(0,0,0,.65),
             0 0 26px color-mix(in srgb, var(--cyan) 22%, transparent);
}
#skillPanel #sdName {
  margin:0 0 8px; font-family:'Orbitron','Montserrat',sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.1em;
}
#skillPanel #sdDesc { margin:0 0 8px; font-size:13px; line-height:1.55; color:#e8e2f5; }
#skillPanel #sdRanks { margin:0 0 12px; font-size:11px; letter-spacing:.08em; color:#9a8fb5; }
#skillPanel #sdRow { display:flex; gap:10px; }
#skillPanel #sdUnlock {
  flex:1 1 auto; min-height:48px; border-radius:999px; cursor:pointer; box-sizing:border-box;
  font-family:'Orbitron','Montserrat',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.12em; color:#04121a;
  border:1px solid var(--cyan); background:var(--cyan);
  box-shadow:0 0 20px color-mix(in srgb, var(--cyan) 50%, transparent);
}
#skillPanel #sdUnlock:disabled {
  opacity:.45; box-shadow:none;
  background:rgba(10,18,30,.9); color:var(--cyan);
}
#skillPanel #sdClose {
  flex:none; min-height:48px; min-width:48px; border-radius:12px; cursor:pointer;
  box-sizing:border-box; font-size:16px; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  background:rgba(10,18,30,.85);
}
/* footer: intel text-size + respec */
#skillPanel .sk-cfoot { display:flex; gap:10px; }
#skillPanel #skillTextSize {
  flex:none; min-height:50px; padding:0 16px; border-radius:999px; cursor:pointer;
  box-sizing:border-box; font-family:'Orbitron','Montserrat',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:.12em; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  background:rgba(10,18,30,.85); margin:0;
}
#skillPanel #respecBtn {
  flex:1 1 auto; min-height:50px; margin:0; border-radius:999px; cursor:pointer;
  box-sizing:border-box; font-family:'Orbitron','Montserrat',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 60%, transparent);
  background:rgba(10,18,30,.9);
  box-shadow:0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent);
}
#skillPanel #respecBtn:active { transform:scale(.98); }

/* padnav focus ring on HTML controls inside console pages */
.bb-console .padnav-focus {
  outline:2px solid var(--cyan) !important; outline-offset:3px;
}

/* ============================================================
 * short landscape: compact chrome, denser grids — still zero scroll
 * ============================================================ */
@media (orientation:landscape) and (max-height:540px) {
  .bb-console { padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(8px + env(safe-area-inset-bottom,0px)); }
  .bb-chead { display:flex; align-items:center; gap:12px; margin-bottom:6px; padding-right:140px; }
  .bb-chead .nn-dash-back { flex:none; min-height:44px; padding-top:10px; padding-bottom:10px; }
  .bb-wspace { display:none; }
  .bb-ctitle { flex:1 1 auto; grid-column:auto; font-size:18px; text-align:center; }
  .bb-csub { display:none; }
  .bb-cbody { gap:8px; padding:10px 12px; }
  .bb-cfoot { padding-top:6px; }
  /* arsenal: 3-across weapon grid (11 cards with battle-pass prototypes);
     2-col detail */
  #arsenalPanel #weaponList {
    display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr;
    gap:6px; min-height:0;
  }
  #arsenalPanel .wcard { min-height:0; padding:6px 10px; }
  #arsenalPanel .wicon { font-size:22px; }
  #arsenalPanel .wname { font-size:11px; }
  #arsenalPanel .wstate { font-size:9px; }
  #arsenalPanel .wd-cols { display:grid; grid-template-columns:1.05fr 1fr; gap:10px; }
  #arsenalPanel .wd-left, #arsenalPanel .wd-right { min-height:0; overflow:hidden; }
  #arsenalPanel .whead h3 { font-size:14px; }
  #arsenalPanel .wicon.big { font-size:38px; }
  #arsenalPanel .stat-row { margin:2px 0; font-size:10px; }
  #arsenalPanel #wAction { min-height:48px; }
  /* armory: 2×2 door grid, footer buttons full-width */
  #armoryPanel .bb-cbody { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
  #armoryPanel .door { min-height:0; padding:8px 12px; }
  #armoryPanel .door b { font-size:12px; }
  #armoryPanel .door > span { font-size:10px; line-height:1.35; }
  #armoryPanel #armNext, #armoryPanel #armQuit,
  #armoryPanel .quit-confirm { grid-column:1 / -1; }
  /* kits: 2-across compact cards */
  #kitPanel #kitList { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:6px; }
  #kitPanel .kcard { padding:6px 10px; }
  #kitPanel .kcard b { font-size:11px; }
  #kitPanel .kcard > span { font-size:10px; }
  #kitPanel .kcard .klore { display:none; }
  #kitPanel .kcard em { font-size:8px; }
  /* skill tree: tighter top lines; the SVG height-binds (badges shrink —
     portrait is the touch-first layout, landscape is controller-first) */
  #skillPanel .sk-scope { display:none; }
  #skillPanel #respecBtn, #skillPanel #skillTextSize { min-height:44px; }
}