:root{
  --bg:#f7f6f3; --panel:#ffffff; --panel-2:#f1efeb; --line:#dedad2;
  --ink:#1c1e24; --ink-2:#4d5058; --muted:#636872;
  --brass:#8c6513; --brass-ink:#7d5a10; --brass-soft:#f4e9cf;
  --edge:#858a95; --on-brass:#ffffff;
  --good:#2f7d4f;
  --shadow:0 1px 2px rgba(20,22,28,.06),0 8px 24px rgba(20,22,28,.07);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10131a; --panel:#181c26; --panel-2:#1f2431; --line:#2b313f;
    --ink:#e8e6e1; --ink-2:#b9bdc7; --muted:#868c9a;
    --brass:#d9a441; --brass-ink:#f0bc57; --brass-soft:#2f2818; --edge:#6b7384; --on-brass:#14161d;
    --good:#5fbc84;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#10131a; --panel:#181c26; --panel-2:#1f2431; --line:#2b313f;
  --ink:#e8e6e1; --ink-2:#b9bdc7; --muted:#868c9a;
  --brass:#d9a441; --brass-ink:#f0bc57; --brass-soft:#2f2818; --edge:#6b7384; --on-brass:#14161d;
  --good:#5fbc84;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; text-wrap:balance; margin:0}
a{color:var(--brass-ink)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:5px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.stickyhead{position:sticky; top:0; z-index:40; background:var(--bg)}
/* With the Filters panel open the pinned header can outgrow a phone screen and
   put the Clear all / Done row past its bottom edge, so while the panel is
   open (toggleAdv() sets the class) the header scrolls within the viewport. */
.stickyhead.panel-open{max-height:100vh; max-height:100dvh; overflow-y:auto; overflow-x:hidden}
.top{background:var(--panel); border-bottom:1px solid var(--line)}
/* The "Coming soon" note under the header row: a line of its own, so it does
   not push the nav sideways, and visible whichever control asked for it. */
.top .note{display:block; max-width:1180px; margin:-.3rem auto 0; padding:0 1rem .5rem; text-align:right}
.top-in{max-width:1180px; margin:0 auto; padding:.65rem 1rem; display:flex; align-items:center; gap:.6rem}
.brand{display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:var(--ink); cursor:pointer; background:none; border:none; padding:0}
.brand b{font-family:Fraunces,Georgia,serif; font-weight:700; font-size:1.32rem; letter-spacing:-.015em}
.brand b i{font-style:normal; color:var(--brass)}
.brand small{font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); display:none}
.spacer{flex:1}
.nav{display:none; gap:.15rem}
.nav a{background:none; border:none; cursor:pointer; color:var(--ink-2); font-size:.9rem; font-weight:500; padding:.55rem .7rem; border-radius:8px; text-decoration:none}
.nav a:hover{background:var(--panel-2); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brass-ink)}
.iconbtn{min-width:44px; min-height:44px; display:grid; place-items:center; background:none; border:1px solid var(--edge); border-radius:9px; cursor:pointer; color:var(--ink-2)}
.iconbtn:hover{background:var(--panel-2); color:var(--ink)}
.signin{min-height:44px; padding:0 1rem; border-radius:9px; cursor:pointer; background:var(--brass); color:var(--on-brass); border:none; font-weight:600; font-size:.88rem; display:none; align-items:center}
.menubtn{display:grid}
.getapp{min-height:44px; padding:0 1rem; border-radius:9px; background:var(--brass); color:var(--on-brass); text-decoration:none; font-weight:600; font-size:.88rem; display:none; align-items:center; white-space:nowrap}
.getapp:hover{filter:brightness(1.06)}
@media (min-width:760px){ .menubtn{display:none} .nav{display:flex} .signin{display:inline-flex} .getapp{display:inline-flex} .brand small{display:block} }

.scrim{position:fixed; inset:0; background:rgba(8,10,14,.5); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(78vw,300px); z-index:60; background:var(--panel); border-left:1px solid var(--line); padding:.75rem; display:flex; flex-direction:column; gap:.15rem; transform:translateX(101%); transition:transform .22s ease}
.drawer.open{transform:translateX(0)}
.drawer a,.drawer button{text-align:left; background:none; border:none; cursor:pointer; color:var(--ink); padding:.9rem .65rem; border-radius:9px; font-weight:500; font-size:1rem; text-decoration:none}
.drawer a:hover,.drawer button:hover{background:var(--panel-2)}
.drawer .hr{height:1px; background:var(--line); margin:.5rem .25rem}

