/* Wraeclast Index — the live card, its popup and the top search.
   Shared by the app (index.html) and the drill-down page (explore.html, via bridge.css). */
/* ---------- the live card: one style for every object ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; position:relative}
.card{position:relative; display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 14px 11px; box-shadow:var(--shadow); cursor:pointer; text-align:left;
  color:inherit; text-decoration:none; min-width:0; transition:box-shadow .2s, border-color .2s, translate .2s}
.card:hover{box-shadow:var(--shadow-hi); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); translate:0 -1px}
.card:focus-visible,.card:has(.card-link:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.card-link{color:inherit; text-decoration:none}
.card-link:focus-visible{outline:none}
.card-link::after{content:''; position:absolute; inset:0; border-radius:inherit; z-index:0}
.card-ext{position:relative; z-index:1; color:var(--accent); text-decoration:none; white-space:nowrap; font-weight:500}
.card-ext:hover{text-decoration:underline}
.card-why{margin:0; font-size:12.5px; line-height:1.45; color:var(--text); background:var(--accent-soft); border-radius:6px; padding:6px 9px}
.card-hd{display:flex; gap:11px; align-items:flex-start; min-width:0}
.card-ic{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:var(--sunken); overflow:hidden}
.card-ic img{width:34px; height:34px; object-fit:contain}
.card-ic .glyph{font:600 15px var(--disp); color:var(--muted)}
.card-id{min-width:0; flex:1}
.card-id h3{font-size:14.5px; font-weight:600; line-height:1.25; overflow-wrap:anywhere}
.card-sub{margin:2px 0 0; font-size:11.5px; color:var(--faint); line-height:1.3}
.card-px{flex:none; text-align:right; line-height:1.2}
.card-px b{display:block; font:600 15px var(--mono); font-variant-numeric:tabular-nums}
.card-px b small{font-size:11px; font-weight:500; color:var(--faint); margin-left:3px}
.card-px .chg{font:500 11.5px var(--mono)}
.card-tx{margin:0; font-size:12.5px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card.open .card-tx{-webkit-line-clamp:unset}
.card-req{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.pill{font:500 11px var(--mono); border:1px solid var(--line); background:var(--raised); color:var(--muted);
  border-radius:5px; padding:1px 6px; white-space:nowrap}
.pill.a-r{color:var(--str); border-color:color-mix(in srgb, var(--str) 40%, var(--line))}
.pill.a-g{color:var(--dex); border-color:color-mix(in srgb, var(--dex) 40%, var(--line))}
.pill.a-b{color:var(--int); border-color:color-mix(in srgb, var(--int) 40%, var(--line))}
.pill.warn{color:var(--neg)}
.pill-note{font-size:10.5px; color:var(--faint); margin-left:2px}
.pill-note span{cursor:help; border-bottom:1px dotted var(--faint)}
.card-facts{margin:0; font:11.5px/1.45 var(--mono); color:var(--muted)}
.card-ls{margin:0; padding:0; list-style:none; font-size:12.5px; line-height:1.45; color:var(--text)}
.card-ls li{padding-left:10px; position:relative}
.card-ls li::before{content:''; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.7}
.card-ls li.more-n{color:var(--faint); font-size:11.5px}
.card-ls li.more-n::before{display:none}
.card-tags{margin:0; font-size:11px; color:var(--faint); letter-spacing:.02em}
.card-ft{margin-top:auto; display:flex; align-items:center; gap:10px; min-height:22px; font-size:11px; color:var(--faint)}
.card-ft .spark{width:84px; height:22px; flex:none}
.card-ft .use{white-space:nowrap}
.card-ft .kind{margin-left:auto; text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; white-space:nowrap}
.card-inv{display:flex; justify-content:space-between; gap:8px; font-size:12px; border-top:1px dashed var(--line); padding-top:7px}
.card-inv b{font-family:var(--mono); font-weight:600}
.card-inv b small{margin-left:3px; font-weight:500; color:var(--faint)}
.card-rank{position:absolute; top:-9px; left:12px; font:600 10.5px var(--mono); background:var(--accent); color:var(--ground);
  border-radius:10px; padding:1px 7px}
.up{color:var(--pos)} .down{color:var(--neg)} .flat{color:var(--faint)}
.k-g .card-ic{background:color-mix(in srgb, var(--int) 10%, var(--sunken))}
.k-u .card-ic{background:color-mix(in srgb, var(--accent) 14%, var(--sunken))}
.k-p .card-ic{background:color-mix(in srgb, var(--dex) 10%, var(--sunken))}
.k-c .card-ic{background:color-mix(in srgb, var(--accent) 10%, var(--sunken))}
.ic{display:inline-block; background-repeat:no-repeat}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.dot.r{background:var(--str)} .dot.g{background:var(--dex)} .dot.b{background:var(--int)} .dot.w{background:var(--any)}

/* the drill-down page has its own .spark and .kind rules; keep the card's own sizes */
.card .card-ft .spark{display:inline-block; width:84px; height:22px; margin:0}
.card .card-ft .kind{font-size:9.5px; color:var(--faint)}

