/* bosswands.css — THE BOSS'S POWERS EDITOR (public/bosswands.js; D91, docs/design-boss-wands.md).
   It IS the Hearth's wand editor: every wand, slot, cast card, bench, bag, body and perk card uses the
   Hearth's own classes from style.css (.bwand .wslots .slot .wstats .preview .bench .bag .bodies .perk). This file
   only lays it out inside the builder (public/builder.css .bld: zoomed by --ui-scale like every screen), adds its few
   own pieces (the points bar, the mode switch, "how it fights", the skill levels) and keeps the 1280x720 sizes under
   the zoom (style.css's big-screen block would scale it twice). */

.bw-root { display: none; }
.bld.bw-on .bld-main > :not(.bw-root) { display: none !important; }
.bld.bw-on .bld-bot { display: none; }   /* its own hint line replaces the builder's */
.bld.bw-on .bw-root { display: flex; flex-direction: column; grid-column: 1 / -1; min-height: 0; min-width: 0; padding: 8px 14px 4px;
  background: var(--panel); border-top: 2px solid var(--edge2); box-shadow: inset 0 0 40px rgba(255, 200, 120, 0.05); --slot: 36px; }
.bw-root .bcols { flex: 1; min-height: 0; margin-top: 4px; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; }   /* (lane UIFIX: a wider right column wraps its cards' words less) */
.bw-root .bleft { min-height: 0; }
.bw-root .bwands { flex: 0 1 auto; }
.bw-root .bright { min-height: 0; }

