/* Enchanted Academy: a portal hall, a spellbook and an energy fork. */
.academy-preview{margin:0;background:#17132a;color:#fff1c6;font-family:system-ui,sans-serif}
.academy-app{--element:#c6a2ff;font:16px system-ui,sans-serif;color:#fff1c6;min-height:100dvh;background:radial-gradient(ellipse at 50% 90%,#76518e55,transparent 55%),radial-gradient(ellipse at 80% 0%,#42647944,transparent 50%),#19182f;isolation:isolate}
.academy-app *{box-sizing:border-box}.academy-app button{font:800 14px system-ui;cursor:pointer;border:2px solid #aa89c4;border-bottom:5px solid #382647;border-radius:14px;padding:10px 18px;background:linear-gradient(#78618f,#42314f);color:#fff1c6;transition:transform .18s,box-shadow .18s}.academy-app button:hover{transform:translateY(-3px);box-shadow:0 0 18px #d8b4ff35}.academy-app button:active{transform:translateY(2px)}.academy-app button:focus-visible,.academy-app [tabindex]:focus-visible{outline:3px solid #fde5a9;outline-offset:4px}.academy-app button:disabled{opacity:.6;cursor:default}
.academy-shell.academy-app{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;display:none;grid-template-columns:190px minmax(0,1fr);grid-template-rows:64px 54px minmax(0,1fr);grid-template-areas:'header header' 'kit nav' 'kit body';gap:0;align-items:stretch;justify-items:stretch}.academy-shell[open]{display:grid}.academy-shell::backdrop{background:#19182f}
.academy-app:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('art/menu-constellations.svg') center/cover;opacity:.5}.academy-app:after{content:'';position:absolute;inset:45% -10% -40%;z-index:-1;pointer-events:none;border:2px solid #be9cd522;border-radius:50%;box-shadow:0 0 0 30px #bc8be909,0 0 0 90px #bc8be90a,0 0 0 92px #bc8be918;transform:perspective(650px) rotateX(55deg)}
.academy-header{grid-area:header;display:flex;align-items:center;justify-content:flex-start;gap:18px;width:100%;max-width:none;margin:0;padding:8px 20px;border-bottom:2px solid #a784be55;background:linear-gradient(90deg,#2c1e3d,#161226);z-index:3}.academy-header>strong{font-size:24px;text-shadow:0 3px #4f3666}.academy-header>small{margin-left:auto;color:#c5b0d8;font-size:10px;letter-spacing:1px}.academy-header button{min-height:40px;padding:8px 16px}
.academy-navigation{grid-area:nav;display:flex;align-items:center;gap:10px;padding:6px 28px;min-width:0}.academy-navigation button{border-radius:8px 8px 16px 16px;padding:7px 20px}.academy-navigation>small{margin-left:auto;font-size:11px;color:#c9bbd7}.academy-navigation [aria-pressed=true],.academy-filters [aria-pressed=true],.academy-app .academy-primary{background:linear-gradient(#fde7af,#e4c97e);color:#392e22;border-color:#fdecc0;border-bottom-color:#786449}
.academy-kit{grid-area:kit;display:flex;flex-direction:column;gap:12px;padding:24px 12px;min-width:0;background:linear-gradient(90deg,#211a32ef,#34243e90);border-right:2px solid #9b78b03d}.academy-kit-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;text-align:center;color:#d6bc9c;margin-bottom:4px}.academy-app .academy-kit-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px;min-width:0;background:radial-gradient(ellipse at 50% 10%,#70557a,#31263d 75%);border-color:#947baf;border-bottom-color:#171022;box-shadow:inset 0 0 0 3px #362c4a,0 5px 0 #100c20}.academy-kit-slot>div{width:48px;height:48px;display:grid;place-items:center;font-size:28px;color:#e4cd99}.academy-kit-slot img{width:100%;height:100%;object-fit:contain}.academy-kit-slot span{display:grid;gap:3px;min-width:0;max-width:100%}.academy-kit-slot small{font-size:9px;color:#cbb2d9;letter-spacing:1px;text-transform:uppercase}.academy-kit-slot strong{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.academy-body{grid-area:body;position:relative;width:100%;min-width:0;min-height:0;margin:0 auto;padding:20px 32px 26px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#b997d3 #23182f;scrollbar-width:thin}.academy-body h1{font-size:clamp(27px,3vw,42px);margin:4px 0 7px;text-shadow:0 3px #684973,0 0 28px #cbb0ff30}.academy-body h2{font-size:28px;margin:4px 0 6px;text-align:center}.academy-body p{color:#d2c5dd;font-size:14px;line-height:1.45;margin:7px 0 16px}.academy-eyebrow{font-size:10px;letter-spacing:2px;color:#bea0d9;font-weight:800}.academy-footnote{font-size:11px!important;text-align:center}.academy-body>h1,.academy-body>.academy-eyebrow,.academy-body>p{text-align:center}.academy-body>.academy-eyebrow{display:block}
.academy-subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 8px}.academy-app .academy-subject{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:0;padding:4px 5px 12px;border:0;border-bottom:0;background:transparent;box-shadow:none;color:var(--element);transition:transform .25s}.academy-subject:hover{transform:translateY(-7px)!important;box-shadow:none!important}.academy-portal{width:100%;max-width:210px;aspect-ratio:200/240}.academy-portal svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 13px color-mix(in srgb,var(--element) 22%,transparent))}.portal-island{animation:academy-hover 4s ease-in-out infinite;transform-origin:center}.academy-subject:nth-child(2) .portal-island{animation-delay:-1s}.academy-subject:nth-child(3) .portal-island{animation-delay:-2s}.academy-subject:nth-child(4) .portal-island{animation-delay:-3s}.portal-halo{transform-origin:100px 100px;animation:academy-orbit 22s linear infinite}.portal-motes{animation:academy-twinkle 2.6s ease-in-out infinite}.academy-subject:hover .portal-symbol{filter:drop-shadow(0 0 7px currentColor)}.academy-subject strong{font-size:26px;color:#fff0bf;text-shadow:0 3px #31253e}.academy-subject small{font-size:10px;color:#d0c5e1}.academy-subject span{font-size:11px}.academy-enter{margin-top:6px;padding:6px 16px;border-radius:7px 7px 14px 14px;border:1px solid var(--element);border-bottom:4px solid color-mix(in srgb,var(--element) 30%,#302539);background:linear-gradient(color-mix(in srgb,var(--element) 23%,#463759),#30263f);font-size:11px;color:#fff3c9}
.academy-resume{display:grid!important;grid-template-columns:1fr 1fr;gap:3px 20px;text-align:left;width:min(650px,100%);margin:12px auto 0!important;padding:9px 18px!important;background:linear-gradient(100deg,#4e463f,#3d2e4f)!important;border:1px solid #cfc19c!important;border-bottom:4px solid #66784b!important;border-radius:7px 20px 7px 20px!important}.academy-resume>small{font-size:9px;letter-spacing:1px;color:#eddba9}.academy-resume>strong{font-size:14px}.academy-resume>.academy-progress{grid-column:2;grid-row:1/3}.academy-progress{display:flex;align-items:center;gap:10px}.academy-progress progress{width:100%;height:12px;border:1px solid #c1b28655;border-radius:10px;overflow:hidden;accent-color:#f8dc8e}.academy-progress progress::-webkit-progress-bar{background:#161123}.academy-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#72ceba,#fcde90);border-radius:8px}.academy-progress small{font-size:12px;color:#fde7ae}
.academy-filters{display:flex;justify-content:center;gap:8px;margin:15px 0}.academy-filters button{flex:1;max-width:190px;padding:9px 8px}.academy-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px auto;max-width:960px}.academy-app .academy-type{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 8px;background:linear-gradient(130deg,#66526e,#302538);border:2px solid #c6a677;border-bottom:7px solid #4e375e;box-shadow:inset 0 0 0 5px #2c243c,7px 8px 0 #130e22;transform:rotate(-2deg)}.academy-type:nth-child(even){transform:rotate(2deg)}.academy-type img,.academy-type svg{width:95px;height:95px;object-fit:contain}.academy-type strong{font-size:22px}.academy-type small{font-size:11px;color:#d5c0df}.academy-type span{font-size:10px;color:#fde5a5}
.academy-spells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:8px 6px 15px;max-width:1100px;margin:auto}.academy-app .academy-spell{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px 12px;min-width:0;border:2px solid #a38ac1;border-bottom:7px solid #392647;border-radius:9px 24px 12px 12px;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--element) 20%,transparent),transparent 60%),linear-gradient(135deg,#4f3a61,#282139);box-shadow:inset 4px 0 #d3b97950,4px 5px #100b21}.academy-spell[data-learned=true]{border-color:#96d4d0}.academy-icon{display:grid;place-items:center;width:116px;height:116px;border-radius:50%;border:1px solid color-mix(in srgb,var(--element) 40%,transparent);background:repeating-conic-gradient(from 15deg,#ffffff07 0deg 15deg,transparent 15deg 30deg);box-shadow:0 0 0 7px #b792d608}.academy-icon img,.academy-icon svg{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--element) 30%,transparent))}.academy-spell:hover .academy-icon{animation:academy-summon .5s ease-out}.academy-spell strong{font-size:19px}.academy-spell>small{font-size:10px;color:#c5acd9;text-transform:uppercase;letter-spacing:1px}.academy-spell>span{font-size:12px;color:#fde7ab}.academy-labels{display:grid;gap:4px;font-size:11px}.academy-labels .in-game{color:#a8e4c4}.academy-labels .concept{color:#ffd293}.academy-labels small{font-size:11px}.academy-ready-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border:1px solid #94d2ce55;border-radius:12px}.academy-ready-row strong{font-size:13px}
.academy-detail{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:30px;align-items:center;max-width:960px;margin:24px auto}.academy-cast{position:relative;display:grid;place-items:center;width:100%;max-width:330px;aspect-ratio:1;margin:auto;border:3px solid var(--element);border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--element) 22%,transparent),#241d3f 70%);box-shadow:0 0 0 10px #b59cd417,0 0 0 13px #b59cd433,inset 0 0 35px #ccb3ff25,0 0 35px color-mix(in srgb,var(--element) 18%,transparent);cursor:pointer;overflow:hidden}.academy-cast>img,.academy-cast>svg{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 0 12px var(--element))}.academy-cast>small{position:absolute;bottom:10%;font-size:10px;color:#d0bddd}.academy-cast-ring{position:absolute;width:85%;height:85%;border:4px solid var(--element);border-radius:50%;opacity:0;pointer-events:none}.academy-spell-page{position:relative;padding:25px 24px 28px;border:2px solid #b89b7c;border-radius:8px 25px 15px 5px;background:linear-gradient(105deg,#66506b,#392c46);box-shadow:inset 7px 0 #d9bf8540,8px 8px #171023}.academy-detail button{margin:14px 8px 0 0}.academy-detail h1{font-size:30px}.academy-detail p{font-size:15px}
.academy-fork{position:relative;display:grid;grid-template-rows:auto auto;max-width:860px;margin:18px auto 25px;padding:0 8px;isolation:isolate}.academy-origin{position:relative;z-index:1;justify-self:center;display:grid;grid-template-columns:56px auto;gap:3px 14px;align-items:center;min-width:220px;padding:12px 22px;border:2px solid #ffecba;border-bottom:5px solid #8d7194;border-radius:18px;background:linear-gradient(#71597f,#30253f);box-shadow:0 0 24px #d9c6ff25}.academy-origin>div{grid-row:1/3;width:56px;height:56px}.academy-origin img,.academy-origin svg{width:100%;height:100%}.academy-origin small{font-size:11px;color:#c9b3df}.academy-origin strong{font-size:18px}.academy-variants{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:94px}.academy-variants article{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 16px 22px;border:2px solid var(--element);border-bottom:6px solid #6b537e;border-radius:22px 22px 12px 12px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--element) 20%,#43314f),#2c243c 80%);box-shadow:inset 0 0 0 5px #3b2e48,0 8px 0 #130f24}.academy-variants article:before{content:'';position:absolute;top:-9px;left:calc(50% - 8px);width:16px;height:16px;transform:rotate(45deg);background:#fef2d1;border:3px solid var(--element);box-shadow:0 0 16px var(--element)}.academy-variant-art{position:relative;width:82px;height:82px;display:grid;place-items:center;border:1px solid #fff3;border-radius:50%;background:#ffffff09;margin-bottom:9px}.academy-variant-art img,.academy-variant-art svg{width:65px;height:65px;object-fit:contain}.academy-variant-art b{position:absolute;bottom:-3px;right:-6px;background:#f7de9d;color:#3c3329;border:2px solid #fef3d9;border-radius:50%;font-size:20px;min-width:28px}.academy-variants h3{margin:7px 0;font-size:21px}.academy-variants p{margin:5px 0;font-size:14px}.academy-variants p:nth-of-type(1){color:#b9f3bd}.academy-variants p:nth-of-type(2){color:#ffd2ba}.academy-variants small{font-size:10px;color:#e3caad}.academy-variants button{margin-top:12px}
.academy-energy{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}.academy-energy path{fill:none;stroke-linecap:round;stroke-linejoin:round}.energy-shadow{stroke:#171329;stroke-width:20}.energy-glow{stroke:var(--element);stroke-width:15;opacity:.35;filter:blur(4px)}.energy-core{stroke:var(--element);stroke-width:9}.energy-flow{stroke:#fef6e1;stroke-width:4;stroke-dasharray:5 14;animation:academy-flow 1.8s linear infinite;filter:drop-shadow(0 0 4px #fef3d5)}
.academy-notice{background:#544638;border:1px solid #d0c090;border-radius:12px;padding:10px 15px;color:#fef0c8!important;font-size:13px!important}.academy-demo{display:flex;justify-content:center;gap:8px;padding:8px;background:#31253e}.academy-demo button{font-size:11px}.academy-entry small{font-size:11px!important}.academy-body{animation:academy-page-in .28s ease-out}
@keyframes academy-hover{50%{transform:translateY(-6px)}}@keyframes academy-orbit{to{transform:rotate(360deg)}}@keyframes academy-twinkle{50%{opacity:.3;transform:translateY(-5px)}}@keyframes academy-flow{to{stroke-dashoffset:-38}}@keyframes academy-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes academy-summon{50%{transform:scale(1.08) rotate(-5deg)}}
@media(max-width:1000px){.academy-shell.academy-app{grid-template-columns:140px minmax(0,1fr)}.academy-body{padding:16px 20px}.academy-subject strong{font-size:22px}.academy-types{gap:12px}.academy-type img,.academy-type svg{width:72px;height:72px}.academy-app .academy-type{padding:16px 6px}.academy-type strong{font-size:18px}}
@media(max-width:700px),(max-height:500px){.academy-shell.academy-app{grid-template-columns:1fr;grid-template-rows:46px 42px minmax(0,1fr) 60px;grid-template-areas:'header' 'nav' 'body' 'kit'}.academy-header{padding:4px 12px;gap:12px}.academy-header>strong{font-size:18px}.academy-header>small{font-size:8px}.academy-header button{min-height:34px;padding:5px 12px;font-size:12px}.academy-navigation{padding:4px 12px;gap:8px}.academy-navigation button{padding:5px 12px;font-size:12px;min-height:34px}.academy-navigation>small{font-size:10px}.academy-kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px 10px;border-right:0;border-top:2px solid #9271a550;background:#251b34;z-index:2}.academy-kit-title{display:none}.academy-app .academy-kit-slot{flex-direction:row;gap:5px;padding:4px 6px;box-shadow:inset 0 0 0 2px #392a4c}.academy-kit-slot>div{flex:0 0 30px;width:30px;height:30px}.academy-kit-slot span{gap:1px;text-align:left}.academy-kit-slot small{font-size:8px;letter-spacing:0}.academy-kit-slot strong{font-size:10px}.academy-body{padding:10px 14px 20px}.academy-body h1{font-size:25px}.academy-body h2{font-size:23px}.academy-body p{font-size:12px;margin:5px 0 10px}.academy-eyebrow{font-size:8px}.academy-subjects{gap:8px;margin:10px 0}.academy-subject strong{font-size:18px}.academy-subject small{font-size:9px}.academy-subject span{font-size:9px}.academy-enter{font-size:10px;padding:4px 9px}.academy-portal{max-width:150px}.academy-resume{padding:7px 12px!important;margin-top:8px!important}.academy-resume>strong{font-size:12px}.academy-types{gap:12px;margin:14px auto}.academy-type img,.academy-type svg{width:64px;height:64px}.academy-app .academy-type{padding:10px 5px;gap:5px}.academy-type strong{font-size:17px}.academy-type small{font-size:10px}.academy-spells{gap:14px}.academy-app .academy-spell{padding:12px 8px;gap:5px}.academy-icon{width:80px;height:80px}.academy-icon img,.academy-icon svg{width:58px;height:58px}.academy-spell strong{font-size:16px}.academy-detail{margin:10px auto;gap:20px;grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr)}.academy-cast{max-width:200px}.academy-spell-page{padding:16px}.academy-detail h1{font-size:24px}.academy-detail button{font-size:12px;padding:9px 10px}.academy-filters{margin:10px 0}.academy-filters button{padding:7px;font-size:12px}.academy-origin{padding:8px 16px;min-width:190px;grid-template-columns:38px auto}.academy-origin>div{width:38px;height:38px}.academy-origin strong{font-size:15px}.academy-variants{padding-top:70px;gap:25px}.academy-variants article{padding:12px}.academy-variant-art{width:58px;height:58px}.academy-variant-art img,.academy-variant-art svg{width:45px;height:45px}.academy-variants h3{font-size:17px}.academy-variants p{font-size:12px}}
@media(max-width:500px){.academy-subjects,.academy-types{grid-template-columns:1fr 1fr}.academy-spells{grid-template-columns:1fr 1fr}.academy-navigation>small{display:none}.academy-kit-slot>div{flex-basis:23px;width:23px;height:23px}.academy-kit-slot strong{font-size:9px}.academy-header>small{display:none}.academy-detail{grid-template-columns:1fr}.academy-cast{max-width:160px}.academy-variants{gap:14px}.academy-variants h3{font-size:15px}.academy-variants p{font-size:11px}.academy-origin strong{font-size:14px}.academy-origin{min-width:0}.academy-body h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.academy-app *,.academy-app *:before,.academy-app *:after{animation:none!important;transition:none!important}.academy-app button:hover{transform:none!important}}
html.academy-paused .academy-app *{animation-play-state:paused!important}
/* Decorative rings must never enlarge or scroll the fixed page itself. */
.academy-shell.academy-app{overflow:clip}.academy-app:after{inset:55% 0 0;box-shadow:0 0 0 25px #bc8be909,inset 0 0 0 25px #bc8be909;transform:perspective(650px) rotateX(45deg)}
@media(max-height:500px){
 .academy-shell[data-scene=variants]{grid-template-rows:46px 42px minmax(0,1fr);grid-template-areas:'header' 'nav' 'body'}.academy-shell[data-scene=variants] .academy-kit{display:none}.academy-app[data-scene=variants] .academy-body{padding:6px 16px 12px}.academy-app[data-scene=variants] .academy-body h2{font-size:20px;margin:0}.academy-app[data-scene=variants] .academy-body>p{margin:3px 0;font-size:10px}.academy-fork{margin:6px auto 0;max-width:660px}.academy-origin{padding:5px 14px;grid-template-columns:30px auto}.academy-origin>div{width:30px;height:30px}.academy-origin strong{font-size:13px}.academy-origin small{font-size:9px}.academy-variants{padding-top:35px;gap:34px}.academy-variants article{padding:7px 10px 10px}.academy-variant-art{width:36px;height:36px;margin-bottom:2px}.academy-variant-art img,.academy-variant-art svg{width:30px;height:30px}.academy-variant-art b{font-size:12px;min-width:20px}.academy-variants h3{font-size:15px;margin:3px 0}.academy-variants p{font-size:11px;margin:3px 0}.academy-variants small{font-size:9px}
 .academy-app[data-scene=home] .academy-body{padding:5px 14px}.academy-app[data-scene=home] .academy-eyebrow,.academy-app[data-scene=home] .academy-footnote{display:none}.academy-app[data-scene=home] h1{font-size:22px;margin:1px 0}.academy-app[data-scene=home] .academy-body>p{margin:2px 0 4px;font-size:10px}.academy-app[data-scene=home] .academy-resume{padding:4px 12px!important;margin-top:4px!important}.academy-app[data-scene=home] .academy-subjects{margin:4px 0;gap:12px}.academy-portal{max-width:88px}.academy-subject strong{font-size:16px}.academy-app .academy-subject{gap:2px;padding-bottom:4px}.academy-subject>small{display:none}.academy-enter{margin-top:3px;padding:3px 10px}
}
.academy-shell .academy-header{min-height:0;height:100%;padding-block:4px}.academy-shell .academy-header button{min-height:0}
@media(max-height:500px){.academy-app[data-scene=home] .academy-body>h1,.academy-app[data-scene=home] .academy-body>p{width:47%;text-align:left}.academy-app[data-scene=home] .academy-body>h1{font-size:20px}.academy-app[data-scene=home] .academy-resume{position:absolute;top:5px;right:14px;width:46%!important;margin:0!important;min-height:38px}.academy-app[data-scene=home] .academy-subjects{margin-top:8px}}
.academy-app:after{inset:55% 7% 0}@media(max-height:500px){.academy-app[data-scene=home] .academy-body{padding-bottom:3px}}
/* One Academy; equipment opens a focused slot picker. */
.academy-shell[data-scene=home]{grid-template-rows:64px minmax(0,1fr);grid-template-areas:'header header' 'kit body'}.academy-shell[data-scene=home] .academy-navigation{display:none}.academy-location{font-size:12px;color:#dbcce3}.academy-navigation button{font-size:12px}.academy-ownership{display:flex;justify-content:center;gap:6px;margin:8px 0 14px}.academy-ownership button{padding:6px 20px;font-size:12px;min-height:36px}.academy-ownership [aria-pressed=true]{background:linear-gradient(#fde7ac,#d6c288);color:#382f26;border-color:#f6e6bd;border-bottom-color:#607348}.academy-empty{display:grid;justify-items:center;gap:14px;padding:35px 12px}.academy-empty>span{font-size:64px;color:#d3b3ff;text-shadow:0 0 20px #b38feb}.academy-empty>strong{font-size:16px}.academy-arrival{position:absolute;inset:0;pointer-events:none;overflow:hidden}.academy-arrival i{position:absolute;left:calc(12% + var(--i)*12%);top:45%;width:9px;height:9px;background:#feefc8;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);opacity:0;animation:academy-spark-arrival .85s calc(var(--i)*.06s) ease-out both}.academy-portal:hover .portal-motes{animation-duration:1s}.academy-type:hover{box-shadow:inset 0 0 0 5px #2c243c,7px 8px #130e22,0 0 24px #dfb7ff50}.academy-type:hover img{animation:academy-summon .6s ease-out}@keyframes academy-spark-arrival{0%{opacity:0;transform:translateY(28px) scale(.3)}35%{opacity:.75}100%{opacity:0;transform:translateY(-55px) scale(1.3)}}
@media(max-width:700px),(max-height:500px){.academy-shell[data-scene=home]{grid-template-columns:1fr;grid-template-rows:46px minmax(0,1fr) 60px;grid-template-areas:'header' 'body' 'kit'}}
@media(max-height:500px){.academy-app[data-scene=home] .academy-body{padding-top:12px}.academy-app[data-scene=home] .academy-subjects{margin-top:20px}.academy-ownership{margin:5px 0 8px}.academy-ownership button{padding:4px 18px}}
@media(prefers-reduced-motion:reduce){.academy-arrival{display:none}}
.academy-app[data-scene=subject] .academy-location{display:none}@media(max-height:500px){.academy-app[data-scene=subject] .academy-body>h1,.academy-app[data-scene=loadout] .academy-body>h1{font-size:20px;margin:0}.academy-app[data-scene=subject] .academy-ownership,.academy-app[data-scene=loadout] .academy-ownership{margin:5px 0}.academy-app[data-scene=subject] .academy-spells,.academy-app[data-scene=loadout] .academy-spells{padding-top:4px}}
/* Illustrated school sanctuaries. Motion stays decorative and lightweight. */
.academy-app{background:radial-gradient(ellipse at 53% 95%,#76509b55,transparent 65%),radial-gradient(ellipse at 80% 10%,color-mix(in srgb,var(--element) 14%,transparent),transparent 50%),linear-gradient(120deg,#14172d,#28203d 65%,#17182e)}
.academy-header{box-shadow:0 5px 25px #090a1938;border-bottom-color:#cfb78655}.academy-header>small{border:1px solid #b194c447;border-radius:20px;padding:5px 10px}
.academy-kit{background:linear-gradient(90deg,#21192edc,#30233d88);box-shadow:8px 0 30px #100d2520}.academy-app .academy-kit-slot{border-color:color-mix(in srgb,var(--element) 55%,#80708f);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--element) 18%,#483751),#2b223a 80%);position:relative}.academy-kit-slot>div{filter:drop-shadow(0 3px 5px #0b091980)}.academy-kit-slot[data-empty=true]{border-style:dashed;box-shadow:none;opacity:.85}.academy-kit-slot:hover{box-shadow:inset 0 0 0 3px #362c4a,0 5px 0 #100c20,0 0 18px color-mix(in srgb,var(--element) 18%,transparent)}
.academy-subjects{max-width:1160px;margin:24px auto 8px;gap:22px}.academy-app .academy-subject{isolation:isolate;padding:8px 8px 15px}.academy-subject:before{content:'';position:absolute;inset:15% 1% 0;z-index:-1;border-radius:48% 48% 22px 22px;border:1px solid color-mix(in srgb,var(--element) 16%,transparent);background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--element) 8%,transparent),transparent 70%),linear-gradient(0deg,#17132e88,transparent 65%);transition:border-color .25s,background .25s}.academy-subject:after{content:'';position:absolute;z-index:-1;width:80%;height:15%;top:64%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--element) 18%,transparent),transparent 65%)}.academy-subject:hover:before,.academy-subject:focus-visible:before{border-color:color-mix(in srgb,var(--element) 55%,transparent)}.academy-portal{max-width:224px}.portal-halo{opacity:.22}.portal-symbol{filter:drop-shadow(0 2px 2px #151229)}.academy-subject>span{color:var(--element);font-weight:750}.academy-enter{min-width:132px;padding:8px 15px;background:linear-gradient(color-mix(in srgb,var(--element) 27%,#534164),#30243c);box-shadow:0 3px 0 #100a22}.academy-enter:after{content:' →';color:var(--element)}
.portal-water{animation:academy-water-flow 2.8s linear infinite}.portal-embers{animation:academy-ember-rise 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.portal-rock{animation:academy-world-float 4.6s ease-in-out infinite}.portal-clouds{animation:academy-cloud-drift 6s ease-in-out infinite}.portal-breeze{stroke-dasharray:35 8;animation:academy-water-flow 5s linear infinite}
.academy-resume{grid-template-columns:40px 1fr 1fr;column-gap:13px!important;border-color:#e7d9af90!important;background:linear-gradient(105deg,#5b483570,#413050)!important;box-shadow:0 5px 16px #100b2530}.academy-study-seal{grid-column:1;grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border:1px solid #b6eac788;border-radius:10px;background:#1d2636}.academy-study-seal img,.academy-study-seal svg{width:30px;height:30px;object-fit:contain}.academy-resume>small,.academy-resume>strong{grid-column:2}.academy-resume>.academy-progress{grid-column:3}.academy-resume .academy-progress progress{height:9px}
.academy-app .academy-type{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--element) 15%,transparent),transparent 65%),linear-gradient(110deg,#66516e,#33263e);border-color:#c3ae82;border-left-width:7px;box-shadow:inset 3px 0 #e2c79570,inset 0 -4px #f2d6a433,6px 7px #151021}.academy-type:before{content:'';position:absolute;inset:10px;border:1px solid #edce9040;border-radius:8px 8px 14px 14px;pointer-events:none;z-index:-1}.academy-type:after{content:'✧';position:absolute;right:12px;top:9px;color:var(--element);font-size:16px}.academy-type>div{border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--element) 16%,transparent),transparent);filter:drop-shadow(0 4px 6px #170f25)}
.academy-app .academy-spell{overflow:hidden;isolation:isolate;transition:transform .2s,border-color .2s,box-shadow .2s}.academy-spell:before{content:'';position:absolute;inset:7px;border:1px solid #dac09033;border-radius:4px 18px 8px 8px;pointer-events:none;z-index:-1}.academy-spell:after{content:'✧';position:absolute;right:17px;top:14px;color:var(--element);font-size:17px}.academy-spell[data-equipped=true]:after{content:'✓';color:#fde5a5}.academy-spell[data-studying=true]:after{content:'✦';color:#fde5a5;animation:academy-twinkle 2.8s ease-in-out infinite}.academy-spell>span{padding:5px 14px;border-radius:20px;background:#17132680;font-size:11px}.academy-spell[data-equipped=true]>span{color:#fde9b6;background:#82714138}.academy-spell:hover{border-color:var(--element);box-shadow:inset 4px 0 #d3b97950,4px 5px #100b21,0 0 25px color-mix(in srgb,var(--element) 15%,transparent)}
.academy-cast:before{content:'';position:absolute;inset:7%;border:1px dashed var(--element);border-radius:50%;opacity:.32;animation:academy-orbit 45s linear infinite;pointer-events:none}.academy-cast:after{content:'✧';position:absolute;top:11%;right:23%;font-size:23px;color:#fcf0b8;text-shadow:0 0 12px var(--element);pointer-events:none}.academy-spell-page:before{content:'';position:absolute;inset:9px;border:1px solid #dec38c30;border-radius:3px 18px 8px 3px;pointer-events:none}.academy-spell-page>small{color:var(--element);font-weight:800;letter-spacing:.8px}.academy-origin{box-shadow:0 4px 0 #191125,0 0 24px #d9c6ff25}.academy-variant-art{box-shadow:0 0 0 5px #ffffff04,0 0 20px color-mix(in srgb,var(--element) 12%,transparent)}
@keyframes academy-water-flow{to{stroke-dashoffset:-58}}@keyframes academy-ember-rise{0%,100%{transform:translateY(3px);opacity:.5}50%{transform:translateY(-9px);opacity:1}}@keyframes academy-world-float{50%{transform:translateY(-5px)}}@keyframes academy-cloud-drift{50%{transform:translateX(7px)}}
@media(max-height:500px){.academy-subjects{gap:14px}.academy-portal{max-width:110px}.academy-enter{min-width:0;padding:4px 10px}.academy-app .academy-subject{padding:0 4px 7px;gap:2px}.academy-subject:before{inset:15% 0 0;border-radius:48% 48% 12px 12px}.academy-app[data-scene=home] .academy-resume{grid-template-columns:26px 1fr 1fr;gap:1px 7px!important;padding:4px 8px!important}.academy-study-seal{width:26px;height:26px;border-radius:7px}.academy-study-seal img,.academy-study-seal svg{width:23px;height:23px}.academy-resume>strong{font-size:11px}.academy-resume>small{font-size:8px}.academy-header>small{padding:3px 7px}.academy-app .academy-type{padding:12px 6px}.academy-type img,.academy-type svg{width:64px;height:64px}}
@media(max-width:700px) and (min-height:501px){.academy-subjects{gap:12px}.academy-portal{max-width:145px}.academy-resume{grid-template-columns:32px 1fr 1fr;gap:3px 8px!important;padding:7px 10px!important}.academy-study-seal{width:30px;height:30px}.academy-study-seal img,.academy-study-seal svg{width:24px;height:24px}.academy-header>small{font-size:8px;padding:3px 6px}}
@media(prefers-reduced-motion:reduce){.academy-app *,.academy-app *:before,.academy-app *:after{animation:none!important;transition:none!important}}
@media(max-height:500px){.academy-types{margin:12px auto;gap:16px}.academy-app[data-scene=variants] .academy-body{padding-bottom:6px}}
/* Forms: one preview label, one base spell, two visual tradeoffs. */
.academy-navigation .academy-concept-note{display:block!important;margin-left:auto;font-size:10px;color:#dcc4a8;border:1px solid #ddba8050;border-radius:20px;padding:5px 10px}.academy-app[data-scene=variants] .academy-location{display:none}.academy-app[data-scene=variants] .academy-body>h2{font-size:25px;margin:0 0 12px}.academy-app[data-scene=variants] .academy-fork{max-width:780px;margin-top:6px}.academy-app[data-scene=variants] .academy-origin{padding:8px 22px;grid-template-columns:44px auto}.academy-app[data-scene=variants] .academy-origin>div{width:44px;height:44px}.academy-app[data-scene=variants] .academy-variants{padding-top:70px;gap:40px}.academy-app[data-scene=variants] .academy-variants article{padding:20px 15px;border-radius:28px 28px 16px 16px}.academy-app[data-scene=variants] .academy-variant-art{width:92px;height:92px;margin:0 0 6px;cursor:pointer;background:radial-gradient(color-mix(in srgb,var(--element) 20%,#35263d),#241c34);border:1px solid color-mix(in srgb,var(--element) 60%,#fff3);filter:none}.academy-app[data-scene=variants] .academy-variant-art>img,.academy-app[data-scene=variants] .academy-variant-art>svg{width:64px;height:64px;z-index:1;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--element) 30%,transparent))}.academy-variant-art[data-effect=surge]:before{content:'';position:absolute;left:5%;width:70%;height:32%;border-top:2px solid var(--element);border-bottom:2px solid var(--element);transform:skewY(-12deg);opacity:.45}.academy-variant-art[data-effect=bloom]:before{content:'';position:absolute;inset:10%;border:2px dashed var(--element);border-radius:50%;opacity:.55}.academy-form-echo{position:absolute;inset:0;border:3px solid var(--element);border-radius:50%;opacity:0;pointer-events:none}.academy-app[data-scene=variants] .academy-variants h3{margin:5px 0 13px;font-size:20px}.academy-form-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%}.academy-tradeoff{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:750;padding:7px 10px;border:1px solid #afdeb43b;border-radius:9px;background:#86c7a014;color:#c9fbc3}.academy-tradeoff.is-cost{color:#ffd6b6;background:#d68d7212;border-color:#e4a88738}.academy-tradeoff i{display:flex;width:18px;height:18px;flex-shrink:0}.academy-tradeoff svg{width:100%;height:100%}
@media(max-height:500px){.academy-app[data-scene=variants] .academy-body{padding:3px 18px 10px}.academy-app[data-scene=variants] .academy-body>h2{font-size:19px;margin:0 0 5px}.academy-app[data-scene=variants] .academy-origin{padding:5px 16px;grid-template-columns:30px auto}.academy-app[data-scene=variants] .academy-origin>div{width:30px;height:30px}.academy-app[data-scene=variants] .academy-variants{padding-top:39px;gap:30px}.academy-app[data-scene=variants] .academy-variants article{padding:10px 8px 12px}.academy-app[data-scene=variants] .academy-variant-art{width:52px;height:52px;margin:0 0 2px}.academy-app[data-scene=variants] .academy-variant-art>img,.academy-app[data-scene=variants] .academy-variant-art>svg{width:39px;height:39px}.academy-app[data-scene=variants] .academy-variants h3{font-size:16px;margin:3px 0 8px}.academy-tradeoff{font-size:10px;padding:5px 7px;gap:4px}.academy-tradeoff i{width:15px;height:15px}.academy-form-stats{gap:5px}}
@media(max-width:500px) and (min-height:501px){.academy-app[data-scene=variants] .academy-variants{gap:14px}.academy-app[data-scene=variants] .academy-variants article{padding:16px 8px}.academy-app[data-scene=variants] .academy-variants h3{font-size:17px}.academy-app[data-scene=variants] .academy-variant-art{width:70px;height:70px}.academy-app[data-scene=variants] .academy-variant-art>img,.academy-app[data-scene=variants] .academy-variant-art>svg{width:50px;height:50px}.academy-tradeoff{font-size:11px;padding:6px}.academy-form-stats{flex-direction:column;align-items:center}}
/* A small visual field guide, opened only when requested. */
.academy-header .academy-help{flex-shrink:0;border-radius:50%;width:36px;height:36px;padding:0;min-height:0;border-bottom-width:3px;font-size:20px}.academy-header .academy-xp-grant{font-size:11px;white-space:nowrap;padding:7px 12px;color:#fde9b3;border-color:#b6a577;background:linear-gradient(#584b3e,#393129)}.academy-shell[data-scene=guide]{grid-template-rows:64px minmax(0,1fr);grid-template-columns:1fr;grid-template-areas:'header' 'body'}.academy-shell[data-scene=guide] .academy-kit,.academy-shell[data-scene=guide] .academy-navigation{display:none}.academy-guide-tabs{display:flex;justify-content:center;gap:9px;margin:0 auto 12px}.academy-guide-tabs button{min-width:110px;font-size:13px}.academy-guide-tabs [aria-pressed=true]{background:linear-gradient(#fdeab6,#dac385);color:#3c3228;border-color:#fef3d6;border-bottom-color:#7a6d4a}.academy-guide-panel{max-width:680px;margin:0 auto;text-align:center;border:1px solid #ceb28c70;border-radius:18px 36px 18px 36px;padding:15px 20px 20px;background:radial-gradient(ellipse at 50% 20%,#8e65bb22,transparent 65%),linear-gradient(135deg,#443350a0,#211b3390);box-shadow:inset 0 0 0 5px #d5b68b09,0 8px 0 #15112566}.academy-guide-stage{max-width:480px;margin:auto}.academy-guide-stage svg{width:100%;height:100%;overflow:visible}.academy-guide-stage text{font:800 12px system-ui;fill:#eee2c3;text-anchor:middle}.academy-guide-stage rect+text{fill:#293c2c}.academy-guide-panel h1{font-size:28px;margin:0}.academy-guide-panel p{max-width:430px;margin:8px auto 16px;min-height:22px}.academy-guide-panel>button{min-width:130px}.guide-fill{transform-box:fill-box;transform-origin:left;animation:academy-guide-fill 3.5s ease-in-out infinite}.guide-flight{animation:academy-guide-flight 3.5s linear infinite}.guide-reveal,.guide-slot-spell{transform-box:fill-box;transform-origin:center;animation:academy-guide-reveal 3.5s ease-in-out infinite}.guide-star{animation:academy-twinkle 3.5s ease-in-out infinite}.guide-unlock-ring{transform-origin:220px 95px;animation:academy-orbit 24s linear infinite}.guide-branch{animation:academy-flow 3s linear infinite}@keyframes academy-guide-fill{0%,12%{transform:scaleX(.08)}75%,100%{transform:scaleX(1)}}@keyframes academy-guide-flight{to{stroke-dashoffset:-296}}@keyframes academy-guide-reveal{0%,12%{opacity:.2}45%,100%{opacity:1}}
@media(max-width:700px),(max-height:500px){.academy-header{gap:8px}.academy-header .academy-help{width:30px;height:30px;font-size:17px}.academy-header .academy-xp-grant{font-size:10px;padding:5px 8px}.academy-header>small{display:none}.academy-header>strong{margin-right:auto}.academy-shell[data-scene=guide]{grid-template-rows:46px minmax(0,1fr)}.academy-guide-tabs{gap:6px;margin-bottom:8px}.academy-guide-tabs button{min-width:0;flex:1;max-width:130px;padding:6px 9px;font-size:11px}.academy-guide-panel{padding:10px}.academy-guide-panel p{font-size:12px}}
@media(max-height:500px){.academy-app[data-scene=guide] .academy-body{padding:8px 16px}.academy-guide-panel{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr auto 1fr;column-gap:15px;max-width:740px;min-height:230px}.academy-guide-stage{grid-column:1;grid-row:1/4;width:100%;align-self:center}.academy-guide-panel h1{grid-column:2;align-self:end;font-size:25px}.academy-guide-panel p{grid-column:2;margin:7px 0 12px;align-self:center}.academy-guide-panel>button{grid-column:2;align-self:start;justify-self:center;min-width:110px;font-size:12px;padding:7px 12px}}
@media(max-width:430px){.academy-header>strong{font-size:14px}.academy-header .academy-xp-grant{font-size:9px;padding:5px}.academy-header{gap:5px;padding-inline:7px}}

.academy-switch.academy-app{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));min-height:0;height:fit-content;max-height:calc(100dvh - 24px);overflow:auto;padding:26px 24px 24px;border:2px solid #ceb195;border-bottom:7px solid #5d456c;border-radius:28px 28px 18px 18px;text-align:center;box-shadow:0 12px 0 #110c2390,0 0 60px #b394e725;animation:academy-page-in .25s ease-out}.academy-switch::backdrop{background:#100b20bf;backdrop-filter:blur(5px)}.academy-switch h2{font-size:26px;margin:10px 0}.academy-switch p{font-size:13px;line-height:1.5;color:#dccde5;margin:8px auto 20px;max-width:300px}.academy-switch-art{display:flex;align-items:center;justify-content:center;gap:20px}.academy-switch-art>div{width:82px;height:82px;display:grid;place-items:center;border:1px solid currentColor;border-radius:22px;background:#17142c;box-shadow:0 0 22px #d3a7ff17}.academy-switch-art svg{width:65px;height:65px}.academy-switch-art>b{font-size:30px;color:#fde6a8}.academy-switch-actions{display:flex;gap:10px}.academy-switch-actions button{flex:1;padding:10px 8px;font-size:13px}.academy-switch .academy-primary{background:linear-gradient(#fde8b2,#e1c780);color:#3d3328;border-color:#fef0ca;border-bottom-color:#6d8148}
@media(max-height:500px){.academy-switch.academy-app{padding:15px 20px}.academy-switch-art>div{width:55px;height:55px;border-radius:16px}.academy-switch-art svg{width:46px;height:46px}.academy-switch h2{font-size:23px;margin:8px 0}.academy-switch p{margin:5px auto 14px}}
/* Elemental island life: fast falls, slow molten flow, levitating stones and gusts. */
.island-water-streaks{animation:island-water-run .7s linear infinite}.island-water-spray{animation:island-water-splash 1.1s ease-out infinite;transform-origin:100px 225px}.island-lava-core{animation:island-lava-run 3.8s linear infinite}.island-lava-drop{animation:island-lava-drip 3.4s ease-in infinite;transform-box:fill-box;transform-origin:top}.island-lava-drop.lava-drop-late{animation-delay:-1.8s}.island-earth-shard{animation:island-stone-hover 4s ease-in-out infinite}.island-earth-shard.earth-shard-late{animation-delay:-2s;animation-duration:4.8s}.island-earth-vein{animation:island-crystal-light 4.8s ease-in-out infinite}.island-earth-pulse{transform-origin:100px 184px;animation:island-earth-ring 4.8s ease-out infinite;opacity:0}.academy-subject[data-school=wind] .portal-door{transform-origin:100px 174px;animation:island-wind-resist 5.5s ease-in-out infinite}.island-wind-gusts{animation:island-wind-run 2.4s linear infinite;opacity:.7}.island-wind-leaves{animation:island-leaf-flight 3.5s ease-in-out infinite;opacity:0}
@keyframes island-water-run{to{stroke-dashoffset:-18}}@keyframes island-water-splash{0%{opacity:0;transform:translateY(-4px)}30%{opacity:.8}100%{opacity:0;transform:translateY(6px)}}@keyframes island-lava-run{to{stroke-dashoffset:-39}}@keyframes island-lava-drip{0%,45%{opacity:0;transform:translateY(-3px) scaleY(.5)}60%{opacity:1;transform:translateY(0) scaleY(1)}100%{opacity:0;transform:translateY(10px) scaleY(1.6)}}@keyframes island-stone-hover{0%,100%{transform:translateY(2px)}50%{transform:translateY(-7px)}}@keyframes island-crystal-light{0%,100%{opacity:.2}45%,60%{opacity:1}}@keyframes island-earth-ring{0%,30%{opacity:0;transform:scale(.75)}40%{opacity:.55}90%,100%{opacity:0;transform:scale(1.1)}}@keyframes island-wind-resist{0%,100%{transform:rotate(-1deg)}35%{transform:rotate(4deg)}52%{transform:rotate(1deg)}70%{transform:rotate(5deg)}85%{transform:rotate(-2deg)}}@keyframes island-wind-run{to{stroke-dashoffset:-202}}@keyframes island-leaf-flight{0%{opacity:0;transform:translate(-15px,-4px)}20%{opacity:.8}80%{opacity:.7}100%{opacity:0;transform:translate(55px,12px)}}
/* Gold marks the chosen school without replacing its elemental identity. */
.academy-class-status{min-height:21px;display:flex;align-items:center;justify-content:center}.earth-falling-rock{animation:academy-rock-fall 3.8s cubic-bezier(.5,.1,.8,.6) infinite;opacity:0}.earth-rock-spin{transform-box:fill-box;transform-origin:center;animation:academy-rock-roll 1.5s linear infinite}@keyframes academy-rock-fall{0%,12%{opacity:0;transform:translate(0,-3px)}20%{opacity:1;transform:translate(0,0)}85%{opacity:.85}100%{opacity:0;transform:translate(var(--fall-x),32px)}}@keyframes academy-rock-roll{to{transform:rotate(360deg)}}
@media(max-height:500px){.academy-class-status{min-height:17px}}
/* Physical enchanted tomes: illustrated binding, page block, corners and clasp. */
.academy-types{gap:18px;margin:22px auto;max-width:1050px;padding:0 6px 12px}.academy-app .academy-type{position:relative;isolation:isolate;display:block;aspect-ratio:200/260;padding:0!important;min-width:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;overflow:visible;transform:rotate(-3deg);transition:transform .25s}.academy-app .academy-type:nth-child(even){transform:rotate(3deg)}.academy-app .academy-type:hover,.academy-app .academy-type:focus-visible{transform:translateY(-7px) rotate(0deg)}.academy-type:before,.academy-type:after{display:none}.academy-book-cover{position:absolute;inset:0;pointer-events:none;background:none!important;filter:drop-shadow(4px 9px 3px #100a2266)!important}.academy-book-cover svg.academy-book-art{width:100%;height:100%;overflow:visible}.academy-book-content{position:absolute;inset:17% 16% 18% 24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:none!important;filter:none!important}.academy-book-content .academy-book-icon{width:78px;height:78px;display:grid;place-items:center;flex-shrink:0}.academy-book-icon img,.academy-book-icon svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px #110a2380)}.academy-book-content strong{font-size:21px;text-shadow:0 2px #21152f}.academy-book-content small{font-size:10px;line-height:1.25}.academy-book-content>span{font-size:10px;color:#b4f6f2;border-top:1px solid #d6bf8745;padding-top:8px;width:75%}.book-ribbon{transform-origin:130px 12px;animation:book-ribbon-wave 3s ease-in-out infinite}.academy-type:nth-child(2) .island-lava-core,.academy-type:nth-child(2) .island-water-streaks{animation-delay:-.7s}.academy-type:nth-child(3) .portal-rock{animation-delay:-1.8s}.academy-type:nth-child(4) .book-ribbon{animation-delay:-1.2s}
/* Detail opens into a two-page grimoire instead of a floating information box. */
.academy-detail{position:relative;isolation:isolate;max-width:1030px;padding:30px;gap:45px;border:3px solid #b89d76;border-bottom:10px solid #a79883;border-radius:24px 12px 24px 12px;background:linear-gradient(90deg,#382941 0%,#59445a 44%,#251b30 49.5%,#8f73916b 50%,#59455c 53%,#3d2e49 100%);box-shadow:0 5px 0 #38293e,0 9px 0 #c8b89c,0 15px 0 #1a1329,0 20px 30px #100c2433}.academy-detail:before{content:'';position:absolute;inset:12px;z-index:-1;border:1px solid #dfc89744;border-radius:16px 5px 16px 5px;pointer-events:none}.academy-detail:after{content:'';position:absolute;top:-8px;right:40px;width:22px;height:46px;background:var(--element);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 3px 8px #100b25}.academy-detail .academy-cast{border:0;border-radius:0;box-shadow:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--element) 15%,transparent),transparent);overflow:visible}.academy-detail .academy-cast>small{bottom:0}.academy-detail .academy-spell-page{border:0;border-radius:0;background:none;box-shadow:none;padding:10px 0}.academy-detail .academy-spell-page:before{display:none}.academy-detail .academy-cast:before{inset:10%;border-style:dotted;opacity:.35}.academy-detail .academy-cast:after{top:8%;right:15%}.academy-spell:before{border-color:#dec59a4a}.academy-spell:after{background:#34203970;border-radius:0 0 6px 6px;padding:2px 5px 5px;top:8px}.academy-app[data-scene=subject] .academy-body,.academy-app[data-scene=spell] .academy-body{background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--element) 8%,transparent),transparent 65%)}
@keyframes book-ribbon-wave{50%{transform:skewY(-7deg) translateY(-3px)}}
@media(max-width:1000px){.academy-book-content .academy-book-icon{width:62px;height:62px}.academy-book-content strong{font-size:18px}.academy-book-content{gap:5px}.academy-types{gap:10px}}
@media(max-height:500px){.academy-types{max-width:680px;gap:12px;margin:6px auto;padding-bottom:9px}.academy-app .academy-type{max-height:205px}.academy-book-content .academy-book-icon{width:48px;height:48px}.academy-book-content{gap:4px;inset:15% 16% 18% 24%}.academy-book-content strong{font-size:16px}.academy-book-content small{font-size:8px}.academy-book-content>span{font-size:9px;padding-top:4px}.academy-detail{margin:8px auto 15px;padding:14px 22px;gap:30px}.academy-detail .academy-cast{max-width:165px}.academy-detail .academy-spell-page{padding:0}.academy-detail h1{font-size:22px}.academy-detail p{font-size:12px}.academy-detail button{font-size:11px;padding:7px 9px}.academy-detail:after{height:27px;width:16px;right:25px}}
@media(max-width:500px) and (min-height:501px){.academy-types{max-width:400px;gap:18px 12px}.academy-book-content .academy-book-icon{width:65px;height:65px}.academy-detail{padding:22px;background:linear-gradient(#554059,#32263e);gap:22px}.academy-detail .academy-cast{max-width:180px}.academy-detail .academy-spell-page{border-top:1px solid #d9c69c55;padding-top:15px}.academy-detail:after{right:20px}}
.book-runes{opacity:.4;transition:opacity .3s,filter .3s}.academy-type:hover .book-runes,.academy-type:focus-visible .book-runes{opacity:.9;filter:drop-shadow(0 0 3px #ffe3a45c)}.academy-detail:before{background:linear-gradient(90deg,transparent 48%,#d5c59515 49%,transparent 51%)}

.academy-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-height:500px){.academy-detail{margin:3px auto 10px;padding:10px 18px;gap:30px}.academy-detail .academy-cast{max-width:130px}.academy-detail p{margin:5px 0}.academy-detail h1{margin:3px 0}.academy-detail .academy-spell-page{gap:5px}}
@media(max-width:500px) and (min-height:501px){.academy-detail{grid-template-columns:1fr}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-body{padding:4px 14px 6px}.academy-app[data-scene=subject] .academy-body>h1{margin:2px 0;font-size:22px}.academy-types{max-width:620px;margin:4px auto;padding-bottom:4px}.academy-app .academy-type{max-height:184px}.academy-book-content strong{font-size:15px}}
/* Elemental cover effects use seamless dash periods and matching loop endpoints. */
.book-water-flow{animation:book-water-current 1.4s linear infinite}.book-foam{animation:book-foam-breathe 3s ease-in-out infinite}.book-spray{animation:book-droplet-fall 1.8s ease-in infinite}.book-lava-flow{animation:book-molten-current 4s linear infinite;filter:drop-shadow(0 0 2px #ff8a36)}.book-flames{transform-box:fill-box;transform-origin:bottom;animation:book-flame-dance 2.3s ease-in-out infinite}.book-embers{animation:book-ember-rise 3s ease-out infinite}.book-crystals{animation:book-crystal-light 4s ease-in-out infinite}.book-grit{animation:book-droplet-fall 3.5s ease-in infinite}.book-air-flow{animation:book-air-current 3s linear infinite}.book-air-wisp{animation:book-wisp-pass 4s ease-in-out infinite}.academy-type:nth-child(even) .book-air-wisp{animation-delay:-2s}.academy-type:nth-child(2) .book-spray,.academy-type:nth-child(2) .book-embers{animation-delay:-.7s}.academy-type:nth-child(3) .book-flames,.academy-type:nth-child(3) .book-grit{animation-delay:-1.3s}
@keyframes book-water-current{to{stroke-dashoffset:-30}}@keyframes book-molten-current{to{stroke-dashoffset:-40}}@keyframes book-air-current{to{stroke-dashoffset:-80}}@keyframes book-foam-breathe{50%{opacity:.6}}@keyframes book-droplet-fall{0%{opacity:0;transform:translateY(-3px)}20%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translateY(10px)}}@keyframes book-flame-dance{50%{transform:scale(.9,1.12) skewX(-4deg)}}@keyframes book-ember-rise{0%{opacity:0;transform:translateY(3px)}25%{opacity:1}100%{opacity:0;transform:translate(4px,-12px)}}@keyframes book-crystal-light{50%{filter:drop-shadow(0 0 3px #b0f9dc)}}@keyframes book-wisp-pass{0%{opacity:0;transform:translateX(-6px)}25%,65%{opacity:.7}100%{opacity:0;transform:translateX(6px)}}
.academy-form-lock{display:block;width:max-content;margin:0 auto 8px;padding:4px 10px;border:1px solid #d8c9eb66;border-radius:20px;background:#231b36;color:#f1dbaa;font-size:11px}.academy-variants article[data-locked=true]{border-style:solid;border-color:#ad92bc}.academy-form-future{display:block;margin-top:10px;font-size:11px;color:#c8b7d8}.academy-variants article[data-locked=true] .academy-variant-art{filter:saturate(.7)}
@media(max-height:500px){.academy-form-lock{font-size:9px;margin-bottom:4px;padding:2px 8px}.academy-form-future{font-size:9px;margin-top:5px}}
.energy-idle{stroke:#887b96;stroke-width:8;opacity:.55}.academy-variants article[data-selected=true]{border-color:#fde7ad;box-shadow:0 6px 0 #302239,0 0 18px #fdefc22b}.academy-variants article{cursor:pointer}
/* Layered streams slide at different speeds; lava remains slow and viscous. */
.book-water-flow{animation:book-water-current 1.8s linear infinite}.book-current-secondary{animation-duration:2.6s;animation-delay:-1s;opacity:.75}.book-water>path:first-child{animation:book-water-breathe 3.4s ease-in-out infinite;transform-origin:20px 150px}.book-lava-flow{stroke-width:5;animation:book-molten-current 7s linear infinite;filter:drop-shadow(0 0 3px #ff882f)}.book-smolder{animation:book-coal-glow 4s ease-in-out infinite;filter:drop-shadow(0 0 3px #fc7e34)}.book-heat{animation:book-heat-rise 4s ease-out infinite}.book-embers{animation-duration:4.5s}.book-spray{animation-duration:1.3s}
@keyframes book-water-current{to{stroke-dashoffset:-60}}@keyframes book-molten-current{to{stroke-dashoffset:-80}}@keyframes book-water-breathe{50%{opacity:.8;transform:scaleX(1.012)}}@keyframes book-coal-glow{50%{opacity:.45;stroke:#ffce79}}@keyframes book-heat-rise{0%{opacity:0;transform:translateY(4px)}30%{opacity:.25}100%{opacity:0;transform:translateY(-9px)}}
/* Broad traveling gusts recall the original cover effect; curls trail behind. */
.book-wind-sweep{animation:book-wind-sweep 2.4s linear infinite}.book-wind-follow{animation-delay:-1.2s;opacity:0}.academy-type:nth-child(even) .book-wind-sweep{animation-delay:-.6s}.academy-type:nth-child(even) .book-wind-follow{animation-delay:-1.8s}
@keyframes book-wind-sweep{0%{stroke-dashoffset:0;transform:translateX(-7px);opacity:0}15%{opacity:.75}75%{opacity:.75}100%{stroke-dashoffset:-127;transform:translateX(7px);opacity:0}}
/* Category spells live on the facing pages of a single enchanted grimoire. */
.academy-open-book{position:relative;isolation:isolate;max-width:1100px;margin:12px auto 25px;padding:35px 55px 48px;min-height:460px}.academy-paper-art{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:drop-shadow(0 12px 0 #160e2580)}.academy-paper-art svg{width:100%;height:100%;overflow:visible}.academy-open-book>h1{position:relative;margin:0 auto 10px;width:max-content;max-width:90%;padding:4px 24px;background:#49374f;border-radius:50%;font-size:32px!important;text-shadow:0 3px #2b1c3a}.academy-open-book .academy-ownership{margin:8px auto 16px}.academy-open-book .academy-spells{grid-template-columns:repeat(2,minmax(0,1fr));gap:70px;margin:0;max-width:none}.academy-open-book .academy-spell{border:0;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--element) 12%,transparent),transparent 65%);box-shadow:none;border-radius:45%;padding:15px 10px;min-height:230px}.academy-open-book .academy-spell:before{inset:9% 13%;border-radius:50%;border:1px solid color-mix(in srgb,var(--element) 15%,transparent)}.academy-open-book .academy-spell:after{display:none}.academy-open-book .academy-spell:hover,.academy-open-book .academy-spell:focus-visible{background:radial-gradient(ellipse,color-mix(in srgb,var(--element) 20%,transparent),transparent 70%);box-shadow:none}.academy-page-turn{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:16px}.academy-page-turn button{min-width:46px;padding:7px 16px!important}.academy-page-turn span{font-size:12px;color:#e5d4ad}.academy-blank-page{display:grid;place-content:center;text-align:center;min-height:200px;opacity:.25}.academy-blank-page span{font-size:72px;color:var(--element)}.academy-blank-page i{width:110px;height:110px;border:2px dotted var(--element);border-radius:50%;position:absolute;justify-self:center;align-self:center}.academy-open-book .academy-empty{min-height:200px}.academy-open-book:after{content:'';position:absolute;right:9%;top:13px;width:18px;height:46px;background:var(--element);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);pointer-events:none}
@media(max-height:500px){.academy-app[data-scene=library] .academy-body{padding:2px 12px 4px}.academy-open-book{margin:0 auto;padding:13px 30px 24px;min-height:0;max-width:740px}.academy-open-book>h1{font-size:19px!important;margin:0 auto;padding:2px 16px}.academy-open-book .academy-ownership{margin:3px auto 4px}.academy-open-book .academy-ownership button{padding:4px 14px!important;font-size:10px;min-height:26px}.academy-open-book .academy-spells{gap:40px}.academy-open-book .academy-spell{min-height:110px;padding:5px!important;gap:3px}.academy-open-book .academy-icon{width:48px;height:48px}.academy-open-book .academy-icon img,.academy-open-book .academy-icon svg{width:40px;height:40px}.academy-open-book .academy-spell strong{font-size:14px}.academy-open-book .academy-spell small{font-size:8px}.academy-open-book .academy-page-turn{margin-top:4px;gap:16px}.academy-page-turn button{min-height:23px!important;padding:2px 12px!important;font-size:13px}.academy-page-turn span{font-size:9px}.academy-open-book:after{height:26px;width:12px;top:8px}.academy-blank-page{min-height:110px}}
@media(max-width:500px) and (min-height:501px){.academy-open-book{padding:25px 20px 45px;min-height:390px}.academy-open-book>h1{font-size:22px!important}.academy-open-book .academy-spells{gap:25px}.academy-open-book .academy-spell{min-height:205px;padding:8px 3px}.academy-open-book .academy-icon{width:65px;height:65px}.academy-open-book .academy-spell strong{font-size:15px}.academy-open-book .academy-spell small{font-size:9px}}
.academy-open-book .academy-spell{background-color:transparent!important;box-shadow:none!important;border:0!important}.academy-turn-hint{display:block;text-align:center;font-size:10px;color:#dfcdaa;margin:5px 0 0}.academy-open-book{perspective:1300px}.academy-turn-leaf{position:absolute;top:5%;bottom:7%;width:47%;z-index:4;pointer-events:none;background:linear-gradient(90deg,#3b2b49,#6b5368 12%,#58445d 90%,#d2bf9d);border:1px solid #c9ae7d;border-radius:3px 12px 10px 2px;backface-visibility:hidden;box-shadow:0 8px 16px #160c3544}.turn-forward{left:50%;transform-origin:left;animation:academy-turn-forward .55s ease-in-out forwards}.turn-back{right:50%;transform-origin:right;animation:academy-turn-back .55s ease-in-out forwards}@keyframes academy-turn-forward{from{transform:rotateY(0);opacity:.95}to{transform:rotateY(-175deg);opacity:0}}@keyframes academy-turn-back{from{transform:rotateY(0);opacity:.95}to{transform:rotateY(175deg);opacity:0}}
.academy-mastery-badge{display:flex;gap:10px;align-items:center;margin:8px 0;padding:7px 10px;border:1px solid #e7d09955;border-radius:9px;background:#21162c55}.academy-mastery-badge strong{font-size:13px}.academy-mastery-badge small{font-size:11px}.academy-variants progress{display:block;width:75%;height:8px;margin:9px auto 4px;accent-color:#f8de99}.academy-mastery-caption{display:block;font-size:11px;color:#ddc9ea}.academy-guide-tabs{gap:8px;flex-wrap:wrap}.academy-guide-panel{position:relative;isolation:isolate;border:3px solid #d0b990!important;border-bottom:9px solid #b4a189!important;border-radius:22px 12px 18px 12px!important;background:linear-gradient(90deg,#57415a,#49374f 48%,#22182f 49.5%,#6e556c 51%,#4a3853)!important;box-shadow:0 5px 0 #24172f,0 9px 0 #caba9a,0 16px 0 #1a102a!important;padding:24px!important}.academy-guide-panel:before{content:'';position:absolute;inset:12px;border:1px solid #e6c99244;border-radius:12px;pointer-events:none}.academy-guide-rules{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px auto}.academy-guide-rules span{font-size:11px;padding:6px 10px;border:1px solid #cebbdb66;border-radius:20px;background:#302139}.academy-guide-panel h1,.academy-guide-panel>p{position:relative;background:#4c3951;border-radius:20px;width:fit-content;margin-inline:auto;padding:3px 12px}.academy-guide-panel .academy-guide-stage{background:radial-gradient(ellipse,#f2dea418,transparent 65%)}
@media(max-height:500px){.academy-open-book{padding-top:8px;padding-bottom:15px}.academy-open-book .academy-spell{min-height:90px!important}.academy-open-book .academy-icon{width:38px;height:38px}.academy-open-book .academy-icon img,.academy-open-book .academy-icon svg{width:32px;height:32px}.academy-open-book .academy-spell strong{font-size:12px}.academy-open-book .academy-spell>span{font-size:9px}.academy-turn-hint{font-size:8px;margin-top:2px}.academy-mastery-badge{margin:3px 0;padding:3px 7px}.academy-mastery-badge strong{font-size:10px}.academy-mastery-badge small{font-size:9px}.academy-variants progress{height:5px;margin:4px auto}.academy-mastery-caption{font-size:9px}.academy-guide-panel{padding:9px 16px!important}.academy-guide-rules{margin:5px auto;gap:4px}.academy-guide-rules span{font-size:9px;padding:3px 7px}.academy-guide-panel>p{font-size:11px}.academy-guide-tabs button{font-size:10px!important;padding:5px 9px!important}}
.academy-help svg{width:30px;height:27px;display:block;filter:drop-shadow(0 2px 2px #190b29)}.academy-header .academy-help{padding:5px 10px!important;width:auto!important}.academy-guide-stage svg text{fill:#fff0c5!important}
@media(max-height:500px){.academy-open-book .academy-spells{padding:0}.academy-open-book .academy-spell{gap:2px}.academy-open-book .academy-page-turn{margin-top:2px}.academy-help svg{width:25px;height:23px}}
.academy-turn-leaf{overflow:hidden;display:grid;place-items:center;background:linear-gradient(90deg,#2d203c 0%,#66506a 7%,#715970 38%,#554158 88%,#e0c9a1 100%);box-shadow:-14px 8px 22px #13091b66;font-style:normal}.academy-turn-leaf>.academy-spell{width:85%;pointer-events:none!important;align-self:center;opacity:.75}.academy-turn-leaf:after{content:'';position:absolute;inset:0;background:linear-gradient(95deg,#10081700 30%,#ffe6ac33 62%,#180b2b66);pointer-events:none}.turn-forward{animation-duration:.4s}.turn-back{animation-duration:.4s}@keyframes academy-turn-forward{0%{transform:rotateY(0deg) skewY(0);opacity:1}40%{transform:rotateY(-58deg) skewY(-3deg);opacity:1}75%{opacity:.9}100%{transform:rotateY(-172deg) skewY(1deg);opacity:0}}@keyframes academy-turn-back{0%{transform:rotateY(0deg) skewY(0);opacity:1}40%{transform:rotateY(58deg) skewY(3deg);opacity:1}75%{opacity:.9}100%{transform:rotateY(172deg) skewY(-1deg);opacity:0}}
@media(max-height:500px){.academy-shell[data-scene=library]{grid-template-rows:46px 42px minmax(0,1fr);grid-template-areas:'header' 'nav' 'body'}.academy-shell[data-scene=library] .academy-kit{display:none}}
.turn-forward,.turn-back{animation-duration:.55s}
/* A living arena fills the illustration page. Animation is owned by the mounted view. */
.academy-detail .academy-cast.academy-live-demo{width:100%;max-width:none;aspect-ratio:auto;align-self:center;display:block;background:none;padding:0;border:1px solid #cbb78e66;border-radius:48% 48% 16px 16px/12% 12% 16px 16px;overflow:hidden;box-shadow:0 0 28px #d5a1ed18,0 8px 0 #24192e66}.academy-live-demo:before,.academy-live-demo:after{display:none!important}.academy-demo-arena{width:100%;height:auto;aspect-ratio:520/350;display:block;max-width:none!important;max-height:none!important}.academy-demo-controls{display:flex;justify-content:center;gap:10px;padding:7px;background:#271e36;border-top:1px solid #8e779e55}.academy-demo-controls button{min-width:40px;min-height:30px!important;font-size:17px!important;padding:3px 12px!important;line-height:1.2}.academy-spell-notes{margin-top:8px}.academy-spell-notes summary{cursor:pointer;list-style:none;width:30px;height:30px;display:grid;place-content:center;border-radius:50%;border:1px solid #c1a5d4;background:#513b61;color:#ffeec5;font-weight:800}.academy-spell-notes summary::-webkit-details-marker{display:none}.academy-spell-notes[open]{padding:8px;border-radius:12px;background:#24182d88}.academy-spell-notes p{font-size:12px}.academy-spell-notes>small{display:block}.academy-spell-notes:not([open])>*:not(summary){display:none}
@media(max-height:500px){.academy-shell[data-scene=spell]{grid-template-rows:46px 42px minmax(0,1fr);grid-template-areas:'header' 'nav' 'body'}.academy-shell[data-scene=spell] .academy-kit{display:none}.academy-detail .academy-cast.academy-live-demo{max-width:none}.academy-demo-controls{padding:4px}.academy-demo-controls button{min-width:35px;min-height:25px!important;font-size:14px!important}.academy-spell-notes summary{width:24px;height:24px;font-size:12px}.academy-spell-notes{margin-top:4px}.academy-detail .academy-spell-page>small{font-size:10px}}
.academy-live-demo .academy-demo-controls{width:100%;box-sizing:border-box;max-width:none;min-height:0}.academy-demo-controls button{margin:0!important}.academy-detail .academy-cast.academy-live-demo{cursor:default}
@media(max-height:500px){.academy-detail .academy-cast.academy-live-demo{max-width:285px}.academy-demo-controls{padding:3px}.academy-detail:has(.academy-live-demo){padding-block:9px;margin-top:3px}}
@media(max-height:500px){.academy-app[data-scene=spell] .academy-body{padding:3px 12px 8px}.academy-detail:has(.academy-live-demo){padding:8px 16px;margin:2px auto 10px;gap:24px}.academy-detail>.academy-live-demo~.academy-spell-page>button{margin:6px 4px 0 0!important}.academy-detail>.academy-live-demo~* h1{font-size:21px;margin:3px 0!important}.academy-detail:has(.academy-live-demo) .academy-spell-notes{margin:4px 0 0}.academy-detail:has(.academy-live-demo) .academy-mastery-badge{margin:4px 0}}

iframe.academy-demo-arena{border:0;aspect-ratio:1056/594;pointer-events:none}.academy-demo-controls [role=status]{font-size:12px;align-self:center}

/* Elemental archives: illustrated settings shared by covers, pages and spell details. */
.academy-app[data-school=water]{--realm-art:url('art/academy-realm-water.svg');--realm-light:#91edf0;--realm-dark:#11283b}
.academy-app[data-school=fire]{--realm-art:url('art/academy-realm-fire.svg');--realm-light:#ffc374;--realm-dark:#342030}
.academy-app[data-school=earth]{--realm-art:url('art/academy-realm-earth.svg');--realm-light:#d7b5f5;--realm-dark:#2b2839}
.academy-app[data-school=wind]{--realm-art:url('art/academy-realm-wind.svg');--realm-light:#caf5ea;--realm-dark:#293a55}
.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{inset:0;background:var(--realm-art) center center/cover no-repeat;opacity:1}
.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):after{inset:0;border:0;border-radius:0;box-shadow:none;transform:none;background:linear-gradient(90deg,#0a102535,transparent 25%,transparent 78%,#0a10252b);z-index:-1}
.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]) .academy-kit{background:linear-gradient(90deg,color-mix(in srgb,var(--realm-dark) 94%,transparent),color-mix(in srgb,var(--realm-dark) 70%,transparent));backdrop-filter:blur(7px)}
.academy-app[data-scene=subject] .academy-body>h1{text-shadow:0 3px 0 #201c32,0 0 30px var(--realm-dark),0 0 60px var(--realm-dark);position:relative;z-index:1}
.academy-app[data-scene=subject] .academy-types{position:relative;padding:10px 18px 30px;filter:drop-shadow(0 16px 13px #06102077)}
.academy-app[data-scene=subject] .academy-types:before{content:'';pointer-events:none;position:absolute;left:-6%;right:-6%;bottom:-5%;height:22%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--realm-light) 20%,transparent),transparent 68%);border-bottom:1px solid color-mix(in srgb,var(--realm-light) 32%,transparent)}
.academy-app[data-scene=subject] .academy-type:hover{filter:drop-shadow(0 0 15px color-mix(in srgb,var(--realm-light) 50%,transparent))}
.academy-app:is([data-scene=library],[data-scene=spell]) .academy-detail,.academy-app[data-scene=library] .academy-open-book{filter:drop-shadow(0 22px 20px #08132180)}
.academy-atmosphere{position:absolute;inset:65px 0 0;pointer-events:none;z-index:-1;overflow:hidden;contain:strict}
.academy-atmosphere i{position:absolute;width:4px;height:4px;border:1px solid var(--realm-light);border-radius:50%;opacity:0;box-shadow:0 0 7px var(--realm-light);animation:archive-rise calc(9s + var(--i)*.23s) linear infinite;animation-delay:calc(var(--i)*-.9s)}
.academy-app[data-school=water] .academy-atmosphere i{width:calc(4px + mod(var(--i),4)*2px);height:calc(4px + mod(var(--i),4)*2px);box-shadow:inset 1px 1px #d8ffff77,0 0 8px #89f5ff33}
.academy-app[data-school=fire] .academy-atmosphere i{border:0;background:#ffb05b;width:3px;height:6px;border-radius:70% 10%;animation-duration:calc(6s + var(--i)*.17s)}
.academy-app[data-school=earth] .academy-atmosphere i{border-radius:0;transform:rotate(45deg);animation-name:archive-glint}
.academy-app[data-school=wind] .academy-atmosphere i{width:90px;height:20px;border:0;border-top:1px solid #ceffeb66;border-radius:50%;box-shadow:none;animation-name:archive-breeze;animation-duration:calc(7s + var(--i)*.15s)}
@keyframes archive-rise{0%{opacity:0;translate:0 65px}15%{opacity:.38}80%{opacity:.3}100%{opacity:0;translate:20px -100px}}
@keyframes archive-glint{0%,100%{opacity:0;scale:.5}45%{opacity:.6;scale:1.2}60%{opacity:.15;scale:.8}}
@keyframes archive-breeze{0%{opacity:0;translate:-120px 15px}20%,70%{opacity:.4}100%{opacity:0;translate:200px -20px}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{padding:0 8px 8px}.academy-atmosphere{inset:45px 0 0}.academy-atmosphere i:nth-child(n+11){display:none}}
@media(prefers-reduced-motion:reduce){.academy-atmosphere i{animation:none;opacity:.16}}

/* Preserve the illustrated margins when the book grid changes aspect ratio. */
.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{background-size:100% 100%}
.academy-app[data-scene=subject] .academy-types{filter:drop-shadow(0 17px 12px #061020aa)}
.academy-app[data-school=water] .academy-atmosphere i{width:6px;height:6px}
.academy-app[data-school=water] .academy-atmosphere i:nth-child(3n){width:9px;height:9px}

/* Each selectable tome hovers over its own piece of the elemental world. */
.academy-book-perch{position:absolute;left:-2%;right:-2%;height:36%;bottom:-22%;z-index:-1;pointer-events:none;transform:rotate(3deg);animation:academy-perch-float 5s ease-in-out infinite;filter:drop-shadow(0 10px 7px #0a0b2355)}
.academy-book-perch img{width:100%;height:100%;object-fit:fill}
.academy-type:nth-child(even) .academy-book-perch{transform:rotate(-3deg);animation-delay:-2.5s}
.academy-app[data-scene=subject] .academy-types{padding-bottom:75px;row-gap:70px}
.academy-app[data-scene=subject] .academy-types:before{display:none}
@keyframes academy-perch-float{0%,100%{translate:0 2px}50%{translate:0 8px}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{padding-bottom:32px;row-gap:40px}}
@media(prefers-reduced-motion:reduce){.academy-book-perch{animation:none}}
.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{inset:64px 0 0 190px;filter:saturate(.88) brightness(.88)}
.academy-book-perch{height:34%;bottom:-30%}
.academy-app[data-scene=subject] .academy-types{padding-bottom:90px;row-gap:85px}
@media(max-width:1000px){.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{left:140px}}
@media(max-width:700px),(max-height:500px){.academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{inset:46px 0 0}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{padding-bottom:42px;row-gap:45px}}
/* Perches belong to the scene, outside the interactive book transform. */
.academy-book-berth{position:relative;min-width:0;padding-bottom:37%;isolation:isolate}
.academy-book-berth>.academy-type{width:100%;z-index:1}
.academy-book-berth>.academy-book-perch{inset:auto -2% 0;height:27%;transform:none;animation:none;z-index:0}
.academy-app .academy-book-berth:nth-child(odd)>.academy-type{transform:rotate(-3deg)}
.academy-app .academy-book-berth:nth-child(even)>.academy-type{transform:rotate(3deg)}
.academy-app .academy-book-berth>.academy-type:hover,.academy-app .academy-book-berth>.academy-type:focus-visible{transform:translateY(-7px) rotate(0deg)}
.academy-app[data-scene=subject] .academy-types{filter:none;padding-bottom:14px;row-gap:20px;align-items:start}
.academy-book-berth .academy-book-cover{filter:drop-shadow(4px 9px 5px #100a2280)!important}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{padding-bottom:8px;row-gap:14px}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{max-width:min(620px,calc((100dvh - 170px)*2.2));margin-top:5px;margin-bottom:0}.academy-app[data-scene=subject] .academy-body>h1{margin:0 0 4px}}
@media(max-height:500px){.academy-book-berth .academy-book-content{gap:3px}.academy-book-berth .academy-book-content .academy-book-icon{width:clamp(24px,8vh,40px);height:clamp(24px,8vh,40px)}.academy-book-berth .academy-book-content strong{font-size:clamp(10px,3vh,14px)}.academy-book-berth .academy-book-content small{font-size:7px}.academy-book-berth .academy-book-content>span{font-size:8px;padding-top:3px}}

/* Broader individual platforms; the stage owns their full animated bounds. */
.academy-book-berth{padding-bottom:49%}
.academy-book-berth>.academy-book-perch{left:-16%;right:-16%;height:37%;bottom:0}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{max-width:min(620px,calc((100dvh - 170px)*2))}}
.academy-book-berth{padding-bottom:63%}.academy-book-berth>.academy-book-perch{height:43%}
/* Keep the entire animation in normal layout, below the rotated book's corners. */
.academy-book-berth{padding-bottom:0}
.academy-book-berth>.academy-book-perch{position:relative;display:block;inset:auto;left:-9%;width:118%;height:auto;aspect-ratio:244/190;margin-top:8%;transform:none;animation:none}
.academy-book-perch img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{max-width:min(620px,calc((100dvh - 170px)*1.75))}}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-types{max-width:min(620px,calc((100dvh - 170px)*1.7))}}
/* Spell instructions: a labelled book control, sized for mouse and touch. */
.academy-spell-notes summary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:auto;min-height:40px;max-width:100%;padding:7px 12px;border-radius:10px;font-size:13px;line-height:1.25;text-align:left}
.academy-spell-notes summary svg{width:27px;height:27px;flex:0 0 27px}
.academy-spell-notes summary:hover{background:#654b78;border-color:#ffe2a2}
.academy-spell-notes summary:focus-visible{outline:2px solid #f4dd9f;outline-offset:3px}
@media(max-height:500px){.academy-spell-notes summary{min-height:34px;padding:5px 9px;font-size:12px;gap:6px}.academy-spell-notes summary svg{width:23px;height:23px;flex-basis:23px}}
/* A leather-bound, gilded spellbook is the Academy launcher itself. */
body #lobby button.engraved-spellbook{display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;min-height:64px;isolation:isolate;position:relative}
body #lobby button.engraved-spellbook .home-tome{display:block!important;position:absolute;inset:0;width:100%;height:100%;perspective:600px;filter:drop-shadow(0 5px 3px #100b1a88);transition:filter .25s,transform .25s}
body #lobby .home-tome>svg,body #lobby .home-tome-cover>svg{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
body #lobby .home-tome-pages{position:absolute;inset:0}
body #lobby .home-tome-cover{display:block!important;position:absolute;inset:0;transform-origin:10% 50%;transform:rotateY(0deg);transition:transform .38s cubic-bezier(.2,.8,.2,1);z-index:2}
body #lobby .home-tome-glow{position:absolute;inset:19% 12% 27% 17%;background:#eddbac;box-shadow:0 0 17px #eddbac88;opacity:0;transition:opacity .3s;z-index:1}
@media(any-hover:hover) and (any-pointer:fine){body #lobby button.engraved-spellbook:hover .home-tome-cover{transform:rotateY(-23deg) rotate(-1deg)}body #lobby button.engraved-spellbook:hover .home-tome{transform:translateY(-2px);filter:drop-shadow(0 7px 5px #13091caa)}body #lobby button.engraved-spellbook:hover .home-tome-glow{opacity:.2}}
body #lobby button.engraved-spellbook:focus-visible{outline:2px solid #a6f2ed;outline-offset:4px;border-radius:12px}
body #lobby button.engraved-spellbook:focus-visible .home-tome-cover{transform:rotateY(-18deg)}
body #lobby button.engraved-spellbook:active .home-tome{transform:translateY(1px) scale(.98)}
@media(max-height:500px),(max-width:760px){body #lobby button.engraved-spellbook{min-height:42px}body #lobby button.engraved-spellbook .home-tome{max-width:none}}
@media(prefers-reduced-motion:reduce){body #lobby button.engraved-spellbook .home-tome,body #lobby button.engraved-spellbook .home-tome-cover,body #lobby button.engraved-spellbook .home-tome-glow{transition:none!important;transform:none!important}}
body.gentle-motion #lobby .home-tome,body.gentle-motion #lobby .home-tome-cover{transition:none!important;transform:none!important}
/* Phone archives: size each tome from usable height, not the entire four-book row. */
@media(max-height:500px) and (orientation:landscape){
 .academy-app[data-scene=subject]{grid-template-rows:46px 30px minmax(0,1fr) 50px}
 .academy-app[data-scene=subject] .academy-navigation{padding:0 12px}
 .academy-app[data-scene=subject] .academy-navigation button{min-height:28px;padding:3px 12px}
 .academy-app[data-scene=subject] .academy-body{padding:3px 14px 4px;overflow:auto}
 .academy-app[data-scene=subject] .academy-body>h1{font-size:19px;margin:0 0 5px;line-height:23px}
 .academy-app[data-scene=subject] .academy-types{width:100%;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 auto;padding:0 8px;justify-items:center}
 .academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100dvh - 198px)*.76923));min-width:78px}
 .academy-app[data-scene=subject] .academy-type{width:100%;height:auto;max-height:none;aspect-ratio:200/260}
 .academy-book-berth>.academy-book-perch{width:100%;left:0;height:24px;aspect-ratio:auto;margin-top:0}
 .academy-book-berth .academy-book-content{inset:17% 12% 15% 21%;gap:3px}
 .academy-book-berth .academy-book-content .academy-book-icon{width:22px;height:22px}
 .academy-book-berth .academy-book-content strong{font-size:12px;line-height:1.15}
 .academy-book-berth .academy-book-content small{font-size:8px;line-height:1.15}
 .academy-book-berth .academy-book-content>span{font-size:8px;line-height:1.1;padding-top:3px}
 .academy-app:is([data-scene=subject],[data-scene=library],[data-scene=spell],[data-scene=variants]):before{background-size:cover;background-position:center;inset:46px 0 50px}
 .academy-app[data-scene=spell]:before{bottom:0}
 .academy-app .academy-book-cover svg.academy-book-art{max-width:none!important;max-height:none!important;width:100%!important;height:100%!important}
}
@media(max-height:500px) and (orientation:landscape){
 .academy-app:is([data-scene=library],[data-scene=spell],[data-scene=variants]):before{bottom:0}
}
/* Give every elemental platform a visible, proportional stage beneath its tome. */
@media(max-height:500px) and (orientation:landscape){
 .academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{position:relative;left:-10%;width:120%;height:clamp(44px,12dvh,60px);margin-top:-8px;aspect-ratio:auto;overflow:visible;pointer-events:none}
 .academy-app[data-scene=subject] .academy-book-perch img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 3px #100a2266)}
 .academy-app[data-scene=subject] .academy-book-berth>.academy-type{position:relative;z-index:1}
}
@media(max-height:500px) and (orientation:landscape){
 .academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100dvh - 157px - clamp(44px,12dvh,60px))*.76923))}
}
/* Cover typography follows the tome width instead of the screen width. */
.academy-app .academy-book-berth>.academy-type{container-type:inline-size}
.academy-app .academy-book-berth .academy-book-content{inset:18% 13% 16% 23%;gap:3px;text-align:center;min-width:0}
.academy-app .academy-book-berth .academy-book-content strong{font-size:clamp(10px,12cqw,21px);line-height:1.12;max-width:100%;overflow-wrap:normal}
.academy-app .academy-book-berth .academy-book-content small{font-size:clamp(7px,7.5cqw,12px);line-height:1.2;max-width:100%}
.academy-app .academy-book-berth .academy-book-content>span{font-size:clamp(7px,7.5cqw,11px);line-height:1.15;width:90%;padding-top:3px}
.academy-app .academy-book-berth .academy-book-content .academy-book-icon{width:clamp(18px,24cqw,54px);height:clamp(18px,24cqw,54px)}
.academy-app .academy-book-berth .academy-book-icon :is(img,svg){width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}

/* The fifth archive is a sealed teaser, never a selectable school. */
.academy-app .academy-subjects{grid-template-columns:repeat(5,minmax(0,1fr))}
.academy-sealed-portal .academy-portal img{display:block;width:100%;height:100%;object-fit:contain}
.academy-app .academy-sealed-portal{cursor:default;color:#a19aa3}
.academy-app .academy-sealed-portal:hover{transform:none!important;box-shadow:none!important}
.academy-sealed-portal>strong{color:#c6bec8;text-shadow:0 2px #17121b}
.academy-app .academy-sealed-portal .academy-enter:disabled{font:700 11px system-ui;min-height:0;margin-top:6px;padding:6px 10px;border:1px solid #77717b;border-bottom:4px solid #353039;border-radius:7px 7px 14px 14px;background:linear-gradient(#4b454f,#29252e);color:#aaa2ae;opacity:1;cursor:default;transform:none;box-shadow:none}
@media(max-height:500px){.academy-app .academy-subjects{gap:8px}.academy-app .academy-sealed-portal .academy-enter:disabled{font-size:9px;padding:4px 6px;margin-top:3px}}
/* Keep the four elemental doors together; future archives continue beneath them. */
.academy-app .academy-subjects{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
.academy-app .academy-sealed-portal{grid-column:2/4;justify-self:center;width:calc(50% - 11px);min-width:0}
.academy-app[data-scene=home] .academy-body{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#aa8cb8 #21172f;overscroll-behavior:contain;padding-bottom:24px}
.academy-app[data-scene=home] .academy-body::-webkit-scrollbar{width:10px}
.academy-app[data-scene=home] .academy-body::-webkit-scrollbar-track{background:#21172f;border-radius:10px}
.academy-app[data-scene=home] .academy-body::-webkit-scrollbar-thumb{background:linear-gradient(#bda2c7,#705382);border:2px solid #21172f;border-radius:10px}
@media(max-height:500px){.academy-app .academy-subjects{row-gap:20px}.academy-app .academy-sealed-portal{width:calc(50% - 4px)}}

/* Hidden dialogs and offscreen portal rows do not run decorative animation. */
.academy-shell:not([open]) *, .academy-shell:not([open]) *::before,.academy-shell:not([open]) *::after,.academy-subject.portal-motion-paused *,.academy-subject.portal-motion-paused *::before,.academy-subject.portal-motion-paused *::after{animation-play-state:paused!important}

/* Current study is identified by the study panel and portal status text. */



/* The active study has its own solid elemental panel and contrasting progress well. */
.academy-resume[data-school=water]{--study-base:#19394d;--study-top:#285871;--study-ink:#c4f2ff;--study-art:url('art/ability-frame-water.svg')}
.academy-resume[data-school=fire]{--study-base:#3e202b;--study-top:#713c2e;--study-ink:#ffe3b2;--study-art:url('art/ability-frame-fire.svg')}
.academy-resume[data-school=earth]{--study-base:#302b25;--study-top:#56483b;--study-ink:#ebe0c5;--study-art:url('art/ability-frame-earth.svg')}
.academy-resume[data-school=wind]{--study-base:#203a40;--study-top:#3d6265;--study-ink:#d6ffeb;--study-art:url('art/ability-frame-air.svg')}
.academy-app[data-scene=home] .academy-resume[data-school]{position:relative;isolation:isolate;overflow:hidden;max-width:740px;width:100%!important;padding:12px 16px!important;border:1px solid var(--study-accent)!important;border-bottom:4px solid color-mix(in srgb,var(--study-accent) 40%,#171423)!important;background:linear-gradient(105deg,var(--study-top),var(--study-base) 62%)!important;box-shadow:inset 0 0 0 3px #ffffff08,0 5px 16px #100b2544;border-radius:12px 20px 12px 20px!important;grid-template-columns:40px minmax(0,1.2fr) minmax(110px,1fr)}
.academy-resume[data-school]:before{content:'';position:absolute;inset:-15px -10px -15px auto;width:180px;background:var(--study-art) right center/contain no-repeat;opacity:.18;pointer-events:none;z-index:-1}
.academy-resume[data-school] .academy-study-seal{border-color:var(--study-accent);background:var(--study-base);box-shadow:0 0 10px color-mix(in srgb,var(--study-accent) 15%,transparent)}
.academy-resume[data-school]>small{color:var(--study-ink);font-size:9px;letter-spacing:.06em;line-height:1.4}
.academy-resume[data-school]>strong{color:#fff4dc;line-height:1.2;overflow-wrap:anywhere}
.academy-resume[data-school] .academy-progress{gap:8px;padding:8px 9px;background:#110e2080;border:1px solid color-mix(in srgb,var(--study-accent) 35%,transparent);border-radius:9px}
.academy-resume[data-school] .academy-progress progress{min-width:0;height:11px;border-color:var(--study-accent);accent-color:var(--study-accent)}
.academy-resume[data-school] progress::-webkit-progress-bar{background:#110f1d}
.academy-resume[data-school] progress::-webkit-progress-value{background:linear-gradient(90deg,color-mix(in srgb,var(--study-accent) 70%,#4f5268),var(--study-accent))}
.academy-resume[data-school] progress::-moz-progress-bar{background:var(--study-accent)}
.academy-resume[data-school] .academy-progress small{color:var(--study-ink);min-width:30px;text-align:right;font-weight:800}
@media(max-height:500px){.academy-app[data-scene=home] .academy-resume[data-school]{position:relative;top:auto;right:auto;width:100%!important;max-width:650px;grid-template-columns:26px minmax(0,1.3fr) minmax(90px,1fr);padding:6px 9px!important;margin:6px auto 0!important}.academy-resume[data-school]>small{font-size:8px}.academy-resume[data-school] .academy-progress{padding:5px 7px}.academy-resume[data-school] .academy-progress progress{height:8px}}

/* Cache each idle portal as one floating surface, instead of repainting its SVG layers. */
.academy-subject .academy-portal svg{filter:none}
.academy-subject .portal-island{animation:none}
.academy-subject .academy-portal{animation:academy-portal-idle 5s ease-in-out infinite;will-change:transform}
.academy-subject:nth-child(2) .academy-portal{animation-delay:-1.25s}
.academy-subject:nth-child(3) .academy-portal{animation-delay:-2.5s}
.academy-subject:nth-child(4) .academy-portal{animation-delay:-3.75s}
.academy-subject:not([data-portal-detailed=true]) .academy-portal *{animation-play-state:paused!important}
.academy-subject.portal-motion-paused .academy-portal{will-change:auto}

@keyframes academy-portal-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
html[data-motion=gentle] .academy-subject .academy-portal{animation:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.academy-subject .academy-portal{animation:none;will-change:auto}}

/* Class selection is separate from entering a portal, and follows the saved school. */
.academy-portal-choice{display:flex;flex-direction:column;align-items:stretch;min-width:0;--class-top:#4e3b68;--class-base:#292039}
.academy-portal-choice>.academy-subject{width:100%;flex:1}
.academy-portal-choice[data-school=water]{--class-top:#32667d;--class-base:#20374f}
.academy-portal-choice[data-school=fire]{--class-top:#884932;--class-base:#462638}
.academy-portal-choice[data-school=earth]{--class-top:#60643c;--class-base:#333b29}
.academy-portal-choice[data-school=wind]{--class-top:#527c70;--class-base:#2b414c}
.academy-app .academy-select-class{width:100%;min-height:40px;margin-top:7px;padding:8px 6px;border:1px solid var(--element);border-bottom:4px solid var(--class-base);border-radius:7px 16px 7px 16px;background:linear-gradient(125deg,var(--class-top),var(--class-base));color:#fff0cd;font-size:12px;font-weight:800;box-shadow:inset 0 0 0 3px #ffffff09}
.academy-app .academy-select-class[aria-pressed=true]{opacity:1;color:#fff0b7;border-color:#efd38f;border-bottom-color:#846332;box-shadow:inset 0 0 0 2px #ffda802b,0 0 14px #ffd47736;cursor:default}
.portal-selected-arch{display:none}
.academy-subject[data-selected=true] .portal-selected-arch{display:block}
.academy-subject[data-selected=true]:before{border:2px solid #efc878;background:radial-gradient(ellipse at 50% 40%,#ffd96c12,transparent 70%),linear-gradient(0deg,#63502a2b,transparent 70%);box-shadow:inset 0 0 18px #ffce5d14,0 0 20px #ffcf6930,0 3px 0 #78543150}
@media(max-height:500px){.academy-app .academy-select-class{font-size:10px;padding:5px;min-height:34px;margin-top:4px}}

/* Fixed portal help sits outside the scrolling body. */
.academy-app .academy-classes-button{position:absolute;z-index:8;left:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;max-width:170px;padding:8px 10px;border:1px solid #e4c88e;border-bottom:4px solid #775135;border-radius:8px 15px 8px 15px;background:linear-gradient(#694e7a,#33243e);color:#ffedbd;font-size:12px;font-weight:800;box-shadow:inset 0 0 0 3px #ffffff08,0 4px 12px #120b25}
.academy-classes-button svg{width:32px;height:32px;flex:none}
.academy-app[data-scene=home] .academy-body{padding-bottom:85px}
.academy-classes-help{width:min(620px,90vw);height:min(400px,75dvh);padding:24px;border:2px solid #d8b77a;border-radius:12px 24px;background:linear-gradient(135deg,#483253,#21182f);color:#fff0c2;box-shadow:inset 0 0 0 5px #251a33,0 20px 80px #0009}
.academy-classes-help::backdrop{background:#100b22c9}
.academy-classes-help h2{font:700 25px Georgia;margin:0 0 20px}
.academy-classes-help button{position:absolute;top:20px;right:20px;padding:8px 14px;background:#654773;color:#ffe8b5;border:1px solid #bba06b;border-radius:8px}
.academy-class-passive{--passive-top:#285871;--passive-base:#19394d;position:relative;display:flex;align-items:center;gap:16px;max-width:800px;margin:20px auto 28px;padding:18px 22px;background:linear-gradient(115deg,var(--passive-top),var(--passive-base));border:1px solid var(--element);border-bottom:4px solid #1e172c;border-radius:8px 24px 8px 24px;box-shadow:inset 0 0 0 4px #ffffff07,0 8px 20px #100b2533}
.academy-class-passive[data-school=fire]{--passive-top:#713c2e;--passive-base:#3e202b}.academy-class-passive[data-school=earth]{--passive-top:#55563b;--passive-base:#2c3025}.academy-class-passive[data-school=wind]{--passive-top:#3d6265;--passive-base:#203a40}
.academy-passive-seal{width:64px;flex:none;color:var(--element)}.academy-passive-seal svg{width:100%;height:auto}
.academy-class-passive small{color:var(--element);font-size:11px;letter-spacing:.03em}.academy-app .academy-class-passive h2{font:700 24px Georgia;color:#fff0c2;margin:5px 0}.academy-app .academy-class-passive p{color:#f1e7ed;font-size:14px;line-height:1.5;margin:8px 0}
@media(max-height:500px),(max-width:700px){.academy-app .academy-classes-button{bottom:70px;left:10px;padding:5px 8px;font-size:10px;max-width:145px}.academy-classes-button svg{width:26px;height:26px}.academy-class-passive{gap:10px;padding:10px 14px;margin:12px auto 22px}.academy-passive-seal{width:40px}.academy-app .academy-class-passive h2{font-size:18px}.academy-app .academy-class-passive p{font-size:12px}.academy-class-passive small{font-size:9px}.academy-classes-help h2{font-size:19px;max-width:65%}}

/* Prominent help anchored outside the portal scroll area. */
.academy-app .academy-classes-button{left:auto;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));max-width:260px;min-height:68px;padding:12px 18px;gap:12px;font-size:17px}
.academy-classes-button svg{width:46px;height:46px}
@media(max-height:500px),(max-width:700px){.academy-app .academy-classes-button{left:auto;right:max(12px,env(safe-area-inset-right));bottom:72px;max-width:225px;min-height:54px;padding:8px 12px;gap:9px;font-size:14px}.academy-classes-button svg{width:36px;height:36px}}

.academy-spell-leaf{display:flex;flex-direction:column;align-items:center;min-width:0;gap:8px}.academy-spell-leaf>.academy-spell{width:100%;flex:1}
.academy-app .academy-variants-button{display:block;min-height:38px;padding:7px 16px;border:1px solid var(--element,#c6a2ff);border-bottom:3px solid #34233f;border-radius:6px 13px 6px 13px;background:linear-gradient(120deg,color-mix(in srgb,var(--element,#c6a2ff) 22%,#49344f),#2b203c);color:#ffedc0;font-weight:800;font-size:12px;box-shadow:inset 0 0 0 2px #ffefb50c}
.academy-variants-button:before{content:'⑂';margin-right:8px;color:var(--element,#d9bded);font-size:18px}.academy-variants-empty{max-width:650px;margin:25px auto;padding:26px;text-align:center;border:1px solid var(--element);border-radius:12px 24px;background:linear-gradient(135deg,#493653,#211b30)}
@media(max-height:500px){.academy-spell-leaf{gap:3px}.academy-app .academy-variants-button{min-height:30px;padding:4px 10px;font-size:10px}.academy-variants-button:before{font-size:14px}.academy-variants-empty{margin:8px auto;padding:14px}}

.academy-variant-book{width:100%;min-height:430px;position:relative}
.academy-variant-book>h1{position:relative;z-index:1;text-align:center;color:#fff0c4}
.academy-variant-blank-pages{display:grid;grid-template-columns:1fr 1fr;gap:40px;min-height:280px;position:relative;z-index:1}
@media(max-height:500px){.academy-variant-book{min-height:210px}.academy-variant-blank-pages{min-height:135px}}

.academy-shell[data-settings-open=true] *,.academy-shell[data-settings-open=true] *::before,.academy-shell[data-settings-open=true] *::after{animation-play-state:paused!important}

/* Keep the passive and all four books together using the available screen height. */
.academy-app[data-scene=subject] .academy-body{display:flex;flex-direction:column;gap:8px;padding:10px 18px;min-height:0;overflow:auto}
.academy-app[data-scene=subject] .academy-body>h1{flex:none;margin:0;font-size:25px;line-height:1.15}
.academy-app[data-scene=subject] .academy-class-passive{flex:none;width:100%;max-width:950px;margin:0 auto;padding:8px 14px;gap:10px;border-bottom-width:2px;border-radius:8px 16px}
.academy-app[data-scene=subject] .academy-passive-seal{width:36px}
.academy-app[data-scene=subject] .academy-class-passive>div:last-child{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;min-width:0;width:100%}
.academy-app[data-scene=subject] .academy-class-passive h2{font-size:17px;margin:0;text-align:left;grid-column:1;grid-row:2}
.academy-app[data-scene=subject] .academy-class-passive small{font-size:9px;line-height:1.2}
.academy-app[data-scene=subject] .academy-class-passive small:last-child{grid-column:2;grid-row:1;text-align:right}
.academy-app[data-scene=subject] .academy-class-passive p{grid-column:2;grid-row:2;font-size:12px;line-height:1.35;margin:0;text-align:left}
.academy-app[data-scene=subject] .academy-types{flex:1;min-height:140px;width:100%;max-width:1050px;margin:0 auto;padding:0 12px;container-type:size;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:center;justify-items:center}
.academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100cqh - 42px)*.76923));min-width:0}
.academy-app[data-scene=subject] .academy-book-berth>.academy-type{width:100%;height:auto;max-height:none;aspect-ratio:200/260}
.academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{position:relative;left:-10%;width:120%;height:42px;margin-top:-6px;aspect-ratio:auto}
.academy-app[data-scene=subject] .academy-book-perch img{height:100%!important;width:100%!important;object-fit:contain}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-body{padding:3px 14px;gap:4px}.academy-app[data-scene=subject] .academy-body>h1{font-size:18px;line-height:21px}.academy-app[data-scene=subject] .academy-class-passive{padding:5px 9px;gap:7px}.academy-app[data-scene=subject] .academy-passive-seal{width:26px}.academy-app[data-scene=subject] .academy-class-passive h2{font-size:13px}.academy-app[data-scene=subject] .academy-class-passive p{font-size:11px;line-height:1.25}.academy-app[data-scene=subject] .academy-class-passive small{font-size:8px}.academy-app[data-scene=subject] .academy-types{min-height:110px;gap:12px}.academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100cqh - 28px)*.76923))}.academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{height:28px;margin-top:-4px}}
@media(max-width:550px){.academy-app[data-scene=subject] .academy-class-passive>div:last-child{display:block}.academy-app[data-scene=subject] .academy-class-passive p{margin-top:3px}.academy-app[data-scene=subject] .academy-class-passive small:last-child{display:block;margin-top:3px;text-align:left}}

/* Give the elemental platforms room beneath the raised books. */
.academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100cqh - 82px)*.76923));transform:translateY(-5px)}
.academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{left:-20%;width:140%;height:82px;margin-top:-3px}
@media(max-height:500px){.academy-app[data-scene=subject] .academy-book-berth{width:min(100%,calc((100cqh - 52px)*.76923));transform:translateY(-3px)}.academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{left:-20%;width:140%;height:52px;margin-top:-2px}}

.academy-app[data-scene=subject] .academy-book-perch img{object-fit:contain;transform:scaleX(1.65)}

.academy-app[data-scene=subject] .academy-book-berth>.academy-book-perch{overflow:hidden}

.academy-variant-demo{width:100%;height:auto;overflow:hidden;border-radius:12px;margin-top:12px}.academy-variant-prerequisite{display:block;color:#f3cfad;margin-top:12px}.academy-variants article>p{font-size:13px;line-height:1.4}.academy-origin button{grid-column:1/-1}

/* Elemental branch conduits: equipped variants glow fully; study reveals energy along unfinished branches. */
.academy-app[data-scene=variants] .energy-idle{stroke:var(--element);stroke-width:4;opacity:.28}
.academy-app[data-scene=variants] .energy-glow{stroke-width:12;opacity:.42;filter:blur(3px)}
.academy-app[data-scene=variants] .energy-core{stroke-width:5}
.academy-app[data-scene=variants] .energy-flow{stroke:#fff1cc;stroke-width:2;filter:none}
.academy-app[data-school=water] .energy-flow{stroke:#e2fbff;stroke-dasharray:14 10;animation-duration:2.8s}
.academy-app[data-school=fire] .energy-flow{stroke:#ffe5a1;stroke-dasharray:2 7 6 10;animation-duration:1.6s}
.academy-app[data-school=earth] .energy-core{stroke-dasharray:12 2;stroke-linecap:square}
.academy-app[data-school=earth] .energy-flow{stroke:#fff0bd;stroke-dasharray:1 17;animation-duration:4s}
.academy-app[data-school=wind] .energy-flow{stroke:#effff8;stroke-dasharray:20 7 3 7;animation-duration:2s}
.academy-app[data-scene=variants] .academy-variants article[data-selected=true]{border-color:var(--element);box-shadow:inset 0 0 0 4px #3b2e48,0 6px 0 #20152d,0 0 22px color-mix(in srgb,var(--element) 40%,transparent)}
.academy-app[data-scene=variants] .academy-variants article:before{background:color-mix(in srgb,var(--element) 30%,#251b35);box-shadow:none}
.academy-app[data-scene=variants] .academy-variants article[data-selected=true]:before{background:#fff4ce;box-shadow:0 0 14px var(--element)}
@media(prefers-reduced-motion:reduce){.academy-energy .energy-flow{animation:none}}
html[data-motion=gentle] .academy-energy .energy-flow{animation:none}

/* Cover icons stay centered and readable as the shelf adapts to screen height. */
.academy-app[data-scene=subject] .academy-book-berth .academy-book-content{inset:14% 17% 14% 17%;align-items:center;justify-content:center;gap:3px}
.academy-app[data-scene=subject] .academy-book-berth .academy-book-content .academy-book-icon{width:clamp(30px,40cqw,84px);height:clamp(30px,40cqw,84px);margin-inline:auto;align-self:center;flex:0 0 auto}
.academy-app[data-scene=subject] .academy-book-berth .academy-book-icon :is(img,svg){display:block;margin:auto;object-fit:contain;transform:none}

/* Illustrated, concise class handbook. */
.academy-classes-help{width:min(880px,94vw);height:fit-content;min-height:0;max-height:92dvh;padding:22px;overflow:auto;background:radial-gradient(ellipse at 50% 0%,#78579055,transparent 70%),linear-gradient(135deg,#40304e,#21182f)}
.academy-classes-help h2{padding-right:80px;margin:0 0 20px;max-width:none}
.academy-classes-lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.academy-classes-lesson{padding:12px 13px 17px;border:1px solid #cbb17b66;border-radius:10px 18px;background:linear-gradient(#60486555,#20172f88);box-shadow:inset 0 0 0 3px #20182b55;text-align:center}
.academy-classes-lesson img{display:block;width:100%;height:120px;object-fit:contain;margin:0 auto 8px}
.academy-classes-lesson h3{font:700 18px Georgia,serif;color:#ffe7ab;margin:0 0 10px}
.academy-classes-lesson p{font:14px/1.5 system-ui,sans-serif;color:#e4d7eb;margin:0}
@media(max-height:500px){.academy-classes-help{padding:15px;max-height:94dvh}.academy-classes-help h2{font-size:21px;margin-bottom:10px}.academy-classes-help button{top:12px;right:15px}.academy-classes-lesson{padding:6px 10px 12px}.academy-classes-lesson img{height:86px;margin-bottom:4px}.academy-classes-lesson h3{font-size:16px;margin-bottom:6px}.academy-classes-lesson p{font-size:12px;line-height:1.4}}
@media(max-width:540px) and (min-height:501px){.academy-classes-lessons{grid-template-columns:1fr}.academy-classes-lesson img{height:90px}}

.academy-app .academy-xp-grant{flex:none;border:1px solid #d4b67d;border-bottom:3px solid #715438;border-radius:8px 14px;background:linear-gradient(#665071,#382a48);color:#ffe3a7;font:700 13px Georgia,serif;padding:8px 12px;white-space:nowrap}.academy-app .academy-xp-grant:disabled{opacity:.45;cursor:default}@media(max-height:500px),(max-width:700px){.academy-app .academy-xp-grant{font-size:11px;padding:6px 8px}}

/* Phone spellbook help belongs beside Settings, clear of the class portals. */
.academy-app .academy-header .academy-classes-button.academy-mobile-help{position:static;inset:auto;flex:0 0 auto;min-height:36px;max-width:none;height:36px;padding:4px 9px;gap:5px;font-size:11px;line-height:1.1;border-bottom-width:3px;border-radius:9px;box-shadow:inset 0 0 0 2px #ffffff08,0 2px 5px #120b25}
.academy-mobile-help svg{width:23px;height:23px}
@media(max-width:600px){.academy-header:has(.academy-mobile-help){gap:6px;padding-inline:10px}.academy-header>strong:has(~.academy-mobile-help),.academy-header>.academy-mobile-help~strong{font-size:15px}.academy-header>small:has(~.academy-mobile-help),.academy-header>.academy-mobile-help~small{display:none}.academy-header>strong:has(~.academy-mobile-help):before,.academy-header>.academy-mobile-help~strong:before{display:none}.academy-app .academy-header .academy-mobile-help{font-size:10px;padding-inline:6px;max-width:130px}}

/* Paired sealed destinations beneath the four elemental portals. */
.academy-app .academy-sealed-portal{grid-column:2;width:100%;justify-self:stretch}
.academy-app .academy-sealed-observatory{grid-column:3}

/* Match the shattered portal silhouette, not just its image container. */
.academy-sealed-observatory .academy-portal img{transform:scale(1.1);transform-origin:50% 100%}

/* Cross-class study: one visual choice, exact speed, no surprise passive switch. */
.academy-cross-study{position:fixed;inset:0;margin:auto;min-height:0;height:fit-content;overflow-x:hidden;width:min(600px,94vw);max-height:94dvh;box-sizing:border-box;padding:20px 26px 18px;overflow:auto;border:2px solid #e9cd83;border-radius:28px;background:radial-gradient(ellipse at 50% 0,#624080 0,transparent 65%),#221a36;color:#fff0c1;text-align:center;box-shadow:0 16px 70px #09051eb3,0 0 28px #d6b47635}
.academy-cross-study::backdrop{background:#100a24c9;backdrop-filter:blur(5px)}
.academy-cross-study .cross-study-close{position:absolute;right:12px;top:10px;width:40px;height:40px;min-width:0;padding:0;border-radius:50%;font:26px sans-serif}
.cross-study-hero{display:flex;align-items:center;justify-content:center;gap:24px;height:102px;pointer-events:none}.cross-study-hero>i{font-style:normal;color:#fcdd8b;font-size:26px;animation:cross-star 2.5s ease-in-out infinite alternate}.cross-study-hero>i:last-child{animation-delay:-1s}
.cross-study-seal{width:94px;height:94px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--element);background:#171227;box-shadow:0 0 30px color-mix(in srgb,var(--element) 35%,transparent)}.cross-study-seal img,.cross-study-seal svg{width:85%;height:85%;object-fit:contain}
.academy-cross-study h2{font-size:clamp(23px,4vw,31px);margin:8px 0}.academy-cross-study p{margin:0 0 16px;color:#ded0ed;font:16px system-ui}
.cross-study-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.academy-cross-study .cross-study-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #ab93c6;border-radius:20px;padding:14px 9px;background:linear-gradient(145deg,#4a365e,#29213d);color:#fff0c1;white-space:normal;min-width:0;transition:transform .18s,box-shadow .18s}.academy-cross-study .cross-study-fast{border:2px solid #f5db96;background:linear-gradient(145deg,#594837,#272c31);box-shadow:0 0 18px #fcdd8b1c}.cross-study-choice:hover{transform:translateY(-3px);box-shadow:0 5px 20px #0005}.cross-study-choice:focus-visible{outline:3px solid #fff;outline-offset:3px}.cross-study-choice strong{font-size:21px}.cross-study-choice>span:not(.cross-study-element):not(.cross-study-speed){font:14px system-ui;color:#e0d5ef}.cross-study-choice small{font:12px system-ui;color:#d8cce5}.cross-study-choice b{font:700 18px system-ui}.cross-study-element{height:46px;width:46px;color:var(--school-color)}.cross-study-element svg{width:100%;height:100%}.cross-study-speed{display:flex;gap:4px;margin:7px 0 2px}.cross-study-speed i{width:29px;height:9px;border-radius:3px;background:#151223}.cross-study-speed i[data-lit=true]{background:#fcdd8b;box-shadow:0 0 7px #fcdd8b70}.cross-study-reassurance{display:block;margin-top:15px;color:#c9bcda;font:13px system-ui}
@keyframes cross-star{to{transform:translateY(-6px) rotate(18deg);opacity:.6}}
@media(max-height:500px){.academy-cross-study{padding:10px 22px;width:min(620px,94vw)}.cross-study-hero{height:54px}.cross-study-seal{width:52px;height:52px}.academy-cross-study h2{margin:4px 0;font-size:25px}.academy-cross-study p{margin-bottom:8px;font-size:14px}.academy-cross-study .cross-study-choice{padding:9px;gap:3px}.cross-study-element{width:32px;height:32px}.cross-study-reassurance{margin-top:8px}.cross-study-speed{margin:3px 0}}
@media(prefers-reduced-motion:reduce){.cross-study-hero>i{animation:none}.cross-study-choice{transition:none}}

.academy-cross-study::after{display:none}

/* Controller wand hover has no native :hover state. Match the book interaction. */
body #lobby button.engraved-spellbook.controller-hover .home-tome-cover{transform:rotateY(-23deg) rotate(-1deg)}
body #lobby button.engraved-spellbook.controller-hover .home-tome{transform:translateY(-2px);filter:drop-shadow(0 7px 5px #13091caa)}
body #lobby button.engraved-spellbook.controller-hover .home-tome-glow{opacity:.2}
@media(prefers-reduced-motion:reduce){body #lobby button.engraved-spellbook.controller-hover .home-tome,body #lobby button.engraved-spellbook.controller-hover .home-tome-cover{transform:none!important}}

/* Verdant joins the second row as a selectable school. */
.academy-verdant-choice{grid-column:2;--class-top:#39794b;--class-base:#193e31}
.academy-verdant-portal .academy-portal{position:relative;isolation:isolate}
.academy-verdant-portal .academy-portal img{display:block;width:100%;height:100%;object-fit:contain}
.verdant-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.verdant-petals i{position:absolute;left:var(--petal-x);top:var(--petal-y);width:clamp(4px,.65vw,8px);height:clamp(6px,.9vw,11px);border-radius:75% 15% 70% 30%;background:linear-gradient(135deg,#ff9b83,#ed3651 45%,#a70f34);opacity:0}
.academy-verdant-portal[data-portal-detailed=true] .verdant-petals i{animation:verdant-petal-fall var(--petal-duration) linear infinite;animation-delay:var(--petal-delay)}
@keyframes verdant-petal-fall{0%{opacity:0;transform:translate(0,-6px) rotate(-25deg)}12%{opacity:.95}50%{transform:translate(var(--petal-drift),42px) rotate(100deg)}80%{opacity:.85}100%{opacity:0;transform:translate(0,110px) rotate(230deg)}}
.academy-verdant-empty{max-width:560px;margin:18px auto;text-align:center;padding:20px;border:1px solid #c8b16955;border-radius:18px;background:radial-gradient(ellipse at top,#39794b55,#21182f)}
.academy-verdant-empty>img{width:150px;height:180px;object-fit:contain}.academy-verdant-empty>p{line-height:1.5}
@media(max-height:500px){.academy-verdant-empty{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:6px 18px;max-width:600px;padding:10px;margin:8px auto}.academy-verdant-empty>img{grid-row:1/4;width:100px;height:120px}.academy-verdant-empty>h2,.academy-verdant-empty>p{margin:0}.academy-verdant-empty>button{justify-self:center}.verdant-petals i{width:4px;height:6px}}
@media(prefers-reduced-motion:reduce){.verdant-petals{display:none}}html[data-motion=gentle] .verdant-petals{display:none}

/* Verdant's four botanical spellbooks use the shared responsive shelf. */
.academy-app[data-school=verdant]{--realm-art:url('art/academy-realm-verdant.svg');--realm-light:#ead7a1;--realm-dark:#392817}
.academy-class-passive[data-school=verdant]{--passive-top:#396047;--passive-base:#19382d}
.verdant-book-rose{transform-origin:0 0;animation:verdant-book-bloom 6s ease-in-out infinite}
.verdant-book-petal{opacity:0;animation:verdant-book-petals 6s linear infinite;pointer-events:none}.verdant-book-petal-late{animation-delay:-3s}
@keyframes verdant-book-bloom{0%,100%{transform:scale(.88) rotate(-3deg)}50%{transform:scale(1.06) rotate(3deg)}}
@keyframes verdant-book-petals{0%{opacity:0;translate:0 -5px}15%,70%{opacity:.9}100%{opacity:0;translate:10px 70px}}
.academy-type:hover .verdant-book-rose,.academy-type:focus-visible .verdant-book-rose{filter:drop-shadow(0 0 4px #f85979aa)}
@media(prefers-reduced-motion:reduce){.verdant-book-rose,.verdant-book-petal{animation:none}.verdant-book-petal{display:none}}
html[data-motion=gentle] :is(.verdant-book-rose,.verdant-book-petal){animation:none}html[data-motion=gentle] .verdant-book-petal{display:none}

/* Overgrowth lives along the portal hall margins and never intercepts controls. */
.academy-app[data-scene=home] .academy-body{position:relative;isolation:isolate}
.academy-app[data-scene=home] .academy-body::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:url('art/academy-overgrowth-edge.svg') left top/100px 350px no-repeat,url('art/academy-overgrowth-edge.svg') right bottom/85px 310px no-repeat;opacity:.9}
.academy-app[data-scene=home] .academy-portal-choice{position:relative}
.academy-app[data-scene=home] .academy-portal-choice::after{content:'';position:absolute;left:-9px;top:12%;width:42px;height:68%;background:url('art/academy-overgrowth-edge.svg') left bottom/contain no-repeat;pointer-events:none;z-index:2;opacity:.85}
.academy-app[data-scene=home] .academy-portal-choice:nth-child(even)::after{left:auto;right:-9px;transform:scaleX(-1)}
@media(max-height:500px){.academy-app[data-scene=home] .academy-body::before{background-size:48px 220px,42px 180px;opacity:.75}.academy-app[data-scene=home] .academy-portal-choice::after{width:24px;left:-5px}.academy-app[data-scene=home] .academy-portal-choice:nth-child(even)::after{left:auto;right:-5px}}

/* Short screens: the handbook title row is as tall as its Close button so the button never sits on the third lesson card. */
@media(max-height:500px){.academy-classes-help h2{display:flex;align-items:center;min-height:44px;margin:0 0 8px!important;box-sizing:border-box}.academy-classes-help>button{top:15px!important}}

/* How Classes Work: a short animated picture book (one idea per page). */
html body dialog.academy-howto{box-sizing:border-box;position:fixed;inset:0;width:min(960px,calc(100vw - 28px));max-width:none;height:fit-content;max-height:calc(100dvh - 24px);margin:auto;padding:34px 38px;overflow:hidden;border:1px solid #d4b97b;border-radius:26px;color:#f4e5c0;background:radial-gradient(ellipse at 24% 40%,#8a62b066,transparent 58%),linear-gradient(135deg,#382646,#20192e);box-shadow:inset 0 0 0 5px #22182f,inset 0 0 0 6px #ad8b6655,0 24px 70px #0009;font:15px/1.4 system-ui}
html body dialog.academy-howto[open]{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.academy-howto::backdrop{background:#110d20c4;backdrop-filter:blur(5px)}
.academy-howto :focus-visible{outline:2px solid #f1d79e;outline-offset:3px}
html body .academy-howto .ach-close{position:absolute;right:12px;top:10px;z-index:3;width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:#e9d7f3;font:30px/1 system-ui;cursor:pointer}
html body .academy-howto .ach-close:hover{background:#ffffff14}
.ach-stage{position:relative;min-width:0;aspect-ratio:5/3;border-radius:22px;background:radial-gradient(ellipse at 50% 55%,#5a3f7266,#1c142a 78%);box-shadow:inset 0 0 0 1px #c0a27155,inset 0 0 40px #0006;overflow:hidden;touch-action:pan-y;user-select:none}
.ach-scene{position:absolute;inset:4% 3%}.ach-scene svg{display:block;width:100%;height:100%}
.ach-motes i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe6a8;box-shadow:0 0 8px #ffd687;opacity:.5;animation:ach-mote 5s ease-in-out calc(var(--i)*-.6s) infinite}
.ach-copy{min-width:0;display:flex;flex-direction:column;gap:18px}
.ach-pips{display:flex;gap:8px}
html body .academy-howto .ach-pip{width:12px;height:12px;min-height:0;padding:0;border:0;border-radius:6px;background:#6c557d;box-shadow:none;cursor:pointer;transition:width .25s,background .25s}
html body .academy-howto .ach-pip[aria-current=true]{width:34px;background:linear-gradient(90deg,#f7dc95,#d1a74f)}
.ach-kicker{display:block;font:800 12px system-ui;letter-spacing:.14em;color:#e6cf97}
.academy-howto .ach-title{margin:8px 0 12px;padding:0;font:700 clamp(30px,3.4vw,42px)/1.05 Georgia,serif;color:#ffe8af;text-shadow:0 3px #140c22;max-width:none}
.ach-text{margin:0;font:18px/1.45 system-ui;color:#eadcf2}
.ach-tip{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:7px 13px;border-radius:999px;background:#ffd6871f;border:1px solid #d9b96c66;color:#ffe2a0;font:700 13px system-ui}.ach-tip::before{content:'✦'}.ach-tip[hidden]{display:none}
.ach-nav{display:flex;align-items:center;gap:14px;margin-top:6px}
html body .academy-howto .ach-next{flex:1;min-height:62px;padding:10px 22px;border:2px solid #fff0c2;border-bottom:6px solid #8a6326;border-radius:18px;background:linear-gradient(#f7dc95,#d1a74f);color:#3a2610;font:900 24px/1 system-ui;box-shadow:0 8px 24px #d1a74f44;cursor:pointer;transition:transform .15s,filter .15s}
html body .academy-howto .ach-next:hover{transform:translateY(-2px);filter:brightness(1.06)}html body .academy-howto .ach-next:active{transform:translateY(2px);border-bottom-width:3px}
html body .academy-howto .ach-back{min-height:0;padding:8px 6px;border:0;background:none;box-shadow:none;color:#c9b6d8;font:700 16px system-ui;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html body .academy-howto .ach-back[hidden]{display:none}
.ach-enter{animation:ach-in .42s cubic-bezier(.2,.8,.25,1)}.academy-howto[data-dir=prev] .ach-enter{animation-name:ach-in-back}
.ach-picker{animation:ach-pick 6s cubic-bezier(.6,0,.3,1) infinite}
.ach-star{transform-box:fill-box;transform-origin:center;animation:ach-twinkle 1.6s ease-in-out infinite}
.ach-book{animation:ach-bob 3s ease-in-out infinite}
.ach-fill{transform-box:fill-box;transform-origin:left;animation:ach-fill 4s ease-in-out infinite}
.ach-burst{transform-box:fill-box;transform-origin:center;animation:ach-burst 4s ease-out infinite}
.ach-spell{animation:ach-drop 3.6s cubic-bezier(.5,0,.3,1) infinite}.ach-trail{animation:ach-trail 3.6s ease-in infinite}
.ach-slot{animation:ach-slot 3.6s ease-out infinite}
.ach-flow{animation:ach-flow 1.2s linear infinite}
.ach-pick-a{animation:ach-glow 4s ease-in-out infinite}.ach-pick-b{animation:ach-glow 4s ease-in-out -2s infinite}
@keyframes ach-in{from{opacity:0;transform:translateX(28px) scale(.98)}}
@keyframes ach-in-back{from{opacity:0;transform:translateX(-28px) scale(.98)}}
@keyframes ach-mote{50%{transform:translateY(-14px);opacity:.9}}
@keyframes ach-pick{0%,18%{transform:translateX(0)}25%,43%{transform:translateX(70px)}50%,68%{transform:translateX(140px)}75%,93%{transform:translateX(210px)}100%{transform:translateX(0)}}
@keyframes ach-twinkle{50%{transform:scale(.7) rotate(20deg);opacity:.7}}
@keyframes ach-bob{50%{transform:translateY(-5px)}}
@keyframes ach-fill{0%{transform:scaleX(.04)}70%,100%{transform:scaleX(1)}}
@keyframes ach-burst{0%,66%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
@keyframes ach-drop{0%{transform:translateY(-110px);opacity:0}12%{opacity:1}55%{transform:translateY(0)}62%{transform:translateY(-6px)}68%,100%{transform:translateY(0)}}
@keyframes ach-trail{0%,10%{opacity:0}30%{opacity:.8}55%,100%{opacity:0}}
@keyframes ach-slot{0%,52%{stroke:#826c9d;fill:#2c213c}60%{stroke:#ffe6a8;fill:#5a3a3f}100%{stroke:#ffb27a;fill:#3d2a3a}}
@keyframes ach-flow{to{stroke-dashoffset:-24}}
@keyframes ach-glow{0%,100%{stroke:#b99a69}50%{stroke:#bdf9e5;fill:#3f3352}}
html[data-motion=gentle] .academy-howto *{animation:none!important}
@media(prefers-reduced-motion:reduce){.academy-howto *{animation:none!important}}
@media(max-height:500px){html body dialog.academy-howto{width:min(860px,calc(100vw - 20px));max-height:calc(100dvh - 16px);padding:18px 22px}html body dialog.academy-howto[open]{gap:22px;grid-template-columns:1fr 1fr}.ach-stage{aspect-ratio:auto;height:min(270px,calc(100dvh - 60px))}.ach-copy{gap:10px}.academy-howto .ach-title{font-size:27px;margin:4px 0 6px}.ach-text{font-size:15px}.ach-tip{margin-top:8px;font-size:12px;padding:5px 10px}html body .academy-howto .ach-next{min-height:50px;font-size:20px;border-radius:14px}html body .academy-howto .ach-back{font-size:14px}.ach-kicker{font-size:11px}}
@media(max-width:600px) and (min-height:501px){html body dialog.academy-howto[open]{grid-template-columns:1fr;gap:16px}}

/* Third sealed teaser: a plain sealed portal. Hover or tap plays a stork dropping off a mystery bundle. */
.academy-app .academy-sealed-delivery{grid-column:4}
.academy-sealed-delivery:focus-visible{outline:2px solid #c9bfe0;outline-offset:4px}
.academy-sealed-delivery .academy-portal svg{display:block;width:100%;height:100%;overflow:hidden}
.sealed-stork-art .ss-stork{opacity:0;transform:translate(-60px,40px)}
.sealed-stork-art .ss-bundle{opacity:0;transform:translate(138px,186px)}
.sealed-stork-art :is(.ss-wing,.ss-bundle-body){transform-box:fill-box}
.sealed-stork-art .ss-wing{transform-origin:100% 100%}
.sealed-stork-art .ss-bundle-body{transform-origin:50% 100%}
.sealed-stork-art .ss-seal{opacity:.75}
.sealed-stork-art .ss-mist{animation:ss-mist 6s ease-in-out infinite alternate}
.ss-delivering .sealed-stork-art .ss-stork{animation:ss-fly 3s ease-in-out forwards}
.ss-delivering .sealed-stork-art .ss-wing{animation:ss-flap .3s ease-in-out infinite alternate}
.ss-delivering .sealed-stork-art .ss-cargo{animation:ss-cargo 3s step-end forwards}
.ss-delivering .sealed-stork-art .ss-bundle{animation:ss-drop 3s forwards}
.ss-delivering .sealed-stork-art .ss-bundle-body{animation:ss-wiggle 2.8s 3s ease-in-out infinite}
.ss-delivering .sealed-stork-art .ss-seal{animation:ss-seal 3s forwards}
.ss-delivering .sealed-stork-art .ss-orb-glow{animation:ss-orb 3s forwards}
.ss-delivered .sealed-stork-art .ss-bundle{opacity:1}
@keyframes ss-mist{from{opacity:.55}to{opacity:1}}
@keyframes ss-fly{0%{opacity:1;transform:translate(-60px,40px)}40%{transform:translate(97px,137px)}58%{transform:translate(97px,133px)}96%{opacity:1}100%{opacity:0;transform:translate(250px,-40px)}}
@keyframes ss-flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
@keyframes ss-cargo{0%{opacity:1}52%,100%{opacity:0}}
@keyframes ss-drop{0%,51%{opacity:0;transform:translate(138px,156px)}52%{opacity:1;transform:translate(138px,156px);animation-timing-function:cubic-bezier(.5,0,1,1)}60%{transform:translate(138px,186px)}63%{transform:translate(138px,182px)}66%,100%{opacity:1;transform:translate(138px,186px)}}
@keyframes ss-wiggle{0%,70%,100%{transform:none}74%{transform:translateY(-3px) rotate(-12deg)}78%{transform:rotate(10deg)}82%{transform:translateY(-2px) rotate(-7deg)}86%{transform:rotate(3deg)}}
@keyframes ss-seal{0%,64%{opacity:.75;filter:none}74%{opacity:1;filter:drop-shadow(0 0 4px #e8deff)}100%{opacity:.85;filter:none}}
@keyframes ss-orb{0%,64%{opacity:.08}74%{opacity:.4}100%{opacity:.12}}

/* Moving-day teaser runes on the sealed delivery portal: lit ones glow softly. */
.sealed-stork-art .ss-rune-lit{animation:ss-rune 3.2s ease-in-out infinite alternate}
@keyframes ss-rune{from{opacity:.75}to{opacity:1;filter:drop-shadow(0 0 3px #f2c66b)}}
html[data-motion=gentle] .sealed-stork-art .ss-rune-lit{animation:none}
@media(prefers-reduced-motion:reduce){.sealed-stork-art .ss-rune-lit{animation:none}}

/* Hand-built Water, Fire, Earth and Wind portals (scripts/academy-element-portals.py), animated like Verdant and Storm. */
.academy-hand-portal .academy-portal{position:relative;isolation:isolate}
.academy-hand-portal .academy-portal img{display:block;width:100%;height:100%;object-fit:contain}
.portal-particles{position:absolute;inset:4% 10% 24%;overflow:hidden;pointer-events:none;z-index:1}
.portal-particles i{position:absolute;left:var(--px);top:var(--py);opacity:0}
.portal-particles[data-kind=fire] i{top:auto;bottom:calc(var(--py)*.4);width:clamp(2px,.35vw,4px);aspect-ratio:1;border-radius:50%;background:#ffe08a;box-shadow:0 0 5px 1px #ff8a3a}
.portal-particles[data-kind=water] i{top:auto;bottom:calc(var(--py)*.3);width:clamp(4px,.55vw,7px);aspect-ratio:1;border-radius:50%;border:1px solid #e9fffbcc;background:radial-gradient(circle at 35% 30%,#ffffffcc 0 18%,#89e0ff22 40%)}
.portal-particles[data-kind=earth] i{width:clamp(3px,.45vw,6px);aspect-ratio:1;background:#f3e6ff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 2px #b48cf0)}.portal-particles[data-kind=earth] i:nth-child(odd){background:#e5ffd6;filter:drop-shadow(0 0 2px #6fd39a)}
.portal-particles[data-kind=wind] i{left:calc(var(--px)*.4);width:clamp(6px,.8vw,10px);height:clamp(2px,.3vw,4px);border-radius:50% 50% 50% 50%/100% 100% 0 0;background:linear-gradient(90deg,#ffffff,#d4ffec);box-shadow:0 0 0 .5px #7fbfb4}
.academy-hand-portal[data-portal-detailed=true] .portal-particles[data-kind=fire] i{animation:portal-ember var(--pt) linear var(--pd) infinite}
.academy-hand-portal[data-portal-detailed=true] .portal-particles[data-kind=water] i{animation:portal-bubble var(--pt) ease-in var(--pd) infinite}
.academy-hand-portal[data-portal-detailed=true] .portal-particles[data-kind=earth] i{animation:portal-glitter var(--pt) ease-in-out var(--pd) infinite}
.academy-hand-portal[data-portal-detailed=true] .portal-particles[data-kind=wind] i{animation:portal-leaf calc(var(--pt)*.8) linear var(--pd) infinite}
@keyframes portal-ember{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}60%{transform:translate(var(--pdrift),-60px) scale(.8)}100%{opacity:0;transform:translate(0,-120px) scale(.4)}}
@keyframes portal-bubble{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}35%{transform:translate(4px,-35px)}65%{transform:translate(-4px,-75px)}100%{opacity:0;transform:translate(2px,-120px)}}
@keyframes portal-glitter{0%,100%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}50%{opacity:1;transform:translate(var(--pdrift),-14px) scale(1.1) rotate(45deg)}}
@keyframes portal-leaf{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.95}50%{transform:translate(70px,var(--pdrift)) rotate(260deg)}100%{opacity:0;transform:translate(150px,-10px) rotate(560deg)}}
@media(max-height:500px){.portal-particles[data-kind] i{width:3px}}
@media(prefers-reduced-motion:reduce){.portal-particles{display:none}}html[data-motion=gentle] .portal-particles{display:none}