/* Arcana Mystica Spell Studio v2 — scoped to Make a Spell only. */
body[data-page="spell"] {background:#090614}
body[data-page="spell"] .page-bg{background:
  radial-gradient(ellipse 68% 40% at 50% 5%,rgba(101,39,150,.45),transparent 90%),
  radial-gradient(ellipse 55% 30% at 4% 55%,rgba(134,51,165,.22),transparent 100%),
  radial-gradient(ellipse 55% 30% at 96% 55%,rgba(134,51,165,.22),transparent 100%),
  linear-gradient(180deg,#0b061a,#170b2b 48%,#0a0619)}
body[data-page="spell"] .page-bg:after{content:"";background-image:radial-gradient(2px 2px at 25% 33%,#f5d59a99 50%,transparent 65%),radial-gradient(1px 1px at 80% 18%,#e4c3fa99 50%,transparent 66%),radial-gradient(1px 1px at 50% 75%,#f1dbff88 50%,transparent 66%);background-size:330px 370px,240px 320px,190px 260px;opacity:.65;animation:slStars 16s linear infinite alternate}
body[data-page="spell"] #main{overflow:hidden}
.sl{--sl-gold:#f6dba3;--sl-text:#f9edf9;--sl-muted:#d7c5df;--sl-border:rgba(237,188,105,.43);--sl-panel:rgba(28,12,50,.84);--sl-pink:#d79aff;--sl-deep:#160a2b;color:var(--sl-text)}
.sl h1,.sl h2,.sl h3,.sl h4{font-family:'Cinzel',Georgia,serif;color:var(--sl-gold)}
.sl p,.sl label,.sl button,.sl span,.sl small,.sl strong,.sl a,.sl li,.sl textarea,.sl input{font-size:inherit}
.sl .sl-kicker{font-weight:700;color:#f2cb86;text-transform:uppercase;letter-spacing:.13em;margin-bottom:13px}
.sl-hero{min-height:350px;position:relative;padding:48px 0 36px;display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
.sl-hero-content{position:relative;z-index:2}
.sl-hero h1{font-size:clamp(2rem,7vw,4.7rem);line-height:1.08;letter-spacing:-.045em;text-shadow:0 0 33px #a467be55;margin-bottom:15px}
.sl-lead{max-width:675px;line-height:1.75;color:#f0dcf0}
.sl-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.sl-badge{background:#26123ae3;border:1px solid #a98069a1;color:#eed6a9;padding:9px 14px;border-radius:30px}
.sl-hero-image{display:none;position:relative;justify-self:end;align-self:stretch;width:100%;height:340px;isolation:isolate}
.sl-hero-image:before{content:"";position:absolute;inset:3% 8% 11%;border:1px solid #b98a6899;border-radius:50%;box-shadow:0 0 0 18px #ab70d50e,0 0 70px #9955db55}
.sl-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 18%;mask-image:linear-gradient(to bottom,#000 70%,transparent);position:relative;border-radius:50% 50% 0 0}
.sl-hero-image:after{content:'☽  ✦  ☾';position:absolute;bottom:1%;left:0;right:0;text-align:center;color:#f2c780;letter-spacing:.8em;text-shadow:0 0 14px #efa1fb}
.sl-layout{display:grid;gap:23px;grid-template-columns:1fr;align-items:start;margin-bottom:65px}
.sl-chamber{border:1px solid var(--sl-border);border-radius:27px;background:linear-gradient(155deg,rgba(44,19,66,.91),rgba(15,8,34,.97));box-shadow:inset 0 0 75px rgba(119,56,153,.09),0 28px 90px #0006;overflow:hidden;position:relative}
.sl-chamber:before{content:"";position:absolute;top:-170px;right:-110px;width:370px;height:370px;border-radius:50%;background:radial-gradient(circle,#854cc03b,transparent 65%);pointer-events:none}
.sl-chamber-head{padding:25px 22px 14px;position:relative}
.sl-chamber-head h2{font-size:clamp(1.45rem,4vw,2.1rem);margin:0 0 9px}
.sl-chamber-head p{color:var(--sl-muted);margin:0}
.sl-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:0 18px 22px;position:relative}
.sl-progress-step{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:15px;color:#cfbbda;position:relative}
.sl-progress-step .dot{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#271337;border:1px solid #ac855c;color:#dab891;font-size:15px;box-shadow:0 0 8px #9872d41f}
.sl-progress-step.active .dot{background:linear-gradient(135deg,#f8dfa4,#ba783f);color:#281527;box-shadow:0 0 20px #eeb16f90}
.sl-progress-step.done .dot{border-color:#f6dba3;color:#f5d8a6}
.sl-progress-step .name{font-size:15px}
.sl-progress-step:not(.active) .name{opacity:.8}
.sl-body{position:relative;padding:22px;border-top:1px solid #dcb47b2c;min-height:390px}
.sl-screen{animation:slOpen .4s ease both}
.sl-screen h3{font-size:clamp(1.5rem,3.7vw,2.25rem);margin-bottom:9px}
.sl-screen .hint{color:#d8c9e7;line-height:1.7;max-width:760px;margin-bottom:23px}
.sl-options{display:grid;grid-template-columns:1fr;gap:13px}
.sl-option{position:relative;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid #b38b6596;border-radius:18px;padding:16px;color:var(--sl-text);background:linear-gradient(140deg,rgba(64,28,79,.82),rgba(22,11,38,.91));min-height:107px;transition:transform .18s ease,border-color .18s,box-shadow .2s}
.sl-option:hover,.sl-option.selected{border-color:#f7d59e;background:linear-gradient(125deg,rgba(99,47,116,.9),rgba(29,11,49,.95));box-shadow:inset 0 0 32px #ac69ce14,0 0 19px #b26fbd2f}
.sl-option.selected:after{content:'✓';position:absolute;top:8px;right:11px;color:#ffe1a2;font-weight:bold}
.sl-option .emoji{font-size:2rem;flex:0 0 42px;text-align:center;filter:drop-shadow(0 0 10px #e3b7eb88)}
.sl-option strong{font-family:'Cinzel',Georgia,serif;color:var(--sl-gold);font-size:1.07em;display:block;line-height:1.35;margin-bottom:4px}
.sl-option .desc{color:#ded0e7;line-height:1.5;display:block}
.sl-hint-note{border-left:3px solid #e9b96d;color:#e5cee9;background:#4c2c6244;padding:13px 17px;border-radius:3px 12px 12px 3px;margin-top:20px}
.sl-foot{padding:20px 22px;display:flex;align-items:center;flex-wrap:wrap;gap:11px;justify-content:space-between;border-top:1px solid #dcb47b2c;background:#100921b0}
.sl-foot .sl-step-note{color:#d2b8e4;font-style:italic}
.sl-foot-buttons{display:flex;gap:10px;flex-wrap:wrap}
.sl-foot .btn{min-height:47px}
.sl-field{display:grid;gap:7px;max-width:640px;margin:19px 0}
.sl-field label{font-weight:700;color:var(--sl-gold)}
.sl-field input,.sl-field textarea{width:100%;border-radius:13px;border:1px solid #cda07190;background:#170b2c;color:#fff;min-height:52px;padding:13px 16px;resize:vertical}
.sl-field textarea{min-height:95px}
.sl-field input::placeholder,.sl-field textarea::placeholder{color:#cdbbd1}
.sl-mini-label{font-weight:700;color:var(--sl-gold);margin:20px 0 10px}
.sl-select-row{display:flex;gap:10px;flex-wrap:wrap}
.sl-choice-pill{padding:10px 15px;border:1px solid #bd8c5d9c;background:#27133e;border-radius:100px;color:#f0d7ea;transition:.15s}
.sl-choice-pill:hover,.sl-choice-pill.selected{color:#1c0c29;background:#f3d092;border-color:#ffe5b2}
.sl-ingredients{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sl-ingredient{display:grid;place-items:center;text-align:center;gap:4px;border:1px solid #9d7569a6;border-radius:15px;padding:13px 7px;min-height:110px;background:radial-gradient(circle at center,#60307545,#160d2b);color:#fff;position:relative}
.sl-ingredient .emoji{font-size:2rem}.sl-ingredient strong{font-family:Georgia,serif;color:#f6daa3}
.sl-ingredient.selected{background:radial-gradient(circle at center,#9b59a478,#271032);border-color:#ffd89a;box-shadow:0 0 18px #a26bc547}
.sl-ingredient.selected:after{content:'✓';position:absolute;right:9px;top:5px;color:#f7d8a0}
.sl-altar{padding:17px;border:1px solid #b4896b77;border-radius:20px;min-height:130px;background:radial-gradient(ellipse at 50% 95%,#76389455,transparent 65%),#130920;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:18px;position:relative;overflow:hidden}
.sl-altar:before{content:'✦';font-size:2.4rem;position:absolute;color:#eebc92;top:-19px;left:calc(50% - 16px);filter:drop-shadow(0 0 11px #eab8ef)}
.sl-altar-item{font-size:2.2rem;animation:slBob 4s ease-in-out infinite alternate;filter:drop-shadow(0 0 14px #b47edf)}
.sl-sigil-area{max-width:540px;margin:0 auto;position:relative;border-radius:50%;aspect-ratio:1;background:radial-gradient(circle at center,#542f7369 0 24%,#1b0c32 60%,#0e071e 100%);box-shadow:0 0 60px #b56ed944,inset 0 0 50px #a15bd022;border:1px solid #ba9a6e88;overflow:hidden}
.sl-sigil-area:before{content:'';position:absolute;inset:7%;border:1px solid #c5985877;border-radius:50%;box-shadow:0 0 0 11px #c99e5211,0 0 0 25px #dca66d08;pointer-events:none}
.sl-sigil-area:after{content:'✦';position:absolute;top:5%;left:50%;transform:translateX(-50%);color:#ffc985;filter:drop-shadow(0 0 8px #debdf3);pointer-events:none}
.sl-sigil-area canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sl-sigil-status{color:#f0d3ef;text-align:center;margin:13px 0}
.sl-orb-chamber{height:280px;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate}
.sl-orb-chamber:before{content:'';width:225px;height:225px;border-radius:50%;border:1px solid #ffe2a460;position:absolute;box-shadow:0 0 0 12px #f7bf5510,0 0 0 32px #ad63d213;animation:slRotate 17s linear infinite}
.sl-orb-chamber:after{content:'✦　☾　✦　☽　✦';position:absolute;bottom:4px;color:#fbd8a3;letter-spacing:10px;animation:slGlow 4s ease-in-out infinite}
.sl-orb{width:168px;height:168px;border-radius:50%;display:grid;place-items:center;font-size:4rem;background:radial-gradient(circle at 33% 25%,#fff5e2 0 4%,#dfc9f0 6%,#8753b5 30%,#331065 65%,#17042b 100%);box-shadow:inset -10px -15px 30px #08071bcc,0 0 25px #ecb5ff88,0 0 80px #9b51ce6e;animation:slBob 3.5s ease-in-out infinite alternate;position:relative}
.sl-orb.casting{box-shadow:0 0 55px #f9d4a3,0 0 110px #c75afe,0 0 175px #9a47e9;animation:slGlow .5s ease-in-out infinite}
.sl-hold{display:grid;place-items:center;min-width:220px;min-height:68px;margin:15px auto 12px;border:2px solid #ffdb9d;border-radius:100px;background:linear-gradient(145deg,#b36a52,#f5d093);color:#210d2c;font-weight:800;position:relative;overflow:hidden;touch-action:none;user-select:none;box-shadow:0 0 30px #c8826e7a}
.sl-hold:before{content:'';position:absolute;inset:0 auto 0 0;width:var(--hold,0%);background:#fff6d98e;pointer-events:none;transition:width .05s linear}
.sl-hold span{z-index:1}
.sl-subtle{color:#cdbde0;text-align:center}
.sl-reward{text-align:center;max-width:750px;margin:0 auto;position:relative}
.sl-reward .sl-reward-icon{font-size:4.5rem;filter:drop-shadow(0 0 23px #d69bf3);animation:slBob 3.5s ease-in-out infinite alternate}
.sl-reward h3{font-size:clamp(1.7rem,4vw,2.75rem);margin:9px 0 10px}
.sl-scroll{background:linear-gradient(140deg,#48245b98,#1e0f35ee);border:1px solid #d8a86b;border-radius:20px;padding:25px 21px;margin:20px 0;box-shadow:0 0 26px #b474c331}
.sl-scroll .sl-incantation{font-family:Georgia,serif;font-style:italic;font-size:1.17em;color:#fff0da;line-height:1.9}
.sl-scroll h4{margin:18px 0 7px}
.sl-result-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin:16px 0}
.sl-result-metrics span{background:#402158;padding:9px 16px;border-radius:100px;color:#f9dca7;border:1px solid #dbba7b7a}
.sl-choices-summary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.sl-choices-summary span{padding:7px 10px;border-radius:100px;border:1px solid #ae84b188;color:#dfc9ea}
.sl-confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.sl-spark{position:absolute;font-size:19px;animation:slSpark 1.5s ease-out forwards;will-change:transform,opacity;text-shadow:0 0 13px #ffdaa0}
.sl-guide{padding:20px;border:1px solid #d8ab728c;border-radius:24px;background:linear-gradient(155deg,rgba(58,25,70,.91),rgba(16,8,33,.96));box-shadow:0 18px 55px #0005;position:relative;overflow:hidden}
.sl-guide:before{content:'☾ ✦ ☽';position:absolute;right:15px;top:9px;color:#bd91b5;letter-spacing:9px}
.sl-guide-person{display:grid;grid-template-columns:80px 1fr;gap:13px;align-items:center;margin-bottom:17px}
.sl-guide-person img{width:80px;height:96px;border-radius:45% 45% 14px 14px;object-fit:cover;object-position:center 22%;border:1px solid #dfad70;box-shadow:0 0 22px #ad61e088}
.sl-guide-person h3{font-size:1.16rem;margin:0 0 5px}.sl-guide-person p{margin:0;color:#e2cee7}
.sl-guide-text{color:#ead8ef;line-height:1.75}
.sl-guide-actions{display:grid;gap:9px;margin-top:18px}
.sl-guide-actions button{min-height:46px}
.sl-help{border:1px solid #b98d6c;border-radius:16px;padding:15px;background:#31194188}
.sl-help h4{font-size:1.14rem;margin-bottom:7px}
.sl-help ol{padding-left:22px;margin:8px 0 0;color:#ead7f0;line-height:1.8}
.sl-help li{margin:8px 0}
.sl-guide-dialog{width:min(680px,calc(100% - 28px));max-height:88dvh;border:1px solid #f3c990;border-radius:25px;padding:22px;color:#f8ebfa;background:radial-gradient(circle at 75% 0%,#623574,#1c0e31 62%,#10071f);box-shadow:0 0 100px #000b;overflow-y:auto}
.sl-guide-dialog::backdrop{background:#04020be0;backdrop-filter:blur(9px)}
.sl-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}
.sl-dialog-head img{width:92px;height:110px;object-fit:cover;object-position:center 16%;border-radius:48% 48% 14px 14px;border:1px solid #f0be7c}
.sl-dialog-head h2{font-size:1.7rem;margin-bottom:8px}.sl-dialog-head p{color:#d9c8e5}
.sl-dialog-close{background:#31163f;border:1px solid #d6b179;border-radius:50%;width:43px;height:43px;flex-shrink:0;color:#f1d8a7}
.sl-guide-dialog ol{padding:0 0 0 22px;line-height:1.8}.sl-guide-dialog li{margin:10px 0}
.sl-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:19px}
.sl-save-status{text-align:center;min-height:24px;color:#e7cee7}
.sl-screen .btn:disabled{opacity:.45}
@keyframes slStars{to{opacity:.9;transform:translateY(-14px)}}
@keyframes slOpen{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slBob{to{transform:translateY(-9px)}}
@keyframes slRotate{to{transform:rotate(360deg)}}
@keyframes slGlow{50%{opacity:.65;filter:brightness(1.5)}}
@keyframes slSpark{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(var(--dx,30px),var(--dy,-130px)) scale(1.4);opacity:0}}
@media(min-width:560px){.sl-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-ingredients{grid-template-columns:repeat(3,minmax(0,1fr))}.sl-chamber-head,.sl-body,.sl-foot{padding-left:27px;padding-right:27px}}
@media(min-width:768px){.sl-hero{grid-template-columns:1.3fr .7fr;min-height:390px}.sl-hero-image{display:block}.sl-layout{grid-template-columns:minmax(0,1fr) 260px;gap:20px}.sl-guide{position:sticky;top:105px}.sl-progress{gap:10px;padding-left:25px;padding-right:25px}.sl-body{min-height:420px}.sl-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-ingredients{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){body[data-page="spell"] .sl{font-size:16px}.sl-hero{grid-template-columns:1.3fr .7fr;min-height:425px}.sl-hero-image{height:380px}.sl-layout{grid-template-columns:minmax(0,1fr) 310px;gap:28px}.sl-chamber-head,.sl-body,.sl-foot{padding-left:35px;padding-right:35px}.sl-progress-step,.sl-progress-step .name{font-size:16px}.sl-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.sl-hero{padding-top:35px;padding-bottom:15px}.sl-progress-step .name{font-size:15px;line-height:1.2}.sl-chamber-head{padding-top:24px}.sl-body{padding:18px}.sl-guide{order:-1}.sl-layout{gap:18px}.sl-option{min-height:112px}.sl-foot-buttons{width:100%}.sl-foot-buttons>.btn{flex:1}.sl-foot{padding:17px}.sl-badges{gap:7px}}
@media(prefers-reduced-motion:reduce){.sl *,.sl *:before,.sl *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.sl-confetti{display:none}}

/* New lunar resonance mini-game: pointer, keyboard and touch accessible. */
.sl-align-game{width:min(100%,590px);margin:8px auto 15px;padding:20px 22px;border-radius:18px;background:linear-gradient(140deg,#48215e88,#170b29c9);border:1px solid rgba(236,191,129,.42);box-shadow:inset 0 0 30px rgba(176,95,231,.12)}
.sl-align-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:#ffe0a7;font-size:clamp(15px,1.4vw,18px)}
.sl-align-head span{font-variant-numeric:tabular-nums;color:#e8cdf8}
.sl-align-track{position:relative;padding:24px 4px 10px;margin-top:11px}
.sl-align-marker{position:absolute;top:-4px;transform:translateX(-50%);font-size:28px;filter:drop-shadow(0 0 8px #ffd18b);pointer-events:none}
.sl-align-track input[type=range]{display:block;width:100%;height:28px;accent-color:#f2c57b;cursor:pointer;touch-action:pan-y}
.sl-align-hint{font-size:clamp(15px,1.4vw,16px);min-height:28px;color:#f3dcab;margin:10px 0}
.sl-skip{font-size:clamp(15px,1.2vw,16px);color:#e8d6ee;border:1px solid #b6a0ca;border-radius:20px;padding:9px 16px;background:transparent;cursor:pointer}
.sl-skip:hover,.sl-skip:focus-visible{border-color:#fad596;color:#fff}
.sl-hold:disabled{opacity:.48;filter:saturate(.55);cursor:not-allowed;box-shadow:none}
.sl-orb.aligned{box-shadow:0 0 48px #f7cf96,0 0 95px #c57cfe9e,inset 0 -20px 25px #271037a0;transition:box-shadow .25s ease,filter .25s ease}
@media(max-width:767px){.sl-align-game{padding:17px 15px}.sl-align-head{justify-content:center}}
@media(prefers-reduced-motion:reduce){.sl-orb.aligned{transition:none}}

/* Enlarged vector seal and spell orb: crisp symbols at every responsive breakpoint. */
body[data-page="spell"] .sl-sigil-area{width:min(100%,660px);max-width:660px;box-shadow:0 0 85px #b56ed95c,inset 0 0 65px #a15bd033}
body[data-page="spell"] .sl-sigil-area::before{border-width:2px;box-shadow:0 0 0 11px #c99e5219,0 0 0 25px #dca66d10}
body[data-page="spell"] .sl-sigil-area::after{font-size:clamp(26px,3vw,43px);top:3%}
body[data-page="spell"] .sl-orb-chamber{height:355px;overflow:visible}
body[data-page="spell"] .sl-orb-chamber::before{width:275px;height:275px}
body[data-page="spell"] .sl-orb{width:245px;height:245px;font-size:clamp(105px,11vw,145px);line-height:1;transform-origin:center; text-shadow:0 0 24px #ffe6b6,0 0 39px #dfb3fa}
body[data-page="spell"] .sl-reward .sl-reward-icon{font-size:clamp(6rem,12vw,9rem);line-height:1.25}
@media(max-width:767px){
 body[data-page="spell"] .sl-sigil-area{width:100%;max-width:100%}
 body[data-page="spell"] .sl-orb-chamber{height:305px}
 body[data-page="spell"] .sl-orb-chamber::before{width:215px;height:215px}
 body[data-page="spell"] .sl-orb{width:195px;height:195px;font-size:105px}
}
@media(min-width:768px) and (max-width:1199px){body[data-page="spell"] .sl-orb{width:215px;height:215px;font-size:122px}}

/* Spellbook 3.0 — an interactive alchemy workbench, not a static form. */
body[data-page="spell"] .sl-workshop .sl-live-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.87fr);align-items:center;gap:22px;border:1px solid #c39778aa;border-radius:24px;padding:18px;background:radial-gradient(ellipse at 28% 40%,#5931758f 0%,#201130de 65%,#130c24f1 100%);margin:18px 0 26px;position:relative;overflow:hidden}
body[data-page="spell"] .sl-cauldron-scene{--brew-color:#a3a8ff;min-height:265px;display:grid;place-items:center;position:relative;isolation:isolate;touch-action:pan-y;transition:filter .32s ease}
body[data-page="spell"] .sl-cauldron-scene:before{content:"";width:205px;height:205px;position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--brew-color) 0,transparent 69%);opacity:.24;filter:blur(12px);transition:opacity .35s,background .3s}
body[data-page="spell"] .sl-cauldron-scene.sl-alter-awake:before{opacity:.67}
body[data-page="spell"] .sl-orbit-ring{width:230px;height:230px;border:1px dashed #ddb8e68c;border-radius:50%;position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #a875bd11,0 0 32px #b77aee25;animation:slBrewRing 36s linear infinite}
body[data-page="spell"] .sl-energy-spark{position:absolute;top:3%;left:50%;transform:translateX(-50%);font-size:33px;color:#ffdfa4;filter:drop-shadow(0 0 12px #ffdda0);z-index:1;animation:slGlow 2.5s ease-in-out infinite}
body[data-page="spell"] .sl-cauldron-bowl{width:184px;height:125px;position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);border-radius:18% 18% 46% 46%;border:3px solid #eebc83;background:linear-gradient(90deg,#271038,#70366b 28%,#2a153d 66%,#170b29 100%);box-shadow:inset 0 -29px 27px #0b071bd9,inset 0 11px 21px #a96bc378,0 16px 33px #070313cc,0 0 35px #b263d688;z-index:2}
body[data-page="spell"] .sl-cauldron-bowl:before{content:"";position:absolute;left:-3%;right:-3%;height:31px;top:-14px;border:3px solid #eac88e;border-radius:50%;background:radial-gradient(ellipse,var(--brew-color) 10%,#b380de 36%,#201031 80%);box-shadow:0 0 30px var(--brew-color);transition:background .4s}
body[data-page="spell"] .sl-cauldron-symbol{position:absolute;z-index:2;inset:20px 0 auto;text-align:center;font:64px Georgia,serif;color:#f0c68f;text-shadow:0 0 25px #f1c387;pointer-events:none}
body[data-page="spell"] .sl-brew-bubble{position:absolute;left:20%;top:0;width:11px;height:11px;border-radius:50%;background:var(--brew-color);box-shadow:0 0 14px var(--brew-color);animation:slBrewBubble 3.1s ease-in-out infinite}
body[data-page="spell"] .sl-brew-bubble.b2{left:52%;width:17px;height:17px;animation-delay:.6s}
body[data-page="spell"] .sl-brew-bubble.b3{left:79%;animation-delay:1.6s}
body[data-page="spell"] .sl-altar-slots{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:center;gap:9px}
body[data-page="spell"] .sl-altar-slot{min-width:74px;max-width:92px;min-height:68px;border:1px dashed #c9a5be;border-radius:14px;background:#291539de;color:#ecdaed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 7px;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}
body[data-page="spell"] .sl-altar-slot.filled{background:linear-gradient(140deg,#613878ed,#211237);border-style:solid;border-color:#f9d69b;box-shadow:0 0 18px #f1bc7950}
body[data-page="spell"] .sl-altar-slot.filled:hover{transform:translateY(-4px);box-shadow:0 0 25px #e8a66488}
body[data-page="spell"] .sl-altar-slot:disabled{opacity:.75;cursor:default}
body[data-page="spell"] .sl-altar-slot>span{font-size:28px;line-height:1}
body[data-page="spell"] .sl-altar-slot small{font-size:12px;color:#f3deec;line-height:1.1}
body[data-page="spell"] .sl-ingredient-burst{position:absolute;z-index:9;top:44%;left:50%;font-size:39px;text-shadow:0 0 22px #e6a4ff;pointer-events:none;animation:slIngredientBurst .95s ease-out forwards}
body[data-page="spell"] .sl-cauldron-scene.dragging{outline:2px dashed #ffdb9f;outline-offset:-3px;border-radius:20px;filter:brightness(1.2)}
body[data-page="spell"] .sl-cauldron-scene.rune-solved .sl-orbit-ring{border-color:#f7d7a2;box-shadow:0 0 45px #ffdca079,0 0 0 8px #a875bd11}
body[data-page="spell"] .sl-live-facts{position:relative;z-index:2;text-align:left;padding:12px 5px}
body[data-page="spell"] .sl-live-facts h4{font-family:Georgia,serif;font-size:clamp(24px,2.6vw,34px);color:#ffdda5;margin:8px 0 13px;text-shadow:0 0 16px #bf82e8}
body[data-page="spell"] .sl-live-facts p{font-size:16px;line-height:1.55;color:#ebdcef}
body[data-page="spell"] .sl-energy-meter{height:11px;border:1px solid #c5a4cc88;border-radius:20px;background:#11091f;margin:17px 0 9px;overflow:hidden}
body[data-page="spell"] .sl-energy-meter span{display:block;height:100%;max-width:100%;border-radius:inherit;background:linear-gradient(90deg,#9e63f6,#e2a6fa,#ffdea9);box-shadow:0 0 15px #deb1ff;transition:width .3s ease}
body[data-page="spell"] .sl-live-facts .sl-live-counter{font-weight:700;color:#ffe0a8}
body[data-page="spell"] .sl-tagline{color:#e7c9ee;display:block;font-size:15px;line-height:1.4;margin-top:8px}
body[data-page="spell"] .sl-craft-grid .sl-ingredient{cursor:grab;transition:transform .2s ease,background .2s,border-color .2s,box-shadow .2s}
body[data-page="spell"] .sl-craft-grid .sl-ingredient:hover{transform:translateY(-4px)}
body[data-page="spell"] .sl-craft-grid .sl-ingredient.selected{border-color:#ffe3a6;box-shadow:0 0 23px #c883d757,inset 0 0 20px #f1b85a15}
body[data-page="spell"] .sl-rune-quest{margin:30px 0 15px;padding:21px;border:1px solid #b58b7199;border-radius:20px;background:radial-gradient(ellipse at 80% 15%,#763da34d,transparent 65%),linear-gradient(135deg,#311840,#150e28);position:relative}
body[data-page="spell"] .sl-rune-header{display:flex;align-items:center;gap:15px}
body[data-page="spell"] .sl-rune-header>span{width:57px;height:57px;flex:0 0 57px;display:grid;place-items:center;border:1px solid #d9b88c;border-radius:50%;font-size:29px;color:#ffda99;box-shadow:0 0 22px #ae77d750}
body[data-page="spell"] .sl-rune-header h4{font-family:Georgia,serif;font-size:25px;margin:7px 0;color:#ffdfa9}
body[data-page="spell"] .sl-rune-prompt{font-size:16px;line-height:1.65;margin:15px 0 16px}
body[data-page="spell"] .sl-rune-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body[data-page="spell"] .sl-rune-choice{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:17px;border:1px solid #af82bc;padding:13px 8px;background:#261333;color:#f8e5f7;min-height:133px;transition:transform .2s,box-shadow .2s,border-color .2s}
body[data-page="spell"] .sl-rune-choice>span{font-size:39px;color:#ffd6a4;filter:drop-shadow(0 0 8px #d1abf9)}
body[data-page="spell"] .sl-rune-choice strong{font-size:17px;color:#f9dfb9}
body[data-page="spell"] .sl-rune-choice small{font-size:13px;color:#d8c4e8;line-height:1.3}
body[data-page="spell"] .sl-rune-choice:hover:not(:disabled),body[data-page="spell"] .sl-rune-choice:focus-visible{transform:translateY(-3px);border-color:#f7d59f;box-shadow:0 0 24px #e4b06c44}
body[data-page="spell"] .sl-rune-choice.correct{border-color:#ffdfa3;background:linear-gradient(160deg,#754b74,#2c1743);box-shadow:0 0 30px #c68ce28c}
body[data-page="spell"] .sl-rune-feedback{min-height:25px;color:#f6dea9;font-size:15px;margin-top:13px;line-height:1.5}
body[data-page="spell"] .sl-reward-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0 16px}
body[data-page="spell"] .sl-reward-tools>.btn{min-height:50px}
@keyframes slBrewRing{from{rotate:0deg}to{rotate:360deg}}
@keyframes slBrewBubble{0%{opacity:.2;transform:translateY(15px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.7)}}
@keyframes slIngredientBurst{0%{opacity:1;transform:translate(-50%,0) scale(.5)}55%{opacity:1}100%{opacity:0;transform:translate(-50%,-95px) scale(1.6)}}
@media(max-width:767px){
 body[data-page="spell"] .sl-workshop .sl-live-workbench{grid-template-columns:1fr;padding:15px;gap:4px}
 body[data-page="spell"] .sl-cauldron-scene{min-height:260px}
 body[data-page="spell"] .sl-live-facts{padding:10px 5px 16px;text-align:center}
 body[data-page="spell"] .sl-rune-quest{padding:16px}
 body[data-page="spell"] .sl-rune-choice{padding:11px 5px;min-height:121px}
 body[data-page="spell"] .sl-rune-choice strong{font-size:15px}
 body[data-page="spell"] .sl-rune-choice small{font-size:12px}
 body[data-page="spell"] .sl-reward-tools>.btn{width:100%}
}
@media(min-width:768px) and (max-width:1199px){body[data-page="spell"] .sl-workshop .sl-live-workbench{grid-template-columns:1fr;padding:15px}body[data-page="spell"] .sl-cauldron-scene{min-height:270px}}
@media(prefers-reduced-motion:reduce){body[data-page="spell"] .sl-orbit-ring,body[data-page="spell"] .sl-energy-spark,body[data-page="spell"] .sl-brew-bubble,body[data-page="spell"] .sl-ingredient-burst{animation:none!important}}
/* Readability: no tiny text in the new workshop on laptop, tablet or mobile. */
body[data-page="spell"] .sl-altar-slot small,
body[data-page="spell"] .sl-rune-choice small,
body[data-page="spell"] .sl-tagline,
body[data-page="spell"] .sl-rune-feedback{font-size:16px;line-height:1.35}
body[data-page="spell"] .sl-altar-slot{min-width:84px;max-width:98px}
@media(max-width:1199px){body[data-page="spell"] .sl-altar-slot small,body[data-page="spell"] .sl-rune-choice small,body[data-page="spell"] .sl-tagline,body[data-page="spell"] .sl-rune-feedback{font-size:15px}}
@media(max-width:390px){body[data-page="spell"] .sl-altar-slots{gap:5px}body[data-page="spell"] .sl-altar-slot{min-width:0;width:31%;padding:5px 4px}body[data-page="spell"] .sl-altar-slot small{overflow-wrap:anywhere}}