.barRow.mana #resFill{background:linear-gradient(90deg,#5359a1,#95bcff)}
.mageControls{display:grid;gap:6px;width:100%}
.mageControls .mageOpen{padding:11px;border-color:#9980b2;color:#e2d2f0;background:linear-gradient(110deg,#30243f,#1c1828);font-size:15px}
.mageHint,.mageStatus{font-size:11px;text-align:center;color:#b3a2c8;line-height:1.5}
.mageStatus{color:#d9c490}
.magePotions{display:flex;gap:5px;flex-wrap:wrap}
.magePotions button{flex:1;font-size:11px;padding:8px}
.mageBook{box-sizing:border-box;width:min(870px,94vw);max-height:88dvh;margin:auto;padding:22px;border:1px solid #93754b;border-radius:8px;color:#e6dccb;background:radial-gradient(ellipse at top,#35263f,transparent 65%),#18131d;box-shadow:0 20px 80px #000c;overflow:auto;overscroll-behavior:contain}
.mageBook::backdrop{background:#08060cba;backdrop-filter:blur(3px)}
.mageBook button{border:1px solid #796148;background:#201a25;color:#e6d4b0;min-height:40px;padding:9px 12px;border-radius:4px;cursor:pointer;font:inherit}
.mageBook button:hover:not(:disabled){background:#3b2a48;border-color:#c5a574}
.mageBook button:focus-visible{outline:2px solid #bda5ff;outline-offset:3px}
.mageBook button:disabled{opacity:.45;cursor:default}
.mageBookHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mageBookHead h2{font:28px Forum,serif;color:#f2dfb1;margin:0}
.mageBookHead button{font-size:12px}
.mageBookSummary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:16px 0 8px;font-size:12px;color:#bbacca}
.mageBookSummary strong{color:#b5c7ff}
.mageManaTrack{height:5px;background:#080710;border-radius:3px;overflow:hidden;margin-bottom:20px}
.mageManaTrack i{display:block;height:100%;background:linear-gradient(90deg,#6460a9,#b0cbff)}
.mageCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mageCard{display:flex;flex-direction:column;align-items:center;min-width:0;padding:18px 14px;border:1px solid #6a526c;background:linear-gradient(145deg,#32283a66,#0c0b1299);border-radius:5px;text-align:center;animation:magePageIn .22s ease-out}
.mageCard h3{font:22px Forum,serif;margin:9px 0;color:var(--spell-color)}
.mageGlyph{display:grid;place-items:center;width:66px;height:66px;font-size:33px;border:1px solid var(--spell-color);border-radius:50%;color:var(--spell-color);background:#13101d;box-shadow:0 0 22px #a783cb19}
.mageCost{font-size:12px;color:#bfc9fc}
.mageCard p{font-size:12px;line-height:1.7;color:#c5b7ce;margin:13px 0 20px;flex:1}
.mageCard button{width:100%;font-size:12px}
.mageProblem{font-size:11px;line-height:1.5;color:#d5a19c;margin:0 0 10px}
.mageScaling{font-size:11px;line-height:1.6;color:#d9c897;margin:0 0 12px;grid-column:1/4}
.mageBookFoot{margin-top:16px;display:flex;align-items:center;gap:16px}
.mageBookFoot p{flex:1;font-size:11px;line-height:1.6;color:#a99bad;margin:0}
.mageBookFoot button{font-size:11px;flex-shrink:0}
@keyframes magePageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
  .mageBook{padding:15px;width:95vw;max-height:90dvh}
  .mageBookHead h2{font-size:23px}.mageBookHead button{font-size:10px;padding:7px}
  .mageCards{grid-template-columns:1fr;gap:9px}
  .mageCard{display:grid;grid-template-columns:44px 1fr auto;gap:5px 9px;padding:12px;text-align:left;align-items:center}
  .mageGlyph{width:40px;height:40px;font-size:23px;grid-row:1/3}
  .mageCard h3{font-size:21px;margin:0;grid-column:2/4}
  .mageCost{grid-column:2/4;font-size:11px}
  .mageCard p{grid-column:1/4;font-size:11px;line-height:1.6;margin:5px 0}
  .mageCard button,.mageProblem{grid-column:1/4;margin:0}
  .mageBookFoot{flex-direction:column;align-items:stretch;gap:9px}
}
@media(prefers-reduced-motion:reduce){.mageCard{animation:none}}