/* MEMEDEX + MEME REFERENCE PAGES — shared styles */

/* ---- Memedex filter bar ---- */
.dex-head{max-width:1180px;margin:0 auto;padding:1.4rem clamp(1.2rem,5vw,3rem) .4rem}
.dex-filters{display:flex;flex-wrap:wrap;gap:.5rem;max-width:1180px;margin:0 auto;padding:.6rem clamp(1.2rem,5vw,3rem) 1rem;align-items:center}
.dex-filters .fgroup{display:flex;gap:.3rem;flex-wrap:wrap}
.dex-chip{cursor:pointer;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:rgba(238,243,233,.05);border:1px solid rgba(238,243,233,.16);border-radius:99px;padding:.4rem .8rem;transition:all .2s}
.dex-chip:hover{color:var(--ink)}
.dex-chip.active{background:var(--lime);color:var(--void);border-color:var(--lime);font-weight:600}
.dex-count{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-dim)}

/* ---- Memedex grid ---- */
.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;max-width:1180px;margin:0 auto;padding:1rem clamp(1.2rem,5vw,3rem) 4rem}
.dex-card{position:relative;border-radius:18px;padding:1.2rem;min-height:250px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  background:var(--jar);border:1px solid var(--rare-col,rgba(238,243,233,.16));
  box-shadow:0 16px 44px rgba(0,0,0,.5);transition:transform .4s var(--ease-heavy),box-shadow .4s,border-color .4s}
.dex-card::before{content:"";position:absolute;inset:0;opacity:.14;z-index:0;background:radial-gradient(120% 80% at 80% 0%,var(--rare-col,transparent),transparent 62%)}
.dex-card>*{position:relative;z-index:1}
.dex-card:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 30px 66px rgba(0,0,0,.65),0 0 30px var(--rare-glow,transparent);border-color:var(--rare-col)}
.dex-card.locked{cursor:default;filter:grayscale(.7);opacity:.55}
.dex-card.locked:hover{transform:none;box-shadow:0 16px 44px rgba(0,0,0,.5)}
.dex-card .dex-no{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;color:var(--gold)}
.dex-card .dex-rarity{position:absolute;top:1rem;right:1.1rem;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rare-col);border:1px solid var(--rare-col);border-radius:99px;padding:.18rem .5rem}
.dex-card .dex-glyph{font-family:var(--font-display);font-size:3.2rem;line-height:1;margin:.6rem 0 .3rem;text-transform:uppercase;color:var(--ink)}
.dex-card .dex-name{font-family:var(--font-body);font-weight:700;font-size:1.05rem}
.dex-card .dex-class{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:.2rem}
.dex-card .dex-blurb{font-size:.8rem;color:var(--ink-dim);margin-top:.6rem;flex:1}
.dex-card .dex-stats{display:flex;gap:.8rem;margin-top:.7rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.dex-card .dex-stats b{color:var(--rare-col);display:block;font-size:.95rem}
.dex-card .dex-status{margin-top:.6rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.dex-card .dex-status.field{color:var(--plasma)}

/* rarity palettes */
.r-common{--rare-col:#8A93A6;--rare-glow:rgba(138,147,166,.3)}
.r-uncommon{--rare-col:#8DF250;--rare-glow:rgba(141,242,80,.35)}
.r-rare{--rare-col:#39E6FF;--rare-glow:rgba(57,230,255,.35)}
.r-legendary{--rare-col:#D8B36A;--rare-glow:rgba(216,179,106,.4)}
.r-mythic{--rare-col:#B14DFF;--rare-glow:rgba(177,77,255,.45)}

/* ---- Modal ---- */
.dex-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(3,4,10,.8);backdrop-filter:blur(8px)}
.dex-modal.open{display:flex}
.dex-modal-inner{max-width:560px;width:100%;max-height:88vh;overflow-y:auto;background:var(--jar);border:1px solid var(--rare-col,rgba(238,243,233,.2));border-radius:22px;padding:2rem;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 50px var(--rare-glow,transparent);position:relative;animation:tIn .4s var(--ease-snap)}
.dex-modal .close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;color:var(--ink-dim);font-size:1.6rem;cursor:pointer}
.dex-modal .close:hover{color:var(--orange)}
.dex-modal .m-glyph{font-family:var(--font-display);font-size:4rem;line-height:1;text-transform:uppercase;color:var(--rare-col)}
.dex-modal h3{font-family:var(--font-display);font-weight:400;font-size:1.8rem;text-transform:uppercase;margin:.3rem 0}
.dex-modal .m-meta{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:.6rem 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(238,243,233,.12)}
.dex-modal .m-meta b{color:var(--rare-col)}
.dex-modal p{font-size:.92rem;color:var(--ink);margin-bottom:.8rem}
.dex-modal .m-cta{display:inline-flex;margin-top:.6rem}

/* ---- Meme reference page ---- */
.meme-hero{max-width:820px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,3rem) 1rem}
.meme-hero .specimen-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.meme-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,8vw,5.2rem);letter-spacing:-.03em;line-height:1;margin-bottom:1.2rem}
.meme-answer{background:rgba(238,243,233,.05);border:1px solid rgba(141,242,80,.3);border-left-width:4px;border-radius:14px;padding:1.4rem 1.6rem;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.6}
.meme-body{max-width:820px;margin:0 auto;padding:1rem clamp(1.2rem,5vw,3rem) 2rem}
.meme-body h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.12;margin:2.2rem 0 1rem}
.meme-body h3{font-weight:700;font-size:1.1rem;margin:1.4rem 0 .4rem}
.meme-body p{margin-bottom:1rem;color:var(--ink)}
.meme-body .note{font-size:.86rem;color:var(--ink-dim);border-left:2px solid var(--gold);padding-left:1rem;margin:1.2rem 0}
.meme-related{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.sources-list{font-size:.82rem;color:var(--ink-dim);line-height:1.9}

/* organism illustration on memedex cards */
.dex-organism{display:block;width:96px;height:96px;margin:.2rem auto .4rem}
.dex-organism svg{width:100%;height:100%;overflow:visible}

/* ============ PRINT: field-guide mode ============ */
@media print{
  .living-bg,.world-fog,.world-hud,.fg-shard,.torch,.reticle,.pnav,.vanta,.jr-toast,.jr-chip,.jr-drawer,.breach,.sv-toolbar,.sv-cite,.warp-flash,#toasts,.airlock,footer .legal{display:none!important}
  body{background:#fff!important;color:#111!important}
  *{color:#111!important;text-shadow:none!important;box-shadow:none!important;filter:none!important}
  h1,h2,h3{color:#000!important;page-break-after:avoid}
  a{color:#111!important;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555!important}
  .meme-hero,.sv-card,.pillar-card,.jar-card{border:1px solid #ccc!important;background:#fff!important;page-break-inside:avoid}
  .meme-body{max-width:100%}
  article::after{content:"Field notes from phylumdigital.com";display:block;margin-top:2rem;padding-top:.6rem;border-top:1px solid #ccc;font-size:.7rem;color:#666!important;letter-spacing:.1em;text-transform:uppercase}
  @page{margin:2cm}
}