/* Molten Core theme
   Obsidian and forged gold, lit from below by the Firelands. */
:root{
  color-scheme:dark;
  --bg:#0b0908;--bg-2:#110d0a;--panel:#15100c;--panel-2:#1c1510;--well:#0a0806;
  --line:#3b2c1c;--line-2:#5a4222;--edge:#8d6526;
  --gold:#d6a54a;--gold-hi:#ffe2a0;--gold-lo:#7a5520;--wow-yellow:#ffd100;
  --ember:#ff7a1f;--molten:#ffb347;--lava:#c2410c;--blood:#7a1a0e;
  --text:#f1e6d3;--muted:#b3a38a;--faint:#7c6c57;
  --health:#2fbf3a;--mana:#3a74e8;--up:#8dff6a;--down:#ff6b55;
  --accent:var(--gold);
  --display:"Marcellus","Cinzel",Georgia,serif;--title:"Cinzel","Marcellus",Georgia,serif;
  --ui:"Alegreya Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none'%3E%3Cpath d='M2 24V9l7-7h15' stroke='%23e2b25a' stroke-width='1.6'/%3E%3Cpath d='M5.5 24V10.5l5-5H24' stroke='%23704c1c'/%3E%3C/g%3E%3Cpath d='M5 1.6 8.4 5 5 8.4 1.6 5Z' fill='%23ffd88a' stroke='%234a2e0c' stroke-width='.6'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23d6a54a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family:var(--ui);font-size:15px;line-height:1.45;background:var(--bg);color:var(--text);font-variant-numeric:lining-nums;
}
body{min-height:100dvh;background:
  radial-gradient(1200px 520px at 50% 118%,rgba(255,106,20,.22),rgba(194,65,12,.08) 45%,transparent 70%),
  radial-gradient(900px 500px at 12% -10%,rgba(214,165,74,.09),transparent 60%),
  radial-gradient(700px 420px at 100% 10%,rgba(122,26,14,.14),transparent 60%),
  var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background-image:var(--noise);opacity:.05;pointer-events:none;z-index:0;mix-blend-mode:overlay}
.embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.forge-light{position:fixed;left:-10%;right:-10%;bottom:-160px;height:320px;background:radial-gradient(closest-side,rgba(255,110,30,.28),rgba(255,80,10,.08) 60%,transparent);filter:blur(10px);pointer-events:none;z-index:0;animation:forge 7s ease-in-out infinite alternate}
@keyframes forge{from{opacity:.65;transform:scaleX(1)}to{opacity:1;transform:scaleX(1.06)}}
body.sf-casting .forge-light{animation-duration:1.4s}
body.sf-holding #results-panel{min-height:280px;background:radial-gradient(50% 40% at 50% 45%,rgba(255,140,40,.12),transparent 70%)}
body.sf-result-fresh .forge-light{animation:forge-flare 1.6s ease-out}
@keyframes forge-flare{0%{opacity:1}25%{opacity:1;filter:blur(10px) brightness(1.8)}100%{opacity:.8}}
::selection{background:rgba(214,165,74,.35);color:#fff}
a{color:var(--gold);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:8px;border:1px solid rgba(214,165,74,.35);border-radius:3px;background:rgba(0,0,0,.35);color:var(--faint);font:600 9px/1 var(--ui);letter-spacing:0;vertical-align:2px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.5)}
code{font:600 .92em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--molten);background:rgba(255,122,31,.08);padding:1px 5px;border-radius:3px}
h1,h2,h3{font-weight:400}