/* ---------- popup ---------- */
.ov{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px}
.ov-scrim{position:absolute; inset:0; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.ov-box{position:relative; width:min(640px, 100%); max-height:calc(100vh - 32px); overflow:auto; border-radius:14px; outline:none;
  animation:ovpop .24s cubic-bezier(.2,.8,.2,1); overscroll-behavior:contain}
@keyframes ovpop{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}
body.ov-open{overflow:hidden}
.card.detail{cursor:default; padding:22px 24px 18px; gap:12px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.detail:hover{translate:none}
.card.detail h3{font-size:20px}
.card.detail .card-ic{width:56px; height:56px}
.card.detail .card-tx{-webkit-line-clamp:unset; font-size:13.5px}
.card.detail .card-ls{font-size:13.5px}
.chart{margin:4px 0 0}
.chart figcaption{font-size:11px; color:var(--faint); margin-bottom:4px}
.chart svg{display:block; width:100%; height:64px; background:var(--sunken); border-radius:6px}
/* the one way on to the drill-down page: a small gold-on-black button that lights up on hover */
.ov-go{display:flex; justify-content:flex-end; margin-top:10px}
.btn.gold{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:8px; text-decoration:none;
  background:#0A0907; color:#D9B04A; border:1px solid #6E5520; font-weight:500; font-size:12.5px; letter-spacing:.02em;
  transition:color .15s, border-color .15s, box-shadow .15s}
.btn.gold:hover, .btn.gold:focus-visible{color:#F5CF66; border-color:#D9B04A; box-shadow:0 0 0 1px rgba(217,176,74,.25), 0 0 16px rgba(217,176,74,.28)}

/* ---------- top search: on every page but home; / jumps into it ---------- */
.topsearch{position:relative; flex:0 1 340px; min-width:180px}
.tsearch{position:relative}
.tsearch input{width:100%; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  padding:0 34px 0 32px; font-size:13px; color:var(--text)}
.tsearch input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.tsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.tsearch svg{position:absolute; left:10px; top:50%; width:14px; height:14px; translate:0 -50%; color:var(--faint); pointer-events:none}
.tsearch kbd{position:absolute; right:9px; top:50%; translate:0 -50%; font:500 11px var(--mono); color:var(--faint);
  border:1px solid var(--line); border-radius:4px; padding:0 5px; background:var(--raised)}
.tsearch input:focus ~ kbd{opacity:0}
.tsearch-drop{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:90; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.35); overflow:hidden; min-width:320px}
.tsearch-row{display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer; border:0; background:none; width:100%; text-align:left; color:inherit}
.tsearch-row[aria-selected="true"], .tsearch-row:hover{background:var(--raised)}
.tsearch-row .card-ic{width:30px; height:30px; border-radius:6px}
.tsearch-row .card-ic img{width:26px; height:26px}
.tsearch-row .card-ic .ic{zoom:.75}
.tsearch-row .t{min-width:0; flex:1}
.tsearch-row .t b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tsearch-row .t span{display:block; font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tsearch-row .p{font:600 12px var(--mono); white-space:nowrap}
.tsearch-row .p small{font-weight:500; color:var(--faint); margin-left:2px}
.tsearch-all{display:block; padding:8px 12px; font-size:12px; color:var(--accent); text-decoration:none; border-top:1px solid var(--line-soft)}
.tsearch-all:hover{background:var(--raised)}
.tsearch-none{padding:12px; font-size:12.5px; color:var(--faint)}
body[data-route="home"] .top .topsearch{display:none}
@media (max-width:640px){ .topsearch{flex:1 1 100%; order:5} .tsearch-drop{min-width:0} }

/* ---------- trade panel, inside the popup ---------- */
.ov-go{gap:8px}
.btn.ttoggle[aria-expanded="true"]{border-color:var(--accent); color:var(--accent)}
.trade{margin-top:10px; padding:14px 16px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); display:grid; gap:10px}
.trade h4{margin:0; font-family:var(--disp); font-size:15px; display:flex; gap:10px; align-items:baseline}
.trade .note{margin:0}
.tmods{display:grid; gap:6px}
.tmod{border:1px solid var(--line-soft); border-radius:8px; padding:7px 10px; background:var(--sunken)}
.tmod.on{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.tmod.off{color:var(--faint); font-size:12.5px; background:transparent}
.tcheck{display:flex; gap:9px; align-items:flex-start; cursor:pointer; font-size:13px; line-height:1.4}
.tcheck input{margin-top:3px; accent-color:var(--accent)}
.tctl{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 2px 24px}
.tctl input[type=range]{flex:1 1 160px; accent-color:var(--accent)}
.tnum{width:82px; padding:4px 8px; font:500 13px var(--mono)}
.tctl .seg button, .tstates .seg button, .tpay button{padding:3px 9px; font-size:12px}
.tstates{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px 14px}
.trow{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}
.tonline{display:inline-flex; gap:6px; align-items:center; cursor:pointer}
.tgo{display:flex; justify-content:flex-end; gap:8px}

/* ---------- keybindings: the keyboard button in the top bar and its popup (assets/keys.js) ---------- */
.keysbtn{order:99; flex:none; align-self:center; display:grid; place-items:center; width:34px; height:34px; padding:0; cursor:pointer;
  border:2px solid var(--line); border-radius:8px; background:var(--surface); color:var(--faint); transition:color .15s, border-color .15s}
.keysbtn:hover{color:var(--text); border-color:var(--accent)}
header.top .keysbtn{margin-left:auto}   /* far right, even when the header wraps */
.keysbtn svg{width:18px; height:18px}
.keys-box{width:min(400px, 100%)}
.keys-card{position:relative; background:var(--surface); border:2px solid var(--line); border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.5); padding:18px 18px 10px}
.keys-card::before{content:''; position:absolute; left:12px; right:12px; top:0; height:1px; opacity:.45;
  background:linear-gradient(90deg, transparent, var(--bronze, var(--line)) 20%, var(--bronze, var(--line)) 80%, transparent)}
.keys-card h2{margin:0 0 8px; font:600 17px var(--disp); letter-spacing:.03em}
.keys-list{margin:0; padding:0; list-style:none}
.keys-row{display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--line-soft)}
.keys-row:first-child{border-top:0}
.keys-name{flex:1; min-width:0; font-size:13.5px}
.keys-key{min-width:46px; height:30px; padding:0 10px; cursor:pointer; border:2px solid var(--line); border-radius:6px;
  background:var(--raised); color:var(--text); font:600 13px var(--mono); box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
  transition:color .15s, border-color .15s, background .15s}
.keys-key:hover{border-color:var(--accent)}
.keys-key.none{color:var(--faint); font:italic 400 12px var(--sans); background:transparent; box-shadow:none}
.keys-key.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font:500 12px var(--sans);
  animation:keys-wait 1.2s ease-in-out infinite}
