/* ============================================================
   WE THE HUMANS — Futuristic Graffiti Theme (2026-10-25)
   Layered ON TOP of each page's baked-in styles. Loaded last in
   <head> so these rules win. Brand: neon green / black / white,
   plus futuristic cyan + spray magenta accents.
   ============================================================ */
:root{
  --wth-neon:#39ff14;
  --wth-neon-soft:rgba(57,255,20,.55);
  --wth-cyan:#00e5ff;
  --wth-magenta:#ff2ea6;
  --wth-bg:#060607;
  --wth-panel:#101014;
  --wth-line:#26262e;
  --wth-text:#f4f4f6;
  --wth-muted:#a7a7b3;
  --wth-font-head:"Orbitron",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wth-font-tag:"Permanent Marker","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wth-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 480px at 85% -5%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(1000px 520px at -10% 12%, rgba(57,255,20,.09), transparent 60%),
    radial-gradient(700px 420px at 110% 55%, rgba(255,46,166,.06), transparent 60%),
    var(--wth-bg) !important;
  color:var(--wth-text);
  overflow-x:hidden;
}
/* faint futuristic grid + scanline flow over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}
body>*{position:relative;z-index:1}
::selection{background:var(--wth-neon);color:#061206}
:focus-visible{outline:2px solid var(--wth-cyan);outline-offset:2px;border-radius:4px}

/* ---------- scroll progress: a neon spray line that fills as you flow ---------- */
#wth-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--wth-neon),var(--wth-cyan),var(--wth-magenta));
  box-shadow:0 0 12px var(--wth-neon-soft);}

/* ---------- cursor spray glow (desktop pointers only, JS-driven) ---------- */
#wth-glow{position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle, rgba(57,255,20,.13) 0%, rgba(0,229,255,.06) 40%, transparent 68%);
  mix-blend-mode:screen;}
body.wth-glow-on #wth-glow{opacity:1}
@media (pointer:coarse){#wth-glow{display:none}}

/* ---------- header: glass, neon edge, graffiti brand ---------- */
header.site{
  background:rgba(8,8,10,.82) !important;
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(57,255,20,.35) !important;
  box-shadow:0 6px 30px rgba(0,0,0,.55), 0 1px 0 rgba(0,229,255,.15);
}
.brand{font-family:var(--wth-font-head);text-transform:uppercase;letter-spacing:2px !important;}
.brand b{
  font-family:var(--wth-font-tag);letter-spacing:0;
  background:linear-gradient(100deg,var(--wth-neon) 20%,var(--wth-cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  filter:drop-shadow(0 0 10px rgba(57,255,20,.45));
  transform:rotate(-2deg);display:inline-block;
}
nav.links a{position:relative;padding:4px 2px;transition:color .25s}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--wth-neon),var(--wth-cyan));
  transition:right .35s var(--wth-ease);box-shadow:0 0 8px var(--wth-neon-soft);}
nav.links a:hover::after,nav.links a.wth-active::after{right:0}
nav.links a.wth-active{color:var(--wth-neon)}

/* ---------- headings: futuristic type, spray-tag accents ---------- */
h1,h2,h3{font-family:var(--wth-font-head);letter-spacing:.4px}
article h2,.card h2{color:#fff}
article h2{
  background:linear-gradient(92deg,#fff 55%,var(--wth-neon));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* spray-splatter dots sprinkled on section titles */
article h2::before,.pillars .card h2::before{
  content:"";display:inline-block;width:.55em;height:.55em;margin-right:.35em;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, var(--wth-neon) 0 38%, transparent 42%),
    radial-gradient(circle at 78% 70%, var(--wth-cyan) 0 22%, transparent 26%),
    radial-gradient(circle at 65% 20%, var(--wth-magenta) 0 14%, transparent 18%);
}

/* ---------- hero: big spray wall ---------- */
.hero{position:relative;padding:88px 0 64px !important;isolation:isolate}
.hero::before{ /* spray halo */
  content:"";position:absolute;inset:6% -12% auto;height:78%;z-index:-1;border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(57,255,20,.20), transparent 70%),
    radial-gradient(closest-side at 78% 30%, rgba(0,229,255,.16), transparent 70%),
    radial-gradient(closest-side at 18% 72%, rgba(255,46,166,.12), transparent 70%);
  filter:blur(28px);animation:wth-halo 9s ease-in-out infinite alternate;
}
@keyframes wth-halo{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.07) rotate(2deg)}}
.hero h1{
  font-weight:900;text-transform:uppercase;line-height:1.04 !important;
  text-shadow:0 0 34px rgba(57,255,20,.18);
}
.hero h1 .n{
  font-family:var(--wth-font-tag);text-transform:none;letter-spacing:0;
  background:linear-gradient(95deg,var(--wth-neon) 10%,var(--wth-cyan) 65%,var(--wth-magenta) 115%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.85)) drop-shadow(0 0 16px rgba(57,255,20,.35));
  animation:wth-flow 7s linear infinite;
  display:inline-block;transform:rotate(-1.6deg);
}
@keyframes wth-flow{to{background-position:220% 0}}
.hero p{font-size:19px !important}

