/* Forever Mart styles. Loaded by index.html. */
/* Colours. paper/leaf: page and raised surfaces; ink/soft: text; acc: the accent (primary buttons, active tab, focus);
   margin: the ledger's margin rule; head/logo: headings and the name; star and the three coins. */
:root{--paper:#e2ebdc;--leaf:#f1f5ea;--ink:#16322a;--soft:#4a6358;--rule:#a3bba8;--red:#b83a30;--gold:#d2a22a;--silver:#a3afb6;--copper:#bf6c3a;
  --acc:#16322a;--acc-ink:#f1f5ea;--acc-hi:#0c221c;--head:#16322a;--logo:#16322a;--margin:#b83a30;--star:#b4860f;--coin-edge:rgba(22,50,42,.4);--glow:transparent;color-scheme:light}
/* Item names in their in-game rarity colours, darkened enough to read on paper. */
:root{--q-poor:#6b6b6b;--q-common:var(--ink);--q-uncommon:#1a7f12;--q-rare:#0a5bb5;--q-epic:#7b2fbf;--q-legendary:#b85c00}
/* Dark: warm charcoal greys for the page, Mocha Sand #C48B67 for secondary text, Tangerine Orange #FE4D03 as the accent,
   and Coffee Brown #693822 for the ledger's margin rule. */
:root[data-theme=dark]{--paper:#262624;--leaf:#30302e;--ink:#ebe9e3;--soft:#c48b67;--rule:#3f3e3a;--red:#ff9b80;--gold:#f5c24c;--silver:#d4d2cc;--copper:#e8925a;
  --acc:#fe4d03;--acc-ink:#1f1f1d;--acc-hi:#ff6c2c;--head:#f5f4ef;--logo:#fe4d03;--margin:#9a5232;--star:#f5c24c;--coin-edge:rgba(0,0,0,.5);--glow:transparent;
  --q-poor:#a8998e;--q-uncommon:#5be04a;--q-rare:#5aa9ff;--q-epic:#c27bff;--q-legendary:#ffa040;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:radial-gradient(1100px 520px at 20% -8%,var(--glow),transparent 70%) no-repeat,var(--paper);color:var(--ink);font:17px/1.55 Vollkorn,Georgia,serif;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1,h2{font-family:'Grenze Gotisch',Vollkorn,serif;font-weight:700;line-height:1.05;margin:0;color:var(--head)}
h1{font-size:clamp(38px,6.2vw,60px);margin-bottom:16px}
h2{font-size:28px;font-weight:500;margin-bottom:12px}
p{margin:0 0 14px;max-width:64ch}
.soft{color:var(--soft)}.sm{font-size:15px}
.lead{font-size:19px;color:var(--soft)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The page is a ledger leaf: a double red margin rule runs down the left */
.page{position:relative;max-width:1120px;margin:0 auto;padding:0 24px 0 64px;min-height:100vh}
.page::before{content:"";position:absolute;left:36px;top:0;bottom:0;width:1px;background:var(--margin);box-shadow:4px 0 0 var(--margin);opacity:.6}
header{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:18px 0 14px;border-bottom:2px solid var(--ink)}
.hact{display:flex;gap:10px;align-items:center;order:1}
header>nav{order:2;flex:1 0 100%;gap:26px;margin-top:2px}
.logo{font:700 38px/1 'Grenze Gotisch',serif;text-decoration:none;white-space:nowrap;color:var(--logo);margin-right:auto;display:inline-flex;align-items:center;gap:10px}
/* The coin: flips now and then in the header, and lands on a card when a trade completes. */
.lname{display:inline-flex;flex-direction:column;line-height:1}
.slogan{font:italic 400 15px/1 Vollkorn,Georgia,serif;color:var(--soft);letter-spacing:.03em;margin-top:5px}
.lcw{display:inline-flex;perspective:300px}.lcoin{width:40px;height:40px;display:block}
.lcoin.flip{animation:coinFlip 1.15s cubic-bezier(.3,.1,.3,1)}
@keyframes coinFlip{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-9px) rotateY(620deg)}100%{transform:translateY(0) rotateY(1080deg)}}
#toss{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none;padding:16px}
#toss[hidden]{display:none}
.tbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:min(320px,100%);padding:64px 34px 24px;text-align:center;background:var(--leaf);border:1.5px solid var(--acc);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:tossBox 3s both}
.tbox b{font:700 34px/1.1 'Grenze Gotisch',Vollkorn,serif;color:var(--head)}.tbox span{font-size:20px}
.tcoin{position:absolute;left:50%;top:-52px;width:104px;height:104px;margin-left:-52px;perspective:500px}
.tcoin img{width:104px;height:104px;display:block;animation:tossCoin 1.15s cubic-bezier(.3,.1,.3,1) both;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.tring{position:absolute;left:50%;top:-52px;width:104px;height:104px;margin-left:-52px;border:3px solid var(--acc);border-radius:50%;opacity:0;animation:tossRing .8s 1s both}
@keyframes tossBox{0%{opacity:0;transform:translateY(26px) scale(.92)}9%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes tossCoin{0%{transform:translateY(90px) rotateX(0) scale(.7)}50%{transform:translateY(-80px) rotateX(900deg) scale(1.15)}86%{transform:translateY(0) rotateX(1440deg) scale(1)}93%{transform:translateY(-10px) rotateX(1440deg)}100%{transform:translateY(0) rotateX(1440deg)}}
@keyframes tossRing{0%{opacity:.85;transform:scale(.7)}100%{opacity:0;transform:scale(2.4)}}
nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
nav a.l{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a.l:hover{border-color:var(--rule)}
nav a.l.on{border-color:var(--acc);font-weight:600}
.hact select{width:auto;max-width:260px;min-height:42px}
/* Phones: logo, bell and Account on one row; the pages as a row you can swipe; then who you're trading as. */
@media(max-width:760px){
  header{gap:8px 10px;padding:12px 0 0}
  .logo{font-size:27px;order:0;flex:1 1 0;min-width:0;gap:7px}.lcoin{width:28px;height:28px}
  @media(max-width:420px){.logo{font-size:23px}}
  .slogan{font-size:12px;margin-top:3px}
  .hact{display:contents}
  .dch{order:1}.bellw{order:1}#acct{order:2;min-height:40px;padding:0 12px}.bell{min-height:40px}
  header>nav{order:3;flex:1 0 100%;flex-wrap:wrap;gap:0 18px;padding-top:2px}
  nav::-webkit-scrollbar{display:none}
  nav a.l{white-space:nowrap;padding:8px 0 9px;font-size:15.5px}
  #who{order:4;flex:1 0 100%;padding-bottom:10px}#who select{width:100%;max-width:none;min-height:38px;font-size:15px}
}
.badge{display:inline-block;min-width:22px;padding:0 6px;margin-left:6px;border-radius:11px;background:var(--red);color:var(--leaf);font-size:13px;font-weight:600;text-align:center;line-height:22px}
main{padding:34px 0 30px}
.layout{display:block}
#side{display:none}
@media (min-width:1280px){
  .page{max-width:1500px}
  .layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:0 52px;align-items:start}
  #side{display:block;position:sticky;top:0;padding:34px 0 30px}
}
/* Class colours as in-game; on the light theme they're mixed with ink so pale ones (Priest, Rogue) stay readable */
.cl{color:var(--cc,var(--head))}
:root:not([data-theme=dark]) .cl{color:color-mix(in srgb,var(--cc,var(--ink)) 62%,var(--ink))}
.cl-warrior{--cc:#c69b6d}.cl-paladin{--cc:#f48cba}.cl-hunter{--cc:#aad372}.cl-rogue{--cc:#fff468}.cl-priest{--cc:#ffffff}.cl-shaman{--cc:#0070dd}.cl-mage{--cc:#3fc7eb}.cl-warlock{--cc:#8788ee}.cl-druid{--cc:#ff7c0a}
.ava{flex:none;width:58px;height:58px;border-radius:5px;border:2px solid var(--cc,var(--rule));object-fit:cover;background:var(--paper)}
.guild{color:#1a8f12}
:root[data-theme=dark] .guild{color:#5be04a}
.chead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:22px}
.chead .ava{width:76px;height:76px}
.chead h1{margin:0}
.chead .meta{font-size:17px}
/* Gear: slots down both sides and along the bottom, the character render in the middle */
.gear{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px 14px;max-width:560px;padding:16px;border:1px solid var(--rule);border-radius:6px;
  background:radial-gradient(60% 55% at 50% 45%,color-mix(in srgb,var(--acc) 10%,var(--leaf)),var(--leaf))}
.gcol{display:grid;gap:8px;align-content:start}
/* Blizzard's render has wide empty margins, so it is enlarged and cropped to the character */
.gfig{position:relative;min-height:440px;overflow:hidden}
.gfig img{position:absolute;left:50%;top:50%;height:175%;max-width:none;transform:translate(-50%,-47%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.gfig .ilv{position:absolute;left:0;bottom:0;font-size:14px;color:var(--soft)}
.gbot{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.gs{display:block;width:52px;height:52px;border-radius:5px;border:2px solid var(--rule);background:color-mix(in srgb,var(--paper) 70%,#000);overflow:hidden;cursor:default}
.gs img{display:block;width:100%;height:100%}
.gs.q-poor{border-color:#9d9d9d}.gs.q-common{border-color:#d8d8d8}.gs.q-uncommon{border-color:#1eff00}.gs.q-rare{border-color:#2f8cff}.gs.q-epic{border-color:#b45bff}.gs.q-legendary{border-color:#ff8000}
.gs.empty{opacity:.45}
@media (max-width:640px){.gfig{min-height:300px}.gs{width:42px;height:42px}.gear{grid-template-columns:42px minmax(0,1fr) 42px;padding:10px}}
/* Left panel: the character you're trading as, or a welcome for visitors */
.card{padding:18px;border:1px solid var(--rule);border-radius:4px;background:var(--leaf)}
.card+.card{margin-top:16px}
.card h3{margin:0 0 10px;font:500 20px/1.1 'Grenze Gotisch',serif;color:var(--head)}
.crest{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.crest svg{flex:none}
.crest .who{font:700 26px/1 'Grenze Gotisch',serif;color:var(--head)}
.crest .soft{font-size:14px;margin-top:4px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--rule);font-size:15px}
.kv a{font-weight:600}
.kv .n{font-weight:600;font-variant-numeric:tabular-nums}
.kv .n.hot{color:var(--acc)}
.side-acts{display:grid;gap:8px;margin-top:12px}
.side-acts .btn{width:100%}
.side-steps{margin:0 0 4px;padding-left:20px;font-size:15px}
.side-steps li{padding:3px 0}
#crumb{min-height:24px;margin-bottom:10px;font-size:15px;color:var(--soft)}
footer{padding:14px 0 40px;border-top:1px solid var(--rule);color:var(--soft);font-size:15px}
.btn.dng{color:var(--red);border-color:var(--red)}.btn.dng:hover{background:var(--red);color:var(--leaf)}
.sec.dz{border-top-color:var(--red)}.sec.dz h2{color:var(--red)}
.sub3{margin:18px 0 6px;font-size:17px}
.hrow{display:grid;grid-template-columns:86px 1fr auto;gap:4px 14px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rule)}
@media(max-width:560px){.hrow{grid-template-columns:1fr auto}.hrow>.soft:first-child{grid-column:1/-1}}
.bellw{position:relative}
.bell{display:flex;align-items:center;gap:2px;min-height:42px;padding:0 10px;background:none;border:1px solid var(--rule);border-radius:6px;color:var(--ink);cursor:pointer}
.bell:hover,.bell[aria-expanded=true]{border-color:var(--acc)}
.bell{position:relative}.bell .badge{position:absolute;top:-7px;right:-7px;margin:0;min-width:19px;padding:0 5px;font-size:11.5px;line-height:19px}
.npanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--leaf);border:1px solid var(--rule);border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,.28);animation:fadeIn .16s ease-out}
.npanel a{display:block;padding:10px 14px 10px 17px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font-size:15px;line-height:1.4}
.npanel a:last-child{border-bottom:0}.npanel a:hover{background:var(--paper)}
.npanel a.new{padding-left:14px;border-left:3px solid var(--acc);font-weight:600}
.npanel .t{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--soft)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}}
@media(max-width:640px){.npanel{position:fixed;left:16px;right:16px;top:76px;width:auto}}
dialog#rpd{width:min(480px,calc(100vw - 32px));padding:22px;background:var(--leaf);color:var(--ink);border:1px solid var(--rule);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
dialog#rpd::backdrop{background:rgba(0,0,0,.5)}
.lnk.rp{display:block;margin:6px 0 0;font-size:13px}
.tabs.atabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 4px;max-width:560px}.atabs .btn{padding:0 6px;font-size:15px}
@media(max-width:400px){.atabs .btn{font-size:14.5px;padding:0 2px}}
.ench{color:var(--q-uncommon);font-weight:600}
/* An enchant and what it does, boxed like a tooltip line so it stands apart from the seller's own gems and notes. */
.ebox{margin:2px 0 8px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--q-uncommon) 45%,transparent);border-left-width:3px;border-radius:6px;background:color-mix(in srgb,var(--q-uncommon) 7%,var(--leaf));max-width:44ch;font-weight:400}
.ebox .edesc{max-width:none}.ebox.sm{margin:4px 0 0;padding:5px 9px}.ebox.sm .ench{font-size:14px}.ebox.sm .edesc{font-size:12.5px}
.xtra{font-size:14px;color:var(--soft);margin-top:3px}.xtra b{font-weight:600;color:var(--ink);margin-right:4px}
.edesc{font-size:13.5px;font-weight:400;line-height:1.35;color:var(--soft);margin-top:2px;max-width:42ch}.ench::before{content:"✦ ";opacity:.8}
.lrn{display:inline-flex;gap:10px;align-items:center}.lrn .ic{width:36px;height:36px}
.past{margin-top:30px;border-top:2px solid var(--ink)}.past>summary{list-style:none;cursor:pointer;padding:16px 0 8px}.past>summary::-webkit-details-marker{display:none}
.prow .pr{display:flex;align-items:center;gap:12px}.prow .lnk{margin:0;font-size:14px}
.past>summary h2{display:inline}.past>summary::after{content:"Show";float:right;margin-top:6px;font-size:15px;color:var(--soft);text-decoration:underline}.past[open]>summary::after{content:"Hide"}
.ok{color:var(--q-uncommon)}.bad{color:var(--red)}
.ord .oh .nm{display:flex;gap:12px;align-items:center}
.legal{max-width:720px}.legal h2{font-size:26px;margin:28px 0 8px}.legal p,.legal li{max-width:none;line-height:1.55}.legal ul{padding-left:22px;margin:6px 0 10px}.legal li{margin:6px 0}
/* The Privacy and Terms pop-up: a small scrolling box over the page. */
dialog#legal{width:min(620px,calc(100vw - 24px));max-height:min(78vh,720px);padding:0;display:none;flex-direction:column;background:var(--leaf);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
dialog#legal[open]{display:flex;animation:pop .18s var(--ease)}
dialog#legal::backdrop{background:rgba(0,0,0,.5)}
#legal .lhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--rule)}
#legal .lhead b{font:700 24px/1 'Grenze Gotisch',Vollkorn,serif;color:var(--head)}#legal .lhead .btn{min-height:36px;padding:0 14px}
#legal .lbody{overflow:auto;padding:4px 20px 18px;font-size:15px;overscroll-behavior:contain}
#legal .legal h2{font-size:20px;margin:18px 0 6px}#legal .legal p,#legal .legal li{line-height:1.5}
/* Group finder */
.tabs.gtabs{flex-wrap:wrap}.gtabs .btn{flex:none}
/* Phones: one row you swipe along, fading at the edge so it's clear there's more. */
@media (max-width:700px){.tabs.gtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-right:-16px;padding-right:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.gtabs::-webkit-scrollbar{display:none}}
.svp>summary{list-style:none;display:inline-flex}.svp>summary::-webkit-details-marker{display:none}.svp{border-top:0;padding-top:4px}
.svg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.grp{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--leaf);border:1px solid var(--rule);border-radius:8px}
.grp h3{margin:0;font-size:21px}.grp p{margin:0;max-width:none}
.gh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gact{display:inline-block;padding:1px 9px;border-radius:12px;font-size:13px;font-weight:600;background:var(--paper);border:1px solid var(--rule)}
.gact-dungeon,.gact-raid{border-color:#7b2fbf;color:var(--q-epic)}.gact-farming{border-color:var(--q-uncommon);color:var(--q-uncommon)}.gact-rare{border-color:var(--gold);color:var(--gold)}.gact-pvp{border-color:var(--red);color:var(--red)}.gact-rp{border-color:var(--q-rare);color:var(--q-rare)}
.gnow{color:var(--q-uncommon);font-weight:600}
.groles{display:flex;flex-wrap:wrap;gap:6px}.grole{padding:2px 9px;border-radius:12px;background:color-mix(in srgb,var(--acc) 14%,transparent);font-size:14px;font-weight:600}
.gmeet{padding:6px 10px;border-left:3px solid var(--q-uncommon);background:color-mix(in srgb,var(--q-uncommon) 7%,transparent);font-size:15px}
.greq{padding:8px 10px;border:1px dashed var(--acc);border-radius:6px}.greq .stat{border:0;padding:4px 0}
.gf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.gf .lnk.rp{display:inline;margin:0 0 0 6px}.nw.ok{border-color:var(--q-uncommon);color:var(--q-uncommon)}
/* Crafters */
.gact-craft{border-color:var(--acc);color:var(--acc)}
.skl{display:flex;align-items:center;gap:8px}.skl b{font-size:20px}
.skb{flex:1;height:10px;border-radius:6px;background:var(--paper);border:1px solid var(--rule);overflow:hidden}
.skb i{display:block;height:100%;background:linear-gradient(90deg,var(--copper,#b87333),var(--gold));border-radius:6px;transform-origin:left;animation:skgrow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes skgrow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.skb i{animation:none}}
.rchips{display:flex;flex-wrap:wrap;gap:6px}
.rchip{padding:2px 9px;border-radius:12px;border:1px solid var(--rule);background:var(--paper);font-size:14px;text-decoration:none}
.rchip.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.rmore>summary{cursor:pointer;font-size:14px;color:var(--soft);margin-top:4px}.rmore .rchips{margin-top:6px}
.rpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:2px 12px;max-height:260px;overflow:auto;margin-top:8px;padding:8px;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
.rpick .rpk{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:15px;cursor:pointer}.rpick .rpk .sm{margin-left:auto}
.rpick .rpk.hi{opacity:.45}.rpick input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--acc)}
.rall{margin:8px 0 0;gap:8px}.rall .btn{min-height:36px;font-size:15px}
/* Admin: account viewer and inspect */
.acct{margin-top:18px;padding:16px;border:1px solid var(--acc);border-radius:8px;background:var(--leaf);animation:sideIn .35s var(--ease) backwards}
.acct h3{margin:22px 0 6px;font-size:20px}.acct .gh h3{margin:0}
.astats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:14px}
.astats>div{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}.astats b{font-size:22px}
.achar .stat>span:first-child{display:flex;gap:10px;align-items:center}.achar .sav{width:40px;height:40px}
.iwrap:empty{display:none}.iwrap{padding:4px 0 14px}
.insp{padding:12px;border:1px dashed var(--rule);border-radius:8px}.insp .chead{flex-wrap:nowrap;gap:12px}.insp .chead>div{min-width:0}.insp .ava{width:56px;height:56px;margin:0}
.igear{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:2px 14px}
.ig>summary{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;list-style:none}.ig>summary::-webkit-details-marker{display:none}
.ig>summary .soft{width:62px;flex:none}.ig .ic img{display:block;border-radius:4px}
.itip{margin:4px 0 8px 40px;font-size:14px}
/* Supporter badge */
.sup{display:inline-block;margin-left:6px;padding:0 8px;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:.3px;line-height:1.6;vertical-align:middle;white-space:nowrap;
  color:#2a1d05;background:linear-gradient(135deg,#f6dd8a,#e3b341 45%,#b8862b);box-shadow:0 0 0 1px rgba(255,214,120,.45),0 1px 6px rgba(227,179,65,.35)}
h1+.sup,h2 .sup{font-size:14px}.chead h1+.sup{margin:6px 0 0}
.btn.gold{color:#2a1d05;border-color:#b8862b;background:linear-gradient(135deg,#f6dd8a,#e3b341 45%,#b8862b)}.btn.gold:hover{filter:brightness(1.08)}
a.supn{color:var(--gold);text-decoration-color:color-mix(in srgb,var(--gold) 60%,transparent)}
/* OG: burgundy and gold. Founder: Forever Mart orange on black. */
.sup.og{color:#f6dd8a;background:linear-gradient(135deg,#8e2438,#5a1220);box-shadow:0 0 0 1px #d4a63a,0 1px 8px rgba(142,36,56,.5);letter-spacing:1.2px}
.sup.gm{color:#e9eef2;background:linear-gradient(135deg,#2bb383,#127a55 55%,#0b5a3e);box-shadow:0 0 0 1px #c9d3da,0 1px 8px rgba(18,122,85,.45);letter-spacing:.4px}
.sup.fdr{color:#ff7a2e;background:linear-gradient(135deg,#1d1a17,#0c0b0a);box-shadow:0 0 0 1px #ff5a0a,0 0 10px rgba(255,90,10,.45);letter-spacing:.6px}
a.supn.b2{color:#e2b85a;text-decoration-color:#8e2438}a.supn.b3{color:#ff7a2e;text-decoration-color:rgba(255,90,10,.6)}
.btn.gmb{color:#e9eef2;border-color:#c9d3da;background:linear-gradient(135deg,#2bb383,#127a55 55%,#0b5a3e)}.btn.gmb:hover{filter:brightness(1.1)}
.btn.ogb{color:#f6dd8a;border-color:#d4a63a;background:linear-gradient(135deg,#8e2438,#5a1220)}.btn.ogb:hover{filter:brightness(1.12)}
.supc.og{border-color:#d4a63a;background:color-mix(in srgb,#8e2438 14%,var(--leaf))}.supc .sup{margin-left:8px}
.chkl{display:flex;gap:10px;align-items:center;cursor:pointer}.chkl input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--acc)}
/* Thank-you list: names in the main text colour (gold text was unreadable on the light theme), gold kept for the border */
.sups{display:flex;flex-wrap:wrap;gap:8px}.supc{display:inline-flex;align-items:center;padding:4px 12px;border-radius:14px;border:1px solid var(--gold);color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--gold) 12%,var(--leaf))}
.dcb{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}
.dci{flex:none;display:inline-block;vertical-align:-2px}.fdc .dci{margin-right:5px}.dch{text-decoration:none}.dch:hover{color:var(--acc)}
/* Version badge and What's new */
.lrow{display:inline-flex;align-items:flex-start;gap:8px}
.ver{display:inline-block;margin-top:2px;padding:2px 7px;border-radius:10px;font:700 10.5px/1.3 Vollkorn,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent);white-space:nowrap}
.ver .vnum{letter-spacing:.04em;text-transform:none}
.ver.big{font-size:13px;padding:3px 10px;margin-bottom:12px}
.ver.vs{display:none}
/* Phones: the badge says just ALPHA; when signed in (bell showing) the Discord icon makes room (the footer still links it);
   and the logo can shrink, so the header never pushes the page wider than the screen. */
@media(max-width:760px){.ver.vs .vnum{display:none}
  header:has(#bellw:not([hidden])) .dch{display:none}
  .logo{min-width:0;overflow:hidden}.lname{min-width:0}.slogan{overflow:hidden;text-overflow:ellipsis}}
@media(max-width:760px){.lrow>.ver{display:none}.ver.vs{display:inline-block;margin:0 0 0 7px;padding:0 6px;font-size:9px;vertical-align:1px;font-style:normal}}
.notes h2{margin-top:24px}.notes code{font-size:.92em;padding:1px 5px;border-radius:4px;background:var(--leaf);border:1px solid var(--rule)}
/* Market */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 22px}
.tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--leaf);border:1px solid var(--rule);border-radius:8px;animation:sideIn .45s var(--ease) backwards}
.tile:nth-child(2){animation-delay:.06s}.tile:nth-child(3){animation-delay:.12s}.tile:nth-child(4){animation-delay:.18s}
.tile b .cash{font:inherit;font-size:inherit;gap:2px 10px}.tile b .cash span{font:inherit;color:var(--head)}.tile b .cash [class]::after{width:.42em;height:.42em;vertical-align:.18em}
.tile b{font:700 30px/1.1 'Grenze Gotisch',Vollkorn,serif;color:var(--head)}.tile span{color:var(--soft);font-size:14px}
.mrow{gap:12px}.mrow .nm{display:flex;gap:10px;align-items:center;min-width:0}.mrow .nm a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mup{color:var(--q-uncommon);font-weight:600}.mdn{color:var(--red);font-weight:600}
/* Merchant ranks */
.rkb{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:0 8px;border-radius:10px;font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap;vertical-align:middle;border:1px solid}
.rkb svg{width:15px;height:15px}.rkb.big{margin:0;padding:3px 12px;font-size:15px;gap:7px;border-radius:14px}.rkb.big svg{width:20px;height:20px}
.rk-new{color:#5fd3a0;border-color:#2f8a63;background:rgba(47,138,99,.12)}
.rk-apprentice{color:#d79a63;border-color:#8a5a2e;background:rgba(184,115,51,.12)}
.rk-established{color:var(--ink);border-color:#8b959d;background:rgba(201,206,212,.1)}
.rk-trusted{color:#f2c75c;border-color:#b8902b;background:rgba(227,179,65,.12)}
.rk-master{color:#7cc4ff;border-color:#3d84c2;background:rgba(90,169,230,.13);box-shadow:0 0 8px rgba(90,169,230,.25)}
.rk-legend{color:#d59bff;border-color:#a335ee;background:linear-gradient(135deg,rgba(163,53,238,.22),rgba(255,128,0,.12));box-shadow:0 0 10px rgba(163,53,238,.35)}
/* The Merchant's Guild page */
.gkick{margin:0 0 4px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.gcard .grank{margin:10px 0 2px}.glvl{display:flex;align-items:baseline;gap:12px;margin:8px 0}.glvl b{font:700 44px/1 'Grenze Gotisch',Vollkorn,serif;color:var(--acc)}
.gbar{height:8px;border-radius:5px;background:var(--paper);border:1px solid var(--rule);overflow:hidden;margin:6px 0 2px}
.gbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#b8862b,#f2c75c);transform-origin:left;animation:skgrow .9s cubic-bezier(.2,.8,.2,1) both}
.gpart{display:flex;justify-content:space-between;margin-top:8px}
.gpill{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;background:var(--paper);border:1px solid var(--rule);white-space:nowrap}
.alist{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.arow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--leaf)}
.arow.got{border-color:color-mix(in srgb,#f2c75c 55%,var(--rule));background:color-mix(in srgb,#f2c75c 7%,var(--leaf))}
.aic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--paper);border:1px solid var(--rule);color:var(--soft)}.aic.sm{width:34px;height:34px}
.arow.got .aic{color:#f2c75c;border-color:#b8902b}
.atx{display:flex;flex-direction:column;gap:2px;min-width:0}.axp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--soft)}
.aok{color:#f2c75c;font-size:20px;font-weight:700}
.crow{padding:12px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:2px}.crow .cnt{align-self:flex-end}.crow.got .gbar i{background:linear-gradient(90deg,#2f8a63,#5fd3a0)}
.axp2{font-weight:600;color:#f2c75c}
.lboard{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--leaf);animation:lbIn .5s var(--ease) backwards}
.lbn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);font-weight:700}
.lbx{margin-left:auto;font-weight:600}
.lb.top1{border-color:#f2c75c;box-shadow:0 0 0 1px rgba(242,199,92,.35),0 0 18px rgba(242,199,92,.18)}.lb.top1 .lbn{background:linear-gradient(135deg,#f6dd8a,#b8862b);color:#2a1d05}
.lb.top2 .lbn{background:linear-gradient(135deg,#eef2f5,#9aa4ab);color:#22272b}.lb.top3 .lbn{background:linear-gradient(135deg,#e7a46d,#8a5a2e);color:#2a1305}
@keyframes lbIn{from{opacity:0;transform:translateX(-14px)}}
.gfeed{list-style:none;margin:8px 0 0;padding:0}.gfeed li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);animation:lbIn .5s var(--ease) backwards}
.gfeed li.rank span:nth-child(2){font-weight:600;color:#f2c75c}
@media (prefers-reduced-motion:reduce){.lb,.gfeed li,.gbar i{animation:none}}
/* Badges page */
.brow{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule)}.brow>:first-child{flex:none}.bslot{min-width:110px}.bslot .sup{margin:0}
.bh{margin:18px 0 4px;font-size:18px}
/* Reviews */
.rvf{margin:6px 0 14px;padding:14px;border:1px dashed var(--acc);border-radius:8px;display:flex;flex-direction:column;gap:8px}
.rvs{display:flex;gap:4px}.rvs button{background:none;border:0;font-size:30px;line-height:1;color:var(--rule);cursor:pointer;padding:0 2px}.rvs button.on{color:#f2c75c}
.rvsum{display:flex;align-items:center;gap:8px}.rvr{padding:10px 0;border-bottom:1px solid var(--rule)}.rvr p{margin:6px 0}
.vtag{margin-left:6px;font-size:12px;font-weight:600;color:var(--q-uncommon)}
/* Professions Hub */
.picon{display:inline-block;vertical-align:-4px;margin-right:6px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.gtabs .btn .picon{margin-right:6px;vertical-align:-3px}
.synced{display:inline-block;margin-left:8px;padding:0 7px;border-radius:10px;font-size:12px;font-weight:600;line-height:1.6;color:var(--q-uncommon);border:1px solid color-mix(in srgb,var(--q-uncommon) 50%,transparent);background:color-mix(in srgb,var(--q-uncommon) 10%,transparent);white-space:nowrap;vertical-align:1px}
.syncbox{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;padding:14px;border:1px dashed var(--acc);border-radius:8px;background:color-mix(in srgb,var(--acc) 5%,transparent);margin-bottom:6px}
.syncbox>div{flex:1 1 260px}
.gh .gact{display:inline-flex;align-items:center}
/* Watchlist */
.watch{margin:14px 0 0;padding:12px 14px;background:var(--leaf);border:1px solid var(--rule);border-radius:8px}
.watch.on{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;border-color:var(--acc)}.watch.on .lnk{margin:0}
#wch{margin:-6px 0 18px}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.wrow .nm{display:flex;gap:10px;align-items:center}.wnow{font-size:15px}.whit{color:var(--q-uncommon);font-weight:600}
@media(max-width:600px){.wrow{grid-template-columns:1fr}}
.soft-rule{border:0;border-top:1px solid var(--rule);margin:12px 0 16px}
.lnk{margin-left:14px;padding:0;border:0;background:none;color:var(--soft);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--ink)}
.foot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.fmain{display:flex;flex-direction:column;gap:6px}.flinks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.flinks a,.fver{white-space:nowrap}.fver{color:var(--soft);opacity:.85}#fdcw[hidden]{display:none}
.thm button{margin-left:10px;padding:0;border:0;background:none;color:var(--soft);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.thm button:hover{color:var(--ink)}
.thm button[aria-pressed=true]{color:var(--acc);font-weight:600;text-decoration-color:currentColor}
.q-poor{color:var(--q-poor)}.q-uncommon{color:var(--q-uncommon)}.q-rare{color:var(--q-rare)}.q-epic{color:var(--q-epic)}.q-legendary,.q-artifact{color:var(--q-legendary)}
.view{display:none}
.view.on{display:block}
/* Motion: short and quiet. Pages fade in, a thin bar shows loading, pop-ups ease open. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.view.in{animation:vin .22s var(--ease) both}
@keyframes vin{from{opacity:0;transform:translateY(6px)}}
#bar{position:fixed;left:0;top:0;height:2px;width:0;background:var(--acc);z-index:40;opacity:0;pointer-events:none}
#bar.go{opacity:1;width:75%;transition:width 1.6s var(--ease),opacity .1s}
#bar.done{opacity:0;width:100%;transition:width .18s ease,opacity .3s ease .15s}
.dim{opacity:.45;transition:opacity .15s}
.sk{height:62px;margin:0;border-bottom:1px solid var(--rule);background:linear-gradient(90deg,transparent 30%,var(--leaf) 50%,transparent 70%) 0 0/300% 100%;animation:sk 1.2s linear infinite}
.sk.s{height:44px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}

.btn{transition:background-color .15s,border-color .15s,color .15s,transform .1s;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:1.5px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);font:600 16px Vollkorn,Georgia,serif;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--leaf)}
.btn:active{transform:translateY(1px) scale(.98)}
a,.idx b,nav a.l{transition:color .15s,border-color .2s,text-decoration-color .15s}
.row,.sel,.nr,.stat,.pk,.sug a{transition:background-color .15s}
.row:hover,.sel:hover{background:color-mix(in srgb,var(--leaf) 55%,transparent)}
input,select,textarea{transition:border-color .15s,background-color .15s}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.pri:hover{background:var(--acc-hi);border-color:var(--acc-hi)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}

.f{display:block;margin-bottom:14px}
.f>span{display:block;font-size:15px;color:var(--soft);margin-bottom:4px}
input,select,textarea{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--rule);border-bottom:1.5px solid var(--ink);border-radius:2px;background:var(--leaf);color:var(--ink);font:inherit}
textarea{padding:10px 12px;resize:vertical}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--acc)}
::placeholder{color:var(--soft);opacity:.8}
.srch{display:flex;gap:10px;max-width:620px;margin:18px 0 34px}
.srch input{flex:1;min-width:0}
/* Live suggestions under the home search */
.sw{position:relative;flex:1;min-width:0;display:flex}
.sug{animation:pop .14s var(--ease);position:absolute;left:0;right:0;top:100%;z-index:15;margin-top:4px;border:1px solid var(--rule);border-radius:3px;background:var(--leaf);box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden}
.sug a{display:flex;gap:10px;align-items:center;padding:6px 10px;text-decoration:none;border-bottom:1px solid var(--rule)}
.sug a:last-child{border-bottom:0}
.sug a.on,.sug a:hover{background:var(--paper)}
.sug .ic{width:32px;height:32px}
.sug b{font-weight:600}
.sug small{display:block;color:var(--soft);font-size:13px}
.sug .all{justify-content:center;color:var(--soft);font-size:15px}
.fltd>summary{display:inline-flex;align-items:center;gap:4px;margin:4px 0 10px;list-style:none;cursor:pointer}
.fltd>summary::-webkit-details-marker{display:none}
@media(min-width:761px){.fltd>summary{display:none}}
.flt{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 14px;margin:6px 0 10px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px}
.err{color:var(--red);font-weight:600;min-height:24px;margin:4px 0 8px}

.sec{border-top:2px solid var(--ink);padding:16px 0 28px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 48px;align-items:start}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 56px;align-items:start}
.narrow{max-width:760px}

/* Money: three aligned columns, gold / silver / copper */
.cash{position:relative;display:inline-grid;grid-template-columns:4.4em 2.5em 2.5em;text-align:right;font-weight:600;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.cash.il{display:inline-flex;gap:.45em}
.cash.il :empty{display:none}
.cash [class]::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.22em;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 1px var(--coin-edge)}
.cash .s::after{background:var(--silver)}
.cash .c::after{background:var(--copper)}
.big{font-size:22px}

.idx{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:19px}
.idx i{flex:1;border-bottom:1px dotted var(--soft);transform:translateY(-4px)}
.idx small{font-size:15px;color:var(--soft)}
.idx:hover b{text-decoration:underline;text-decoration-thickness:2px}
.idx.none b{font-weight:400;color:var(--soft)}
.idx b{font-weight:600}
.tree{columns:2;column-gap:56px;max-width:920px}
.tree.flat{columns:1;max-width:760px}
.grp{break-inside:avoid;margin-bottom:30px}
.idx.gh{font-size:22px;border-bottom:2px solid var(--ink)}
.idx.gh b{color:var(--ink);font-weight:600}
.idx.sb{padding-left:18px;font-size:17px}
@media (max-width:760px){.tree{columns:1}}
.pick2{display:flex;gap:6px}.pick2 .btn{flex:1;padding:0 8px}
.tip{display:inline-block;min-width:260px;max-width:340px;padding:10px 12px;border:1px solid #5d6a85;border-radius:5px;background:rgba(8,12,28,.96);color:#fff;font:15px/1.4 Vollkorn,Georgia,serif;box-shadow:0 6px 24px rgba(0,0,0,.35);
  --q-poor:#9d9d9d;--q-uncommon:#1eff00;--q-rare:#2f8cff;--q-epic:#b45bff;--q-legendary:#ff8000}
.tip .tn{font-weight:600;font-size:17px;margin-bottom:2px}
.tl2{display:flex;justify-content:space-between;gap:16px}
.tg{color:#1eff00}.ty{color:#ffd100}.tr{color:#ff2020}.tdim{color:#9d9d9d;font-size:13px;margin-top:4px}
.tip .cash{font-weight:400}
#hov{position:fixed;z-index:30;pointer-events:none;display:none}
#hov .tip{animation:pop .12s var(--ease)}
.scard{display:flex;gap:8px;align-items:center}
.sav{width:30px;height:30px;border-radius:4px;border:1.5px solid var(--cc,var(--rule));object-fit:cover;flex:none}
.match{margin:6px 0 2px;padding:8px 12px;border-left:3px solid var(--acc);background:var(--leaf);font-size:15px}
.match .stat{border:0;padding:4px 0}
.guide{margin:4px 0 12px;padding:8px 12px;background:var(--leaf);border-left:3px solid var(--rule);font-size:15px}
.up{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--rule)}
.up .ic{width:44px;height:44px}
.up .gain{color:#1a8f12;font-weight:600}
:root[data-theme=dark] .up .gain{color:#5be04a}
.pk{display:block;width:100%;text-align:left;padding:9px 12px;border:1px solid var(--rule);border-top:0;background:var(--leaf);color:inherit;font:inherit;cursor:pointer}
.pk:hover{background:var(--paper)}
.nr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule)}

.row{display:grid;grid-template-columns:minmax(0,2.2fr) 90px 56px minmax(0,1.6fr) 9.4em 150px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.row.hd,.sel.hd{padding:6px 0;color:var(--soft);border-bottom:2px solid var(--ink)}
.hd>div:not(.cash),.hd .cash [class]{font-size:15px}
.row .btn,.sel .btn{width:100%}
.nm{display:flex;gap:12px;align-items:center;font-weight:600;font-size:18px}
.ic{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:3px;background:var(--leaf);overflow:hidden;color:var(--soft)}
.ic.lg{width:64px;height:64px}
.sel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.3fr) 9.4em 150px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--rule)}
.stat>span:last-child{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ihead{display:flex;gap:16px;align-items:center;margin-bottom:26px}
.ihead h1{margin:0}
.steps{margin:0 0 16px;padding-left:22px}
.steps li{padding:4px 0 4px 6px}
.steps li::marker{font-weight:600}
.note{padding:10px 14px;margin:0 0 14px;background:var(--leaf);border-left:3px solid var(--red);max-width:none}

.stars{display:inline-block;font-size:17px;letter-spacing:2px;line-height:1;background:linear-gradient(90deg,var(--star) var(--p),var(--rule) var(--p));-webkit-background-clip:text;background-clip:text;color:transparent;vertical-align:-1px}
.stars::before{content:"★★★★★"}
.rd summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:30px;font-size:15px;font-weight:400}
.rd summary::-webkit-details-marker{display:none}
.rd[open]>div{animation:pop .16s var(--ease);margin:4px 0 6px;padding:8px 12px;background:var(--leaf);border-left:3px solid var(--ink);font-size:15px;font-weight:400}
.nw{display:inline-block;padding:0 8px;border:1px solid var(--soft);border-radius:3px;font-size:13px;line-height:20px}

.ord{border-top:2px solid var(--ink);padding:16px 0 22px}
.oh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.oh a{font-weight:600;font-size:21px}
.tl{display:flex;gap:8px;list-style:none;margin:16px 0;padding:0}
.tl li{position:relative;flex:1;padding-top:6px;border-top:5px solid var(--rule);color:var(--soft);font-size:15px}
.tl .done{color:var(--ink);font-weight:600}
.tl .done::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;background:var(--acc);transform-origin:left}
.ord.fresh .tl .done::before{animation:fill .45s var(--ease) both}
.ord.fresh .tl li:nth-child(2)::before{animation-delay:.2s}.ord.fresh .tl li:nth-child(3)::before{animation-delay:.4s}
@keyframes fill{from{transform:scaleX(0)}}
.ord.fresh{animation:glow 1.8s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 0%,transparent);background:transparent}20%{background:color-mix(in srgb,var(--acc) 10%,transparent)}100%{background:transparent}}
.chart{width:100%;height:auto;color:var(--ink);border-bottom:1px solid var(--rule);margin-bottom:10px}
.draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:dr 1.1s ease .15s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.hl{display:flex;gap:8px 28px;flex-wrap:wrap}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;padding:10px 20px;border-radius:3px;background:var(--acc);color:var(--acc-ink);font-weight:600;transition:opacity .25s,transform .25s;z-index:20;pointer-events:none;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split>div+div{margin-top:30px}
  .row,.sel{grid-template-columns:1fr 1fr;gap:6px 16px}
  .row.hd,.sel.hd{display:none}
  .row>:first-child,.sel>:first-child,.row>.btn,.sel>.btn,.row>:nth-child(4){grid-column:1/-1}
  .row>.btn,.sel>.btn{margin-top:6px}
  .row [data-l]::before{content:attr(data-l) ": ";color:var(--soft)}
  .row>.cash,.sel>.cash{display:inline-flex;gap:.45em;font-size:20px}
  .row>.cash :empty,.sel>.cash :empty{display:none}
}
@media (max-width:640px){
  .page{padding:0 16px}
  .page::before{display:none}
  header{padding-top:14px}
  .logo{font-size:32px}
  nav{gap:16px}
  main{padding-top:24px}
  .srch{flex-wrap:wrap}
  .srch .btn{width:100%}
}
html.theme-fade,html.theme-fade *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}
/* ---- Motion: small animations so the site feels alive. All of it stops for people who ask their device for reduced motion. ---- */
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
/* Lists arrive one row after another. */
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up{animation:rowIn .38s var(--ease) backwards}
:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(2){animation-delay:35ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(3){animation-delay:70ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(4){animation-delay:105ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(5){animation-delay:140ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(6){animation-delay:175ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(7){animation-delay:210ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(8){animation-delay:245ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(9){animation-delay:280ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(10){animation-delay:315ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(11){animation-delay:350ms}:is(#rows>.row,#sl>.sel,.view.in .nr,.view.in .idx,.view.in .up):nth-child(12){animation-delay:385ms}
/* Page headings rise in; the line under them follows. */
@keyframes h1In{from{opacity:0;transform:translateY(14px);letter-spacing:.03em}}
.view.in>h1,.view.in>.narrow>h1,.view.in .ihead h1,.view.in .chead h1{animation:h1In .5s var(--ease) backwards}
.view.in .lead{animation:rowIn .5s .1s var(--ease) backwards}
.view.in .note{animation:noteIn .4s .1s var(--ease) backwards}
@keyframes noteIn{from{opacity:0;transform:translateX(-10px)}}
/* The side panel slides in from the left. */
@keyframes sideIn{from{opacity:0;transform:translateX(-16px)}}
#side .card{animation:sideIn .45s var(--ease) backwards}#side .card+.card{animation-delay:.12s}
/* Category lines draw themselves, and a category leans forward when you point at it. */
@keyframes leader{from{transform:translateY(-4px) scaleX(0)}}
.view.in .idx i{transform-origin:left;animation:leader .7s .15s var(--ease) backwards}
.idx b{display:inline-block;transition:transform .18s var(--ease),color .15s}
.idx:hover b{transform:translateX(5px)}
/* Coins hop when you point at a listing: gold, then silver, then copper. */
@keyframes coinHop{40%{transform:translateY(-5px) rotateY(180deg)}100%{transform:none}}
:is(.row,.sel,.nr,.ord,.stat):hover .cash [class]::after{animation:coinHop .5s var(--ease)}
:is(.row,.sel,.nr,.ord,.stat):hover .cash .s::after{animation-delay:.07s}
:is(.row,.sel,.nr,.ord,.stat):hover .cash .c::after{animation-delay:.14s}
/* Item icons tilt towards you; the big one on an item page drops in. */
.ic,.gs{transition:transform .18s var(--ease),filter .18s}
:is(.row,.sel,.nr,.up):hover .ic{transform:scale(1.1) rotate(-4deg)}
@keyframes iconIn{from{opacity:0;transform:scale(.55) rotate(-14deg)}}
.view.in .ihead .ic,.view.in .chead .ava{animation:iconIn .55s var(--ease) backwards}
/* Character page: gear slots pop in one by one, glow when pointed at, and the figure breathes. */
@keyframes slotIn{from{opacity:0;transform:scale(.5)}}
.view.in .gs{animation:slotIn .4s var(--ease) backwards}
:is(.view.in .gs):nth-child(2){animation-delay:45ms}:is(.view.in .gs):nth-child(3){animation-delay:90ms}:is(.view.in .gs):nth-child(4){animation-delay:135ms}:is(.view.in .gs):nth-child(5){animation-delay:180ms}:is(.view.in .gs):nth-child(6){animation-delay:225ms}:is(.view.in .gs):nth-child(7){animation-delay:270ms}:is(.view.in .gs):nth-child(8){animation-delay:315ms}
.gs:not(.empty):hover{transform:scale(1.15);filter:brightness(1.2)}
@keyframes float{0%,100%{transform:translate(-50%,-47%)}50%{transform:translate(-50%,-48.8%)}}
.gfig img{animation:float 6s ease-in-out infinite}
/* Main buttons catch the light when pointed at; every button ripples where you press it. */
.btn{position:relative;overflow:hidden}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.btn.pri:hover::after{animation:shine .7s ease}
@keyframes shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* Star ratings fill up. */
@keyframes starFill{from{--p:0%}}
.stars{animation:starFill 1s .15s var(--ease) backwards}
/* An order's next step shimmers while it waits on someone. */
@keyframes wait{from{background-position:100% 0}to{background-position:0 0}}
.tl .done+li:not(.done){border-top-color:transparent;background:linear-gradient(90deg,var(--rule) 35%,var(--acc) 50%,var(--rule) 65%) 0 0/300% 5px no-repeat border-box;animation:wait 1.8s linear infinite}
/* The bell swings when something new arrives, and counts pop. */
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(17deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(4deg)}}
.bell svg{transform-origin:50% 12%}.bell.ring svg{animation:ring .9s ease}
@keyframes badgePop{from{transform:scale(0)}60%{transform:scale(1.25)}}
.badge{animation:badgePop .4s var(--ease) backwards}
/* The search box glows when you're in it; tabs and filters ease open. */
.srch input{transition:border-color .15s,background-color .15s,box-shadow .2s}
.srch input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
[data-tab]:not([hidden]){animation:vin .22s var(--ease)}
.fltd[open]>.flt{animation:pop .18s var(--ease)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}#bar{display:none}}
.gpages{margin:4px 0 16px}.gcount{font-size:12px;opacity:.75;margin-left:4px}
/* Admin: number tiles, then tabs (To do, Players, Badges, Tools) */
.atiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 18px}
.atile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.atile b{font-size:28px;line-height:1.1;color:var(--head)}.atile span{font-weight:600}.atile small{font-size:13px}
.atile.hot{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}.atile.hot b{color:var(--red)}.atile.ok b{color:var(--green,#3a9a5b)}
.atabs2{margin:0 0 4px}.atabs2 .btn .badge{margin-left:8px}
.admin .apane{display:none}
.admin[data-on="todo"] .apane[data-p="todo"],.admin[data-on="players"] .apane[data-p="players"],.admin[data-on="badges"] .apane[data-p="badges"],.admin[data-on="tools"] .apane[data-p="tools"],.admin[data-on="removed"] .apane[data-p="removed"]{display:block}
@media (max-width:560px){.atiles{grid-template-columns:1fr 1fr}.atile b{font-size:24px}.atabs2{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
/* Online: green dot by a name while they're on the site */
.odot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3fbf6a;box-shadow:0 0 0 2px var(--leaf),0 0 6px #3fbf6a;margin-right:7px;vertical-align:.12em;animation:opulse 2.4s ease-in-out infinite}
h1 .odot{width:12px;height:12px;vertical-align:.2em;margin-right:10px}
.onl{color:#3fbf6a;font-weight:600}
@keyframes opulse{50%{box-shadow:0 0 0 2px var(--leaf),0 0 0 #3fbf6a}}
@media (prefers-reduced-motion:reduce){.odot{animation:none}}
/* Professions Hub sub-pages */
.hubnav{margin:-4px 0 14px}.hubnav .btn{text-decoration:none}
@media (max-width:560px){.hubnav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hubnav .btn{padding:0 8px;font-size:14.5px}.hubnav .btn:first-child{grid-column:1/-1}}
/* Materials calculator */
.mcalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start;margin-top:8px}
@media (max-width:760px){.mcalc{grid-template-columns:1fr}}
.mlist{max-height:620px;overflow:auto;border:1px solid var(--rule);border-radius:10px;padding:4px;overscroll-behavior:contain}
.mrow{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}
.mrow:hover{background:var(--paper)}.mrow.on{background:var(--paper);box-shadow:inset 3px 0 0 var(--red)}
.mrow>span:last-child{display:flex;flex-direction:column;min-width:0}.mrow b{font-weight:600}
.mres{position:sticky;top:12px}.mcard{border:1px solid var(--rule);border-radius:12px;padding:16px;background:var(--paper)}
.mn{max-width:160px;margin:10px 0}
.mmat{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule)}
.mmn{display:flex;flex-direction:column;min-width:0}.mq{white-space:nowrap}.mc{min-width:80px;text-align:right;white-space:nowrap}
.mtot{display:flex;justify-content:space-between;align-items:center;padding:12px 0 2px;font-weight:600}.mtot b{font-size:20px}.mtot.sub{font-weight:400;padding-top:4px}.mtot.sub b{font-size:16px}
/* Commission board */
.cform>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer}.cform>summary::-webkit-details-marker{display:none}
.cform[open]>summary{margin-bottom:12px}.cfb{max-width:640px}
.comms{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
@media (max-width:560px){.comms{grid-template-columns:1fr}}
.comm{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:var(--paper)}
.comm.mine{border-color:var(--red)}.comm.taking{border-color:#3fbf6a}
.ctl{display:flex;gap:8px;align-items:center}.ctl .picon{flex:none}
.cmeta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:14px}.cmeta span+span::before{content:'·';margin-right:12px;opacity:.6}
/* Guilds */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gcardl{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);text-decoration:none;color:inherit}
.gcardl:hover{border-color:var(--red)}.gcardl b{font-size:18px;color:var(--head)}
a.guild{text-decoration:none}a.guild:hover{text-decoration:underline}
.gsale{display:flex;flex-direction:column}
.gsi{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.gsi>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
/* Availability tag */
.avl{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;vertical-align:.1em;border:1px solid}
.avl.open{color:#3fbf6a;border-color:#3fbf6a}.avl.busy{color:#d9a440;border-color:#d9a440}
/* Guild adverts */
.ghero{padding:6px 0 4px}.gmake{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:8px 0 6px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.gmake .btn{margin-left:auto}
.gfilters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 12px}.gfilters select{min-height:40px}
.gadlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:22px}
@media (max-width:560px){.gadlist{grid-template-columns:1fr}}
.gad{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);text-decoration:none;color:inherit;transition:transform .15s var(--ease),border-color .15s}
.gad:hover{transform:translateY(-2px);border-color:var(--red)}
.gadn{font:700 24px/1.1 'Grenze Gotisch',Vollkorn,serif;color:var(--head)}.gadt{font-size:15.5px;line-height:1.4}
.gad.spot,.gahead.spot{border-color:#e8b64c;box-shadow:0 0 0 1px #e8b64c,0 6px 24px rgba(232,182,76,.18);background:linear-gradient(160deg,rgba(232,182,76,.12),transparent 55%),var(--paper)}
.spotl{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;color:#1b1406;background:#e8b64c;border-radius:10px;padding:1px 9px}
.gachips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:12.5px;padding:2px 9px;border:1px solid var(--rule);border-radius:12px;background:var(--leaf)}
.gahead{position:relative;padding:20px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);margin-bottom:8px;display:flex;flex-direction:column;gap:6px}
.gahead h1{margin:0}.gahead .lead{margin:2px 0 6px}
.gabout{white-space:pre-line;line-height:1.55}
.gformb{max-width:720px}.flab{display:block;font-weight:600;margin:12px 0 6px}.gchk{display:flex;flex-wrap:wrap;gap:6px 16px}
.gstaff{border:1px solid var(--rule);border-radius:12px;padding:16px;background:var(--paper)}
.hguilds{margin:6px 0 22px}.hguilds .gh{margin-bottom:10px}
/* Guild ticker: a scrolling strip under the menu */
.ticker{display:flex;align-items:stretch;margin:0 0 14px;border-bottom:1px solid var(--rule);background:var(--paper);overflow:hidden;font-size:14px;min-height:36px}
.tklab{flex:none;display:flex;align-items:center;padding:0 12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;background:var(--acc);color:var(--acc-ink);text-decoration:none}
.tkwin{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tktrack{display:flex;width:max-content;animation:tkroll 60s linear infinite}
.ticker:hover .tktrack,.ticker:focus-within .tktrack{animation-play-state:paused}
.tkset{display:flex;align-items:center;white-space:nowrap}
.tki{display:inline-flex;align-items:center;gap:6px;padding:8px 4px;text-decoration:none;color:var(--ink)}.tki:hover b{text-decoration:underline}
.tki b{color:var(--head)}.tki.spot b{color:var(--gold)}.tkstar{color:var(--gold)}.tkm{opacity:.6;font-size:12.5px}
.tksep{padding:0 16px;opacity:.35;font-size:10px}
@keyframes tkroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tktrack{animation:none}.tkwin{overflow-x:auto;-webkit-mask:none;mask:none}.tkset[aria-hidden]{display:none}}
/* Admin: badges and ranks box in the account viewer */
.abadges{margin:16px 0 6px;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--leaf)}
.abadges select{min-height:36px;max-width:100%;width:240px}
.achips{display:flex;flex-wrap:wrap;gap:6px}
.achip{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);color:var(--soft);cursor:pointer}
.achip.on{color:var(--ink);border-color:#3fbf6a;background:rgba(63,191,106,.12)}.achip small{opacity:.7}
/* Crafter cards: header wraps instead of clipping, starred recipes, and the full recipe list in a pop-up */
.chd{flex-wrap:wrap;justify-content:flex-start;gap:6px 8px}
.rstar{color:var(--gold);margin-right:5px;font-size:13px}.rstar.off{display:inline-block;width:14px}
.rchip.st{border-color:var(--gold)}
.rsee{display:inline-block;margin-top:8px;font-size:14.5px}
.rcbody #rcq{width:100%;margin:0 0 10px}
.rrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule)}
.rrow a{text-decoration:none}.rrow a:hover{text-decoration:underline}
.rst{flex:none;width:34px;height:34px;border:1px solid var(--rule);border-radius:8px;background:none;color:var(--soft);opacity:.55;font-size:17px;cursor:pointer}
.rst.on{color:var(--gold);border-color:var(--gold);opacity:1}
/* Colour dot on gear listings */
.cdot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--rule);margin-right:6px;vertical-align:-1px}
/* Home: the market block and categories in two columns */
.hmarket{margin:6px 0 10px}.hmarket .gh{margin-bottom:8px}.mktabs{margin:0 0 10px}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media (max-width:640px){.catgrid{grid-template-columns:1fr}}
/* Home: the market block and categories in two columns */
.hmarket{margin:6px 0 10px}.hmarket .gh{margin-bottom:8px}.mktabs{margin:0 0 10px}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media (max-width:640px){.catgrid{grid-template-columns:1fr}}
/* Deals: one card per deal, with the back-and-forth as a short timeline */
.dtabs .btn .badge{margin-left:6px}
.deal{border:1px solid var(--rule);border-radius:12px;padding:14px 16px;background:var(--paper);margin-bottom:12px}
.deal.my{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}.deal.focus{animation:dealfocus 1.6s var(--ease)}
@keyframes dealfocus{0%{box-shadow:0 0 0 4px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.dlt{display:flex;gap:10px;align-items:center;min-width:0}
.dst{flex:none;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:12px;border:1px solid var(--rule)}
.st-pending{color:var(--gold);border-color:var(--gold)}.st-agreed{color:#2e86de;border-color:#2e86de}.st-completed{color:#3fbf6a;border-color:#3fbf6a}.st-closed{color:var(--soft)}
.dprice{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:10px 0 6px}
.nw.hot{color:var(--acc);border-color:var(--acc)}
.dsteps{list-style:none;margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid var(--rule)}.dsteps li{padding:4px 0 6px;font-size:14.5px}
.dmsg{margin-top:2px;font-style:italic}
.dact{margin-top:10px}.dcf{margin-top:10px;padding:12px;border:1px solid var(--rule);border-radius:10px;background:var(--leaf)}
.dtabs .btn .soft{margin-left:6px}
/* Ticker colours: guild names in orange (gold for Spotlight), recruiting in green, factions in their own colours */
.tki b{color:var(--acc)}.tki.spot b{color:var(--gold)}
.tkr{color:#3fbf6a;font-weight:600}
.tkm{opacity:.85}.fac-alliance{color:#4a90e2;font-weight:600}.fac-horde{color:#e0463a;font-weight:600}
/* Notifications: Unread, Read and Urgent tabs in the bell, and the red banner for an unread announcement */
.ntabs{display:flex;gap:4px;padding:8px 8px 0;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--leaf);z-index:1}
.ntabs button{font:inherit;font-size:14px;font-weight:600;padding:6px 10px 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--soft);cursor:pointer}
.ntabs button.on{color:var(--ink);border-bottom-color:var(--acc)}.ntabs button.u{color:#e0463a}.ntabs button.u.on{border-bottom-color:#e0463a}
.ntabs .badge{margin-left:4px;min-width:18px;line-height:18px;font-size:11.5px}
.badge.urg{background:#e0463a;color:#fff}
#np a.urgent{border-left:3px solid #e0463a}.ntag{color:#e0463a;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.nall{display:block;margin:6px 14px 10px;font-size:14px}
.urgent-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,#e0463a 16%,var(--paper));border:1px solid #e0463a;color:var(--ink);font-size:15px}
.urgent-bar .urgt{flex:1;min-width:200px}.urgent-bar .urgt b{color:#e0463a;margin-right:6px;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em}
.urgent-bar .urgl{font-weight:600}
.urgx{font:inherit;font-size:13.5px;padding:4px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--leaf);color:var(--ink);cursor:pointer}
/* Home: categories as a compact grid straight under the search bar */
.hcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:4px 0 22px}
.hcat{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s var(--ease)}
.hcat:hover{border-color:var(--acc);transform:translateY(-1px)}.hcat b{font-weight:600}.hcat small{font-size:12.5px;color:var(--soft)}
.hcat.none{opacity:.6}.hcat.none:hover{opacity:1}
@media (max-width:560px){.hcats{grid-template-columns:1fr 1fr}}
.rrow .rreq{margin-left:auto;font-size:13.5px;flex:none}
/* Dungeons: boss kills on character pages, and cleared counts on group members and requests */
.dngs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.dng{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.dng .dk{color:var(--gold)}
.clr{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;font-size:12px;font-weight:600;border:1px solid}
.clr.yes{color:#3fbf6a;border-color:#3fbf6a}.clr.new{color:var(--gold);border-color:var(--gold)}.clr.none{color:var(--soft);border-color:var(--rule)}
/* Background with some atmosphere: a warm glow from the top, a second softer one bottom right, edges that fall
   away into shadow, and a faint grain like stone or old parchment. All fixed, so it stays put while you scroll,
   and all behind the content: cards and text keep their solid colours. */
:root{--bg-glow:rgba(210,162,42,.18);--bg-glow2:rgba(184,58,48,.08);--bg-vig:rgba(22,50,42,.16);--grain:.035}
:root[data-theme=dark]{--bg-glow:rgba(254,77,3,.13);--bg-glow2:rgba(245,194,76,.06);--bg-vig:rgba(0,0,0,.62);--grain:.04}
body{background:
  radial-gradient(1300px 620px at 50% -12%,var(--bg-glow),transparent 72%),
  radial-gradient(1000px 760px at 105% 110%,var(--bg-glow2),transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 35%,transparent 58%,var(--bg-vig) 100%),
  var(--paper);background-attachment:fixed}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme=dark] body::before{mix-blend-mode:screen;filter:invert(1)}
/* Priest white is unreadable on the light theme: a soft grey there instead */
:root:not([data-theme=dark]) .cl-priest{--cc:#6f747a;color:#6f747a}
/* Admin badge browser */
.bbcard{display:flex;gap:14px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--leaf)}
.bblook{flex:none;min-width:56px;display:flex;justify-content:center}.bblook .aic svg{width:34px;height:34px}
/* Thank-you list: each supporter's character portrait, ringed in their class colour; their initial if Blizzard has no picture */
a.supc{gap:9px;padding:5px 14px 5px 5px;text-decoration:none;border-radius:24px}
a.supc:hover{border-color:var(--acc)}
.supav{position:relative;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--paper);box-shadow:0 0 0 2px var(--cc,var(--gold))}
.supav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.supav b{font-size:15px;color:var(--soft)}
.supc.og .supav{box-shadow:0 0 0 2px var(--cc,#d4a63a),0 0 0 4px rgba(212,166,58,.45)}
/* Admin lists with a portrait in front of the name */
.withav{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.withav .supav{width:30px;height:30px;margin-right:2px}
/* Badge Collection on character pages: earned badges in colour, the rest faded so there's something to collect */
.bspecial{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.bcoll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.btile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 10px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);opacity:.42;filter:grayscale(1)}
.btile.got{opacity:1;filter:none;border-color:color-mix(in srgb,var(--gold) 55%,var(--rule));background:color-mix(in srgb,var(--gold) 7%,var(--paper))}
.btile .bico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--leaf);color:var(--gold)}.btile .bico svg{width:24px;height:24px}
.btile .bnm{font-size:14.5px;line-height:1.2}.btile .sm{font-size:12px;line-height:1.3}
.btile.alpha{border-color:#3fbf6a;background:linear-gradient(160deg,rgba(63,191,106,.16),transparent 60%),var(--paper);box-shadow:0 0 0 1px #3fbf6a}
.btile.alpha .bico{background:#1f3b2a;color:#7fe0a0}.alpha-a{font:700 26px/1 Georgia,serif}
/* the small Alpha Tester badge next to a name */
.albdg{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:10px;font-size:12.5px;font-weight:700;color:#7fe0a0;background:#1f3b2a;border:1px solid #3fbf6a;vertical-align:.2em}
:root:not([data-theme=dark]) .albdg{color:#1a6b3a;background:#dff3e6}
/* Equipped badge by a name (gold chip with the badge's icon), and the Equip buttons in your collection */
.eqb{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 9px 1px 6px;border-radius:10px;font-size:12.5px;font-weight:700;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 60%,var(--rule));background:color-mix(in srgb,var(--gold) 10%,transparent);vertical-align:.15em}
.eqb svg{width:14px;height:14px}
.btile.eq{box-shadow:0 0 0 2px var(--acc)}
.eqbtn{min-height:30px;padding:0 12px;font-size:13px;margin-top:4px}.eqon{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--acc)}
/* Firm price tag, and the Streamer badge (Twitch-style purple with a little live dot) */
.firm{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--soft);border:1px solid var(--rule)}
.strm{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:1px 9px;border-radius:10px;font-size:12.5px;font-weight:700;color:#fff;background:#9146ff;border:1px solid #b08cff;text-decoration:none;vertical-align:.15em}
.strm i{width:7px;height:7px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 6px #ff4d6d}
a.strm:hover{background:#a970ff}
/* Streamer badge in platform colours */
.strm svg{flex:none}
.strm.tw{background:#9146ff;border-color:#b08cff;color:#fff}a.strm.tw:hover{background:#a970ff}
.strm.yt{background:#ff0033;border-color:#ff6680;color:#fff}a.strm.yt:hover{background:#ff2a55}
.strm.kk{background:#53fc18;border-color:#8dff63;color:#0b0e0b}a.strm.kk:hover{background:#6dff3a}
.strm.tt{background:#000;color:#fff;border-color:#25f4ee;box-shadow:2px 0 0 #fe2c55}a.strm.tt:hover{background:#161616}
/* Professions Hub: Alliance and Horde tabs */
.ftabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 14px}
.ftabs button{min-width:0;font:inherit;font-weight:700;font-size:16px;padding:10px 8px;border-radius:10px;border:1px solid var(--rule);background:var(--paper);color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.ftabs button span{font-size:12.5px;font-weight:600;opacity:.8;padding:0 7px;border-radius:9px;background:var(--leaf)}
.ftabs .fa.on{color:#fff;background:#1d4f91;border-color:#4a90e2}.ftabs .fh.on{color:#fff;background:#8c1c13;border-color:#e0463a}.ftabs .fb.on{color:var(--ink);border-color:var(--acc)}
.ftabs .fa:not(.on):hover{border-color:#4a90e2}.ftabs .fh:not(.on):hover{border-color:#e0463a}
/* Welcome guide */
dialog#wel{width:min(560px,calc(100vw - 24px));max-height:min(86vh,760px);padding:0;display:none;flex-direction:column;background:var(--leaf);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
dialog#wel[open]{display:flex;animation:pop .18s var(--ease)}
dialog#wel::backdrop{background:rgba(0,0,0,.55)}
#wel .whead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px 8px}
#wel .whead b{font:700 28px/1.05 'Grenze Gotisch',Vollkorn,serif;color:var(--head)}
#wel .whead .lnk{color:var(--soft);font-size:14px}
#wel .wbody{overflow:auto;padding:4px 20px 12px;font-size:15px;line-height:1.5;overscroll-behavior:contain}
#wel .wbody p{margin:0 0 12px}
#wel .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#wel .wgrid div{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--rule);border-radius:10px}
#wel .wgrid b{color:var(--acc)}
#wel .wsteps{margin:0 0 12px;padding-left:22px}#wel .wsteps li{margin:0 0 10px}#wel .wsteps li::marker{color:var(--acc);font-weight:700}
#wel .wstep{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}#wel .wstep:last-child{border:0}
#wel .wtick{flex:none;width:24px;height:24px;border:1.5px solid var(--soft);border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700}
#wel .wstep.done .wtick{background:var(--q-uncommon);border-color:var(--q-uncommon);color:#fff}
#wel .wstep.done>div>b{color:var(--soft)}
#wel .wcode{margin-top:8px}#wel .wcode summary{cursor:pointer;color:var(--soft);font-size:14px}
#wel .wrow{display:flex;gap:8px;align-items:center}#wel .wrow input{max-width:160px}
#wel .wfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px 16px;border-top:1px solid var(--rule)}
#wel .wdots{display:flex;gap:6px}#wel .wdots i{width:8px;height:8px;border-radius:50%;background:var(--rule)}#wel .wdots i.on{background:var(--acc);width:20px;border-radius:4px}
@media (max-width:520px){#wel .wgrid{grid-template-columns:1fr}#wel .whead b{font-size:24px}}
.foot .fhow{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot .fhow img{width:20px;height:20px;flex:none}
/* Donor: sapphire and gold with a slow shine, the top tipping badge */
.sup.dnr{position:relative;overflow:hidden;color:#fbe7a6;background:linear-gradient(135deg,#2f6fd6,#163f8f 55%,#0d2a66);box-shadow:0 0 0 1px #e3b341,0 1px 10px rgba(47,111,214,.5);letter-spacing:.8px}
.sup.dnr::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:dnrshine 4.5s ease-in-out infinite}
@keyframes dnrshine{60%,100%{transform:translateX(120%)}}
.btn.dnrb{color:#fbe7a6;border-color:#e3b341;background:linear-gradient(135deg,#2f6fd6,#163f8f 55%,#0d2a66)}.btn.dnrb:hover{filter:brightness(1.12)}
a.supn.b4{color:#7fa8ff;text-decoration-color:#e3b341}:root:not([data-theme=dark]) a.supn.b4{color:#1d4fae}
.supc.dnr{border-color:#2f6fd6;background:color-mix(in srgb,#2f6fd6 12%,var(--leaf))}.supc.dnr .supav{box-shadow:0 0 0 2px var(--cc,#2f6fd6),0 0 0 4px rgba(227,179,65,.5)}
@media (prefers-reduced-motion:reduce){.sup.dnr::after{animation:none;display:none}}
/* OG bar: just above the footer line, burgundy and gold label */
.ogbar{margin:36px 0 18px;border:1px solid var(--rule);border-radius:10px}
.ogbar .tklab{background:linear-gradient(135deg,#8e2438,#5a1220);color:#f6dd8a;letter-spacing:.12em;box-shadow:inset -1px 0 0 #d4a63a}
.ogbar .tktrack{animation-duration:40s}
/* Home: thank-you card on the right on wide screens, under the categories on narrower ones */
.hthx{margin:0 0 24px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--leaf)}
.hthx h2{margin:0 0 2px;font-size:20px}.hthx>p{margin:0 0 10px}
.hthxl{display:flex;flex-direction:column;gap:6px}
.hthxi{display:flex;align-items:center;gap:9px;padding:4px 6px 4px 4px;border-radius:24px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.hthxi:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}.hthxi .sup{margin-left:auto}
.hthxi .supav{width:30px;height:30px}.hthxi.dnr .supav{box-shadow:0 0 0 2px var(--cc,#2f6fd6),0 0 0 4px rgba(227,179,65,.5)}
@media (min-width:1180px){.hgrid{display:grid;grid-template-columns:minmax(0,1fr) 240px;column-gap:28px;align-items:start}
  .hgrid>*{grid-column:1}.hgrid>.hthx{grid-column:2;grid-row:1/span 6;position:sticky;top:16px}}
.ogbar .tki b:not(.cl){color:#e2b85a}
/* Admin badge browser: panels with a segmented picker, clean rows, and an action bar */
.bbp{margin:14px 0 0;border:1px solid var(--rule);border-radius:14px;background:var(--leaf);overflow:hidden}
.bbph{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px 10px}
.bbph h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}.bbph p{margin:2px 0 0}
.bbn{font:600 12px/1 Vollkorn,serif;padding:4px 8px;border-radius:999px;background:var(--paper);color:var(--soft)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--paper);border:1px solid var(--rule)}
.seg button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--soft);font:600 14px Vollkorn,serif;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.bbbody{padding:0 16px 12px}
.bbsrch{display:flex;align-items:center;gap:12px;margin:0 0 8px}.bbsrch input{flex:1;min-height:40px;border-radius:10px;padding:0 12px 0 36px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 12px center no-repeat;border:1px solid var(--rule)}
.bbsrch .lnk{white-space:nowrap;font-size:14px}
.bbpaste{width:100%;border-radius:10px;background:var(--paper);border:1px solid var(--rule);padding:10px 12px;font:inherit}
.bblist{max-height:340px;overflow:auto;overscroll-behavior:contain;border-radius:10px}
.bbitem{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;cursor:default}
.bbitem.pick{cursor:pointer}.bbitem.pick:hover{background:var(--paper)}.bbitem.has{opacity:.55;cursor:default}
.bbitem .supav{width:30px;height:30px}.bbitem .supav b{font-size:13px}
.bbtx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.bbtx b,.bbtx a{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbtx span{font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbhas{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--rule);color:var(--soft)}
.bbck{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;min-height:0;margin:0;padding:0;border:1.5px solid var(--soft);border-radius:6px;background:transparent;display:grid;place-items:center;cursor:pointer}
.bbck:checked{background:var(--acc);border-color:var(--acc)}.bbck:checked::after{content:"";width:5px;height:10px;border:solid var(--acc-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.bbck:disabled{cursor:default}.bbck-sp{flex:none;width:20px}
.bbbar{display:flex;flex-direction:column;gap:10px;padding:12px 16px;border-top:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 60%,var(--leaf))}
.bbgo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.bbgo .btn{margin:0}
.bbchips{display:flex;flex-wrap:wrap;gap:6px}.bbchip{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--leaf);border:1px solid var(--rule);font-size:13px}
.bbchip button{border:0;background:none;color:var(--soft);font-size:16px;line-height:1;cursor:pointer;padding:0 5px;min-height:0}.bbchip button:hover{color:var(--red)}
.bbacts{display:flex;gap:14px;font-size:14px}.bbdanger{color:var(--red)}
.bbhold{display:flex;flex-direction:column}.bbhold .bbitem{border-bottom:1px solid var(--rule);border-radius:0;padding:10px 0}.bbhold .bbitem:last-child{border:0}
.bbib{display:flex;gap:4px}.ib{display:grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid transparent;border-radius:10px;background:none;color:var(--soft);font-size:20px;cursor:pointer}
.ib svg{width:18px;height:18px}.ib:hover{background:var(--paper);border-color:var(--rule);color:var(--ink)}.ib.bad:hover{color:var(--red)}
.bbempty{padding:0 16px 14px;margin:0}
.bbp .bbph{border:0;margin:0;background:none;position:static}
.bbsrch{flex-wrap:wrap}.bbsrch input{flex:1 1 200px;width:100%;min-width:0;max-width:none}
/* Guild storefront: header card, stat strip, then grids of items and members and crafters grouped by profession */
.gsh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;border:1px solid var(--rule);border-radius:16px;background:var(--leaf);margin:4px 0 12px}
.gscrest{flex:none;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font:700 34px/1 'Grenze Gotisch',Vollkorn,serif;color:#f6dd8a;background:linear-gradient(135deg,#5a4a2a,#2e2616);box-shadow:inset 0 0 0 1.5px #d4a63a}
.gscrest.f-alliance{background:linear-gradient(135deg,#2a5aa8,#13305f)}.gscrest.f-horde{background:linear-gradient(135deg,#a8322a,#5f1813)}
.gsht{flex:1;min-width:200px}.gsht .gkick{margin:0}.gsht h1{margin:2px 0 6px;font-size:clamp(28px,6vw,40px);line-height:1.05}
.gsmeta{display:flex;flex-wrap:wrap;gap:6px}.gsmeta>span{font-size:13px;padding:2px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);color:var(--soft)}
.gsmeta .onl{color:var(--q-uncommon);border-color:color-mix(in srgb,var(--q-uncommon) 50%,var(--rule))}
.gsad{margin:0}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px}
.gstats div{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border:1px solid var(--rule);border-radius:12px;background:var(--leaf)}
.gstats b{font-size:22px;line-height:1.1;color:var(--head)}.gstats span{font-size:13px;color:var(--soft)}
.gsec{margin:22px 0 0}.gsec>h2{margin:0 0 10px}
.gsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.gsi2,.gsm{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--leaf);color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.gsi2:hover,.gsm:hover{border-color:var(--acc);transform:translateY(-1px)}
.gsi2 .ic{flex:none}.gsit,.gsmt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.gsit b,.gsmt>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.gsit span{font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsip{flex:none;font-weight:600;white-space:nowrap}
.gsav{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:0 0 0 2px var(--cc,var(--rule))}
.gsav img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}.gsav>b{font-size:17px;color:var(--soft)}
.gson{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#3fbf5f;box-shadow:0 0 0 2px var(--leaf)}
.gsml{font-size:13px;color:var(--soft)}
.gsbd{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.gsbd .sup,.gsbd .rkb,.gsbd .avl{margin:0;font-size:11px}
.gsprof{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:12px;background:var(--leaf);overflow:hidden}
.gsp{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--rule)}.gsp:last-child{border:0}
.gspn{flex:none;width:150px;display:flex;align-items:center;gap:8px}.gspn b{font-weight:600}
.gspc{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.gspc a{font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);text-decoration:none;white-space:nowrap}
.gspc a b{color:var(--gold);font-weight:700;margin-left:2px}.gspc a:hover{border-color:var(--acc)}
@media (max-width:560px){.gsh{padding:14px}.gscrest{width:52px;height:52px;font-size:28px}.gsad{width:100%;text-align:center}.gsp{flex-direction:column;gap:6px}.gspn{width:auto}}
@media (prefers-reduced-motion:reduce){.gsi2:hover,.gsm:hover{transform:none}}
/* Renown achievement tabs: a 2 by 2 grid on phones, so Challenges is always in view */
@media (max-width:700px){.guild .tabs.gtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;margin-right:0;padding-right:0;-webkit-mask-image:none;mask-image:none}.guild .gtabs .btn{width:100%}}
/* Giveaways */
.admin[data-on="giveaways"] .apane[data-p="giveaways"]{display:block}
.gwlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.gw{padding:16px;border:1px solid var(--rule);border-radius:14px;background:var(--leaf)}
.gw.live{border-color:#d4a63a;background:linear-gradient(160deg,color-mix(in srgb,#e8b64c 12%,var(--leaf)),var(--leaf) 60%);box-shadow:0 0 0 1px rgba(212,166,58,.25),0 6px 22px rgba(232,182,76,.12)}
.gwh{display:flex;gap:12px;align-items:center}.gwh b{font-size:18px;color:var(--head)}
.gwic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#2a1d05;background:linear-gradient(135deg,#f6dd8a,#e3b341 45%,#b8862b)}
.gwic svg{width:22px;height:22px}
.gwprize{font-weight:600;color:var(--gold)}
.gwmeta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}.gwmeta span{font-size:13px;padding:2px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);color:var(--soft)}
.gwmeta b{color:var(--ink)}
.gwwin{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:600}.gwwin svg{width:20px;height:20px;color:var(--gold);flex:none}
.gwin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}.gwin .btn{margin:0}
.gwyou{margin:10px 0 0;font-weight:600;color:var(--q-uncommon)}
.gwbar{display:flex;align-items:center;gap:12px;margin:4px 0 18px;padding:12px 14px;border:1px solid #d4a63a;border-radius:14px;text-decoration:none;color:var(--ink);
  background:linear-gradient(110deg,color-mix(in srgb,#e8b64c 16%,var(--leaf)),var(--leaf) 70%)}
.gwbar:hover{border-color:var(--acc)}.gwbt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.gwbt span{font-size:14px;color:var(--soft)}
.gwbar .btn{margin:0;flex:none}
.gwadm{padding:12px 0;border-bottom:1px solid var(--rule)}.gwadm:last-child{border:0}
@media (max-width:520px){.gwbar{flex-wrap:wrap}.gwbar .btn{width:100%;text-align:center}}