.searchwrap{background:var(--bg); padding:.7rem 1rem .35rem}
.searchwrap-in{max-width:1180px; margin:0 auto}
.searchbar{position:relative; display:flex; align-items:center}
.searchbar .mag{position:absolute; left:.9rem; color:var(--muted); pointer-events:none; display:grid}
#q{width:100%; min-height:52px; padding:0 2.9rem; background:var(--panel); border:1px solid var(--edge); border-radius:12px; color:var(--ink); font-size:1rem; box-shadow:var(--shadow); font-family:inherit}
#q::placeholder{color:var(--muted)}
#q:focus{border-color:var(--brass); outline:none}
/* The site has its own clear control; Chrome's built-in one would sit next to it. */
#q::-webkit-search-cancel-button{-webkit-appearance:none; display:none}
#q::-webkit-search-decoration{-webkit-appearance:none}
.clearbtn{position:absolute; right:.42rem; width:40px; height:40px; border:none; background:none; color:var(--muted); cursor:pointer; border-radius:8px; display:none; place-items:center}
.clearbtn.show{display:grid}
.clearbtn:hover{background:var(--panel-2); color:var(--ink)}
/* Filters is pinned OUTSIDE the scrolling strip: it opens advanced search, so
   it must never be the control that scrolled off the edge. */
.chipbar{display:flex; align-items:center; gap:.4rem; padding:.55rem 0 .15rem}
.chips{display:flex; gap:.4rem; overflow-x:auto; flex:1 1 auto; min-width:0; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* Fades the right edge only while there is actually more to scroll to, so the
   hint is never a lie. Toggled in syncChips(). */
.chips.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
@media (min-width:760px){
  /* room to wrap, so nothing hides and nothing needs scrolling */
  .chips{flex-wrap:wrap; overflow:visible}
  .chips.more{-webkit-mask-image:none; mask-image:none}
}
.chip{flex:0 0 auto; min-height:38px; padding:0 .8rem; border-radius:999px; cursor:pointer; background:var(--panel); border:1px solid var(--edge); color:var(--ink-2); font-size:.84rem; font-weight:500; display:inline-flex; align-items:center; white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--brass-soft); border-color:var(--brass); color:var(--brass-ink)}
.count{color:var(--muted); font-size:.8rem; padding:.3rem 0 .15rem; font-variant-numeric:tabular-nums}

main{max-width:1180px; margin:0 auto; padding:0 1rem 4rem}
.layout{display:block}
.results{display:flex; flex-direction:column; gap:.45rem}
/* The row is an anchor (items are pages), so link styling has to be reset
   explicitly -- otherwise the global a{} rule underlines and recolours the
   name, the meta line, the tag and the stat all at once. */
.row{display:grid; grid-template-columns:40px 1fr auto; gap:.7rem; align-items:center;
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius);
  padding:.5rem .7rem; cursor:pointer; text-align:left; width:100%;
  text-decoration:none; color:inherit; transition:border-color .12s}
.row:hover{border-color:var(--brass)}
.row[aria-current="true"]{border-color:var(--brass); background:var(--brass-soft)}
.row img{width:40px; height:40px; image-rendering:pixelated; border-radius:6px; background:var(--panel-2); display:block}
.rtext{min-width:0}
/* block, not inline -- these are two stacked lines, and inline spans ignored
   the margin and the ellipsis entirely */
