.elemental-viewport { border-color:#494363; }
.elemental-hud { width:min(390px,46%); }
.spell-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-top:.72rem; }
.spell { position:relative; overflow:hidden; }
.spell::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--element); box-shadow:0 0 9px var(--element); }
.fire-card{--element:#ff7547}.ice-card{--element:#6edcff}.earth-card{--element:#d2aa69}.lightning-card{--element:#d9c9ff}
.status-key { color:#b9b5c6; font-size:.65rem; }
@media(max-width:700px){.elemental-hud{width:52%}.spell-grid{gap:.25rem}.spell{padding:.36rem .45rem;font-size:.58rem}}