/* ---------- Top bar ---------- */
.topbar{position:relative;z-index:5;display:grid;grid-template-columns:minmax(340px,1fr) auto minmax(180px,1fr);align-items:center;gap:24px;height:86px;padding:0 28px;
  background:linear-gradient(#1a1410,#0e0b08);box-shadow:inset 0 -1px 0 #000,0 10px 30px -12px #000}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-lo) 15%,var(--gold) 50%,var(--gold-lo) 85%,transparent)}
.topbar::before{content:"";position:absolute;left:50%;bottom:-7px;width:11px;height:11px;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,var(--gold-hi),var(--gold) 50%,var(--gold-lo));box-shadow:0 0 0 2px #0e0b08,0 0 12px rgba(255,180,80,.6);z-index:1}

.unit-frame{display:flex;align-items:center;gap:14px;min-width:0}
.portrait{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a2616,#0b0806 70%);box-shadow:0 0 0 2px #0b0806,0 0 0 4px var(--gold),0 0 0 5px #3a2610,0 0 22px rgba(255,140,40,.25),inset 0 0 18px #000;overflow:visible}
.portrait-crop{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.portrait-level{position:absolute;left:-6px;bottom:-4px;display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:13px;background:radial-gradient(circle at 50% 30%,#3b2a17,#120c07);box-shadow:0 0 0 2px var(--gold),0 0 0 3px #1a1108,0 2px 6px #000;color:var(--wow-yellow);font:14px/1 var(--display);text-shadow:0 1px 2px #000}
.unit-bars{display:grid;grid-template-columns:minmax(0,260px) auto;gap:4px 14px;min-width:0;flex:1}
.unit-name,.unit-bar{grid-column:1}
.unit-bars .character-actions{grid-column:2;grid-row:2/span 2;align-self:center}
.unit-name{font:17px/1.1 var(--display);color:var(--class-color,var(--text));text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-bar{position:relative;height:17px;border-radius:2px;background:#050403;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(214,165,74,.35),inset 0 1px 3px #000;overflow:hidden}
.unit-fill{position:absolute;inset:1px;transform-origin:left;border-radius:1px;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.is-health .unit-fill{background:linear-gradient(#63e46b,#1f9a2a 55%,#0f6f1a)}
.is-resource[data-resource="mana"] .unit-fill{background:linear-gradient(#7aa6ff,#2f5fd0 55%,#1c3d9a)}
.is-resource[data-resource="rage"] .unit-fill{background:linear-gradient(#ff6969,#d52b2b 55%,#941818)}
.is-resource[data-resource="energy"] .unit-fill{background:linear-gradient(#fff477,#e8cf25 55%,#a68d0e)}
.unit-fill::after{content:"";position:absolute;inset:0 0 50%;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.04))}
.unit-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;font:600 11px/1 var(--ui);letter-spacing:.03em;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000;font-variant-numeric:lining-nums tabular-nums}
body:not(.sf-has-profile) .unit-fill{transform:scaleX(0)}
body.sf-no-resource .is-resource .unit-fill{transform:scaleX(0)}
body.sf-character-arrived .unit-fill{animation:unit-fill 1.2s cubic-bezier(.2,.8,.2,1) both}
body.sf-character-arrived .is-resource .unit-fill{animation-delay:.15s}
@keyframes unit-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.brand-mark{width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(255,170,70,.35)) drop-shadow(0 2px 3px #000);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}
.brand-text{display:grid;gap:3px}
.brand-name{font:600 25px/1 var(--title);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(#fff4d4,#f3cf7c 40%,#c78d33 62%,#f6d68a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #3a2208) drop-shadow(0 2px 6px rgba(0,0,0,.8))}

.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.mode-tabs,.issue-control{display:flex;gap:4px;padding:3px;border-radius:6px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 3px #000,0 0 0 1px rgba(214,165,74,.2)}
.mode-tabs button,.issue-link{border:0;border-radius:4px;background:none;padding:7px 14px;color:var(--muted);font:14px var(--display);letter-spacing:.04em;transition:color .2s,background .2s,box-shadow .2s}
.mode-tabs button:hover,.issue-link:hover{color:var(--text)}
.mode-tabs button[aria-selected=true]{color:var(--wow-yellow);background:linear-gradient(#3a2612,#1f140a);box-shadow:inset 0 1px 0 rgba(255,220,150,.15),0 0 0 1px var(--gold-lo)}
.character-actions{display:flex;align-items:center;gap:10px;flex:none}
.warning-button{color:#ffa630;filter:drop-shadow(0 0 6px rgba(255,140,40,.45))}
.warning-button:hover{color:#ffc56a}
.import-warning-tooltip{border:1px solid var(--edge);border-radius:4px;background:rgba(12,9,7,.97);box-shadow:0 18px 40px #000c;color:var(--text);font-size:13px;line-height:1.55}
.import-warning-tooltip strong{color:var(--molten);font:15px var(--display)}

/* ---------- Buttons and fields ---------- */
.button{min-height:38px;padding:0 16px;border-radius:4px;font:700 12.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;transition:filter .18s,box-shadow .2s,transform .12s}
.button svg{width:16px;height:16px;flex:none}
.button.reset-button{width:38px;padding:0;flex:none}
.button:active:not(:disabled){transform:translateY(1px)}
.button:disabled{opacity:.45}
.gilded,.button.primary{color:#2c1604;border:1px solid #4a2c0c;background:linear-gradient(#ffe7a6,#eab452 42%,#c1822c 58%,#eebb5c);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,50,0,.35),0 0 0 1px #000,0 6px 16px -6px rgba(255,140,40,.55);text-shadow:0 1px 0 rgba(255,240,200,.55)}
.gilded:hover:not(:disabled),.button.primary:hover:not(:disabled){filter:brightness(1.08) saturate(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,50,0,.35),0 0 0 1px #000,0 0 22px rgba(255,160,60,.55)}
.stone,.button.subtle{color:var(--wow-yellow);border:1px solid #1d0603;background:linear-gradient(#b0231a,#7c120b 48%,#5a0b06 52%,#8a1a10);box-shadow:inset 0 1px 0 rgba(255,170,140,.35),inset 0 0 0 1px rgba(214,165,74,.55),0 0 0 1px #000,0 4px 10px -4px #000;text-shadow:0 1px 1px #000}
.stone:hover:not(:disabled),.button.subtle:hover:not(:disabled){filter:brightness(1.18)}
.button.large{min-height:48px;padding:0 26px;font-size:14px}
.import-prompt{animation:import-pulse 2.4s ease-in-out infinite}
@keyframes import-pulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #000,0 0 0 0 rgba(255,170,60,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #000,0 0 0 8px rgba(255,170,60,0),0 0 26px rgba(255,170,60,.65)}}
.text-button{color:var(--gold);font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;transition:color .15s}
.text-button:hover{color:var(--gold-hi)}
.text-button:disabled{opacity:.4}
label{font:500 12px/1.4 var(--ui);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
label input,label select{margin-top:7px;text-transform:none;letter-spacing:normal}
input:not([type=checkbox]):not([type=range]),select,textarea{min-height:40px;padding:9px 12px;border:1px solid #4a3822;border-radius:4px;background:linear-gradient(#0a0806,#100c09);color:var(--text);font:500 14px var(--ui);box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,220,160,.04);transition:border-color .18s,box-shadow .18s}
select{padding-right:36px;color-scheme:dark;background:var(--chevron) right 12px center/14px no-repeat,linear-gradient(#0a0806,#100c09) #100c09}
select option,select optgroup{background:#100c09;color:var(--text)}
select option:checked{background:#3a2612;color:var(--wow-yellow)}
input:not([type=checkbox]):not([type=range]):hover,select:hover:not(:disabled),textarea:hover{border-color:var(--edge)}
input:not([type=checkbox]):not([type=range]):focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 1px 3px #000,0 0 0 3px rgba(214,165,74,.18),0 0 14px rgba(255,160,60,.2)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:120px}
input[type=checkbox]{appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--edge);border-radius:3px;background:linear-gradient(#0a0806,#15100b);box-shadow:inset 0 1px 3px #000;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,box-shadow .2s}
input[type=checkbox]::after{content:"";width:10px;height:6px;border-left:2px solid var(--wow-yellow);border-bottom:2px solid var(--wow-yellow);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 0 3px rgba(255,209,0,.7))}
input[type=checkbox]:checked{border-color:var(--gold);box-shadow:inset 0 1px 3px #000,0 0 10px rgba(255,190,70,.3)}
input[type=checkbox]:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
input[type=checkbox]:disabled{opacity:.4;cursor:default}
.small{font-size:12.5px;line-height:1.55;color:var(--muted)}
.error{color:#ff8f7a!important}
.muted{color:var(--muted)}

/* ---------- Layout ---------- */
main{position:relative;z-index:1;max-width:1920px;margin:0 auto;padding:22px 24px calc(122px + env(safe-area-inset-bottom,0px))}
.workspace{display:grid;grid-template-columns:minmax(540px,1.12fr) minmax(420px,1fr) minmax(390px,.95fr);gap:22px;align-items:start}
#comparison-form{display:contents}
.character-column,.rotation-column,.simulation-column{min-width:0}
.character-column{display:flex;flex-direction:column;gap:14px}
.welcome{display:none}
body.sf-empty .welcome{display:flex}
body.sf-empty #comparison-form{display:none}

/* Windows: gilded frames with filigree corners. */
.window{position:relative;border:1px solid var(--line-2);border-radius:4px;
  background:linear-gradient(180deg,rgba(255,214,150,.035),transparent 140px),radial-gradient(120% 50% at 50% 0%,rgba(214,165,74,.07),transparent 70%),linear-gradient(#17120e,#100c09);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,inset 0 0 0 2px rgba(214,165,74,.13),0 30px 60px -24px #000,0 0 50px -18px rgba(255,106,20,.16)}
.window-rivets{position:absolute;inset:-5px;pointer-events:none;z-index:3;background:var(--corner) top left/26px no-repeat}
.window-rivets::before,.window-rivets::after{content:"";position:absolute;width:26px;height:26px;background:var(--corner) center/26px no-repeat}
.window-rivets::before{top:0;right:0;transform:scaleX(-1)}
.window-rivets::after{bottom:0;right:0;transform:scale(-1)}
.window::after{content:"";position:absolute;left:-5px;bottom:-5px;width:26px;height:26px;background:var(--corner) center/26px no-repeat;transform:scaleY(-1);pointer-events:none;z-index:3}
.rotation-column,.simulation-card{padding:0 20px 20px}
.window-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin:0 -20px 18px;padding:0 20px;position:relative;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.05))}
.window-title::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo) 18%,var(--gold) 50%,var(--gold-lo) 82%,transparent)}
.rotation-tabs{display:flex;gap:22px;align-self:stretch}
.rotation-tabs [role=tab]{position:relative;display:flex;align-items:center;border:0;background:none;padding:4px 0 0;color:var(--faint);font:21px/1 var(--display);letter-spacing:.02em;transition:color .2s,text-shadow .2s}
.rotation-tabs [role=tab]:hover:not(:disabled){color:var(--text)}
.rotation-tabs [role=tab][aria-selected=true]{color:var(--gold-hi);text-shadow:0 0 18px rgba(255,190,90,.35),0 1px 2px #000}
.rotation-tabs [role=tab]::after{content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--molten),transparent);box-shadow:0 0 12px var(--ember);transition:left .35s cubic-bezier(.2,.8,.2,1),right .35s cubic-bezier(.2,.8,.2,1)}
.rotation-tabs [role=tab][aria-selected=true]::after{left:-8px;right:-8px}
.rotation-tabs [role=tab]:disabled{opacity:.35;cursor:default}
.rotation-tabs kbd{margin-left:8px}
.unique-opener-toggle{margin-left:auto;font-size:11.5px;color:var(--muted)}
.chip{padding:5px 9px;border:1px solid var(--line-2);border-radius:3px;background:rgba(0,0,0,.35);color:var(--molten);font:700 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
[role=tabpanel]:not([hidden]){animation:panel-in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- Character window ---------- */
.character-card{margin-bottom:40px}
.character-sheet{display:grid;grid-template-columns:minmax(290px,1.45fr) minmax(200px,1fr)}
.paper-doll{--slot:50px;padding:20px 18px 20px;column-gap:12px;background:radial-gradient(60% 48% at 50% 46%,rgba(255,120,40,.13),transparent 70%),radial-gradient(40% 30% at 50% 88%,rgba(255,90,20,.12),transparent 70%)}
#character-title{font:18px/1.3 var(--display);color:var(--gold-hi);letter-spacing:.02em;text-shadow:0 0 16px rgba(255,180,80,.35),0 1px 2px #000;padding-bottom:6px}
.character-figure::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,40,.35),transparent);filter:blur(2px)}
.character-art img{filter:drop-shadow(0 0 22px rgba(255,140,50,.22));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-3px)}}
.gear-slot{border:1px solid #6d4f22;border-radius:5px;background:#060504;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,0 3px 8px rgba(0,0,0,.7);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.gear-slot .item-icon{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8)}
.gear-slot .item-icon::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 8px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.12);pointer-events:none;z-index:1}
.gear-slot.occupied{border-color:color-mix(in srgb,var(--quality) 65%,#2a1a0a);box-shadow:0 0 0 1px #000,0 0 10px -3px var(--quality),0 3px 8px rgba(0,0,0,.7)}
.gear-slot:hover{transform:translateY(-2px);border-color:var(--gold-hi);box-shadow:0 0 0 1px #000,0 0 16px rgba(255,190,90,.55),0 6px 12px rgba(0,0,0,.7)}
.gear-slot:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.slot-label{color:#f3e2b5;background:rgba(10,7,4,.88);font:600 8px/1 var(--ui);letter-spacing:.04em;padding:3px 0}
.enchant-slot{border:1px solid #6d4f22;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a1d10,#0a0705);color:var(--gold);box-shadow:0 0 0 1px #000,0 2px 6px #000;transition:transform .15s,border-color .2s,box-shadow .2s}
.enchant-slot img{border-radius:50%}
.enchant-slot.enchanted{border-color:#6fc15a;box-shadow:0 0 0 1px #000,0 0 10px rgba(111,193,90,.45)}
.enchant-slot:hover:not(:disabled){transform:translateY(-50%) scale(1.12);border-color:var(--gold-hi);color:var(--gold-hi)}
.gear-weapons .enchant-slot:hover:not(:disabled){transform:translateX(-50%) scale(1.12)}
.enchant-slot:disabled{opacity:.5;cursor:default}
.gear-slot.sf-equip{animation:equip 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes equip{0%{box-shadow:0 0 0 1px #000,0 0 0 0 rgba(255,210,120,.9)}30%{transform:scale(1.12);box-shadow:0 0 0 1px #000,0 0 0 6px rgba(255,210,120,.0),0 0 28px 6px rgba(255,170,60,.75)}100%{transform:none}}

.character-stats{padding:18px 16px 18px;border-left:1px solid var(--line);background:linear-gradient(100deg,rgba(0,0,0,.25),rgba(255,180,90,.025))}
.stat-group+.stat-group{margin-top:14px}
.stat-group h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;font:13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.stat-group h3::before,.stat-group h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo))}
.stat-group h3::after{transform:scaleX(-1)}
.stat-group dl>div{padding:6px 8px;min-height:30px;border-radius:3px;transition:background .3s}
.stat-group dl>div:nth-child(odd){background:rgba(214,165,74,.055)}
.stat-group dl>div:hover{background:rgba(255,180,90,.1)}
.stat-group dt{color:var(--muted);font-size:13px}
.stat-group dd{color:var(--text);font:600 15px var(--ui);font-variant-numeric:lining-nums tabular-nums}
.sf-stat-up{animation:stat-up 1.6s ease-out}
.sf-stat-down{animation:stat-down 1.6s ease-out}
.sf-stat-changed{animation:stat-changed 1.6s ease-out}
.sf-stat-up dd{animation:dd-up 1.6s ease-out}
.sf-stat-down dd{animation:dd-down 1.6s ease-out}
@keyframes stat-up{0%,30%{background:rgba(141,255,106,.16);box-shadow:inset 2px 0 0 var(--up)}}
@keyframes stat-down{0%,30%{background:rgba(255,107,85,.14);box-shadow:inset 2px 0 0 var(--down)}}
@keyframes stat-changed{0%,30%{background:rgba(255,209,0,.12)}}
@keyframes dd-up{0%,40%{color:var(--up);text-shadow:0 0 10px rgba(141,255,106,.6)}}
@keyframes dd-down{0%,40%{color:var(--down)}}
.sf-delta{right:8px;top:-8px;padding:1px 6px;border-radius:9px;background:rgba(6,4,2,.9);font:700 11px var(--ui)}
.sf-delta.is-up{color:var(--up);box-shadow:0 0 0 1px rgba(141,255,106,.4)}
.sf-delta.is-down{color:var(--down);box-shadow:0 0 0 1px rgba(255,107,85,.4)}
#stats-note{margin:0;padding:10px 18px;border-top:1px solid var(--line)}

/* Hanging tabs, as on the classic character frame. */
.sheet-tabs{position:absolute;left:22px;top:calc(100% + 1px);display:flex;gap:6px;z-index:2}
.sheet-tabs [role=tab]{position:relative;display:flex;align-items:center;height:36px;padding:0 16px 3px;border:1px solid #3a0f08;border-top:0;border-radius:0 0 9px 9px;background:linear-gradient(#150d09,#3b120b 70%,#4d170d);color:#d4b98a;font:15px/1 var(--display);box-shadow:0 0 0 1px #000,inset 0 -1px 0 rgba(255,190,120,.18),0 8px 16px -8px #000;transition:height .2s cubic-bezier(.2,.8,.2,1),color .2s,filter .2s}
.sheet-tabs [role=tab]:hover{color:var(--gold-hi);filter:brightness(1.15)}
.sheet-tabs [role=tab][aria-selected=true]{height:42px;margin-top:-1px;border-color:var(--edge);background:linear-gradient(#17120e,#5c1c0e 70%,#80280f);color:var(--wow-yellow);text-shadow:0 0 10px rgba(255,209,0,.35);box-shadow:0 0 0 1px #000,inset 0 -1px 0 rgba(255,210,140,.35),0 10px 22px -8px rgba(255,90,20,.45)}
.sheet-tabs kbd{margin-left:8px}

/* Talents */
#talents-panel{padding:0}
.talent-toolbar{min-height:54px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
#talent-summary{font:18px var(--display);color:var(--muted)}
#talent-summary.has-points{color:#6dff3a;text-shadow:0 0 12px rgba(109,255,58,.35)}
#talent-summary.sf-pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
#talent-edit-status{margin:8px 18px 0}
.talent-trees{--talent-row:66px}
.talent-tree{border-right:1px solid #5b4222;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.talent-tree:last-child{border-right:0}
.talent-tree h3{padding:18px 6px 24px;border-bottom:1px solid var(--edge);background:linear-gradient(transparent 20%,rgba(20,10,4,.75));color:#fff7e3;font:16px var(--display);text-shadow:0 1px 2px #000,0 0 6px #000}
.tree-emblem{border:2px solid #b8893f;background:#050403;box-shadow:0 0 0 1px #2a1a0a,0 0 12px rgba(255,170,70,.35),0 3px 6px #000}
.tree-points{border:1px solid var(--gold);border-radius:3px;background:#0a0705;color:var(--wow-yellow);font:15px/1.15 var(--display);text-shadow:0 1px 2px #000;box-shadow:0 2px 4px #000}
.tree-points.sf-pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
.talent-node{transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.talent-node:hover{transform:scale(1.08);filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 7px rgba(255,200,110,.75))}
.talent-node:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.talent-node::after{content:"";position:absolute;inset:-30%;border-radius:50%;pointer-events:none;opacity:0}
.talent-node.sf-talent-up::after{animation:talent-burst 1s cubic-bezier(.2,.8,.2,1)}
.talent-node.sf-talent-up{animation:talent-bump .5s cubic-bezier(.3,1.6,.5,1)}
.talent-node.sf-talent-down{animation:talent-dim .6s ease-out}
@keyframes talent-burst{0%{opacity:1;transform:scale(.4);box-shadow:0 0 0 2px rgba(255,241,41,.9),0 0 22px 6px rgba(109,255,58,.7)}100%{opacity:0;transform:scale(1.25);box-shadow:0 0 0 1px rgba(255,241,41,0),0 0 40px 12px rgba(109,255,58,0)}}
@keyframes talent-bump{40%{transform:scale(1.18)}}
@keyframes talent-dim{30%{filter:brightness(.5) drop-shadow(0 0 6px rgba(255,80,60,.8))}}
@keyframes pop{40%{transform:scale(1.25)}}
#unmatched-talents{padding:12px 18px;color:var(--muted);font-size:13px}

/* Buffs */
#buffs-panel{--buff:58px;padding:6px 20px 24px}
.buff-category-heading{min-height:54px}
.buff-category h3{margin:0;font:19px var(--display);color:var(--gold-hi)}
.buff-grid{padding:6px 2px 18px}
.buff-icon{border:1px solid #6d4f22;border-radius:5px;background:#060504;box-shadow:0 0 0 1px #000,0 3px 8px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .25s,transform .15s}
.buff-icon img{border-radius:3px;filter:grayscale(.6) brightness(.55);transition:filter .25s}
.buff-icon:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold)}
.buff-icon:hover:not(:disabled) img{filter:grayscale(.2) brightness(.85)}
.buff-icon[aria-pressed=true]{border-color:var(--gold-hi);box-shadow:0 0 0 1px #000,0 0 0 2px rgba(255,209,0,.35),0 0 18px rgba(255,180,60,.45)}
.buff-icon[aria-pressed=true] img{filter:none}
.buff-icon:disabled{opacity:.4}
.buff-active{border-radius:3px;background:rgba(8,6,3,.85);color:var(--wow-yellow);font:700 11px/1 var(--ui)}
.buff-tile .buff-rank{border:1px solid #5b4222;border-radius:4px;background-color:#0b0806;background-image:var(--chevron);color:var(--muted);min-height:22px;padding-top:1px;padding-bottom:1px;box-shadow:0 2px 5px #000}
.buff-tile:has([aria-pressed=true]) .buff-rank{border-color:var(--gold);color:var(--gold-hi)}
.buff-tile.sf-buff-on .buff-icon{animation:buff-on .9s cubic-bezier(.2,.8,.2,1)}
.buff-tile.sf-buff-off .buff-icon{animation:buff-off .6s ease-out}
@keyframes buff-on{0%{transform:scale(.92)}35%{transform:scale(1.1);box-shadow:0 0 0 1px #000,0 0 0 8px rgba(255,209,0,0),0 0 34px rgba(255,190,60,.9)}}
@keyframes buff-off{30%{transform:scale(.94);filter:brightness(.6)}}

/* ---------- Rotation window ---------- */
#rotation-dropzone{padding-bottom:4px}
.rotation-row{padding:8px 10px 8px 6px;border:1px solid #3a2a1a;border-radius:5px;background:linear-gradient(90deg,rgba(214,165,74,.08),transparent 45%),linear-gradient(#15100c,#0f0b08);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,220,160,.04);transition:border-color .2s,box-shadow .2s,background .2s}
.rotation-row:hover{border-color:var(--edge);box-shadow:0 0 0 1px #000,0 0 18px -6px rgba(255,160,60,.45)}
.rotation-grip{color:var(--faint);font-size:18px;transition:color .15s}
.rotation-row:hover .rotation-grip{color:var(--gold)}
.rotation-position{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a2814,#110b06);box-shadow:0 0 0 1px var(--gold-lo);color:var(--wow-yellow);font:13px/1 var(--display)}
.rotation-layout:has(#opener-pane:not([hidden])) .rotation-position{width:14px;height:auto;border-radius:0;background:none;box-shadow:none}
.spell-icon{width:40px;height:40px;border:1px solid #000;border-radius:5px;background:#000;box-shadow:0 0 0 1px var(--edge),0 3px 6px #000;transition:box-shadow .2s,transform .15s}
.spell-icon img{border-radius:4px}
.spell-icon:hover{transform:scale(1.06);box-shadow:0 0 0 1px var(--gold-hi),0 0 14px rgba(255,190,90,.55)}
.rotation-action strong{font:17px/1.15 var(--display);color:var(--text);letter-spacing:.01em}
.rotation-rank{font-size:12px;color:var(--muted);white-space:nowrap}
.spellbook-rank{width:auto;margin-top:4px}
.rotation-action select,.rank-label select,.spellbook-rank{min-height:30px;padding:4px 30px 4px 10px;font-size:12.5px;background-position:right 8px center,0 0;background-size:12px,auto}
.rotation-controls button{width:30px;height:30px;border:1px solid #3a2a1a;border-radius:4px;background:linear-gradient(#211811,#120d09);color:var(--muted);box-shadow:0 0 0 1px #000;transition:color .15s,border-color .15s,box-shadow .2s}
.rotation-controls button:hover:not(:disabled){color:var(--gold-hi);border-color:var(--edge);box-shadow:0 0 0 1px #000,0 0 10px rgba(255,170,70,.35)}
.rotation-controls button:disabled{opacity:.25}
.rotation-controls .rotation-remove{border:0;background:none;box-shadow:none;margin-left:2px}
.rotation-controls .rotation-remove:hover:not(:disabled){color:var(--down);box-shadow:none}
.rotation-row.is-dragging{scale:1.03;rotate:-.6deg;border-color:var(--gold-hi);background:linear-gradient(90deg,rgba(255,190,90,.18),rgba(0,0,0,.2)),#1d150e;box-shadow:0 0 0 1px #000,0 24px 40px rgba(0,0,0,.8),0 0 30px rgba(255,150,50,.45)}
.rotation-row.outside-dropzone{opacity:.55}
.rotation-placeholder{border:1px dashed var(--gold);border-radius:5px;background:rgba(255,160,60,.07);box-shadow:inset 0 0 18px rgba(255,140,40,.18)}
.rotation-row.is-unavailable{border-color:#2d2d2d;background:#131313}
.rotation-row.sf-row-enter{animation:row-enter .7s cubic-bezier(.2,.8,.2,1)}
@keyframes row-enter{0%{opacity:0;transform:translateX(-14px);box-shadow:0 0 0 1px #000,0 0 26px rgba(255,170,60,.7)}60%{opacity:1;transform:none}}
.rotation-layout h3{margin:0 0 8px;font:15px var(--display);color:var(--muted);letter-spacing:.06em}
#rotation-empty,#opener-empty,#spellbook-empty{padding:18px;border:1px dashed var(--line-2);border-radius:5px;text-align:center}
#spellbook-search{margin-bottom:12px;padding-left:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23d6a54a' stroke-width='1.5'/%3E%3Cpath d='m10.5 10.5 3 3' stroke='%23d6a54a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12px center/16px no-repeat,linear-gradient(#0a0806,#100c09)}
.spellbook-spell{padding:9px 10px;border:1px solid #3a2a1a;border-radius:5px;background:linear-gradient(#15100c,#0f0b08);transition:border-color .2s}
.spellbook-spell:hover{border-color:var(--edge)}
.spellbook-spell.in-rotation{border-color:var(--gold-lo);background:linear-gradient(90deg,rgba(214,165,74,.1),transparent 60%),#120d09}
.spellbook-description strong{font:16px var(--display)}
.spellbook-description small{margin-top:3px;font-size:12px;color:var(--muted)}
.spellbook-spell .button{min-width:74px;min-height:32px;font-size:11px}
.spellbook-spell .opener-add{min-width:90px}
.spellbook-spell .opener-add.is-added{filter:hue-rotate(70deg) saturate(.8)}
.opener-count{color:#8fe07a!important}

/* Class controls */
.class-controls{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mana-label{font:500 12px var(--ui);letter-spacing:.06em}
.mana-label output{color:#9dbcff;font:600 13px var(--ui);letter-spacing:.02em;text-transform:none;font-variant-numeric:lining-nums tabular-nums}
#start-mana{height:16px;margin:12px 0 4px;border-radius:3px;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 50%) 0 0/var(--mana-fill) 100% no-repeat,linear-gradient(90deg,#1c3d9a,#3a74e8) 0 0/var(--mana-fill) 100% no-repeat,#05070d;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(214,165,74,.35),inset 0 1px 3px #000}
#start-mana::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6d8,#e8b45a 45%,#8a5a1c);box-shadow:0 0 0 2px #000,0 0 12px rgba(120,170,255,.6);cursor:grab}
#start-mana::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6d8,#e8b45a 45%,#8a5a1c);box-shadow:0 0 0 2px #000}

/* ---------- Encounter window ---------- */
.combat-type-control select{display:block}
#combat-type-description{margin:12px 0 0;padding-left:12px;border-left:2px solid var(--gold-lo);font-style:italic}
.encounter-slider{min-width:0}
.encounter-slider output{float:right;color:var(--gold-hi);font:18px/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,180,80,.3)}
.encounter-range{display:block;position:relative;height:40px;margin-top:8px}
.encounter-range-rail{position:absolute;top:17px;left:11px;right:11px;height:6px;border-radius:3px;background:#050403;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(214,165,74,.3),inset 0 2px 3px #000}
.encounter-range-rail::before,.encounter-range-rail::after{content:"";position:absolute;top:-3px;width:2px;height:12px;background:linear-gradient(#9b7334,#3d2914);box-shadow:0 0 0 1px #080603}
.encounter-range-rail::before{left:0}.encounter-range-rail::after{right:0}
.encounter-range-fill{position:absolute;left:var(--fill-start);width:var(--fill-size);height:100%;border-radius:3px;background:linear-gradient(0deg,#993712,#ffad46 55%,#ffe0a0);box-shadow:0 0 9px rgba(255,122,31,.55)}
.encounter-range-center{position:absolute;left:50%;top:-10px;bottom:-10px;width:2px;transform:translateX(-50%);background:linear-gradient(#f6d794,#745027 35%,#745027 65%,#f6d794);box-shadow:0 0 0 1px #090604}
.encounter-range-center::before,.encounter-range-center::after{content:"";position:absolute;left:-2px;width:6px;height:6px;transform:rotate(45deg);background:#e8bc6c;box-shadow:0 0 0 1px #39250f,0 0 7px #a4652940}
.encounter-range-center::before{top:-2px}.encounter-range-center::after{bottom:-2px}
.encounter-range input{appearance:none;display:block;position:relative;width:100%;height:40px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.encounter-range input::-webkit-slider-runnable-track{height:6px;background:transparent}
.encounter-range input::-moz-range-track{height:6px;background:transparent}
.encounter-range input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-8px;border:1px solid #e8bc6c;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff4cf 0%,#edc778 25%,#b17a30 55%,#513016 80%);box-shadow:0 0 0 2px #0b0704,0 0 0 3px #775326,inset 0 0 0 2px #3b251866,0 0 12px #f5a03955;cursor:grab}
.encounter-range input::-moz-range-thumb{width:20px;height:20px;border:1px solid #e8bc6c;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff4cf 0%,#edc778 25%,#b17a30 55%,#513016 80%);box-shadow:0 0 0 2px #0b0704,0 0 0 3px #775326,inset 0 0 0 2px #3b251866,0 0 12px #f5a03955;cursor:grab}
.encounter-range input:focus-visible{outline:1px solid var(--gold-hi);outline-offset:4px;border-radius:3px}
.encounter-range input:active::-webkit-slider-thumb{cursor:grabbing}
.enemy-style-toggle{display:flex;gap:4px;border:0;padding:0;margin:0;min-width:0}
.enemy-style-toggle legend{margin-bottom:8px;font:500 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.enemy-style-toggle label{flex:1;position:relative;cursor:pointer}
.enemy-style-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.enemy-style-toggle span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px;border:1px solid #594025;border-radius:3px;background:linear-gradient(#21180f,#100c08);box-shadow:0 0 0 1px #080604,inset 0 1px #b08a4322,inset 0 -2px #0008;color:var(--muted);transition:color .15s,border-color .15s,box-shadow .15s}
.enemy-style-toggle span::before{content:"";width:5px;height:5px;transform:rotate(45deg);border:1px solid #705331;background:#0a0704;box-shadow:0 0 0 1px #000}
.enemy-style-toggle label:hover span{border-color:var(--gold);color:var(--gold-hi)}
.enemy-style-toggle input:checked+span{border-color:#b38642;background:radial-gradient(ellipse at 50% 100%,#8f501c55,transparent 75%),linear-gradient(#352619,#1d130c);color:var(--gold-hi);text-shadow:0 0 10px #fbb64a44;box-shadow:0 0 0 1px #080604,inset 0 1px #f8d48c44,inset 0 -2px #0008,0 0 12px #bb72231f}
.enemy-style-toggle input:checked+span::before{background:#ffd58b;border-color:#f6d794;box-shadow:0 0 7px #ff9e47aa}
.enemy-style-toggle input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:3px}
#custom-encounter{margin-top:16px}
.enemy-info input,.enemy-info select{min-height:40px}
.enemy-info .elite-control,.enemy-behavior .elite-control{min-height:40px;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--text)}
#comparison-setups{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#comparison-heading{margin:0;font:18px var(--display);color:var(--gold-hi)}
#comparison-setups .comparison-heading{margin-bottom:10px}
.comparison-setup{padding-right:8px;border:1px solid #3a2a1a;border-radius:5px;background:linear-gradient(#15100c,#0f0b08);box-shadow:0 0 0 1px #000;transition:border-color .2s,box-shadow .2s}
.comparison-setup:hover{border-color:var(--edge)}
.comparison-setup.is-selected{border-color:var(--gold);background:linear-gradient(90deg,rgba(214,165,74,.14),transparent 70%),#140f0b;box-shadow:0 0 0 1px #000,0 0 16px -4px rgba(255,160,60,.45)}
.setup-select{padding:9px 12px;color:var(--text)}
.setup-label{font:16px var(--display)}
.setup-changes{margin-top:3px;font-size:12px;color:var(--muted)}
#setup-name{height:22px;font:16px var(--display);color:var(--gold-hi)}
#add-variant{display:flex;gap:8px;align-items:center;justify-content:center;height:38px;margin-top:8px;border:1px dashed var(--line-2);border-radius:5px;background:rgba(0,0,0,.25);color:var(--gold);font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s}
#add-variant:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi);background:rgba(214,165,74,.06)}
#add-variant:disabled{opacity:.4}
#add-variant svg{width:16px;height:16px}
#run-status,#comparison-status{margin:14px 0 0}

/* Results */
.result-grid{gap:12px}
.result{position:relative;padding:16px;border:1px solid #3a2a1a;border-radius:5px;background:linear-gradient(#15100c,#0e0a07);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,220,160,.04)}
.result h3{margin-bottom:6px;font:600 11px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.result .time{font:48px/1.05 var(--display);letter-spacing:.01em;font-variant-numeric:lining-nums tabular-nums;background:linear-gradient(#fff7e0,#ffd27a 45%,#ff9a3c 75%,#ff6a1a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,140,40,.45)) drop-shadow(0 2px 1px #000)}
.result .range{margin:4px 0 0;font-size:12px;color:var(--muted)}
.sf-dps-card{overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.sf-dps-card::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 20% 40%,rgba(255,130,40,.16),transparent 70%);pointer-events:none}
.sf-result-fresh .sf-dps-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,230,170,.22) 50%,transparent 65%);transform:translateX(-100%);animation:sheen 1.4s .15s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none}
@keyframes sheen{to{transform:translateX(100%)}}
.sf-dps-delta{margin:8px 0 0;font:700 12px var(--ui);letter-spacing:.04em;animation:panel-in .5s .8s both}
.sf-dps-delta.is-up{color:var(--up)}
.sf-dps-delta.is-down{color:var(--down)}
.sf-dps-delta.is-same{color:var(--muted)}
.result.sf-best{border-color:var(--gold)!important;box-shadow:0 0 0 1px #000,0 0 24px -4px rgba(255,190,60,.6)!important}
.sf-best-badge{position:absolute;top:12px;right:-30px;transform:rotate(38deg);padding:3px 34px;background:linear-gradient(#ffe7a6,#d69a3a);color:#3a1d04;font:800 9px var(--ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 6px #000;animation:panel-in .6s 1s both}
.result-summary dl{gap:9px 12px;font-size:13px}
.result-summary dt{color:var(--muted)}
.result-summary dd{font:600 15px var(--ui);color:var(--text);font-variant-numeric:lining-nums tabular-nums}
.result-summary dd[data-metric^=remaining],.result-summary dd[data-metric^=pet]{padding-bottom:5px;background:linear-gradient(90deg,var(--bar,#2fbf3a) calc(var(--value,0)*100%),rgba(255,255,255,.07) 0) bottom/100% 3px no-repeat}
.result-summary dd[data-metric=remaining-mana],.result-summary dd[data-metric=pet-mana]{--bar:#3a74e8}
.result-summary dd[data-metric=pet-focus]{--bar:#e8a13a}
.result-summary dd[data-metric=player-death]{color:var(--down)}
.damage-breakdown{margin-top:16px;font-size:13px}
.damage-breakdown thead,.damage-breakdown tbody{display:block}
.damage-breakdown tr{display:grid;grid-template-columns:minmax(0,1fr) 110px 90px;align-items:center}
.damage-breakdown th{padding:0 8px 8px;font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.damage-breakdown tbody{display:grid;gap:3px}
.damage-breakdown tbody tr{position:relative;min-height:26px;border-radius:2px;background:rgba(255,255,255,.03);overflow:hidden;animation:meter-row .5s calc(var(--i)*70ms + .2s) both}
.damage-breakdown tbody tr::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--share)*100%);background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--class-color,var(--gold));opacity:.55;transform-origin:left;animation:meter-grow .9s calc(var(--i)*70ms + .3s) cubic-bezier(.2,.8,.2,1) both}
.damage-breakdown tbody tr.sf-pet::before{background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#8d6a45}
.damage-breakdown td{position:relative;padding:4px 8px;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000;font-variant-numeric:lining-nums tabular-nums}
.damage-breakdown td:first-child{font:14px var(--display)}
.damage-breakdown tbody td:first-child::after{content:attr(data-pct);margin-left:8px;font:600 11px var(--ui);color:rgba(255,255,255,.55)}
.damage-breakdown tbody tr.sf-zero td{color:var(--faint)}
@keyframes meter-grow{from{transform:scaleX(0)}}
@keyframes meter-row{from{opacity:0;transform:translateY(4px)}}
.result-notes{margin-top:14px}
.result-notes summary{font-size:12px;color:var(--muted)}
.result-notes summary:hover{color:var(--gold-hi)}
.results-note{font-size:12px;color:var(--muted)}
#results-description{margin:0 0 10px;color:var(--molten);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#comparison-results .comparison-heading{margin-bottom:6px}
.comparison-heading select{min-height:34px;padding-top:5px;padding-bottom:5px;font-size:13px}
.comparison-column-head{padding:6px 0 8px;font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.comparison-result{padding:12px 0;border-top:1px solid var(--line);animation:panel-in .45s calc(var(--i)*60ms) both}
.comparison-result>summary{color:var(--text);font-size:14px}
.comparison-result>summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.comparison-rank{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--muted);font:12px/1 var(--display)}
.sf-best .comparison-rank{background:radial-gradient(circle at 40% 35%,#fff6d8,#e8b45a 45%,#8a5a1c);color:#2a1604;box-shadow:0 0 12px rgba(255,190,60,.6)}
.comparison-result .setup-label{font:16px var(--display)}
.comparison-result-name>.setup-label::after{content:" ⌄";color:var(--faint)}
.comparison-result[open] .comparison-result-name>.setup-label::after{content:" ⌃"}
.comparison-badge{margin-top:3px;color:var(--gold);font:700 9.5px var(--ui);letter-spacing:.16em;text-transform:uppercase}
.comparison-number{font:600 16px var(--ui);font-variant-numeric:lining-nums tabular-nums}
.comparison-error{margin-top:3px;font-size:11px;color:var(--faint)}
.comparison-gain{color:var(--up)}
.comparison-loss{color:var(--down)}
.comparison-incomplete{color:#ffb86b}
.comparison-track{height:5px;margin-top:8px;border-radius:3px;background:rgba(255,255,255,.05)}
.comparison-bar{border-radius:3px;background:linear-gradient(90deg,var(--lava),var(--molten));box-shadow:0 0 10px rgba(255,122,31,.5);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.sf-best .comparison-bar{background:linear-gradient(90deg,var(--molten),var(--gold-hi))}
.comparison-detail{margin:12px 0 0 30px;padding-top:12px;border-top:1px solid var(--line)}
.comparison-detail .button{min-height:32px;font-size:11px}
.comparison-configuration h3{font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.comparison-configuration li,.comparison-configuration p{font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ---------- Welcome (no character yet) ---------- */
.welcome{grid-column:2/-1;position:relative;flex-direction:column;align-items:center;justify-content:center;min-height:620px;padding:56px 48px;text-align:center;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 38%,rgba(255,120,40,.16),transparent 70%),linear-gradient(#17120e,#0e0b08);box-shadow:0 0 0 1px #000,inset 0 0 0 2px rgba(214,165,74,.12),0 30px 60px -24px #000}
.welcome::before{content:"";position:absolute;inset:14px;border:1px solid rgba(214,165,74,.14);border-radius:2px;pointer-events:none}
.welcome-sigil{position:relative;width:196px;height:196px;margin-bottom:26px;display:grid;place-items:center}
.welcome-sigil svg{position:absolute;inset:0;animation:spin 90s linear infinite;filter:drop-shadow(0 0 10px rgba(255,160,60,.35))}
.welcome-sigil img{position:relative;width:96px;height:96px;filter:drop-shadow(0 0 22px rgba(255,160,60,.55)) drop-shadow(0 4px 6px #000);animation:float 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes float{50%{transform:translateY(-6px)}}
.welcome h1,.endgame-empty h1{margin:0 0 14px;font:600 clamp(30px,3.2vw,46px)/1.12 var(--title);letter-spacing:.02em;background:linear-gradient(#fff6dc,#f3cf7c 50%,#c98a2e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000)}
.welcome-copy{max-width:520px;margin:0 auto 28px;color:var(--muted);font-size:17px;line-height:1.6}
.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.welcome-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none;color:var(--muted);font-size:14px}
.welcome-steps li{display:flex;align-items:center;gap:10px}
.welcome-steps span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px var(--gold-lo);color:var(--gold);font:12px var(--display)}
body.sf-restoring .welcome{display:none}
.endgame-empty{max-width:640px;margin:40px auto;padding:56px 40px;text-align:center}

/* ---------- Dock: cast bar and action bar ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:calc(78px + env(safe-area-inset-bottom,0px));padding:8px 24px calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(rgba(26,20,15,.96),rgba(10,8,6,.98));box-shadow:0 -1px 0 #000,0 -12px 30px -10px #000;backdrop-filter:blur(8px)}
.wowsims-credit{grid-column:1;justify-self:start;color:var(--muted);font:13px var(--display);text-decoration:none}
.wowsims-credit:hover{color:var(--text);text-decoration:underline}
.actionbar{grid-column:2;display:flex;align-items:center;gap:10px;justify-self:center}
.action-simulate{position:relative;display:flex;align-items:center;gap:12px;height:54px;padding:0 26px 0 5px;border:1px solid #4a2c0c;border-radius:6px;color:#2c1604;background:linear-gradient(#ffe7a6,#eab452 42%,#c1822c 58%,#eebb5c);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,50,0,.35),0 0 0 1px #000,0 0 0 4px rgba(20,14,10,.9),0 0 0 5px var(--gold-lo),0 10px 26px -8px rgba(255,140,40,.6);transition:filter .2s,box-shadow .25s,transform .12s}
.action-simulate:hover:not(:disabled){filter:brightness(1.07) saturate(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,50,0,.35),0 0 0 1px #000,0 0 0 4px rgba(20,14,10,.9),0 0 0 5px var(--gold),0 0 36px rgba(255,160,60,.7)}
.action-simulate:active:not(:disabled){transform:translateY(1px)}
.action-icon{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:radial-gradient(circle at 50% 30%,#4a2a10,#120a05);box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #000,0 0 0 1px rgba(255,240,200,.5);color:var(--molten);overflow:hidden}
.action-icon svg{width:28px;height:28px}
.action-label{font:22px/1 var(--display);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,240,200,.55)}
.action-cooldown{position:absolute;left:5px;top:5px;width:44px;height:44px;border-radius:4px;pointer-events:none;opacity:0;background:conic-gradient(transparent calc(var(--cast-progress,0)*1turn),rgba(0,0,0,.72) 0);transition:opacity .2s}
body.sf-casting .action-cooldown{opacity:1}
body.sf-casting .action-simulate{cursor:progress;filter:saturate(.8)}
body.sf-casting .action-icon svg{animation:icon-pulse .9s ease-in-out infinite}
@keyframes icon-pulse{50%{transform:scale(.9)}}
body.sf-cast-done .action-simulate{animation:action-done .9s ease-out}
@keyframes action-done{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #000,0 0 0 4px rgba(20,14,10,.9),0 0 0 5px var(--gold),0 0 50px 10px rgba(255,200,90,.85)}}
.action-simulate:disabled{opacity:1}
.action-stop{min-height:40px;padding:0 14px;border:1px solid var(--line-2)!important;border-radius:5px;background:rgba(0,0,0,.4)!important;color:var(--down)!important}

.castbar{position:absolute;left:50%;bottom:calc(100% + 18px);width:min(380px,calc(100vw - 32px));transform:translateX(-50%);animation:cast-in .25s cubic-bezier(.2,.8,.2,1)}
@keyframes cast-in{from{opacity:0;transform:translate(-50%,6px)}}
.castbar.is-leaving{opacity:0;transform:translate(-50%,-6px);transition:opacity .4s,transform .4s}
.castbar-track{position:relative;height:24px;border-radius:4px;background:#050403;box-shadow:0 0 0 1px #000,0 0 0 3px #3a3a3a,0 0 0 4px #000,0 0 0 5px rgba(214,165,74,.5),0 12px 30px #000;overflow:hidden}
.castbar-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(90deg,#9a5200,#e39a00 70%,#ffbd24);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.castbar-spark{position:absolute;top:-6px;bottom:-6px;left:calc(var(--progress,0)*100%);width:22px;margin-left:-11px;background:radial-gradient(closest-side,rgba(255,255,230,.95),rgba(255,220,120,.4) 45%,transparent);mix-blend-mode:screen}
.castbar-label{position:absolute;left:0;right:0;top:0;height:24px;display:grid;place-items:center;font:14px/1 var(--display);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 6px #000;letter-spacing:.03em}
.castbar-time{position:absolute;right:8px;top:0;height:24px;display:grid;place-items:center;font:600 11px var(--ui);color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.castbar.is-done .castbar-fill{background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 55%),linear-gradient(90deg,#c77a00,#ffc43a);animation:cast-flash .7s ease-out}
.castbar.is-done .castbar-track{box-shadow:0 0 0 1px #000,0 0 0 3px #3a3a3a,0 0 0 4px #000,0 0 0 5px rgba(255,209,0,.8),0 0 30px rgba(255,190,60,.6)}
.castbar.is-done .castbar-spark{opacity:0}
.castbar.is-failed .castbar-fill{background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,0) 55%),linear-gradient(90deg,#7c0d06,#d62a14)}
.castbar.is-failed .castbar-spark{opacity:0}
@keyframes cast-flash{0%{filter:brightness(1.8)}100%{filter:none}}

.issue-control{justify-self:end;display:flex;align-items:center}
.issue-link{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none}
.issue-link svg{width:16px;height:16px;flex:none}

/* ---------- Tooltips: the classic navy tooltip ---------- */
.talent-tooltip,.item-tooltip,.spell-tooltip{padding:11px 13px;border-radius:5px;background:linear-gradient(rgba(10,12,32,.96),rgba(4,5,16,.96));border:1px solid #9c9c9c;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.08),0 14px 30px #000c;color:#fff;font:14px/1.4 var(--display)}
.talent-tooltip strong,.item-tooltip strong,.spell-tooltip strong{font-size:17px;color:#fff}
.item-tooltip strong{color:var(--quality,#fff)}
.talent-tooltip span,.item-tooltip span,.spell-tooltip-rank{font-size:13px;color:#d0d0d0}
.talent-tooltip p,.item-tooltip p,.spell-tooltip-description,.item-tooltip-stats{color:var(--wow-yellow)}
.item-tooltip-stats{margin-top:10px;color:#fff}
.item-tooltip{inset:auto;margin:0;width:320px;overflow-y:auto;pointer-events:auto}
.item-tooltip-full{font:13px/1.4 var(--ui);color:#fff}
.item-tooltip-full table{width:100%;border-collapse:collapse}
.item-tooltip-full td,.item-tooltip-full th{padding:0;vertical-align:top;font-weight:normal}
.item-tooltip-full th{text-align:right;white-space:nowrap;padding-left:12px}
.item-tooltip-full span{font:inherit;color:inherit}
.item-tooltip-full b{font-weight:normal}
.item-tooltip-full>table:first-child>tbody>tr>td>b:first-child{font:17px/1.4 var(--display);color:var(--quality)}
.item-tooltip-full .q{color:#ffd100}
.item-tooltip-full .q0{color:#9d9d9d}
.item-tooltip-full .q1{color:#fff}
.item-tooltip-full .q2{color:#1eff00}
.item-tooltip-full .q3{color:#0070dd}
.item-tooltip-full .q4{color:#a335ee}
.item-tooltip-full .q5{color:#ff8000}
.item-tooltip-full .q6{color:#e6cc80}
.item-tooltip-full .q10{color:#f33}
.item-tooltip-full .whtt-sellprice{margin-top:8px}
.item-tooltip-full .moneygold::after{content:'g';color:#ffd100;margin-left:2px}
.item-tooltip-full .moneysilver::after{content:'s';color:#c7c7cf;margin-left:2px}
.item-tooltip-full .moneycopper::after{content:'c';color:#c88a60;margin-left:2px}
.item-source{font:12px/1.4 var(--ui);color:var(--muted);text-align:right;overflow-wrap:anywhere}
.item-tooltip>.item-source{margin-top:12px;padding-top:8px;border-top:1px solid #ffffff26;color:#bfb8a8}
.item-tooltip .item-tooltip-status{font:12px var(--ui);color:var(--muted)}
.spell-tooltip-line{font-size:13px;margin-top:2px}
.spell-tooltip-description{margin-top:10px}
.talent-tooltip small,.buff-tooltip-note{color:#9fa7b8;font:12.5px var(--ui)}
.talent-tooltip .talent-validation-note{color:#ffb84b}
.enchant-description{font-size:13px;line-height:1.55}
.enchant-description strong{color:#1eff00;font:15px var(--display);margin-bottom:3px}
.enchant-description div{color:var(--wow-yellow)}

/* ---------- Dialogs ---------- */
dialog{border:1px solid var(--edge);border-radius:6px;background:radial-gradient(100% 50% at 50% 0%,rgba(214,165,74,.08),transparent 70%),linear-gradient(#17120e,#0d0a07);color:var(--text);box-shadow:0 0 0 1px #000,inset 0 0 0 2px rgba(214,165,74,.14),0 40px 100px #000,0 0 60px -10px rgba(255,106,20,.25)}
dialog[open]{animation:dialog-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
dialog::backdrop{background:radial-gradient(circle at 50% 60%,rgba(40,14,4,.7),rgba(4,3,2,.88));backdrop-filter:blur(5px)}
.dialog-heading h2{font:600 24px var(--title);color:var(--gold-hi);letter-spacing:.03em;text-shadow:0 0 16px rgba(255,180,80,.3)}
.close-button{width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a1d10,#0a0705);color:var(--gold);box-shadow:0 0 0 1px #000}
.close-button:hover{color:#fff;border-color:var(--gold);box-shadow:0 0 0 1px #000,0 0 12px rgba(255,170,70,.45)}
#talent-rank{margin-top:-8px}
#talent-description{font:17px/1.5 var(--display);color:var(--wow-yellow)}
.card-footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.addon-download .button{min-height:34px;font-size:11px}
.item-row{padding:10px 0;border-bottom:1px solid var(--line)}
.item-row .item-icon{width:40px;height:40px;border:1px solid var(--quality,var(--edge));border-radius:5px;box-shadow:none}
.equipment-item-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;column-gap:12px;row-gap:4px}
.equipment-item-row>.item-icon{grid-column:1;grid-row:1}
.equipment-item-row>.item-description{grid-column:2;grid-row:1}
.equipment-item-row>.button,.equipment-item-row>.item-state{grid-row:1}
.equipment-item-row>.item-source{grid-column:2 / -1;grid-row:2}
.equipment-item-row:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
@media(max-width:560px){
  .equipment-item-row{grid-template-columns:40px minmax(0,1fr) auto}
  .equipment-item-row>.item-description{grid-column:2 / -1}
  .equipment-item-row>.button,.equipment-item-row>.item-state{grid-row:2;justify-self:start}
  .equipment-item-row>.item-source{grid-row:3}
}
.item-name{font:15px/1.3 var(--display)}
.item-id{margin-top:2px;font-size:12px;color:var(--muted)}
.item-state{font:600 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.item-row .button{min-height:32px;padding:0 12px;font-size:11px}
#item-search,#enchant-search{margin-top:14px}
#equipped-enchant{padding:4px 0 10px}
.wowhead-item-form,#original-stats-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
details>summary{color:var(--muted);font-size:13px}
details[open]>summary{margin-bottom:12px;color:var(--text)}
.item-stat-fields input{min-height:34px;padding:6px 8px;font-size:13px}

/* ---------- Scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:#5a4222 transparent}

/* ---------- Responsive ---------- */
@media(min-width:1440px){
  .character-column,.rotation-column,.simulation-column{max-height:calc(100dvh - 86px - 22px - 122px);}
  .rotation-column{display:flex;flex-direction:column}
  .rotation-pages{overflow-y:auto;min-height:64px;overscroll-behavior:contain;margin-right:-8px;padding-right:8px}
  .simulation-card{display:flex;flex-direction:column;max-height:100%}
  #simulation-setup-panel,#simulation-results-panel{overflow-y:auto;overscroll-behavior:contain;min-height:0;margin-right:-8px;padding-right:8px}
  .character-column{overflow:visible}
}
@media(min-width:1100px) and (max-width:1439px){
  .workspace{grid-template-columns:minmax(500px,1.05fr) minmax(420px,1fr)}
  .character-column{grid-column:1;grid-row:1/span 2}
  .rotation-column,.simulation-column{grid-column:2}
  .welcome{grid-column:2;grid-row:1/span 2}
}
@media(max-width:1099px){
  .workspace{grid-template-columns:minmax(0,1fr);max-width:820px;margin:0 auto}
  .welcome{grid-column:1;min-height:0}
  .topbar{grid-template-columns:auto 1fr;height:auto;padding:14px 20px;gap:14px}
  .brand{order:-1}
  .unit-frame{grid-column:1/-1;order:2}
  .top-actions{justify-content:flex-end}
}
@media(max-width:700px){
  main{padding:16px 12px calc(152px + env(safe-area-inset-bottom,0px))}
  .brand-name{font-size:18px;letter-spacing:.08em}
  .brand-mark{width:36px;height:36px}
  .top-actions{gap:8px}
  .mode-tabs button,.issue-link{padding:6px 9px;font-size:13px}
  .character-sheet{grid-template-columns:minmax(0,1fr)}
  .character-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-left:0;border-top:1px solid var(--line)}
  .stat-group+.stat-group{margin-top:0}
  .stat-group:last-child{grid-column:1/-1}
  .paper-doll{--slot:46px;padding:16px 26px}
  .sheet-tabs{left:12px}
  .sheet-tabs [role=tab]{padding:0 11px 3px;font-size:14px}
  .sheet-tabs kbd,.rotation-tabs kbd{display:none}
  .rotation-column,.simulation-card{padding:0 14px 16px}
  .window-title{margin:0 -14px 16px;padding:0 14px;flex-wrap:wrap;min-height:56px}
  .rotation-tabs [role=tab]{font-size:19px}
  .dock{grid-template-columns:1fr;gap:4px;padding-inline:10px;height:auto;min-height:calc(78px + env(safe-area-inset-bottom,0px))}
  .actionbar{grid-column:1;justify-self:center;justify-content:center;flex-wrap:wrap;min-width:0;max-width:100%}
  .issue-control{grid-column:1;justify-self:center}
  .wowsims-credit{grid-row:3;padding:4px 0}
  .action-simulate{height:48px;padding-right:16px}
  .action-icon,.action-cooldown{width:38px;height:38px}
  .action-label{font-size:18px}
  .welcome{padding:40px 22px}
  .welcome-sigil{width:150px;height:150px}
  .welcome-sigil img{width:74px;height:74px}
  .damage-breakdown tr{grid-template-columns:minmax(0,1fr) 70px 80px}
  .result .time{font-size:40px}
  .unit-frame{gap:10px}
  .unit-bars{column-gap:10px}
  .portrait{width:48px;height:48px}
  .unit-name{font-size:15px}
}
@media(max-width:420px){
  .result-grid{grid-template-columns:1fr}
  .topbar .character-actions .button{padding:0 10px}
  .top-actions{grid-column:1/-1;justify-content:space-between}
}

.wowhead-item-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.wowhead-item-form label{flex:1;min-width:200px}
.wowhead-item-form button{flex-shrink:0}