/* the header: title, points, the boss / normal round switch, auto-build */
.bw-top { display: flex; align-items: center; gap: 14px; flex: none; border-bottom: 2px solid #2a231e; padding-bottom: 6px; }
.bw-pts { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-left: auto; white-space: nowrap; }
.bw-pts b { color: #fff; font-weight: 400; }
.bw-pts i { display: block; width: 120px; height: 8px; background: #120f14; border: 1px solid #3a3029; box-shadow: 0 0 0 1px #000; }
.bw-pts i u { display: block; height: 100%; background: linear-gradient(#f2c14e, #b08a2a); }
.bw-pts .low { color: #ff9a6a; }
.bw-pts .bw-body { color: var(--dimmer); }
.bw-modes { display: flex; gap: 2px; }
.bw-modes button.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#4a3c30, #33291f); }
.bw-acts { display: flex; gap: 4px; }

/* wands: the Hearth's .bwand; a warning badge; the add button */
.bw-root .bwand .whead button { flex: none; }
.bw-root .bwand .bw-warn { font-family: var(--title); font-size: 11px; color: #1a0a06; background: #ff9a6a; padding: 0 5px; cursor: help; flex: none; }
.bw-root .bwand .wtop { grid-template-columns: minmax(0, 1fr) clamp(240px, 38%, 300px); }   /* (lane UIFIX: 12 slots on one row beside it) */
.bw-root .bwand .pvsum { gap: 2px 12px; }
.bw-root .bwand .wslots { gap: 3px; }
.bw-root .slot.bw-mod { border-color: #2b3f6a; }
.bw-root .slot.bw-mod.held, .bw-root .slot.bw-mod.drop { border-color: var(--gold); }
.bw-root .slot.filled { cursor: grab; }
.bw-root.bw-dragging, .bw-root.bw-dragging * { cursor: grabbing !important; }
.bw-root .slot.held { box-shadow: 0 0 0 1px #000, 0 0 10px rgba(242, 193, 78, 0.5); }
.bw-root .bw-addw { cursor: default; padding: 3px 8px; }
.bw-root .bw-addw .whead { min-height: 22px; font-size: 13px; }
.bw-root .bw-addw small { color: var(--dimmer); font-size: 11px; flex: 1; }
.bw-root .bleft .baghead { margin-top: 4px; }
.bw-root .bodies.bw-bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bw-root .bw-bodies .shopitem.wand img { width: 48px; height: 18px; }
.bw-root .bench.boss { border-color: #5a3a2a; }

/* the collection: the Hearth's bag; its "back" box is the trash's shape */
.bw-root .bw-bag { min-height: calc(var(--slot) + 4px); }
.bw-root .bw-trash { border-color: #4a4030; color: #8a7a5a; }
.bw-root .bw-trash.drop { border-color: var(--gold); color: #ffe7a8; background: rgba(242, 193, 78, 0.08); }
.bw-root .bw-bag.drop { outline: 1px dashed var(--gold); outline-offset: 2px; }
.bw-emptybag { color: var(--dimmer); font-size: 12px; align-self: center; }

/* wand bodies: the Hearth's body cards; the selected wand's body lit */
.bw-root .bw-bodies .shopitem { cursor: pointer; }
.bw-root .bw-bodies .shopitem.bw-mine { border-color: var(--gold); }
.bw-root .bw-bodies .price { color: var(--gold); font-family: var(--title); font-size: 10px; }
.bw-root .bw-bodies .bw-in { color: var(--dimmer); font-size: 10px; }

/* the right column: how it fights, skills, perks, the rules */
.bw-fight { background: var(--panel2); border: 2px solid #2a231e; padding: 6px 8px; font-size: 12px; color: var(--dim); }
.bw-big { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 4px; }
.bw-big span { white-space: nowrap; }
.bw-big b { color: #fff; font-weight: 400; font-size: 15px; }
.bw-wl div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.bw-wl b { font-family: var(--title); font-size: 10px; color: var(--gold); font-weight: 400; margin-right: 3px; }
.bw-good, .bw-bad { margin: 4px 0 0; padding-left: 16px; line-height: 1.3; }
.bw-good li { color: #9ee07a; }
.bw-bad li { color: #ff9a6a; }
.bw-ok { margin-top: 4px; color: #9ee07a; }
.bw-root .perks.bw-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bw-root .perk { text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; align-items: start; }
.bw-root .perk img { grid-row: span 3; margin: 0; }
.bw-root .perk b, .bw-root .perk span { min-width: 0; }
.bw-root .perk.taken { background: rgba(80, 160, 60, 0.08); }
.bw-root .perk.taken::after { content: '✓'; }
.bw-lv { display: flex !important; gap: 2px; margin-top: 3px; }
.bw-lv button.small { padding: 1px 6px; font-size: 10px; }
.bw-lv button.on { border-color: var(--gold); color: #ffe7a8; }
.bw-rules { font-size: 11.5px; color: var(--dim); line-height: 1.35; background: rgba(0, 0, 0, 0.25); border: 1px solid #2a231e; padding: 4px 8px; }
.bw-rules p { margin: 3px 0; }
.bw-rules b { color: var(--text); font-weight: 400; }
.bw-hint { flex: none; font-size: 11px; color: var(--dimmer); padding-top: 4px; border-top: 1px solid #2a231e; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-hint kbd { font-family: var(--title); font-size: 10px; background: #1a1614; border: 1px solid var(--edge); padding: 0 4px; color: #fff; }
.bw-none { margin: 40px auto; color: var(--dim); }

/* lane UIFIX (verdict 14 #7: the perk row sat below the right column's fold at 1920x1080, the rules box under it): the
   whole step on screen at 1920x1080 and 1280x720. On a desktop the wand bodies are a row of four under the collection
   (bosswands.js), the right column holds how it fights, skills, perks and the rules. The same sizes at both (style.css's
   max-height and big-screen blocks would change the headings and the perk text), no text under 11 px, one-line buttons. */
.bw-root .bleft .bodies.bw-bodies { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bw-root .bleft .bodyhead h3 { margin-top: 8px; }
.bw-root .bleft h3, .bw-root .bright h3 { margin: 6px 0 4px; font-size: 12px; }
.bw-root h3 small { font-size: 11px; }
.bw-root .perk span { font-size: 11px; }
.bw-modes button, .bw-acts button { white-space: nowrap; }
.bw-root .bw-lv button.small { font-size: 11px; padding: 1px 5px; }
.bw-root .bw-wl b, .bw-root .bw-bodies .price, .bw-root .bw-bodies .bw-in, .bw-hint kbd { font-size: 11px; }
.bw-root .bw-rules { padding: 3px 7px; line-height: 1.3; }
.bw-root .bw-rules p { margin: 1px 0; }
.bw-root .bright h3 { margin: 5px 0 3px; }
.bw-root .bw-fight { padding: 5px 7px; }
.bw-root .htitle { font-size: 18px; }
.bw-root .bwand { padding: 4px 6px; margin-bottom: 4px; }
.bw-root .perk { grid-template-columns: 28px minmax(0, 1fr); column-gap: 5px; padding: 4px 5px; }
.bw-root .perk img { width: 28px; height: 28px; }
.bw-root .bw-bodies .wmeta .bw-in { font-weight: 400; color: var(--gold); }
.bw-root .bleft .bw-bodies .bn { white-space: normal; overflow: visible; text-overflow: clip; }   /* (a long name wraps: "Wild Shuffle Wand 8 pts" was cut) */

/* style.css's big-screen block (>= 1700 x 1000) enlarges the Hearth; the builder is already zoomed by
   --ui-scale there, so the editor keeps the 1280x720 sizes (the same look, 1.5x) */
@media (min-width: 1700px) and (min-height: 1000px) {
  .bld.bw-on .bw-root { --slot: 36px; }
  .bw-root .bcols { grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; }
  .bw-root .bwand .wname { font-size: 15px; }
  .bw-root .bwand .wstats, .bw-root .bwand .wsum { font-size: 12px; }
  .bw-root .bwand .wstats span { min-width: 96px; }
  .bw-root .bwand .pvi img { width: 16px; height: 16px; }
  .bw-root .bwand .pvcasts { gap: 4px; } .bw-root .bwand .pvcard { padding: 2px 5px 3px; }
  .bw-root .bench .bhud, .bw-root .bench .bghost { font-size: 10.5px; } .bw-root .bench .bghost img { width: 14px; height: 14px; }
  .bw-root .bwand .pvsum { font-size: 12px; } .bw-root .bwand .pvh, .bw-root .bwand .pvh b, .bw-root .bwand .pvw { font-size: 11px; } .bw-root .bwand .pvt { font-size: 10.5px; } .bw-root .bwand .pvpay, .bw-root .bwand .pvno small { font-size: 10px; }
  .bw-root .shopitem { font-size: 11px; } .bw-root .shopitem.wand.body .wmeta { font-size: 11px; }
  .bw-root .perk b { font-size: 13px; } .bw-root .perk span { font-size: 11px; }
}
@media (max-height: 780px) {
  .bw-root .perk img { width: 28px; height: 28px; }
  .bw-root .perk { grid-template-columns: 28px minmax(0, 1fr); }
}

/* ---- PHONES (lane ART2): the editor fits a landscape phone - finger-sized slots and buttons (44 px), compact rows,
   every name whole (it wraps, never clipped), no text under 11 px, the touch hint wraps under the columns. The left
   column (wands, collection) and the right (bodies, how it fights, skills, perks, rules) each scroll by whole items. */
body.phone .bld.bw-on .bw-root { --slot: 44px; padding: 3px max(6px, var(--sr)) 2px max(6px, var(--sl)); }
body.phone .bw-root .bcols { grid-template-columns: minmax(0, 1fr) clamp(210px, 33vw, 290px); gap: 8px; margin-top: 2px; }
body.phone .bw-root .bleft, body.phone .bw-root .bright { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-snap-type: y proximity; }
body.phone .bw-root .bleft > *, body.phone .bw-root .bwands > .bwand, body.phone .bw-root .bscroll > * { scroll-snap-align: start; }
body.phone .bw-top { gap: 6px; padding-bottom: 3px; flex-wrap: wrap; row-gap: 2px; }
body.phone .bw-top .htitle { display: none; }   /* (the top bar already says POWERS) */
body.phone .bw-pts { font-size: 11px; gap: 5px; margin-left: auto; }
body.phone .bw-pts i { width: 48px; height: 7px; }
body.phone .bw-pts .bw-body { display: none; }
body.phone .bw-modes button, body.phone .bw-acts button { font-size: 11px; padding: 2px 6px; letter-spacing: 1px; }
body.phone .bw-pts { margin-left: 0; margin-right: auto; }
body.phone .bw-root h3 { margin: 3px 0 2px; font-size: 12px; }
body.phone .bw-root h3 small { font-size: 11px; }
body.phone .bw-root .bwand { padding: 3px 5px 3px; margin-bottom: 4px; }
body.phone .bw-root .bwand .whead { flex-wrap: wrap; gap: 4px 6px; min-height: var(--tt); }
body.phone .bw-root .bwand .wname { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
body.phone .bw-root .bwand .wsum { flex-basis: 100%; order: 9; font-size: 11px; white-space: normal; }
body.phone .bw-root .bwand .whead button { margin-left: auto; }
body.phone .bw-root .bwand .whead button + button { margin-left: 0; }
body.phone .bw-root .bwand .wtop { grid-template-columns: minmax(0, 1fr); gap: 4px; }
body.phone .bw-root .bwand .bw-benchslot { max-width: 320px; }
body.phone .bw-root .bwand .wslots { gap: 4px; }
body.phone .bw-root .bw-addw .whead { flex-wrap: wrap; font-size: 12px; }
body.phone .bw-root .bw-addw small { font-size: 11px; }
body.phone .bw-root .bag { gap: 4px; }
body.phone .bw-root .bw-trash { width: 64px; font-size: 11px; padding: 4px; min-height: var(--tt); }
body.phone .bw-root .bodies.bw-bodies { grid-template-columns: minmax(0, 1fr); gap: 4px; }
body.phone .bw-root .shopitem.wand.body { min-height: var(--tt); font-size: 12px; padding: 3px 5px; }
body.phone .bw-root .shopitem.wand.body .bn { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.phone .bw-root .shopitem.wand.body .wmeta { font-size: 11px; }
body.phone .bw-root .bw-bodies .price, body.phone .bw-root .bw-bodies .bw-in { font-size: 11px; }
body.phone .bw-fight { font-size: 11px; padding: 4px 6px; }
body.phone .bw-big b { font-size: 13px; }
body.phone .bw-wl div { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; margin-bottom: 2px; }
body.phone .bw-wl b { font-size: 11px; }
body.phone .bw-root .perks.bw-skills, body.phone .bw-root .perks.bw-perks { grid-template-columns: minmax(0, 1fr); }
body.phone .bw-root .perk { grid-template-columns: 28px minmax(0, 1fr); min-height: var(--tt); padding: 4px; }
body.phone .bw-root .perk img { width: 28px; height: 28px; }
body.phone .bw-lv button.small { font-size: 11px; min-width: var(--tt); min-height: var(--tt); padding: 2px 6px; }
body.phone .bw-rules { font-size: 11px; }
body.phone .bw-hint { white-space: normal; font-size: 11px; line-height: 1.25; padding-top: 2px; margin-top: 2px; }