/* The BUILD studio (build-studio.js): FORKS / PERKS / ULTIMATE on tabs, each one screen at 1280x720 and on a phone at
   844x390, with one fixed detail panel. Dark surfaces, the display face for names, lime for chosen paths, orange for
   capstones, cyan for focus and hints (ui-kit.css). */
:root #build-studio#build-studio.build-studio{box-sizing:border-box;width:min(1240px,calc(100vw - 24px));height:min(700px,calc(100dvh - 24px));max-width:none;max-height:none;margin:auto;padding:12px 14px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden;color:var(--bb-text,#eef1dc);background:var(--bb-panel,#151b16);border:3px solid var(--bb-line,#4d5a3a);border-radius:8px;box-shadow:0 18px 50px #000a}
:root #build-studio#build-studio.build-studio::backdrop{background:#05080cd0}
/* The display:grid above outranks the browser's closed-dialog rule; a closed studio must not stay on the page. */
:root #build-studio#build-studio.build-studio:not([open]){display:none}
:root #build-studio#build-studio *{box-sizing:border-box}

/* Header: title, the three section tabs (each shows its count), actions. */
:root #build-studio#build-studio .bs-head{display:flex;align-items:center;gap:14px;min-width:0}
:root #build-studio#build-studio .bs-title{flex:1;min-width:0}
:root #build-studio#build-studio .bs-title .section-kicker{display:block;font:var(--bb-label-s,11px/1.2 'Bully Label',sans-serif);letter-spacing:1px;color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-title h2{margin:0;font:var(--bb-display-s,22px/1.05 'Bully Display',sans-serif);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root #build-studio#build-studio .bs-tabs{display:flex;gap:4px;padding:3px;background:var(--bb-night,#0c110d);border:2px solid var(--bb-line,#4d5a3a);border-radius:6px}
:root #build-studio#build-studio .bs-tab{min-height:36px;margin:0;padding:4px 14px;font:16px/1 var(--bb-font-display,'Bully Display',sans-serif);letter-spacing:.6px;color:var(--bb-text-soft,#b9c6bb);background:transparent;background-image:none;clip-path:none;border:2px solid transparent;border-radius:4px;box-shadow:none;cursor:pointer}
:root #build-studio#build-studio .bs-tab b{margin-left:6px;font:14px/1 var(--bb-font-number,'Bully Number',sans-serif);color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-tab[aria-selected=true]{color:var(--bb-ink,#05080c);background:var(--bb-lime,#ceff24);border-color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-tab[aria-selected=true] b{color:var(--bb-ink,#05080c)}
:root #build-studio#build-studio .bs-tab:hover:not([aria-selected=true]),:root #build-studio#build-studio .bs-tab:focus-visible{border-color:var(--bb-cyan,#75eced);outline:none}
:root #build-studio#build-studio .bs-actions{display:flex;gap:6px}
:root #build-studio#build-studio .bs-actions .bb-btn{min-height:34px;padding:6px 12px}
:root #build-studio#build-studio .bs-body{min-height:0}

/* FORKS: four trees side by side. Nodes sit on percent positions over one SVG of connectors. */
:root #build-studio#build-studio .bs-trees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;height:100%}
:root #build-studio#build-studio .bs-tree{position:relative;min-height:0;background:var(--bb-night,#0c110d);border:2px solid var(--bb-line,#4d5a3a);border-radius:6px}
:root #build-studio#build-studio .bs-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
:root #build-studio#build-studio .bs-links line{stroke:#3a4536;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
:root #build-studio#build-studio .bs-links line.is-lit{stroke:var(--bb-lime,#ceff24);stroke-width:5;filter:drop-shadow(0 0 4px #ceff24aa)}
:root #build-studio#build-studio .bs-root{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;max-width:94%;padding:4px 10px 4px 4px;background:var(--bb-raised,#1f2620);border:2px solid var(--bb-line,#4d5a3a);border-radius:20px;white-space:nowrap}
:root #build-studio#build-studio .bs-root.is-lit{border-color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-root :is(.spell-icon,img,canvas){width:26px;height:26px;flex:none}
:root #build-studio#build-studio .bs-root b{overflow:hidden;text-overflow:ellipsis;font:var(--bb-display-s,18px/1.1 'Bully Display',sans-serif);font-weight:400}
:root #build-studio#build-studio .bs-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:2px;width:24%;min-height:50px;margin:0;padding:4px 6px;text-align:center;color:var(--bb-text,#eef1dc);background:var(--bb-raised,#1f2620);background-image:none;clip-path:none;border:2px solid var(--bb-line,#4d5a3a);border-radius:6px;box-shadow:none;cursor:pointer}
:root #build-studio#build-studio .bs-node.is-wide{width:46%;min-height:42px}
/* The one-line effect under each node or perk name; the full rule stays in the detail panel. */
:root #build-studio#build-studio .bs-short{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:500 11px/1.2 var(--bb-font-body,'Bully Body',sans-serif);font-style:normal;color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-node.is-wide .bs-short{-webkit-line-clamp:1}
:root #build-studio#build-studio .bs-node[aria-pressed=true] .bs-short{color:var(--bb-text,#eef1dc)}
:root #build-studio#build-studio .bs-perk .bs-short{font-size:12px;color:var(--bb-text,#eef1dc)}
:root #build-studio#build-studio .bs-node[data-tier="3"]{border-style:double;border-width:4px}
:root #build-studio#build-studio .bs-node b{font:13px/1.05 var(--bb-font-display,'Bully Display',sans-serif);font-weight:400;letter-spacing:.2px;overflow-wrap:break-word;hyphens:auto}
:root #build-studio#build-studio .bs-node.is-wide b{font-size:15px}
:root #build-studio#build-studio .bs-node:hover:not([data-locked]),:root #build-studio#build-studio .bs-node:focus-visible{border-color:var(--bb-cyan,#75eced);outline:none}
:root #build-studio#build-studio .bs-node[aria-pressed=true]{background:color-mix(in srgb,var(--bb-lime,#ceff24) 18%,var(--bb-raised,#1f2620));border-color:var(--bb-lime,#ceff24);box-shadow:0 0 10px color-mix(in srgb,var(--bb-lime,#ceff24) 40%,transparent)}
:root #build-studio#build-studio .bs-node[data-tier="3"][aria-pressed=true]{background:color-mix(in srgb,var(--bb-orange,#ff8a29) 20%,var(--bb-raised,#1f2620));border-color:var(--bb-orange,#ff8a29);box-shadow:0 0 12px color-mix(in srgb,var(--bb-orange,#ff8a29) 50%,transparent)}
:root #build-studio#build-studio .bs-node[data-locked]{opacity:.5;cursor:default}
/* The unlock slot on a chosen node or perk: its number and when it arrives. */
:root #build-studio#build-studio .bs-slot{position:absolute;top:-10px;right:-8px;display:flex;align-items:center;gap:3px;padding:2px 5px;font:12px/1 var(--bb-font-number,'Bully Number',sans-serif);font-style:normal;color:var(--bb-ink,#05080c);background:var(--bb-lime,#ceff24);border:2px solid var(--bb-ink,#05080c);border-radius:9px;white-space:nowrap}
:root #build-studio#build-studio .bs-node[data-tier="3"] .bs-slot{background:var(--bb-orange,#ff8a29)}