.rname{display:block; font-weight:600; font-size:.92rem; line-height:1.3; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rmeta{display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.75rem;
  margin-top:.1rem; min-width:0}
.rmeta .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* The form an illusion turns you into, promoted into the row so a list of
   masks can be scanned without opening each one. Sits at the start of the
   second line, where the tags line up down the list. */
.illtag{flex:0 0 auto; background:var(--brass-soft); color:var(--brass-ink); border:1px solid var(--brass);
  border-radius:5px; padding:.05rem .34rem; font-size:.68rem; font-weight:700; line-height:1.35;
  letter-spacing:.01em; text-decoration:none}
.rstat{text-align:right; font-size:.68rem; color:var(--muted); white-space:nowrap;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.2}
.rstat b{display:block; font-family:"Chivo Mono",ui-monospace,monospace; font-size:.9rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; font-weight:600}
.empty{text-align:center; padding:3rem 1rem; color:var(--muted)}
.empty h3{font-size:1.1rem; margin-bottom:.35rem; color:var(--ink)}
.more{width:100%; min-height:48px; margin-top:.7rem; border-radius:10px; cursor:pointer; background:var(--panel); border:1px solid var(--edge); color:var(--ink-2); font-weight:500; font-family:inherit}
.more:hover{border-color:var(--brass); color:var(--ink)}

.detail{display:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden}
.detail.open{display:flex; flex-direction:column}
.backbar{display:flex; align-items:center; gap:.3rem; padding:.35rem 0 .6rem}
.backbar button{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 .7rem 0 .5rem;
  border-radius:9px; background:none; border:1px solid var(--edge); color:var(--ink-2); cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:600}
.backbar button:hover{border-color:var(--brass); color:var(--brass-ink)}
.dhead{display:grid; grid-template-columns:52px minmax(0,1fr) 44px; gap:.7rem; align-items:start;
  padding:.7rem .9rem; border-bottom:1px solid var(--line); flex:0 0 auto;
  position:sticky; top:0; z-index:2; background:var(--panel); border-radius:var(--radius) var(--radius) 0 0}
.dhead img{width:48px; height:48px; image-rendering:pixelated; border-radius:8px; background:var(--panel-2); display:block}
.dhead h2{font-size:1.14rem; line-height:1.25; word-break:break-word}
.dsub{color:var(--muted); font-size:.8rem; margin-top:.18rem}
.flags{display:flex; gap:.28rem; flex-wrap:wrap; margin-top:.4rem}
.flag{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:.2rem .42rem; border-radius:5px; background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line)}
.flag.mg{color:var(--brass-ink); border-color:var(--brass); background:var(--brass-soft)}
.closex{min-width:44px; min-height:44px; display:grid; place-items:center; border:none; background:none;
  cursor:pointer; color:var(--muted); border-radius:8px; padding:0}
.closex:hover{background:var(--panel-2); color:var(--ink)}
.dbody{overflow-y:auto; padding:.8rem .9rem 1.2rem; display:flex; flex-direction:column; gap:.7rem}

/* Fixed section order, sections omitted when empty -- the whole point is that
   a 8-stat classic item and a 33-stat modern one read the same way. */
.sec h4{font-family:Archivo,sans-serif; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .3rem; font-weight:700; display:flex; align-items:center; gap:.5rem}
.sec h4::after{content:""; flex:1; height:1px; background:var(--line)}

/* Label and value sit ADJACENT, the way the item window and every reference
   site print them ("Base Dmg: 1229"). An earlier pass used space-between
   inside a 1fr column, which flung them to opposite edges of the panel and
   made the number hard to associate with its label.

   dt/dd are direct grid children rather than wrapped pairs, so the labels in
   each column line up with one another while each value still hugs its own
   label. Two pairs per row; one on a narrow phone. */
.pairs{display:grid; grid-template-columns:max-content 1fr; gap:.16rem .5rem; align-items:baseline; margin:0}
.pairs dt{font-size:.75rem; color:var(--ink-2); white-space:nowrap}
.pairs dd{margin:0; font-family:"Chivo Mono",ui-monospace,monospace; font-size:.83rem;
  font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.pairs dd .h{color:var(--brass-ink)}
@media (min-width:400px){ .pairs{grid-template-columns:max-content 1fr max-content 1fr; gap:.16rem .5rem} }
@media (min-width:1000px){ .pairs{grid-template-columns:max-content 1fr max-content 1fr} }

/* identity block: slot/class/race are prose-shaped, not numbers */
.idrow{display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; font-size:.82rem}
.idrow dt{color:var(--muted); white-space:nowrap}
.idrow dd{margin:0; color:var(--ink); word-break:break-word}
.advnote{color:var(--muted); font-size:.72rem; margin:.45rem 0 0; line-height:1.4}
.tog i{font-style:normal; opacity:.55; font-size:.72rem; margin-left:.15rem}
/* Where a value came from. Community-confirmed is not the same as derived
   from a log, and the difference should be visible rather than implied. */
.src{display:inline-block; margin-left:.4rem; font-family:Archivo,sans-serif; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:4px; padding:.02rem .28rem; vertical-align:.05em}
.tagbtn{background:none; border:1px dashed var(--edge); border-radius:6px; color:var(--ink-2);
  font-family:Archivo,sans-serif; font-size:.74rem; padding:.15rem .45rem; min-height:32px; cursor:pointer}
.tagbtn:hover{border-color:var(--brass); color:var(--brass-ink)}
.races{font-family:"Chivo Mono",ui-monospace,monospace; font-size:.76rem; line-height:1.45; color:var(--ink-2)}

.fx{background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:8px; padding:.45rem .6rem; margin-bottom:.3rem; display:flex; align-items:baseline; gap:.6rem}
.fx .k{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-ink); font-weight:700; flex:0 0 auto}
.fx .v{font-size:.87rem}
.augs{display:flex; flex-direction:column; gap:.25rem}
.aug{display:flex; align-items:baseline; gap:.6rem; font-size:.8rem; color:var(--ink-2);
  border-bottom:1px dotted var(--line); padding:.22rem 0}
