:root{
  --bg:#121212; --panel:#1e1e1e; --panel2:#262626; --bar:#2b2b2b; --line:#3a3a3a;
  --ink:#e8e8e8; --ink2:#bdbdbd; --muted:#8a8a8a;
  --gold:#ffd100; --gold2:#c89b1a; --green:#1eff00; --green2:#4fbf3a; --blue:#58a6ff; --red:#ff4d4d;
  --tip-bg:#0e0e10; --tip-line:#5a4a1e;
}
*{box-sizing:border-box;touch-action:manipulation}
html{touch-action:manipulation}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Open Sans",system-ui,Segoe UI,Arial,sans-serif;font-size:14px;line-height:1.4}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button,.talent,.removed span,.sheet,.classes,.topbar{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
select{font:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,.talent:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.app{max-width:1200px;margin:0 auto;padding:16px 16px 48px}
/* the main element marks the page's own content for readers and extractors; it draws no box, so the layout, the sticky bars and every .app rule stay as they were */
.app>main{display:contents}
.masthead{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,var(--gold2),rgba(200,155,26,.25) 45%,transparent) 1}
.mbookw{flex:none;position:relative;width:54px;height:54px;margin:0 6px 0 7px;isolation:isolate}
.mbookw::before,.mbookw::after{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(10px);will-change:transform,opacity;background:radial-gradient(circle at 42% 46%,rgba(255,196,84,.38),rgba(255,172,44,.12) 46%,transparent 68%);animation:mist1 9.5s ease-in-out infinite}
.mbookw::after{inset:-20px;background:radial-gradient(circle at 60% 56%,rgba(255,224,140,.32),rgba(255,184,64,.09) 50%,transparent 70%);animation:mist2 14s ease-in-out infinite;animation-delay:-5s}
@keyframes mist1{0%,100%{transform:translate(0,0) scale(1);opacity:.2}33%{transform:translate(3px,-2px) scale(1.1);opacity:.28}66%{transform:translate(-3px,2px) scale(.94);opacity:.15}}
@keyframes mist2{0%,100%{transform:translate(0,0) scale(1.03);opacity:.14}40%{transform:translate(-3px,-2px) scale(.92);opacity:.22}75%{transform:translate(2px,3px) scale(1.12);opacity:.1}}
.masthead:hover .mbookw::before,.masthead:hover .mbookw::after{filter:blur(10px) brightness(1.2)}
.mbook{display:block;width:54px;height:54px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold2),0 0 0 5px #3a2a08,0 4px 10px rgba(0,0,0,.7);user-select:none;-webkit-user-drag:none}
.mbook.pulse{animation:bglow 1.6s ease-in-out}.mbookw:hover .mbook{animation:bglow 1.6s ease-in-out infinite;cursor:default}
@keyframes bglow{0%,100%{transform:scale(1)}40%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.mbook.pulse,.mbookw:hover .mbook,.banner .emblem:hover,.mbookw::before,.mbookw::after{animation:none}}
.banner .emblem{--cc:#ffd100;position:relative;width:54px;height:54px;flex:none;margin:0 6px 0 2px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold2),0 0 0 5px #3a2a08,0 0 10px color-mix(in srgb,var(--cc) 30%,transparent),0 4px 10px rgba(0,0,0,.7);transition:box-shadow .5s}
.banner .emblem::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cc) 12%,transparent),transparent 70%);z-index:-1;transition:background .5s}
.banner .emblem.pulse img{animation:epulse .55s ease-out}.banner .emblem:hover{animation:bglow 1.6s ease-in-out infinite}
@keyframes epulse{0%{transform:scale(.7);filter:brightness(2)}60%{transform:scale(1.08)}100%{transform:scale(1);filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.banner .emblem.pulse img{animation:none}.banner .emblem,.banner .emblem::before{transition:none}}
.banner .emblem img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.banner .emblem::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,232,154,.55),inset 0 6px 10px rgba(0,0,0,.45)}
.mtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand{margin:0;font-family:Cinzel,Georgia,serif;font-size:24px;font-weight:700;letter-spacing:.03em;line-height:1.1;color:#ffd75e;text-shadow:0 1px 0 #7a5a10,0 2px 6px rgba(0,0,0,.6)}
.masthead .tag{margin:0;color:var(--muted);font-size:12px;font-weight:400;font-family:inherit;line-height:1.3}
.masthead .tag b{color:var(--ink2);font-weight:600}
/* the tagline names the build the data is read from the way the game's login screen prints its own, "1.60.1 (70291)", in the aged
   gold of the rule under the masthead; the day it was checked stays the tagline's grey. A plain link to the build tracker. */
.upsrc{color:inherit;text-decoration:none;white-space:nowrap}.upsrc .v{color:#b39a5c;font-variant-numeric:tabular-nums;letter-spacing:.02em}.upsrc .v small{font-size:inherit;color:#8d7a4a}
.upsrc:hover .v,.upsrc:focus-visible .v{color:var(--gold)}.upsrc:hover{text-decoration:underline dotted rgba(200,155,26,.6);text-underline-offset:3px}
.whatsnew{margin-left:auto;align-self:center;flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--gold);background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);cursor:pointer}
.whatsnew:hover{background:#3a3323}
.gift{position:relative;z-index:1;isolation:isolate;margin-left:auto;align-self:center;flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;text-decoration:none;font:inherit;font-size:13px;font-weight:700;color:var(--gold);background:none;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.gift .ring{position:absolute;inset:0;border-radius:999px;overflow:hidden;z-index:-1;box-shadow:inset 0 0 0 1px rgba(200,155,26,.55)}
.gift .ring::before{content:"";position:absolute;inset:-160%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,215,94,.15) 74%,#ffe27a 84%,rgba(255,215,94,.15) 94%,transparent 100%);animation:giftSpin 4.5s linear infinite}
.gift .ring::after{content:"";position:absolute;inset:1.5px;border-radius:999px;background:linear-gradient(180deg,#332d1e,#25211a)}
.gift::after{content:"";position:absolute;left:8%;right:8%;top:30%;bottom:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,0,.28),transparent);filter:blur(8px);z-index:-2;pointer-events:none;animation:giftMist 4.5s ease-in-out infinite}
.gift.addon+.gift{margin-left:0}
/* the addon button: a teal pill (the colour the in-the-works chip wore), the gear icon at its left, the words spelled out, no spinning ring.
   On a phone it folds to the round chip people already knew, with a small pulse so the change is noticed. */
.gift.addon{--c:#7fe0d0;padding:5px 15px 5px 5px;gap:9px;color:#dffaf5;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,#1b1b1b),color-mix(in srgb,var(--c) 10%,#1b1b1b));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,#1b1b1b),0 2px 8px rgba(0,0,0,.4)}
.gift.addon::after{display:none}
.gift.addon .pico{position:relative;display:block;width:28px;height:28px;flex:none}
.gift.addon img{width:28px;height:28px;border-radius:7px;border:1px solid #000;box-shadow:0 0 0 1.5px var(--c),0 2px 6px rgba(0,0,0,.5);display:block}
.gift.addon .pico::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #1b1b1b,0 0 8px var(--c);animation:pinPulse 2.4s ease-in-out infinite}
.gift.addon .gt em{color:color-mix(in srgb,var(--c) 70%,#bdbdbd);font-weight:600}
.gift.addon:hover{box-shadow:inset 0 0 0 1px var(--c),0 0 20px color-mix(in srgb,var(--c) 38%,transparent),0 2px 8px rgba(0,0,0,.4);color:#fff}
.gift .gt{white-space:nowrap}.gift .gt em{font-style:normal;font-weight:600;color:#b89a5a}@media (max-width:1000px){.gift .gt em{display:none}}
.gift:hover{transform:translateY(-2px)}.gift:hover .ring::after{background:linear-gradient(180deg,#3d3522,#2b2619)}.gift:hover .ring::before{animation-duration:1.6s}.gift:hover::after{opacity:1;transform:scale(1.15)}
@keyframes giftSpin{to{transform:rotate(360deg)}}
@keyframes giftMist{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.gift .ring::before,.gift::after{animation:none}}
.masthead{overflow:visible}
.whatsnew{margin-left:12px}
@media (max-width:480px){.masthead{flex-wrap:wrap;row-gap:10px}.masthead .mtext{flex:1 1 calc(100% - 70px);min-width:0}.masthead .gift{margin-left:0;flex:1 1 0;justify-content:center;padding:6px 10px;font-size:12px}.masthead .whatsnew{flex:1 1 0;justify-content:center;margin-left:0}}
.pinw{position:relative;flex:none;align-self:center;margin-left:auto;display:flex;gap:9px}.pinw[hidden]{display:none}.masthead.haspin .gift{margin-left:0}.pin{display:inline-flex;align-items:center;gap:9px;padding:4px 13px 4px 4px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:#ece2ff;cursor:pointer;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 24%,#1b1b1b),color-mix(in srgb,var(--c) 9%,#1b1b1b));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,#1b1b1b);transition:box-shadow .2s,transform .2s;animation:pinDrop .5s cubic-bezier(.2,.7,.2,1) both .35s}.pin:hover,.pin[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--c),0 0 20px color-mix(in srgb,var(--c) 38%,transparent)}.pin:active{transform:scale(.97)}.pin .pico{position:relative;display:block;width:28px;height:28px;flex:none}.pin .pico img,.pincard .psp img{width:28px;height:28px;border-radius:7px;border:1px solid #000;box-shadow:0 0 0 1.5px var(--c),0 2px 6px rgba(0,0,0,.5);display:block}.pin .pico::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #1b1b1b,0 0 8px var(--c);animation:pinPulse 2.4s ease-in-out infinite}.pin{padding:4px}.pin .ptxt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes pinPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}@keyframes pinDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes pinIn{from{opacity:0;transform:translateX(var(--tx)) translateY(-6px) scale(.98)}to{opacity:1;transform:translateX(var(--tx))}}.pincard{--tx:calc(-50% + var(--dx,0px));position:absolute;top:calc(100% + 12px);left:50%;z-index:60;width:396px;transform:translateX(var(--tx));padding:12px 16px 14px 58px;border-radius:12px;background:#1b1b1b;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,#1b1b1b),0 18px 44px rgba(0,0,0,.65);text-align:left;animation:pinIn .2s cubic-bezier(.2,.7,.2,1)}.pincard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:44px;border-radius:12px 0 0 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,#181818),color-mix(in srgb,var(--c) 8%,#181818));box-shadow:inset -1px 0 0 color-mix(in srgb,var(--c) 40%,#181818)}.pincard::after{content:"";position:absolute;top:-6px;left:var(--cx,50%);width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:#1b1b1b;box-shadow:-1px -1px 0 color-mix(in srgb,var(--c) 45%,#1b1b1b)}.pincard .psp{position:absolute;left:8px;top:12px}.pincard .pey{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--c)}.pincard h3{margin:3px 26px 4px 0;font-size:16px;line-height:1.25;color:var(--ink)}.pincard p{margin:0;font-size:13px;line-height:1.45;color:var(--ink2)}.pincard .pcls{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 12px}.pincard .pcls a{display:block;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px #000,0 0 0 2px #4a4334;opacity:.8;transition:opacity .15s,transform .15s,box-shadow .15s}.pincard .pcls a img{display:block;width:28px;height:28px;border-radius:50%}.pincard .pcls a:hover{opacity:1;transform:translateY(-1px);box-shadow:0 0 0 1px #000,0 0 0 2px var(--c)}.pincard .pcls a.here{opacity:1;box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}.pincard .pact{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.pincard .pgo{display:inline-block;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;color:#1a1408;background:linear-gradient(180deg,#ffdf7a,#d9a93a);box-shadow:0 0 0 1px #6b4a12,0 2px 8px rgba(0,0,0,.4)}.pincard .pgo:hover{filter:brightness(1.08)}.pincard .pmore{font-size:12.5px;font-weight:700;color:var(--gold);background:none;border:0;padding:0;font-family:inherit;cursor:pointer}.pincard .pmore:hover{text-decoration:underline;text-underline-offset:2px}.pincard .poff{margin-left:auto;font:inherit;font-size:11.5px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}.pincard .poff:hover{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}.pincard .px{position:absolute;top:6px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}.pincard .px:hover{color:var(--ink);background:#2a2a2a}@media (max-width:480px){.masthead.haspin{position:relative}.masthead.haspin .mtext{flex:1 1 calc(100% - 124px)}.masthead.haspin2 .mtext{flex:1 1 calc(100% - 170px)}.pinw{gap:8px}.pinw{position:static}.pincard{--tx:0px;left:0;right:0;width:auto;top:calc(100% + 10px)}.pincard .pcls{gap:6px}.pincard .pcls a,.pincard .pcls a img{width:26px;height:26px}}@media (prefers-reduced-motion:reduce){.pin,.pin .pico::after,.pincard{animation:none}}.whatsnew .dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
/* desktop: the four masthead chips (pin, addon, Back to Class, What's new) share one 32 px height; icons 22 px (Chris, 28 Sep) */
@media (min-width:481px){.masthead .pin,.masthead .gift.addon{box-sizing:border-box;min-height:32px;padding-top:2px;padding-bottom:2px}.masthead .pin .pico,.masthead .pin .pico img,.masthead .gift.addon .pico,.masthead .gift.addon .pico img{width:22px;height:22px;border-radius:6px}}
/* on a phone the addon button folds to the round chip and keeps its old place, top right beside the other chip; the title makes room on the first line. After the pin rules on purpose, so these win. */
@media (max-width:480px){.masthead .gift.addon{flex:none;padding:4px;gap:0;margin-left:8px}.masthead .gift.addon .gt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .masthead .gift.addon{order:2;margin-left:auto}.masthead .pinw{order:3;margin-left:-4px /* the masthead gap is 12: the two chips sit 8 apart as they did in one holder before, and the wordmark keeps its 202px and its one line */}.masthead #giftBtn{order:4}.masthead .whatsnew{order:5}
  .masthead:not(.haspin) .mtext{flex:1 1 calc(100% - 150px)}.masthead.haspin .mtext{flex:1 1 calc(100% - 200px)}.masthead.haspin2 .mtext{flex:1 1 calc(100% - 250px)}}
.whatsnew.unread .dot{display:block}
.dback{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55)}
.dback[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(400px,100vw);background:var(--panel);border-left:1px solid var(--gold2);box-shadow:-12px 0 40px rgba(0,0,0,.6);display:flex;flex-direction:column;animation:slidein .22s ease-out}
.drawer[hidden]{display:none}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dhead b{font-family:Cinzel,Georgia,serif;font-size:18px;color:#ffd75e;letter-spacing:.03em;text-shadow:0 1px 0 #5a4210}
.dhead .x{font:inherit;font-size:22px;line-height:1;color:#aaa;background:none;border:0;padding:2px 8px;cursor:pointer;border-radius:4px}.dhead .x:hover{color:#fff;background:#333}
.dlist{list-style:none;margin:0;padding:6px 16px 10px;overflow:auto;flex:1;overscroll-behavior:contain}
.dlist .dd{margin:14px 0 6px;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:0;padding:0}
.dlist li{padding:8px 0 10px;border-bottom:1px solid #2a2a2a}
.dlist li:last-child{border-bottom:0}
.dlist li b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.dlist li span{color:var(--ink2);font-size:13px;line-height:1.45}
.dlist li span a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.dfoot{margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.4}
.dfoot a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}.dfoot a:hover{color:var(--gold)}
@media (max-width:480px){.mbookw{margin:-8px 2px -8px -4px}.mtext{flex:1}.brand{font-size:21px}.whatsnew{padding:6px 10px;font-size:12px}.banner .emblem{width:44px;height:44px;margin:0}.masthead .tag{font-size:11px}}

.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;background:var(--bar);border-radius:4px;padding:0;overflow:hidden}
.notice{flex-basis:100%;display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;border-radius:6px;background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2),0 0 22px rgba(255,209,0,.1);font-size:13px;color:var(--ink,#eee);line-height:1.35;position:relative}
.notice[hidden]{display:none}.notice b{color:var(--gold)}.notice span{flex:1;min-width:0}.notice button#noticeLog{font:inherit;font-weight:700;color:var(--gold);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.notice .nx{flex:none;width:30px;height:30px;display:grid;place-items:center;font:inherit;font-size:20px;line-height:1;color:var(--gold);background:rgba(255,209,0,.08);border:1px solid var(--gold2);border-radius:50%;cursor:pointer;padding:0 0 2px;transition:background .15s,color .15s,transform .15s}.notice .nx:hover{color:#1a1608;background:var(--gold);transform:scale(1.08)}
/* two slow gold arrows outside the bar, pointing in at it, while the notice is up (room for them only on wide screens) */
.notice::before,.notice::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-9px;border-top:9px solid transparent;border-bottom:9px solid transparent;filter:drop-shadow(0 0 6px rgba(255,209,0,.7));opacity:0;pointer-events:none}
.notice::before{left:-30px;border-left:16px solid var(--gold)}.notice::after{right:-30px;border-right:16px solid var(--gold)}
@media (min-width:1260px){.notice::before{animation:nudgeR 1.9s ease-in-out infinite}.notice::after{animation:nudgeL 1.9s ease-in-out infinite}}
@keyframes nudgeR{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(8px);opacity:1}}
@keyframes nudgeL{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-8px);opacity:1}}
@media (max-width:1259px){.notice::before,.notice::after{display:none}}
@media (prefers-reduced-motion:reduce){.notice::before,.notice::after{animation:none;opacity:.8}}
@media (max-width:560px){.poptop .pts>i:last-child{flex-basis:100%}.notice .more,.notice button#noticeLog{display:none}.notice{font-size:13px;padding:7px 10px;cursor:pointer}.notice>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice>span::after{content:' ›';color:var(--gold);font-weight:700}.notice .nx{width:26px;height:26px;font-size:17px}}
/* the server's section pages (/racials, /legacy, /abilities) carry a long description in the fold title: it wraps instead of forcing the page wide on phones */
.fold.static .fhead{flex-wrap:wrap}.fold.static .fhead .ltitle{flex:1 1 200px;max-width:100%;min-width:0}
/* popular builds: the fold under the trees, and the pick-rate badges on the cells */
.popa{color:inherit;text-decoration:none}.crs a.fine{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}.crs a.fine:hover{color:var(--gold);border-bottom-color:var(--gold)}.pophead{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 0 10px;font-size:13px;color:var(--muted)}.pophead b{color:var(--ink)}.popstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}@media (min-width:700px){.popstats{grid-template-columns:repeat(4,max-content)}}.ptrust{margin:0 0 10px;font-size:13px;color:var(--muted)}.ptrust b{color:var(--ink)}#foldPopular .ptrust>summary{list-style:none;cursor:pointer;display:grid;gap:4px;align-items:start;justify-items:start;padding:0;margin:0;border:0;border-radius:6px;user-select:auto}.ptrust>summary::-webkit-details-marker{display:none}.ptrust>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.prow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.ptok{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:1px 9px 1px 3px;border:1px solid rgba(79,191,58,.28);background:transparent;border-radius:999px;color:var(--ink2)}.ptok i{font-style:normal;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(79,191,58,.85);color:#0d1a0a;font-size:9px;font-weight:800;line-height:1}.phow{color:var(--gold2);border-bottom:1px dotted currentColor;line-height:1.2}.phow::after{content:"How?"}.ptrust[open] .phow::after{content:"Hide"}.ptrust>summary:hover .phow{color:var(--gold)}.pnext{display:grid;gap:3px;width:100%;max-width:320px}.pmeter{display:block;height:3px;border-radius:2px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.pmeter i{display:block;height:100%;background:var(--gold2);border-radius:2px}.pnote{color:var(--muted)}.pexp{margin:10px 0 0;padding:10px 12px 10px 28px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--ink2);line-height:1.5;display:grid;gap:6px}
.specbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#222;box-shadow:inset 0 0 0 1px #333;margin:0 0 6px}.specbar i{display:block;height:100%}
.speckey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink2);margin:0 0 14px}.speckey img{width:16px;height:16px;border-radius:3px;border:1px solid #000;vertical-align:-3px;margin-right:4px}
.poptop{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.poptop li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;min-width:0;overflow:hidden;border-radius:8px;background:#202020;box-shadow:inset 0 0 0 1px #2e2e2e}
.poptop .rank{font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;color:var(--gold);text-align:center;font-variant-numeric:tabular-nums}.poptop li.seated .rank{color:var(--muted)}
.poptop .pbar{display:block;height:4px;border-radius:2px;background:#2c2c2c;margin:5px 0 0;max-width:220px}.poptop .pbar i{display:block;height:100%;border-radius:2px;background:var(--gold)}.poptop li.seated .pbar i{background:#8a8a8a}
.poptop .pts{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.poptop .pts>i:last-child{white-space:nowrap}.poptop .pts img{width:18px;height:18px;border-radius:3px;border:1px solid #000}.poptop .pts i{font-style:normal;color:var(--muted);font-weight:400}
.poptop .meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}.poptop .meta b{color:var(--ink2);font-weight:600}
.poptop a.load{font-size:12px;font-weight:700;color:var(--gold);text-decoration:none;padding:5px 10px;border-radius:6px;background:rgba(255,209,0,.08);box-shadow:inset 0 0 0 1px var(--gold2)}.poptop a.load:hover{background:rgba(255,209,0,.16)}
.pickcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 24px;margin:0 0 12px}
.pickcols h3{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pickcols ul{list-style:none;margin:0;padding:0}.pickcols li{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid #262626;font-size:13px;color:var(--ink)}.pickcols li img{width:22px;height:22px;border-radius:4px;border:1px solid #000}.pickcols li small{color:var(--muted);margin-left:4px}.pickcols li b{margin-left:auto;color:var(--green);font-variant-numeric:tabular-nums}.pickcols .low li b{color:#ff8a8a}
.prtoggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer;padding:6px 10px;border-radius:6px;background:#202020;box-shadow:inset 0 0 0 1px #2e2e2e}.prtoggle input{accent-color:var(--gold)}.pk{color:#9fd0ff;font-size:12px;margin-top:5px;line-height:1.4}.pk b{color:#fff;font-weight:700}
/* pick rates: beside the button, one row of tree icons picks which builds the badges count (all of the class, or the builds that lead in one tree) */
.prset{display:none;flex:1 1 100%;gap:8px}body.pr .prset{display:flex}.prset button{flex:1 1 0;min-width:0;max-width:220px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 8px;border:0;border-radius:4px;font:inherit;font-size:13px;font-weight:600;color:#ddd;background:#3a3a3a;box-shadow:inset 0 0 0 1px #4a4a4a;cursor:pointer;white-space:nowrap}.prset button:hover{background:#454545;color:#fff}.prset button[aria-pressed="true"]{color:#1a1408;background:var(--gold);box-shadow:none}.prset button img{width:18px;height:18px;border-radius:3px;box-shadow:0 0 0 1px #000;flex:none}.prset button span{overflow:hidden;text-overflow:ellipsis}.prset button[aria-pressed="true"] img{box-shadow:0 0 0 1px #6b4a12}@media (min-width:641px){.prset{justify-content:flex-end}.prset button{flex:0 0 auto;max-width:none;padding:5px 14px}}
.talent .pr{display:none;align-items:center;gap:3px;position:absolute;left:-6px;top:-8px;padding:1px 5px 1px 3px;border-radius:8px;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:#111;background:var(--gold);box-shadow:0 0 0 1px #000;pointer-events:none;z-index:2}
body.pr .talent .pr{display:inline-flex}.talent .pr img{position:static;inset:auto;width:13px;height:13px;border-radius:3px;box-shadow:0 0 0 1px #000}body.pr .talent .pr.lo{background:#7a7a7a;color:#111}body.pr .talent .pr.hi{background:var(--green)}
/* what's new, at a glance: one card for the game, one for the site, then the two tabs for the detail */
.dglance{display:flex;flex-direction:column;gap:8px;padding:12px 16px 4px}
.gl{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 10px;padding:10px 12px;border-radius:8px;background:#232323;box-shadow:inset 0 0 0 1px #2e2e2e;text-align:left}
.gl.fresh{box-shadow:inset 0 0 0 1px var(--gold2);background:#2a271d}
.gl .gi{grid-row:1/4;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#1a1a1a;box-shadow:inset 0 0 0 1px #333;font-size:15px;color:var(--gold)}.gl .gi img{width:22px;height:22px;border-radius:4px}
.gl .gk{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:6px}.gl .gk small{letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;font-size:11px}.gl .gk .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.gl .gt{color:var(--ink);font-size:13.5px;line-height:1.4;margin:2px 0 4px}.gl .gt b{color:#ffd75e}
.gl .ga{display:flex;flex-wrap:wrap;gap:4px 14px}.gl .ga button,.gl .ga a{font:inherit;font-size:12.5px;font-weight:700;color:var(--gold);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}.gl .ga button:hover,.gl .ga a:hover{text-decoration:underline;text-underline-offset:2px}
/* what's new: two topics, the game and the site, each at a glance first with a fold for the detail */
.topic{margin:12px 16px 0;padding:12px 12px 8px;border-radius:10px;background:#1f1f1f;box-shadow:inset 0 0 0 1px #2d2d2d}
.topic.game{box-shadow:inset 0 0 0 1px #4a3d1c;background:linear-gradient(180deg,#27221a,#1f1f1f 70%)}
.topic.site{box-shadow:inset 0 0 0 1px #24384a;background:linear-gradient(180deg,#1b2430,#1f1f1f 70%)}
.topic .th{display:flex;align-items:center;gap:10px;margin:0 0 10px}.topic .th .ti{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:#151515;box-shadow:inset 0 0 0 1px #3a3a3a;font-size:18px;color:var(--gold);flex:none}.topic .th .ti img{width:28px;height:28px;border-radius:6px}
.topic .th b{display:block;font-family:Cinzel,Georgia,serif;font-size:16px;color:#ffd75e;letter-spacing:.02em;line-height:1.1}.topic.site .th b{color:#bfe0ff}.topic .th small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.topic .th .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);margin-left:auto;flex:none}
.bstrip{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}.bpill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:#181818;box-shadow:inset 0 0 0 1px #333;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700}.bpill i{width:6px;height:6px;border-radius:50%;background:#444;flex:none}.bpill.hot i{background:var(--gold);box-shadow:0 0 5px var(--gold)}.bpill.now{color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold2)}.bpill small{color:var(--muted);font-weight:400}
.topic .hl{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--ink2)}.topic .hl b{color:var(--ink)}
.clsrow{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:0 0 10px}@media (max-width:560px){.clsrow{gap:4px}.clsrow .n{min-width:14px;font-size:9px;right:-3px;top:-5px;padding:0 3px}}.clsrow button{position:relative;font:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:6px}.clsrow img{width:100%;aspect-ratio:1;border-radius:6px;border:1px solid #000;display:block;box-shadow:0 0 0 1px var(--gold2)}.clsrow button.quiet img{filter:grayscale(1) brightness(.4);box-shadow:none}.clsrow .n{position:absolute;right:-4px;top:-6px;min-width:16px;padding:1px 4px;border-radius:8px;background:var(--gold);color:#111;font-size:10px;font-weight:700;text-align:center;box-shadow:0 0 0 1px #000;line-height:1.3}.clsrow button:hover img{filter:none;box-shadow:0 0 0 1px #ffd75e}
.topic details.deeper{border-top:1px solid #2e2e2e;margin-top:2px}.topic details.deeper>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 0 7px;color:var(--gold);font-weight:700;font-size:13px}.topic.site details.deeper>summary{color:#9fd0ff}.topic details.deeper>summary::-webkit-details-marker{display:none}.topic details.deeper>summary::after{content:'\203A';margin-left:auto;font-size:20px;line-height:1;transition:transform .15s}.topic details.deeper[open]>summary::after{transform:rotate(90deg)}.topic details.deeper>summary small{color:var(--muted);font-weight:400}
.topic .bp-words{margin:4px 0 8px;padding:10px}.topic .bp-words h4{display:none}.topic .bp-words li{flex-wrap:wrap;font-size:13px}.topic .mm{flex:0 0 100%;margin-left:36px;justify-content:flex-start}
.topic a.more{display:inline-block;margin:0 0 8px;color:var(--gold);font-weight:700;font-size:12.5px;text-decoration:none}.topic a.more:hover{text-decoration:underline;text-underline-offset:2px}
.ents{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}.ent{padding:8px 10px;border-radius:8px;background:#181818;box-shadow:inset 0 0 0 1px #2a2a2a;cursor:pointer}.ent.fresh{box-shadow:inset 0 0 0 1px #3a5a78}.ent time{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.ent b{display:block;color:var(--ink);font-size:13.5px;margin:2px 0}.ent .one,.ent .full{display:block;color:var(--ink2);font-size:12.5px;line-height:1.45}.ent .full{display:none;margin-top:4px}.ent.open .one{display:none}.ent.open .full{display:block}.ent .hint{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.dbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:12px}
.topic .dlist{padding:4px 0 0;overflow:visible;flex:none}.topic .dlist li{padding-left:0;padding-right:0}
.drawer .dfoot{margin-top:auto}
/* the two tiles: both topics always on screen, equal weight; the lit one is what shows below */
.dswitch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px 0;flex:none}
/* Get this by email: the sign-up band at the top of the drawer, the game tile's look, the classes as icons to tick, the form in place */
.dmail{flex:none;margin:6px 16px 10px;padding:11px 12px 10px;border-radius:10px;background:linear-gradient(180deg,#2b261a,#1e1e1e);box-shadow:inset 0 0 0 1.5px var(--gold2),0 0 18px rgba(255,209,0,.08)}
.dmail .mh{display:flex;align-items:center;gap:10px}.dmail .mh>img{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold2)}
.dmail .mt{font-family:Cinzel,Georgia,serif;font-size:14.5px;letter-spacing:.04em;color:#ffd75e;font-weight:700;line-height:1.1}.dmail .ms{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.35}
.dmail form{display:flex;gap:6px;margin-top:10px}.dmail input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border-radius:6px;border:1px solid #4a3d1c;background:#141414;color:var(--ink)}.dmail input:focus{outline:none;border-color:var(--gold2)}
.dmail form button{font:inherit;font-weight:700;font-size:13px;padding:8px 12px;border-radius:6px;border:0;background:var(--gold);color:#1a1408;white-space:nowrap;cursor:pointer}.dmail form button:disabled{opacity:.6}
.dmail .mc{display:flex;align-items:center;gap:4px;margin-top:8px;flex-wrap:wrap}.dmail .mc small{flex-basis:100%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.dmail .mc button{padding:0;background:none;border:2px solid #2a2a2a;border-radius:6px;width:28px;height:28px;opacity:.5;cursor:pointer}.dmail .mc button img{width:24px;height:24px;border-radius:4px;display:block}.dmail .mc button.on{border-color:var(--gold);opacity:1;box-shadow:0 0 8px rgba(255,209,0,.25)}
.dmail .mo{font-size:12.5px;color:var(--ink);margin:8px 0 0;line-height:1.4}.dmail .mo:empty{display:none}.dmail .mo b{color:var(--gold)}
.dmail .mf{font-size:11px;color:var(--muted);margin:7px 0 0;line-height:1.4}.dmail .mf a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}
.dmail.done .mh,.dmail.done form,.dmail.done .mc,.dmail.done .mf{display:none}.dmail.in .mo{margin-top:0}.dmail.in form,.dmail.in .mc,.dmail.in .mf{display:none}
.tile{position:relative;text-align:left;font:inherit;color:var(--ink);border:0;border-radius:10px;padding:10px 12px 10px;cursor:pointer;background:#1b1b1b;box-shadow:inset 0 0 0 1px #2e2e2e;display:flex;flex-direction:column;gap:2px;min-width:0;opacity:.7;transition:opacity .15s,box-shadow .15s}
.tile:hover,.tile.on{opacity:1}.tile.game.on{box-shadow:inset 0 0 0 1.5px var(--gold2);background:linear-gradient(180deg,#2b261a,#1e1e1e)}.tile.site.on{box-shadow:inset 0 0 0 1.5px #3f6f96;background:linear-gradient(180deg,#1b2735,#1e1e1e)}
.tile.on::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:#1e1e1e;box-shadow:1.5px 1.5px 0 var(--gold2)}.tile.site.on::after{box-shadow:1.5px 1.5px 0 #3f6f96}
.tile .tk{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:6px}.tile.site .tk{color:#9fd0ff}.tile .tk .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.tile .tb{font-family:Cinzel,Georgia,serif;font-size:18px;color:#ffd75e;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile.site .tb{color:#d4ebff}
.tile .ts{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdots{display:flex;gap:3px;margin-top:7px;height:18px;align-items:flex-end}.cdots i{flex:1;height:6px;border-radius:2px;background:#333}.cdots i.on{height:100%;background:linear-gradient(180deg,#ffd75e,#a8803c)}
.spark{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:7px}.spark i{flex:1;border-radius:2px 2px 0 0;background:#2a3540}.spark i.on{background:linear-gradient(180deg,#9fd0ff,#3f6f96)}
.dbody[data-on=game] #topicSite,.dbody[data-on=site] #topicGame{display:none}
.dbody .topic{margin-top:14px}
@media (min-width:900px){.drawer.wide .dbody{display:grid;grid-template-columns:1fr 1fr;align-items:start}.drawer.wide .dbody #topicGame,.drawer.wide .dbody #topicSite{display:block}.drawer.wide .dbody .topic.game{margin-right:4px}.drawer.wide .dbody .topic.site{margin-left:4px}.drawer.wide .dbody .dmail{grid-column:1/-1}.drawer.wide .tile{opacity:1}.drawer.wide .tile.on::after{display:none}}
.btl{list-style:none;display:flex;margin:2px 0 12px;padding:0;position:relative}.btl::before{content:'';position:absolute;left:10%;right:10%;top:7px;height:2px;background:#3a3325}
.btl li{flex:1;position:relative}.btl button{font:inherit;background:none;border:0;color:var(--muted);cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.btl button i{width:14px;height:14px;border-radius:50%;background:#2b2b2b;box-shadow:0 0 0 3px #231f17,inset 0 0 0 1px #5a5a5a;position:relative}.btl li.hot button i{background:radial-gradient(circle at 40% 35%,#ffe9a8,#d4a843 55%,#6b4a1a);box-shadow:0 0 0 3px #231f17,0 0 9px rgba(255,209,0,.55)}
.btl li.on button{color:var(--ink)}.btl li.on button i{outline:2px solid var(--gold2);outline-offset:2px}.btl b{font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:700}.btl small{font-size:10.5px}
.topic .note{margin:0 0 10px;font-size:12px;line-height:1.4;color:var(--muted)}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#181818;box-shadow:inset 0 0 0 1px #333;font-size:12px;color:var(--ink2)}.chip b{color:var(--ink);font-size:13.5px}.chip i{font-style:normal;font-weight:700}
.chip.k-new i,.chip.k-replaced i{color:#9fe870}.chip.k-gone i{color:#ff7a7a}.chip.k-moved i,.chip.k-tree i{color:var(--gold)}.chip.k-prereq i,.chip.k-ranks i{color:#7fc8ff}
.clsrow button.on img{box-shadow:0 0 0 2px #ffd75e,0 0 10px rgba(255,215,94,.45)}
.spot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 10px;padding:10px 12px;border-radius:8px;background:#181818;box-shadow:inset 0 0 0 1px #4a3d1c;margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink)}
.spot .ci{width:28px;height:28px;border-radius:6px;border:1px solid #000}.spot .txt b{color:#ffd75e}.spot .ti{width:18px;height:18px;border-radius:3px;border:1px solid #000;vertical-align:-4px;margin:0 3px 0 2px}.spot .nm{color:var(--ink);font-weight:600}.spot .soft{color:var(--muted)}.spot .mm{grid-column:2;margin:0;flex:none;justify-content:flex-start}
.topic .soft{margin:0 0 8px;font-size:12px;color:var(--muted);line-height:1.4}
.week{margin:0 0 12px}.week p{margin:8px 0 0;font-size:12.5px;color:var(--ink2)}.week p b{color:#d4ebff}
.wbars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:76px}.wbars span{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}.wbars i{display:block;width:100%;border-radius:4px 4px 0 0;background:#26313d}.wbars span.on i{background:linear-gradient(180deg,#9fd0ff,#3f6f96)}.wbars b{font-size:11px;color:#d4ebff;line-height:1;min-height:11px}.wbars small{font-size:10.5px;color:var(--muted);line-height:1}.wbars span.today small{color:#9fd0ff;font-weight:700}
.ent time i{font-style:normal;margin-left:6px;padding:0 5px;border-radius:7px;background:#24384a;color:#bfe0ff;letter-spacing:.04em}

/* round five: each area unmistakable (icon, colour, type), the summary as one number + bar + four buckets, depth in folds */
.tile{opacity:.9;padding:10px 12px 11px}.tile.game{background:linear-gradient(180deg,#221d14,#1b1b1b);box-shadow:inset 0 0 0 1px #3b3118}.tile.site{background:linear-gradient(180deg,#16202c,#1b1b1b);box-shadow:inset 0 0 0 1px #223548}
.tile:not(.on) .tb,.tile:not(.on) .ts{opacity:.75}.tile.game.on{box-shadow:inset 0 0 0 2px var(--gold2),0 0 18px rgba(255,209,0,.08)}.tile.site.on{box-shadow:inset 0 0 0 2px #4f86b3,0 0 18px rgba(127,200,255,.08)}
.tile .tk{font-family:Cinzel,Georgia,serif;font-size:12.5px;letter-spacing:.05em;gap:7px;margin-bottom:3px;color:#ffd75e}.tile.site .tk{color:#bfe0ff}.tile .tk .dot{margin-left:auto}
.tile .tic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#141414;box-shadow:inset 0 0 0 1px var(--gold2);font-size:12px;color:var(--gold);flex:none;font-family:inherit}.tile.site .tic{box-shadow:inset 0 0 0 1px #4f86b3}.tile .tic img{width:16px;height:16px;border-radius:3px}
.tile .tb{font-size:17px}
.dbody .topic.game{border-top:3px solid var(--gold2)}.dbody .topic.site{border-top:3px solid #4f86b3}
.btl em{font-style:normal;font-size:10px;letter-spacing:.04em;color:var(--muted);min-height:12px}.btl li.on em{color:var(--gold)}
.sum{margin:0 0 12px;padding:12px;border-radius:10px;background:#181818;box-shadow:inset 0 0 0 1px #333}
.sumhead{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}.sumhead>b{font-family:Cinzel,Georgia,serif;font-size:34px;line-height:1;color:#ffd75e;text-shadow:0 2px 0 rgba(0,0,0,.5)}.sumhead span{font-size:14px;color:var(--ink);line-height:1.3}.sumhead span b{color:#ffd75e}
.sum.quiet .sumhead>b{color:var(--muted)}.sum.quiet .sumhead{margin:0}.sum.quiet .sumhead span{color:var(--ink2)}
.sumbar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;margin:0 0 10px}.sumbar i{display:block;height:100%;transition:opacity .15s}.sumbar i.dim{opacity:.25}
.b-added,.sumbar i.b-added{background:#9fe870}.b-removed,.sumbar i.b-removed{background:#ff7a7a}.b-moved,.sumbar i.b-moved{background:#ffd100}.b-rules,.sumbar i.b-rules{background:#7fc8ff}
.sumkey{display:grid;grid-template-columns:1fr 1fr;gap:6px}.sumkey button{display:flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--ink2);background:#202020;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;box-shadow:inset 0 0 0 1px #2e2e2e;text-align:left}
.sumkey button i{width:10px;height:10px;border-radius:3px;flex:none}.sumkey button.b-added i{background:#9fe870}.sumkey button.b-removed i{background:#ff7a7a}.sumkey button.b-moved i{background:#ffd100}.sumkey button.b-rules i{background:#7fc8ff}
.sumkey button i.g{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#111}.sumkey button i.g svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sumkey button b{color:var(--ink);font-size:15px}.sumkey button.on{box-shadow:inset 0 0 0 1.5px var(--gold2);background:#2a261b;color:var(--ink)}.sumkey button:hover{color:var(--ink)}
.topic .pick{margin:0 0 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.topic .lines{padding:2px 0 6px}.topic .lines .bcls{margin:0 0 4px}.topic .lines .brows{display:block}
/* the game tile carries the game's own logo, the site tile the book; both chips the same height */
.tile .tic{width:30px;height:30px;border-radius:7px}.tile .tic img{width:22px;height:22px}.tile .tic.logo{width:38px;height:32px;background:none;box-shadow:none;border-radius:0}.tile .tic.logo img{width:38px;height:auto;border-radius:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.tile:not(.on) .tic.logo img{opacity:.8}
/* round six: labelled timeline, tappable charts, quick-view cards all the way down */
.btl b span{font-weight:400;font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-right:2px}.btl li.on b span{color:var(--gold)}
.sumbar button{border:0;padding:0;cursor:pointer;height:100%;transition:opacity .15s,filter .15s}.sumbar button.dim{opacity:.25}.sumbar button:hover{filter:brightness(1.15)}.sumbar{height:14px}
/* round seven: numbers and wording join the buckets, races and Legacy join the pick rows, the spot reads the diff in a few words */
.b-numbers,.sumbar button.b-numbers{background:#ffb070}.b-wording,.sumbar button.b-wording{background:#c9a8ff}.sumkey button.b-numbers i{background:#ffb070}.sumkey button.b-wording i{background:#c9a8ff}
.sumkey.many{grid-template-columns:repeat(3,minmax(0,1fr))}.sumkey.many button{font-size:12px;padding:6px 8px;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}.sumkey.many button b{font-size:14px}@media (max-width:640px){.sumkey.many{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the chosen tile's pointer sits on the tile's edge; the panel below starts under it, so the heading is never covered */
.dswitch{margin-bottom:8px}
.clsrow.places{grid-template-columns:repeat(10,1fr)}
.spot .lbl,.bp-words .lbl{color:var(--gold);font-weight:700}.spot del,.bp-words del{color:#ff8a8a;text-decoration:line-through;opacity:.85}.spot ins,.bp-words ins{color:#b6f28a;text-decoration:none}
.spot .brows{grid-column:1/-1;margin:0;padding:0}.spot .brows li{border-left-width:2px}
/* the ledger: a label per group, one line per change */
.ledg{margin:4px 0 0}.ledg h5{margin:8px 0 2px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}.ledg:first-child h5{margin-top:2px}
.ledg ul{list-style:none;margin:0;padding:0}.ledg li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 8px;align-items:start;padding:5px 0;border-bottom:1px solid #262626;font-size:13px;line-height:1.45;color:var(--ink2)}.ledg li:last-child{border-bottom:0}.ledg li.bare{grid-template-columns:1fr}
.ledg li .ti{width:22px;height:22px;margin:1px 0 0;border-radius:4px;border:1px solid #000}.spot .txt .ledg li b,.bp-words .txt .ledg li b{color:var(--ink);font-weight:600}.ledg li small{color:var(--muted);font-size:11.5px}.ledg li .what .soft{display:block;color:var(--muted);font-size:12px}
.spot .txt>b{display:block;margin-bottom:2px}.bp-words li .txt>b{display:block;margin-bottom:2px}
/* the reader's own character, first */
.you{margin:0 0 14px;padding:10px 12px 8px;border-radius:10px;background:linear-gradient(180deg,#2a2416,#1c1b18);box-shadow:inset 0 0 0 1.5px var(--gold2),0 0 18px rgba(255,209,0,.06)}
.you .yh{display:flex;align-items:center;gap:8px}.you .yh .ci{width:30px;height:30px;border-radius:7px;border:1px solid #000;flex:none}.you .yh .ci+.ci{margin-left:-14px;box-shadow:0 0 0 2px #2a2416}.you .yh div{min-width:0}.you .yh b{display:block;font-family:Cinzel,Georgia,serif;font-size:16px;color:#ffd75e;line-height:1.2}.you .yh span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.35}
.you .yraces{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 0 2px}.you .yraces small{color:var(--muted);font-size:11px;margin-right:4px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:none}.you .yraces button{font:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:6px;opacity:.55}.you .yraces button img{width:26px;height:26px;border-radius:6px;border:1px solid #000;display:block}.you .yraces button.on,.you .yraces button:hover{opacity:1}.you .yraces button.on img{box-shadow:0 0 0 2px #ffd75e,0 0 8px rgba(255,215,94,.45)}
.ledg .wn{margin:3px 0 1px}.ledg .wn summary{list-style:none;cursor:pointer;font-size:11.5px;color:var(--gold);letter-spacing:.03em;user-select:none}.ledg .wn summary::-webkit-details-marker{display:none}.ledg .wn summary::after{content:' \203A'}.ledg .wn[open] summary::after{content:''}
.topic .bluelink{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--ink2)}.bluelink a{color:#9fd0ff}
/* Blizzard's notes beyond the tooltips: a colour key, coloured counts per place, a few headers, one ability per line */
.bnotes,.ynotes{--n-rule:#7fc8ff;--n-info:#b9a6ff;--n-fix:#9fe870;--n-later:#a8a8a8;--n-known:#ff8a8a;--n-pending:#ffb070;--n-hotfix:#f5d06a}.bnotes{padding:2px 0 4px}.topic .bnotes .bcls{margin:0 0 4px}
.nkey{display:flex;flex-wrap:wrap;gap:3px 12px;margin:2px 0 8px;font-size:11.5px;color:var(--muted)}.nkey span{display:inline-flex;align-items:center;gap:5px}.nkey i{width:9px;height:9px;border-radius:3px;display:inline-block}
.nkey .c-rule,.nchips .c-rule{background:var(--n-rule)}.nkey .c-info,.nchips .c-info{background:var(--n-info)}.nkey .c-fix,.nchips .c-fix{background:var(--n-fix)}.nkey .c-later,.nchips .c-later{background:var(--n-later)}.nkey .c-known,.nchips .c-known{background:var(--n-known)}.nkey .c-pending,.nchips .c-pending{background:var(--n-pending)}.nkey .c-hotfix,.nchips .c-hotfix{background:var(--n-hotfix)}
.nchips{display:inline-flex;gap:3px;margin-left:auto}.nchips i{font-style:normal;min-width:18px;padding:0 5px;border-radius:9px;color:#111;font-size:10.5px;font-weight:700;text-align:center;line-height:1.6}
.bnotes .bcls.nb>summary{gap:8px}.bnotes .bcls.nb>summary img{width:20px;height:20px;border-radius:4px;border:1px solid #000}
.nsec{margin:4px 0 6px}.nhd{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:help}.nhd::before{content:'';width:9px;height:9px;border-radius:3px;background:currentColor;flex:none}.nhd small{color:var(--muted);font-weight:400;letter-spacing:0}
.nhd.c-rule{color:var(--n-rule)}.nhd.c-info{color:var(--n-info)}.nhd.c-fix{color:var(--n-fix)}.nhd.c-later{color:var(--n-later)}.nhd.c-known{color:var(--n-known)}.nhd.c-pending{color:var(--n-pending);margin:0}.nhd.c-hotfix{color:var(--n-hotfix);margin:0}.npend .nhd{cursor:inherit}
.nsec ul,.nshape ul{list-style:none;margin:0;padding:0}.nl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 9px;align-items:start;padding:6px 0;border-bottom:1px solid #262626;font-size:12.5px;line-height:1.45;color:var(--ink2)}.nl:last-child{border-bottom:0}
.nl .ti{width:24px;height:24px;border-radius:5px;border:1px solid #000;margin-top:1px;display:block}.nl .nslot{box-sizing:border-box;background:#141414;border:1px dashed #6a5a2c;box-shadow:inset 0 0 6px rgba(0,0,0,.8)}
.nl .nnm{display:block;color:var(--ink);font-weight:600;font-size:13px}.nl .nnm .nlater{font-weight:400;color:var(--muted);font-size:11.5px}.nl .nq{display:block;margin-top:1px}.nl .nq.many{padding-left:10px;position:relative}.nl .nq.many::before{content:'';position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--muted)}.nl .nq .nn{color:#ffd75e;font-weight:600}
.ndev{margin-top:3px}.ndev>summary{list-style:none;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00aeff;display:inline-block}.ndev>summary::-webkit-details-marker{display:none}.ndev>summary::after{content:' \203A'}.ndev[open]>summary::after{content:''}.ndev>span{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}
.npend{margin:6px 0 2px;border-top:1px solid #262626;padding-top:7px}.npend>summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--ink2);display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px}.npend>summary::-webkit-details-marker{display:none}.npend>summary>b{color:var(--ink)}.npend>summary small{color:var(--muted)}.npend>summary::after{content:'\203A';font-size:17px;line-height:1;color:var(--gold);transition:transform .15s}.npend[open]>summary::after{transform:rotate(90deg)}
.npend .nwhy{margin:6px 0 2px;font-size:12px;color:var(--muted);line-height:1.45}.npg{margin:8px 0 0;padding:6px 0 0 10px;border-left:2px solid #4a3a22}.npg h6{margin:0 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--n-pending);font-weight:700}
.nshape{margin:6px 0 0}.nshape>p{margin:0;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.nshape>p i{font-style:normal;width:16px;height:16px;border-radius:4px;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:#2a2a2a;color:var(--ink)}.nshape.s-new>p i{background:#1f2b1a;color:var(--n-fix)}.nshape.s-gone>p i{background:#331e1e;color:var(--n-known)}.nshape.s-moved>p i{background:#33301a;color:#ffd100}
.nicons{display:inline-flex;gap:2px;margin-left:auto}.nicons img{width:18px;height:18px;border-radius:4px;border:1px solid #000;opacity:.85}
.nsrc{margin:10px 0 2px;font-size:12px}.nsrc a{display:inline-flex;align-items:center;gap:6px;color:#9fd0ff;text-decoration:none;border-bottom:1px dotted #3f6f96}.nsrc .bflag,.ynotes .bflag{width:20px;height:16px;background:none;display:inline-grid;place-items:center;flex:none}.nsrc .bflag .bz,.ynotes .bflag .bz{width:18px;height:13px;display:block}
.ynotes{margin:10px 0 2px;padding-top:8px;border-top:1px solid #4a3f22}.ynotes>summary{list-style:none;cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:12.5px;color:var(--ink2)}.ynotes>summary::-webkit-details-marker{display:none}.ynotes>summary>b{color:#00aeff;font-size:12.5px}.ynotes>summary small{color:var(--muted)}.ynotes>summary::after{content:'\203A';font-size:17px;line-height:1;color:var(--gold);transition:transform .15s}.ynotes[open]>summary::after{transform:rotate(90deg)}.ynotes[open]>summary{margin-bottom:2px}
@media (max-width:420px){.ynotes>summary small{display:none}}
.nevery{margin-top:8px;padding-top:6px;border-top:1px dashed #3a3424}.nev{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.ledg .blue{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink)}.ledg .blue b{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px;color:#7fc8ff}
.ledg .wn .bd{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink2)}.ledg .wn .bd del{color:#ff8a8a;text-decoration:line-through;opacity:.85}.ledg .wn .bd ins{color:#b6f28a;text-decoration:none}.ledg .wn .bd del+ins{margin-left:4px}
.ledg .wn .bd.two{display:block;margin-top:3px;font-size:12.5px;line-height:1.45}.ledg .wn .bd.two .was,.ledg .wn .bd.two .now{display:block;margin-top:3px}.ledg .wn .bd.two .was{color:var(--muted)}.ledg .wn .bd.two .now{color:var(--ink)}.ledg .wn .bd.two b{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px;color:#ff8a8a}.ledg .wn .bd.two .now b{color:#b6f28a}
/* the lens: class row, race row, then the one ledger */
.lens{margin:0 0 14px}.lens-ask{margin:0 0 8px;font-size:12.5px;color:var(--ink2);line-height:1.4}
.lens-row{display:flex;align-items:center;gap:6px;margin:0 0 6px}.lens-row small{flex:none;min-width:40px;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.lens-icons{display:flex;flex-wrap:wrap;gap:3px}.lens-icons button{position:relative;font:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:6px}.lens-icons img{width:27px;height:27px;border-radius:6px;border:1px solid #000;display:block;box-shadow:0 0 0 1px #5a4d24;transition:filter .15s,box-shadow .15s,transform .15s}.lens-icons button.quiet img{filter:grayscale(1) brightness(.4);box-shadow:none}.lens-icons button:not(.quiet):hover img{transform:scale(1.08);box-shadow:0 0 0 1px #ffd75e}.lens-icons button.on img{box-shadow:0 0 0 2px #ffd75e,0 0 10px rgba(255,215,94,.45)}
/* until something is picked, the badges breathe so the tappable icons are unmistakable; the hint above says what to do */
.lens-hint{margin:0 0 8px}.lens.unpicked .lens-icons .n{animation:tfbreathe 1.6s ease-in-out 4}
/* focus: the topic tiles fold to a slim strip while something is picked; the phone timeline folds to its nodes */
.drawer.focus:not(:has(.tile.open)) .dswitch{gap:6px;padding-top:8px;margin-bottom:6px}.drawer.focus .tile:not(.open){flex-direction:row;align-items:center;gap:8px;padding:5px 10px;opacity:.85}.drawer.focus .tile:not(.open) .tk{margin:0;font-size:11px;gap:5px}.drawer.focus .tile:not(.open) .tic{width:22px;height:22px}.drawer.focus .tile:not(.open) .tic img{width:16px;height:16px}.drawer.focus .tile:not(.open) .tic.logo{width:26px;height:22px}.drawer.focus .tile:not(.open) .tic.logo img{width:26px}
.drawer.focus .tile:not(.open) .tb{font-size:13px;margin-left:auto}.drawer.focus .tile:not(.open) .ts,.drawer.focus .tile:not(.open) .spark,.drawer.focus .tile:not(.open) .bspark{display:none}.drawer.focus .tile:not(.open).on::after{bottom:-5px;width:8px;height:8px}
@media (max-width:640px){.drawer.focus .tile:not(.open) .tb{display:none}.drawer.focus .btl.slim{margin-bottom:4px}.drawer.focus .btl.slim small,.drawer.focus .btl.slim em{display:none}.drawer.focus .btl.slim b{font-size:11px}.drawer.focus .btl.slim button i{width:10px;height:10px}.drawer.focus .btl::before{top:5px}.drawer.focus .topic .pick:first-child{display:none}.drawer.focus .lens-hint{display:none}}
.drawer.focus .lens-hint{display:none}
/* a drawer pull: a thin bar on the tile's bottom edge, wider and brighter under the mouse; the whole bottom strip takes the click */
.tfold{display:none;position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none}.drawer.focus .tile:hover .tfold::after{width:40px;opacity:1;background:#ffd75e}.drawer.focus .tile.site:hover .tfold::after{background:#9fd0ff}.tfold::after{content:'';position:absolute;left:50%;bottom:3px;width:26px;height:3px;border-radius:2px;transform:translateX(-50%);background:var(--gold2);opacity:.55;transition:width .15s,opacity .15s,background .15s}.tfold:hover::after{width:40px;opacity:1;background:#ffd75e}.tile.site .tfold::after{background:#3f6f96}.tile.site .tfold:hover::after{background:#9fd0ff}
.drawer.focus .tfold{display:block}.drawer.focus .dswitch:has(.tile:not(.open)){align-items:start}.drawer.focus .tile:not(.open){padding-bottom:9px}.drawer.focus .tile:not(.open).on::after{display:none}
/* the hover card on an ability icon: the tooltip as it reads now */
.tippop{position:fixed;z-index:80;display:grid;grid-template-columns:28px 1fr;gap:2px 9px;padding:10px 12px;border-radius:6px;background:rgba(10,10,12,.84);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid var(--tip-line);box-shadow:inset 0 1px 0 rgba(255,215,94,.45),0 12px 34px rgba(0,0,0,.75);font-size:13px;line-height:1.38;color:#e8e8e8;pointer-events:none}.tippop::after{content:'';position:absolute;left:12px;bottom:-6px;width:10px;height:10px;transform:rotate(45deg);background:rgba(10,10,12,.92);border-right:1px solid var(--tip-line);border-bottom:1px solid var(--tip-line)}.tippop.under::after{bottom:auto;top:-6px;border:0;border-left:1px solid var(--tip-line);border-top:1px solid var(--tip-line)}.tippop img{width:28px;height:28px;border-radius:5px;border:1px solid #000;grid-row:1/span 2}.tippop b{color:var(--ink);font-size:13px}.tippop small{grid-column:2;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}.tippop span{grid-column:2}.tippop img{grid-row:1/span 3}
/* the summary, cut to a sentence, a bar and a legend */
.sumleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink2)}.sumleg span{display:inline-flex;align-items:center;gap:5px;background:none;padding:0}.sumleg .b-added i.g{background:#9fe870}.sumleg .b-removed i.g{background:#ff7a7a}.sumleg .b-moved i.g{background:#ffd100}.sumleg .b-rules i.g{background:#7fc8ff}.sumleg .b-numbers i.g{background:#ffb070}.sumleg .b-wording i.g{background:#c9a8ff}.sumleg span b{color:var(--ink);font-size:13px}.sumleg i.g{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;color:#111}.sumleg i.g svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sumbar i{display:block;height:100%}.sum{margin-top:12px}.sumhead{margin-bottom:8px}.sumhead>b{font-size:28px}.sumhead span{font-size:13px}
/* wide drawer on desktop: picks in a left column, the ledger beside them */
@media (min-width:900px){.drawer.builds:not(.wide) .lens{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0 18px;align-items:start}.drawer.builds:not(.wide) .lens .lens-hint{grid-column:1/-1}.drawer.builds:not(.wide) .lens-row{grid-column:1;flex-direction:column;align-items:flex-start;gap:4px}.drawer.builds:not(.wide) .lens-row.cls .lens-icons{display:grid;grid-template-columns:repeat(5,34px);gap:4px}.drawer.builds:not(.wide) .lens-row.cls .lens-icons img{width:34px;height:34px}.drawer.builds:not(.wide) .lens-row.inl{gap:3px}.drawer.builds:not(.wide) .lens-row.inl small{min-width:0}.drawer.builds:not(.wide) .lens .you{grid-column:2;grid-row:1/span 7;margin-top:0}.drawer.builds:not(.wide) .lens .sum{grid-column:1;margin:6px 0 0;padding:10px 12px}.drawer.builds:not(.wide) .lens .sumhead{flex-direction:column;align-items:flex-start;gap:2px}.drawer.builds:not(.wide) .lens .sumhead>b{font-size:24px}.drawer.builds:not(.wide) .lens .sumhead span{font-size:12px}.drawer.builds:not(.wide) .lens .sumleg{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:11.5px}.drawer.builds:not(.wide) .lens.unpicked .lens-row{grid-column:1/-1;flex-direction:row;align-items:center}.drawer.builds:not(.wide) .lens.unpicked .lens-row.cls .lens-icons{display:flex}.drawer.builds:not(.wide) .lens.unpicked .lens-row small{min-width:64px}}
/* phones: picks, then the ledger, then the summary */
@media (max-width:899px){.lens{display:flex;flex-direction:column}.lens .you{order:1}.lens .sum{order:2}}@keyframes tfbreathe{0%,100%{transform:scale(1);box-shadow:0 0 0 1px #000}50%{transform:scale(1.22);box-shadow:0 0 0 1px #000,0 0 8px rgba(255,209,0,.7)}}@media (prefers-reduced-motion:reduce){.lens.unpicked .lens-icons .n{animation:none}}
.lens-icons .n{position:absolute;right:-5px;top:-6px;min-width:15px;padding:0 4px;border-radius:8px;background:var(--gold);color:#111;font-size:9.5px;font-weight:700;text-align:center;box-shadow:0 0 0 1px #000;line-height:1.4}
/* four short rows: Class (nine in one row), Horde, Alliance, Legacy; on phones the class label sits above so the nine icons get the width */
.lens-row.inl{margin-bottom:5px}.lens-row.inl small{min-width:64px}.lens-row.inl .lens-icons{display:flex;gap:4px}.lens-row.inl .lens-icons img{width:34px;height:34px}
@media (max-width:640px){.lens-row.cls{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:8px}.lens-row.cls small{min-width:0}.lens-row.cls .lens-icons{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;width:100%}.lens-row.cls .lens-icons img{width:100%;height:auto;aspect-ratio:1}.lens-icons .n{right:-4px;top:-6px;min-width:16px;font-size:10px;padding:0 4px}}
/* the slim timeline: number and date per node, the chosen one's line under it, and a shorter notes link */
.btl.slim{margin:0 0 8px}.btl.slim b{font-size:12px}.btl.slim small{font-size:10px;line-height:1}.btl.slim em{min-height:0;margin-top:1px}.btl.slim button{gap:2px}.btl.slim li:not(.on):not(.hot) button{opacity:.6}
.topic .bluelink{margin:0 0 8px;font-size:12.5px}.bluelink a,.sources a{display:inline-flex;align-items:center;gap:6px;color:#9fd0ff;text-decoration:none;border-bottom:1px dotted #3f6f96}
.sources{margin:12px 0 4px;padding-top:10px;border-top:1px solid #2e2e2e;font-size:12px;line-height:1.6;color:var(--muted)}.sources b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-right:6px}.sources .bflag{width:18px;height:16px;background:none}.sources .bflag .bz{width:18px;height:13px;display:block}.bpage .sources{margin:10px 0 0}.bluelink .bflag{width:18px;height:18px;border-radius:5px;background:#1b4a78;color:#bfe0ff;display:grid;place-items:center}.bluelink .bflag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the three sources under a change: Blizzard's words with a blue flag, the beta files with a scroll */
.ledg .src{display:flex;gap:7px;align-items:flex-start;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--ink)}.ledg .src i{flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;margin-top:1px}.ledg .src i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ledg .src b{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px;font-weight:700}.ledg .src.blue i{background:none;width:20px;height:18px}.ledg .src.blue i .bz{width:20px;height:14px;display:block}.ledg .src.blue b{color:#00aeff}
.bluelink .bflag{background:none!important;width:20px;height:18px}.bluelink .bflag .bz{width:20px;height:14px;display:block}.ledg .src.file i{background:none}.ledg .src.file i .sc{width:18px;height:18px;border-radius:4px;border:1px solid #000;display:block}.ledg .src.file b{color:var(--gold)}
.ledg .wn summary.src{cursor:pointer;color:var(--ink2);align-items:center}.ledg .wn summary.src::after{content:''}
.ledg .wn summary.src .lpill{margin-left:auto;padding:3px 10px;font-size:11px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:4px}.ledg .wn summary.src .lpill::after{content:'\203A';font-size:14px;line-height:1;transition:transform .15s}.ledg .wn[open] summary.src .lpill::after{transform:rotate(90deg)}.ledg .wn summary.src:hover .lpill{background:#3a3323}
.ledg .wn[open] summary.src .lpill .show{display:none}.ledg .wn[open] summary.src .lpill .hide{display:inline}.ledg .wn .bd,.ledg .wn .bd.two{margin-left:25px}
.lens{margin-top:12px}.lens .you{margin-top:8px}.lens-row small{font-size:10.5px;letter-spacing:.1em;color:var(--gold);font-weight:700}.you .mm{display:flex;gap:6px;margin:8px 0 0}.you .ysure a.more{color:var(--gold);white-space:nowrap;margin-left:6px;text-decoration:none;border-bottom:1px dotted #7a6a3a}.you .yh span i{font-style:normal;color:var(--muted)}
.you .yraces.ycls{margin-top:8px;gap:3px}.you .yraces.ycls button img{width:24px;height:24px}.you.ask .yh span{margin-top:2px}.you .yraces small{min-width:38px}
.you .ledg{margin-top:2px}.you .ledg li{border-bottom-color:#332c1c}.you .ledg li b{color:var(--ink)}.you .ysure{margin:8px 0 2px;font-size:12px;line-height:1.4;color:var(--muted)}
.btl em{white-space:normal;text-align:center;line-height:1.2}
.bp-words .ledg li,.topic .bp-words .ledg li,.bpage .bp-words .ledg li{display:grid;grid-template-columns:22px minmax(0,1fr);flex-wrap:nowrap;font-size:13px}.bp-words .ledg li .ti{width:22px;height:22px}
.brows li .bd.two .was,.brows li .bd.two .now{display:block;margin-top:3px}.brows li .bd.two .was{color:var(--muted)}.brows li .bd.two .now{color:var(--ink)}.brows li .bd.two b{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-right:5px}.brows li .bd.two .was b{color:#ff8a8a}.brows li .bd.two .now b{color:#b6f28a}.spot a.more{color:var(--gold);white-space:nowrap;text-decoration:none;border-bottom:1px dotted #7a6a3a}.spot a.more:hover{color:#ffd75e}
.wbars button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0;border-radius:4px}
.wbars button i{display:block;width:100%;border-radius:4px 4px 0 0;background:#26313d;transition:filter .15s}.wbars button.on i{background:linear-gradient(180deg,#9fd0ff,#3f6f96)}.wbars button.on:hover i{filter:brightness(1.2)}
.wbars button.sel i{background:linear-gradient(180deg,#ffffff,#9fd0ff);box-shadow:0 0 0 2px #bfe0ff,0 0 12px rgba(159,208,255,.45)}.wbars button.sel small,.wbars button.sel b{color:#fff;font-weight:700}
.wbars button:disabled{cursor:default}.wbars button.today small{color:#9fd0ff;font-weight:700}
.topic.site .pick{color:#9fd0ff}
.dayhead{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:12.5px;color:var(--ink2);line-height:1.4}.dayhead b{color:#d4ebff}.dayhead span{flex:1}
.dayhead .reset{font:inherit;font-size:12px;font-weight:700;color:#bfe0ff;background:#1b2735;border:0;border-radius:999px;padding:5px 11px;cursor:pointer;box-shadow:inset 0 0 0 1px #3f6f96;flex:none}
.ents.all{margin-top:4px}
/* round seven: builds chart on the game tile, topic spines on the site entries */
.bspark{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:7px}.bspark i{flex:1;border-radius:2px 2px 0 0;background:#3a3325;min-height:3px}.bspark i.none{background:none;border-bottom:2px dotted #3a3325;height:0;min-height:0;align-self:flex-end}
.bspark i.on{background:linear-gradient(180deg,#ffd75e,#a8803c)}.bspark i.flat{background:#5a4f35}.bspark i.now{box-shadow:0 0 0 1px #ffe9a8}
.ent{position:relative;padding-left:52px;overflow:hidden}.ent .tsp{position:absolute;left:0;top:0;bottom:0;width:40px;display:flex;align-items:flex-start;justify-content:center;padding-top:11px;color:var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,#181818),color-mix(in srgb,var(--c) 8%,#181818));box-shadow:inset -1px 0 0 color-mix(in srgb,var(--c) 40%,#181818)}
.ent.t-talents{--c:#ffd75e}.ent.t-spells{--c:#c39bff}.ent.t-builds{--c:#7fc8ff}.ent.t-site{--c:#7fe0d0}
.ent time .cat{font-style:normal;color:var(--c);font-weight:700;margin-right:8px;letter-spacing:.1em}
.ent time i.rd{background:#2b2418;color:#ffd75e}
/* round eight: game icons on the spine, before and after pictures inside an opened entry */
.ent .tsp{padding-top:9px}.tsp img{width:28px;height:28px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1.5px var(--c),0 2px 6px rgba(0,0,0,.5);display:block}
.ent .shots{display:none;margin-top:10px}.shots .stack{display:block}.shots .howto{display:block;margin:0 0 16px}.shots .stack img{display:block;width:100%;border-radius:6px;box-shadow:0 0 0 1px #3a3a3a}.cmpbox{display:block}.ent.open .shots{display:block}
.flipbk{display:block;margin:0 0 16px}.fbstage{position:relative;display:block;margin:0 auto;perspective:1100px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #3a3a3a,0 6px 18px rgba(0,0,0,.45);background:#2a1a0e;touch-action:pan-y;cursor:pointer}.fbstage img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.fbstage .fbu:not([src]){visibility:hidden}.fbstage .fbt{transform-origin:left center;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fbstage .fbt.turn{animation:fbturn .62s cubic-bezier(.45,.05,.3,1) forwards}.fbstage .fbt.back{animation:fbback .62s cubic-bezier(.45,.05,.3,1) forwards}@keyframes fbturn{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(-104deg);filter:brightness(.5)}}@keyframes fbback{0%{transform:rotateY(-104deg);filter:brightness(.5)}100%{transform:rotateY(0);filter:brightness(1)}}.fbbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}.fblab{min-width:150px;text-align:center;font-family:Cinzel,Georgia,serif;line-height:1.3}.fblab b{display:block;font-size:12.5px;color:var(--ink);letter-spacing:.04em}.fblab small{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em}.fbbar button{position:relative;flex:none;width:32px;height:32px;border:0;padding:0;cursor:pointer;border-radius:50%;font-size:0;color:transparent;background:radial-gradient(circle at 40% 32%,#ffe9a8 0,#d8ad4a 38%,#9a6c24 72%,#5a3a12 100%);box-shadow:0 0 0 1px #3a2612,0 0 0 2px #b08a3c,0 2px 5px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.5);transition:transform .12s,box-shadow .12s}.fbbar button::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border:7px solid transparent}.fbbar button[data-fb="1"]::after{border-left:10px solid #2a1808;border-right:0;transform:translate(-30%,-50%)}.fbbar button[data-fb="-1"]::after{border-right:10px solid #2a1808;border-left:0;transform:translate(-70%,-50%)}.fbbar button:hover{transform:scale(1.1);box-shadow:0 0 0 1px #3a2612,0 0 0 2px #ffd75e,0 0 14px 3px rgba(255,200,80,.6),inset 0 1px 1px rgba(255,255,255,.6)}.fbbar button:active{transform:scale(.95)}.fbopen{display:block;width:max-content;max-width:100%;margin:10px auto 0;padding:5px 13px;border-radius:999px;color:var(--gold);font-weight:700;font-size:12px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--gold2)}.fbopen:hover{background:#3a3323}@media (prefers-reduced-motion:reduce){.fbstage .fbt.turn,.fbstage .fbt.back{animation:none}}.cmpcap{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c);font-weight:700;margin:0 0 6px}
.basl{position:relative;display:block;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #3a3a3a;background:#181818;touch-action:pan-y}
.basl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.basl img.a{clip-path:inset(0 calc(100% - var(--x)) 0 0);z-index:1}.basl .bar{z-index:2}.basl input{z-index:3}
.basl .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.basl .bar::after{content:'\21D4';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#fff;color:#111;font-size:14px;font-style:normal;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.basl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}.basl{cursor:ew-resize;user-select:none;-webkit-user-select:none}.basl img{pointer-events:none;-webkit-user-drag:none}.basl:focus-within{outline:2px solid var(--c);outline-offset:2px}
.cmpkey{display:flex;justify-content:space-between;margin-top:6px}.cmpkey button{font:inherit;font-size:11.5px;font-weight:700;color:var(--ink2);background:#232323;border:0;border-radius:999px;padding:4px 10px;cursor:pointer;box-shadow:inset 0 0 0 1px #3a3a3a}.cmpkey button:hover{color:#fff}.basl.ease img.a,.basl.ease .bar{transition:clip-path .3s ease,left .3s ease}
.shots.stack img,.shots img.solo{display:block;width:100%;border-radius:6px;box-shadow:0 0 0 1px #3a3a3a}.shots .lab{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 3px}.shots .lab.a{color:#9fe870}
.ent time i.ph{background:#1d2a1d;color:#9fe870}
.whyold{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--ink2);background:#221d12;border-radius:8px;padding:8px 10px;box-shadow:inset 0 0 0 1px #4a3f25}
.ent .full b{color:#fff;display:inline}.ent .full p{margin:0 0 6px}.ent .full p.lead{color:var(--ink)}.ent .full ul{margin:2px 0 8px;padding-left:16px}.ent .full li{margin:4px 0;line-height:1.45}.ent .full li::marker{color:var(--back)}.ent .full .orange{color:var(--back2)}.ent .full a{color:var(--gold);text-decoration-color:rgba(255,215,94,.45);text-underline-offset:2px}.ent .full a:hover{color:#fff}
/* names inside tooltips */
.ref{color:#fff;border-bottom:1px dotted rgba(255,255,255,.45);padding-bottom:1px}.ref.new{border-bottom:1px solid #6ee06e;color:#c9ffc9}.ref.on{background:rgba(127,200,255,.22);border-radius:3px}
.refhint{font-size:12px;color:#cdb4ff;letter-spacing:.01em}.refhint kbd{font:inherit;font-size:11px;font-weight:700;color:#efe4ff;background:rgba(163,53,238,.24);box-shadow:inset 0 0 0 1px rgba(195,155,255,.65);border-radius:4px;padding:1px 6px;margin:0 3px}.refs.bare{border-top:0;padding-top:0;margin-top:6px}.refrow small i{font-style:normal;color:#6ee06e;font-weight:700}.ghost .ref,.ghost .refchip,.ghost .refgo{pointer-events:auto;cursor:pointer}
.refchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.refchip{font:inherit;font-size:12px;font-weight:700;color:#d4ebff;background:rgba(127,200,255,.12);border:0;border-radius:999px;padding:4px 10px 4px 5px;display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 0 0 1px rgba(127,200,255,.45)}.refchip img{width:18px;height:18px;border-radius:50%}.refchip.on{background:rgba(127,200,255,.3);color:#fff}
.refopen:not(:empty){margin-top:8px}.refgo{font:inherit;font-size:12px;font-weight:700;color:#111;background:#9fd0ff;border:0;border-radius:999px;padding:5px 12px;margin-top:7px}
.refs{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.13);display:grid;gap:8px}
.refrow{display:flex;gap:9px;align-items:flex-start;text-align:left}.refrow img{width:26px;height:26px;border-radius:5px;border:1px solid #000;box-shadow:0 0 0 1px rgba(127,200,255,.55);flex:none;margin-top:1px}
.refrow b{color:#fff;font-size:12.5px;font-weight:700}.refrow small{color:#8fb9da;margin-left:7px;font-size:11px;letter-spacing:.02em}.refrow span{display:block;font-size:12px;color:#c9c9c9;line-height:1.38;margin-top:1px}
.talent.refd{z-index:3;border-radius:8px;box-shadow:0 0 0 2px #7fc8ff,0 0 16px 3px rgba(127,200,255,.75)!important;animation:refpulse 1.1s ease-in-out infinite}.talent.refd img{filter:none!important;opacity:1!important}
@keyframes refpulse{50%{box-shadow:0 0 0 2px #d4ebff,0 0 28px 8px rgba(127,200,255,.95)}}@media (prefers-reduced-motion:reduce){.talent.refd{animation:none}}
/* build tracker: the stamp under the site name and the Beta builds tab of the drawer */
.bstamp{align-self:flex-start;margin-top:3px;font:inherit;font-size:11px;letter-spacing:.04em;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none;white-space:nowrap}a.bstamp:hover{color:var(--ink);text-decoration:none}
.bstamp b{color:var(--gold);font-weight:700}.bstamp i{font-style:normal;color:var(--gold)}.bstamp:hover{color:var(--ink)}
.bstamp .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.dtabs{display:flex;gap:6px;padding:8px 16px 0}
.dtabs button{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);background:#232323;border:1px solid #333;border-radius:6px 6px 0 0;padding:7px 12px;cursor:pointer}
.dtabs button.on{color:var(--gold);background:#2e2a1f;border-color:var(--gold2);border-bottom-color:#2e2a1f}
.dlist[hidden]{display:none}
.dlist .since{margin:8px 0 4px;padding:8px 10px;border-radius:6px;background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);color:var(--ink);font-size:13px;border:0}
.dlist .since b{display:inline;color:var(--gold);font-size:13px;margin:0}
.bcard{padding:10px 0 12px}.bcard .bh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.bcard .bh b{display:inline;font-family:Cinzel,Georgia,serif;font-size:15px;color:#ffd75e;margin:0}.bcard .bh span{color:var(--muted);font-size:12px}
.bcard .bnote{margin:4px 0 8px;color:var(--ink2);font-size:13px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}.chips i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:10px;background:#2a2a2a;color:var(--ink2);box-shadow:inset 0 0 0 1px #3a3a3a}
.chips i.quiet{color:var(--muted);font-weight:400}
.k-new{color:#9fe870}.k-gone{color:#ff7a7a}.k-moved{color:var(--gold)}.k-prereq{color:#7fc8ff}.k-ranks{color:#7fc8ff}.k-text{color:var(--ink)}.k-icon{color:var(--muted)}.k-tree{color:var(--gold)}
.chips i.k-new{color:#9fe870}.chips i.k-gone{color:#ff7a7a}.chips i.k-moved{color:var(--gold)}.chips i.k-prereq,.chips i.k-ranks{color:#7fc8ff}
.bsec{border-top:1px solid #2a2a2a}.bsec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--ink);font-weight:700;font-size:13px}
.bsec>summary::-webkit-details-marker{display:none}.bsec>summary::before{content:'›';color:var(--gold);font-size:16px;line-height:1;transition:transform .15s}.bsec[open]>summary::before{transform:rotate(90deg)}
.bsec>summary small{color:var(--muted);font-weight:400;margin-left:auto}
.bcls{margin:0 0 4px 6px}.bcls>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--ink)}.bcls>summary::-webkit-details-marker{display:none}
.bcls>summary img{width:20px;height:20px;border-radius:4px;border:1px solid #000}.bcls>summary small{color:var(--muted);margin-left:auto}
.brows{list-style:none;margin:0 0 6px;padding:0 0 0 4px}
.brows li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-bottom:1px solid #262626}.brows li:last-child{border-bottom:0}
.brows li img{width:24px;height:24px;border-radius:4px;border:1px solid #000;flex:none;margin-top:1px}.brows li .ic2{display:flex;align-items:center;gap:4px;flex:none}.brows li .ic2 i{font-style:normal;color:var(--muted);font-size:11px}
.brows li>div{min-width:0;flex:1;font-size:12.5px;line-height:1.35}.brows li>div.ic{flex:none}.brows li b{display:inline;color:var(--ink);font-size:12.5px;margin:0}.brows li small{color:var(--muted);margin-left:4px}
.brows li .kb{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.brows li span.t{display:block;color:var(--ink2)}
.brows li .bd{display:block;color:var(--ink2);margin-top:2px}.brows li .bd del{color:#ff8a8a;text-decoration:line-through;opacity:.85}.brows li .bd ins{color:#b6f28a;text-decoration:none}

/* tracker polish: wide drawer, key, glyph badges, coloured row edges, mini counts per class, two columns when wide */
.dhandle{display:none;position:absolute;left:-26px;top:50%;transform:translateY(-50%);width:26px;height:110px;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;color:var(--gold);background:var(--panel);border:1px solid var(--gold2);border-right:0;border-radius:8px 0 0 8px;box-shadow:-6px 0 18px rgba(0,0,0,.45);cursor:pointer;padding:0}
.dhandle i{font-style:normal;font-size:26px;line-height:1;animation:handleNudge 1.6s ease-in-out infinite}.dhandle[aria-pressed="true"] i{animation:none}
.dhandle span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dhandle:hover{background:#2e2a1f}.dhandle:hover span{color:var(--ink)}
@keyframes handleNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.dhandle i{animation:none}.drawer.builds{transition:none}}
.bhead{margin:6px 0 8px;font-size:13px;line-height:1.45;color:var(--ink2)}.bhead b{display:inline;color:var(--ink);font-size:13px;margin:0}
.cstrip{display:flex;flex-direction:column;gap:3px;margin:0 0 10px}
.cbar{display:grid;grid-template-columns:20px 64px 1fr 28px;align-items:center;gap:8px;font:inherit;font-size:12px;color:var(--ink2);background:none;border:0;padding:3px 4px;border-radius:5px;cursor:pointer;text-align:left}
.cbar:hover{background:#232323;color:var(--ink)}.cbar img{width:20px;height:20px;border-radius:4px;border:1px solid #000}.cbar .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .bar{display:flex;height:10px;border-radius:3px;overflow:hidden;background:#222;box-shadow:inset 0 0 0 1px #333}.cbar .bar i{display:block;height:100%}
.cbar .bar i.k-new{background:#9fe870}.cbar .bar i.k-gone{background:#ff7a7a}.cbar .bar i.k-moved,.cbar .bar i.k-tree{background:var(--gold)}.cbar .bar i.k-prereq,.cbar .bar i.k-ranks{background:#7fc8ff}.cbar .bar i.k-text{background:#8a8a8a}.cbar .bar i.k-icon{background:#4a4a4a}
.cbar .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.bsec.soft>summary{color:var(--muted);font-weight:600}.bsec.soft{border-top:1px dashed #333}
@media (min-width:900px){.drawer.builds .dhandle{display:flex}.drawer.builds{width:var(--dw,min(620px,100vw));max-width:100vw;transition:width .22s ease-out}.drawer.builds.wide{width:var(--dw,min(980px,100vw))}.drawer.builds.dragging{transition:none;user-select:none}.drawer.builds.dragging .dhandle i{animation:none}.drawer.builds .dhandle{cursor:ew-resize;touch-action:none}
  .drawer.wide .brows{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.drawer.wide .brows li{border-bottom:1px solid #262626}.drawer.wide .cstrip{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}}
.dlist .bkey .bp-link{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dlist .bkey{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 2px;padding:0;border:0;font-size:11px;letter-spacing:.03em}.dlist .bkey i{font-style:normal;font-weight:700}
.chips i i{font-style:normal;margin-right:4px;opacity:.9}
.brows li{border-left:3px solid #333;padding-left:8px;border-radius:2px}
.brows li.k-new{border-left-color:#9fe870}.brows li.k-gone{border-left-color:#ff7a7a}.brows li.k-moved{border-left-color:var(--gold)}.brows li.k-prereq,.brows li.k-ranks{border-left-color:#7fc8ff}.brows li.k-text{border-left-color:#d8d8d8}.brows li.k-icon{border-left-color:#666}.brows li.k-tree{border-left-color:var(--gold)}
.brows li .kb{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:9px;background:#262626;box-shadow:inset 0 0 0 1px #363636}.brows li .kb i{font-style:normal;font-size:11px}
.brows li .kb.k-new{background:rgba(159,232,112,.12)}.brows li .kb.k-gone{background:rgba(255,122,122,.12)}.brows li .kb.k-moved,.brows li .kb.k-tree{background:rgba(255,209,0,.1)}.brows li .kb.k-prereq,.brows li .kb.k-ranks{background:rgba(127,200,255,.12)}
.bcls>summary b{display:inline;font-size:13px;margin:0;color:var(--ink)}.bcls>summary .mini{display:flex;flex-wrap:wrap;gap:3px 6px;margin-left:6px;font-size:10.5px;letter-spacing:.02em}.bcls>summary .mini i{font-style:normal;font-weight:700}
.bcls>summary{border-radius:6px;padding:6px 6px}.bcls>summary:hover{background:#232323}.bcls[open]>summary{background:#232323}
.bcard.first .bh b{font-size:17px}

/* /builds: the tracker's own page, and the same panel opened from the Beta changes button */
.hbtns{margin-left:auto;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hbtns .whatsnew{margin-left:0}
.whatsnew.beta{text-decoration:none;color:var(--ink);background:#232323;box-shadow:inset 0 0 0 1px #3a3a3a}.whatsnew.beta:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2)}.whatsnew.beta[aria-expanded="true"]{color:var(--gold);background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2)}
.whatsnew.beta .dot.on{display:block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}
.bpage[hidden]{display:none}
.bp-words li .txt{flex:1;min-width:0}.bp-words li .ci{width:26px;height:26px}
.bp-words .ti{width:18px;height:18px;border-radius:3px;border:1px solid #000;vertical-align:-4px;margin:0 3px 0 2px}
.mm{display:flex;gap:5px;flex:none;align-self:center}.mm svg{display:block;background:#161616;border-radius:4px;padding:3px;box-shadow:inset 0 0 0 1px #2a2a2a}
.mm .d{fill:#3d3d3d}.mm .m.new{fill:#9fe870}.mm .m.gone line{stroke:#ff7a7a;stroke-width:1.7;stroke-linecap:round}
.mm .m.moved circle{fill:var(--gold)}.mm .m.moved .from{fill:none;stroke:var(--gold);stroke-width:1.2}.mm .m.moved line{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:2 1.5}.mm .m.from{fill:none;stroke:var(--gold);stroke-width:1.2}
.mmkey{margin:8px 0 0;font-size:11px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mmkey i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}.mmkey .k1{background:#9fe870}.mmkey .k2{background:#ff7a7a;border-radius:1px}.mmkey .k3{background:var(--gold)}
.bp-share{margin-left:auto;color:var(--gold);font-size:12.5px;font-weight:700;text-decoration:none}.bp-share:hover{text-decoration:underline}
@media (max-width:640px){.bp-words li{flex-wrap:wrap}.bp-words li .txt{flex:1 1 220px}.mm{flex:0 0 100%;margin-left:36px;justify-content:flex-start}}
@media (max-width:480px){.hbtns{gap:5px}}
.bpage{margin:14px 0 18px;padding:0}
.bpage .bp-hero{padding:22px 22px 18px;border-radius:10px;background:radial-gradient(120% 140% at 0 0,#2e2a1f 0,#1c1c1c 55%,#181818 100%);box-shadow:inset 0 0 0 1px var(--gold2),0 10px 30px rgba(0,0,0,.35)}
.bpage .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.bpage h2{margin:0 0 8px;font-family:Cinzel,Georgia,serif;font-size:28px;line-height:1.1;color:#ffd75e;text-shadow:0 1px 0 #7a5a10,0 2px 8px rgba(0,0,0,.6)}
.bpage .lede{margin:0 0 14px;max-width:62ch;color:var(--ink2);font-size:14.5px;line-height:1.5}
.bpage .bp-latest{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px #3a3a3a;font-size:13.5px;color:var(--ink)}
.bpage .bp-latest .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.bpage .bp-latest b{color:var(--gold)}.bpage .bp-latest .you{color:var(--muted)}
.bp-timeline{list-style:none;margin:18px 0 0;padding:0 0 0 26px;position:relative}
.bp-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(#a8803c,#3a2612)}
.bp-build{position:relative;margin:0 0 22px;padding:16px 18px 14px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px #2e2e2e}
.bp-build::before{content:"";position:absolute;left:-24px;top:22px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe9a8 0,#d4a843 45%,#6b4a1a 100%);box-shadow:0 0 0 3px var(--bg,#111),0 0 10px rgba(255,209,0,.45)}
.bp-build.quiet::before{background:#3a3a3a;box-shadow:0 0 0 3px var(--bg,#111)}
.bp-build h3{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:Cinzel,Georgia,serif;font-size:20px;color:#ffd75e}
.bp-build h3 small{font-family:inherit;font-size:12.5px;color:var(--muted);font-weight:400}
.bp-build .note{margin:6px 0 12px;color:var(--ink2);font-size:13.5px;line-height:1.5;max-width:80ch}
.bp-words{margin:0 0 14px;padding:12px 14px;border-radius:8px;background:#202020;box-shadow:inset 0 0 0 1px #2e2e2e}
.bp-words h4{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.bp-words ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bp-words li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink)}
.bp-words li img{width:26px;height:26px;border-radius:5px;border:1px solid #000;flex:none;margin-top:2px}
.bp-words li b{color:#ffd75e;font-weight:700}.bp-words li .soft{color:var(--muted)}
.bp-words li.under{color:var(--ink2);font-size:13px;padding-top:6px;border-top:1px dashed #333}
.bp-words li.under i{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:5px;background:#2a2a2a;color:var(--muted);flex:none}
.bp-words .nm{color:var(--ink);font-weight:600}
.bp-more{border-top:1px solid #2e2e2e}.bp-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ink);font-weight:700;font-size:14px}
.bp-more>summary::-webkit-details-marker{display:none}.bp-more>summary::before{content:'›';color:var(--gold);font-size:18px;line-height:1;transition:transform .15s}.bp-more[open]>summary::before{transform:rotate(90deg)}
.bp-more>summary small{color:var(--muted);font-weight:400;margin-left:auto}
.bp-more .cstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:3px 18px;margin:4px 0 10px}
.bp-more .bcls{margin:0 0 6px}.bp-more .brows{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0 22px}
@media (max-width:640px){.bpage .bp-hero{padding:16px}.bpage h2{font-size:22px}.bp-timeline{padding-left:18px}.bp-build{padding:12px}.bp-build::before{left:-18px;width:10px;height:10px;top:20px}.bp-more .brows{grid-template-columns:1fr}}
.classes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;flex-basis:100%;padding:10px;background:#181818;box-shadow:inset 0 -1px 0 #000}
@media (max-width:820px){.classes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.classes a{display:flex;text-decoration:none;cursor:pointer;align-items:center;justify-content:flex-start;gap:7px;padding:6px 8px;border-radius:5px;background:#2a2a2a;box-shadow:inset 0 0 0 1px #333;font-weight:600;color:var(--ink2);min-width:0;white-space:nowrap}
.classes a img{width:24px;height:24px;border-radius:4px;display:block;flex:none;border:1px solid #000}
.classes a span{overflow:hidden;text-overflow:ellipsis}
.classes a:hover{background:#3e3e3e;color:#fff}
.classes a[aria-pressed="true"]{background:#4a4229;color:#fff;box-shadow:inset 0 0 0 1px var(--gold)}
.topbar .controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;padding:8px 10px;border-top:1px solid #3d3d3d;background:linear-gradient(180deg,#303030,var(--bar))}
.classes a.soon{opacity:.4;cursor:not-allowed}
.topbar .spacer{flex:1}
.topbar label{display:flex;align-items:center;gap:6px;color:var(--ink2);font-weight:600}
.topbar select{background:#3a3a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ddd' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center;color:#fff;border:0;border-radius:4px;padding:5px 24px 5px 8px;appearance:none;-webkit-appearance:none;font:inherit;font-size:13px}
#loadBuild{font-weight:600;max-width:240px;text-overflow:ellipsis}#loadBuild[hidden]{display:none}
.topbar .btn{background:#3a3a3a;border-radius:4px;padding:5px 10px;font-weight:600;color:#fff}
.topbar .btn:hover{background:#4a4a4a}

.banner{--cc:#ffd100;margin-top:10px;min-height:0;border-radius:4px;background:#2a2a2a center/cover no-repeat;position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:12px 16px}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.7) 60%,rgba(0,0,0,.55))}
.banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 50%,color-mix(in srgb,var(--cc) 16%,transparent),transparent 40%);pointer-events:none}
.banner>*{position:relative;z-index:1}
.banner>img.bwm{position:absolute;z-index:0;right:6px;top:50%;width:150px;height:150px;transform:translateY(-50%);opacity:.13;pointer-events:none}
@media (max-width:640px){.banner>img.bwm{width:130px;height:130px;right:-30px;opacity:.16}}
.bmed{position:relative;width:60px;height:60px;flex:none;border-radius:50%;background:#000;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold2),0 0 0 5px #3a2a08,0 0 22px color-mix(in srgb,var(--cc) 55%,transparent),0 4px 10px rgba(0,0,0,.7)}
.bmed img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.bmed::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,232,154,.55),inset 0 6px 10px rgba(0,0,0,.45)}
.btext{flex:1;min-width:0}
.banner h2{margin:0;font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:700;letter-spacing:.03em;line-height:1.1;color:#ffd75e;text-shadow:0 1px 0 #7a5a10,0 2px 8px rgba(0,0,0,.8)}
.bsum{margin-top:3px;font-size:13px;color:#e6e6e6;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bsum .spec{color:var(--cc);font-weight:700;font-size:14px}
.bsum .split b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.bsum .hint{color:#cfcfcf}
#streamMode,.dragbar{display:none}
@media (min-width:1200px){#streamMode{display:inline-block}#streamMode[aria-pressed="true"]{background:var(--gold);color:#1a1400}
body.stream .app{margin-left:var(--ml,auto);margin-right:var(--mr,auto);max-width:var(--mw,1200px)}

body.stream .dragbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:50;margin:0 0 8px;padding:5px 8px;border-radius:999px;background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);color:var(--gold);font-size:13px;font-weight:700;user-select:none;touch-action:none}
body.stream .dragbar small{color:var(--muted);font-weight:400}body.stream .dragbar small a{color:var(--gold2)}
body.stream .dmove,body.stream .dsize{padding:4px 12px;border-radius:999px;background:#3a3323;box-shadow:inset 0 0 0 1px #5a4a1a;white-space:nowrap}
body.stream .dragbar{cursor:grab}body.stream .dragbar:active{cursor:grabbing}body.stream .dsize,body.stream .dsize:active{cursor:ew-resize}body.stream .dragbar a{cursor:pointer}
body.stream .app{margin-top:var(--mt,0px)}
#streamMode svg{vertical-align:-2px;margin-right:2px}
.topbar #streamMode{color:var(--ink2);background:#3a3a3a}.topbar #streamMode svg{color:var(--gold2)}
.topbar #streamMode:hover{color:#fff;background:#4a4a4a}.topbar #streamMode:hover svg{color:var(--gold)}
.topbar #streamMode[aria-pressed="true"]{background:var(--gold);color:#1a1400}.topbar #streamMode[aria-pressed="true"] svg{color:#1a1400}
.app{transition:margin .35s ease,max-width .35s ease}
@keyframes bob{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes barin{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
body.stream .dragbar{animation:barin .35s ease-out}
body.stream .dragbar.guide .dmove,body.stream .dragbar.guide .dsize{animation:bob .8s ease-in-out 2;box-shadow:inset 0 0 0 1px var(--gold),0 0 12px rgba(255,209,0,.45)}
@media (prefers-reduced-motion:reduce){.app{transition:none}body.stream .dragbar,body.stream .dragbar.guide .dmove,body.stream .dragbar.guide .dsize{animation:none}}}
.bsite{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;z-index:1}
.bsite .bs1{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;letter-spacing:.05em;color:#ffd75e;text-shadow:0 1px 0 #7a5a10,0 2px 8px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.8);white-space:nowrap}
.bsite .bs2{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d8d8d8;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);white-space:nowrap}
@media (max-width:900px){.bsite{display:none}}
.bbars{display:grid;gap:4px;flex:none;width:160px}
.bbar{display:grid;grid-template-columns:18px 1fr 22px;align-items:center;gap:6px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
.bbar img{width:18px;height:18px;border-radius:50%;border:1px solid #000}
.bbar .tk{height:4px;border-radius:3px;background:rgba(0,0,0,.75);box-shadow:0 0 0 1px rgba(255,255,255,.18);overflow:hidden}
.bbar .fl{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .35s ease}
.bbar.lead .fl{background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 70%,#000),var(--cc))}
.bbar b{text-align:right;color:var(--ink)}
@media (max-width:640px){.banner{flex-wrap:wrap;gap:8px 12px;padding:10px 12px}.bbars{width:100%;grid-template-columns:repeat(3,1fr);gap:8px}.bbar{grid-template-columns:18px 1fr 20px}.banner h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){.bbar .fl{transition:none}}

.status{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);padding:10px 12px;margin-top:8px;border-radius:4px 4px 0 0}
.status strong{font-size:16px}
.status .r{font-variant-numeric:tabular-nums;color:var(--ink2);display:flex;flex-wrap:wrap;gap:2px 14px;justify-content:flex-end}
.status .r b{color:var(--blue);font-weight:700}
.status .r .left{margin-left:0}
.status .r .left b{color:var(--green2)}
.status .r .left b.over{color:var(--red)}
/* A build that today's rules refuse in part (made before a beta patch moved its talents): the points came back, this says which and why.
   The same orange dashed ring marks the emptied cells on the trees, with a tag saying how many came back; the addon draws the same. */
:root{--back:#ff8a1f;--back2:#ffb066}
.stale{background:linear-gradient(90deg,rgba(255,138,31,.07),rgba(255,138,31,0) 420px),var(--panel);border-top:1px solid #333;box-shadow:inset 3px 0 0 var(--back);padding:10px 14px 12px;font-size:13px;color:var(--ink2);line-height:1.45;position:relative}
.stale[hidden]{display:none}
.stale h4{margin:0 22px 3px 0;font-size:14px;color:var(--gold);display:flex;align-items:center;gap:8px}
.stale h4 i{width:14px;height:14px;border:2px dashed var(--back);border-radius:4px;flex:none}
.stale .lead{margin:0 0 10px;max-width:110ch}
.stale b{color:var(--ink);font-weight:600}
.stale .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px;align-items:start}
.stale .cols p{margin:0}.stale .cols a{color:var(--back2);font-weight:600}
.stale h5{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--back2)}
.stale ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.stale ul.ch li{padding-left:12px;position:relative}.stale ul.ch li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--back)}
.stale ul.chips li{display:flex;align-items:center;gap:9px;background:#161616;border-radius:5px;padding:4px 10px 4px 5px;outline:1px dashed var(--back);outline-offset:-1px}
.stale ul.chips img{width:28px;height:28px;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b;flex:none}
.stale ul.chips div{flex:1 1 auto;min-width:0}
.stale ul.chips b{display:block;line-height:1.2;font-size:13px}
.stale ul.chips small{display:block;color:var(--muted);font-size:11px;line-height:1.3}
.stale ul.chips i{font-style:normal;color:var(--back2);font-weight:700;white-space:nowrap;margin-left:4px;font-variant-numeric:tabular-nums;font-size:12px}
.stale .soft{color:var(--muted);font-size:12px;margin:7px 0 0}
.stale details.more{margin-top:10px}.stale details.more summary{list-style:none;cursor:pointer;display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;color:var(--back2);box-shadow:inset 0 0 0 1px var(--back)}.stale details.more summary::-webkit-details-marker{display:none}
.stale details.more summary .c,.stale details.more[open] summary .o{display:none}.stale details.more[open] summary .c{display:inline}.stale details.more>div{margin-top:10px}
.stale>div+div,.stale>div+details{margin-top:12px}.stale>div p{margin:0}
.stale .soft.rg{color:var(--back2)}
.stale ul.plan li{padding-left:12px;position:relative}.stale ul.plan li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--back)}
.stale ul.plan small{color:var(--muted);font-size:12px}
.stale .go{display:inline-block;margin-top:9px;padding:6px 14px;border-radius:4px;font-weight:700;font-size:13px;color:#000;background:var(--back);border:0;cursor:pointer}.stale .go:hover{background:var(--back2)}
.stale .un{display:inline-block;margin-top:9px;padding:5px 12px;border-radius:4px;font-weight:600;font-size:12px;color:var(--ink2);background:#333;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px #444}.stale .un:hover{color:#fff}
.stale .x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:3px}.stale .x:hover{color:#fff;background:#333}
@media (max-width:820px){.stale .cols,.stale .cols.two{grid-template-columns:1fr;gap:12px}}
@media (max-width:640px){.stale{padding:9px 10px 10px 12px}.stale ul.chips li{padding-right:8px}.stale h5{margin-bottom:4px}.stale .go,.stale .un{margin-top:6px}.stale>div+div{margin-top:10px}.stale>div+details{margin-top:8px}.stale .lead{margin-bottom:8px}}
.talent.was{outline:2px dashed var(--back);outline-offset:3px;border-radius:7px}
.talent .wb{position:absolute;left:-9px;top:-9px;z-index:2;background:#000;border:1px dashed var(--back);color:var(--back2);font-size:10px;font-weight:700;line-height:15px;height:17px;padding:0 4px;border-radius:3px;white-space:nowrap;pointer-events:none}
.tip .gw,.sheet .gw,.ghost .gw{margin:6px 0 4px;padding:6px 9px;border:1px dashed var(--back);border-radius:4px;color:var(--back2);font-size:12px;line-height:1.4}

.trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--panel);padding:0 6px 6px;border-radius:0 0 4px 4px}
@media (max-width:820px){.trees{grid-template-columns:1fr}}
.tree{background:var(--panel2);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.status .sreset{margin-left:10px;margin-right:auto;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;color:var(--ink2);background:#333;box-shadow:inset 0 0 0 1px #444;white-space:nowrap}.status .sreset:hover{color:#fff;background:#3f3f3f;box-shadow:inset 0 0 0 1px var(--gold2)}
.thead{--fill:0%;--cc:var(--gold);display:flex;align-items:center;gap:8px;padding:8px 10px;background:#333;position:relative}
.thead::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--fill);background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .3s ease;box-shadow:0 0 8px rgba(255,209,0,.35)}
.thead.lead::after{background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 70%,#000),var(--cc));box-shadow:0 0 8px color-mix(in srgb,var(--cc) 45%,transparent)}
.thead.spent .c b{color:var(--gold)}
.thead.lead .c b{color:var(--cc)}
.thead .n{display:flex;flex-direction:column;gap:1px;min-width:0}
.thead .nr{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.thead::after{transition:none}}
.thead img{width:30px;height:30px;border-radius:50%;border:2px solid #4fc3f7;box-shadow:0 0 0 1px #000}
.thead .n{font-weight:700;font-size:15px;flex:1;line-height:1.15}.thead h3.n{margin:0}
.thead .c{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600}
.thead .c b{color:#fff}
.thead .tr{opacity:.55;font-size:15px;line-height:1;padding:2px 4px;border-radius:3px}
.thead .tr:hover{opacity:1;background:#444}
.status .r .lvl{margin-left:0;color:var(--muted)}
.status .r .lvl b{color:var(--ink2);font-weight:600}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tip-bg);border-top:1px solid var(--tip-line);padding:10px 14px 0;box-shadow:0 -10px 30px rgba(0,0,0,.6);font-size:14px;line-height:1.35;max-height:42vh;overflow:auto;overscroll-behavior:contain}
.sheet .tip-body .hd{padding-right:36px}
.sheet .tip-body .hd .r{color:#bbb;font-size:12px}
.sheet .nx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px;color:#ddd}
.sheet .nx .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#888;margin-right:2px}
.sheet .nx .pair s{color:#999;text-decoration-color:#777}.sheet .nx .pair b{color:var(--gold);margin-left:5px}
.sheet .nx .pair b::before{content:"→ ";color:#777;font-weight:400}
.sheet .nxd{margin-top:6px}.sheet .nxd summary{cursor:pointer;color:#ccc;font-size:13px;list-style:none;display:flex;align-items:center;gap:6px}.sheet .nxd summary::before{content:"▸";color:var(--gold);font-size:11px}.sheet .nxd[open] summary::before{content:"▾"}
.sheet .nxd .d{margin-top:4px}
.sheet[hidden]{display:none}
/* touch: the floating tooltip next to the talent you just tapped; taps pass through it */
.ghost{position:absolute;z-index:55;width:min(340px,calc(100vw - 16px));padding:9px 12px 10px;border-radius:10px;background:rgba(10,10,14,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,215,94,.38);box-shadow:0 8px 28px rgba(0,0,0,.55);color:#e8e8e8;font-size:13.5px;line-height:1.35;pointer-events:none;animation:ghin .14s ease-out}
.ghost::after{content:"";position:absolute;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:rgba(10,10,14,.9);border:1px solid rgba(255,215,94,.38);border-width:1px 0 0 1px}
.ghost::after{bottom:-7px;border-width:0 1px 1px 0}   /* it always opens above the talent, so the arrow always points down at it */
.ghost.capped{pointer-events:auto}.ghost.capped .gs{max-height:var(--gmax);overflow-y:auto;overscroll-behavior:contain;-webkit-mask:linear-gradient(#000 calc(100% - 14px),transparent);mask:linear-gradient(#000 calc(100% - 14px),transparent);padding-bottom:6px}.ghost.capped.gend .gs{-webkit-mask:none;mask:none}   /* taller than the screen allows: it scrolls inside itself, the talent stays in sight */
@keyframes ghin{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ghost{animation:none}}
.ghost[hidden]{display:none}
.ghost .gn{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-weight:600;font-size:15px}
.ghost .gn span{font-weight:400;color:#bbb;font-size:12px;white-space:nowrap}.ghost .gn span b{color:var(--green2)}
.ghost .gm{color:#ddd;font-size:12px;margin-top:2px}
.ghost .gd{color:var(--gold);margin-top:3px;white-space:pre-line}
.ghost .gx{margin-top:5px;color:#ddd;display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline}.ghost .gx .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#888}
.ghost .gx s{color:#999;text-decoration-color:#777}.ghost .gx b{color:var(--gold);margin-left:5px}.ghost .gx b::before{content:"→ ";color:#777;font-weight:400}
.ghost .ge{color:#c9b98a;font-style:italic;font-size:11.5px;margin-top:3px}.ghost .gr{color:var(--red);margin-top:4px;font-size:12.5px}
.ghost .cl{margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.14);color:#bbb;font-size:12px}.ghost .cl b{color:#fff}.ghost .cl .m{color:#999;font-size:11px}.ghost .cl .diff{margin-top:3px}.ghost .cl .lab{display:block;margin-top:3px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#888}.ghost .cl .old{color:#bdbdbd}.ghost .cl .t{margin-top:2px;color:#bdbdbd}
.talent.sel{box-shadow:0 0 0 1px #000,0 0 0 2px #fff,0 0 16px rgba(255,255,255,.4)}
.talent .rk.bump{animation:tflashrk .35s ease-out}
/* on a touch screen the rank number is the undo button: a little bigger, with a wider tap zone */
@media (hover:none){html:not(.mouse) .talent .rk{min-width:30px;height:20px;line-height:20px;font-size:12px;right:-9px;bottom:-9px}html:not(.mouse) .talent .rk::before{content:"";position:absolute;inset:-8px -8px -8px -12px}}
.talent .un{display:none;position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6e5a2e,#2e2410 62%,#1a1408);border:1px solid #000;box-shadow:0 0 0 1px #b8963f,0 0 8px rgba(214,178,94,.35),0 3px 7px rgba(0,0,0,.7);font-size:0;z-index:3;animation:unin .16s ease-out}
.talent .un::before{content:"";position:absolute;inset:-6px 0 0 -6px}
.talent .un::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#fff3d6;box-shadow:0 0 4px rgba(255,225,160,.7)}
@keyframes unin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media (hover:none){html:not(.mouse) .talent.sel.partial .un,html:not(.mouse) .talent.sel.maxed .un{display:block}}
/* on a phone the minus is thumb-sized, and it sits out past the corner so it covers little of the icon (Ben, 7 Oct) */
@media (hover:none){html:not(.mouse) .talent .un{width:32px;height:32px;left:-19px;top:-19px}html:not(.mouse) .talent .un::before{inset:-10px 0 0 -10px}html:not(.mouse) .talent .un::after{left:8px;right:8px;height:3px;margin-top:-1.5px}}
/* it answers the moment a thumb lands (the point comes off on lift), and the icon gives a little as the point leaves */
@media (hover:none){html:not(.mouse) .talent .un{transition:transform .07s ease-out,filter .07s ease-out}html:not(.mouse) .talent .un:active{transform:scale(.86);filter:brightness(1.35)}}
.talent.dip img,.talent.dip .ab{animation:tdip .2s ease-out}@keyframes tdip{0%{transform:scale(1)}35%{transform:scale(.9);filter:brightness(.7)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.talent.dip img,.talent.dip .ab{animation:none}}
.talent .un.hit{animation:unhit .22s ease-out,unring .5s ease-out}
@keyframes unhit{0%{transform:scale(1)}30%{transform:scale(.84)}100%{transform:scale(1)}}
@keyframes unring{0%{box-shadow:0 0 0 1px #b8963f,0 0 0 0 rgba(214,178,94,.5),0 3px 7px rgba(0,0,0,.7)}100%{box-shadow:0 0 0 1px #b8963f,0 0 0 16px rgba(214,178,94,0),0 3px 7px rgba(0,0,0,.7)}}
@media (prefers-reduced-motion:reduce){.talent .un.hit{animation:none}}
@media (max-width:820px){.status{position:sticky;top:0;z-index:7;box-shadow:0 6px 14px rgba(0,0,0,.5)}}
.sheet .tip-body .n{font-size:16px;font-weight:600}
.sheet .tip-body .cost{color:#bbb}.sheet .tip-body .p{margin-top:6px}.sheet .tip-body .d{color:var(--gold);margin-top:2px;white-space:pre-line}
.sheet .tip-body .est{color:#d8c58a;font-style:italic;font-size:12px;margin-top:4px}.sheet .tip-body .next{margin-top:6px}.sheet .tip-body .req{color:var(--red);margin-top:6px}.sheet .tip-body .cta{display:none}
.sheet .acts{display:flex;gap:8px;margin-top:10px;position:sticky;bottom:0;padding:8px 0 calc(10px + env(safe-area-inset-bottom));background:var(--tip-bg);box-shadow:0 -10px 12px -6px var(--tip-bg)}
.sheet .acts button{flex:1;padding:10px;border-radius:6px;font-weight:700;font-size:15px;background:#2a2a2a;color:#fff;user-select:none;-webkit-user-select:none}
.sheet .acts .add{background:#1f5a1f;color:#bfffbf}.sheet .acts .rem{background:#5a1f1f;color:#ffbfbf}
.sheet .acts button:disabled{opacity:.35}
.sheet .x{position:absolute;right:10px;top:8px;font-size:20px;color:#aaa;padding:4px 8px}
@media (hover:none){html:not(.mouse) .tip{display:none!important}}
.tbody{position:relative;flex:1;background:#111 center/cover no-repeat;padding:14px 8px 16px}
.tbody::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));pointer-events:none}
.grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:64px;gap:4px 0}
.tree.empty .tbody{display:flex;align-items:center;justify-content:center;min-height:260px;color:var(--ink2);text-align:center;font-style:italic;padding:20px}
.tree.empty .tbody p{position:relative;margin:0;max-width:24ch}
.arrows{position:absolute;inset:0;pointer-events:none;overflow:visible}
.arrows line,.arrows polyline{stroke:#c9c9c9;stroke-width:2;fill:none;opacity:.55}
.arrows .on{stroke:var(--gold);opacity:1}
.arrows marker path{fill:#c9c9c9}
.arrows marker.on path{fill:var(--gold)}
.tier{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.08);pointer-events:none}

.talent{position:relative;width:44px;height:44px;margin:4px auto 0;border-radius:5px;cursor:pointer;user-select:none;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b}
a.talent{display:block;color:inherit;text-decoration:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.talent img,.talent .ab{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;object-fit:cover}.talent img{color:transparent}
.talent .ab{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;letter-spacing:.02em;color:#ddd;background:linear-gradient(135deg,#3a3a3a,#1a1a1a)}
.talent.locked img,.talent.locked .ab{filter:grayscale(1) brightness(.55)}
.talent.avail{box-shadow:0 0 0 1px #000,0 0 0 2px var(--green2)}
.talent.partial{box-shadow:0 0 0 1px #000,0 0 0 2px var(--green2)}
.talent.maxed{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}
.talent:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.talent .rk{position:absolute;right:-8px;bottom:-8px;padding:0 4px;min-width:26px;height:17px;line-height:17px;border-radius:3px;background:#000;border:1px solid #444;color:#8a8a8a;font-size:11px;font-weight:400;text-align:center;font-variant-numeric:tabular-nums}
/* the number says how far in you are at a glance: none is quiet white, some is green, maxed is bold gold (Ben, 7 Oct) */
.talent.avail .rk{color:#e8e8e8}.talent.partial .rk{color:var(--green);border-color:#2a5a1a}
.talent.maxed .rk{color:var(--gold);border-color:#6a5510;font-weight:700}
.talent.unknown{outline:1px dashed #a88}
/* Build complete (no points left): unpicked talents go quiet so the build itself is all you see. */
body.done .trees .talent.avail{box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b}
body.done .trees .talent.avail img,body.done .trees .talent.avail .ab{filter:grayscale(1) brightness(.55)}
body.done .trees .talent.avail .rk,body.done .trees .talent.locked .rk{display:none}
body.done .trees .talent.avail:hover,body.done .trees .talent.locked:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
.badge{display:none;position:absolute;left:-7px;top:-7px;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:800;line-height:16px;text-align:center;color:#000;border:1px solid #000;z-index:2}
body.cmp .badge{display:block}
.badge.new{background:#4ade80}.badge.changed{background:#fbbf24}.badge.moved{background:#60a5fa}
body.cmp .talent.same img,body.cmp .talent.same .ab{filter:grayscale(.6) brightness(.75)}
/* the Compare to Classic key: one wrapping row, each mark drawn the way the trees draw it (the lettered corner badge, the dimmed icon) next to its word */
.legend{display:none;align-items:center;gap:5px 14px;flex-wrap:wrap;background:var(--panel);padding:6px 12px;font-size:12px;line-height:18px;color:var(--ink2);border-top:1px solid var(--line)}
body.cmp .legend{display:flex}
.legend .k{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend .kb{flex:none;width:15px;height:15px;box-sizing:border-box;border-radius:50%;border:1px solid #000;font-size:9.5px;font-weight:800;line-height:13px;text-align:center;color:#000}
.legend .kb.new{background:#4ade80}.legend .kb.changed{background:#fbbf24}.legend .kb.moved{background:#60a5fa}
.legend .kdim{flex:none;width:16px;height:16px;border-radius:2px;background:#3a3a3a center/cover no-repeat;box-shadow:0 0 0 1px #000,0 0 0 2px #6b6b6b;filter:grayscale(.6) brightness(.75)}
.legend .knote{color:var(--muted);white-space:nowrap}
.legend .knote .tap{display:none}
@media (hover:none){html:not(.mouse) .legend .knote .tap{display:inline}html:not(.mouse) .legend .knote .hov{display:none}}
@media (max-width:640px){.legend{gap:5px 12px;padding:6px 10px}}
.removed{display:none;position:relative;margin:8px 4px 0;padding:8px 10px;background:rgba(0,0,0,.55);border-radius:4px;font-size:12px;color:var(--ink2)}
body.cmp .removed{display:block}
.removed b{color:#f87171;display:block;margin-bottom:3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.removed span{display:inline-block;margin:1px 8px 1px 0;border-bottom:1px dotted #666;cursor:help}
.removed span:hover,.removed span:focus-visible{color:#fff;border-bottom-color:var(--gold)}
.removed span.base{color:var(--green2);border-bottom-style:solid;border-bottom-color:#2a5a1a}
.removed span.base::after{content:" · baseline";color:var(--muted);font-size:10px}
.tip .cl,.sheet .cl{margin-top:8px;padding-top:6px;border-top:1px solid #333;color:#bbb;font-size:12px}
.stt .cl{margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.14);color:#c4c4c4;font-size:11.5px}.stt .cl .key{float:right;font-weight:400;font-size:10px;color:#8a8a8a}.stt .cl .key del,.stt .cl .key ins{padding:0 2px}.stt .cl .both{margin-top:3px;color:#c9c9c9;line-height:1.35}
.cl b{color:#ddd}
.cl .t{color:#9aa}
.cl .m{color:#8b8b8b;font-size:11px;margin-top:2px}
.cl .diff{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;margin-top:6px;align-items:start}
.cl .lab{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#777;padding-top:2px;font-weight:700}
.cl .diff .lab:first-child{color:#e07a7a}
.cl .diff .lab:nth-child(3){color:#ffd75e}
.cl .old{color:#9a9a9a}
.cl .new{color:#e6e6e6}
.cl del{color:#e07a7a;text-decoration:line-through;text-decoration-color:rgba(224,122,122,.7)}
.cl ins{text-decoration:none;color:#ffe08a;background:rgba(255,209,0,.14);border-radius:2px;padding:0 1px}
.talent.flash{animation:tflash .55s ease-out}
.talent.flash .rk{animation:tflashrk .55s ease-out}
@keyframes tflash{0%{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold),0 0 0 6px rgba(255,209,0,.5),0 0 22px rgba(255,209,0,.9)}100%{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)}}
@keyframes tflashrk{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.talent.flash,.talent.flash .rk{animation:none}}
.topbar .btn[aria-pressed="true"]{background:#5a4a1e;color:var(--gold)}
#cmp,#prBtn{box-shadow:inset 0 0 0 1px var(--gold2);color:var(--gold);background:#2e2a1f}
#cmp:hover,#prBtn:hover{background:#3a3323}
#cmp[aria-pressed="true"],#prBtn[aria-pressed="true"]{background:var(--gold);color:#1a1a1a;box-shadow:none}
@media (max-width:640px){#cmp,#prBtn{flex:1 1 40%;text-align:center;padding:8px 10px}.prset{gap:6px}.prset button{flex:1 1 auto;max-width:none;font-size:11px;padding:7px 4px;gap:3px}.prset button img{width:16px;height:16px}.prset button[data-ps="all"]{flex:0 0 auto;padding:7px 8px}.prset button[data-ps="all"] span{display:none}.topbar .spacer{display:none}.topbar .lvl-word{display:none}.topbar .controls{gap:6px;justify-content:space-between}#loadBuild{flex:0 1 auto;min-width:0;max-width:80px;padding-left:6px;padding-right:20px;background-position:right 5px center}}

.tip{position:fixed;z-index:50;width:340px;max-width:calc(100vw - 16px);background:rgba(10,10,12,.84);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#e8e8e8;border:1px solid var(--tip-line);border-radius:6px;padding:10px 12px 10px;font-size:13px;line-height:1.38;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,215,94,.45),0 12px 34px rgba(0,0,0,.75)}
.tip[hidden]{display:none}
.tip .hd{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #2c2618}
.tip .hd img{width:34px;height:34px;border-radius:5px;border:1px solid #6b5a2a;box-shadow:0 0 0 1px #000;flex:none}
.tip .n{font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.15;color:#ffd75e;text-shadow:0 1px 0 #5a4210}
.tip .pips{letter-spacing:3px;font-size:11px;color:var(--gold);margin-right:4px}.tip .pips i{font-style:normal;color:#4a4a4a}
.tip .r{color:#9a9a9a;font-size:12px;margin-top:2px}
.tip .cost{color:#ddd}
.tip .p{color:#ddd}
.tip .d{color:var(--gold);margin-top:3px;white-space:pre-line}.tip .d ins{text-decoration:none;color:#fff;font-weight:600}
.tip .est{color:#d8c58a;font-style:italic;margin-top:4px;font-size:12px}
.tip .next{margin-top:11px;color:#bdbdbd;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tip .req{color:var(--red);margin-top:10px}
.tip .cta{color:var(--green);margin-top:11px}.tip .cta small{color:#777;font-size:12px;margin-left:8px}
.tip .cta.no{color:#999}


.racials{margin-top:10px;background:var(--panel);border-radius:4px;padding:10px 12px}
.racials .rh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.racials .rh strong{font-size:16px}
.racials .rh label{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:13px;cursor:pointer}
.racials .rh .raceall{margin-left:auto;border-radius:4px;padding:5px 10px;font-weight:600;font-size:13px;background:#3a3a3a;color:#fff;border:0;cursor:pointer}
.racials .rh .raceall:hover{background:#4a4a4a}
.racials .rh .cnt{color:var(--muted);font-size:12px}
.race.ccard .rn img.portrait{box-shadow:0 0 0 1px var(--cc)}
.factions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:820px){.factions{grid-template-columns:1fr}}
.faction h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--line)}
.faction.horde h3{color:#e6432f}.faction.alliance h3{color:#3d8bff}
.race{background:var(--panel2);border-radius:6px;padding:10px 12px;margin-bottom:8px;border-left:3px solid transparent}
.faction.horde .race{border-left-color:#7a2a20}.faction.alliance .race{border-left-color:#24507f}
.race.dim{opacity:.4}
.race .rn{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.race.rc{cursor:pointer;padding:8px 12px}
.race.rc .rn{margin-bottom:0}
.race.rc .rmeta{flex:1;min-width:0}
.race.rc .strip{display:flex;gap:4px;flex:none}
.race.rc .strip img{width:26px;height:26px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;background:#111}
.race.rc .chev{color:var(--muted);font-size:14px;flex:none;transition:transform .15s}
.race.rc.open .chev{transform:rotate(180deg)}
.race.rc ul{display:none}
.race.rc.open ul{display:grid;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.race.rc:hover{background:#2c2c2c}
.race.rc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:480px){.race.rc .strip img{width:22px;height:22px}.race.rc .cls img{width:16px;height:16px}}
@media (prefers-reduced-motion:reduce){.race.rc .chev{transition:none}}
.race .rn img.portrait{width:44px;height:44px;border-radius:50%;border:2px solid #000;box-shadow:0 0 0 1px var(--line);background:#000;flex:none}
.race .rn .nm{font-weight:700;font-size:15px;line-height:1.15}.nm small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.race .rn .cls{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.race .rn .cls img{width:18px;height:18px;border-radius:3px;border:1px solid #000;display:block}
.race ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.race li{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start}
.race li img,.race li .ab{width:26px;height:26px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;background:#111;display:block;object-fit:cover}
.race li .ab{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#999}
.race li b{color:var(--gold);font-weight:600;display:block;line-height:1.2}
.race li span{color:var(--ink2);display:block;line-height:1.3}
#classRacials{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.legacy.fold{margin:0;background:var(--panel2)}
.legacy.fold .lfan img{width:30px;height:30px}
.legacy.fold .ltitle strong{font-size:15px}
.ltrees.one{grid-template-columns:1fr}
.ltree h4 img.portrait{width:26px;height:26px;border-radius:50%;border:2px solid #000;box-shadow:0 0 0 1px var(--line)}
.legacy.fold .ltree{background:var(--panel)}
.legacy.fold .crs{margin:8px 0 0}
.ltree ul.spells{display:flex;flex-wrap:wrap;gap:4px}
.ltree ul.spells li.sp{display:inline-flex;align-items:baseline;gap:5px;background:#1a1a1a;border-radius:999px;padding:3px 9px;font-size:12px;box-shadow:inset 0 0 0 1px #3d3d3d}
.spells li.sp b{font-weight:600;color:var(--ink)}
.spells li.sp small{color:var(--muted);font-size:10px}
.ltree ul.spells li.sp.istal{box-shadow:inset 0 0 0 1px #4a4020}
.ltree ul.spells li.sp small.tg{color:var(--gold2);text-transform:uppercase;letter-spacing:.04em;font-size:9px}

/* ---------- spellbook, styled after the in-game book ---------- */
.book{--pg:#e4d2a8;--ink2:#3a2812;margin:12px auto 4px;max-width:920px;perspective:1800px}
.bookcover{position:relative;display:grid;grid-template-columns:1fr 66px;border-radius:12px;padding:16px 0 16px 16px;background:radial-gradient(120% 90% at 25% 0,#5a3a22 0,#2e1a10 45%,#170c07 100%);box-shadow:0 14px 44px rgba(0,0,0,.65),inset 0 0 0 2px #6b4a22,inset 0 0 0 4px #170c07,inset 0 0 0 5px #a8803c,inset 0 0 60px rgba(0,0,0,.6)}
.bookcover::before,.bookcover::after{content:"";position:absolute;left:5px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe9a8 0,#d4a843 45%,#6b4a1a 100%);box-shadow:0 0 4px rgba(0,0,0,.8);pointer-events:none}
.bookcover::before{top:5px}.bookcover::after{bottom:5px}
.page{position:relative;min-height:440px;display:flex;border-radius:3px 0 0 3px;overflow:hidden;background:linear-gradient(90deg,rgba(40,20,5,.45),rgba(40,20,5,.12) 6%,transparent 14%),radial-gradient(120% 90% at 50% 0,rgba(255,250,232,.55),transparent 60%),radial-gradient(90% 90% at 100% 100%,rgba(110,70,25,.38),transparent 55%),var(--pg);box-shadow:inset 0 0 46px rgba(90,60,20,.38),inset 0 0 0 1px rgba(90,60,20,.3);transform-style:preserve-3d}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page::after{content:"";position:absolute;inset:10px 12px 10px 14px;pointer-events:none;border:1px solid rgba(110,75,25,.35);border-radius:2px;box-shadow:inset 0 0 0 3px rgba(255,245,215,.25)}
.pgface{position:relative;flex:1;display:flex;flex-direction:column;padding:22px 26px 16px 32px;color:var(--ink2);transform-origin:left center}
.pgface.out{animation:pgout .26s ease-in forwards}.pgface.in{animation:pgin .34s cubic-bezier(.2,.7,.2,1)}
@keyframes pgout{to{transform:rotateY(-75deg);opacity:0}}
@keyframes pgin{from{transform:rotateY(65deg);opacity:0}to{transform:none;opacity:1}}
.pgtitle{margin:0;font-family:Cinzel,Georgia,serif;font-size:21px;font-weight:700;color:#4a2f10;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,246,220,.7)}
.pgsub{font-size:11px;color:#7a5a2a;margin:2px 0 12px;padding-bottom:7px;border-bottom:1px solid rgba(90,60,20,.3);box-shadow:0 1px 0 rgba(255,246,220,.5)}
.sgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;gap:5px 18px}
.sgrid li{--i:0;display:flex;gap:10px;align-items:center;padding:4px 6px;border-radius:6px;position:relative;animation:spin-in .38s both;animation-delay:calc(var(--i)*32ms)}
@keyframes spin-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sgrid li:hover{background:rgba(255,236,180,.5)}
.sgrid .ico{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:5px;background:#0a0704;box-shadow:0 0 0 1px #1a1008,0 0 0 2px #b08a3c,0 0 0 3px #3a2612,0 2px 6px rgba(0,0,0,.55);overflow:hidden;transition:transform .15s,box-shadow .15s}
.sgrid .ico img{width:100%;height:100%;display:block;object-fit:cover}
.sgrid .ico::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.26),transparent 46%);pointer-events:none}
.sgrid li:hover .ico{box-shadow:0 0 0 1px #1a1008,0 0 0 2px #ffd75e,0 0 0 3px #3a2612,0 0 16px 3px rgba(255,200,80,.75);transform:scale(1.07)}
.sgrid .txt{min-width:0;line-height:1.2}
.sgrid .txt b{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13.5px;color:#3a2812;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgrid .rk{display:block;font-size:11px;color:#7a5a2a}
.sgrid .lv{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap}
.sgrid .lv i{font-style:normal;font-size:10px;line-height:1;padding:2px 4px;border-radius:3px;background:rgba(90,60,20,.13);color:#6a4a1a;font-variant-numeric:tabular-nums}
.sgrid .lv i.cur{background:#4a2f10;color:#ffd75e;box-shadow:0 0 6px rgba(255,200,80,.55)}
.sgrid .lv i.na{opacity:.45}
.sgrid .tal{position:absolute;left:3px;top:-3px;font-size:8px;font-family:Cinzel,serif;font-weight:700;letter-spacing:.06em;background:linear-gradient(#ffe08a,#c9973a);color:#3a2612;padding:1px 4px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.6);z-index:1}
.pgfoot{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:auto;padding-top:14px;font-family:Cinzel,serif;font-size:12px;color:#5a3a12}
.pgfoot .pager{display:flex;align-items:center;gap:10px;margin-left:auto;font-weight:700;letter-spacing:.04em}.pgfoot .pgno{min-width:64px;text-align:center;line-height:1.3}.pgfoot .pgno b{display:block;font-weight:700;white-space:nowrap}.pgfoot .pgno small{display:block;font-size:10px;font-weight:400;letter-spacing:.05em;color:#7a5a2a;white-space:nowrap}
@media (max-width:760px){.pgfoot{margin-top:10px;flex-wrap:wrap;row-gap:8px}.pgfoot .pager{margin-left:auto}.pgfoot button{width:38px;height:38px}.pgfoot .pager{gap:8px}}
.allr{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:11.5px;letter-spacing:.03em;user-select:none}.allr input{width:15px;height:15px;margin:0;accent-color:#a8803c;cursor:pointer}
.pgfoot button{position:relative;width:30px;height:30px;border:0;padding:0;cursor:pointer;border-radius:50%;font-size:0;color:transparent;background:radial-gradient(circle at 40% 32%,#ffe9a8 0,#d8ad4a 38%,#9a6c24 72%,#5a3a12 100%);box-shadow:0 0 0 1px #3a2612,0 0 0 2px #b08a3c,0 2px 5px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.5);transition:transform .12s,box-shadow .12s,filter .12s}
.pgfoot button::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border:7px solid transparent}
.pgfoot button[data-pg="1"]::after{border-left:10px solid #2a1808;border-right:0;transform:translate(-30%,-50%)}
.pgfoot button[data-pg="-1"]::after{border-right:10px solid #2a1808;border-left:0;transform:translate(-70%,-50%)}
.pgfoot button:hover:not(:disabled){transform:scale(1.1);box-shadow:0 0 0 1px #3a2612,0 0 0 2px #ffd75e,0 0 14px 3px rgba(255,200,80,.6),inset 0 1px 1px rgba(255,255,255,.6)}
.pgfoot button:active:not(:disabled){transform:scale(.95)}
.pgfoot button:disabled{cursor:default;opacity:.45;filter:saturate(.25) brightness(.75);box-shadow:0 0 0 1px #3a2612,0 0 0 2px #7a6a4c}
.btabs{display:flex;flex-direction:column;gap:6px;padding:4px 0 0 6px}
.btab{position:relative;width:54px;height:54px;border:0;padding:0;cursor:pointer;border-radius:0 9px 9px 0;background:linear-gradient(90deg,#170c07,#3a2415);box-shadow:inset 0 0 0 1px #6b4a22,2px 2px 6px rgba(0,0,0,.55);transition:transform .15s,box-shadow .15s}
.btab img{width:36px;height:36px;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px #7a5a2a;display:block;margin:0 auto;opacity:.7;transition:opacity .15s}
.btab.on{transform:translateX(5px);box-shadow:inset 0 0 0 1px #ffd75e,0 0 14px rgba(255,200,80,.5)}
.btab.on img,.btab:hover img{opacity:1}
.btab span{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#170c07;color:#ffd75e;font-family:Cinzel,serif;font-size:11px;padding:4px 9px;border-radius:4px;box-shadow:0 0 0 1px #7a5a2a,0 4px 10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .15s}
.btab:hover span,.btab.on span{opacity:1}
@media (prefers-reduced-motion:reduce){.pgface.out,.pgface.in,.sgrid li{animation:none}}

/* spellbook, second pass: spine, corner curl, shine, motes, opening */
.book.open .bookcover{animation:bookopen .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes bookopen{from{opacity:0;transform:rotateY(-14deg) translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.bookcover{overflow:hidden}.bookcover[hidden],.bylv[hidden]{display:none}
.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,220,150,.09) 50%,transparent 58%);background-size:320% 100%;animation:sheen 11s linear infinite;mix-blend-mode:screen}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.spine{position:absolute;top:0;bottom:0;left:50%;width:70px;margin-left:-35px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(70,40,10,.14) 40%,rgba(70,40,10,.32) 50%,rgba(70,40,10,.14) 60%,transparent);z-index:0}
.pgface{z-index:1}
.sgrid{column-gap:64px}
.rule{position:relative;height:9px;margin:4px 0 12px}
.rule::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(110,75,25,.55) 12%,rgba(110,75,25,.55) 88%,transparent);box-shadow:0 1px 0 rgba(255,246,220,.55)}
.rule i{position:absolute;left:50%;top:1px;width:7px;height:7px;margin-left:-4px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe08a,#b0842e);box-shadow:0 0 0 2px var(--pg),0 0 0 3px rgba(110,75,25,.5)}
.pgsub{border-bottom:0;box-shadow:none;margin-bottom:0;padding-bottom:0}
.pgface.out::after,.pgface.in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(40,20,5,.0),rgba(40,20,5,.35));animation:shade .3s ease both}
@keyframes shade{from{opacity:0}to{opacity:1}}
.pgface.in::after{animation-direction:reverse}
.sgrid .ico::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);z-index:1;pointer-events:none}
.sgrid li:hover .ico::before{animation:shine .6s ease-out}
@keyframes shine{to{left:130%}}
.sgrid li:hover .txt b{color:#5a3210;text-shadow:0 0 8px rgba(255,200,80,.45)}
.btab.on{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:inset 0 0 0 1px #ffd75e,0 0 10px rgba(255,200,80,.35)}50%{box-shadow:inset 0 0 0 1px #ffe9a8,0 0 20px rgba(255,210,100,.7)}}
.btab:active{transform:translateX(2px) scale(.96)}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe08a;box-shadow:0 0 6px 2px rgba(255,210,110,.55);opacity:0;animation:mote 9s ease-in-out infinite}
.motes i:nth-child(1){left:12%;top:70%;animation-delay:0s}.motes i:nth-child(2){left:30%;top:40%;animation-delay:1.6s;animation-duration:11s}.motes i:nth-child(3){left:58%;top:78%;animation-delay:3.1s}.motes i:nth-child(4){left:72%;top:30%;animation-delay:4.4s;animation-duration:12s}.motes i:nth-child(5){left:88%;top:62%;animation-delay:6s}.motes i:nth-child(6){left:44%;top:18%;animation-delay:7.5s;animation-duration:10s}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.7}50%{opacity:.35;transform:translate(10px,-22px)}80%{opacity:.6}100%{opacity:0;transform:translate(-6px,-46px)}}
@media (prefers-reduced-motion:reduce){.sheen,.motes i,.btab.on,.book.open .bookcover{animation:none}}
/* phones: the shimmer, the breathing tab, the motes and the masthead mist never stop on their own, and an iPhone reported at 100% CPU
   with the book open (23 Sep). Touch devices get the still versions; every device rests them while the book is scrolled off screen. */
@media (hover:none){.sheen,.motes i,.btab.on,.mbookw::before,.mbookw::after,.pin .pico::after{animation:none}.mbookw::before{opacity:.22}.mbookw::after{opacity:.16}.motes{display:none}}
.book.idle .sheen,.book.idle .motes i,.book.idle .btab.on{animation-play-state:paused}

/* spellbook, third pass: a real leaf turn on wide screens */
.page{perspective:1800px}
.page.turning{overflow:visible}
.leaf,.lf.s{position:absolute;top:0;bottom:0;width:50%;pointer-events:none}
.lf.s{z-index:4;overflow:hidden;background:var(--pg)}
.leaf{z-index:5;transform-style:preserve-3d;will-change:transform}
.leaf.fwd{left:50%;transform-origin:left center;animation:leaffwd .85s cubic-bezier(.45,.05,.3,1) both}
.leaf.bwd{left:0;transform-origin:right center;animation:leafbwd .85s cubic-bezier(.45,.05,.3,1) both}
@keyframes leaffwd{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes leafbwd{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.lf{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 30px rgba(0,0,0,.45);background:radial-gradient(120% 90% at 50% 0,rgba(255,250,232,.55),transparent 60%),var(--pg);box-shadow:inset 0 0 46px rgba(90,60,20,.38)}
.lf.b{transform:rotateY(180deg)}
/* which face shows is decided by the leaf's real angle (flip() sets .past once it is edge-on), not by backface-visibility: Safari ignores that on these faces and showed the old page mirrored */
.leaf:not(.past) .lf.b,.leaf.past .lf.f{visibility:hidden}
/* and the same swap on the leaf's own clock, for a frame where the script has not ticked: the turn's easing reaches half way (edge-on) 39.8% in */
.leaf .lf.f{animation:lffront .85s linear both}.leaf .lf.b{animation:lfback .85s linear both}
@keyframes lffront{0%,39.8%{visibility:visible}39.9%,100%{visibility:hidden}}
@keyframes lfback{0%,39.8%{visibility:hidden}39.9%,100%{visibility:visible}}
/* turning back, the half that stays is the right one (inset:0 above beat the inline right:0, so the old right page sat on the left) */
.lf.s.r{left:50%}
.lfw{position:absolute;top:0;width:200%}.lfw .pgface{height:100%;box-sizing:border-box}
.leaf.fwd .lf.f .lfw,.leaf.bwd .lf.b .lfw{left:-100%}
.leaf.fwd .lf.b .lfw,.leaf.bwd .lf.f .lfw,.lf.s.l .lfw{left:0}
.lf.s.r .lfw{left:-100%}
.lf::after{content:"";position:absolute;inset:0;pointer-events:none}
.leaf.fwd .lf.f::after{background:linear-gradient(90deg,rgba(40,20,5,.42),rgba(40,20,5,.08) 35%,transparent 60%);animation:lfshade .85s ease-in both}
.leaf.fwd .lf.b::after{background:linear-gradient(270deg,rgba(40,20,5,.45),rgba(40,20,5,.1) 35%,transparent 60%);animation:lfshade .85s ease-out reverse both}
.leaf.bwd .lf.f::after{background:linear-gradient(270deg,rgba(40,20,5,.42),rgba(40,20,5,.08) 35%,transparent 60%);animation:lfshade .85s ease-in both}
.leaf.bwd .lf.b::after{background:linear-gradient(90deg,rgba(40,20,5,.45),rgba(40,20,5,.1) 35%,transparent 60%);animation:lfshade .85s ease-out reverse both}
@keyframes lfshade{from{opacity:0}to{opacity:1}}
.page.turning .pgface{animation:none}
.page.turning .pgface::after{display:none}
.page.turning .pgface .stt{display:none}
.lfw .stt{display:none}
.lfw .sgrid li{animation:none}
.pgface.still .sgrid li{animation:none}
@media (max-width:760px){.spine{display:none}.sgrid{column-gap:18px}}
.stt{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;scrollbar-width:none;padding:7px 10px 6px;border-radius:4px;background:rgba(7,9,20,.72);-webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:12.5px;line-height:1.3;box-shadow:0 0 0 1px rgba(200,186,140,.75),0 0 0 2px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.5);pointer-events:none;overscroll-behavior:contain;animation:sttin .1s ease-out}.stt::-webkit-scrollbar{display:none}
@keyframes sttin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.stt .sttn{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:3px}.stt .sttn b{font-family:Cinzel,serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.01em}.stt .sttn span{color:#9d9d9d;font-size:11.5px;white-space:nowrap}
.stt .sttl{display:flex;justify-content:space-between;gap:12px;color:#fff}.stt .sttl.req{color:#ff5a5a}.stt .sttl.lv{color:#9d9d9d;font-size:11.5px}
.stt .sttd{margin-top:5px;color:#ffd100}.stt .sttd.muted{color:#9d9d9d}
.stt .stts{margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.12);color:#8a8a8a;font-size:10.5px}.stt .stts.ok{color:#8fe08f}
.sgrid li.tipon{background:rgba(255,236,180,.5)}.sgrid li:focus-visible{outline:2px solid #ffd75e;outline-offset:1px}
@media (max-width:760px){.sgrid li.tipon{flex-wrap:wrap}.stt.inline{position:static;flex:0 0 100%;width:auto;max-width:none;max-height:none;overflow:visible;margin:8px 0 2px;border-radius:6px;animation:unfold .22s ease-out}@keyframes unfold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.stt{left:8px;right:8px;bottom:8px;top:auto;width:auto;max-width:none;max-height:58vh;pointer-events:auto;-webkit-overflow-scrolling:touch;background:rgba(7,9,20,.86);box-shadow:0 0 0 1px rgba(200,186,140,.75),0 -8px 30px rgba(0,0,0,.6)}}
@media (max-width:760px){.bookcover{grid-template-columns:1fr;padding:12px 12px 0}.page{border-radius:3px;min-height:0}.pgface{padding:16px 12px 12px 16px}.sgrid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.btabs{flex-direction:row;justify-content:center;padding:8px 0 10px;gap:8px}.btab{border-radius:8px 8px 0 0;width:50px;height:50px}.btab.on{transform:translateY(-3px)}.btab span{display:none}}
.sbnotes{margin:4px 0 10px;padding-left:18px;color:var(--ink2);font-size:13.5px;line-height:1.5}
.sbnotes li{margin:6px 0}.sttl.nt span{color:#e0b060}.chg{display:inline-block;margin-left:7px;padding:1px 5px;border-radius:3px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;vertical-align:1px}.chg.new{color:#0c1408;background:#6fd85a}.chg.rw{color:#2a1a02;background:#f0b64a}.chg.ren{color:#efe6ff;background:#6a4fa0}.chg.src{color:#3a2812;background:rgba(90,60,20,.18)}.bkctl,.bylv{--ink2:#bdbdbd}.bkctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;max-width:920px;margin:12px auto 0}.seg{display:inline-flex;padding:3px;border-radius:999px;background:#1b1b1b;box-shadow:inset 0 0 0 1px #333}.seg button{padding:6px 13px;border:0;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);background:none;cursor:pointer;white-space:nowrap}.seg button:hover{color:var(--ink)}.seg button[aria-pressed="true"]{color:#1a1408;background:linear-gradient(180deg,#ffdf7a,#d9a93a)}.seg.filt button[aria-pressed="true"]{color:#0c1408;background:#6fd85a}.seg.filt button[data-filt="all"][aria-pressed="true"]{color:var(--ink);background:#3a3a3a}.sgrid li.none{grid-column:1/-1;justify-content:center;color:#7a5a2a;font-size:13px;padding:30px 0;animation:none}.bylv{max-width:920px;margin:12px auto 4px;border-radius:12px;background:#1b1b1b;box-shadow:inset 0 0 0 1px #2e2e2e;padding:12px 14px 14px}.lvhead{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid #2c2c2c;color:var(--ink2);font-size:13px}.lvhead label{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}.lvhead label b{display:inline-block;min-width:22px;text-align:right;color:var(--gold);font-size:16px;font-variant-numeric:tabular-nums}.lvhead input[type=range]{width:min(300px,52vw);accent-color:#d9a93a}.lvsec{padding:8px 0 4px}.lvsec h4{display:flex;align-items:baseline;gap:9px;margin:0 0 5px;font-family:Cinzel,Georgia,serif;font-size:14px;color:#ffd75e;letter-spacing:.03em}.lvsec h4 small{font-family:"Open Sans",sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}.lvsec.next h4 small{color:#6fd85a}.lvsec.tals{margin-top:8px;padding-top:12px;border-top:1px solid #2c2c2c}.lvsec.later{opacity:.5}.lvsec.later:hover{opacity:1}.sgrid.lvl{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-flow:row;gap:3px 16px}.sgrid.lvl li{animation:none;padding:3px 6px}.sgrid.lvl li:hover{background:#262626}.sgrid.lvl .ico{flex-basis:30px;width:30px;height:30px}.sgrid.lvl .txt b{color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:600}.sgrid.lvl .rk{color:var(--muted)}.sgrid.lvl .ltab{margin-left:auto;padding-left:8px;font-size:11px;color:var(--muted);white-space:nowrap}.sgrid.lvl .chg.src{color:var(--ink2);background:#333}.sgrid.lvl .tal{left:0;top:-4px}@media (max-width:760px){.sgrid.lvl{grid-template-columns:1fr}.bkctl{justify-content:flex-start}.seg button{padding:6px 10px;font-size:12px}}
.sbnotes b{color:var(--gold)}
.crs b{color:var(--gold)}
.fine.press a{display:inline-flex;align-items:center;gap:6px;font-weight:700}.fine.press img{width:20px;height:20px;border-radius:4px;vertical-align:middle}
.crh{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:8px}
.crh strong{font-size:14px}.crh span{color:var(--muted);font-size:12px;max-width:70ch}
.crgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.crgrid .race{margin:0}
.crs{color:var(--muted);font-size:11px;margin-top:6px}
/* Your build: one panel, two rows. Solid gold = the action; grey pills = things you saved. */
.yours{margin-top:10px;background:var(--panel);border-radius:4px;padding:0 12px}
.yrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 0}
.yrow+.yrow{border-top:1px solid var(--line)}
.ylab{flex:none;min-width:44px;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.yrow .btn{border-radius:4px;padding:6px 12px;font-weight:600;font-size:13px;background:#3a3a3a;color:#fff}
.yrow .btn:hover{background:#4a4a4a}
.yrow .btn.primary{background:var(--gold);color:#1a1400}
.yrow .btn.primary:hover{background:#ffdc33}
.yrow .btn[hidden]{display:none}
.yrow input{flex:1;min-width:200px;background:#111;color:#ddd;border:1px solid var(--line);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px}
.ybtns{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.yrow .tcico{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35);margin:-2px 7px -2px -2px;vertical-align:middle;flex:none}
.yrow .btn.primary{display:inline-flex;align-items:center}.yrow .btn.primary[hidden]{display:none}
.yrow a.btn{text-decoration:none;display:inline-flex;align-items:center}
.yrow.tc .bhint{flex-basis:100%}
.bkup{display:inline-flex;gap:6px}.bkup .btn[hidden]{display:none}
.pastebox{flex-basis:100%;display:flex;flex-direction:column;gap:6px}.pastebox[hidden]{display:none}.pastebox textarea{width:100%;box-sizing:border-box;background:#111;color:#ddd;border:1px solid var(--line);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px;resize:vertical}
.bname{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}.bname[hidden]{display:none}.bname input{flex:1 1 140px;min-width:0;max-width:320px}@media (max-width:640px){.bname input{font-size:16px;flex-basis:100%;max-width:none}}.bchip .bx.sure{color:#fff;background:#7a2020;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.blist{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
.blist:empty{display:none}
.bchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:#2a2a2a;border-radius:999px;padding:3px 6px 3px 3px;box-shadow:inset 0 0 0 1px #3d3d3d;font-size:12px;color:var(--ink2)}
.bchip img{width:20px;height:20px;border-radius:50%;border:1px solid #000;flex:none}
.bchip .bn{font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;color:var(--ink)}
.bchip .bn:hover{text-decoration:underline}
.bchip .bs{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bchip .bx{color:#888;padding:0 5px;font-size:14px;line-height:1;cursor:pointer;border-radius:50%}
.bchip .bx:hover{color:#fff;background:#444}
.bchip.cur{background:#2e2a1f;box-shadow:inset 0 0 0 1px #4d4020}
.bchip.cur .bn{color:var(--gold)}
.bchip.cur .bn::after{content:" · loaded";font-weight:400;color:var(--muted)}
.bhint{color:var(--muted);font-size:11px;flex-basis:100%;margin-top:-2px}
@media (max-width:640px){.yours .blist{flex-basis:100%}.yrow input{min-width:150px}.ybtns{flex-basis:100%}}
.help{color:var(--muted);font-size:12px;margin:10px 2px 0;max-width:80ch}
.legacy{margin-top:10px;background:var(--panel);border-radius:4px;padding:0 12px 10px}
.legacy summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 0;user-select:none}
.legacy summary::-webkit-details-marker{display:none}
.lfan{display:flex;flex:none;isolation:isolate}
.lfan img{width:34px;height:34px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px var(--gold2),0 3px 8px rgba(0,0,0,.6);background:#111}
.lfan img+img{margin-left:-12px}
.lfan img:nth-child(1){transform:rotate(-10deg) translateY(2px);z-index:1}
.lfan img:nth-child(2){z-index:3}
.lfan img:nth-child(3){transform:rotate(10deg) translateY(2px);z-index:2}
.ltitle{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ltitle strong{font-size:16px;color:var(--ink)}
.ltitle-h{margin:0;font:inherit;color:inherit}.ltitle-h>strong{display:block}
.ltitle span{color:var(--muted);font-size:12px;line-height:1.3}
.lpill{flex:none;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2);background:#2e2a1f}
.legacy summary:hover .lpill{background:#3a3323}
.lpill .hide{display:none}
.legacy[open] .lpill .show{display:none}
.legacy[open] .lpill .hide{display:inline}
.legacy[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.lnote{color:var(--muted);font-size:12px;margin:0 0 10px;max-width:80ch}
.lchal{margin:12px 0 4px;border-top:1px solid var(--line,#2a2a2a);padding-top:8px}
.lchal summary{cursor:pointer;font-size:13.5px;color:var(--ink2,#cfcfcf);padding:6px 0}
.lchal summary b{color:var(--gold,#f5c542)}
.lchal ul{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.lchal li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;font-size:13px;line-height:1.45}
.lchal li b{color:var(--ink,#eee)}.lchal li .n{color:var(--muted);font-size:12px;justify-self:end}
.lchal li .d{grid-column:1/-1;color:var(--muted)}
.lchal .its{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 16px;margin-top:2px}
.lchal .its i{font-style:normal}.lchal .its b{color:var(--ink2,#cfcfcf);font-weight:600;margin-right:4px}
.ltrees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ltrees.play .tree .tbody{background:#111;padding:10px 6px 12px}.ltrees.play .thead{font-size:13px}
.legacy .lpts{display:block;color:var(--gold);font-size:12px;margin-top:2px}.legacy .lpts:empty{display:none}
.lvlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 28px;font-size:13px}
.lvlist li{display:flex;align-items:center;gap:9px;padding:3px 0;border-bottom:1px solid #262626;min-width:0}
.lvlist li .lv{flex:none;width:50px;padding:2px 0;border-radius:4px;background:#2a2a2a;box-shadow:inset 0 0 0 1px #3a3a3a;color:var(--gold);font-weight:700;font-size:12px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lvlist li img{width:22px;height:22px;border-radius:4px;border:1px solid #000;flex:none}
.lvlist li b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lvlist li .rk{margin-left:auto;flex:none;color:var(--green);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.lvlist li .rk i{font-style:normal;color:var(--muted);font-weight:400}
.legacy.fold.slim summary{padding:6px 0;gap:10px}.legacy.fold.slim .ltitle strong{font-size:14px}.legacy.fold.slim .ltitle span{font-size:12px}.legacy.fold.slim .lpill{padding:4px 12px;font-size:12px}.legacy.fold.slim[open] summary{margin-bottom:6px}
@media (max-width:700px){.ltrees.play{grid-template-columns:1fr}}
@media (max-width:900px){.ltrees{grid-template-columns:1fr}}
.ltree{background:var(--panel2);border-radius:6px;padding:10px 12px}
.ltree h4{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gold)}
#sectionPage a.hub{color:var(--gold)}
/* /racials: races by class (server.js raceGrid); scrolls inside its box on a phone */
#sectionPage .ltree{min-width:0}
#sectionPage h2.rg-h{margin:0 0 6px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--gold)}.rgrid{position:relative;overflow-x:auto;margin:6px 0 16px;border:1px solid var(--line,#2a2a2a);border-radius:6px}.rgrid table{border-collapse:collapse;width:100%;min-width:640px;font-size:12.5px}.rgrid th,.rgrid td{padding:6px 5px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}.rgrid thead th{color:var(--ink2);font-weight:600;line-height:1.2;vertical-align:bottom}.rgrid thead th.fac{color:var(--muted);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:0}.rgrid tbody th{text-align:left;white-space:nowrap;padding-left:10px}.rgrid td.y{color:var(--green);font-weight:700}.rgrid td.n::before{content:"·";color:var(--muted)}.rgrid td.c{color:var(--ink2);font-variant-numeric:tabular-nums}.rgrid tbody tr:last-child>*{border-bottom:0}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltree h4 img{width:24px;height:24px;border-radius:4px;border:1px solid #000}
.ltree ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.ltree li{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start}
/* old racial spells: a row per race, the face on the left, the spells as icon and name */
.wasrace .wr-lead{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.4}.wr{display:flex;flex-wrap:wrap;gap:6px}.wr-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'race who' 'race sp';gap:1px 8px;align-items:center;padding:6px 10px 6px 6px;border-radius:8px;background:#202020;box-shadow:inset 0 0 0 1px #2e2e2e}.wr .wr-race{grid-area:race;display:inline-flex}.wr .wr-race img{width:30px;height:30px;border-radius:6px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}.wr .wr-race img+img{margin-left:-8px}.wr .wr-who{grid-area:who;font-weight:700;color:var(--ink);font-size:12.5px;line-height:1.2}.wr .wr-sp{grid-area:sp;display:flex;flex-wrap:wrap;gap:2px 10px}.wr .wr-s{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);cursor:default;border-radius:4px}.wr .wr-s:hover,.wr .wr-s:focus-visible{color:#ffd75e;outline:none}.wr .wr-s img{width:18px;height:18px;border-radius:3px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a}
.ltree li img{width:26px;height:26px;border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a3a;background:#111}
.ltree li b{color:var(--ink);font-weight:600}
.ltree li b small{color:var(--muted);font-weight:400;margin-left:4px}
.ltree li h3.abn,.ltree li h4.abn{margin:0;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.ltree li span{display:block;color:var(--ink2);line-height:1.3}
/* the class page's written-out talents (server-rendered, see classBody in server.js) */
.ttext .ltree ul{gap:10px}.ttext .ltree li span.rq,.ttext .ltree li span.cl{color:var(--muted);font-size:12px}.ttext .ltree li span.rk+span.rk{margin-top:2px}.ttext .ltree li span.cl b{color:var(--gold2)}.ttext .ltree h4 small{color:var(--muted);font-weight:400;font-size:12px}.ttext .ltree>p.crs{margin:8px 0 0}
.foot2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;color:var(--ink2);font-size:13px;align-items:stretch}
.feedcard{grid-column:1/-1;margin:0;padding:0 12px}
.feedrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 0}
.feedrow,.tiprow{grid-template-columns:84px 1fr 216px}
.feedrow .fico,.tipcard .goblin{justify-self:center}
.feedrow .lpill,.tipcard a.lpill{justify-self:stretch;text-align:center}
.feedrow .fico{width:58px;height:58px;border-radius:8px;border:1px solid #6b5a2a;box-shadow:0 0 0 1px #000,0 3px 8px rgba(0,0,0,.6)}
.feedrow .ftext{display:flex;flex-direction:column;gap:2px;min-width:0;background:#262626;border-radius:10px;padding:9px 13px;box-shadow:inset 0 0 0 1px #3a3a3a}
.feedrow strong{font-size:15px;color:var(--ink)}
.feedrow span{color:var(--muted);font-size:12px;line-height:1.35}
.feedrow .lpill{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;font-size:16px;border-radius:999px}
@media (max-width:640px){.feedrow,.tiprow{grid-template-columns:auto 1fr}.feedrow .lpill{grid-column:1/-1;padding:11px 20px;font-size:15px}.feedrow .fico{width:48px;height:48px}}
.guildcard{margin-top:10px;padding:0 12px;background:linear-gradient(180deg,#2b261a,#1e1e1e);box-shadow:inset 0 0 0 1px rgba(200,155,26,.55)}
.guildcard[hidden]{display:none}
.guildcard .spm{display:none}@media (max-width:1000px){.guildcard .spl{display:none}.guildcard .spm{display:inline}}
.sprow{display:grid;grid-template-columns:84px 1fr 216px;align-items:center;gap:14px;padding:10px 0;text-decoration:none}
.sprow .spico{justify-self:center;width:58px;height:58px;border-radius:50%;background:#0d0d0d;padding:9px;box-shadow:0 0 0 2px #000,0 0 0 3px var(--gold2),0 3px 8px rgba(0,0,0,.6)}
.sprow .sptext{display:flex;flex-direction:column;gap:2px;min-width:0}
.sprow .spk{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}.sprow .spk b{color:var(--gold2)}
.sprow strong{font-size:16px;color:var(--ink);line-height:1.25}.sprow strong i{font-style:normal;color:#ffd75e}
.sprow .sps{color:var(--ink2);font-size:12.5px;line-height:1.4}
.sprow .lpill{justify-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;font-size:16px;background:var(--gold);color:#1a1408;box-shadow:none}.sprow:hover .lpill{background:#ffdf4d}
@media (max-width:640px){.sprow{grid-template-columns:auto 1fr;gap:8px 12px;padding:8px 0}.sprow .spico{width:44px;height:44px;padding:6px}.sprow .sptext{display:block}.sprow .spk{display:block;margin-bottom:2px}.sprow strong{display:inline;font-size:15px}.guildcard .spm{margin-left:5px;font-size:12.5px;white-space:nowrap}.guildcard.built .spm{display:none}@media (max-width:380px){.sprow strong{font-size:14.5px}}.sprow .lpill{grid-column:1/-1;padding:8px 16px;font-size:14.5px}}
.tipcard{grid-column:1/-1;margin:0;padding:0 12px}
.tipcard[hidden]{display:none}
.tiprow{display:grid;grid-template-columns:84px 1fr 216px;align-items:center;gap:14px;padding:10px 0}
.tipcard .goblin{height:78px;width:auto;margin:-12px 0 -8px 0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.bubble{position:relative;min-width:0;display:flex;flex-direction:column;gap:2px;background:#262626;border-radius:10px;padding:9px 13px;box-shadow:inset 0 0 0 1px #3a3a3a}
.bubble::before{content:"";position:absolute;left:-9px;top:20px;border:9px solid transparent;border-left:0;border-right-color:#262626}
.bubble strong{font-size:15px;color:var(--ink)}
.bubble span{color:var(--muted);font-size:12px;line-height:1.35}
a.lpill.kofi{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;font-size:16px;font-weight:700;color:#1a1400;background:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.45)}
a.lpill.kofi:hover{background:#ffdc33;color:#1a1400}
a.lpill.kofi svg{width:24px;height:20px}
@media (max-width:640px){.tiprow{grid-template-columns:auto 1fr;gap:10px 12px}.tipcard a.lpill{grid-column:1/-1;padding:11px 20px;font-size:15px}.tipcard a.lpill svg{width:24px;height:20px}}
a.lpill{text-decoration:none;white-space:nowrap}
a.lpill:hover{background:#3a3323}
@media (max-width:820px){.foot2{grid-template-columns:1fr}}
.foot2 .legacy.fold{background:var(--panel)}.foot2 .how{display:flex;flex-direction:column;justify-content:space-between}.foot2 .how .fhead,.foot2 .how ul,.foot2 .how .cvs{flex:none}
.how .fhead{justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.how .ltitle{flex:none}
.states{display:flex;gap:14px;align-items:flex-end}
.states .lg{display:flex;flex-direction:column;align-items:center;gap:8px}
.states .talent{width:26px;height:26px;margin:0;cursor:default;border-radius:4px;background:linear-gradient(135deg,#3a3a3a,#1a1a1a)}
.states .talent.locked{background:linear-gradient(135deg,#262626,#111)}
.states .talent img{position:absolute;inset:0;width:100%;height:100%;border-radius:4px;object-fit:cover}
.states .talent .rk{right:-6px;bottom:-6px;min-width:0;height:13px;line-height:13px;font-size:9px;padding:0 3px}
.states small{font-size:10px;color:var(--muted);letter-spacing:.04em}
.about{background:transparent;border-left:3px solid var(--gold2);padding:6px 0 6px 14px;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.about p{color:var(--ink2)}
.about p b{color:var(--ink);font-weight:600}
.about .fine{color:var(--muted);font-size:12px;margin-top:2px}
.about .fine a{color:var(--gold2);text-decoration:none;border-bottom:1px solid #5a4614}.about .fine a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.legacy.static .fhead{display:flex;align-items:center;gap:12px;padding:12px 0;margin-bottom:10px;border-bottom:1px solid var(--line)}
.foot2 ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}.foot2 .how ul li+li{border-top:1px solid #2a2a2a;padding-top:5px}
.foot2 li b{color:var(--ink);font-weight:600}
.foot2 p{margin:0 0 8px;color:var(--muted);max-width:70ch}
.foot2 p:last-child{margin-bottom:0}
.foot2 .mob{display:none}
.cvs{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.cvsh2 strong{color:var(--ink);font-size:14px}
.cvsh2{margin:0 0 6px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px 14px}@media (min-width:900px){.steps{grid-template-columns:1fr 1fr}}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start}
.steps .talent{margin:0;cursor:default;width:36px;height:36px}.steps .talent .rk{right:-5px;bottom:-5px;height:14px;line-height:14px;font-size:10px;padding:0 3px;min-width:0}
.steps div{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.4;color:var(--ink2)}
.steps b{color:var(--ink);font-size:13px}
.wnpill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:5px;height:22px;padding:0 10px;border-radius:999px;font:inherit;font-size:11px;line-height:22px;font-weight:700;color:var(--gold);background:#2e2a1f;box-shadow:inset 0 0 0 1px var(--gold2);cursor:pointer}.wnpill i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px var(--gold)}.wnpill:hover{background:#3a3323}
.fbrand{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;padding:22px 0 8px;margin-top:6px;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(200,155,26,.35),transparent) 1}
.fbrand img{width:40px;height:40px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #000,0 0 0 3px var(--gold2),0 3px 8px rgba(0,0,0,.6)}
.fbrand .fwm{font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:700;letter-spacing:.04em;color:#ffd75e;text-shadow:0 1px 0 #7a5a10,0 2px 6px rgba(0,0,0,.6)}
.fbrand .fsub{color:var(--muted);font-size:12px}
@media (max-width:480px){.fbrand .fsub{flex-basis:100%;text-align:center}}
@media (hover:none){.foot2 .mob{display:block}.foot2 .desk{display:none}}
.help kbd{border:1px solid #444;border-radius:3px;padding:0 4px;background:#222;font-family:inherit}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#000;color:#fff;padding:7px 14px;border-radius:4px;border:1px solid #555;opacity:0;transition:opacity .15s;pointer-events:none;font-size:13px}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}