#hud .inventory-tabs button { width: 20%; }
#hud .inventory-grid.spellbook-open { width: min(450px, calc(100vw - 24px)); height: min(750px, calc(100vh - 140px)); max-height: calc(100vh - 140px); }
#magic-panel { min-height: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 10px; gap: 7px; }
.spellbook-heading { display:flex; align-items:center; justify-content:space-between; border-bottom: 3px double #92795470; padding-bottom:8px; }
.spellbook-heading small { font: 9px Georgia,serif; letter-spacing: 1.6px; }
.spellbook-heading h3 { font: 23px Georgia,serif; margin: 3px 0 0; }
.spellbook-heading b { border: 1px solid #907954; border-radius:50%; padding:10px 7px; font:14px Georgia,serif; }
.spell-categories { display:flex; gap:4px; }
.spell-categories button { flex:1; padding:7px 2px; font:12px Georgia,serif; border:1px solid #96794d66; background:#a68b6320; }
.spell-categories button[aria-pressed=true] { background:#a68b6360; box-shadow:inset 0 -2px #874c3e; }
.spell-schools { display:flex; gap:4px; }
.spell-schools[hidden] { display:none; }
.spell-schools button { flex:1; padding:5px 3px; border:1px solid #96794d45; background:#a68b6312; border-radius:12px; font:11px Georgia,serif; }
.spell-schools button[aria-pressed=true] { background:#75618e26; border-color:#786391; }
.spell-schools [data-school=arcane] { color:#643c86; }
.spell-schools [data-school=ice] { color:#235f82; }
.spell-schools [data-school=ice][aria-pressed=true] { background:#598fa82b; border-color:#5787a1; }
.spell-list { display:grid; grid-template-columns:1fr 1fr; gap:5px; overflow-y:auto; min-height:120px; flex:1; align-content:start; padding:2px; }
.spell-card { display:flex; position:relative; align-items:center; text-align:left; gap:6px; min-height:55px; border:1px solid #9e835c55; background:#fff7df2b; padding:4px; border-radius:3px; }
#hud .spell-card .icon { width:43px; height:43px; flex-shrink:0; filter:drop-shadow(0 2px 1px #54422240); }
.spell-card strong { font:13px Georgia,serif; display:block; }
.spell-card small { display:block; font-size:10px; margin-top:4px; }
.spell-card em { display:block; margin-top:3px; font:9px Arial,sans-serif; color:#6c557c; }
.spell-card[data-element=arcane] { background:linear-gradient(135deg,#bca3db28,#f5d9aa16); border-color:#9d7bbb66; }
.spell-card[data-element=ice] { background:linear-gradient(135deg,#caeff344,#699bbb1c); border-color:#73a6bf77; }
.spell-card[data-element=ice] em { color:#2d6684; }
.spell-card.locked .icon { filter:saturate(.3); opacity:.6; }
.spell-card[aria-pressed=true] { border:1px solid #77629c; background:#a495bd2e; box-shadow:inset 0 0 0 1px #77629c55; }
.spell-card i { position:absolute; right:3px; top:3px; font-size:9px; color:#7752a2; }
.spell-detail { border-top:3px double #92795470; padding-top:6px; font-size:11px; max-height:52%; overflow-y:auto; flex-shrink:0; }
.spell-title { display:flex; align-items:center; gap:8px; }
.spell-title > div { flex:1; min-width:0; }
.spell-detail-toggle { flex-shrink:0; align-self:flex-start; width:24px; height:24px; padding:0; border:1px solid transparent; border-radius:3px; background:transparent; color:#796b53; font:20px/22px Georgia,serif; cursor:pointer; }
.spell-detail-toggle:hover { color:#4b3d2b; border-color:#92795455; background:#92795412; }
.spell-detail-toggle:focus-visible { outline:1px solid #796b53; outline-offset:2px; }
#spell-detail-content[hidden], .spell-detail.is-collapsed .spell-title .icon, .spell-detail.is-collapsed .spell-title small { display:none; }
.spell-detail.is-collapsed .spell-title h4 { font-size:13px; margin:0; }
#hud .spell-title .icon { width:38px; height:38px; }
.spell-title h4 { font:18px Georgia,serif; margin:0 0 3px; }
.spell-progression { display:flex; gap:5px; margin:8px 0; }
.spell-progression button { position:relative; flex:1; padding:5px 2px; background:#8b70af16; border:1px solid #987cb946; color:inherit; border-radius:3px; }
.spell-progression button:not(:last-child)::after { content:'›'; position:absolute; right:-6px; top:9px; color:#806293; z-index:1; }
.spell-progression strong { display:block; font:12px Georgia,serif; }
.spell-progression span { display:block; font-size:9px; margin-top:3px; opacity:.8; }
.spell-progression [aria-current=step] { background:#9472ba35; border-color:#785495; box-shadow:inset 0 -2px #b39454; }
.spell-progression[data-element=ice] button { background:#71a6c016; border-color:#6597b04f; }
.spell-progression[data-element=ice] [aria-current=step] { background:#6aaec336; border-color:#4d88a8; box-shadow:inset 0 -2px #b7e8ed; }
.spell-detail p { line-height:1.45; margin:6px 0; }
.spell-effect { font-weight:bold; }
.rune-costs { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.rune-cost { display:flex; align-items:center; gap:4px; padding:4px 6px 4px 1px; background:#8a785522; border:1px solid #8a785533; border-radius:3px; font-size:10px; }
#hud .rune-cost .icon { width:30px; height:30px; }
.rune-cost b { display:block; font-size:12px; }
#hud .rune-cost.missing b { color:#8e392d; }
.spell-actions { display:flex; gap:6px; }
.spell-actions button { flex:1; padding:9px 5px; border:1px solid #887154; background:#8974532e; font:13px Georgia,serif; }
.spell-actions button:disabled { opacity:.5; cursor:default; }
.spell-requirement { display:block; margin-top:6px; line-height:1.35; }
.alchemy-target { display:grid; gap:5px; }
.alchemy-target select { width:100%; background:#eadfc5; color:#4b3d2b; border:1px solid #927954; padding:7px; }
.magic-status { min-height:14px; font-size:11px; text-align:center; font-style:italic; }
.magic-status[hidden] { display:none; }
@media(max-height:760px) { #magic-panel { gap:5px; padding:8px; } .spell-detail p:not(.spell-effect):not(.alchemy-value) { display:none; } .spellbook-heading h3{font-size:18px} .spell-progression { margin:5px 0; } }