/* ---------- section shell ---------- */
section{border-bottom:2px solid var(--ink)}
.wrap{max-width:1280px;margin:0 auto;padding:60px 24px}
.shead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.shead h2{font-size:clamp(30px,4.6vw,58px)}
.shead .no{font-family:PlexM,monospace;font-size:11px;opacity:.5;padding-bottom:8px}
.shead p{font-size:14px;opacity:.75;max-width:400px;margin-left:auto;line-height:1.55}

/* ---------- character select ---------- */
.select{background:var(--ink);color:var(--cream)}
.select .shead h2{color:var(--cream)}
.select .shead p{color:var(--bone);opacity:.8}
.select .no{color:var(--lime);opacity:1}

.selgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media(max-width:1000px){.selgrid{grid-template-columns:1fr}}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters button{
  border:1.5px solid rgba(242,235,215,.34);color:var(--bone);
  padding:6px 12px;font-family:PlexM,monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;transition:.16s
}
.filters button:hover{border-color:var(--lime)}
.filters button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}

.roster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
  max-height:496px;overflow-y:auto;padding-right:8px;
}
.roster::-webkit-scrollbar{width:7px}
.roster::-webkit-scrollbar-thumb{background:var(--lime)}
.roster::-webkit-scrollbar-track{background:rgba(242,235,215,.1)}
.cell{position:relative;aspect-ratio:1;border:2px solid transparent;background:#1b1c17;overflow:hidden}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cell:hover img,.cell.on img{transform:scale(1.09)}
.cell:hover{border-color:var(--bone)}
.cell.on{border-color:var(--lime)}
.cell b{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--lime);
  font-family:PlexM,monospace;font-size:8px;padding:2px 4px
}

/* viewer */
.viewer{border:2px solid var(--lime);padding:16px;position:sticky;top:78px}
.vtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.vtop h3{font-family:Anton,Impact,sans-serif;font-size:30px;text-transform:uppercase}
.badge{font-family:PlexM,monospace;font-size:10px;padding:4px 9px;background:var(--lime);color:var(--ink)}
.vart{aspect-ratio:1;background:#1b1c17;border:1.5px solid rgba(242,235,215,.2);overflow:hidden;position:relative}
.vart img{width:100%;height:100%;object-fit:cover}

/* ---------- pre-reveal ---------- */
.vart.sealed{border-color:var(--lime)}
#revealBtn{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  font-size:12px;letter-spacing:.08em;padding:11px 20px;min-height:44px;
  cursor:pointer;font-weight:600;white-space:nowrap;
}
#revealBtn:hover{background:var(--cream)}
#revealBtn:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

/* Sealed chips sit on ink, not --grey: grey/cream measured 2.96:1, which fails
   WCAG AA even for large text. Ink/cream clears AAA at this 7px size. */
.badge.sealed{background:var(--ink);color:var(--cream);border:1px solid var(--grey)}

.cell.sealed{border-color:rgba(201,247,17,.34)}
.cell.sealed img{opacity:.92}
.cell.sealed u{background:var(--ink);color:var(--cream);border:1px solid rgba(201,247,17,.5)}
.cell.sealed:hover{border-color:var(--lime)}
/* 300 identical sealed tiles read as a dead wall. Six deterministic variants
   (hue/saturation/zoom of the same pre-reveal art) plus a staggered shimmer give
   the grid texture. Variants come from the token ID, never from band/rank, so
   this adds life without leaking which slots are worth opening.
   NOTE: no scaleX(-1) here. The word "UNREVEALED" is baked into tile.jpg, so
   mirroring rendered it as "03J∀3V3ЯU" on ~100 tiles. Tint + zoom only. */
.cell.sealed img{transition:transform .25s ease,filter .25s ease}
.cell.sealed.s0 img{filter:hue-rotate(0deg)   saturate(1)}
.cell.sealed.s1 img{filter:hue-rotate(-14deg) saturate(1.12)}
.cell.sealed.s2 img{filter:hue-rotate(10deg)  saturate(.9)  brightness(1.05)}
.cell.sealed.s3 img{filter:hue-rotate(-6deg)  saturate(1.2) brightness(.94);transform:scale(1.05)}
.cell.sealed.s4 img{filter:hue-rotate(18deg)  saturate(.82);transform:scale(1.03)}
.cell.sealed.s5 img{filter:hue-rotate(-20deg) saturate(1.05) brightness(1.03)}
/* Breathing sweep: a lime sheen crosses each tile, offset per slot by --wv so
   the wall pulses in a wave instead of blinking in unison. */