.aug b{font-family:"Chivo Mono",ui-monospace,monospace; color:var(--muted); font-size:.75rem}
.links{display:flex; flex-direction:column; gap:.35rem}
.links a{display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:46px;
  padding:0 .8rem; border-radius:9px; text-decoration:none; background:var(--panel-2);
  border:1px solid var(--edge); color:var(--ink); font-size:.89rem; font-weight:500}
.links a:hover{border-color:var(--brass)}
.links .arr{color:var(--muted)}
.note{color:var(--muted); font-size:.76rem; margin:.4rem 0 0}

.page{display:none; max-width:700px; margin:0 auto; padding:1.4rem 0 3rem}
.page.show{display:block}
.page h1{font-size:1.85rem; margin-bottom:.45rem}
.lede{color:var(--ink-2); font-size:1rem; margin:0 0 1.4rem}
.page p{color:var(--ink-2); font-size:.94rem}
.qa{border-top:1px solid var(--line); padding:.95rem 0}
.qa h3{font-family:Archivo,sans-serif; font-size:.98rem; font-weight:600; margin-bottom:.3rem; color:var(--ink)}
.qa p{margin:0}
.dl{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.95rem; margin:1.2rem 0}
.dl .t{flex:1; min-width:180px}
.dl b{display:block; font-size:.96rem}
.dl small{color:var(--muted); font-size:.82rem}
.dl a{min-height:44px; display:inline-flex; align-items:center; padding:0 1.1rem; border-radius:9px; background:var(--brass); color:var(--on-brass); text-decoration:none; font-weight:600; font-size:.88rem}
footer{border-top:1px solid var(--line); margin-top:1.5rem; padding:1.4rem 1rem 3rem; color:var(--muted); font-size:.79rem}
.footin{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:.5rem}

@media (min-width:1000px){
  .layout{display:grid; grid-template-columns:1fr 372px; gap:1.15rem; align-items:start}
  /* --stick is measured at runtime: the sticky search header changes height
     as filter chips wrap and active-filter chips appear, so a hardcoded
     offset put the panel UNDERNEATH it and clipped the item name off the
     top. See syncSticky(). */
  .detail{position:sticky; top:calc(var(--stick, 140px) + 10px);
    max-height:calc(100vh - var(--stick, 140px) - 26px)}
  .backbar{display:none}
  /* both panes visible at once, so the list never gets hidden */
  .listpane{display:block !important}
}

/* ---- advanced search ---------------------------------------------------
   The reference sites all use the same shape: one long form of thirty
   controls, most irrelevant to any given search, then Submit. It works on a
   desktop and is unusable on a phone.
   Here filters are BUILT UP instead: pick a field, get one row. Active
   filters are chips you can drop individually, and results update as you go,
   so you always see what a condition cost you. */
.advbtn{flex:0 0 auto; min-height:38px; padding:0 .85rem; border-radius:999px; cursor:pointer;
  background:var(--panel); border:1px dashed var(--edge); color:var(--ink-2); font-size:.84rem;
  font-weight:600; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}
.advbtn:hover{border-color:var(--brass); color:var(--brass-ink)}
.advbtn.on{background:var(--brass-soft); border-style:solid; border-color:var(--brass); color:var(--brass-ink)}
.advpanel{display:none; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.85rem; margin-top:.55rem; box-shadow:var(--shadow)}
.advpanel.open{display:block}
.advsec{margin-bottom:.9rem}
.advsec:last-child{margin-bottom:0}
.advsec h5{font-family:Archivo,sans-serif; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .45rem; font-weight:700}
.togs{display:flex; flex-wrap:wrap; gap:.3rem}
.tog{min-height:36px; padding:0 .6rem; border-radius:7px; cursor:pointer; background:var(--panel-2);
  border:1px solid var(--edge); color:var(--ink-2); font-size:.78rem; font-weight:600;
  font-family:"Chivo Mono",ui-monospace,monospace}
