:root{color-scheme:dark;--gold:#d2b779;--cream:#f3e5c1;--muted:#a69d87;--line:#62523a;--class-color:#fff;font-family:Arial,'Segoe UI',sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:560px;display:flex;flex-direction:column;overflow:hidden;background:#141511;color:#e3d9bf;font-size:13px}button,select{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button,summary,select{cursor:pointer}button{color:inherit;background:none;border:0}button:disabled{opacity:.4;cursor:wait}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f1cf7c;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.toolbar{height:76px;flex:none;display:flex;align-items:center;gap:22px;padding:0 28px;background:linear-gradient(#21221ee8,#121410f5);border-bottom:1px solid #6654398c;z-index:12;box-shadow:0 2px 18px #0005}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream);font-family:'Friz Quadrata',Georgia,serif;font-size:13px;letter-spacing:1.7px;white-space:nowrap}.brand small{display:block;font-family:Arial,sans-serif;letter-spacing:1.5px;font-size:8px;color:#b6a375;margin-top:6px}.brand-mark{width:36px;height:40px;display:grid;place-items:center;border:1px solid #8a7346;background:linear-gradient(135deg,#645134,#252720 40%,#101b1e);box-shadow:inset 0 0 0 3px #1c1d16;color:#e7c16e;font-size:29px;letter-spacing:-2px;text-shadow:0 2px 3px #000}.back-button{font-size:11px;color:#b8aa8c;white-space:nowrap}.back-button:hover{color:#ffe0a0}.selectors{display:flex;gap:14px;margin-left:auto;align-items:center}.selectors label{font-size:10px;color:#b2a88e;display:flex;align-items:center;gap:8px}.selectors select,.playback select{background:#131713;color:#e8dabc;border:1px solid #756342;border-radius:2px;padding:8px 23px 8px 9px;font-size:12px}.selectors select{min-width:90px}#level-select{min-width:52px}.metal-button{padding:9px 13px;background:linear-gradient(#45453a,#22271f);border:1px solid #8b7950;box-shadow:inset 0 0 0 1px #121611,0 2px 4px #0005;color:#e4d1a1;font-size:11px;white-space:nowrap}.metal-button:hover,.metal-button[aria-pressed=true]{border-color:#d9b76b;color:#ffe0a0}.about{position:relative}.about summary{display:grid;place-items:center;list-style:none;width:24px;height:24px;border:1px solid #72644b;border-radius:50%;color:#c4ac79;font-family:'Friz Quadrata',Georgia,serif}.about summary::-webkit-details-marker{display:none}.about-content{position:absolute;right:0;top:38px;width:310px;max-height:70vh;overflow:auto;background:#151b19fa;border:1px solid #8b7853;padding:20px;font-size:12px;line-height:1.65;box-shadow:0 8px 40px #000a;color:#bfb79e}.about h2{font-family:'Friz Quadrata',Georgia,serif;font-size:19px;color:var(--gold);margin-top:0}.legal{font-size:10px;color:#8f8b7d}
main{flex:1;min-height:0}.preview-panel,#viewport{height:100%;position:relative;isolation:isolate}#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.scene-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 36%,#08110d70 100%),linear-gradient(0deg,#090d0bc9,transparent 30%)}.character-overlay{position:absolute;inset:0;pointer-events:none;z-index:3;padding:28px}.character-overlay h2{display:none;margin:0;color:#ead9aa;font-family:'Friz Quadrata',Georgia,serif;font-size:18px;font-weight:400}.comparing .character-overlay:not(.second){right:50%}.character-overlay.second{left:50%;border-left:1px solid #bda16c33}.comparing .character-overlay h2{display:block}.comparing .unit-frame{display:none}#compare-race{pointer-events:auto;background:#141b16;border:1px solid #766641;color:var(--cream);padding:5px}.target-label{position:absolute;transform:translate(-50%,-100%);font-size:12px;color:#f2d379;padding:0 7px 8px;white-space:nowrap;text-shadow:1px 1px 2px #000,-1px -1px 2px #000}.target-label::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border:1px solid #2d0b06;background:linear-gradient(#cb3426,#791f14);box-shadow:0 1px 2px #000}
.unit-frame{position:absolute;top:26px;left:29px;z-index:4;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 5px;background:linear-gradient(110deg,#141a16e6,#10130faa);border:1px solid #817052;box-shadow:inset 0 0 0 2px #292c23,0 3px 12px #0005;border-radius:34px 4px 4px 34px;min-width:205px}.unit-frame img{width:48px;height:48px;object-fit:cover;border-radius:50%;border:2px solid #8c7951;box-shadow:0 0 0 2px #151812}.unit-frame>div{flex:1;display:grid;gap:4px}.unit-frame strong{font-family:'Friz Quadrata',Georgia,serif;font-size:13px;color:#f4db9c;font-weight:400}.unit-health,.unit-resource{display:block;height:10px;border:1px solid #0b100a;box-shadow:inset 0 1px 1px #ffffff30;background:linear-gradient(#5f9e37,#244d20)}.unit-resource{height:7px;background:linear-gradient(#3b82c9,#193b80)}.unit-frame>b{position:absolute;left:38px;bottom:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:12px 'Friz Quadrata',Georgia,serif;background:#181e16;border:1px solid #8d774a;color:#f2d17f}
.camera-controls{position:absolute;top:25px;right:28px;z-index:4;display:flex;background:#131a15d9;border:1px solid #6b6249;padding:3px;box-shadow:0 3px 9px #0004}.camera-controls button{padding:7px 10px;font-size:10px;color:#9eaa98}.camera-controls .selected{background:#4c4b34;color:#f1d8a2;box-shadow:inset 0 0 0 1px #766440}.movement-controls{position:absolute;right:28px;top:72px;z-index:4;display:flex;gap:4px}.movement-controls button{padding:6px 9px;font-size:10px;color:#c2c7b6;background:#171d1780;border:1px solid transparent}.movement-controls button.selected{border-color:#9a8755;background:#333b2f;color:#e6d19a}.zoom-controls{position:absolute;right:28px;bottom:180px;z-index:4;display:grid;background:#151b16bb;border:1px solid #696345}.zoom-controls button{height:29px;width:29px;font-size:19px;color:#cfc7ab}.interaction-hint{position:absolute;left:28px;bottom:25px;margin:0;font-size:10px;color:#909c8c;z-index:3}
#choose-screen{position:absolute;z-index:5;left:clamp(28px,5vw,78px);top:50%;transform:translateY(-50%);width:350px}.section-kicker{font-size:9px;letter-spacing:2.5px;color:#bba776;display:flex;align-items:center;gap:12px;margin-bottom:15px}.section-kicker span{display:block;width:23px;height:1px;background:#887142}#choose-title{font:30px/1.14 'Friz Quadrata',Georgia,serif;color:#f2dfb0;font-weight:400;letter-spacing:-.5px;margin:0 0 10px}.choose-intro{font-size:12px;line-height:1.7;color:#adab97;margin:0 0 25px}fieldset{border:0;padding:0;margin:0 0 20px}legend{font:14px 'Friz Quadrata',Georgia,serif;color:#e2d3ad;padding:0;margin-bottom:10px}legend>span{font:9px Arial,sans-serif;color:#ad9156;display:inline-block;width:24px;vertical-align:2px}.start-classes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.start-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;color:#c1b8a1;padding:8px 2px;font-size:10px;border:1px solid #59573c;background:linear-gradient(#262d22d9,#182019ec);box-shadow:inset 0 0 0 2px #10170f;transition:background .15s,border-color .15s}.start-choice img{width:43px;height:43px;object-fit:cover;border:1px solid #8b774b;box-shadow:0 0 0 2px #11140c,0 2px 8px #0007}.start-choice:hover{border-color:#c3a365;background:#35402c}.start-choice[aria-pressed=true]{border-color:#d5b875;box-shadow:inset 0 0 0 2px #635231,0 0 16px #b2942920;color:#ffe3a2;background:linear-gradient(#5a5433,#292e21)}.start-choice[aria-pressed=true]::after{content:'◆';position:absolute;top:-6px;color:#f1d081;font-size:9px;text-shadow:0 1px 2px #000}.start-choice small{display:none}.start-races{display:grid;grid-template-columns:1fr 1fr;gap:10px}.start-races .start-choice{flex-direction:row;gap:12px;padding:7px 13px;font:13px 'Friz Quadrata',Georgia,serif}.start-races img{width:33px;height:33px;border-radius:50%}.start-levels{display:flex;gap:10px}.start-levels button{flex:1;display:flex;align-items:center;gap:12px;border:1px solid #5c5940;background:#151d15a8;box-shadow:inset 0 0 0 2px #10170f;padding:10px 12px}.start-levels strong{font:23px 'Friz Quadrata',Georgia,serif;color:#c7b279}.start-levels span{font-size:10px;color:#aaa996}.start-levels [aria-pressed=true]{border-color:#cbb276;background:#44482b99}.start-levels [aria-pressed=true] strong{color:#ffe5a9}.red-button{background:linear-gradient(#932e25,#691a13 48%,#45130e);border:1px solid #cfac62;box-shadow:inset 0 0 0 2px #34180c,inset 0 3px 4px #f7894b40,0 3px 12px #0009;text-shadow:1px 2px 2px #160900;color:#f7d896;font-family:'Friz Quadrata',Georgia,serif;font-size:16px;letter-spacing:.4px;padding:12px 20px}.red-button:hover{filter:brightness(1.18)}#begin-preview{display:flex;justify-content:center;align-items:center;gap:30px;width:100%;margin-top:24px}#begin-preview span{font-size:22px;line-height:15px}.selection-caption{position:absolute;z-index:4;left:calc(50% + 210px);bottom:36px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;text-align:center;pointer-events:none;white-space:nowrap}.selection-caption strong{font:26px 'Friz Quadrata',Georgia,serif;color:var(--class-color);text-shadow:0 2px 5px #000}.choosing .selectors,.choosing .back-button,.choosing .action-dock,.choosing .camera-controls,.choosing .movement-controls,.choosing .zoom-controls,.choosing .unit-frame,.choosing .interaction-hint{display:none}.choosing .brand{margin-right:auto}.choosing .scene-vignette{background:linear-gradient(90deg,#101a14f5 0%,#101a14c9 28%,#101a1400 67%),radial-gradient(ellipse at 70% 45%,transparent 35%,#070d09a3 100%)}
/* Loading stays inside its character panel, including side-by-side comparison. */
.loading{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(400px,calc(100% - 32px));padding:32px 24px 27px;text-align:center;background:linear-gradient(160deg,#18231ff5,#0e1715f5);border:1px solid #ad925b55;border-radius:14px;box-shadow:0 20px 70px #0006;color:#f1eadb;font-family:system-ui,sans-serif}
.loading-motif{position:relative;width:80px;height:80px;margin:0 auto 22px}
.loading-orbit{position:absolute;inset:4px;border:1px solid #c6a66a30;border-top-color:#efd295;border-right-color:#c6a66a88;border-radius:50%;animation:loading-orbit 5s linear infinite}
.loading-orbit::after{content:"";position:absolute;width:5px;height:5px;top:7px;right:7px;border-radius:50%;background:#ffe4aa;box-shadow:0 0 12px #f4ca7d}
.loading-orbit.inner{inset:14px;border-top-color:transparent;border-right-color:#e7c184aa;border-bottom-color:#c6a66a33;animation-direction:reverse;animation-duration:7s}
.loading-orbit.inner::after{display:none}
.loading-gem{position:absolute;inset:29px;transform:rotate(45deg);border:1px solid #ffe3a3;background:linear-gradient(135deg,#f7d58f,#ba8b41);box-shadow:0 0 24px #e5b45a44,inset 0 0 8px #fff3ca55;animation:loading-gem 3s ease-in-out infinite}
.loading-motif i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f4da9c;animation:loading-spark 3s ease-in-out infinite}
.loading-motif i:nth-last-child(3){left:-9px;top:42px}.loading-motif i:nth-last-child(2){right:-7px;top:18px;animation-delay:1s}.loading-motif i:last-child{right:1px;bottom:1px;animation-delay:2s}
.loading-title{font:400 26px/1.25 Georgia,serif;margin:0 0 10px;text-wrap:balance}
.loading-status{font-size:14px;line-height:1.5;color:#d7c5a2;margin:0;min-height:21px}
.loading-line{height:1px;width:64px;background:#ac8b4d66;margin:23px auto 19px}
.loading-copy{font-size:14px;line-height:1.7;color:#b7beb4;margin:0;text-wrap:balance}.loading-copy strong{display:block;color:#e8d8b6;font-weight:500;margin-top:7px}
.choosing .loading{left:calc(50% + 210px)}
.loading.switching{padding:23px 20px}.loading.switching .loading-motif{width:54px;height:54px;margin-bottom:15px}.loading.switching .loading-gem{inset:20px}.loading.switching .loading-orbit.inner{inset:11px}.loading.switching .loading-copy,.loading.switching .loading-line{display:none}
.booting .loading{position:fixed;left:50%;top:50%;max-width:calc(100vw - 32px)}
.booting #card-0{background:radial-gradient(ellipse at 50% 40%,#243029,#0d1714 75%)}
@keyframes loading-orbit{to{transform:rotate(360deg)}}
@keyframes loading-gem{0%,100%{transform:translateY(2px) rotate(45deg) scale(.9);opacity:.7}50%{transform:translateY(-2px) rotate(45deg) scale(1);opacity:1}}
@keyframes loading-spark{0%,100%{opacity:0;transform:translateY(4px)}50%{opacity:.8;transform:translateY(-4px)}}
.viewer-error{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#121b15ef;text-align:center;padding:25px}
.action-dock{position:absolute;z-index:6;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 80px);display:flex;flex-direction:column;align-items:center}.action-bar-frame{position:relative;padding:9px 12px;background:linear-gradient(#62604c,#2b3026 17%,#161b15 53%,#45473a);border:1px solid #aa925b;box-shadow:inset 0 0 0 2px #1c2219,inset 0 0 0 3px #68664c,0 8px 25px #000a}.action-bar-frame::before,.action-bar-frame::after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);font-size:18px;color:#9f8a56;text-shadow:0 2px 2px #000}.action-bar-frame::before{left:-10px}.action-bar-frame::after{right:-10px}#actions{display:grid;grid-template-columns:repeat(12,48px);gap:5px}.action-slot{width:48px;height:48px;position:relative;padding:3px;border:1px solid #8d805c;box-shadow:inset 0 0 0 2px #33372b,0 1px 2px #000;background:linear-gradient(135deg,#626754,#1b2018 40%,#4b503c);border-radius:3px}.action-slot img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid #090d08;border-radius:2px}.action-slot:hover{border-color:#f0ce7c;filter:brightness(1.13)}.action-slot.selected{outline:2px solid #e9c76c;outline-offset:1px;box-shadow:0 0 13px #eed88766,inset 0 0 0 2px #111}.action-slot .keybind{position:absolute;top:0;right:3px;color:#f8edcd;font:bold 11px Arial,sans-serif;text-shadow:1px 1px #000,-1px -1px #000,0 0 3px #000;z-index:1}.action-slot.empty{opacity:.5;background:#0a100a;border-color:#4e553f;box-shadow:inset 0 2px 8px #000;pointer-events:none}.action-slot.empty::after{content:'';inset:4px;position:absolute;border:1px solid #41493644}.slot-tooltip{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);width:230px;text-align:left;padding:13px 15px;background:#091425f5;border:1px solid #8d8059;box-shadow:0 5px 22px #000a;pointer-events:none;display:none;z-index:20}.slot-tooltip strong{display:block;color:#ffe291;font:15px 'Friz Quadrata',Georgia,serif;margin-bottom:7px}.slot-tooltip small{display:block;color:#dbd4bc;font-size:11px;line-height:1.6;white-space:normal}.action-slot:hover .slot-tooltip,.action-slot:focus-visible .slot-tooltip{display:block}.spell-detail{display:flex;align-items:center;gap:10px;margin-bottom:13px;height:17px;text-shadow:0 2px 3px #000;font-size:11px;max-width:100%;white-space:nowrap}.spell-detail strong{font-weight:400;color:#f3d998}.spell-detail span{color:#a3ae9a;font-size:10px}.bar-footer{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 4px 0;color:#b0a781;gap:12px}#bar-caption{font-size:8px;letter-spacing:1.8px}.playback{display:flex;align-items:center;gap:7px}.playback button{font-size:10px;padding:3px;color:#a8ac97}.playback button:hover,.playback button[aria-pressed=true]{color:#f2d28f}.playback select{padding:2px 4px;font-size:10px;background:none;border:0;color:#a8ac97}.playback #book-toggle{color:#e3c785;border-left:1px solid #72684b;padding-left:13px;margin-left:4px}#book-toggle>span{font-size:8px;color:#949b89;border:1px solid #555e4a;padding:2px 3px;margin-left:4px}.cast-shell{display:flex;align-items:center;position:relative;margin-bottom:13px;width:280px;filter:drop-shadow(0 2px 4px #000)}.cast-shell>img{width:30px;height:30px;border:1px solid #a68e58;box-shadow:0 0 0 2px #292e1e;margin-right:7px}.cast-progress{position:relative;flex:1;height:23px;border:1px solid #d2b873;border-radius:3px;background:#15190d;box-shadow:0 0 0 2px #303623,inset 0 0 0 1px #0c1109;overflow:hidden}.cast-progress>i{display:block;position:absolute;inset:2px;background:linear-gradient(#fbe291,#d8ad32 24%,#b68815 63%,#c7982a);box-shadow:inset 0 1px 1px #ffffcf;transform-origin:left;transform:scaleX(0)}.cast-progress>span{position:absolute;z-index:2;top:3px;font-size:11px;color:#fff4ca;text-shadow:1px 1px 2px #000;font-weight:500}#cast-name{left:8px}#cast-time{right:6px}.cast-spark{position:absolute;height:100%;width:4px;top:0;left:0;background:#fff4b9;box-shadow:0 0 8px 3px #fff2b699}
.spellbook{position:absolute;z-index:8;right:24px;top:20px;bottom:174px;width:330px;border:1px solid #b0995f;box-shadow:inset 0 0 0 3px #343c2d,0 12px 40px #000b;background:linear-gradient(120deg,#202d20f7,#111c17fc);padding:18px;display:flex;flex-direction:column}.book-heading{display:flex;justify-content:space-between;align-items:start;padding-bottom:15px;border-bottom:1px solid #73644470}.book-heading small{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:#a8a07f}.book-heading h2{font:24px 'Friz Quadrata',Georgia,serif;color:#f0d698;margin:7px 0 0}.book-heading button{font:25px 'Friz Quadrata',Georgia,serif;color:#ccb27a}.book-note{font-size:10px;line-height:1.6;color:#929c87;margin:14px 0 0}#spell-list{overflow:auto;flex:1;padding:10px 0}.book-spell{width:100%;display:flex;text-align:left;gap:12px;align-items:center;padding:9px 5px;border-bottom:1px solid #bbaa7122;color:#e3d4ae}.book-spell img{width:39px;height:39px;border:1px solid #917643;box-shadow:0 0 0 2px #131b12}.book-spell>span{display:grid;gap:5px;flex:1}.book-spell strong{font:14px 'Friz Quadrata',Georgia,serif;font-weight:400}.book-spell small{font-size:10px;color:#9fa98e}.book-spell:hover,.book-spell.selected{background:#6c714333}.book-spell.selected strong{color:#ffe9b3}.book-spell>b{font-size:9px;color:#c0aa71;font-weight:400}
@media(min-width:1500px){#choose-screen{width:390px;left:7vw}#choose-title{font-size:36px}.start-choice img{width:49px;height:49px}.start-choice{padding:10px 3px;font-size:11px}fieldset{margin-bottom:25px}.choose-intro{margin-bottom:33px}}
@media(max-width:1100px){.toolbar{gap:15px;padding:0 20px}.brand{font-size:10px;letter-spacing:1px}.brand small{font-size:7px}.brand-mark{width:30px;height:34px;font-size:25px}.selectors{gap:9px}.selectors label{gap:5px}.selectors select{min-width:78px}#choose-screen{left:30px;width:320px}#choose-title{font-size:28px}.start-classes{gap:6px}.start-choice img{width:39px;height:39px}.selection-caption{left:calc(50% + 180px)}.interaction-hint{display:none}#actions{grid-template-columns:repeat(12,43px);gap:4px}.action-slot{width:43px;height:43px}.action-dock{max-width:calc(100% - 40px)}}
@media(max-width:800px){body{min-height:600px}.toolbar{height:110px;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:46px 47px;padding:5px 16px;gap:0 10px}.brand{grid-column:1;font-size:10px}.brand small{font-size:6px}.brand-mark{width:28px;height:30px;font-size:23px}.back-button{grid-column:2;font-size:10px}.selectors{grid-column:1/4;grid-row:2;justify-content:space-between;width:100%;gap:12px}.selectors label{flex:1;font-size:9px}.selectors select{flex:1;min-width:0;width:80px;font-size:11px;padding:7px 6px}.selectors label:last-child{flex:.65}.metal-button{grid-column:3;grid-row:1;padding:7px 9px;font-size:10px}.about{display:none}.choosing .toolbar{display:flex;height:65px}.choosing .about{display:block}.choosing{overflow:auto;min-height:800px}.choosing main{min-height:735px}.choosing #choose-screen{width:calc(100% - 40px);max-width:420px;left:20px;right:20px;margin:0 auto;top:auto;bottom:28px;transform:none}.section-kicker{display:none}.choosing #choose-title{font-size:27px}.choose-intro{font-size:11px;margin-bottom:18px}fieldset{margin-bottom:16px}legend{font-size:13px}.start-choice{font-size:10px;padding:7px 3px}.start-choice img{width:40px;height:40px}.start-races img{width:27px;height:27px}.start-races .start-choice{padding:6px 13px}.start-levels button{padding:8px 12px}.start-levels strong{font-size:20px}#begin-preview{margin-top:19px;padding:11px;font-size:15px}.selection-caption{left:50%;top:21px;bottom:auto;gap:5px}.selection-caption strong{font-size:19px}.choosing .scene-vignette{background:linear-gradient(0deg,#101a14ed,transparent 65%),radial-gradient(ellipse at 50% 30%,transparent 10%,#09120c77 100%)}.choosing .loading{left:50%;top:23%;bottom:auto}.unit-frame{left:16px;top:18px;min-width:170px;padding:4px 8px 4px 4px;gap:7px}.unit-frame img{width:37px;height:37px}.unit-frame strong{font-size:11px}.unit-frame>b{left:28px;font-size:10px;width:19px;height:19px}.unit-health{height:8px}.unit-resource{height:5px}.camera-controls{right:16px;top:19px}.camera-controls button{font-size:9px;padding:6px}.movement-controls{right:16px;top:60px;gap:0}.movement-controls button{font-size:9px;padding:5px 6px}.zoom-controls{right:16px;bottom:210px}.comparing .character-overlay{padding:20px 16px}.character-overlay h2{font-size:16px}.comparing .camera-controls{top:65px}.comparing .movement-controls{top:105px}.target-label{font-size:10px}.action-dock{max-width:calc(100% - 28px);bottom:14px}#actions{grid-template-columns:repeat(6,44px);gap:5px}.action-slot{width:44px;height:44px}.action-bar-frame{padding:8px 10px}.bar-footer{padding-top:9px;justify-content:center}#bar-caption{display:none}.playback{gap:6px}.playback button{font-size:10px}.spell-detail{font-size:10px;margin-bottom:10px}.spell-detail span{max-width:160px;overflow:hidden;text-overflow:ellipsis}.cast-shell{width:260px;margin-bottom:12px}.spellbook{left:14px;right:14px;top:12px;width:auto;bottom:207px;padding:15px}.slot-tooltip{width:190px;left:0;transform:none}.action-slot:nth-child(6n + 4) .slot-tooltip,.action-slot:nth-child(6n + 5) .slot-tooltip,.action-slot:nth-child(6n) .slot-tooltip{left:auto;right:0}.comparing .loading{top:53%;padding:20px 12px;width:calc(100% - 16px)}.comparing .loading-copy,.comparing .loading-line{display:none}.booting .loading{top:50%}.comparing .loading-motif{width:54px;height:54px;margin-bottom:15px}.comparing .loading-gem{inset:20px}.comparing .loading-orbit.inner{inset:11px}.comparing .loading-title{font-size:21px}.comparing .loading-copy{font-size:12px}.comparing .loading-status{font-size:13px}}
@media(max-width:360px){.toolbar{padding-left:10px;padding-right:10px;gap:0 6px}.brand-mark{display:none}.brand{font-size:9px}.back-button{font-size:9px}.metal-button{font-size:9px;padding:7px}.start-choice img{width:35px;height:35px}.start-choice{font-size:9px}#actions{grid-template-columns:repeat(6,39px)}.action-slot{width:39px;height:39px}.unit-frame{min-width:155px}.camera-controls button{font-size:8px;padding:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loading-motif i,.loading-orbit,.loading-gem{animation:none;opacity:.8}}
/* Original client interface artwork and font, extracted from the pinned build. */
@font-face{font-family:'Friz Quadrata';src:url('./assets/ui/friz-quadrata.ttf') format('truetype');font-display:swap}
.action-slot{padding:5px;border:0;box-shadow:none;background:transparent}
.action-slot::after{content:'';position:absolute;inset:-8px;background:url('./assets/ui/action-frame.png') center/100% 100% no-repeat;pointer-events:none;z-index:1}
.action-slot img{border:0;box-shadow:inset 0 0 4px #000}
.action-slot.selected{outline:0;box-shadow:none}
.action-slot.selected::before{content:'';position:absolute;inset:-9px;z-index:2;background:url('./assets/ui/action-glow.png') center/100% 100% no-repeat;pointer-events:none;opacity:.9}
.action-slot:hover::after{background-image:url('./assets/ui/action-highlight.png');mix-blend-mode:screen}
.action-slot .keybind{z-index:3;top:3px;right:5px}
.cast-shell{width:284px;margin-bottom:19px;gap:3px;filter:none}
.cast-shell>img{width:27px;height:27px;flex:none;margin-right:6px}
.cast-progress{flex:none;width:234px;height:10.8px;border:0;border-radius:0;overflow:visible;box-shadow:none;background:#070c07}
.cast-progress::after{content:'';position:absolute;left:-36.6px;top:-33.6px;width:307.2px;height:76.8px;background:url('./assets/ui/cast-border.png') center/100% 100%;pointer-events:none;z-index:3}
.cast-progress>i{inset:0;background:#dfad23 url('./assets/ui/statusbar.png') center/100% 100%;background-blend-mode:multiply;box-shadow:none}
.cast-progress>span{z-index:5;top:-2px;font-family:'Friz Quadrata',Georgia,serif;font-size:12px;font-weight:400;line-height:14px}
.cast-spark{top:-10px;height:36px;width:22px;transform:translateX(-50%);background:url('./assets/ui/cast-spark.png') center/100% 100%;mix-blend-mode:screen;box-shadow:none;z-index:2}
.cast-progress #cast-name{left:5px}.cast-progress #cast-time{right:4px}
.action-slot.selected::before{mix-blend-mode:screen}.slot-tooltip{z-index:30}

.cast-spark{background:#fff4c7;mask-image:url('./assets/ui/cast-spark.png');mask-size:100% 100%;mask-mode:luminance;mask-repeat:no-repeat}
.booting #choose-screen,.booting #selection-caption,.booting .action-dock,.booting .unit-frame{visibility:hidden}
/* Keep the stage clear; secondary controls live in Options. */
body:not(.choosing) .toolbar{height:64px;display:flex;gap:14px;padding:0 24px}
body:not(.choosing) .brand{display:none}
.back-button{min-height:44px;font-size:13px}
.preview-name{font:14px 'Friz Quadrata',Georgia,serif;color:var(--muted)}
.preview-options{position:relative;margin-left:auto}
.preview-options>summary{list-style:none;min-height:44px;display:flex;align-items:center;padding:0 16px;border:1px solid #736447;border-radius:3px;background:#22271f;color:var(--cream)}
.preview-options>summary::-webkit-details-marker{display:none}
.options-panel{position:absolute;right:0;top:52px;width:310px;max-height:calc(100dvh - 90px);overflow:auto;padding:20px;background:#151b19fa;border:1px solid #8b7853;box-shadow:0 8px 40px #000a}
.options-panel h2{font:14px 'Friz Quadrata',Georgia,serif;color:var(--gold);margin:20px 0 9px}
.options-panel p{font-size:12px;line-height:1.9;color:#bfb79e;margin:0}
.options-panel .selectors{display:grid;gap:10px;margin:0 0 14px;width:auto}
.options-panel .selectors label{display:flex;justify-content:space-between;font-size:12px;gap:12px}
.options-panel .selectors select{width:170px;flex:none;min-height:40px;font-size:13px}
.options-panel .camera-controls,.options-panel .movement-controls,.options-panel .zoom-controls{position:static;display:flex;gap:6px;padding:0;border:0;background:none;box-shadow:none;margin:0 0 8px}
.options-panel button,.options-panel select{min-height:40px;border:1px solid #62583f;border-radius:3px;padding:8px 12px;font-size:12px;background:#242a22;color:#ded3b7}
.options-panel .zoom-controls button{width:auto;height:auto}
.options-panel button.selected,.options-panel button[aria-pressed=true]{border-color:#d5b875;background:#4c4b34}
.playback-options{display:flex;align-items:center;justify-content:space-between;gap:12px}
.playback-options label{display:flex;align-items:center;gap:8px}
.choosing .preview-options,.choosing .preview-name{display:none}
body:not(.choosing) .about{display:block}
.about summary{width:36px;height:36px}
.bar-footer{justify-content:center;width:100%;padding-top:12px}
.playback{display:flex;gap:10px;align-items:center}
.playback button{min-height:44px;padding:0 18px;font-size:13px;border:1px solid #746447;border-radius:3px;background:#182018e8;color:#e9d9b7}
.playback button:hover{border-color:#d5b875;background:#303b2a}
.playback #play-pause{min-width:102px;background:#35412b;border-color:#a18e59}
.spell-detail{min-height:16px}
.spell-detail[hidden]{display:none}
.interaction-hint{left:50%;transform:translateX(-50%);bottom:160px;font-size:12px;white-space:nowrap;color:#c0c8b3;text-shadow:0 1px 3px #000;pointer-events:none}
.action-dock{bottom:18px}
@media(max-width:1100px){.interaction-hint{display:block}}
@media(max-width:800px){body:not(.choosing) .toolbar{height:60px;padding:0 14px;gap:8px}.preview-name{display:none}.back-button{font-size:12px}.preview-options>summary{padding:0 12px}.options-panel{right:-44px;max-width:calc(100vw - 28px)}.about-content{width:min(310px,calc(100vw - 28px))}.playback{gap:8px}.playback button{font-size:12px;padding:0 13px}.playback #play-pause{min-width:92px}.interaction-hint{display:none}.action-dock{bottom:14px}.spellbook{bottom:230px}.choosing .about summary{width:24px;height:24px}}
.choosing .about summary{width:24px;height:24px}

/* Persistent target feedback follows the playback clock, including pause/replay. */
.target-label{background:none;border:0;border-radius:0;font:inherit;font-size:13px;pointer-events:auto;cursor:pointer;padding:8px 12px;min-height:36px}.target-label::after{display:none}.target-label[data-offscreen="true"]{background:#131a13cc;border:1px solid #bda16c55;border-radius:4px}.hit-feedback{position:absolute;color:#ffe6a1;font:22px "Friz Quadrata",Georgia,serif;text-shadow:1px 2px 2px #000;pointer-events:none}.action-feedback{position:absolute;top:17%;left:50%;transform:translateX(-50%);z-index:4;color:#ff7868;text-shadow:1px 1px 2px #000;pointer-events:none}.choosing .action-feedback{display:none}
.pet-label{position:absolute;transform:translate(-50%,-100%);font-size:13px;color:#92e583;text-shadow:1px 1px 2px #000;z-index:3;pointer-events:none}
.heal-feedback{color:#8cf3a0}

/* Full roster keeps the character visible and secondary choices scrollable. */
#leave-form{min-height:40px;padding:8px 16px;margin-bottom:10px;font-size:13px}
#choose-screen{max-height:calc(100% - 42px);overflow-y:auto;padding:4px 6px 8px 0;scrollbar-width:thin}
.choose-intro{margin-bottom:18px}.start-classes{grid-template-columns:repeat(5,minmax(0,1fr))}.start-choice{gap:6px}.start-choice img{width:36px;height:36px}
.start-races{gap:6px}.start-races .start-choice{min-height:44px;padding:6px 8px;gap:8px;font-size:12px}.start-races img{width:27px;height:27px}.start-races .start-choice span{text-align:left}
.start-levels{align-items:center}.start-levels label{font-size:13px;color:#d8c59c}.start-levels select{flex:1;min-height:42px;padding:6px 12px;background:#19231a;color:#f4dfaa;border:1px solid #8a774d;font:18px 'Friz Quadrata',Georgia,serif}.start-levels span{font-size:12px}
.book-filters{display:grid;gap:10px;padding-top:12px}.book-filters>input{width:100%;min-height:38px;background:#111b14;border:1px solid #746844;color:#eee1bc;padding:8px 10px;font:inherit}.book-filters label{display:flex;align-items:center;gap:8px;font-size:12px;color:#bfb69b}.book-filters input[type=checkbox]{width:18px;height:18px;accent-color:#bca064}
@media(max-width:800px){.choosing{min-height:1060px}.choosing main{min-height:995px}.choosing #choose-screen{max-height:none;overflow:visible}.start-choice img{width:33px;height:33px}.start-races img{width:27px;height:27px}}

/* Active buffs only: original icons, remaining duration and cancellation. */
.buff-tray{position:absolute;right:20px;top:20px;display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 40px);gap:22px 8px;pointer-events:auto}.buff-tray[hidden]{display:none}.buff-tray button{position:relative;width:44px;height:44px;padding:2px;border:1px solid #c2ad76;background:#17211b;cursor:pointer}.buff-tray img{width:100%;height:100%;display:block}.buff-tray span{position:absolute;bottom:-14px;left:0;right:0;text-align:center;color:#eee1bc;font-size:11px;text-shadow:1px 1px 2px #000}.buff-tray button:focus-visible{outline:2px solid #f4dfaa;outline-offset:3px}.comparing .buff-tray{top:70px}
/* Keep active target statuses inside their own comparison panel. */
.target-label{width:max-content;white-space:normal;text-align:center}

/* Character choices stay visible; the spellbook edits an eight-slot showcase. */
.quick-choices{display:flex;align-items:center;justify-content:center;gap:20px;padding:0;flex:1;min-width:0}
body:not(.choosing) .preview-name{display:none}
.quick-choices .selectors{margin:0;gap:18px}.quick-choices .selectors label{font-size:12px}.quick-choices select{min-height:40px;font-size:14px;min-width:120px}
.milestones{display:flex;gap:6px}.milestones button{min-height:40px;padding:8px 14px;background:#111a13;border:1px solid #706346;color:#cdc3a9;font-size:13px;border-radius:3px}
.milestones [aria-pressed=true]{background:#444c30;border-color:#d6b879;color:#ffe1a0}
.choosing .quick-choices{display:none}.start-levels button{flex-direction:column;gap:3px;justify-content:center;padding:8px 5px}
#actions{grid-template-columns:repeat(8,52px);gap:8px}.action-slot{width:52px;height:52px}.action-slot.empty{opacity:1;cursor:pointer;pointer-events:auto}.empty-mark{font:24px Georgia;color:#aa9670}
#actions.assigning .action-slot{outline:2px solid #edcf84;outline-offset:2px}.action-slot:focus-visible,.book-spell:focus-visible{outline:2px solid #fff0bc;outline-offset:3px}
.spellbook{width:350px;bottom:175px;top:16px;padding:16px}.book-instruction{font-size:13px;line-height:1.5;color:#f2d698;margin:12px 0 0}.book-note{margin:10px 0}.book-spell{min-height:60px;cursor:grab}.book-spell>b{min-width:48px;text-align:right}.book-spell[hidden]{display:none}
@media(max-width:800px){.quick-choices{flex-wrap:wrap;gap:8px;padding:8px 12px}.quick-choices .selectors{display:flex;gap:12px;grid-column:auto;width:100%}.quick-choices .selectors label{flex:1;font-size:11px}.quick-choices select{min-width:0;width:100%;font-size:13px}.milestones{width:100%}.milestones button{flex:1;padding:6px;font-size:12px}.quick-choices .selectors label:last-child{flex:1}.spellbook{left:12px;right:12px;width:auto;bottom:190px;top:8px}.book-heading{padding-bottom:8px}.book-heading h2{font-size:20px}.book-filters{padding-top:8px}.book-note{font-size:10px}.book-instruction{font-size:12px}#actions{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;width:100%}.action-slot{width:100%;height:auto;aspect-ratio:1}.action-bar-frame{width:100%}.action-dock{width:calc(100% - 36px);max-width:460px}.action-slot::after{inset:-5px}.playback{gap:5px}.playback button{padding:0 10px}.start-levels button{padding:8px 4px}}

@media(max-width:1100px){body:not(.choosing) .toolbar{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 16px;gap:8px}.quick-choices{order:4;flex-basis:100%;padding-bottom:4px}.preview-options{margin-left:auto}.quick-choices .selectors{width:auto}.quick-choices .milestones{width:auto}}
@media(max-width:800px){.quick-choices .selectors,.quick-choices .milestones{width:100%}}

.target-label[data-selected='true']{color:#ffe9a3;border-bottom:2px solid #e5bd53}.target-label[data-selected='false']{color:#c4c4bd;opacity:.8}.hit-feedback:not(.heal-feedback){font-size:30px;font-weight:bold;color:#ffe29a;text-shadow:2px 2px 2px #000,-1px -1px #000}


/* Original 256x128 WoW target artwork; its right-hand portrait sits behind it. */
.target-frame{position:absolute;left:18px;top:8px;width:232px;pointer-events:auto}.target-frame[hidden],.choosing .target-frame{display:none}.target-unit{position:relative;display:block;width:232px;height:90px;background:none;border:0;padding:0;cursor:pointer;color:#f2d47e;text-shadow:1px 1px 2px #000}.target-unit::before{content:"";position:absolute;left:30px;top:24px;width:119px;height:40px;background:#080c07db}.target-art{position:absolute;inset:0;background:url('./assets/ui/target-frame.png') no-repeat 0 0;background-size:256px 128px;pointer-events:none}.target-portrait{position:absolute;left:153px;top:18px;width:56px;height:56px;border-radius:50%;background:#26301d}.target-health{position:absolute;left:30px;top:44px;width:119px;height:9px;background:#248222 url('./assets/ui/statusbar.png') center/100% 100%;background-blend-mode:multiply}.target-unit strong{position:absolute;left:31px;top:26px;width:116px;text-align:center;font:12px 'Friz Quadrata',Georgia,serif;color:#ffda83}.target-kind{position:absolute;left:31px;top:55px;width:116px;font:9px 'Friz Quadrata',Georgia,serif;color:#c0baa4;text-align:center}.target-face{position:absolute;right:18px;top:90px;min-height:28px;padding:3px 6px;border:1px solid #847145;color:#e7d7a7;background:#141b14d9;font-size:10px;cursor:pointer}.target-face[hidden]{display:none}.target-unit:focus-visible,.target-face:focus-visible,.target-debuff:focus-visible{outline:2px solid #e2c78e;outline-offset:2px}.target-debuffs{display:flex;flex-wrap:wrap;gap:5px;margin:-9px 0 0 29px;max-width:130px}.target-debuff{position:relative;display:block;width:28px;height:28px;border:1px solid #bb6253;background:#171b16;box-shadow:0 1px 3px #000;cursor:help}.target-debuff img{display:block;width:100%;height:100%}.target-debuff b{position:absolute;right:0;bottom:0;padding:0 2px;background:#000b;color:#fff4db;font-size:11px;text-shadow:1px 1px #000}.debuff-name{display:block;font-size:8px;overflow:hidden;height:22px}.comparing .target-frame{top:55px}.boundary-hint{position:absolute;z-index:4;top:7%;left:50%;transform:translateX(-50%);max-width:90%;padding:7px 12px;background:#171e16dd;border:1px solid #aa945a;color:#eddbab;font-size:12px;text-align:center;pointer-events:none}.boundary-hint[hidden],.choosing .boundary-hint{display:none}.buff-tray{max-width:calc(100% - 270px)}
@media(max-width:800px){.target-frame{left:0;top:8px}.comparing .target-frame{left:0;top:48px;transform:scale(.8);transform-origin:top left}.buff-tray{max-width:calc(100% - 240px)}.comparing .buff-tray{top:190px;right:12px;max-width:calc(100% - 24px)}.boundary-hint{top:40%;font-size:11px}}

/* The purpose is explicit; comparison is a primary choice, inspection is optional. */
.fan-label{display:flex;flex-direction:column;gap:4px;white-space:nowrap;color:#d8c89f;font-size:11px}.fan-label strong{font-weight:normal}.fan-label small{font-size:9px;color:#aaa58e}
#compare-toggle{min-height:40px;font-size:12px}.inspection-playback{margin-bottom:12px}.inspection-playback button{flex:1}.choose-intro{font-size:13px;line-height:1.6;max-width:330px}.choosing .fan-label{margin-left:auto}.choosing .brand{margin-right:0}.toolbar{gap:14px}body:not(.choosing) .toolbar{flex-wrap:wrap;height:auto;min-height:76px;padding-top:8px;padding-bottom:8px}.quick-choices{flex-wrap:wrap;gap:10px}.quick-choices .selectors{gap:10px}.quick-choices select{min-width:100px}.milestones button{padding:8px 10px}.bar-footer #resume-preview{border-color:#d5b875;color:#ffe1a0}
@media(max-width:1100px){.preview-options{margin-left:0}.fan-label{margin-right:auto}.quick-choices{order:4}.choosing .fan-label{margin-right:0}.choosing .toolbar{gap:12px;padding:0 16px}.choosing .brand{font-size:11px}.choosing .brand small{font-size:7px}}
@media(max-width:600px){.fan-label{font-size:10px}.fan-label small{font-size:8px}.back-button{font-size:11px}.toolbar #compare-toggle{font-size:11px;padding:7px 9px}.choosing .toolbar{height:auto;min-height:84px;flex-wrap:wrap;padding:10px 16px}.choosing .fan-label{margin-left:0;margin-right:auto}.choosing .about{margin-left:auto}.choosing{min-height:1160px}.choosing main{min-height:1075px}}
@media(max-width:800px){.options-panel,.about-content{position:fixed;left:12px;right:12px;top:110px;width:auto;max-width:none;max-height:calc(100dvh - 126px);overflow-y:auto}.about-content{top:64px;max-height:calc(100dvh - 80px)}}
@media(max-width:800px){.choosing #choose-screen{background:#121c16f5;border:1px solid #6c6046;padding:18px 12px;width:calc(100% - 24px);left:12px;right:12px}.choose-intro{color:#c7c2ac}}
#begin-preview{position:sticky;bottom:0;z-index:1}@media(max-width:800px){#begin-preview{position:static}}

/* Keep the single character centered; comparison opens two independent panels. */
body:not(.choosing) .toolbar{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:auto auto;gap:10px 18px;padding:8px 22px 14px;height:auto;min-height:0}
body:not(.choosing) .back-button{grid-column:1;grid-row:1;font-size:12px;min-height:30px;padding:0;text-align:left}
body:not(.choosing) .fan-label{grid-column:2;grid-row:1;display:block;margin:0;font-size:11px;color:#a99e85}
body:not(.choosing) .fan-label small{display:none}
body:not(.choosing) .preview-options{grid-column:3;grid-row:1;margin:0;justify-self:end}
body:not(.choosing) .about{display:block;grid-column:4;grid-row:1}
.preview-options>summary{min-height:30px;padding:4px 8px;font-size:12px;background:transparent;border-color:transparent;color:#d0c4a8}
.preview-options>summary:hover,.preview-options[open]>summary{border-color:#817052;background:#292e23}
.preview-controls{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:32px}
body:not(.choosing) .quick-choices{display:flex;flex:0 1 auto;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:18px;padding:0;order:0}
.quick-choices .selectors{display:flex;gap:0;width:180px;flex:none;margin:0}
.quick-choices .selectors label,.appearance-choices label{display:flex;flex-direction:column;align-items:stretch;gap:6px;color:#c9c1ac;font-size:11px;min-width:0;width:100%}
.quick-choices select,.appearance-choices select{width:100%;min-width:0;min-height:40px;padding:8px 25px 8px 10px;border:1px solid #756b52;border-radius:5px;background:#171c16;color:#f2e6ca;font-size:14px}
.quick-choices select:disabled{opacity:.6;cursor:default}
.level-choice{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#c9c1ac}
.level-choice .milestones{display:flex;width:auto;gap:0;border:1px solid #756b52;border-radius:5px;overflow:hidden}
.level-choice .milestones button{min-width:40px;min-height:38px;padding:7px;border:0;border-radius:0;border-right:1px solid #665a42;font-size:14px;background:#171c16}
.level-choice .milestones button:last-child{border-right:0}
.level-choice .milestones button[aria-pressed=true]{background:#534d32;color:#fff0bc;box-shadow:inset 0 -2px #d4b66c}
.comparison-choice{display:flex;flex-direction:column;align-items:center;gap:7px;padding-left:32px;border-left:1px solid #665a4266}
#comparison-mode{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;width:270px;padding:10px 16px;border:1px solid #e0c185;border-radius:6px;background:linear-gradient(#ddc48b,#bea268);color:#201e14;font-size:14px;font-weight:600;box-shadow:0 2px 8px #0003}
#comparison-mode:hover{filter:brightness(1.1)}
#comparison-mode[aria-expanded=true]{background:#2c352b;color:#f0dbb0;border-color:#a89163;box-shadow:none}
#comparison-explanation{font-size:11px;line-height:1.3;color:#c2b9a3;text-align:center}
.options-panel{top:38px}.options-panel h2:first-child{margin-top:0}
.appearance-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.model-note{font-size:11px;line-height:1.5;color:#c0b69b}
.choosing .preview-controls{display:none}.choosing .fan-label{margin-left:auto;margin-right:0}.choosing .toolbar{height:86px}.choosing #choose-screen{overflow-y:auto;max-height:calc(100% - 24px);padding-top:20px;padding-bottom:16px}.choosing #choose-screen fieldset{margin-bottom:16px}
body:not(.choosing) .comparison-heading{display:flex;flex-direction:column;gap:9px;position:absolute;top:14px;left:50%;right:auto;transform:translateX(-50%);width:min(680px,calc(100% - 32px));padding:12px 18px 14px;background:#182019f2;border:1px solid #80714f;border-radius:8px;box-shadow:0 5px 20px #0003;pointer-events:auto}
.comparison-side{font-size:12px;font-weight:600;color:#e7d0a0;text-align:center;letter-spacing:.2px}
body:not(.choosing) .comparing .comparison-heading{top:0;left:0;right:0;transform:none;width:auto;border:0;border-bottom:2px solid #bda16c;border-radius:0;box-shadow:none;background:#182019f2}
body:not(.choosing) .comparing .second .comparison-heading{background:#192229f2;border-bottom-color:#87b5c8}
.second .comparison-side{color:#b4d8e6}
.choosing .comparison-heading{display:none}
.panel-choices{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px}
.panel-choices label{display:flex;flex-direction:column;gap:6px;min-width:0;color:#c9c1ac;font-size:11px}
.panel-choices select,.panel-choices #compare-race{width:100%;max-width:none;min-width:0;min-height:40px;padding:8px 22px 8px 10px;color:#f2e6ca;background:#131a15;border:1px solid #756b52;border-radius:5px;font-size:14px}
.second .panel-choices select{border-color:#617b88}
body:not(.choosing) .target-frame{top:14px}
body:not(.choosing) .buff-tray{top:120px}
body:not(.choosing) .comparing .target-frame{top:118px}
body:not(.choosing) .comparing .buff-tray{top:224px}
@media(max-width:1150px){body:not(.choosing) #viewport:not(.comparing) .target-frame{top:132px}body:not(.choosing) #viewport:not(.comparing) .buff-tray{top:238px}}
@media(max-width:800px){body:not(.choosing) .toolbar{grid-template-columns:1fr auto auto;gap:8px 10px;padding:8px 14px 12px}body:not(.choosing) .fan-label{display:none}body:not(.choosing) .preview-options{grid-column:2}body:not(.choosing) .about{grid-column:3}.preview-controls{gap:18px}.comparison-choice{padding-left:18px}.quick-choices .selectors{width:145px}body:not(.choosing) .quick-choices{gap:12px}#comparison-mode{width:245px;font-size:13px}.options-panel{position:fixed;top:52px;max-height:calc(100dvh - 66px)}}
@media(max-width:600px){body:not(.choosing) .toolbar{padding:6px 12px 10px;gap:6px 8px}.preview-options>summary{font-size:11px}.about summary{width:28px;height:28px}.preview-controls{flex-direction:column;gap:10px;align-items:stretch}body:not(.choosing) .quick-choices{justify-content:space-between;gap:12px}.quick-choices .selectors{width:auto;flex:1}.level-choice .milestones button{min-width:34px}.comparison-choice{padding-left:0;border-left:0;gap:5px}#comparison-mode{width:100%;min-height:40px;padding:8px 14px}#comparison-explanation{font-size:10px}body:not(.choosing) .comparison-heading{top:10px;padding:10px 12px 12px;gap:8px;width:calc(100% - 24px)}.panel-choices{gap:8px;grid-template-columns:1fr 1fr 1.2fr}.panel-choices label{font-size:10px}.panel-choices select,.panel-choices #compare-race{min-height:36px;padding:6px 18px 6px 6px;font-size:12px}.comparison-side{font-size:11px}body:not(.choosing) .comparing .comparison-heading{padding:10px;min-height:185px}.comparing .panel-choices{grid-template-columns:1fr;gap:7px}.comparing .panel-choices label{flex-direction:row;align-items:center;justify-content:space-between;gap:5px}.comparing .panel-choices label:last-child{flex-direction:column;align-items:stretch}.comparing .panel-choices select{width:calc(100% - 34px)}.comparing .panel-choices label:last-child select{width:100%}body:not(.choosing) .comparing .target-frame{top:190px}body:not(.choosing) .comparing .buff-tray{top:288px}body:not(.choosing) #viewport:not(.comparing) .target-frame{top:116px}body:not(.choosing) #viewport:not(.comparing) .buff-tray{top:218px}.choosing .toolbar{height:auto;min-height:88px;gap:10px}.choosing .fan-label small{display:none}.choosing #choose-screen{max-height:none;overflow:visible}.choosing{min-height:1320px}.choosing main{min-height:1210px}.appearance-choices select{min-height:40px}}

/* Short phones need room for controls, targets and the shared action bar. */
@media(max-width:800px) and (max-height:799px),(max-width:1100px) and (max-height:650px){
  body:not(.choosing){min-height:844px;overflow-y:auto}
}
@media(max-width:400px){
  body:not(.choosing) .comparing .target-frame{transform:scale(.72)}
}

/* Short preview recovery and one queued action stay inside the existing hotbar. */
.action-slot.recovering::before{content:'';position:absolute;inset:3px;background:conic-gradient(from 0deg,#0009 0deg var(--cooldown-angle,360deg),transparent var(--cooldown-angle,360deg) 360deg);pointer-events:none;z-index:2}
.action-slot.recovering::after{content:attr(data-cooldown);position:absolute;inset:0;display:grid;place-items:center;color:#fff3cd;font:bold 13px Arial;text-shadow:0 1px 3px #000;pointer-events:none;z-index:3}
.action-slot.queued{outline:2px solid #ffe8a5;outline-offset:2px;box-shadow:0 0 12px #e7c57699}

/* Familiar target identity: hostile name field, full health and level badge. */
.target-unit::before{background:linear-gradient(#681713 0 47%,#070b07 47%)}
.target-health{background-color:#22bb16;height:10px}
.target-level{position:absolute;left:191px;top:65px;width:24px;text-align:center;font:12px "Friz Quadrata",Georgia,serif;color:#ffd100}
.target-health-text{position:absolute;left:30px;top:43px;width:119px;text-align:center;font:10px "Friz Quadrata",Georgia,serif;color:#fff;text-shadow:1px 1px #000}

/* Keep the fan notice readable on every screen without blocking the preview. */
body{padding-bottom:36px}
.site-notice{position:fixed;bottom:0;left:0;right:0;z-index:15;min-height:36px;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 12px;background:#141a16;border-top:1px solid #62523a;color:#c9c3b2;font:11px/1.4 Arial,sans-serif}
.site-notice a,.about-content a{color:#f0d69b;text-underline-offset:3px}
.choose-disclaimer{max-width:340px;padding:10px 12px;margin:0 0 18px;border-left:2px solid #bda16c;background:#20291fe8;color:#ccc6b6;font:12px/1.5 Arial,sans-serif}
.choose-disclaimer strong{color:#eee0bd}
.toolbar .about>summary{width:auto;height:auto;min-height:32px;padding:6px 9px;border-radius:5px;font:12px Arial,sans-serif}
.choosing .toolbar .about{margin-left:auto}
.about-content .legal{font-size:12px;line-height:1.6;color:#c1bba9}
@media(max-width:600px){body{padding-bottom:52px}.site-notice{min-height:52px;flex-direction:column;gap:2px;padding:6px 10px;text-align:center}.choose-disclaimer{max-width:none}.toolbar .about>summary{font-size:11px;padding:6px}.choosing .toolbar{min-height:70px}}
/* Keep enough room to browse the class-wide book above the hotbar. */
.spellbook{position:fixed;z-index:20}
main:has(.spellbook:not([hidden])){position:relative;z-index:20}
#spell-list{min-height:0;scrollbar-gutter:stable}

/* Descriptive Forever identity and clear, editable starting choices. */
.choosing .toolbar{position:relative;justify-content:center;min-height:88px}
.choosing .brand{margin:0;text-align:center;font-family:Georgia,'Times New Roman',serif;letter-spacing:0}
.brand-title{display:block;font-size:34px;line-height:1.15;font-weight:700;color:#f3e4bf;text-shadow:0 2px 8px #0008}
.brand-title em{font-style:normal;font-weight:400;color:#e5bc70}
.choosing .brand small{font:11px/1.4 system-ui,sans-serif;letter-spacing:.7px;color:#d6c9a6;margin-top:5px}
.choosing .toolbar .about{position:absolute;right:24px;margin:0}
.choosing .section-kicker{display:flex;font-size:10px;letter-spacing:1.4px;color:#e4c785;gap:9px;margin-bottom:12px}
.choosing .section-kicker span{flex:none;width:18px}
.choosing #choose-title{font:600 30px/1.18 Georgia,'Times New Roman',serif;letter-spacing:-.5px;text-wrap:balance}
.choose-intro{font:14px/1.65 system-ui,sans-serif;color:#d2cdbb;margin-bottom:16px}
.choose-freedom{margin:0 0 14px;padding:11px 13px;background:linear-gradient(110deg,#344532b8,#1a2a2280);border:1px solid #8d9f6c55;border-radius:6px;color:#cdd8c3;font:12px/1.6 Arial,sans-serif}
.choose-freedom strong{display:block;color:#f1e5c3;margin-bottom:2px}
.choose-disclaimer{font-size:11px;padding:8px 10px;margin-bottom:16px}

@media(max-width:800px){.brand-title{font-size:29px}.choosing .brand small{font-size:10px;letter-spacing:0}.choosing .toolbar .about{right:12px}.choosing #choose-title{font-size:29px}.choosing .section-kicker{font-size:9px}.choosing main{min-height:1260px}.choosing{min-height:1400px}}
@media(max-width:360px){.brand-title{font-size:26px}.choosing .toolbar{justify-content:flex-start;padding-left:20px}.choosing .brand small{font-size:9px}}


/* One primary action under the chosen character; stay reachable on narrow screens. */
.selection-caption{bottom:28px;gap:12px;width:280px;max-width:calc(100% - 32px)}
.selection-caption #begin-preview{position:static;margin:0;pointer-events:auto;min-height:48px;font:600 17px/1.3 system-ui,sans-serif;gap:18px}
body:not(.booting) .loading{display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);padding:12px 17px;border-radius:8px;box-shadow:0 8px 28px #0005}
body:not(.booting) .loading .loading-title,body:not(.booting) .loading .loading-copy,body:not(.booting) .loading .loading-line{display:none}
body:not(.booting) .loading .loading-motif{flex:none;width:28px;height:28px;margin:0}
body:not(.booting) .loading .loading-orbit{inset:0}
body:not(.booting) .loading .loading-orbit::after{width:3px;height:3px;top:2px;right:2px}
body:not(.booting) .loading .loading-gem{inset:10px}
body:not(.booting) .loading .loading-orbit.inner,body:not(.booting) .loading .loading-motif i{display:none}
body:not(.booting) .loading .loading-status{font-size:13px;text-align:left}
/* During a switch, keep the previous character unobstructed above the status. */
body:not(.booting) .loading.switching{top:auto;bottom:180px;transform:translateX(-50%);pointer-events:none;animation:loading-status-in .18s ease-out}
@keyframes loading-status-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body:not(.booting) .loading.switching{animation:none}}
@media(max-width:800px){
  .selection-caption{top:21px;bottom:auto;left:0;width:100%;max-width:none;transform:none;z-index:6}
  .selection-caption #begin-preview{position:fixed;left:50%;transform:translateX(-50%);top:auto;bottom:68px;width:calc(100vw - 40px);max-width:420px}
  .choosing #choose-screen{padding-bottom:65px}
  body:not(.booting) .comparing .loading{gap:8px;padding:10px;max-width:calc(100% - 16px)}
  body.choosing:not(.booting) .loading.switching{top:210px;bottom:auto}
  body:not(.choosing):not(.booting) .loading.switching{bottom:190px}
}

/* Compact chooser: readable icon-and-label rows, with every group in view. */
.choosing #choose-screen{left:28px;top:14px;transform:none;width:430px;max-height:calc(100% - 20px);padding:6px 4px 6px 0}
.choosing #choose-title{font-size:26px;line-height:1.2;margin-bottom:6px}
.choosing .choose-intro{max-width:none;font-size:13px;line-height:1.5;margin:0 0 5px}
.choosing .choose-freedom{padding:0;border:0;background:none;font:12px/1.5 system-ui,sans-serif;color:#bfcbb5;margin:0 0 12px}
.choosing #choose-screen fieldset{min-width:0;margin:0 0 10px}
.choosing #choose-screen fieldset:last-child{margin-bottom:0}
.choosing #choose-screen legend{font:600 13px/1.3 system-ui,sans-serif;margin-bottom:6px;color:#e2d3ad}
.choosing .start-classes,.choosing .start-races{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.choosing .start-choice,.choosing .start-races .start-choice{flex-direction:row;justify-content:flex-start;min-height:40px;padding:5px 8px;gap:8px;font:13px/1.25 system-ui,sans-serif;text-align:left;border-radius:4px}
.choosing .start-choice img,.choosing .start-races img{flex:none;width:26px;height:26px}
.choosing .start-choice[aria-pressed=true]::after{display:none}
.choosing .starting-appearance legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.choosing .appearance-choices{gap:10px}
.choosing .appearance-choices label{font-size:12px;gap:5px}
.choosing .appearance-choices select{min-height:38px;padding:6px 10px;font-size:13px}
.choosing .start-levels{gap:8px}
.choosing .start-levels button{min-height:38px;padding:5px;flex-direction:row}
.choosing .start-levels button span{display:none}
.choosing .start-levels strong{font:600 17px/1.2 system-ui,sans-serif}
.choosing .model-note{font-size:11px;line-height:1.4;margin:5px 0 0}
@media(min-width:801px) and (max-height:760px){.choosing .toolbar{height:72px;min-height:72px}.choosing .brand-title{font-size:30px}}
@media(min-width:801px) and (max-width:1100px){.choosing #choose-screen{left:20px;width:410px}}
@media(max-width:800px){
  .choosing{min-height:1180px}.choosing main{min-height:1040px}
  .choosing #choose-screen{left:12px;right:12px;top:auto;width:calc(100% - 24px);max-width:430px;max-height:none;padding:16px 12px 76px}
  .choosing #choose-title{font-size:25px}
  .choosing .start-choice,.choosing .start-races .start-choice{min-height:44px;padding:5px;gap:6px;font-size:12px}
  .choosing .appearance-choices select,.choosing .start-levels button{min-height:44px}
}

/* Share wide screens more evenly; keep short windows compact. Match app.js. */
@media(min-width:1440px){
  .choosing{--chooser-space:min(44vw,920px)}
  .choosing #choose-screen{left:32px;width:calc(var(--chooser-space) - 64px)}
  .choosing .selection-caption,.choosing:not(.booting) .loading{left:calc(50% + var(--chooser-space)/2)}
}
@media(min-width:1440px) and (min-height:850px){
  .choosing #choose-screen{top:32px;max-height:calc(100% - 48px)}
  .choosing #choose-title{font-size:32px;margin-bottom:10px}
  .choosing .choose-intro{font-size:15px;margin-bottom:7px}
  .choosing .choose-freedom{font-size:14px;margin-bottom:24px}
  .choosing #choose-screen fieldset{margin-bottom:20px}
  .choosing #choose-screen legend{font-size:15px;margin-bottom:9px}
  .choosing .start-classes,.choosing .start-races{gap:9px}
  .choosing .start-choice,.choosing .start-races .start-choice{min-height:52px;padding:8px 12px;gap:10px;font-size:15px}
  .choosing .start-choice img,.choosing .start-races img{width:32px;height:32px}
  .choosing .appearance-choices label{font-size:14px;gap:7px}
  .choosing .appearance-choices select{min-height:46px;font-size:15px}
  .choosing .start-levels button{min-height:46px}
  .choosing .start-levels strong{font-size:20px}
}
@media(min-width:1440px) and (min-height:850px) and (max-height:949px){
  .choosing #choose-screen{top:16px;max-height:calc(100% - 24px)}
  .choosing .choose-freedom{margin-bottom:16px}
  .choosing #choose-screen fieldset{margin-bottom:10px}
  .choosing .start-choice,.choosing .start-races .start-choice{min-height:48px;padding:6px 12px}
}
@media(max-width:800px) and (max-height:799px),(max-width:1100px) and (max-height:650px){
  body:not(.choosing){padding-bottom:0}
  body:not(.choosing) .site-notice{position:static;flex-shrink:0}
}

/* Stable instructions stay above the hotbar, below casting/form controls. */
.action-dock .interaction-hint{display:block;position:static;transform:none;width:100%;max-width:650px;margin:0 0 12px;text-align:center;white-space:normal;line-height:1.5}
@media(max-width:800px){.action-dock .interaction-hint{font-size:11px;margin-bottom:10px}}

/* Keep common preview tools together beside Compare. */
.preview-utilities{display:flex;align-items:flex-start;gap:8px;padding-bottom:21px}
.preview-utilities .preview-options{position:relative}
.preview-utilities .preview-options>summary,#sound-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid #827252;border-radius:6px;background:#20291f;color:#eee1c4;font-size:13px;white-space:nowrap}
.preview-utilities summary::after{display:none}
.preview-utilities svg{flex-shrink:0}
#sound-toggle:hover,.preview-utilities summary:hover{background:#303b2b;border-color:#d0b574}
#sound-toggle .sound-muted,#sound-toggle[aria-pressed=false] .sound-waves{display:none}
#sound-toggle[aria-pressed=false] .sound-muted{display:block}
.preview-utilities .options-panel{top:52px;right:0;max-height:calc(100dvh - 170px);overflow-y:auto}
@media(max-width:1100px){.preview-controls{flex-wrap:wrap;gap:14px}.preview-utilities{padding-bottom:0}.preview-utilities .options-panel{position:fixed;top:52px;right:16px;max-height:calc(100dvh - 70px)}}
@media(max-width:600px){.preview-utilities{justify-content:center}.preview-utilities .preview-options>summary,#sound-toggle{min-height:44px;padding:10px 18px}.preview-controls{gap:10px}}
.settings-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px;color:#eee1c4;font-size:15px}
#close-settings{width:40px;height:40px;font-size:25px;border:1px solid #827252;border-radius:5px}
.language-switch{display:flex;align-items:center;gap:2px;white-space:nowrap}.language-switch button{font:13px Arial,sans-serif;min-height:36px;padding:8px 10px;color:#c9bea5;background:#171e18;border:1px solid #685c42;border-radius:5px;cursor:pointer}.language-switch button[aria-pressed=true]{color:#ffe3a3;background:#48442a;border-color:#ceb16e}.language-switch button:focus-visible{outline:2px solid #ffe3a3;outline-offset:3px}
body:not(.choosing) .toolbar{grid-template-columns:auto 1fr auto auto auto}
.choosing .toolbar .language-switch{position:absolute;left:24px}
html[lang=hu] .comparison-choice{max-width:330px}html[lang=hu] .comparison-choice button{white-space:normal}html[lang=hu] .interaction-hint{line-height:1.4}
@media(max-width:800px){.choosing .toolbar{padding-top:10px;padding-bottom:48px;min-height:118px;height:auto}.choosing .toolbar .language-switch{left:12px;bottom:6px}.choosing .toolbar .about{bottom:8px}body:not(.choosing) .toolbar{grid-template-columns:1fr auto auto;gap:8px}body:not(.choosing) .preview-name{display:none}body:not(.choosing) .language-switch{grid-column:2;grid-row:1}body:not(.choosing) .about{grid-column:3;grid-row:1}.language-switch button{padding:8px;font-size:12px}html[lang=hu] .preview-controls{flex-wrap:wrap;gap:10px}html[lang=hu] .comparison-choice{max-width:100%}}
/* Keep navigation and preview controls together when the full labels fit. */
body:not(.choosing) .back-button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #9a8458;border-radius:6px;background:#303427;color:#f3dfad;font-size:13px;line-height:1.35;font-weight:600;text-align:left;white-space:normal}
body:not(.choosing) .back-button:hover{background:#444933;border-color:#dec17d;color:#fff0c8}
body:not(.choosing) .back-button:focus-visible{outline:2px solid #ffe3a3;outline-offset:3px}
@media(min-width:1500px){
 body:not(.choosing) .toolbar{display:flex;flex-wrap:nowrap;gap:14px;padding:12px 20px;align-items:center}
 body:not(.choosing) .back-button{flex:0 0 auto;max-width:225px}
 body:not(.choosing) .preview-controls{flex:1;min-width:0;gap:20px;justify-content:center;align-items:center;flex-wrap:nowrap}
 body:not(.choosing) .preview-utilities{padding-bottom:0;align-items:center}
 body:not(.choosing) .quick-choices{flex-wrap:nowrap}
 body:not(.choosing) .quick-choices .selectors{width:140px}
 body:not(.choosing) .quick-choices select{min-width:0;width:100%}
 body:not(.choosing) .comparison-choice{padding-left:18px;max-width:275px}
 body:not(.choosing) #comparison-mode{width:100%;min-width:0}
 body:not(.choosing) .language-switch,body:not(.choosing) .about{flex:none}
}
@media(max-width:800px){body:not(.choosing) .back-button{font-size:12px;padding:7px 9px}}

/* Combat choices belong with the abilities they change. */
.playstyle-panel{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin:0 0 10px;pointer-events:auto}
.playstyle-title{color:#ded3b8;font:12px Arial,sans-serif;text-shadow:0 2px 3px #000}
#playstyle-options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;width:100%}
#playstyle-options button{min-height:40px;padding:8px 14px;border:1px solid #82734e;border-radius:5px;background:#182019eb;color:#ddd3ba;font:600 13px Arial,sans-serif;cursor:pointer}
#playstyle-options button:hover{border-color:#ebc780;background:#343b28}
#playstyle-options button[aria-pressed=true]{color:#ffe5a8;border-color:#e0bc70;background:#51472beb;box-shadow:inset 0 -2px #d8b86d}
#playstyle-options button:focus-visible{outline:2px solid #ffe3a3;outline-offset:2px}
#playstyle-options button:disabled{opacity:.55;cursor:default}
.spellbook{bottom:var(--dock-clearance,260px);max-height:calc(100dvh - var(--dock-clearance,260px) - 16px);min-height:0}
.action-slot .slot-tooltip{position:fixed;bottom:var(--dock-clearance,260px);left:50%;right:auto;transform:translateX(-50%);width:min(300px,calc(100vw - 32px));max-height:180px;overflow:auto}
.action-dock{transform:none;left:0;right:0;margin-inline:auto}
.action-slot:hover{filter:none}
@media(max-width:800px){#playstyle-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#playstyle-options button{padding:8px 6px;font-size:12px;min-height:40px}.action-slot:nth-child(n) .slot-tooltip{left:50%;right:auto;transform:translateX(-50%)}.spellbook{bottom:var(--dock-clearance,300px)}}
body:not(.choosing) .preview-controls{gap:18px;align-items:flex-start;flex-wrap:wrap}
@media(min-width:1101px){body:not(.choosing) .preview-controls .quick-choices{gap:16px}body:not(.choosing) .preview-controls .selectors{width:150px}body:not(.choosing) .comparison-choice{padding-left:18px;max-width:275px}body:not(.choosing) #comparison-mode{width:100%;min-width:0}}
@media(min-width:1500px) and (max-width:1799px){body:not(.choosing) .toolbar{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px 18px}body:not(.choosing) .language-switch{grid-row:1;grid-column:3}body:not(.choosing) .about{grid-row:1;grid-column:5}}
@media(max-width:800px){.preview-controls .quick-choices{flex:1 1 100%}body:not(.choosing) .preview-controls .comparison-choice{flex:1 1 160px;width:auto;max-width:none;padding:0}body:not(.choosing) .preview-controls .comparison-choice button{min-height:44px}body:not(.choosing) .preview-controls{align-items:flex-start}.preview-controls .preview-utilities{flex-basis:100%;justify-content:center}}
.start-races .start-choice{flex-wrap:wrap;column-gap:7px;row-gap:2px}
.start-races .start-choice .race-faction{font:11px Arial,sans-serif;flex-basis:100%;margin-left:0;color:#b9d4e7}
.start-races .start-choice[data-faction=Horde] .race-faction{color:#edb4a9}
.start-races .start-choice[data-faction=Both] .race-faction{color:#d8c392}

@media(min-width:801px) and (max-width:1499px){body:not(.choosing) .language-switch{grid-row:1;grid-column:3}body:not(.choosing) .about{grid-row:1;grid-column:5}}
@media(max-width:600px){body:not(.choosing):has(#playstyle-panel:not([hidden])){height:auto;min-height:100dvh;overflow-y:auto;padding-bottom:0}body:not(.choosing):has(#playstyle-panel:not([hidden])) main{flex:none;height:640px}body:not(.choosing):has(#playstyle-panel:not([hidden])) .site-notice{position:static}}
.start-races .start-choice .race-faction{display:block}
@media(max-width:800px){body:not(.choosing) .preview-controls{flex-direction:row;gap:10px}body:not(.choosing) .preview-controls .quick-choices{flex:1 1 100%;width:100%}.preview-controls .preview-utilities{flex:1 1 100%}}
main:has(.spellbook:not([hidden])) .slot-tooltip{display:none}
.compatibility-hint{margin:0 0 12px;color:#c1bba9;font:12px/1.4 Arial,sans-serif}
.start-choice.incompatible{color:#aba89d;border-color:#4e5147;background:#192019}
.start-choice.incompatible img{filter:grayscale(1);opacity:.65}
.start-choice.incompatible:hover,.start-choice.incompatible:focus-visible,.start-choice.pending{border-color:#d2b570;color:#eee1c4}
.choice-lock{position:absolute;right:4px;top:3px;font:10px Arial,sans-serif}
#compatibility-panel{margin:10px 0 4px;padding:12px;border:1px solid #9a8458;border-radius:6px;background:#1b241cf5;color:#eee1c4}
#compatibility-panel>strong{font:600 14px Arial,sans-serif}
#compatibility-message{margin:6px 0 10px;font:13px/1.45 Arial,sans-serif}
.compatibility-options{display:flex;flex-wrap:wrap;gap:6px}
.compatibility-options button{min-height:44px;flex:1 1 100px;padding:8px 10px;border:1px solid #a08a59;border-radius:4px;background:#343a29;color:#f6dfac;font:600 13px Arial,sans-serif}
.compatibility-options button:hover{background:#515137}
.compatibility-cancel{min-height:44px;margin-top:6px;padding:8px 0;color:#ded8c7;font:13px Arial,sans-serif;text-decoration:underline}
#compatibility-panel button:focus-visible{outline:2px solid #ffe3a3;outline-offset:2px}
@media(max-width:800px){.start-choice{min-height:44px}}
/* Let expanded compatibility choices grow downwards without covering the character. */
@media(max-width:800px){
  body.choosing{height:auto;min-height:100dvh;overflow-y:auto}
  .choosing main{flex:none;min-height:0}
  .choosing .preview-panel{height:auto}
  .choosing #viewport{height:auto;padding-top:360px;padding-bottom:18px}
  .choosing #choose-screen{position:relative;inset:auto;margin:0 auto;width:calc(100% - 24px);padding:16px 12px;max-height:none}
  .choosing .selection-caption{top:20px;bottom:auto;left:0;width:100%;transform:none}
  .choosing .selection-caption #begin-preview{position:absolute;top:270px;bottom:auto;left:50%;width:calc(100% - 40px);transform:translateX(-50%)}
  .choosing .site-notice{position:static;flex:none}
}

/* One ability row, with stable instructions underneath. */
.ability-row{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%}
.ability-row #book-toggle{min-height:48px;padding:10px 14px;border:1px solid #aa925b;border-radius:5px;background:#1b241ced;color:#ffe1a0;font:600 14px Arial,sans-serif;white-space:nowrap}
.action-dock .interaction-hint{margin:10px 0 0;font:700 13px/1.5 Arial,sans-serif;color:#f1ead7;text-shadow:0 2px 4px #000}
.touch-movement{display:none}
body:not(.choosing) .preview-controls{align-items:center}
.preview-utilities{padding-bottom:0;align-items:center}
@media(max-width:800px){
 .ability-row{gap:8px}.ability-row #book-toggle{padding:10px 8px;font-size:12px}.ability-row #book-toggle>span{display:none}
 .ability-row #actions{grid-template-columns:repeat(4,44px);gap:4px}
 .ability-row .action-slot{width:44px;height:44px}
 .ability-row .action-bar-frame{width:auto;flex:none}
 .action-dock .interaction-hint{font-size:12px;max-width:460px}
 .panel-choices select,.panel-choices #compare-race,.quick-choices select{min-height:44px;font-size:16px}
 .level-choice .milestones button{min-width:40px;min-height:44px}
 .preview-controls .preview-utilities{flex:0 1 auto}
 body:not(.choosing) .preview-controls .comparison-choice{flex:1 1 auto}
 #playstyle-options button{min-height:44px}
}
@media(max-width:600px){
 body:not(.choosing){height:auto;min-height:100dvh;overflow-y:auto;padding-bottom:0}
 body:not(.choosing) main{flex:none;height:740px}
 body:not(.choosing):has(#playstyle-panel:not([hidden])) main{height:740px}
 body:not(.choosing) .site-notice{position:static}
 .ability-row #actions{grid-template-columns:repeat(4,44px);gap:4px}
 .ability-row .action-slot{width:44px;height:44px}
 .ability-row .action-bar-frame{padding:7px}
 .action-dock{width:calc(100% - 16px);max-width:calc(100% - 16px)}
 .preview-controls .preview-utilities{flex:1 1 auto;gap:6px}
 .preview-utilities .preview-options>summary,#sound-toggle{padding:10px}
 .comparing .panel-choices label{flex-direction:column;align-items:stretch}
 .comparing .panel-choices select{width:100%}
 body:not(.choosing) .comparing .comparison-heading{min-height:242px}
 body:not(.choosing) .comparing .target-frame{top:254px}
 body:not(.choosing) .comparing .buff-tray{top:352px}
}
@media(pointer:coarse),(max-width:800px){
 .touch-movement{display:flex;gap:6px;margin-top:10px}
 .touch-movement button{min-width:44px;min-height:44px;padding:8px;border:1px solid #aa925b;border-radius:5px;background:#1b241ced;color:#ffe1a0;font:700 17px Arial,sans-serif;touch-action:none;user-select:none}
 .touch-movement button:active{background:#655631}
 .action-slot .slot-tooltip{display:none}
}
@media(max-width:360px){
 .action-dock{width:calc(100% - 8px);max-width:calc(100% - 8px)}
 .ability-row{gap:6px}.ability-row .action-bar-frame{padding:4px}
 .ability-row .action-bar-frame::before,.ability-row .action-bar-frame::after{display:none}
}
@media(max-width:800px){
 .spellbook{position:fixed;top:12px;bottom:132px;max-height:none}
 #viewport:has(.spellbook:not([hidden])) .action-dock{position:fixed;bottom:12px}
 #viewport:has(.spellbook:not([hidden])) .action-dock>:not(.ability-row){display:none}
}
/* Align the shared controls with the slots; Spellbook occupies its own column. */
/* Clear field labels and a shared bottom edge across the preview toolbar. */
#class-choice-label,#level-choice-label,.panel-choices label{font-size:13px;font-weight:600;line-height:1.3;color:#e4dcc6;text-align:left}
.panel-choices select{font-weight:400}
body:not(.choosing) .preview-controls,body:not(.choosing) .quick-choices,.preview-utilities{align-items:flex-end}
.action-dock{display:grid;grid-template-columns:max-content;column-gap:0;width:max-content;justify-content:center;align-items:center}
.action-dock> :not(.ability-row){grid-column:1;justify-self:center}
.action-dock .cast-shell{grid-row:1}
.action-dock #leave-form{grid-row:2}
.action-dock .spell-detail{grid-row:3}
.action-dock .playstyle-panel{grid-row:4;width:100%;min-width:0;contain:inline-size}
.action-dock .ability-row{display:contents}
.ability-row .action-bar-frame{grid-column:1;grid-row:5}
.ability-row #book-toggle{position:absolute;grid-column:1 / 2;grid-row:5 / 6;align-self:start;left:calc(100% + 12px);top:50%;transform:translateY(-50%);width:max-content}
.action-dock .interaction-hint{grid-row:6;width:100%;min-width:0;contain:inline-size;text-wrap:balance}
.action-dock .touch-movement{grid-row:7}
@media(max-width:900px){
 .ability-row #book-toggle{position:static;grid-column:1;grid-row:6;justify-self:center;transform:none;margin-top:8px;min-height:44px}
 .action-dock .interaction-hint{grid-row:7}
 .action-dock .touch-movement{grid-row:8}
}
@media(max-width:800px){
 .action-dock{grid-template-columns:minmax(0,1fr);width:min(460px,calc(100% - 24px));column-gap:0}
 .ability-row .action-bar-frame{justify-self:center}
 .ability-row #book-toggle{grid-column:1;grid-row:6;justify-self:center;margin-top:8px;min-height:44px}
 .action-dock .interaction-hint{grid-row:7}
 .action-dock .touch-movement{grid-row:8}
 .spellbook{bottom:184px}
}