.cell.sealed::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 38%,rgba(201,247,17,.20) 50%,transparent 62%);
  background-size:260% 100%;
  animation:sheen 5.2s linear infinite;
  animation-delay:var(--wv,0s);
}
.cell.sealed:hover::after{animation-play-state:paused}
@keyframes sheen{
  0%{background-position:180% 0}
  60%,100%{background-position:-80% 0}
}
/* Flip is two halves: the sealed face turns away to edge-on (flipout), the art
   is swapped while the element is invisible at 90deg, then the revealed face
   turns back in (flipin). Doing only the first half made the new art pop in
   flat, which read as a glitch rather than a reveal. */
.cell.flip{animation:flipout .22s ease-in forwards}
.cell.flipin{animation:flipin .26s ease-out}
.vart.flip{animation:flipout .22s ease-in forwards}
.vart.flipin{animation:flipin .3s ease-out}
@keyframes flipout{
  0%{transform:perspective(700px) rotateY(0)}
  100%{transform:perspective(700px) rotateY(90deg)}
}
@keyframes flipin{
  0%{transform:perspective(700px) rotateY(-90deg)}
  100%{transform:perspective(700px) rotateY(0)}
}
.tr.hid span,.tr.hid em{color:var(--grey)}
.tr.hid{cursor:default;opacity:.72}

.prebar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;
  background:var(--ink);border:1.5px solid var(--lime);
}
.prebar #preCount{font-size:11px;color:var(--lime);letter-spacing:.08em}
.prebtns{display:flex;gap:8px}
.prebar button{
  background:var(--lime);color:var(--ink);border:none;
  font-size:11px;letter-spacing:.07em;padding:10px 14px;min-height:44px;
  cursor:pointer;font-weight:600;
}
.prebar button.ghost{background:transparent;color:var(--bone);border:1.5px solid var(--grey)}
.prebar button:hover{background:var(--cream)}
.prebar button.ghost:hover{background:var(--grey);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .cell.flip,.cell.flipin,.vart.flip,.vart.flipin{animation:none}
  /* The sheen loops forever, so it must be silenced too — an infinite
     animation is exactly what this preference exists to stop. */
  .cell.sealed::after{animation:none}
}
.vmeta{display:flex;gap:14px;margin:12px 0 10px;font-family:PlexM,monospace;font-size:10px}
.vmeta div span{display:block;opacity:.55;font-size:9px}
.vmeta div b{color:var(--lime);font-size:15px}
.traits{display:grid;gap:5px;max-height:190px;overflow-y:auto}
.traits::-webkit-scrollbar{width:6px}
.traits::-webkit-scrollbar-thumb{background:rgba(201,247,17,.55)}
.tr{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:11px;padding:5px 8px;background:rgba(242,235,215,.07)}
.tr i{font-style:normal;opacity:.55;font-family:PlexM,monospace;font-size:9px;display:block}
.tr em{font-style:normal;font-family:PlexM,monospace;color:var(--lime);font-size:10px;align-self:center}
.vbtns{display:flex;gap:8px;margin-top:12px}
.vbtns button{flex:1;border:1.5px solid var(--bone);padding:9px;font-family:PlexM,monospace;font-size:10px}
.vbtns button:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- search + trait chip ---------- */
.tools{margin-bottom:12px}
.qbox{position:relative;display:flex}
.qbox input{
  width:100%;background:#1b1c17;border:1.5px solid rgba(242,235,215,.3);
  color:var(--cream);font-family:PlexM,monospace;font-size:11px;letter-spacing:.06em;
  padding:10px 34px 10px 12px;outline:none;transition:.16s
}
.qbox input::placeholder{color:var(--bone);opacity:.42}
.qbox input:focus{border-color:var(--lime)}
.qbox input::-webkit-search-cancel-button{display:none}
#qClear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--bone);font-family:PlexM,monospace;font-size:12px;padding:3px 6px
}
#qClear:hover{color:var(--lime)}
.chip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.chip span{
  background:var(--lime);color:var(--ink);font-family:PlexM,monospace;font-size:9px;
  letter-spacing:.07em;padding:5px 9px;text-transform:uppercase
}
.chip button{
  border:1.5px solid rgba(242,235,215,.4);color:var(--bone);
  font-family:PlexM,monospace;font-size:9px;padding:4px 8px
}
.chip button:hover{border-color:var(--lime);color:var(--lime)}
.empty,.loadfail{
  grid-column:1/-1;padding:34px 16px;text-align:center;color:var(--bone);
  font-family:PlexM,monospace;font-size:11px;border:1.5px dashed rgba(242,235,215,.3)
}
.loadfail span{display:block;opacity:.6;font-size:9px;margin:8px 0 12px}
.loadfail button{
  border:1.5px solid var(--lime);color:var(--lime);
  font-family:PlexM,monospace;font-size:10px;padding:7px 14px
}
.loadfail button:hover{background:var(--lime);color:var(--ink)}