/* ---------- buttons: spray cans with shine sweep ---------- */
.btn{
  font-family:var(--wth-font-head);text-transform:uppercase;letter-spacing:1.2px;font-size:14px;
  border-radius:10px !important;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(57,255,20,.5), 0 8px 26px rgba(57,255,20,.22);
  transition:transform .25s var(--wth-ease), box-shadow .25s, filter .25s;
  will-change:transform;
}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .55s var(--wth-ease);}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 1px var(--wth-neon),0 14px 34px rgba(57,255,20,.35)}
.btn:hover::after{left:130%}
.btn.ghost{background:rgba(57,255,20,.05) !important;box-shadow:inset 0 0 0 2px var(--wth-neon),0 8px 22px rgba(0,0,0,.4)}
.btn.ghost:hover{background:rgba(57,255,20,.14) !important}

/* ---------- cards & rows: glass panels, neon edge, 3D tilt (JS) ---------- */
.card,.postrow,article{
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%), var(--wth-panel) !important;
  border:1px solid var(--wth-line) !important;border-radius:16px !important;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform .35s var(--wth-ease), border-color .3s, box-shadow .35s;
  transform-style:preserve-3d;
}
.card:hover,.postrow:hover{
  border-color:rgba(57,255,20,.55) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(57,255,20,.14), inset 0 0 0 1px rgba(0,229,255,.12);
}
.card h2 a,.postrow h3 a{transition:color .25s, text-shadow .25s}
.card h2 a:hover,.postrow h3 a:hover{text-shadow:0 0 14px rgba(57,255,20,.5)}

/* reveal-on-scroll (JS adds .wth-reveal, observer adds .wth-in) */
.wth-reveal{opacity:0;transform:translateY(26px) scale(.985)}
.wth-reveal.wth-in{opacity:1;transform:none;transition:opacity .7s var(--wth-ease), transform .7s var(--wth-ease)}
@media (prefers-reduced-motion:reduce){
  .wth-reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hero::before,.hero h1 .n{animation:none}
}

/* ---------- links inside copy: underline spray ---------- */
article a,.card p a{
  background-image:linear-gradient(90deg,var(--wth-neon),var(--wth-cyan));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--wth-ease), color .25s;
  padding-bottom:1px;
}
article a:hover,.card p a:hover{background-size:100% 2px;text-decoration:none !important}
article blockquote{border-left:4px solid var(--wth-neon) !important;background:rgba(57,255,20,.05);
  border-radius:0 10px 10px 0;padding:12px 18px !important;font-style:italic}
article img{border:1px solid var(--wth-line);box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:transform .4s var(--wth-ease), box-shadow .4s}
article img:hover{transform:scale(1.015) rotate(-.3deg);box-shadow:0 18px 42px rgba(0,0,0,.6),0 0 22px rgba(0,229,255,.15)}

/* ---------- footer: wall fade ---------- */
footer.site{background:linear-gradient(180deg, rgba(57,255,20,.05), #08080a 40%) !important;
  border-top:1px solid rgba(57,255,20,.3) !important}
.foot h4{font-family:var(--wth-font-head);letter-spacing:1.6px !important}
.newsletter button{font-family:var(--wth-font-head);text-transform:uppercase;letter-spacing:1px;font-size:13px !important}
.newsletter input{background:#0a0a0c !important;transition:border-color .25s, box-shadow .25s}
.newsletter input:focus{border-color:var(--wth-neon) !important;box-shadow:0 0 0 3px rgba(57,255,20,.18);outline:none}

/* ---------- back-to-top tag button (JS-injected) ---------- */
#wth-top{position:fixed;right:20px;bottom:22px;z-index:120;width:52px;height:52px;border-radius:14px;
  border:2px solid var(--wth-neon);background:rgba(8,10,8,.9);color:var(--wth-neon);
  font-family:var(--wth-font-tag);font-size:19px;cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(14px) rotate(-3deg);transition:all .35s var(--wth-ease);
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 18px rgba(57,255,20,.2);}
#wth-top.wth-show{opacity:1;pointer-events:auto;transform:translateY(0) rotate(-3deg)}
#wth-top:hover{background:var(--wth-neon);color:#061206;transform:rotate(2deg) scale(1.06)}

/* ---------- Pokédex + store search: neon lab panels ---------- */
.dex-stat,.dex-card,.dex-chip{transition:transform .3s var(--wth-ease), border-color .3s, box-shadow .3s}
.dex-card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.6) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.55), 0 0 20px rgba(0,229,255,.16)}
.dex-bar{background:linear-gradient(90deg,var(--wth-neon),var(--wth-cyan)) !important;
  box-shadow:0 0 14px var(--wth-neon-soft)}
