.magic-choice{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);gap:38px;align-items:center;margin:-20px 0 50px;padding:28px 32px;border:1px solid rgba(217,140,255,.34);background:linear-gradient(135deg,rgba(97,35,145,.24),rgba(14,8,20,.9))}
.magic-choice .eyebrow{margin-bottom:10px}.magic-choice h3{margin:0;font-size:clamp(20px,2.4vw,31px);text-transform:uppercase}.magic-choice>p{margin:0;color:#b7a7bf;line-height:1.8}
.spell-list{display:flex;flex-wrap:wrap;gap:7px 12px}.spell-info-button{padding:5px 0;border:0;border-bottom:1px solid rgba(217,140,255,.35);background:transparent;color:#bda6ca;cursor:pointer;font:500 12px Inter;text-align:left}.spell-info-button:hover,.spell-info-button:focus-visible{color:#f0d8ff;border-color:#d98cff;outline:0}
.spell-dialog{width:min(520px,calc(100% - 32px));padding:38px;border:1px solid rgba(217,140,255,.52);background:linear-gradient(145deg,#180d22,#0b0710);color:#f3edf8;box-shadow:0 30px 100px #000}.spell-dialog::backdrop{background:rgba(4,2,7,.78);backdrop-filter:blur(5px)}.spell-dialog h3{margin:0 0 16px;font-size:clamp(25px,4vw,38px);text-transform:uppercase}.spell-dialog>p:not(.eyebrow){color:#c1b2c8;line-height:1.75}.spell-dialog small{display:block;margin-top:22px;padding-top:17px;border-top:1px solid var(--line);color:#897891;line-height:1.55}.spell-dialog-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:1px solid var(--line);background:transparent;color:#d9b5ee;cursor:pointer;font-size:24px}.spell-dialog-close:hover{border-color:#d98cff;color:#fff}
@media(max-width:760px){.magic-choice{grid-template-columns:1fr;gap:18px;padding:24px}}@media(max-width:520px){.spell-dialog{padding:30px 24px}}