.tog[aria-pressed="true"]{background:var(--brass-soft); border-color:var(--brass); color:var(--brass-ink)}
.cond{display:grid; grid-template-columns:1fr auto auto; gap:.35rem; margin-bottom:.35rem}
.cond select,.cond input{min-height:42px; padding:0 .5rem; border-radius:8px; background:var(--panel-2);
  border:1px solid var(--edge); color:var(--ink); font-family:inherit; font-size:.85rem}
.cond input{width:88px; font-family:"Chivo Mono",ui-monospace,monospace}
.cond button{min-width:42px; min-height:42px; border-radius:8px; background:none; border:1px solid var(--edge);
  color:var(--muted); cursor:pointer}
.cond button:hover{border-color:var(--brass); color:var(--brass-ink)}
.addcond{min-height:42px; width:100%; border-radius:8px; background:none; border:1px dashed var(--edge);
  color:var(--ink-2); cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:600}
.addcond:hover{border-color:var(--brass); color:var(--brass-ink)}
.advfoot{display:flex; gap:.5rem; margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--line)}
.advfoot button{min-height:44px; flex:1; border-radius:9px; cursor:pointer; font-family:inherit;
  font-weight:600; font-size:.88rem}
.advfoot .reset{background:none; border:1px solid var(--edge); color:var(--ink-2)}
.advfoot .apply{background:var(--brass); border:none; color:var(--on-brass)}
.active{display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem 0 0}
.afchip{min-height:32px; padding:0 .3rem 0 .6rem; border-radius:999px; background:var(--brass-soft);
  border:1px solid var(--brass); color:var(--brass-ink); font-size:.76rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.25rem}
.afchip button{min-width:30px; min-height:30px; border:none; background:none; color:inherit; cursor:pointer;
  border-radius:50%; font-size:1rem; line-height:1; padding:0}
.afchip button:hover{background:rgba(0,0,0,.12)}
@media (min-width:760px){ .cond{grid-template-columns:220px auto 110px auto} }

/* ---- home: the hero and the sections beneath it ---------------------------- */
.page.home{max-width:none; padding:0 0 2rem}
.hero{position:relative; overflow:hidden; margin:0 -1rem; padding:3.2rem 1rem 5.2rem; color:#e8e6e1; background:#10131a;
  background-image:radial-gradient(60% 80% at 20% 0%, rgba(217,164,65,.22), transparent 60%), radial-gradient(50% 70% at 90% 10%, rgba(120,140,220,.18), transparent 60%)}