/* PERKS: the four slots, then the pool as a grid. */
:root #build-studio#build-studio .bs-body:has(.bs-perks){display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
:root #build-studio#build-studio .bs-perk-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
:root #build-studio#build-studio .bs-perk-slots li{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;min-height:44px;padding:4px 8px;background:var(--bb-raised,#1f2620);border:2px solid var(--bb-lime,#ceff24);border-radius:5px}
:root #build-studio#build-studio .bs-perk-slots li.is-empty{grid-template-columns:minmax(0,1fr);border-style:dashed;border-color:var(--bb-line,#4d5a3a);color:var(--bb-text-dim,#7f8b80)}
:root #build-studio#build-studio .bs-perk-slots .perk-card-art{grid-row:1 / 3;width:30px;height:30px}
:root #build-studio#build-studio .bs-perk-slots small{font:var(--bb-label-s,11px/1.2 'Bully Label',sans-serif);letter-spacing:.8px;color:var(--bb-text-soft,#b9c6bb)}
:root #build-studio#build-studio .bs-perk-slots b{font:15px/1.05 var(--bb-font-display,'Bully Display',sans-serif);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root #build-studio#build-studio .bs-perks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;min-height:0}
:root #build-studio#build-studio .bs-perk{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:9px;align-items:center;min-height:0;margin:0;padding:6px 8px;text-align:left;color:var(--bb-text,#eef1dc);background:var(--bb-raised,#1f2620);background-image:none;clip-path:none;border:2px solid var(--bb-line,#4d5a3a);border-radius:5px;box-shadow:none;cursor:pointer}
:root #build-studio#build-studio .bs-perk>.perk-card-art{width:44px;height:44px}
:root #build-studio#build-studio .perk-art-fallback{display:grid;place-items:center;font:700 18px/1 var(--bb-font-display,'Bully Display',sans-serif);color:var(--bb-lime,#ceff24);background:var(--bb-night,#0c110d);border-radius:4px}
:root #build-studio#build-studio .bs-perk>span{display:grid;gap:2px;min-width:0}
:root #build-studio#build-studio .bs-perk b{font:15px/1.05 var(--bb-font-display,'Bully Display',sans-serif);font-weight:400;overflow-wrap:anywhere}
:root #build-studio#build-studio .bs-perk small{font:10px/1.1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.6px;color:var(--bb-text-soft,#b9c6bb)}
:root #build-studio#build-studio .bs-perk em{font:10px/1.1 var(--bb-font-label,'Bully Label',sans-serif);font-style:normal;letter-spacing:.6px;color:var(--bb-cyan,#75eced)}
:root #build-studio#build-studio .bs-perk .bs-slot{top:-8px;right:-6px}
:root #build-studio#build-studio .bs-perk:hover:not([data-full]),:root #build-studio#build-studio .bs-perk:focus-visible{border-color:var(--bb-cyan,#75eced);outline:none}
:root #build-studio#build-studio .bs-perk[aria-pressed=true]{background:color-mix(in srgb,var(--bb-lime,#ceff24) 16%,var(--bb-raised,#1f2620));border-color:var(--bb-lime,#ceff24);box-shadow:0 0 10px color-mix(in srgb,var(--bb-lime,#ceff24) 35%,transparent)}
:root #build-studio#build-studio .bs-perk[data-full]{opacity:.42;cursor:default}


/* The fixed detail panel. */
:root #build-studio#build-studio .bs-detail{min-height:58px;padding:7px 12px;background:var(--bb-raised,#1f2620);border-left:4px solid var(--bb-cyan,#75eced);border-radius:4px}
:root #build-studio#build-studio .bs-detail p{margin:0;font:var(--bb-body-m,500 14px/1.45 'Bully Body',sans-serif)}
:root #build-studio#build-studio .bs-detail small{margin-right:8px;font:var(--bb-label-s,11px/1.2 'Bully Label',sans-serif);letter-spacing:.8px;color:var(--bb-cyan,#75eced)}
:root #build-studio#build-studio .bs-detail small[data-tier="1"],:root #build-studio#build-studio .bs-detail small[data-tier="2"]{color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-detail small[data-tier="3"]{color:var(--bb-orange,#ff8a29)}
:root #build-studio#build-studio .bs-detail b{margin-right:6px;font:18px/1 var(--bb-font-display,'Bully Display',sans-serif);font-weight:400}
:root #build-studio#build-studio .bs-detail .bs-status{margin-top:2px;font:var(--bb-body-s,600 12.5px/1.4 'Bully Body',sans-serif);color:var(--bb-text-soft,#b9c6bb)}
:root #build-studio#build-studio .bs-detail .bs-status.is-locked{color:var(--bb-orange,#ff8a29)}

