:root{--hdr1:#5a3519;--hdr2:#3d2210;--rod1:#8a5a2b;--rod2:#3b200c;--title:#4a2c17;--glow:#ffd27a;
  --ink:#3b2412; --ink-soft:#6b4a2b; --parch:#f3e3bf; --parch-2:#ead2a0; --parch-edge:#c9a46a;
  --wood:#4a2c17; --gold:#c8962e; --accent:#7a3fc0; --accent-2:#b98cf0; --accent-ink:#fff;
  --ok:#3f8a3a; --shadow:0 6px 18px rgba(40,20,5,.35);
  --font-title:"Cinzel Decorative","Cinzel",Georgia,serif; --font-body:"Crimson Text",Georgia,serif;
}
body[data-school=fire]{--accent:#d2531c;--accent-2:#f59a52;--hdr1:#7a1f0c;--hdr2:#3a0d05;--rod1:#c2410c;--rod2:#5a1a06;--title:#8a2a0c;--glow:#ff7a1a;--parch:#f6dfc0;--parch-2:#efc9a0}
body[data-school=ice]{--accent:#2f86c4;--accent-2:#8fc9ef;--hdr1:#1d4f7a;--hdr2:#0c2740;--rod1:#7fb9e0;--rod2:#2a5d85;--title:#1d4f7a;--glow:#bfe6ff;--parch:#eaf1f2;--parch-2:#d3e3ea}
body[data-school=storm]{--accent:#7a3fc0;--accent-2:#b98cf0;--hdr1:#43216e;--hdr2:#1d0c36;--rod1:#8a5ad0;--rod2:#3a1a66;--title:#4a2380;--glow:#d9b8ff;--parch:#efe4f1;--parch-2:#ddcde6}
body[data-school=myth]{--accent:#c99a12;--accent-2:#f0d36a;--accent-ink:#3b2412;--hdr1:#6b5208;--hdr2:#2e2303;--rod1:#d9b030;--rod2:#6b5208;--title:#7a5a06;--glow:#ffe27a;--parch:#f6ecc6;--parch-2:#ecdba0}
body[data-school=life]{--accent:#3a9246;--accent-2:#8fd27f;--hdr1:#1f5a28;--hdr2:#0b2a10;--rod1:#6aa84f;--rod2:#2c5a1e;--title:#22602c;--glow:#b8f5a0;--parch:#eef1d6;--parch-2:#dbe3b5}
body[data-school=death]{--accent:#3d3d46;--accent-2:#9a9aa8;--hdr1:#2a2a32;--hdr2:#0c0c10;--rod1:#5a5a66;--rod2:#1c1c22;--title:#2a2a32;--glow:#c8c8e0;--parch:#e8e4dc;--parch-2:#d4cec2}
body[data-school=balance]{--accent:#b06d2a;--accent-2:#e2b47a;--hdr1:#6a3e14;--hdr2:#2e1806;--rod1:#c08a4a;--rod2:#5a3510;--title:#6a3e14;--glow:#ffd9a0;--parch:#f3e3bf;--parch-2:#ead2a0}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);font-size:18px;color:var(--ink);line-height:1.45;min-height:100vh;
  background:#0d0906 radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 55%),
  radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 50%);
  background-attachment:fixed}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--font-title);font-weight:700;color:var(--title);transition:color .6s;margin:.2em 0 .4em;line-height:1.15}
h1{font-size:2rem} h2{font-size:1.45rem} h3{font-size:1.15rem}
.doodles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.doodles span{position:absolute;bottom:-60px;font-size:28px;opacity:0;animation:rise linear infinite;filter:drop-shadow(0 0 6px var(--glow))}
@keyframes rise{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.55}90%{opacity:.4}100%{transform:translate(var(--dx),-110vh) rotate(var(--rot));opacity:0}}
@keyframes fall{0%{transform:translate(0,-10vh) rotate(0);opacity:0}10%{opacity:.6}100%{transform:translate(var(--dx),110vh) rotate(var(--rot));opacity:0}}
body[data-school=ice] .doodles span,body[data-school=life] .doodles span,body[data-school=balance] .doodles span{animation-name:fall;top:-60px;bottom:auto}
body[data-school=storm] .flash{position:fixed;inset:0;pointer-events:none;z-index:0;animation:flash 9s infinite;background:radial-gradient(circle at 70% 10%,rgba(200,170,255,.35),transparent 60%)}
@keyframes flash{0%,92%,96%,100%{opacity:0}93%,95%{opacity:1}}
@media (prefers-reduced-motion:reduce){.doodles span{animation:none;opacity:.15;bottom:auto}.flash{display:none}}
.scroll{transition:background-color .6s;background-color:color-mix(in srgb,var(--parch) 84%,var(--accent)) !important}
.scroll>*{position:relative;z-index:1}
.scroll>.scrollfx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:6px}
.scrollfx span{position:absolute;opacity:.2;animation:drift ease-in-out infinite alternate;filter:saturate(.8)}
@keyframes drift{0%{transform:translate(0,0) rotate(-12deg)}100%{transform:translate(var(--dx),var(--dy)) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.scrollfx span{animation:none}}
.card,.wcard{border-color:color-mix(in srgb,var(--accent) 45%,var(--parch-edge))}
h1::before{content:var(--sym,"");margin-right:.35em}
.area h3::before{content:var(--sym,"");margin-right:.3em;font-size:.9em}
.brand::after{content:var(--sym,"");margin-left:.3em}
body[data-school=fire]{--sym:"🔥"}body[data-school=ice]{--sym:"❄️"}body[data-school=storm]{--sym:"⚡"}body[data-school=myth]{--sym:"🔮"}body[data-school=life]{--sym:"🍀"}body[data-school=death]{--sym:"💀"}body[data-school=balance]{--sym:"⚖️"}
.schoolpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.schoolpick label{cursor:pointer}
.schoolpick div{border-radius:12px;padding:12px 8px;text-align:center;color:#fff;font-weight:700;border:3px solid transparent;text-shadow:0 1px 2px #000;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.schoolpick input{display:none}
.schoolpick span{display:block;font-size:34px}
.schoolpick input:checked+div{outline:4px solid var(--gold);outline-offset:3px;border-radius:10px}
.wart{background-size:cover !important;background-position:center !important}
.wart.img{font-size:0}
/* header */
header.top{position:sticky;top:0;z-index:20;background:linear-gradient(var(--hdr1),var(--hdr2));border-bottom:3px solid var(--accent-2);transition:background .6s;box-shadow:var(--shadow)}
.bar{max-width:1200px;margin:auto;display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap}
.brand{font-family:var(--font-title);color:#f8e2a6;text-decoration:none;font-size:1.25rem;white-space:nowrap;text-shadow:0 2px 0 #000}
.brand b{color:var(--accent-2)}
.search{flex:1;min-width:180px;position:relative}
.search input{width:100%;padding:8px 12px;border-radius:20px;border:2px solid var(--gold);background:var(--parch);font:inherit;color:var(--ink)}
.wizpick{display:flex;align-items:center;gap:6px;color:#f8e2a6}
.wizpick select{font:inherit;background:var(--parch);border:2px solid var(--gold);border-radius:8px;padding:4px 6px;color:var(--ink)}
nav.tabs{max-width:1200px;margin:auto;display:flex;gap:4px;padding:0 12px 6px;overflow-x:auto;scrollbar-width:thin}
nav.tabs a{color:#f2d9a0;text-decoration:none;padding:4px 10px;border-radius:12px 12px 0 0;white-space:nowrap;font-size:.95rem}
nav.tabs a.on,nav.tabs a:hover{background:var(--parch);color:var(--wood)}
/* scroll */
main{position:relative;z-index:1;max-width:1200px;margin:20px auto 60px;padding:0 12px}
.scroll{position:relative;background:var(--parch);
  background-image:radial-gradient(ellipse at center,transparent 60%,rgba(120,80,30,.25)),
  repeating-linear-gradient(0deg,rgba(120,80,30,.03) 0 2px,transparent 2px 6px);
  border-radius:6px;padding:28px clamp(16px,4vw,40px);box-shadow:var(--shadow);border:1px solid var(--parch-edge)}
.scroll::before,.scroll::after{content:"";position:absolute;left:-10px;right:-10px;height:22px;border-radius:11px;
  background:linear-gradient(var(--rod1),var(--rod2));box-shadow:0 3px 6px rgba(0,0,0,.4),0 0 14px var(--glow)}
.scroll::before{top:-12px}.scroll::after{bottom:-12px}
.muted{color:var(--ink-soft)} .small{font-size:.85rem}
.pill{display:inline-block;padding:1px 9px;border-radius:10px;background:var(--parch-2);border:1px solid var(--parch-edge);font-size:.8rem;margin:0 4px 4px 0}
.pill.a{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn{font:inherit;cursor:pointer;border:2px solid var(--wood);background:var(--accent);color:var(--accent-ink);padding:6px 14px;border-radius:10px;box-shadow:0 2px 0 var(--wood)}
.btn.ghost{background:transparent;color:var(--wood)}
.btn:active{transform:translateY(1px)}
input[type=text],input[type=number],select,textarea{font:inherit;padding:6px 8px;border:2px solid var(--parch-edge);border-radius:8px;background:#fbf2dc;color:var(--ink)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#f8ecd0;border:2px solid var(--parch-edge);border-radius:10px;padding:12px;box-shadow:0 2px 0 var(--parch-edge)}
/* world cards */
.wcard{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;border:3px solid var(--wood);background:#f8ecd0;box-shadow:var(--shadow);transition:transform .15s}
.wcard:hover{transform:translateY(-3px) rotate(-.5deg)}
.wart{height:120px;position:relative;display:flex;align-items:center;justify-content:center;font-size:56px;text-shadow:0 4px 8px rgba(0,0,0,.4)}
.wart small{position:absolute;top:6px;right:8px;font-size:.75rem;background:rgba(0,0,0,.45);color:#fff;padding:1px 8px;border-radius:8px;font-family:var(--font-body)}
.wbody{padding:8px 12px 12px}
.wbody h3{margin:0}
.meter{height:10px;border-radius:5px;background:var(--parch-2);border:1px solid var(--parch-edge);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* quests */
.area{margin:18px 0 6px;border-bottom:2px dashed var(--parch-edge);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.quest{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:8px 6px;border-bottom:1px solid rgba(120,80,30,.15);align-items:start}
.quest.done .qn{text-decoration:line-through;color:var(--ink-soft)}
.quest input{width:22px;height:22px;accent-color:var(--accent);margin-top:2px}
.qn{font-weight:700}
.steps{font-size:.85rem;color:var(--ink-soft)}
.steps .cheat{color:#a0261a;font-weight:700;cursor:pointer;text-decoration:underline}
.rew{text-align:right;font-size:.85rem;white-space:nowrap}
.cheatbox{background:#fff6e2;border-left:4px solid #a0261a;padding:8px 12px;margin:6px 0;font-size:.92rem;border-radius:4px}
.cheatbox ul{margin:.3em 0;padding-left:1.2em}
/* gear */
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{border-bottom:1px solid rgba(120,80,30,.25);padding:5px 6px;text-align:left;vertical-align:top}
th{font-family:var(--font-title);font-size:.85rem;color:var(--wood)}
.stats{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.stat{background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:2px 10px;font-size:.85rem}
.schools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.schools button{font:inherit;border:2px solid var(--parch-edge);background:#f8ecd0;border-radius:18px;padding:3px 12px;cursor:pointer}
.schools button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--wood)}
details{margin:8px 0}
summary{cursor:pointer;font-weight:700}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.results a{display:block;padding:6px 4px;border-bottom:1px solid rgba(120,80,30,.15);text-decoration:none;color:var(--ink)}
.results a b{color:var(--accent)}
.hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sigil{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:46px;background:radial-gradient(var(--accent-2),var(--accent));border:4px solid var(--gold);box-shadow:var(--shadow)}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--wood);color:#f8e2a6;padding:8px 16px;border-radius:10px;z-index:50;box-shadow:var(--shadow)}
footer{position:relative;z-index:1;text-align:center;color:#d9bf8a;font-size:.8rem;padding:0 16px 30px}
footer a{color:#f2d9a0}
@media (max-width:600px){body{font-size:16px}.quest{grid-template-columns:26px 1fr}.rew{grid-column:2;text-align:left}}
.scroll .card,.scroll .wbody{background:color-mix(in srgb,#f8ecd0 78%,transparent)}
/* dark school scroll */
body[data-school=fire]{--deep:#2a0b05}
body[data-school=ice]{--deep:#06192a}
body[data-school=storm]{--deep:#1a0b2e}
body[data-school=myth]{--deep:#231b04}
body[data-school=life]{--deep:#08200e}
body[data-school=death]{--deep:#101014}
body[data-school=balance]{--deep:#23150a}
body{--deep:#1a0b2e}
body,body[data-school]{--parch:var(--deep);--parch-2:color-mix(in srgb,var(--deep) 75%,var(--accent));--parch-edge:color-mix(in srgb,var(--deep) 45%,var(--accent));
  --ink:#f3e6cc;--ink-soft:#c9b796;--title:var(--accent-2)}
.scroll{background-color:var(--deep) !important;color:var(--ink)}
.scroll .card,.scroll .wbody{background:color-mix(in srgb,color-mix(in srgb,var(--deep) 85%,#fff) 82%,transparent)}
.scroll a{color:var(--accent-2)}
.scroll input[type=text],.scroll input[type=number],.scroll select,.scroll textarea{background:color-mix(in srgb,var(--deep) 80%,#fff);color:var(--ink);border-color:var(--parch-edge)}
.cheatbox{background:color-mix(in srgb,var(--deep) 80%,#a0261a);color:var(--ink);border-left-color:#ff6a4a}
.steps .cheat{color:#ff8a6a}
.btn.ghost{color:var(--ink);border-color:var(--parch-edge)}
th{color:var(--accent-2)}
.schools button{background:color-mix(in srgb,var(--deep) 80%,#fff);color:var(--ink)}
.results a{color:var(--ink)}
.quest{border-bottom-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.scrollfx span{opacity:.16}
img.sig{width:1.2em;height:1.2em;vertical-align:-.25em;border-radius:50%}
.scrollfx img{display:block;width:100%;height:100%;border-radius:50%}
h1::before,.area h3::before,.brand::after{content:"";display:inline-block;width:1em;height:1em;background:var(--sigurl) center/contain no-repeat;vertical-align:-.12em}
h1::before,.area h3::before{margin-right:.35em}.brand::after{margin-left:.35em}
body[data-school=fire]{--sigurl:url(/data/img/sigfire.webp)}body[data-school=ice]{--sigurl:url(/data/img/sigice.webp)}body[data-school=storm]{--sigurl:url(/data/img/sigstorm.webp)}body[data-school=myth]{--sigurl:url(/data/img/sigmyth.webp)}body[data-school=life]{--sigurl:url(/data/img/siglife.webp)}body[data-school=death]{--sigurl:url(/data/img/sigdeath.webp)}body[data-school=balance]{--sigurl:url(/data/img/sigbalance.webp)}
.sigil{background:none;border:none;padding:0}.sigil img{width:100%;height:100%}
.schoolpick span img{width:56px;height:56px}
.doodles span img{width:1em;height:1em;display:block}
/* no wizard yet: plain dark scroll in neutral gold, no school colors or effects */
body:not([data-school]){--accent:#a8782c;--accent-2:#e2bd72;--accent-ink:#1b130b;--glow:#ffd27a;--deep:#17120c;--hdr1:#3a2614;--hdr2:#1c1209}
body:not([data-school]) h1::before,body:not([data-school]) .area h3::before,body:not([data-school]) .brand::after{display:none}
/* school switch: the new theme is revealed in a circle that follows the school ring */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:school-reveal .95s cubic-bezier(.5,0,.3,1) both}
@keyframes school-reveal{from{clip-path:circle(0 at var(--vx) var(--vy))}to{clip-path:circle(calc(var(--vr) + 40px) at var(--vx) var(--vy))}}
.schoolring{position:fixed;inset:0;pointer-events:none;z-index:100;view-transition-name:schoolring;overflow:hidden}
::view-transition-group(schoolring),::view-transition-new(schoolring){animation:none}
.schoolring .ring{position:absolute;width:0;height:0;transform:translate(-50%,-50%);border-radius:50%;
  border:6px solid var(--r1);box-shadow:0 0 18px 6px var(--r1),0 0 40px 14px var(--r2),inset 0 0 18px 4px var(--r2);
  animation:ring-out .95s cubic-bezier(.5,0,.3,1) forwards}
.schoolring .ring span{position:absolute;transform:translate(-50%,-50%);font-size:34px;filter:drop-shadow(0 0 8px var(--r1));animation:ring-fx .95s ease-in forwards}
@keyframes ring-out{0%{width:0;height:0;opacity:1}75%{opacity:1}100%{width:var(--d);height:var(--d);opacity:0}}
@keyframes ring-fx{0%{transform:translate(-50%,-50%) scale(.3) rotate(0)}40%{transform:translate(-50%,-50%) scale(1.2) rotate(90deg)}100%{transform:translate(-50%,-50%) scale(.8) rotate(200deg);opacity:.2}}
.schoolring[data-school=fire]{--r1:#ff7a1a;--r2:#c2200c}
.schoolring[data-school=fire] .ring{border-style:double;border-width:10px;animation-name:ring-out,flicker;animation-duration:.95s,.12s;animation-iteration-count:1,infinite}
@keyframes flicker{50%{box-shadow:0 0 26px 10px #ffb02e,0 0 60px 20px #c2200c,inset 0 0 24px 6px #ff5a00}}
.schoolring[data-school=ice]{--r1:#bfe6ff;--r2:#2f86c4}
.schoolring[data-school=ice] .ring{border-style:dashed}
.schoolring[data-school=storm]{--r1:#d9b8ff;--r2:#7a3fc0}
.schoolring[data-school=storm] .ring{border-style:dotted;border-width:8px}
.schoolring[data-school=myth]{--r1:#ffe27a;--r2:#c99a12}
.schoolring[data-school=life]{--r1:#b8f5a0;--r2:#3a9246}
.schoolring[data-school=death]{--r1:#c8c8e0;--r2:#18181f}
.schoolring[data-school=death] .ring{border-width:14px;border-color:#22222a}
.schoolring[data-school=balance]{--r1:#ffd9a0;--r2:#b06d2a}
.schoolring[data-school=balance] .ring{border-style:double;border-width:10px}
a.pill[data-jump]{text-decoration:none;color:var(--ink)}
/* Live Mode */
.wand{display:none;align-items:center;gap:6px;text-decoration:none;color:#fff8e6;font-family:var(--font-title);font-size:.95rem;padding:4px 12px 4px 6px;border-radius:20px;
  background:color-mix(in srgb,var(--accent) 55%,#0006);border:2px solid var(--glow);box-shadow:0 0 10px 2px var(--glow);animation:wandglow 2.4s ease-in-out infinite}
body.has-wiz .wand{display:inline-flex}
.wand .wi{font-size:1.4rem;filter:drop-shadow(0 0 6px var(--glow));animation:wandtilt 2.4s ease-in-out infinite}
@keyframes wandglow{50%{box-shadow:0 0 22px 6px var(--glow)}}
@keyframes wandtilt{50%{transform:rotate(-14deg) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.wand,.wand .wi{animation:none}}
.livehead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.nowcard{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:16px;align-items:center;margin-bottom:14px}
.nowcard>:first-child{border-radius:10px;overflow:hidden}
.livegrid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:14px}
.livegrid>.card,.scroll>section.card{margin-bottom:14px}
.qscroll{max-height:440px;overflow:auto;margin-top:8px;padding-right:4px;scroll-behavior:smooth}
.lq{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:7px 4px;border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,transparent);cursor:pointer}
.lq.done{opacity:.55}.lq.done b{text-decoration:line-through}
.tip{padding:6px 0;border-bottom:1px dashed color-mix(in srgb,var(--accent) 30%,transparent)}
.deckrow{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.spcard{margin:0;width:128px;text-align:center}
.spcard img,.spcard .ph{width:128px;height:198px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 3px 6px #0008)}
.spcard .ph{display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(160deg,var(--accent),var(--deep));border:3px solid var(--gold)}
.spcard figcaption{font-size:.85rem;line-height:1.2;margin-top:4px}
.gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:8px 0}
.gslot{display:grid;grid-template-columns:22px 34px 1fr;gap:6px;align-items:center;padding:8px;border-radius:10px;border:1px solid var(--parch-edge);cursor:pointer}
.gslot .gi{font-size:26px}.gslot.got{background:color-mix(in srgb,var(--ok) 25%,transparent)}
.tippop{position:fixed;right:16px;bottom:16px;max-width:320px;z-index:60;padding:12px 14px;border-radius:12px;background:var(--deep,#2b1a0e);color:#f3e6cc;border:2px solid var(--glow);box-shadow:0 0 18px var(--glow);animation:popin .4s ease-out}
.tippop a{color:var(--accent-2)}.tippop button{float:right;background:none;border:0;color:inherit;cursor:pointer;font-size:1rem}
@keyframes popin{from{transform:translateY(30px);opacity:0}}
@media (max-width:800px){.livegrid,.nowcard{grid-template-columns:1fr}}
.wikilink{font-size:.75rem;font-family:var(--font-body);font-weight:400;opacity:.75;white-space:nowrap}
.deckrow[hidden],#clib>[hidden]{display:none}
.items{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.item{display:flex;gap:10px;align-items:center}
.itempic{width:64px;max-height:64px;object-fit:contain;object-position:top;border-radius:6px;background:rgba(0,0,0,.25);cursor:zoom-in;flex:none;transition:width .2s}
.itempic.big{width:220px;max-height:none;cursor:zoom-out}
.petgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:16px}
.pet{display:flex;gap:12px;align-items:flex-start}
.pet.mine{outline:2px solid var(--accent,#c9a227)}
.pet h3{margin:0 0 2px}
.petpic{width:110px;border-radius:8px;flex:none}
.petcards{display:flex;gap:6px;margin:8px 0}
.petcards figure{margin:0;width:62px;text-align:center}
.petcards img{width:62px;border-radius:4px}
.petcards figcaption{line-height:1.2}

/* ---------- school weather + wizard (behind content, over the scroll) ---------- */
.wx,.wizbg{position:fixed;pointer-events:none}
.wx{inset:0;overflow:hidden}
.wx i,.wx u,.wx b{position:absolute;display:block;will-change:transform}
.wizbg{right:calc(max(12px,50vw - 600px) + 24px);bottom:0;height:min(78vh,700px);opacity:.42;filter:drop-shadow(0 0 24px var(--glow)) saturate(1.1);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 22%);mask-image:linear-gradient(to top,transparent 0,#000 22%);animation:wizin 1.2s ease-out,wizbob 7s ease-in-out 1.2s infinite}
@keyframes wizin{from{opacity:0;transform:translateY(40px)}}
@keyframes wizbob{50%{transform:translateY(-8px)}}
@media (max-width:900px){.wizbg{height:46vh;opacity:.25}}
/* ice: blizzard */
.wx-ice .wx-haze{inset:0;background:linear-gradient(to bottom,rgba(200,230,255,.12),transparent 40%,rgba(220,240,255,.18));animation:gust 6s ease-in-out infinite}
.wx-ice i{top:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px #cfeaff;animation:snow var(--t) linear var(--d) infinite}
@keyframes snow{to{transform:translate(var(--dx),105vh)}}
@keyframes gust{50%{opacity:.4}}
/* storm: rain, clouds and lightning */
.wx-storm .wx-cloud{inset:0 0 auto;height:45vh;background:radial-gradient(ellipse at 30% 0,rgba(60,30,100,.55),transparent 60%),radial-gradient(ellipse at 80% 0,rgba(40,20,80,.6),transparent 55%);animation:gust 8s ease-in-out infinite}
.wx-storm i{top:-100px;width:1.5px;height:var(--h);background:linear-gradient(transparent,rgba(210,190,255,.8));transform:rotate(14deg);animation:rain var(--t) linear var(--d) infinite}
@keyframes rain{to{transform:translate(-30vh,112vh) rotate(14deg)}}
.wx-storm .bolt{position:absolute;top:0;width:90px;height:60vh;opacity:0;animation:bolt 9s infinite;filter:drop-shadow(0 0 10px #d9b8ff) drop-shadow(0 0 30px #9a6aff)}
.wx-storm .bolt polyline{fill:none;stroke:#f4ecff;stroke-width:3;stroke-linejoin:round}
.wx-storm .bolt.b2{animation-delay:-4.3s;height:45vh}
@keyframes bolt{0%,91%,93.5%,95%,100%{opacity:0}91.5%,92.8%,94%{opacity:1}}
.wx-storm .flash{animation-delay:.1s}
/* fire: flames along the bottom, embers and smoke */
.wx-flames{position:absolute;left:0;right:0;bottom:0;height:45vh}
.wx-flames b{bottom:-6vh;width:16%;height:var(--h);border-radius:50% 50% 20% 20%;background:radial-gradient(ellipse at 50% 90%,rgba(255,224,138,.9) 0,rgba(255,138,26,.7) 25%,rgba(210,49,12,.4) 50%,transparent 70%);transform-origin:bottom;animation:flame var(--t) ease-in-out var(--d) infinite alternate;opacity:.5;will-change:transform}
@keyframes flame{0%{transform:scale(1,.7) skewX(-6deg)}50%{transform:scale(.85,1.15) skewX(5deg)}100%{transform:scale(1.1,.9) skewX(-3deg)}}
.wx-fire u{bottom:-200px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(closest-side,rgba(80,70,70,.35),rgba(60,50,50,.15) 60%,transparent);animation:smoke var(--t) linear var(--d) infinite;will-change:transform,opacity}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.8}100%{transform:translate(-80px,-120vh) scale(1.8);opacity:0}}
.wx-fire i{bottom:-10px;width:calc(var(--s) * 3);height:calc(var(--s) * 3);border-radius:50%;background:radial-gradient(#fff2b0,#ff8a1a 50%,transparent 70%);animation:ember var(--t) ease-in var(--d) infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),-100vh);opacity:0}}
/* life: drifting leaves under sunbeams */
.wx-life .wx-rays{inset:-20%;background:repeating-conic-gradient(from 200deg at 15% 0,rgba(220,255,170,.07) 0 4deg,transparent 4deg 11deg);animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{to{transform:rotate(4deg);opacity:.6}}
.wx-life i{top:-30px;width:var(--s);height:calc(var(--s) * .6);border-radius:0 100% 0 100%;background:linear-gradient(135deg,#9be27a,#2f7d32);opacity:.75;animation:leaf var(--t) ease-in-out var(--d) infinite}
@keyframes leaf{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(calc(var(--dx) * .5),26vh) rotate(calc(var(--r) * .25))}50%{transform:translate(calc(var(--dx) * -.3),52vh) rotate(calc(var(--r) * .5))}100%{transform:translate(var(--dx),108vh) rotate(var(--r))}}
/* death: rolling fog and wisps */
.wx-death .wx-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55))}
.wx-death u{left:-50vw;width:var(--s);height:calc(var(--s) * .35);border-radius:50%;background:radial-gradient(closest-side,rgba(170,170,190,.28),rgba(170,170,190,.1) 60%,transparent);animation:fog var(--t) linear var(--d) infinite}
@keyframes fog{to{transform:translateX(160vw)}}
.wx-death i{bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;background:#d8e0ff;box-shadow:0 0 14px 6px rgba(160,200,255,.45);animation:wisp var(--t) ease-in-out var(--d) infinite}
@keyframes wisp{0%{transform:translate(0,0);opacity:0}20%{opacity:.7}50%{transform:translate(var(--dx),-50vh)}100%{transform:translate(calc(var(--dx) * -1),-105vh);opacity:0}}
/* myth: arcane sparkles around a slow rune circle */
.wx-myth .wx-rune{left:50%;top:50%;width:110vmin;height:110vmin;margin:-55vmin;border-radius:50%;border:2px dashed rgba(255,226,122,.18);box-shadow:0 0 60px rgba(255,226,122,.12),inset 0 0 80px rgba(120,80,220,.15);animation:spin 80s linear infinite}
.wx-myth .wx-rune::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(180,140,255,.2);background:var(--sigurl) center/40% no-repeat;opacity:.18;animation:spin 50s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.wx-myth i{width:var(--s);height:var(--s);background:#ffe9a0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px #ffd24a);animation:twinkle var(--t) ease-in-out var(--d) infinite alternate}
@keyframes twinkle{0%{transform:translate(0,0) scale(.3);opacity:.1}100%{transform:translate(var(--dx),var(--dy)) scale(1.2);opacity:.9}}
/* balance: desert sandstorm */
.wx-balance .wx-dust{inset:0;background:linear-gradient(100deg,rgba(210,160,90,.14),rgba(180,120,60,.05) 40%,rgba(220,170,100,.16));animation:gust 5s ease-in-out infinite}
.wx-balance i{left:-120px;width:var(--w);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(240,200,140,.9));animation:sand var(--t) linear var(--d) infinite}
@keyframes sand{to{transform:translate(calc(100vw + 240px),var(--dy))}}
@media (prefers-reduced-motion:reduce){.wx i,.wx u,.wx b,.wx .bolt{display:none}.wizbg{animation:none}}
html{background:#0d0906}
.scrollfx img.wizbg{width:auto;height:min(78vh,700px);border-radius:0;display:block}
@media (max-width:900px){.scrollfx img.wizbg{height:46vh}}