.dex-chip:hover{border-color:var(--wth-magenta) !important;color:#fff;transform:rotate(-1.5deg) scale(1.04)}
input[type="search"],input[type="text"],#ss-q,#dex-q{
  transition:border-color .25s, box-shadow .25s;
}
#ss-q:focus,#dex-q:focus{border-color:var(--wth-neon) !important;box-shadow:0 0 0 3px rgba(57,255,20,.18);outline:none}

/* deck builder page keeps its own sheet; just lend it the wall */
.db-card{transition:transform .3s var(--wth-ease), box-shadow .3s, border-color .3s}
.db-card:hover{transform:translateY(-3px)}
.db-card.stock{box-shadow:0 0 0 1px rgba(57,255,20,.45), 0 12px 30px rgba(0,0,0,.5)}

@media (max-width:640px){
  .hero{padding:60px 0 44px !important}
  #wth-top{right:14px;bottom:16px;width:46px;height:46px;font-size:16px}
}

/* ---------- v3: stretched links — the tile IS the link, no JS required ---------- */
.pillars .card, .postlist .postrow, .card.wth-tile, .postrow{position:relative}
.pillars .card h2 a::after, .postlist .postrow h3 a::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
}
.pillars .card a:not(h2 a), .postlist .postrow a:not(h3 a){position:relative;z-index:2}
/* any image that fails to load gets the branded card-back treatment */
img.wth-broken{object-fit:contain !important;background:#0a0a0c}

/* ===== round 6: mobile flow + video embeds ===== */
html,body{overflow-x:clip}
.vid{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:14px;margin:14px 0;background:#000;border:1px solid rgba(57,255,20,.35)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
iframe{max-width:100%}
.artist{scroll-margin-top:96px}
#artist-jump{width:100%;margin:0 0 14px;background:#0b0e0b;color:#e8f5e8;border:1px solid rgba(57,255,20,.45);border-radius:10px;padding:11px;font-size:15px}
.a-cards{scroll-snap-type:x proximity;padding-bottom:10px}
.a-card{scroll-snap-align:start}
@media (max-width:640px){
  .dex-grid,.browse-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dex-card .t{font-size:12.5px}
  .dex-tools{flex-direction:column}
  .dex-tools input,.dex-tools .btn{width:100%}
  .binder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rev-stats{display:grid;grid-template-columns:1fr 1fr}
  .artist-grid{grid-template-columns:minmax(0,1fr)}
  .a-card{flex-basis:118px}
  .strip-card{width:126px}
  .insert-sheet{grid-template-columns:minmax(0,1fr)}
  .postlist .post-card,.pillars{grid-template-columns:minmax(0,1fr)}
  #fav-tray{padding:8px 13px;font-size:13px;bottom:12px;left:10px}
  h1{font-size:27px} h2{font-size:21px}
  .wrap{padding:0 13px}
}

/* ===== round 7: drone-build-tools preview cards ===== */
.tool-card{display:flex;gap:14px;align-items:center;background:rgba(13,16,13,.88);border:1px solid rgba(57,255,20,.35);border-radius:14px;padding:10px 14px 10px 10px;margin:20px 0 6px;text-decoration:none;color:var(--ink);transition:transform .25s,border-color .25s}
.tool-card:hover{transform:translateY(-3px);border-color:#39ff14}
.tool-card img{width:104px;height:104px;object-fit:cover;border-radius:10px;background:#fff;flex:0 0 auto}
.tc-body{display:flex;flex-direction:column;gap:3px}
.tc-name{font-family:Orbitron,sans-serif;font-weight:800;color:#fff;font-size:16.5px}
.tc-blurb{font-size:14px;color:#b9c4b9;line-height:1.45}
.tc-cta{color:#39ff14;font-weight:800;font-size:14px}
@media (max-width:640px){.tool-card img{width:84px;height:84px}.tc-name{font-size:15px}}

/* ===== round 8: card-tile alignment + artist controls ===== */
.dex-card{display:flex;flex-direction:column;height:100%}
.dex-card .di{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;flex:0 0 auto;background:#0a0c0a}
.dex-card .di img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dex-card .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:2.7em}
.tileart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;text-align:center}
.tileart .ta-g{font-family:Orbitron,sans-serif;font-size:10.5px;font-weight:900;letter-spacing:2.5px;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff}
.tileart .ta-n{font-weight:800;font-size:13.5px;line-height:1.3;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-YGO{background:linear-gradient(150deg,#5a3a12,#2a1a05)} .t-OP{background:linear-gradient(150deg,#8c1d18,#3d0a08)}
.t-DBZ{background:linear-gradient(150deg,#b35c09,#4a2603)} .t-MTG{background:linear-gradient(150deg,#3d4b5c,#161d26)}
.t-MLB{background:linear-gradient(150deg,#13294b,#081426)} .t-NBA{background:linear-gradient(150deg,#7a2210,#2e0d05)}
.t-NFL{background:linear-gradient(150deg,#4b2f16,#241505)} .t-MARV{background:linear-gradient(150deg,#7a1020,#2a0812)}
.t-PKMN{background:linear-gradient(150deg,#6b5a08,#2e2703)} .t-CPK,.t-OTHER{background:linear-gradient(150deg,#23401c,#0f1f0b)}
.artist-controls{position:sticky;top:64px;z-index:60;background:rgba(5,8,5,.94);backdrop-filter:blur(8px);padding:10px;border:1px solid rgba(57,255,20,.3);border-radius:14px;margin:0 0 16px}
.artist-controls .dex-tools{margin:6px 0 0}
.sortbar{display:flex;gap:9px;flex-wrap:wrap}
.sortbar button{font-family:Orbitron,sans-serif;font-weight:800;font-size:14.5px;padding:12px 20px;border-radius:99px;border:2px solid rgba(57,255,20,.55);background:rgba(13,16,13,.9);color:#e8f5e8;cursor:pointer;transition:transform .15s,background .15s}
.sortbar button:hover{transform:translateY(-2px)}
.sortbar button.on{background:#39ff14;color:#061206;border-color:#39ff14;box-shadow:0 0 18px rgba(57,255,20,.45)}
#artist-jump{font-size:16px;padding:13px;border-width:2px}
.a-cards{position:relative}
.a-nav{position:absolute;top:38%;z-index:6;width:40px;height:40px;border-radius:50%;border:2px solid #39ff14;background:rgba(5,8,5,.88);color:#39ff14;font-size:19px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center}
.a-nav:hover{background:#39ff14;color:#061206}
.a-nav.prev{left:-6px}.a-nav.next{right:-6px}
.artist{position:relative}
@media (max-width:640px){.a-nav{display:none}}

/* ==== round 9: artist picker + panels ==== */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.chip{font-family:Orbitron,sans-serif;font-size:12.5px;letter-spacing:.04em;padding:10px 14px;border-radius:999px;border:2px solid rgba(57,255,20,.45);background:rgba(10,14,10,.85);color:var(--ink);cursor:pointer}
.chip .cnt{color:var(--neon);font-size:11px;margin-left:6px}
.chip.on{background:var(--neon);color:#06130a;border-color:var(--neon);font-weight:800}
.chip.on .cnt{color:#06130a}
.artist-panel{margin-top:18px}
.artist-panel .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#artist-search{width:100%;max-width:520px;padding:13px 16px;font-size:16px;border-radius:12px;border:2px solid rgba(57,255,20,.5);background:rgba(10,14,10,.9);color:var(--ink)}
#artist-stage .pick-hint{color:#a9bfa9;font-size:15px;margin:16px 0}

/* ==== round 10: gen chips + progress (pkmn.gg-inspired) ==== */
.gen-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
.gen-prog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0 4px}
.gen-prog .gp{background:rgba(10,14,10,.85);border:1px solid rgba(57,255,20,.3);border-radius:12px;padding:9px 12px}
.gen-prog .gp b{font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.05em;color:var(--ink)}
.gen-prog .gp .bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);margin:7px 0 5px;overflow:hidden}
.gen-prog .gp .bar i{display:block;height:100%;background:var(--neon);border-radius:99px}
.gen-prog .gp span{font-size:11.5px;color:#a9bfa9}
#dex-showing{color:#a9bfa9;font-size:13.5px;margin:6px 0 0}