/* band tag on each tile */
.cell u{
  position:absolute;right:0;top:0;font-size:7px;padding:2px 3px;text-decoration:none;
  background:var(--ink);color:var(--bone);letter-spacing:.04em
}
.cell.b-MYTHIC u{background:var(--lime);color:var(--ink)}
.cell.b-EPIC u{background:#d98cff;color:var(--ink)}
.cell.b-RARE u{background:var(--cream);color:var(--ink)}
.cell.b-UNCOMMON u{background:rgba(242,235,215,.3);color:var(--cream)}
.cell.b-COMMON u{opacity:.5}

/* clickable trait rows */
.tr[data-cat]:not(.none){cursor:pointer;transition:.14s}
.tr[data-cat]:not(.none):hover{background:rgba(201,247,17,.18);outline:1px solid var(--lime)}
.tr.none{opacity:.42}

/* ---------- trait lab ---------- */
.lab .bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px}
.cat h4{font-family:PlexM,monospace;font-size:11px;padding-bottom:7px;border-bottom:2px solid var(--ink);margin-bottom:9px;display:flex;justify-content:space-between}
.cat h4 span{opacity:.5}
.row{display:grid;grid-template-columns:1fr 46px;gap:9px;align-items:center;font-size:12px;margin-bottom:5px}
.bar{
  position:relative;height:17px;background:var(--bone);overflow:hidden;
  display:block;width:100%;text-align:left;border:1.5px solid transparent;
  cursor:pointer;transition:.15s;padding:0;font:inherit;color:inherit
}
/* touch: give the 17px bar a 44px tap target without changing its look */
@media (hover:none){
  .bar::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
}
.bar:hover{border-color:var(--ink)}
.bar:hover i{background:#d9ff3d}
.bar.sel{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.bar.sel i{background:var(--ink)}
.bar.sel span{color:var(--cream);font-weight:600}
.bar:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--lime);border-right:1.5px solid var(--ink)}
.bar span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:10px;white-space:nowrap}
.row em{font-family:PlexM,monospace;font-size:10px;font-style:normal;text-align:right;opacity:.65}

/* ---------- lore / steps ---------- */
.lore{background:var(--bone)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;border:2px solid var(--ink)}
.step{padding:22px;border-right:2px solid var(--ink)}
.step:last-child{border-right:none}
.step b{font-family:Anton,Impact,sans-serif;font-size:44px;color:var(--lime);-webkit-text-stroke:1.5px var(--ink);display:block;line-height:1}
.step h5{font-family:PlexM,monospace;font-size:12px;margin:8px 0 6px}
.step p{font-size:13px;line-height:1.55;opacity:.78}
@media(max-width:760px){.step{border-right:none;border-bottom:2px solid var(--ink)}.step:last-child{border-bottom:none}}

/* ---------- faq + footer ---------- */
.faq details{border-bottom:1.5px solid var(--line);padding:14px 0}
.faq summary{font-family:PlexM,monospace;font-size:12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--lime);-webkit-text-stroke:1px var(--ink);font-size:18px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{font-size:13px;line-height:1.6;opacity:.8;padding-top:9px;max-width:660px}
footer{background:var(--ink);color:var(--bone)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer .big{font-family:Anton,Impact,sans-serif;font-size:clamp(30px,6vw,68px);color:var(--cream)}
footer a{font-family:PlexM,monospace;font-size:11px;opacity:.7}
footer a:hover{opacity:1;color:var(--lime)}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* Touch devices only: the band chips measured 27px tall at 390px, below the
   44px minimum tap target. Desktop keeps the compact size (mouse is precise). */
@media(hover:none) and (pointer:coarse){
  .filters button{min-height:44px;padding:6px 14px}
}