.magic-scene-overlay{position:absolute;inset:0;z-index:85;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:#0a142452;font-family:system-ui;isolation:isolate}
.magic-scene{position:relative;width:min(650px,100%);box-sizing:border-box;padding:23px 26px 18px;border:1px solid #d4bf86;border-radius:27px;background:radial-gradient(ellipse at 15% 0,#40516588,transparent 65%),linear-gradient(135deg,#172c3d,#191d38 70%,#30304b);box-shadow:0 22px 90px #050c23a6,inset 0 0 0 5px #f4df9d0a;color:#fcf5dd;overflow:hidden;animation:magic-scene-enter .25s ease-out}
.magic-scene::before{content:'';position:absolute;inset:7px;border:1px solid #e8d8a82b;border-radius:21px;pointer-events:none}
.magic-scene-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.magic-scene-eyebrow{margin:0!important;font:600 11px/1.4 system-ui!important;letter-spacing:1.4px;text-transform:uppercase;color:#d7d9e8!important}
.magic-scene-cost{padding:6px 10px;border:1px solid #cdb57466;border-radius:20px;white-space:nowrap;color:#ffe7a7;font:600 12px system-ui}
.magic-scene h2{margin:9px 0 0!important;font:400 38px/1.15 Georgia!important;color:var(--spell-color)!important;text-shadow:0 2px 22px #d9c0a033;text-align:left}
.magic-scene-stage{position:relative;height:220px;margin:0 -16px;background:radial-gradient(ellipse at 50% 75%,#a69cce14,transparent 65%);isolation:isolate}
.magic-scene-stage::after{content:'';position:absolute;left:10%;right:10%;bottom:31px;height:1px;background:linear-gradient(90deg,transparent,#c9c8e538,transparent)}
.magic-scene-subject{position:absolute;top:30px;width:32%;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;z-index:1}
.magic-scene-caster{left:5%;animation:magic-caster 2.4s ease-out both}.magic-scene-target{right:5%;animation:magic-target 2.4s ease-out both}
.magic-scene-frame{width:80px;height:111px;border:2px solid #e1c280;border-radius:13px;padding:4px;background:linear-gradient(140deg,#e8d9ac,#746341);box-shadow:0 5px 25px #080e2c88,0 0 28px #f9dc8c1c;box-sizing:border-box;display:grid;place-items:center;position:relative}
.magic-scene-frame.night{border-color:#b29dcc;background:linear-gradient(140deg,#bfaacb,#554569)}
.magic-scene-frame img{width:100%;height:100%;object-fit:cover;border-radius:7px;min-height:0}
.magic-scene-target .magic-scene-frame:has(.magic-scene-emblem),.magic-scene-target .magic-scene-frame:has(.dream-portrait){width:101px;height:111px;border-radius:50% 50% 44% 44%;background:radial-gradient(ellipse,#fbe6ad33,#35334a);box-shadow:0 0 0 7px #d6c9e60a,0 0 35px #c4bcf51c}
.magic-scene-frame .dream-portrait{width:100%;height:100%;border:0;box-shadow:none}
.magic-scene-emblem{font:63px/1 Georgia;color:#fff1bc;text-shadow:0 0 23px #f4cf7a;filter:drop-shadow(0 0 12px #ffe6c666)}
.magic-scene-frame.night .magic-scene-emblem{color:#e2d3ff;text-shadow:0 0 23px #b789e6}
.magic-scene-subject figcaption{font:600 12px/1.4 system-ui;color:#fff1d0;max-width:100%;overflow-wrap:anywhere}
.magic-scene-sigil{position:absolute;left:50%;top:77px;transform:translateX(-50%);color:var(--spell-color);opacity:.4;font:43px Georgia;text-shadow:0 0 22px var(--spell-color)}
.magic-scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.magic-scene-result{position:relative;padding:14px 17px;border:1px solid #d5c38b45;border-left:3px solid var(--spell-color);border-radius:12px;background:#070f2380;text-align:left}
.magic-scene-result-label{font:600 10px/1.5 system-ui;letter-spacing:.8px;text-transform:uppercase;color:var(--spell-color)}
.magic-scene-result p{font:500 16px/1.6 system-ui!important;color:#fff9e8!important;margin:5px 0 0!important}
.magic-scene-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:17px;margin-top:16px}
.magic-scene-footer small{color:#bfc5d7;font:11px/1.5 system-ui;max-width:230px}
.game-dialog .magic-scene-continue{min-height:44px;flex:none;background:#f2ddb0;color:#253447;border:1px solid #ffedc8;border-radius:23px;padding:11px 20px;font:700 13px system-ui;box-shadow:0 3px 16px #050a1b30;cursor:pointer}
.magic-scene-continue:focus-visible{outline:3px solid white;outline-offset:3px}
.magic-scene-time{position:absolute;bottom:0;left:0;height:3px;width:100%;background:var(--spell-color);opacity:.65;transform-origin:left;animation:magic-scene-countdown var(--scene-time) linear forwards}
[data-effect=freeze] .magic-scene-target .magic-scene-frame{animation:magic-ice 2.4s both}
[data-effect=shield] .magic-scene-target .magic-scene-frame{animation:magic-protect 2.4s both}
[data-effect=heal] .magic-scene-target .magic-scene-frame,[data-effect=restore] .magic-scene-target .magic-scene-frame,[data-effect=grow] .magic-scene-target .magic-scene-frame{animation:magic-bloom 2.4s both}
[data-effect=damage] .magic-scene-target{animation:magic-fracture 2.4s both}
@keyframes magic-scene-enter{from{transform:translateY(8px) scale(.98)}to{transform:none}}
@keyframes magic-caster{0%,100%{transform:none}24%,45%{transform:translateY(-7px) rotate(-4deg)}}
@keyframes magic-target{0%,43%,100%{transform:none}53%{transform:translateX(6px)}65%{transform:translateX(-2px)}}
@keyframes magic-ice{0%,35%{filter:none}70%,100%{filter:drop-shadow(0 0 15px #9de7ff);border-color:#c0f1ff}}
@keyframes magic-protect{0%,35%{box-shadow:none}75%,100%{box-shadow:0 0 0 9px #c5b6ff33,0 0 0 15px #c5b6ff18,0 0 27px #b6a3ff66}}
@keyframes magic-bloom{0%,35%{filter:none}70%,100%{filter:drop-shadow(0 0 17px #b5ffc2)}}
@keyframes magic-fracture{0%,43%,100%{transform:none}48%,58%{transform:rotate(4deg)}53%,63%{transform:rotate(-4deg)}}
@keyframes magic-scene-countdown{to{transform:scaleX(0)}}
@media(max-width:650px){.magic-scene-overlay{padding:12px}.magic-scene{padding:20px 19px 17px;border-radius:23px}.magic-scene h2{font-size:30px!important}.magic-scene-eyebrow{font-size:9px!important;letter-spacing:.8px}.magic-scene-cost{font-size:10px;padding:5px 8px}.magic-scene-stage{height:185px;margin:0 -14px}.magic-scene-subject{top:26px}.magic-scene-frame{width:65px;height:90px}.magic-scene-target .magic-scene-frame:has(.magic-scene-emblem),.magic-scene-target .magic-scene-frame:has(.dream-portrait){width:78px;height:90px}.magic-scene-subject figcaption{font-size:10px}.magic-scene-emblem{font-size:46px}.magic-scene-sigil{top:63px;font-size:31px}.magic-scene-result{padding:11px 12px}.magic-scene-result p{font-size:14px!important}.magic-scene-footer{gap:10px}.magic-scene-footer small{font-size:10px}.game-dialog .magic-scene-continue{font-size:12px;padding:10px 14px}}
@media(max-height:600px){.magic-scene{padding:13px 20px}.magic-scene h2{font-size:26px!important}.magic-scene-stage{height:133px}.magic-scene-subject{top:6px;gap:5px}.magic-scene-frame{width:54px;height:73px}.magic-scene-target .magic-scene-frame:has(.magic-scene-emblem),.magic-scene-target .magic-scene-frame:has(.dream-portrait){width:65px;height:73px}.magic-scene-subject figcaption{font-size:9px}.magic-scene-emblem{font-size:37px}.magic-scene-sigil{top:34px;font-size:30px}.magic-scene-result{padding:8px 12px}.magic-scene-result p{font-size:13px!important;line-height:1.45!important}.magic-scene-footer{margin-top:10px}.magic-scene-result-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.magic-scene,.magic-scene *{animation:none!important;transition:none!important}}