:root{--bg:#fff7f9;--panel:#ffffff;--line:#f7dbe4;--ink:#3b2028;
  --dim:rgba(59,32,40,.74);--acc:#a81f4f;--sink:#fdeef3;
  --sky-a:#ffdfe9;--sky-b:#ffe9f0;--sky-c:#fdeef3}
:root[data-theme="dark"]{--bg:#0c0c10;--panel:#15151b;--line:#26262f;--ink:#ffffff;
  --dim:rgba(255,255,255,.58);--acc:#d6fe50;--sink:#101017;
  --sky-a:#12210c;--sky-b:#0f1a12;--sky-c:#0c0c10}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--sky-a) 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 2%, var(--sky-b) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--sky-c) 100%);
  background-attachment:fixed}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
a{color:var(--acc)}
header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding:13px 0}
.logo{font-weight:800;letter-spacing:.26em;font-size:16px;color:var(--ink);text-decoration:none}
.logo b{color:var(--acc)}
.sp{flex:1}
.x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.x:hover{color:var(--acc);border-color:var(--acc)}
.tt{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);background:none;
  cursor:pointer;padding:0;transition:color .12s,border-color .12s}
.tt:hover{color:var(--acc);border-color:var(--acc)}
/* Show the icon for the theme you would switch TO, which is the convention
   people expect from a single toggle. */
.tt .i-sun{display:none}
:root[data-theme="dark"] .tt .i-sun{display:block}
:root[data-theme="dark"] .tt .i-moon{display:none}
main{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:34px 0 60px}
main img{width:100%;height:auto;aspect-ratio:1;display:block;border:1px solid var(--line);border-radius:14px;background:var(--sink)}
h1{margin:0 0 4px;font-size:28px;letter-spacing:.05em}
.rk{color:var(--dim);font-size:13px;margin-bottom:18px}
.trow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13px}
.trow span:first-child{color:var(--dim);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding-top:3px}
.trow span:last-child{text-align:right;font-weight:600}
.back{display:inline-block;margin-top:22px;font-size:13px}
.hidden{display:none}
@media(max-width:700px){main{grid-template-columns:1fr}}

/* ------------------------------------------------------------ rarity page */
.rwrap{max-width:1000px;margin:0 auto;padding:0 20px 60px}
.rhead{padding:30px 0 4px}
.rhead h1{margin:0;font-size:26px;letter-spacing:.04em}
.rhead p{margin:8px 0 0;color:var(--dim);font-size:14px}
.rtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:20px 0 14px}
.rtools input{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;width:150px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;text-transform:capitalize}
.chip.on{border-color:var(--acc);color:var(--acc)}
.rcount{margin-left:auto;color:var(--dim);font-size:13px}
.rrow{display:grid;grid-template-columns:64px 92px 110px 78px 1fr;gap:12px;align-items:center;
  padding:11px 12px;border-top:1px solid var(--line);font-size:13.5px;color:inherit;
  text-decoration:none}
.rrow:first-of-type{border-top:0}
.rrow:hover{background:var(--sink)}
.rhdr{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border-top:0;background:none;cursor:default}
.rrank{font-weight:700}
.rid{color:var(--acc);font-weight:600}
.rtier{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.t-Legendary{color:var(--acc)}
.t-Epic{color:var(--acc-soft)}
.rtraits{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.rempty{padding:40px;text-align:center;color:var(--dim)}
/* Score and traits are the first things to go when width runs out; rank, id and
   tier are what the page is actually for. */
@media(max-width:820px){
  .rrow{grid-template-columns:52px 80px 100px 1fr}
  .rscore{display:none}
}
@media(max-width:560px){
  .rrow{grid-template-columns:48px 74px 1fr;gap:8px;font-size:13px}
  .rtraits{display:none}
  .rwrap{padding:0 14px 50px}
}