/* Phones in landscape: tighter, still one screen; card text gives way to the detail panel. */
@media (max-height:520px){
  :root #build-studio#build-studio.build-studio{padding:6px 8px;gap:6px;height:calc(100dvh - 12px);width:calc(100vw - 12px)}
  :root #build-studio#build-studio .bs-title{display:none}
  :root #build-studio#build-studio .bs-head{justify-content:space-between}
  :root #build-studio#build-studio .bs-tab{min-height:28px;padding:3px 9px;font-size:13px}
  :root #build-studio#build-studio .bs-actions .bb-btn{min-height:28px;padding:3px 8px;font-size:12px}
  :root #build-studio#build-studio .bs-root{padding:2px 7px 2px 2px}
  :root #build-studio#build-studio .bs-root :is(.spell-icon,img,canvas){width:20px;height:20px}
  :root #build-studio#build-studio .bs-root b{font-size:12px}
  :root #build-studio#build-studio .bs-node{min-height:30px;padding:2px}
  :root #build-studio#build-studio .bs-node.is-wide{min-height:26px}
  :root #build-studio#build-studio .bs-node b,:root #build-studio#build-studio .bs-node.is-wide b{font-size:10px}
  :root #build-studio#build-studio .bs-node .bs-short{display:none}
  :root #build-studio#build-studio .bs-slot{top:-8px;right:-6px;padding:1px 3px;font-size:9px}
  :root #build-studio#build-studio .bs-perk-slots li{min-height:28px;padding:2px 6px}
  :root #build-studio#build-studio .bs-perk{grid-template-columns:22px minmax(0,1fr);padding:2px 5px}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:22px;height:22px}
  :root #build-studio#build-studio .bs-perk :is(small,em,.bs-short){display:none}
  :root #build-studio#build-studio .bs-perk b{font-size:11px}
  :root #build-studio#build-studio .bs-detail{min-height:34px;padding:3px 8px}
  :root #build-studio#build-studio .bs-detail p{font-size:11.5px;line-height:1.3}
  :root #build-studio#build-studio .bs-detail b{font-size:14px}
}
@media (max-width:640px){:root #build-studio#build-studio .bs-perks{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The loadout BUILD strip (buildStrip): one PERKS bar across the row, its count and a small preview side by side. */
html body #menu#menu .ld-build{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
html body #menu#menu .ld-build .ld-build-tab{display:grid;gap:3px;min-width:0;min-height:0;margin:0;padding:4px 8px 5px;text-align:left;color:var(--bb-text,#eef1dc);background:var(--bb-raised,#1f2620);background-image:none;clip-path:none;border:2px solid var(--bb-line,#4d5a3a);border-radius:5px;box-shadow:none;filter:none;cursor:pointer}
html body #menu#menu .ld-build .ld-build-tab>span:first-child{font:14px/1 var(--bb-font-display,'Bully Display',sans-serif);letter-spacing:.5px;white-space:nowrap}
html body #menu#menu .ld-build .ld-build-tab b{margin-left:4px;font:13px/1 var(--bb-font-number,'Bully Number',sans-serif);color:var(--bb-lime,#ceff24)}
html body #menu#menu .ld-build .ld-build-tab:hover,html body #menu#menu .ld-build .ld-build-tab:focus-visible{border-color:var(--bb-cyan,#75eced);outline:none}
html body #menu#menu .ld-build-chips{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden}
html body #menu#menu .ld-build-chips i{display:grid;place-items:center;flex:none;width:20px;height:20px;border:2px solid var(--bb-lime,#ceff24);border-radius:4px;font-style:normal}
html body #menu#menu .ld-build-chips i[data-tier="3"]{border-color:var(--bb-orange,#ff8a29)}
html body #menu#menu .ld-build-chips :is(.spell-icon,img,canvas,.perk-card-art){width:16px;height:16px}
html body #menu#menu .ld-build-chips .perk-art-fallback{display:grid;place-items:center;font:700 12px/1 var(--bb-font-display,'Bully Display',sans-serif);color:var(--bb-lime,#ceff24)}
html body #menu#menu .ld-build-chips em{min-width:0;overflow:hidden;font:11px/1 var(--bb-font-display,'Bully Display',sans-serif);font-style:normal;white-space:nowrap;text-overflow:ellipsis;color:var(--bb-text-soft,#b9c6bb)}
/* Fork nodes on unequipped abilities (Lobby.benchedNodes): a note over the trees and a tag on the strip. */
:root #build-studio#build-studio .bs-body:has(.bs-note){display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px}
:root #build-studio#build-studio .bs-note{margin:0;padding:4px 10px;font:var(--bb-body-s,600 12.5px/1.35 'Bully Body',sans-serif);color:var(--bb-text,#eef1dc);background:color-mix(in srgb,var(--bb-orange,#ff8a29) 14%,var(--bb-raised,#1f2620));border-left:4px solid var(--bb-orange,#ff8a29);border-radius:4px}
:root #build-studio#build-studio .bs-note b{margin-right:6px;color:var(--bb-orange,#ff8a29)}
html body #menu#menu .ld-build .ld-benched{margin-left:6px;padding:1px 4px;font:9px/1 var(--bb-font-label,'Bully Label',sans-serif);font-style:normal;letter-spacing:.5px;color:var(--bb-ink,#05080c);background:var(--bb-orange,#ff8a29);border-radius:3px;vertical-align:2px}

/* PRACTICE VS BOTS by the play buttons, on the steel plate. Plate art from ui-kit.css. */
html body #menu#menu #practice-bots{
  box-sizing:border-box;margin:0;background:none;border:0 solid transparent;border-radius:0;border-image:var(--art) 10 12 fill / 20px 24px / 0 round;image-rendering:pixelated;
  box-shadow:none;clip-path:none;filter:drop-shadow(3px 3px 0 var(--bb-ink,#05080c));color:var(--label);text-shadow:var(--bb-stamp);cursor:pointer
}
html body #menu#menu #practice-bots:hover:not(:disabled),html body #menu#menu #practice-bots:focus-visible{border-image-source:var(--art-hover);outline:none;transform:none;background:none}
html body #menu#menu #practice-bots:active{border-image-source:var(--art-down)}
html body #menu#menu #practice-bots{--art:url('assets/ui/plate-steel-normal.png');--art-hover:url('assets/ui/plate-steel-hover.png');--art-down:url('assets/ui/plate-steel-pressed.png');--label:var(--bb-lime,#ceff24);display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 18px 9px 20px;font:var(--bb-label-m);letter-spacing:.05em;white-space:nowrap;text-transform:uppercase}
/* The PERKS bar reads as a button: framed, a › arrow, a lift on hover; label and perk chips on one line. */
html body #menu#menu .ld-build .ld-build-tab{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:40px;padding:6px 10px 7px;border:2px solid #5d6c48;box-shadow:inset 0 -3px 0 #0007,2px 2px 0 var(--bb-ink,#05080c);transition:transform .08s,border-color .08s}
html body #menu#menu .ld-build .ld-build-tab>span:first-child{display:flex;align-items:baseline;font-size:15px}
html body #menu#menu .ld-build .ld-build-arrow{margin-left:auto;font:400 18px/1 var(--bb-font-display,'Bully Display',sans-serif);font-style:normal;color:var(--bb-cyan,#75eced)}
html body #menu#menu .ld-build .ld-build-tab:hover,html body #menu#menu .ld-build .ld-build-tab:focus-visible{transform:translateY(-1px);border-color:var(--bb-cyan,#75eced);background:color-mix(in srgb,var(--bb-cyan,#75eced) 10%,var(--bb-raised,#1f2620))}
html body #menu#menu .ld-build .ld-build-tab:active{transform:translateY(1px);box-shadow:inset 0 2px 0 #0007}
html body #menu#menu .ld-build-chips i{width:22px;height:22px}
html body #menu#menu .ld-build-chips :is(.spell-icon,img,canvas,.perk-card-art){width:18px;height:18px}
html.broadcast body #menu#menu [data-channel=play] .bc-room-line>#practice-bots{flex:none;min-height:36px;padding:5px 16px 6px 18px;font-size:12px}
/* A narrow CH 03 (small desktop windows such as 800x600, where the channel is about 300px wide): the loadout reflows
   instead of squashing, and the TALENTS row moves to the top so it is the first thing in the channel. */
html body #menu#menu [data-channel=loadout] .build-panel{container-type:inline-size;grid-template-columns:minmax(0,1fr)}
@container (max-width:460px){
  html body #menu#menu [data-channel=loadout] #ability-picker>.ld-build{order:-1}
  html body #menu#menu [data-channel=loadout] .sig-row{grid-template-columns:1fr}
  html body #menu#menu [data-channel=loadout] .ld-equipped{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #menu#menu [data-channel=loadout] .ld-main{grid-template-columns:1fr;flex:none}
  html body #menu#menu [data-channel=loadout] .ld-detail{overflow:visible}
  html body #menu#menu [data-channel=loadout] :is(.build-panel,#ability-picker){height:auto}
}
/* Landscape phones scroll the channel, so the detail panel beside the abilities would size the row to its text and
   every swap (a new focused ability) would stretch the loadout. It takes the abilities' height and scrolls inside. */
@media (max-height:520px) and (orientation:landscape){
  @container (min-width:461px){html body #menu#menu [data-channel=loadout] .ld-detail{contain:size;overflow-y:auto}}
}

/* TALENTS header: the hero's niche (the old HEROES fact sheet) and the signature passive tile. */
:root #build-studio#build-studio .bs-title h2{font-size:24px}
:root #build-studio#build-studio .bs-hero{display:flex;align-items:center;gap:6px;margin:2px 0 0;font:var(--bb-label-s,11px/1.2 'Bully Label',sans-serif);letter-spacing:.06em;color:var(--bb-text-soft,#b9c6bb);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root #build-studio#build-studio .bs-hero b{color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-passive{display:flex;align-items:center;gap:8px;max-width:340px;min-width:0;padding:4px 10px 4px 4px;background:var(--bb-raised,#1f2620);border:2px solid #ffe46b;border-radius:6px}
:root #build-studio#build-studio .bs-passive>:is(.spell-icon,img,canvas,svg,i:first-child){width:34px;height:34px;flex:none}
:root #build-studio#build-studio .bs-passive span{display:grid;min-width:0}
:root #build-studio#build-studio .bs-passive small{font:var(--bb-label-s,10px/1.2 'Bully Label',sans-serif);letter-spacing:.06em;color:#ffe46b;text-transform:uppercase}
:root #build-studio#build-studio .bs-passive b{font:15px/1.05 var(--bb-font-display,'Bully Display',sans-serif);font-weight:400}
:root #build-studio#build-studio .bs-passive i{font:500 11px/1.2 var(--bb-font-body,'Bully Body',sans-serif);font-style:normal;color:var(--bb-text-soft,#b9c6bb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){:root #build-studio#build-studio .bs-passive i{display:none}}
@media (max-height:520px),(max-width:760px){:root #build-studio#build-studio .bs-passive{display:none}}

/* LOADOUT, desktop first (1920x1080, 1366x768): the hero's 4 fixed abilities as big buttons, icon over name (Nov 2: nothing
   to pick, so the row is the kit), and the ultimate cards under them. */
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-equipped{grid-template-columns:repeat(4,minmax(0,1fr))}
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-kit .ld-slot{flex-direction:column;justify-content:center;gap:4px;padding:7px 4px 6px}
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-kit .ld-slot .spell-icon{width:44px;height:44px;flex:none}
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-kit .ld-slot span{font-size:12px;letter-spacing:.01em;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center;line-height:1.05}
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-left{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
html body #menu#menu .ld-ultcards{display:grid;grid-template-columns:repeat(var(--ults,2),minmax(0,1fr));gap:6px}
html body #menu#menu .ld-ultcard{--tag:var(--bb-orange,#ff8a29);position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:8px;min-height:0;margin:0;padding:6px 8px;text-align:left;color:#fff;background:#2a0e1c;border:2px solid #000;border-image:none;box-shadow:inset 0 0 0 2px #6b2a4a;filter:none;transform:none;cursor:pointer}
html body #menu#menu .ld-ultcard[data-tag=team]{--tag:var(--bb-cyan,#75eced)}
html body #menu#menu .ld-ultcard[data-tag=multi]{--tag:var(--bb-lime,#ceff24)}
html body #menu#menu .ld-ultcard .spell-icon{width:44px;height:44px;margin:0}
html body #menu#menu .ld-ultcard span{display:grid;gap:1px;min-width:0}
html body #menu#menu .ld-ultcard small{font:var(--bb-label-s);font-size:10px;letter-spacing:.06em;color:var(--tag)}
html body #menu#menu .ld-ultcard b{font:var(--bb-display-s);font-size:15px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase}
html body #menu#menu .ld-ultcard i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:var(--bb-body-s);font-size:11px;line-height:1.25;font-style:normal;color:#e6d9e2}
html body #menu#menu .ld-ultcard em{position:absolute;top:-8px;right:6px;padding:2px 5px;font:var(--bb-number-s);font-size:10px;font-style:normal;letter-spacing:.05em;color:#05080c;background:var(--tag);border-radius:3px}
html body #menu#menu .ld-ultcard:hover,html body #menu#menu .ld-ultcard:focus-visible{box-shadow:inset 0 0 0 2px var(--bb-cyan,#75eced);outline:none}
html body #menu#menu .ld-ultcard[aria-pressed=true]{background:color-mix(in srgb,var(--tag) 18%,#2a0e1c);box-shadow:inset 0 0 0 2px var(--tag),0 0 10px color-mix(in srgb,var(--tag) 40%,transparent)}
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-ultcards[style*="--ults:1"] .ld-ultcard{cursor:default}
/* Taller screens give the ability buttons more room. */
@media (min-height:900px){
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-kit .ld-slot .spell-icon{width:54px;height:54px}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-kit .ld-slot span{font-size:13.5px}
  html body #menu#menu .ld-ultcard{padding:8px 10px;grid-template-columns:52px minmax(0,1fr)}
  html body #menu#menu .ld-ultcard .spell-icon{width:52px;height:52px}
  html body #menu#menu .ld-ultcard b{font-size:17px}
  html body #menu#menu .ld-ultcard i{font-size:12px}
}
/* Desktop first: the ability side of LOADOUT gets the room (bigger buttons, two ultimate cards side by side). */
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-main{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
/* TALENTS fills a big desktop screen (1920x1080) instead of staying at the 1280 size. */
:root #build-studio#build-studio.build-studio{width:min(1640px,calc(100vw - 32px));height:min(940px,calc(100dvh - 32px))}
@media (min-width:1500px) and (min-height:860px){
  :root #build-studio#build-studio .bs-node b{font-size:15px}
  :root #build-studio#build-studio .bs-node.is-wide b{font-size:17px}
  :root #build-studio#build-studio .bs-short{font-size:12.5px}
  :root #build-studio#build-studio .bs-node{min-height:58px}
  :root #build-studio#build-studio .bs-node.is-wide{min-height:50px}
  :root #build-studio#build-studio .bs-root b{font-size:21px}
  :root #build-studio#build-studio .bs-root :is(.spell-icon,img,canvas){width:32px;height:32px}
  :root #build-studio#build-studio .bs-perk b{font-size:17px}
  :root #build-studio#build-studio .bs-perk .bs-short{font-size:13.5px}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:56px;height:56px}
  :root #build-studio#build-studio .bs-perk{grid-template-columns:56px minmax(0,1fr)}
  :root #build-studio#build-studio .bs-detail p{font-size:15.5px}
}
/* The ability side never squashes its buttons; on 768-tall screens the ultimate cards tighten so the abilities and the
   ultimate cards still fit without scrolling. */
html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-left>*{flex:none}
@media (max-height:860px){
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-ultcard{padding:4px 8px}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-ultcard i{-webkit-line-clamp:1}
}
@container (max-width:460px){
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-main{grid-template-columns:1fr}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-left{overflow:visible;min-height:auto}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker .ld-ultcards{grid-template-columns:1fr}
}
/* Each tree opens with its base ability (build-studio.js baseChips): name and stat chips on one line, what it does under
   them, then the branches on a canvas below. Chosen nodes show their stat changes in lime. */
:root #build-studio#build-studio .bs-tree{display:grid;grid-template-rows:auto minmax(0,1fr)}
:root #build-studio#build-studio .bs-canvas{position:relative;min-height:0;margin:0 0 4px}
:root #build-studio#build-studio .bs-root{position:static;transform:none;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;max-width:none;margin:5px 6px 2px;padding:5px 8px 5px 5px;white-space:normal;border-radius:6px;background:var(--bb-raised,#1f2620);border:2px solid var(--bb-line,#4d5a3a)}
:root #build-studio#build-studio .bs-root.is-lit{border-color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-root>:is(.spell-icon,img,canvas){width:36px;height:36px}
:root #build-studio#build-studio .bs-root>div{min-width:0}
:root #build-studio#build-studio .bs-root p{margin:0}
:root #build-studio#build-studio .bs-root-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
:root #build-studio#build-studio .bs-root-line>b{font:var(--bb-display-s,18px/1.05 'Bully Display',sans-serif);font-weight:400;letter-spacing:.3px}
:root #build-studio#build-studio .bs-chips{display:flex;flex-wrap:wrap;gap:3px}
:root #build-studio#build-studio .bs-chips i{padding:1px 6px;font:600 11px/1.35 var(--bb-font-body,'Bully Body',sans-serif);font-style:normal;color:var(--bb-text,#eef1dc);background:var(--bb-night,#0c110d);border:1px solid #4d5a3a;border-radius:9px;white-space:nowrap}
:root #build-studio#build-studio .bs-chips i:first-child{color:var(--bb-ink,#05080c);background:var(--bb-lime,#ceff24);border-color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-root-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;margin-top:2px;font:500 12px/1.3 var(--bb-font-body,'Bully Body',sans-serif);color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-delta{font:700 10.5px/1.15 var(--bb-font-body,'Bully Body',sans-serif);font-style:normal;color:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-node[data-tier="3"] .bs-delta{color:var(--bb-orange,#ff8a29)}
:root #build-studio#build-studio .bs-detail-delta{font-style:normal;font-weight:700;color:var(--bb-lime,#ceff24)}
@media (min-width:1500px) and (min-height:860px){
  :root #build-studio#build-studio .bs-root>:is(.spell-icon,img,canvas){width:42px;height:42px}
  :root #build-studio#build-studio .bs-root{grid-template-columns:42px minmax(0,1fr)}
  :root #build-studio#build-studio .bs-root-line>b{font-size:20px}
  :root #build-studio#build-studio .bs-chips i{font-size:12.5px}
  :root #build-studio#build-studio .bs-root-desc{font-size:13.5px;-webkit-line-clamp:2}
  :root #build-studio#build-studio .bs-delta{font-size:12px}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-root{margin:3px 4px 1px;padding:2px 6px 2px 2px;grid-template-columns:22px minmax(0,1fr)}
  :root #build-studio#build-studio .bs-root>:is(.spell-icon,img,canvas){width:22px;height:22px}
  :root #build-studio#build-studio .bs-root-line>b{font-size:12px}
  :root #build-studio#build-studio .bs-chips i{font-size:9px;padding:0 4px}
  :root #build-studio#build-studio .bs-root-desc,:root #build-studio#build-studio .bs-delta{display:none}
}

/* Build slots (slot-tabs.js): one slim row of tabs 1/2/3 on LOADOUT and in the TALENTS header, the active slot lime. */
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs{display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:2px;background:var(--bb-night,#0c110d);border:2px solid var(--bb-line,#4d5a3a);border-radius:6px}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs>small{padding:0 4px 0 3px;font:var(--bb-label-s,11px/1.2 'Bully Label',sans-serif);letter-spacing:1px;color:var(--bb-lime,#ceff24)}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab{flex:1 1 0;display:flex;align-items:center;gap:6px;min-width:0;min-height:24px;margin:0;padding:2px 8px;font:13px/1 var(--bb-font-display,'Bully Display',sans-serif);letter-spacing:.5px;color:var(--bb-text-soft,#b9c6bb);background:transparent;background-image:none;clip-path:none;border:2px solid transparent;border-radius:4px;box-shadow:none;text-transform:uppercase;cursor:pointer}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab b{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:3px;font:12px/1 var(--bb-font-number,'Bully Number',sans-serif);color:var(--bb-ink,#05080c);background:var(--bb-text-soft,#b9c6bb)}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab.is-new span{opacity:.55}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab[aria-selected=true]{color:var(--bb-ink,#05080c);background:var(--bb-lime,#ceff24);border-color:var(--bb-lime,#ceff24)}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab[aria-selected=true] b{color:var(--bb-lime,#ceff24);background:var(--bb-ink,#05080c)}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab:hover:not([aria-selected=true]),html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab:focus-visible,html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-rename:hover,html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-rename:focus-visible{border-color:var(--bb-cyan,#75eced);outline:none}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-name{min-width:0;width:100%;height:20px;margin:0;padding:0 4px;font:13px/1 var(--bb-font-display,'Bully Display',sans-serif);letter-spacing:.5px;text-transform:uppercase;color:var(--bb-text,#eef3ea);background:var(--bb-ink,#05080c);border:1px solid var(--bb-cyan,#75eced);border-radius:3px}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-rename{flex:none;width:26px;min-height:24px;margin:0;padding:0;font:14px/1 sans-serif;color:var(--bb-text-soft,#b9c6bb);background:transparent;background-image:none;clip-path:none;border:2px solid transparent;border-radius:4px;box-shadow:none;cursor:pointer}
:root #build-studio#build-studio .bs-head .slot-tabs{flex:none}
:root #build-studio#build-studio .bs-head .slot-tab{flex:none;max-width:150px}
:root #build-studio#build-studio .bs-head .bs-title{flex:1 1 200px;min-width:190px}
:root #build-studio#build-studio .bs-head .bs-passive{flex:0 1 340px}
/* Narrower screens: waiting slots show just their number in the TALENTS header (the name is on hover). */
@media (max-width:1700px){:root #build-studio#build-studio .bs-head .slot-tab:not([aria-selected=true]){flex:none}:root #build-studio#build-studio .bs-head .slot-tab:not([aria-selected=true]) span{display:none}}
/* On the broadcast LOADOUT channel the slot row rides in the channel's header line (CH 03 LOADOUT ... BUILD 1 2 3),
   which is otherwise empty, so the loadout keeps every pixel it had. */
@media (min-width:1000px){
  html.broadcast body #menu#menu [data-channel=loadout].bc-channel{position:relative}
  html.broadcast body #menu#menu [data-channel=loadout] #ability-picker>.slot-tabs.slot-tabs{position:absolute;top:4px;right:8px;width:min(460px,calc(100% - 200px));z-index:2}
}
html body :is(#menu,#build-studio) .slot-tabs.slot-tabs .slot-tab[aria-selected=true]{flex-grow:1.8}
/* One tree at a time, full sentences (build-studio.js, Mike Oct 30: "are you trying to save space with words?").
   Ability tabs across the top; the selected tree gets the whole panel; every node and perk shows its full card text. */
:root #build-studio#build-studio .bs-body:has(.bs-trees.is-single){display:flex;flex-direction:column;gap:6px}
:root #build-studio#build-studio .bs-ability-tabs{display:flex;gap:6px;flex:none}
:root #build-studio#build-studio .bs-ability-tab{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:4px 10px;border:2px solid var(--bb-line,#4d5a3a);border-radius:6px;background:var(--bb-night,#0c110d);color:var(--bb-text-soft,#c9d3c4);font:400 15px/1 var(--bb-font-display,'Bully Display',sans-serif);text-align:left;cursor:pointer}
:root #build-studio#build-studio .bs-ability-tab :is(.spell-icon,img,svg){flex:none;width:28px;height:28px}
:root #build-studio#build-studio .bs-ability-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root #build-studio#build-studio .bs-ability-tab b{flex:none;margin-left:auto;padding:2px 6px;border-radius:4px;background:var(--bb-lime,#ceff24);color:#0c110d;font:400 12px/1 var(--bb-font-label,'Bully Label',sans-serif)}
:root #build-studio#build-studio .bs-ability-tab[aria-selected=true]{border-color:var(--bb-lime,#ceff24);color:var(--bb-text,#eef1dc);background:color-mix(in srgb,var(--bb-lime,#ceff24) 14%,var(--bb-night,#0c110d))}
:root #build-studio#build-studio .bs-ability-tab:is(:hover,:focus-visible){border-color:var(--bb-cyan,#75eced);outline:none}
:root #build-studio#build-studio .bs-trees.is-single{display:block;flex:1 1 auto;min-height:0;height:auto}
:root #build-studio#build-studio .bs-trees.is-single .bs-tree{height:100%}
:root #build-studio#build-studio .bs-trees.is-single .bs-node{gap:4px;padding:6px 10px}
:root #build-studio#build-studio .bs-trees.is-single .bs-node b{font-size:16px}
:root #build-studio#build-studio .bs-trees.is-single .bs-node.is-wide b{font-size:18px}
:root #build-studio#build-studio .bs-card{display:block;font:500 13.5px/1.3 var(--bb-font-body,'Bully Body',sans-serif);font-style:normal;color:var(--bb-text,#eef1dc);white-space:normal;overflow-wrap:break-word}
/* Dimmed, still readable: other branches and nodes not yet open. */
:root #build-studio#build-studio .bs-trees.is-single .bs-node[data-locked]{opacity:.78;filter:saturate(.4)}
:root #build-studio#build-studio .bs-trees.is-single .bs-node[data-locked] .bs-card{color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-detail .bs-status{margin:0;font-size:13px;line-height:1.35}
:root #build-studio#build-studio .bs-detail .bs-status b{margin-right:6px}
:root #build-studio#build-studio .bs-perk .bs-card{font-size:12.5px;line-height:1.28;color:var(--bb-text,#eef1dc)}
:root #build-studio#build-studio .bs-perk span{min-width:0}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-ability-tab{min-height:30px;padding:2px 8px;font-size:12px;gap:6px}
  :root #build-studio#build-studio .bs-ability-tab :is(.spell-icon,img,svg){width:20px;height:20px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root-desc{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{gap:2px;padding:3px 6px;min-height:0}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node b,:root #build-studio#build-studio .bs-trees.is-single .bs-node.is-wide b{font-size:12.5px}
  :root #build-studio#build-studio .bs-card{font-size:11.5px;line-height:1.22}
  :root #build-studio#build-studio .bs-perk .bs-card{display:block;font-size:10.5px;line-height:1.2}
  :root #build-studio#build-studio .bs-perk :is(small,em){display:none}
  :root #build-studio#build-studio .bs-detail{min-height:0}
}
/* Phones: a tree layout can't hold full sentences at this height, so each fork branch is a column: the fork, its tier-2
   options side by side, then the capstone (the node's --col and --span from build-studio.js). The help strip goes;
   a picked or hovered node's status still shows under the tree. */
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-canvas{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-template-rows:auto auto auto;align-content:start;gap:5px 6px;padding:4px 2px 2px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-links{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;grid-column:var(--col) / span var(--span);place-items:start center}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node[data-tier="1"]{grid-row:1}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node[data-tier="2"]{grid-row:2}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node[data-tier="3"]{grid-row:3}
  :root #build-studio#build-studio .bs-detail.is-help{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-card-ability{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{height:auto;max-height:none;overflow:visible}
}
@media (max-height:390px){
  :root #build-studio#build-studio .bs-card{font-size:11px;line-height:1.18}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node b,:root #build-studio#build-studio .bs-trees.is-single .bs-node.is-wide b{font-size:12px}
}
/* Perks with their full text: art beside the name, the sentence across the whole card, the tags under it. */
:root #build-studio#build-studio .bs-perk{grid-template-columns:30px minmax(0,1fr);grid-auto-rows:auto;align-items:center;align-content:start;column-gap:8px;row-gap:3px;padding:6px 8px}
:root #build-studio#build-studio .bs-perk>.perk-card-art{width:30px;height:30px;grid-row:1}
:root #build-studio#build-studio .bs-perk>span{display:contents}
:root #build-studio#build-studio .bs-perk b{grid-column:2;grid-row:1}
:root #build-studio#build-studio .bs-perk :is(.bs-card,small,em){grid-column:1/-1}
:root #build-studio#build-studio[data-tab=perks] .bs-detail.is-help{display:none}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-perk{grid-template-columns:20px minmax(0,1fr);padding:3px 5px;row-gap:1px;column-gap:5px}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:20px;height:20px}
}
/* Shorter screens: the perk slot row goes (each picked card carries its slot number), the tags share one line, and the
   text drops a size, so all 22 perks still fit with their full text. */
@media (max-height:800px){
  :root #build-studio#build-studio .bs-body:has(.bs-perks){grid-template-rows:minmax(0,1fr)}
  :root #build-studio#build-studio .bs-perk-slots{display:none}
  :root #build-studio#build-studio .bs-perk .bs-card{font-size:11.5px;line-height:1.22}
  :root #build-studio#build-studio .bs-perk :is(small,em){grid-column:auto;display:inline}
  :root #build-studio#build-studio .bs-perk{grid-template-columns:24px minmax(0,1fr)}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:24px;height:24px}
  :root #build-studio#build-studio .bs-perk b{font-size:13px}
}
/* Narrow desktops: the header row holds the tabs, build slots and actions; the signature box (also on the loadout)
   folds away so DONE is never cut off. */
@media (max-width:1180px) and (min-height:521px){
  :root #build-studio#build-studio .bs-passive{display:none}
}
@media (max-height:800px){:root #build-studio#build-studio .bs-perks{gap:4px}:root #build-studio#build-studio .bs-perk{padding:4px 6px;row-gap:2px}}
:root #build-studio#build-studio .bs-perk-filter{display:none}
/* Phones: one perk category at a time (a perk in two categories shows in both), 4 across. */
@media (max-height:520px){
  :root #build-studio#build-studio .bs-body:has(.bs-perks){grid-template-rows:auto minmax(0,1fr);gap:5px}
  :root #build-studio#build-studio .bs-perk-filter{display:flex;gap:6px}
  :root #build-studio#build-studio .bs-perk-filter button{flex:1;min-height:32px;margin:0;padding:3px 8px;border:2px solid var(--bb-line,#4d5a3a);border-radius:6px;background:var(--bb-night,#0c110d);color:var(--bb-text-soft,#c9d3c4);font:400 12px/1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.06em;cursor:pointer}
  :root #build-studio#build-studio .bs-perk-filter button b{color:var(--bb-lime,#ceff24);font-weight:400}
  :root #build-studio#build-studio .bs-perk-filter button[aria-selected=true]{border-color:var(--bb-lime,#ceff24);color:var(--bb-text,#eef1dc);background:color-mix(in srgb,var(--bb-lime,#ceff24) 14%,var(--bb-night,#0c110d))}
  :root #build-studio#build-studio .bs-perks{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
  :root #build-studio#build-studio[data-perk-cat=damage] .bs-perk:not([data-cats~=damage]),
  :root #build-studio#build-studio[data-perk-cat=defense] .bs-perk:not([data-cats~=defense]),
  :root #build-studio#build-studio[data-perk-cat=healing] .bs-perk:not([data-cats~=healing]){display:none}
  :root #build-studio#build-studio .bs-perk .bs-card{font-size:11px;line-height:1.2}
  :root #build-studio#build-studio .bs-perk b{font-size:12px}
  :root #build-studio#build-studio .bs-perk :is(small,em){display:none}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-perk{grid-template-columns:16px minmax(0,1fr);padding:3px 5px 2px;row-gap:1px}
  :root #build-studio#build-studio .bs-perk>.perk-card-art{width:16px;height:16px}
  :root #build-studio#build-studio .bs-perk b{font-size:11.5px;line-height:1}
  :root #build-studio#build-studio .bs-perk .bs-card{font-size:10.5px;line-height:1.16}
  :root #build-studio#build-studio .bs-perk-filter button{min-height:28px}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-body:has(.bs-perks){gap:3px}
  :root #build-studio#build-studio .bs-perks{gap:3px}
  :root #build-studio#build-studio .bs-perk-filter button{min-height:26px;padding:2px 8px}
  :root #build-studio#build-studio .bs-perk .bs-card{line-height:1.12}
}
@media (max-height:380px){:root #build-studio#build-studio .bs-perk .bs-card{font-size:10px;line-height:1.1}:root #build-studio#build-studio .bs-perk{padding:2px 5px 1px}}
/* Big screens: the one tree has room, so its text grows. */
@media (min-height:860px) and (min-width:1300px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-card{font-size:15.5px;line-height:1.32}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node b{font-size:18px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node.is-wide b{font-size:20px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{padding:8px 12px}
}
/* Desktop: all four trees (2x2), each with its branches as columns and every node's exact line in full (build-studio.js
   branchTreeMarkup). Nodes size to their text; text never clamps. */
:root #build-studio#build-studio .bs-trees.is-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;height:100%}
:root #build-studio#build-studio .bs-tree.is-branches{display:flex;flex-direction:column;gap:4px;padding:4px;overflow:hidden}
:root #build-studio#build-studio .bs-tree.is-branches .bs-root{flex:none;padding:2px 8px 2px 2px}
:root #build-studio#build-studio .bs-tree.is-branches .bs-root :is(.spell-icon,img,canvas){width:24px;height:24px}
:root #build-studio#build-studio .bs-tree.is-branches .bs-root-line b{font-size:15px}
:root #build-studio#build-studio .bs-branches{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(var(--branches,2),minmax(0,1fr));gap:6px}
:root #build-studio#build-studio .bs-branch{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0;min-height:0;padding-left:8px}
/* The branch rail: lime once the fork is in the build. */
:root #build-studio#build-studio .bs-branch::before{content:'';position:absolute;left:2px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--bb-line,#4d5a3a)}
:root #build-studio#build-studio .bs-branch.is-lit::before{background:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-t2{display:flex;flex-direction:column;gap:2px}
:root #build-studio#build-studio .bs-or{align-self:center;font:400 10px/1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.12em;color:var(--bb-text-soft,#9aa59a)}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node{position:relative;left:auto;top:auto;transform:none;width:auto;min-height:0;display:block;margin:0;padding:3px 7px 4px;text-align:left}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node b{display:block;font-size:13px;line-height:1.05}
:root #build-studio#build-studio .bs-tree.is-branches .bs-card{display:block;margin-top:1px;font-size:12px;line-height:1.22}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node[data-locked]{opacity:.78;filter:saturate(.4)}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node[data-locked] .bs-card{color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-tree.is-branches .bs-slot{top:-6px;right:-5px}
@media (min-height:860px) and (min-width:1300px){
  :root #build-studio#build-studio .bs-tree.is-branches .bs-card{font-size:13px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node b{font-size:14px}
}
/* Room for the exact lines on desktop: the dialog takes the screen's height, the forks tab's hero header shrinks to the
   name and role (the stat chips live on the loadout), and the strip under the trees is one or two lines. */
@media (min-height:521px){
  :root #build-studio#build-studio.build-studio[data-tab=forks]{height:calc(100dvh - 16px);width:min(1640px,calc(100vw - 16px));padding:8px 10px;gap:6px}
  :root #build-studio#build-studio[data-tab=forks] .bs-title .section-kicker,:root #build-studio#build-studio[data-tab=forks] .bs-title .stat-chips{display:none}
  :root #build-studio#build-studio[data-tab=forks] .bs-title h2{font-size:20px}
  :root #build-studio#build-studio[data-tab=forks] .bs-detail{min-height:0;padding:4px 10px}
  :root #build-studio#build-studio[data-tab=forks] .bs-detail p{font-size:12.5px;line-height:1.3;margin:0}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-card{line-height:1.16}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node{padding:2px 6px 3px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node b{font-size:12.5px}
}
@media (min-height:521px){
  :root #build-studio#build-studio .bs-or{font-size:9px;line-height:9px;margin:-1px 0}
  :root #build-studio#build-studio .bs-t2{gap:1px}
  :root #build-studio#build-studio .bs-branch{gap:3px}
  :root #build-studio#build-studio .bs-trees.is-grid{gap:5px}
  :root #build-studio#build-studio .bs-tree.is-branches{gap:3px;padding:3px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-root{padding:1px 6px 1px 1px;min-height:0}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-root :is(.spell-icon,img,canvas){width:20px;height:20px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-chips i{font-size:11px;padding:0 5px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node b{line-height:1}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-card{margin-top:0}
}
/* The two rows of trees share the height by what they hold (a wordy row takes room a lighter one doesn't need). */
:root #build-studio#build-studio .bs-trees.is-grid{grid-auto-rows:auto;align-content:stretch}
@media (min-height:521px){
  :root #build-studio#build-studio.build-studio[data-tab=forks]{padding:6px 8px;gap:4px}
  :root #build-studio#build-studio[data-tab=forks] .bs-detail{padding:2px 10px}
  :root #build-studio#build-studio .bs-trees.is-grid{gap:4px}
}
/* Last resort, never hidden text: a tree whose exact lines outgrow its quarter (a few wordy trees at 1024x768)
   scrolls inside its own branch area; the others are untouched. */
@media (min-height:521px){:root #build-studio#build-studio .bs-tree.is-branches .bs-branches{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
/* The loadout's exact stat block (lobby-loadout.js exactRows): label column, value column, one row each. */
html body #menu#menu .ld-detail .ld-exact{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:1px 10px;margin:0;font:500 12px/1.3 var(--bb-font-body,'Bully Body',sans-serif)}
html body #menu#menu .ld-detail .ld-exact dt{font:400 11px/1.35 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.05em;color:var(--bb-cyan,#75eced);text-transform:uppercase}
html body #menu#menu .ld-detail .ld-exact dd{margin:0;color:var(--bb-text,#eef1dc);overflow-wrap:anywhere}
/* The exact stat block never hides: the ability preview animation gives up its room first, then the panel scrolls. */
html body #menu#menu .ld-detail:has(.ld-exact){overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html body #menu#menu .ld-detail:has(.ld-exact) .ld-stage{flex:0 0 96px;min-height:96px}
html body #menu#menu .ld-detail:has(.ld-exact)>*{flex-shrink:0}
/* With the exact block, the preview animation gives way entirely, and the panel takes the full height beside the slots. */
html body #menu#menu .ld-detail:has(.ld-exact) .ld-stage{display:none}
html body #menu#menu .ld-detail .ld-exact{font-size:11.5px;line-height:1.25}
html body #menu#menu .ld-detail .ld-exact dt{font-size:10.5px}
/* Oct 31 (Mike: "so much drift on this screen when changes are made"): each desktop tree is one grid, a column per
   branch and a row per tier slot, so a row is as tall as its wordiest node and a pick changes only colours. The
   header is held at its tallest pick state (build-studio.js reserveHeaders). No bar under the trees. */
:root #build-studio#build-studio .bs-tree.is-branches .bs-branches{display:grid;grid-template-columns:repeat(var(--branches,2),minmax(0,1fr));grid-template-rows:repeat(var(--rows,4),auto);align-content:space-between;column-gap:8px;row-gap:9px;overflow:visible}
:root #build-studio#build-studio .bs-rail{position:relative;justify-self:start;width:3px;margin-left:-6px;border-radius:2px;background:var(--bb-line,#4d5a3a);pointer-events:none}
:root #build-studio#build-studio .bs-rail.is-lit{background:var(--bb-lime,#ceff24)}
:root #build-studio#build-studio .bs-tree.is-branches .bs-branches{padding-left:6px}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node{align-self:stretch;border-width:2px}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node[data-tier="3"]{border-width:4px}
:root #build-studio#build-studio .bs-node[data-or]::before{content:'OR';position:absolute;left:50%;top:-9px;transform:translate(-50%,-50%);font:400 9px/1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.12em;color:var(--bb-text-soft,#9aa59a)}
:root #build-studio#build-studio .bs-slot[hidden]{display:none}
/* Picked = border and colour only (no glow that changes the box). */
:root #build-studio#build-studio .bs-tree.is-branches .bs-node[aria-pressed=true]{box-shadow:none}
/* The as-built header: line 1 name and chips, line 2 the sentence, line 3 what the picks add. */
:root #build-studio#build-studio .bs-root[data-ability]{align-items:flex-start;box-sizing:border-box}
:root #build-studio#build-studio .bs-root-body{min-width:0;display:grid;gap:1px}
:root #build-studio#build-studio .bs-root[data-ability] .bs-root-desc{display:block;margin:0;font:500 11.5px/1.25 var(--bb-font-body,'Bully Body',sans-serif);color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-chips i.is-changed{background:color-mix(in srgb,var(--bb-lime,#ceff24) 22%,transparent);border-color:var(--bb-lime,#ceff24);color:var(--bb-text,#eef1dc)}
:root #build-studio#build-studio .bs-chips i s{opacity:.6;font-size:.9em}
:root #build-studio#build-studio .bs-built{margin:0;font:600 11.5px/1.25 var(--bb-font-body,'Bully Body',sans-serif);color:var(--bb-text,#eef1dc)}
:root #build-studio#build-studio .bs-built small{margin-right:4px;font:400 9.5px/1 var(--bb-font-label,'Bully Label',sans-serif);letter-spacing:.08em;color:var(--bb-lime,#ceff24)}
/* The status toast: over the bottom edge, outside the layout. */
:root #build-studio#build-studio .bs-toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;max-width:min(560px,calc(100% - 24px));padding:8px 14px;border:2px solid var(--bb-cyan,#75eced);border-radius:8px;background:var(--bb-night,#0c110d);box-shadow:3px 4px 0 #05080c;color:var(--bb-text,#eef1dc);font:600 13px/1.3 var(--bb-font-body,'Bully Body',sans-serif)}
:root #build-studio#build-studio .bs-toast[hidden]{display:none}
:root #build-studio#build-studio .bs-toast p{margin:0}
/* Room: a node's name runs into its line (one line saved per node); a node never shrinks below its text; the tree's
   branch grid scrolls inside itself only as a last resort (nothing hidden, nothing moved). */
:root #build-studio#build-studio .bs-tree.is-branches .bs-node{min-height:min-content}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node b{display:inline;margin-right:5px}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node .bs-card{display:inline}
:root #build-studio#build-studio .bs-tree.is-branches .bs-branches{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;row-gap:8px}
:root #build-studio#build-studio .bs-tree.is-branches{overflow:hidden}
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio .bs-tree.is-branches .bs-branches{row-gap:7px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node{padding:2px 6px 2px}
  :root #build-studio#build-studio .bs-root[data-ability] .bs-root-desc,:root #build-studio#build-studio .bs-built{line-height:1.2}
  :root #build-studio#build-studio .bs-trees.is-grid{gap:4px}
}
/* Rows are exactly as tall as their wordiest node (a node's own overflow setting would let an auto row shrink). */
:root #build-studio#build-studio .bs-tree.is-branches .bs-branches{grid-template-rows:repeat(var(--rows,4),max-content)}
:root #build-studio#build-studio .bs-tree.is-branches .bs-node{overflow:visible}
/* The header pads only what its words need: no empty band under short trees beyond the reserved height. */
:root #build-studio#build-studio .bs-root[data-ability]{padding-top:2px;padding-bottom:2px}
/* Shorter desktops (up to 800 px tall): the forks tab's top bar is one slim line (name and role on one line, the
   signature in its card on the loadout), so the trees get the height. */
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio[data-tab=forks] .bs-passive{display:none}
  :root #build-studio#build-studio[data-tab=forks] .bs-title{display:flex;align-items:baseline;gap:8px;flex:0 1 auto;min-width:0}
  :root #build-studio#build-studio[data-tab=forks] .bs-title h2{font-size:18px}
  :root #build-studio#build-studio[data-tab=forks] .bs-hero{margin:0}
  :root #build-studio#build-studio[data-tab=forks] .bs-tab{min-height:28px;padding:2px 10px;font-size:13px}
  :root #build-studio#build-studio[data-tab=forks] .bs-tab b{display:inline}
  :root #build-studio#build-studio[data-tab=forks] .bs-tabs{padding:2px}
  :root #build-studio#build-studio[data-tab=forks] .bs-actions .bb-btn{min-height:28px;padding:3px 10px;font-size:13px}
  :root #build-studio#build-studio[data-tab=forks] .slot-tabs{transform:scale(.9);transform-origin:center}
  :root #build-studio#build-studio .bs-root[data-ability] :is(.spell-icon,img,canvas){width:18px;height:18px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-root-line b{font-size:14px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-chips i{font-size:10.5px;line-height:1.35}
}
/* Phones: the one-tree view's rows are as tall as their text, and the compact header keeps the numbers and what the
   picks add (the sentence is in the loadout); the tree scrolls inside itself before anything overlaps. */
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-canvas{grid-template-rows:repeat(3,max-content);overflow-y:auto;overscroll-behavior:contain;min-height:0}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{overflow:visible;min-height:min-content}
  :root #build-studio#build-studio .bs-trees.is-single .bs-tree{display:flex;flex-direction:column}
  :root #build-studio#build-studio .bs-trees.is-single .bs-canvas{flex:1 1 auto}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability] .bs-root-desc{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-built{font-size:11px;line-height:1.2}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability]{padding:2px 6px 2px 2px}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-built{display:none}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node{display:block;text-align:left}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node b{display:inline;margin-right:4px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-node .bs-card{display:inline}
}
/* Shorter desktops (up to 800 px tall): the header keeps the as-built numbers and WITH YOUR PICKS; the plain sentence
   (also in the loadout) gives its line to the trees, so every tree fits with no scroll at 1366x768. */
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio .bs-tree.is-branches .bs-root[data-ability] .bs-root-desc{display:none}
}
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio .bs-tree.is-branches .bs-branches{row-gap:6px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-node{padding:1px 6px 2px}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-built{font-size:11px;line-height:1.18}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-card{line-height:1.15}
  :root #build-studio#build-studio .bs-tree.is-branches .bs-root[data-ability]{padding-top:1px;padding-bottom:1px}
}
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio.build-studio[data-tab=forks]{padding:4px 8px;gap:3px}
  :root #build-studio#build-studio .bs-trees.is-grid{gap:3px}
  :root #build-studio#build-studio .bs-tree.is-branches{padding:2px}
}
/* Real trees (build-studio.js realTreeMarkup): forks side by side under the header, tier-2 options side by side under
   each fork, the capstone across its branch at the bottom; connector lines in an SVG drawn from the laid-out boxes. */
:root #build-studio#build-studio .bs-tree.is-real{display:flex;flex-direction:column;gap:12px;padding:4px;overflow:hidden;min-height:0}
:root #build-studio#build-studio .bs-rt{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-template-rows:repeat(3,max-content);align-content:space-between;column-gap:6px;row-gap:14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
:root #build-studio#build-studio .bs-rt-links{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
:root #build-studio#build-studio .bs-rt-links path{fill:none;stroke:var(--bb-line,#4d5a3a);stroke-width:2}
:root #build-studio#build-studio .bs-rt-links path.is-lit{stroke:var(--bb-lime,#ceff24);stroke-width:3}
:root #build-studio#build-studio .bs-tree.is-real .bs-node{position:relative;z-index:1;left:auto;top:auto;transform:none;width:auto;min-height:min-content;display:block;margin:0;padding:3px 7px 4px;text-align:left;overflow:visible;border-width:2px}
:root #build-studio#build-studio .bs-tree.is-real .bs-node[data-tier="3"]{border-width:4px}
:root #build-studio#build-studio .bs-tree.is-real .bs-node b{display:inline;margin-right:5px;font-size:12.5px;line-height:1.05}
:root #build-studio#build-studio .bs-tree.is-real .bs-card{display:inline;font-size:12px;line-height:1.2}
:root #build-studio#build-studio .bs-tree.is-real .bs-node[aria-pressed=true]{box-shadow:none}
:root #build-studio#build-studio .bs-tree.is-real .bs-node[data-locked]{opacity:.78;filter:saturate(.4)}
:root #build-studio#build-studio .bs-tree.is-real .bs-node[data-locked] .bs-card{color:var(--bb-text-soft,#c9d3c4)}
:root #build-studio#build-studio .bs-tree.is-real .bs-slot{top:-7px;right:-5px}
:root #build-studio#build-studio .bs-slot[hidden]{display:none}
/* The full line of a clamped node, floating over the tree. */
:root #build-studio#build-studio .bs-pop{position:absolute;z-index:6;padding:7px 10px;border:2px solid var(--bb-cyan,#75eced);border-radius:6px;background:var(--bb-night,#0c110d);box-shadow:3px 4px 0 #05080c;color:var(--bb-text,#eef1dc);font:600 12.5px/1.3 var(--bb-font-body,'Bully Body',sans-serif);pointer-events:none}
:root #build-studio#build-studio .bs-pop[hidden]{display:none}
/* Tier-2 text holds to three lines when space is short (the full line is in the floating card). */
@media (max-height:800px){
  :root #build-studio#build-studio .bs-tree.is-real .bs-node[data-tier="2"] .bs-card{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node[data-tier="2"] b{display:block}
}
@media (max-height:800px) and (min-height:521px){
  :root #build-studio#build-studio .bs-tree.is-real{gap:10px;padding:2px}
  :root #build-studio#build-studio .bs-rt{row-gap:11px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node{padding:1px 6px 2px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-card{line-height:1.15}
}
/* Phones: one tree under the ability tabs, the same shape. */
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-tree.is-real{height:100%;gap:8px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-rt{row-gap:10px;column-gap:5px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node b{font-size:11.5px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-card{font-size:11px;line-height:1.15}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node{padding:1px 5px 2px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability] .bs-built{display:none}
}
/* The header's split lines start inside the tree grid (its top padding), so the grid's scroll box never clips them. */
:root #build-studio#build-studio .bs-tree.is-real{gap:0}
:root #build-studio#build-studio .bs-rt{padding-top:12px}
@media (max-height:800px){:root #build-studio#build-studio .bs-rt{padding-top:10px}}
@media (min-height:801px){
  :root #build-studio#build-studio .bs-tree.is-real .bs-node[data-tier="2"] .bs-card{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node[data-tier="2"] b{display:block}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-rt{row-gap:8px;padding-top:7px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability]{padding:1px 6px 1px 2px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability] :is(.spell-icon,img,canvas){width:18px;height:18px}
  :root #build-studio#build-studio .bs-ability-tab{min-height:28px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node .bs-card{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node b{display:inline}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node{display:block}
}
/* Landscape phones (390 px tall and less): a slimmer top bar and ability tabs give the tree its last lines. */
@media (max-height:400px){
  :root #build-studio#build-studio.build-studio{padding:4px 6px;gap:4px}
  :root #build-studio#build-studio .bs-tab{min-height:24px;padding:2px 8px;font-size:12px}
  :root #build-studio#build-studio .bs-tabs{padding:2px}
  :root #build-studio#build-studio .bs-actions .bb-btn{min-height:24px;padding:2px 8px;font-size:11px}
  :root #build-studio#build-studio .bs-ability-tab{min-height:24px;padding:1px 6px;font-size:11px}
  :root #build-studio#build-studio .bs-ability-tab :is(.spell-icon,img,svg){width:16px;height:16px}
  :root #build-studio#build-studio .bs-body:has(.bs-trees.is-single){gap:4px}
  :root #build-studio#build-studio .bs-trees.is-single .bs-rt{row-gap:7px;padding-top:6px}
}
@media (max-height:520px){
  :root #build-studio#build-studio .bs-trees.is-single .bs-rt{row-gap:7px;padding-top:6px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-node{padding:1px 5px 1px}
  :root #build-studio#build-studio .bs-tree.is-real .bs-card{line-height:1.12}
}
@media (max-height:400px){:root #build-studio#build-studio .bs-trees.is-single .bs-rt{row-gap:6px;padding-top:5px}:root #build-studio#build-studio .bs-trees.is-single .bs-root[data-ability]{padding-top:0;padding-bottom:0}}