@keyframes keys-wait{50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}}
.keys-reset{padding:4px 6px; cursor:pointer; border:0; border-radius:4px; background:none; color:var(--faint); font-size:11.5px}
.keys-reset:hover{color:var(--accent)}
.keys-reset:disabled{opacity:.3; cursor:default; color:var(--faint)}
.keys-note{min-height:18px; margin:6px 0 0; font-size:12px; color:var(--muted)}
.keys-foot{display:flex; justify-content:center; margin-top:10px}
.keys-clear{padding:6px 14px; cursor:pointer; border:2px solid var(--line); border-radius:8px; background:var(--sunken);
  color:var(--muted); font-size:12.5px; transition:color .15s, border-color .15s}
.keys-clear:hover{color:#F08A82; border-color:var(--blood, var(--neg))}
.keysbtn:focus-visible, .keys-key:focus-visible, .keys-reset:focus-visible, .keys-clear:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .keys-key.on{animation:none} }
@media (max-width:640px), (hover:none) and (pointer:coarse){ .keysbtn{display:none} }   /* no keyboard, no shortcuts */

/* sliders with tiers: number box + slider; the track shows each tier as a band (T1 = best), shaded cool to hot as prices climb */
.tval{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.tslide{position:relative; display:inline-block; flex:1 1 170px; min-width:150px; max-width:340px; height:34px}
.ttrack{position:absolute; left:8px; right:8px; top:9px; height:10px; border-radius:3px; border:1px solid var(--line); box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.tdiv{position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--ground); opacity:.9}
.ttag{position:absolute; top:13px; transform:translateX(-50%); font:500 9px/1 var(--mono); color:var(--faint); pointer-events:none; white-space:nowrap}
.tslide input[type=range]{position:absolute; inset:0 0 auto 0; width:100%; height:28px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer}
.tslide input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.tslide input[type=range]::-webkit-slider-runnable-track{height:28px; background:transparent}
.tslide input[type=range]::-moz-range-track{height:28px; background:transparent}
.tslide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; margin-top:6px; border-radius:50%; background:#E8DDBE; border:2px solid var(--ground); box-shadow:0 0 0 1px var(--bronze), 0 1px 4px rgba(0,0,0,.6)}
.tslide input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#E8DDBE; border:2px solid var(--ground); box-shadow:0 0 0 1px var(--bronze), 0 1px 4px rgba(0,0,0,.6)}
.tslide.unset input[type=range]::-webkit-slider-thumb{opacity:.45}
.tslide.unset input[type=range]::-moz-range-thumb{opacity:.45}
.tslide.unset .ttrack{opacity:.7}
.ttier{font:500 11px/1.2 var(--mono); color:var(--muted); white-space:nowrap}
.theat{display:flex; align-items:center; gap:8px; margin:4px 0 8px}
.theat-bar{display:inline-block; width:64px; height:8px; border-radius:2px; border:1px solid var(--line);
  background:linear-gradient(90deg, rgb(28,38,26), rgb(74,72,34) 40%, rgb(168,132,74) 72%, rgb(179,38,30))}
.tp-types{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:10px 0 4px}
.tp-type{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text); cursor:pointer}
@media (max-width:520px){ .tslide{flex-basis:100%; max-width:none} }
/* the Suggest button (assets/suggest.js): top bar, left of the keybind button */
.suggestbtn{order:98; flex:none; align-self:center; height:34px; padding:0 12px; font:500 12px/1 var(--sans); letter-spacing:.03em;
  color:#E8C77A; background:#0B0B09; border:2px solid #7A5F2C; border-radius:8px; cursor:pointer;
  transition:box-shadow .15s, border-color .15s, color .15s}
