#loadoutDialog,#loadoutSummary,#resXp{--t-ink:#151b3e;--t-panel:#263971;--t-text:#fff;--t-muted:#c4d3f3;--t-gold:#ffda80;color:var(--t-text)}
#loadoutSummary{container-type:inline-size;margin-inline:-8px;padding:10px 8px;border:1px solid #6a83be;border-radius:14px;background:linear-gradient(130deg,#2c407e,#24356a);min-width:0}.setup-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.setup-title strong{font-size:16px}.setup-title button{min-height:44px;padding:8px 12px;background:#ffda80;color:#151b3e;border:1px solid #111b3e;border-radius:8px;font-weight:800}.setup-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.setup-slots button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:54px;padding:5px 0;background:#17264b;border:1px solid #b59856;border-radius:8px;color:white;cursor:pointer}.setup-slots .skill-icon{width:36px;height:36px}.setup-slots .slot-number{position:absolute;left:0;top:0;min-width:16px;background:#ffda80;color:#17203e;border-radius:4px 0 4px 0;font:800 11px/16px system-ui}.summary-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#resXp{padding:14px 18px;margin:14px 0;border:2px solid var(--t-ink);border-radius:14px;background:var(--t-panel)}#resXp strong{font-size:20px;color:var(--t-gold)}#resXp p{font-size:12px;margin:5px 0}#resXp .xp-unlock{font-weight:700;color:#b0f9cb}
.skill-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:8px;background:linear-gradient(145deg,#ffffff2b,#0005),var(--skill-color,#83abe6);border:2px solid #7c96be;box-shadow:inset 0 0 0 2px #11182d88,0 2px 4px #0008}.skill-icon svg{width:28px;height:28px}
/* Spellbook editor (Henry, 2026-11-02): one scrolling page. The class tile holds the passives, or the spell on the button you
   tapped; the six combat buttons sit below it in their HUD places; the spellbook lists every spell with Equip. Equipping
   saves at once (solo) and Undo puts the last change back. Styled with the bright menu's ink borders and pressed shadows. */
#loadoutDialog{--ink:var(--mb-ink,#1d2140);--lo-panel:var(--mb-panel,#3346b0);--lo-panel-2:var(--mb-panel-2,#2a3a96);--lo-yellow:var(--mb-yellow,#ffd166);--lo-yellow-2:var(--mb-yellow-2,#f4a92a);
  --lo-blue:var(--mb-blue,#4f9dff);--lo-blue-2:var(--mb-blue-2,#2f6fe0);--lo-cream:var(--mb-cream,#fff4d6);--lo-muted:#c9d3ff;--lo-warn:#ffb0a0;--lo-good:#8fffc0;
  --family:#6d92e0;--family-2:#3b4cbc;
  width:min(980px,100vw);height:100dvh;max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:0;color:#fff;overflow:hidden;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(ellipse at 20% 8%,color-mix(in srgb,var(--family) 38%,transparent),transparent 55%),
    radial-gradient(ellipse at 85% 92%,color-mix(in srgb,var(--family-2) 42%,transparent),transparent 55%),
    repeating-linear-gradient(135deg,#ffffff08 0 22px,transparent 22px 44px),
    linear-gradient(165deg,color-mix(in srgb,#3b4cbc 86%,var(--family)),#2a3170 55%,color-mix(in srgb,#211c5c 88%,var(--family-2)))}
@media(min-width:700px) and (min-height:500px){#loadoutDialog{height:min(900px,calc(100dvh - 24px));border:3px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink),0 22px 60px #0b0f3aa0}}
#loadoutDialog[data-family="warrior"]{--family:#c69b6d;--family-2:#7d5a36}
#loadoutDialog[data-family="paladin"]{--family:#f48cba;--family-2:#a8467a}
#loadoutDialog[data-family="hunter"]{--family:#aad372;--family-2:#5a8433}
#loadoutDialog[data-family="rogue"]{--family:#fff468;--family-2:#b8a81c}
#loadoutDialog[data-family="priest"]{--family:#ffffff;--family-2:#a9b4c2}
#loadoutDialog[data-family="shaman"]{--family:#0070dd;--family-2:#003a78}
#loadoutDialog[data-family="mage"]{--family:#3fc7eb;--family-2:#1a6f94}
#loadoutDialog[data-family="warlock"]{--family:#8788ee;--family-2:#45469e}
#loadoutDialog[data-family="druid"]{--family:#ff7c0a;--family-2:#a84a00}
#loadoutDialog[data-family="deathknight"]{--family:#c41e3a;--family-2:#6e0f20}
#loadoutDialog::backdrop,#loadoutOptions::backdrop{background:#090f26c9}
#loadoutDialog[open]{display:block}
.loadout-wrap{position:relative;height:100%;display:flex;flex-direction:column;min-height:0}
:where(#loadoutDialog button){cursor:pointer;touch-action:manipulation;font-family:inherit;color:inherit}
#loadoutDialog button:disabled{opacity:.45;cursor:default}
#loadoutDialog :is(button,summary):focus-visible,#loadoutSummary button:focus-visible,#loadoutOptions button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lo-ink{text-transform:none;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);letter-spacing:.3px}

/* Buttons: yellow for the main action, blue for the rest; both press down. */
.lo-btn,#loadoutMore,#loadoutDone,#loadoutOptions .skill-detail-body>button,#loadoutOptionsClose,#loadoutUndo,.loadout-pages button,.loadout-info .lo-x{
  min-height:44px;padding:8px 14px;border:3px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,var(--lo-blue),var(--lo-blue-2));color:#fff;
  font-weight:900;letter-spacing:.3px;text-shadow:0 2px 0 #1d2140aa;box-shadow:inset 0 2px 0 #ffffff55,0 4px 0 var(--ink)}
.lo-btn.gold,#loadoutDone,#loadoutUndo,.loadout-pages button[aria-pressed=true]{background:linear-gradient(180deg,var(--lo-yellow),var(--lo-yellow-2));color:var(--ink);text-shadow:0 1px 0 #ffffff80}
.lo-btn.quiet{background:#1d214066;box-shadow:inset 0 2px 0 #ffffff22,0 3px 0 var(--ink)}
:is(#loadoutDialog,#loadoutOptions) button:not(.ab):not(.book-main):not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff55,0 1px 0 var(--ink)}
@media(prefers-reduced-motion:no-preference){:is(#loadoutDialog,#loadoutOptions) button{transition:transform .08s,box-shadow .08s,filter .08s}}
@media(hover:hover) and (pointer:fine){:is(#loadoutDialog,#loadoutOptions) button:not(:disabled):hover{filter:brightness(1.08)}}

/* Header */
.loadout-head{flex:none;display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
  background:linear-gradient(180deg,color-mix(in srgb,var(--lo-panel) 88%,var(--family)),var(--lo-panel-2));border-bottom:3px solid var(--ink);box-shadow:0 5px 0 #1d214088;z-index:2}
.loadout-head>div:first-child{flex:1;min-width:0}
#loadoutTitle{margin:0;font-size:24px;line-height:1.05}
#loadoutSubtitle{margin:2px 0 0;font-size:12px;font-weight:600;color:var(--lo-cream);text-shadow:0 1px 0 var(--ink)}
#loadoutMore{min-width:48px;padding:6px 10px;font-size:18px}

/* Scrolling body */
.loadout-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:14px max(14px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.loadout-body>*{max-width:620px;margin-inline:auto}
.loadout-top{display:flex;flex-direction:column;gap:10px}
@media(min-width:700px) and (orientation:landscape){.loadout-body>*{max-width:none}.loadout-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:16px;align-items:start}}

/* Class tile: passives, or the tapped button's spell */
.loadout-class{position:relative;padding:12px 12px 10px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(140deg,var(--family),var(--family-2));
  box-shadow:inset 0 2px 0 #ffffff45,0 6px 0 var(--ink);color:#fff;text-shadow:0 1px 0 #1d2140aa;min-width:0}
#loadoutRole{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--lo-cream);text-shadow:0 1px 0 #1d214099}
#loadoutSpec{margin:0;font-size:22px;line-height:1.08}
.loadout-info{margin-top:8px}
.loadout-info ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.loadout-info li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4}
.loadout-info li b{font-weight:900}
.loadout-info .passive{flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-shadow:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.loadout-info .passive[aria-expanded=true]{display:block}
.form-overview{font-size:13px;line-height:1.45}
.form-heading{display:flex;gap:8px;align-items:center}
.loadout-info .form-heading h4{font-size:17px}
.form-overview p{margin:8px 0}
.loadout-info .form-points{display:block;list-style:disc;padding-left:20px;margin:0}
.loadout-info .form-points li{display:list-item;font:inherit;margin:6px 0}
.loadout-info .gl{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#1d214055;border:2px solid var(--ink);display:grid;place-items:center}
.loadout-info .gl svg{width:12px;height:12px}
.loadout-info .spell-head{display:flex;gap:10px;align-items:center}
.loadout-info .spell-head .skill-icon{width:48px;height:48px;border-radius:12px;border:3px solid var(--ink)}
.loadout-info .spell-head .skill-icon svg{width:30px;height:30px}
.loadout-info .spell-head>div{flex:1;min-width:0}
.loadout-info .spell-head small{display:block;font-size:11px;font-weight:700;color:var(--lo-cream)}
.loadout-info h4{margin:0;font-size:19px;line-height:1.1}
.loadout-info .lo-x{flex:none;width:44px;min-height:44px;padding:0;font-size:20px;line-height:1}
.loadout-info .spell-stats{margin:8px 0 4px;font-size:12px;font-weight:800;color:var(--lo-cream)}
.loadout-info .spell-desc{margin:0 0 10px;font-size:13px;line-height:1.45}
.loadout-info .lo-btn{width:100%}
/* The tile holds its tallest view's height (steadyHeight); the button keeps its place at the bottom of it. */
.loadout-info.spell{display:flex;flex-direction:column}
.loadout-info.spell .lo-btn{margin-top:auto}
.loadout-foot{margin:10px 0 0;font-size:11px;font-style:italic;color:var(--lo-cream);opacity:.92}
/* Light family tiles (Priest, Rogue) carry ink text, as on the class grid. */
#loadoutDialog:is([data-family="priest"],[data-family="rogue"]) .loadout-class{color:var(--ink);text-shadow:none}
#loadoutDialog:is([data-family="priest"],[data-family="rogue"]) :is(#loadoutRole,.loadout-foot,.loadout-info .spell-head small,.loadout-info .spell-stats){color:var(--ink);text-shadow:none}

/* Form pages (Feral), the placement strip and the practice strip */
.loadout-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch;margin-bottom:14px}
.loadout-pages[hidden]{display:none}
.loadout-pages button{min-width:0;padding:8px 4px;font-size:13px;line-height:1.2}
.loadout-pages small{grid-column:1/-1;margin-top:3px;color:var(--lo-cream);font-size:11px;text-shadow:0 1px 0 var(--ink)}
.loadout-strip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:3px solid var(--lo-yellow);background:linear-gradient(180deg,#ffd16633,#f4a92a22);box-shadow:inset 0 2px 0 #ffffff33,0 4px 0 var(--ink)}
.loadout-strip[hidden]{display:none}
.loadout-strip.practice{border-color:var(--lo-blue)}
.loadout-strip .skill-icon{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 12px #ffd166aa,0 2px 0 var(--ink)}
.loadout-strip .skill-icon svg{width:24px;height:24px}
.loadout-strip>div{flex:1;min-width:0}
.loadout-strip b{display:block;font-size:14px;font-weight:900;text-shadow:0 1px 0 var(--ink)}
.loadout-strip small{display:block;font-size:12px;font-weight:700;color:var(--lo-yellow);text-shadow:0 1px 0 var(--ink)}
.loadout-strip small.cap{color:var(--lo-warn)}
.loadout-strip .lo-btn{flex:none;padding-inline:12px}

/* The six combat buttons at their HUD places (dist/combat-ui.css #hud #abil .ab.s0-s5), scaled with the map's width. */
.loadout-mapwrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.loadout-map{container-type:inline-size;position:relative;width:100%;max-width:330px;margin:20px auto 0;aspect-ratio:250/196}
.loadout-map .ab{position:absolute;--w:64;width:calc(var(--w)/250*100%);aspect-ratio:1;right:calc(var(--r)/250*100%);bottom:calc(var(--b)/196*100%);padding:0;border-radius:50%;
  border:3px solid var(--ink);display:grid;place-items:center;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--ability-bg,#3b4b5c) 85%,#fff 15%),color-mix(in srgb,var(--ability-bg,#3b4b5c) 70%,#000 30%) 70%);
  box-shadow:inset 0 2px 0 #ffffff45,0 4px 0 var(--ink);transition:transform .12s,box-shadow .15s,border-color .12s,filter .15s}
.loadout-map .s0{--w:80;--r:0;--b:0}
.loadout-map .s1{--w:64;--r:104;--b:4}
.loadout-map .s2{--w:64;--r:68;--b:81}
.loadout-map .s3{--w:58;--r:201;--b:13}
.loadout-map .s4{--w:64;--r:0;--b:132}
.loadout-map .s5{--w:58;--r:163;--b:88}
/* Slot number above each button, centred on it (Henry, 2026-11-02). */
.loadout-map .slot-no{position:absolute;right:calc((var(--r) + var(--w)/2)/250*100%);bottom:calc((var(--b) + var(--w) + 1.5)/196*100%);transform:translateX(50%);
  min-width:5.6cqw;padding:0 1.3cqw;border:2px solid var(--ink);border-radius:99px;background:linear-gradient(#ffe6a0,#f4b843);color:var(--ink);
  font:900 3.6cqw/1.25 system-ui,sans-serif;text-align:center;box-shadow:0 1.5px 0 var(--ink);pointer-events:none}
.loadout-map .slot-no.sel{background:#fff}
.loadout-map.placing .slot-no{opacity:.55}
.loadout-map .ab .ic{width:38%;height:38%;transform:translateY(-22%);filter:drop-shadow(0 1px 1px #0009)}
.loadout-map .ab .ic svg{width:100%;height:100%}
.loadout-map .ab .nm{position:absolute;left:0;right:0;bottom:11%;padding:0 15%;text-align:center;font:800 3.4cqw/1.02 system-ui,sans-serif;color:#fff;text-shadow:0 1px 0 var(--ink),0 0 3px #000}
.loadout-map .ab.s0 .nm{font-size:3.8cqw;bottom:14%}
.loadout-map .ab:is(.s3,.s5) .nm{font-size:3.05cqw}
.loadout-map .ab.long .nm{font-size:2.85cqw;padding:0 11%;bottom:9%}
.loadout-map .ab.long .ic{width:32%;height:32%;transform:translateY(-38%)}
.loadout-map .ab.s0.long .nm{font-size:3.3cqw;bottom:13%}
.loadout-map .ab:is(.s3,.s5).long .nm{font-size:2.6cqw}
.loadout-map .ab.xlong .nm{font-size:2.55cqw;padding:0 8%}
.loadout-map .ab.empty{opacity:.5;border-style:dashed}
.loadout-map .ab.sel,.loadout-map .ab.here{border-color:var(--lo-yellow);box-shadow:inset 0 2px 0 #ffffff45,0 4px 0 var(--ink),0 0 0 3px #ffd16655,0 0 16px #ffd166aa}
.loadout-map.placing .ab{filter:saturate(.35) brightness(.7)}
.loadout-map.placing .ab.target{filter:none;border-color:var(--lo-yellow);box-shadow:inset 0 2px 0 #ffffff45,0 4px 0 var(--ink),0 0 0 3px #ffd16655,0 0 18px #ffd166cc}
.loadout-map.placing .ab.here{filter:none}
.loadout-map.placing .ab.illegal{filter:saturate(.1) brightness(.45)}
@media(prefers-reduced-motion:no-preference){
  .loadout-map.placing .ab.target{animation:lo-pulse 1.1s ease-in-out infinite}
  .loadout-map .ab.landed{animation:lo-land .5s ease-out}
  .loadout-map .ab.flash{animation:lo-flash .9s ease-out}
}
@keyframes lo-pulse{50%{transform:scale(1.06)}}
@keyframes lo-land{0%{transform:scale(1.25);filter:brightness(1.8)}100%{transform:scale(1)}}
@keyframes lo-flash{0%,40%{box-shadow:0 0 0 4px var(--lo-yellow),0 0 22px var(--lo-yellow)}100%{box-shadow:inset 0 2px 0 #ffffff45,0 4px 0 var(--ink)}}

.loadout-feedback{margin-top:10px}
.loadout-feedback p{margin:0 0 4px;font-size:12px;font-weight:700;line-height:1.35;text-align:center;color:var(--lo-warn);text-shadow:0 1px 0 var(--ink)}
.loadout-feedback p:empty{display:none}
#loadoutNotice{color:var(--lo-good)}

/* Spellbook */
.loadout-book{margin-top:14px}
#loadoutBookTitle{margin:0;font-size:24px;line-height:1.1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
#loadoutBookTitle small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--lo-cream);-webkit-text-stroke:0;text-shadow:0 1px 0 var(--ink)}
.book-sec{margin-top:12px;padding:4px 12px 2px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(180deg,var(--lo-panel),var(--lo-panel-2));box-shadow:inset 0 2px 0 #ffffff40,0 6px 0 var(--ink)}
.book-sec h4{margin:0;display:flex;align-items:center;gap:8px;padding:8px 0 6px;border-bottom:2px solid #1d214066;font-size:13px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--lo-yellow);text-shadow:0 2px 0 var(--ink)}
.book-sec h4 span{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--lo-muted);text-shadow:none}
.book-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:2px solid #1d214044}
.book-row:last-child{border-bottom:0}
.book-main{color:inherit;font:inherit;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:2px 0;border:0;background:none;text-align:left}
.book-main .skill-icon{width:46px;height:46px;border-radius:12px;border:3px solid var(--ink);box-shadow:inset 0 2px 0 #ffffff55,0 3px 0 var(--ink)}
.book-main .skill-icon svg{width:30px;height:30px}
.book-row.class-wide .skill-icon,.book-row.class-wide .skill-icon .spell-art{border-radius:50%}
.book-row.equipped .skill-icon{border-color:var(--lo-yellow);box-shadow:inset 0 2px 0 #ffffff55,0 3px 0 var(--ink),0 0 10px #ffd16688}
.book-row.locked .skill-icon{filter:saturate(.35);border-style:dashed}
.book-row.pending .skill-icon{outline:3px solid var(--lo-yellow);outline-offset:2px}
.book-text{min-width:0}
.book-text strong{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14px;font-weight:900;text-shadow:0 1px 0 var(--ink)}
.book-row.equipped .book-text strong{color:var(--lo-yellow)}
.book-tag{font:800 9px/14px system-ui,sans-serif;padding:1px 6px;border:2px solid var(--ink);border-radius:99px;background:#1d214066;color:#fff;text-shadow:none}
.book-tag.lock{background:#1d2140;color:var(--lo-cream)}
.book-stats{display:block;margin-top:1px;font-size:11px;font-weight:700;color:var(--lo-yellow)}
.book-desc{display:-webkit-box;margin-top:2px;font-size:12px;line-height:1.35;color:var(--lo-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-row.open .book-desc{display:block}
.book-act{display:flex;min-width:84px}
.book-act .lo-btn{width:100%;padding-inline:10px;font-size:13px}
.book-where{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 6px;border:3px solid var(--ink);border-radius:12px;
  background:linear-gradient(180deg,var(--lo-yellow),var(--lo-yellow-2));color:var(--ink);font:900 10px/1 system-ui,sans-serif;box-shadow:inset 0 2px 0 #ffffff55,0 3px 0 var(--ink)}
.book-where svg{width:40px;height:30px;display:block}
.book-where circle{fill:#1d214055}
.book-where circle.on{fill:var(--ink)}
.loadout-book.placing .book-row:not(.pending){opacity:.45}

/* Undo toast */
.loadout-toast{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px;max-width:calc(100% - 28px);
  width:min(520px,calc(100% - 28px));box-sizing:border-box;padding:8px 8px 8px 14px;border:3px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,var(--lo-panel),var(--lo-panel-2));box-shadow:inset 0 2px 0 #ffffff40,0 5px 0 var(--ink),0 14px 30px #0b0f3a80;
  font-size:13px;font-weight:700;line-height:1.3}
#loadoutToastText{flex:1;min-width:0}
.loadout-toast[hidden]{display:none}
#loadoutUndo{flex:none;min-height:40px;padding:4px 14px}

/* Build options sheet */
#loadoutOptions{position:fixed;inset:0;width:min(520px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:3px solid var(--ink);border-radius:20px;
  background:linear-gradient(180deg,var(--mb-panel,#3346b0),var(--mb-panel-2,#2a3a96));color:#fff;overflow:hidden;box-shadow:0 8px 0 var(--mb-ink,#1d2140),0 22px 60px #000a}
#loadoutOptions[open]{display:flex;flex-direction:column}
#loadoutOptions:not([open]){display:none}
#loadoutOptions .skill-detail-head{display:flex;gap:10px;align-items:center;padding:12px;flex:none;border-bottom:3px solid var(--mb-ink,#1d2140)}
#buildOptionsTitle{flex:1;min-width:0;margin:0;font-size:19px}
#loadoutOptionsClose{width:44px;padding:0;font-size:20px}
#loadoutOptions .skill-detail-body{padding:12px 15px;overflow:auto;overscroll-behavior:contain;min-height:0}
#loadoutOptions .skill-detail-body p{font-size:14px;line-height:1.5;margin:0 0 12px}
#loadoutOptions .skill-detail-body>button{margin:0 8px 10px 0}
.skill-icon{background:radial-gradient(ellipse at 30% 15%,#ffffff55,transparent 65%),linear-gradient(165deg,#ffffff1c,#0007),var(--skill-color,#83abe6);border-color:#adc7e7;box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #10172d88,0 0 0 2px #18213e,0 3px 0 #11172d,0 5px 8px #0006}
.skill-icon svg{filter:drop-shadow(0 1px 1px #0009)}
.skill-icon:has(.spell-art){overflow:hidden;padding:0}.skill-icon .spell-art{width:100%;height:100%;filter:none;display:block;border-radius:4px}.class-wide .skill-icon .spell-art{border-radius:50%}
.setup-slots .slot-number{background:linear-gradient(#ffe6a0,#f4b843);border-color:#735220;box-shadow:inset 0 1px #fff9,0 1px 3px #0d142c}
#loadoutSummary{border-color:#1d2140;box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 #1d2140;background:linear-gradient(150deg,#3a4f9a,#293b78)}
#loadoutSummary .setup-slots button,#lobbyPilot .setup-slots button{border:2px solid #1d2140;background:linear-gradient(155deg,#435895,#23335d);box-shadow:inset 0 1px 0 #ffffff55,0 2px 0 #121a35;border-radius:9px}
.setup-slots .skill-icon{box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 0 #10172d88,0 0 0 1px #18213e,0 2px 0 #11172d}
@media(max-width:360px){.setup-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:283px){.setup-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Painted icon art (icon-art.js): as on the combat buttons, the art fills the button's circle on its own dark ground. */
.loadout-map .ab:has(>.ic>svg.art){background:#0e0e0e}
.loadout-map .ab:has(>.ic>svg.art) .ic,.loadout-map .ab.long:has(>.ic>svg.art) .ic{width:100%;height:100%;transform:none}
.loadout-map .ab .ic>svg.art{clip-path:circle(50%)}
/* Painted icon art in the spellbook, slot summary, strip and spell info: the art fills the badge on its own dark ground. */
.skill-icon:has(>svg.art){background:#0e0e0e;overflow:hidden}
.skill-icon>svg.art,.loadout-info .spell-head .skill-icon>svg.art,.loadout-strip .skill-icon>svg.art,.book-main .skill-icon>svg.art{width:100%;height:100%}