.hero-in{position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center}
.hero .eyebrow{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#d9a441; margin:0 0 .8rem}
.hero h1{font-size:clamp(2.1rem, 5.5vw, 3.4rem); line-height:1.05; margin:0 0 .8rem; color:#f3f1ec}
.hero h1 em{font-style:normal; color:#f0c66b}
.hero .lede{color:#c8c5bd; font-size:1.05rem; max-width:560px; margin:0 auto 1.4rem}
.herosearch{display:flex; align-items:center; gap:.5rem; background:#f7f6f3; border-radius:14px; padding:.35rem .35rem .35rem .9rem; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.herosearch .mag{color:#57595d; display:flex}
.herosearch input{flex:1; min-width:0; border:none; background:none; font:inherit; font-size:1.05rem; color:#1c1e24; padding:.7rem .2rem; outline:none}
.herosearch input::placeholder{color:#7a7d83}
.herobtn{min-height:44px; padding:0 1.1rem; border:none; border-radius:10px; background:#d9a441; color:#14161d; font-weight:600; font-size:.92rem; cursor:pointer}
.examples{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:.9rem; align-items:center}
.examples span{color:rgba(255,255,255,.65); font-size:.82rem}
.examples button{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#e8e6e1; border-radius:999px; padding:.35rem .75rem; font:inherit; font-size:.82rem; cursor:pointer}
.examples button:hover{background:rgba(255,255,255,.16)}
.hero .mist{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; fill:var(--bg)}
.homebody{max-width:1180px; margin:0 auto}
.homeresults{max-width:1180px; margin:0 auto; padding-top:1rem}
.band{padding:2.6rem 0 1rem; text-align:center}
.band h2{font-size:1.7rem; margin-bottom:.5rem}
.band .lede{max-width:640px; margin:0 auto 1.6rem}
.cards{display:grid; gap:1rem; grid-template-columns:1fr; text-align:left}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3, 1fr)} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem}
.card.feature{background:linear-gradient(160deg, #2a1f4d, #1a1633); color:#e8e6e1; border-color:#3b2f66}
.card.feature p{color:#c9c4d8}
.card.feature h3{color:#fff}
.card.feature .link{color:#f0c66b}
.card h3{font-size:1.15rem; margin:.2rem 0 0}
.card p{margin:0; color:var(--ink-2); font-size:.94rem; flex:1}
.card .glyph{font-size:1.8rem; line-height:1}
.card .link{font-weight:600; text-decoration:none; font-size:.92rem}
.badges{display:flex; gap:.4rem; flex-wrap:wrap}
.badge{font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:.25rem .55rem; border-radius:6px; background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line)}
.badge.gold{background:var(--brass); color:var(--on-brass); border-color:transparent}
.card.feature .badge{background:rgba(255,255,255,.1); color:#e8e6e1; border-color:rgba(255,255,255,.2)}
.card.feature .badge.gold{background:#d9a441; color:#14161d}
.discord{margin:2.4rem 0 0; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.6rem}
.discord-in{display:grid; gap:1.2rem; align-items:center}
@media (min-width:860px){ .discord-in{grid-template-columns:1.3fr 1fr} }
.discord .eyebrow{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-ink); margin:0 0 .4rem}
.discord h2{font-size:1.5rem; margin-bottom:.4rem}
.discord p{color:var(--ink-2); margin:0}
.discord-actions{display:flex; flex-direction:column; gap:.7rem; align-items:flex-start}
.channels{display:flex; flex-wrap:wrap; gap:.4rem}
.channels span{font-family:"Chivo Mono",ui-monospace,monospace; font-size:.78rem; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:.25rem .5rem; color:var(--ink-2)}
.cta{display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border-radius:10px; background:var(--brass); color:var(--on-brass); text-decoration:none; font-weight:600; font-size:.92rem}
.cta.big{min-height:52px; padding:0 1.5rem; font-size:1.02rem}
.cta:hover{filter:brightness(1.06)}

/* ---- download ------------------------------------------------------------- */
#page-download{max-width:900px}
#page-download .eyebrow, .legal .eyebrow{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-ink); margin:0 0 .5rem}
.dlbox{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin:0 0 1.6rem}
.dlmeta{color:var(--muted); font-size:.84rem}
.steps{display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:1.4rem}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2, 1fr)} }
.step{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem 1rem 1rem 3.2rem; position:relative}
.step .num{position:absolute; left:1rem; top:1rem; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--brass); color:var(--on-brass); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center}
.step h3{font-family:Archivo,sans-serif; font-size:1rem; margin-bottom:.3rem}
.step p{margin:0; font-size:.92rem}
.step code, .card code{font-family:"Chivo Mono",ui-monospace,monospace; font-size:.86em; background:var(--panel-2); padding:.05rem .35rem; border-radius:4px}
.cards.three{margin-bottom:1.4rem}
.fine{color:var(--muted); font-size:.84rem}

/* ---- legal ---------------------------------------------------------------- */
.legal h2{font-family:Archivo,sans-serif; font-size:1.05rem; margin:1.3rem 0 .3rem}
.legal ul{color:var(--ink-2); font-size:.94rem; padding-left:1.2rem}
.legal li{margin:.25rem 0}

/* ---- footer links ----------------------------------------------------------- */
.footlinks{display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin-bottom:.4rem}
.footlinks a{color:var(--ink-2); text-decoration:none; font-weight:500}
.footlinks a:hover{color:var(--brass-ink)}

/* ---- seen: confirmed by players ---------------------------------------- */
.seen{display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; font-weight:600; letter-spacing:.02em; color:var(--brass-ink); background:var(--brass-soft); border-radius:6px; padding:.1rem .4rem; margin-right:.35rem; white-space:nowrap}
.seen::before{content:''; width:.4rem; height:.4rem; border-radius:50%; background:var(--brass)}
.dseen:empty{display:none}
.dseen{margin:.6rem 0 0; padding:.6rem .8rem; border:1px solid var(--line); border-left:3px solid var(--brass); border-radius:8px; background:var(--panel); font-size:.86rem; color:var(--ink-2)}
.dseen p{margin:0}
.dseen p + p{margin-top:.25rem}