.suggestbtn:hover, .suggestbtn:focus-visible{border-color:#C9A24E; color:#F6DC9A; box-shadow:0 0 12px rgba(201,162,78,.35); outline:none}
body > .suggestbtn{position:fixed; left:14px; bottom:14px; z-index:90}   /* a page with no top bar */
header.top .suggestbtn{margin-left:auto}
header.top .suggestbtn + .keysbtn{margin-left:0}
.suggest{padding:18px}
.suggest h3{margin:0 0 4px}
.suggest textarea{width:100%; margin:10px 0 8px; resize:vertical; min-height:110px; font:inherit}
.sug-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
/* Patch notes (assets/notes.js): top bar button and its popup */
.notesbtn{order:97; flex:none; align-self:center; height:34px; padding:0 10px; cursor:pointer; font:500 12px/1 var(--sans);
  color:var(--muted); background:var(--surface); border:2px solid var(--line); border-radius:8px; transition:color .15s, border-color .15s}
.notesbtn:hover, .notesbtn:focus-visible{color:var(--text); border-color:var(--accent); outline:none}
.notesbtn .ct{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-left:4px}
header.top .notesbtn{margin-left:auto}
header.top .notesbtn ~ .suggestbtn{margin-left:0}
.notes{padding:18px}
.notes h3{margin:0 0 4px}
.notes-v{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.notes-v h4{margin:0 0 6px; font-size:14px}
.notes-ver{font-family:var(--mono); font-size:12px; color:var(--accent); margin-right:4px}
.notes-v ul{margin:0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.5}
@media (max-width:640px){ .notesbtn .ct{display:none} }
.notes, .suggest{background:var(--surface); border:2px solid var(--line); border-radius:var(--r, 10px)}
.tall{margin:2px 0 8px; font-weight:600}
/* Support popup (assets/support.js) */
.supportbox{padding:18px; background:var(--surface); border:2px solid var(--line); border-radius:var(--r, 10px)}
.supportbox h3{margin:0 0 4px} .supportbox h4{margin:14px 0 6px}
.sup-coin{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin:6px 0}
.sup-coin code{font-size:11.5px; word-break:break-all; color:var(--text)}
.notes-sup{margin-top:14px}