@font-face{font-family:'KiwiSoda';src:url('fonts/kiwisoda.woff2') format('woff2');font-display:swap}
@font-face{font-family:'PixelOperator';src:url('fonts/pixeloperator.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PixelOperator';src:url('fonts/pixeloperator-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Dogica';src:url('fonts/dogica.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Dogica';src:url('fonts/dogica-bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --lime:#BFFF00; --lime-dim:#8FBF00; --lime-glow:rgba(191,255,0,.35);
  --ink:#0B0D07; --ink2:#12150C; --panel:#171b0f; --line:#2b3318;
  --text:#E4EBD2; --muted:#9ca887;
  /* all pixel, none generic. display=KiwiSoda (bouncy/kooky, matches the ghosts)
     body=Pixel Operator (UI-grade legible pixel) mono=Dogica (chunky terminal) */
  --disp:'KiwiSoda',monospace; --mono:'Dogica',monospace;
  --body:'PixelOperator','Dogica',monospace; --edit:'PixelOperator','Dogica',monospace;
  /* small UI/labels/buttons: KiwiSoda turns to mush under ~14px, use Pixel Operator */
  --ui:'PixelOperator','Dogica',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* smoothing OFF — pixel fonts must render with hard stair-step edges, not soft curves */
body{background:var(--ink);color:var(--text);font-family:var(--body);overflow-x:hidden;
  -webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;text-rendering:optimizeSpeed}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 4px);opacity:.5}

/* NAV */
#nav{position:sticky;top:0;z-index:500;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 24px;background:rgba(11,13,7,.88);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.brand{font-family:var(--disp);font-size:15px;color:var(--lime);letter-spacing:1px;text-shadow:2px 2px 0 #000}
.nav-links{display:flex;gap:22px}
.nav-links a{font-family:var(--mono);font-size:20px;color:var(--muted);letter-spacing:1px;transition:color .18s}
.nav-links a:hover{color:var(--lime)}
.nav-links a.on{color:var(--lime);position:relative}
.nav-links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--lime)}
.nav-cta{font-family:var(--ui);font-weight:700;font-size:9px;padding:9px 14px;background:var(--lime);color:#0B0D07;
  border:2px solid #000;box-shadow:3px 3px 0 #000;letter-spacing:1px;transition:transform .12s}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}

/* ═══ HERO = ART STAGE (layered depth) ═══ */
.stage{position:relative;min-height:min(92vh,820px);overflow:hidden;
  border-bottom:2px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:120px 24px 152px;isolation:isolate}

/* L1 — far: bokeh haze, the out-of-focus lime sky */
.stage-bokeh{position:absolute;inset:-10%;z-index:0;pointer-events:none;filter:blur(58px);opacity:.5;
  background:
    radial-gradient(circle 190px at 18% 30%,rgba(191,255,0,.30),transparent 65%),
    radial-gradient(circle 150px at 82% 24%,rgba(143,191,0,.26),transparent 65%),
    radial-gradient(circle 220px at 62% 74%,rgba(191,255,0,.16),transparent 68%),
    radial-gradient(circle 120px at 34% 82%,rgba(120,180,0,.20),transparent 66%)}
/* L2 — dust particles (canvas) */
#dust{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.62}
/* L3 — mist floor, lifts the cast off the void */
.stage-mist{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(191,255,0,.13),rgba(191,255,0,.04) 42%,transparent);
  mask-image:radial-gradient(ellipse 80% 100% at 50% 100%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 100%,#000,transparent 76%)}
/* L5 — light sweep across the whole stage */
.stage-sweep{position:absolute;top:-40%;left:-60%;width:52%;height:190%;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(191,255,0,.09) 44%,rgba(228,235,210,.13) 50%,rgba(191,255,0,.09) 56%,transparent);
  transform:rotate(14deg);animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,100%{left:-60%;opacity:0}45%{opacity:1}60%{left:118%;opacity:0}}

/* L4 — THE CAST: pyramid staging, hero front-center */
.cast{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1180px,102vw);height:40%;z-index:4;pointer-events:none}
.cast .c{position:absolute;bottom:0;image-rendering:pixelated;
  transform-origin:50% 100%;animation:bob 6s ease-in-out infinite}
/* back row — smallest, dimmest, pushed behind */
.c-b1{left:1%;  width:15%;filter:brightness(.42) blur(1.6px);opacity:.5; animation-delay:-.4s}
.c-b2{right:2%; width:15%;filter:brightness(.42) blur(1.6px);opacity:.5; animation-delay:-2.9s}
/* mid row */
.c-m1{left:11%; width:21%;filter:brightness(.62) blur(.6px);opacity:.72;animation-delay:-1.5s}
.c-m2{right:11%;width:21%;filter:brightness(.62) blur(.6px);opacity:.72;animation-delay:-3.6s}
/* front flanks — sharp, rim-lit */
.c-f1{left:20%; width:29%;filter:brightness(.9) drop-shadow(-6px 0 12px rgba(191,255,0,.32));opacity:.95;animation-delay:-2.2s}
.c-f2{right:20%;width:29%;filter:brightness(.9) drop-shadow(6px 0 12px rgba(191,255,0,.32)); opacity:.95;animation-delay:-4.7s}
/* HERO — biggest, front-center, full rim-light */
.cast .c-hero{left:50%;width:40%;z-index:3;opacity:1;margin-left:0;
  filter:drop-shadow(0 0 0 #0B0D07) drop-shadow(2px 0 0 #0B0D07) drop-shadow(-2px 0 0 #0B0D07)
         drop-shadow(0 2px 0 #0B0D07) drop-shadow(0 -2px 0 #0B0D07)
         drop-shadow(0 0 34px rgba(191,255,0,.62)) drop-shadow(0 -3px 0 rgba(228,235,210,.45))
         brightness(1.06);
  animation:bobHero 5.4s ease-in-out infinite}
/* spotlight pool behind hero so it reads against the void */
.cast::before{content:'';position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:46%;height:64%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 78%,rgba(191,255,0,.24),rgba(191,255,0,.06) 48%,transparent 72%);
  filter:blur(6px)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bobHero{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-13px)}}

/* L6 — TYPE, above the cast, with its own scrim for legibility */
.stage-type{position:relative;z-index:6;max-width:820px;margin:0 auto;text-align:center;
  padding-bottom:26px}
.stage-type::before{content:'';position:absolute;inset:-40px -80px -180px;z-index:-1;
  background:radial-gradient(ellipse 70% 100% at 50% 38%,rgba(11,13,7,.94) 0%,rgba(11,13,7,.82) 40%,rgba(11,13,7,.5) 62%,transparent 80%)}
/* tier 3 — mono lore-code */
.lore{font-family:var(--mono);font-size:clamp(13px,1.15vw,16px);letter-spacing:2px;color:var(--lime-dim);
  margin-bottom:14px;line-height:1.5}
.live-dot{display:inline-block;width:7px;height:7px;background:var(--lime);margin:0 2px 0 4px;
  animation:blink 1.4s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
/* tier 1 — display, chromatic offset */
.stage-title{font-family:var(--disp);font-size:clamp(46px,11vw,132px);line-height:.94;color:var(--lime);
  letter-spacing:2px;margin-bottom:16px;position:relative;
  text-shadow:5px 5px 0 #000,0 0 52px var(--lime-glow)}
.stage-title::after{content:attr(data-txt);position:absolute;inset:0;color:transparent;
  -webkit-text-stroke:1px rgba(228,235,210,.34);text-shadow:none;transform:translate(-3px,-3px);pointer-events:none}
/* tier 2 — editorial pixel (Pixel Operator) */
.stage-sub{font-family:var(--edit);font-weight:400;
  font-size:clamp(16px,2vw,22px);line-height:1.6;color:var(--text);letter-spacing:.3px;
  max-width:640px;margin:0 auto 28px;opacity:.94}
.stage-sub em{color:var(--lime);font-style:normal;font-weight:700}
.stage-cta{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* opaque plate behind the CTA band so cast pixels can't peek between buttons */
.stage-cta::before{content:'';position:absolute;left:50%;top:-18px;bottom:-22px;
  width:calc(100% + 120px);transform:translateX(-50%);z-index:-1;
  background:var(--ink);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* bottom rail */
.stage-rail{position:relative;z-index:6;display:inline-flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;margin:6px auto 0;padding:11px 26px;font-family:var(--mono);font-size:19px;
  letter-spacing:2px;color:var(--muted);border:1px solid var(--line);border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 6px var(--ink),0 8px 24px rgba(0,0,0,.6)}
.stage-rail b{font-family:var(--ui);font-weight:700;font-size:10px;color:var(--text);letter-spacing:1px;margin-left:5px}
.stage-rail i{width:2px;height:15px;background:var(--line);display:inline-block}

.btn-solid,.btn-ghost{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:1px;padding:15px 22px;border:2px solid #000;transition:transform .12s}
.btn-solid{background:var(--lime);color:#0B0D07;box-shadow:4px 4px 0 #000}
.btn-ghost{background:transparent;color:var(--lime);border-color:var(--lime);box-shadow:4px 4px 0 rgba(191,255,0,.18)}
.btn-solid:hover,.btn-ghost:hover{transform:translate(-2px,-2px)}

/* MARQUEE */
.hero-marquee{overflow:hidden;border-top:2px solid var(--line);background:var(--ink2);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;gap:8px;width:max-content;padding:12px 0;animation:marquee 78s linear infinite}
.hero-marquee:hover .marq-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-track img{width:96px;height:96px;border:2px solid var(--line);image-rendering:pixelated;background:var(--panel)}

/* SECTIONS */
.sec{max-width:1240px;margin:0 auto;padding:64px 24px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{font-family:var(--disp);font-size:clamp(16px,2.4vw,26px);color:var(--text);letter-spacing:1px;
  padding-left:14px;border-left:5px solid var(--lime)}
.sec-note{font-family:var(--mono);font-size:19px;color:var(--muted);margin-bottom:26px;max-width:760px;line-height:1.45}

/* JUMP + CHECKER INPUTS */
.jump,.checker{display:flex;gap:0}
.jump input,.checker input{font-family:var(--mono);font-size:19px;background:var(--panel);color:var(--text);
  border:2px solid var(--line);border-right:none;padding:11px 14px;width:170px;outline:none}
.jump input:focus,.checker input:focus{border-color:var(--lime)}
.jump button,.checker button{font-family:var(--ui);font-weight:700;font-size:10px;background:var(--lime);color:#0B0D07;
  border:2px solid #000;padding:0 18px;letter-spacing:1px;cursor:pointer}
.checker{margin-bottom:26px}
.checker input{width:230px}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cell{position:relative;border:2px solid var(--line);border-radius:0;background:var(--panel);
  aspect-ratio:1;overflow:hidden;cursor:pointer;transition:border-color .16s,transform .16s}
.cell:hover{border-color:var(--lime);transform:scale(1.03);z-index:2}
.cell img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:0;transition:opacity .35s}
.cell img.on{opacity:1}
#sentinel{height:24px}

/* RARITY */
.tier-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.tier-chip{font-family:var(--mono);font-size:18px;padding:9px 15px;border:2px solid var(--line);
  background:var(--panel);cursor:pointer;transition:border-color .16s,color .16s;letter-spacing:1px}
.tier-chip:hover,.tier-chip.on{border-color:var(--lime);color:var(--lime)}
.tier-chip b{font-family:var(--body);font-size:13px;color:var(--muted);margin-left:7px;font-weight:500}
.grails{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.grail{border:2px solid var(--line);background:var(--panel);cursor:pointer;transition:border-color .16s}
.grail:hover{border-color:var(--lime)}
.grail img{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated}
.grail-meta{font-family:var(--mono);font-size:16px;padding:7px 9px;color:var(--muted);border-top:2px solid var(--line);
  display:flex;justify-content:space-between;letter-spacing:1px}
.grail-meta b{color:var(--lime);font-weight:400}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:34px;align-items:stretch}
.about-art{border:2px solid var(--line);background:var(--panel);overflow:hidden;display:flex;align-items:center}
.about-art img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:opacity .45s}
.about-copy{display:flex;flex-direction:column;justify-content:center;gap:16px}
.about-copy p{font-size:16px;line-height:1.75;color:var(--muted)}
.about-copy strong{color:var(--text)}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.about-facts div{font-family:var(--mono);font-size:18px;color:var(--text);border-left:3px solid var(--lime);padding-left:12px;line-height:1.35}
.about-facts span{display:block;font-family:var(--ui);font-weight:700;font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:5px}

/* CHECK RESULT */
#checkResult{min-height:10px}
.cr-card{display:flex;gap:22px;border:2px solid var(--line);background:var(--panel);padding:18px;flex-wrap:wrap}
.cr-card img{width:200px;height:200px;object-fit:cover;image-rendering:pixelated;border:2px solid var(--line)}
.cr-body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.cr-name{font-family:var(--disp);font-size:16px;color:var(--lime)}
.cr-rank{font-family:var(--mono);font-size:20px;color:var(--text);letter-spacing:1px}
.cr-traits{display:flex;flex-wrap:wrap;gap:8px}
.tchip{font-family:var(--mono);font-size:17px;padding:6px 11px;border:2px solid var(--line);color:var(--text);letter-spacing:1px}
.tchip span{color:var(--muted);margin-right:6px}
.cr-err{font-family:var(--mono);font-size:20px;color:#ff6b6b;letter-spacing:1px}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(5,6,3,.9);z-index:9000;display:none;
  align-items:center;justify-content:center;padding:24px}
.modal-overlay.active{display:flex}
.modal-card{position:relative;background:var(--panel);border:2px solid var(--lime);box-shadow:0 0 60px rgba(191,255,0,.14);
  max-width:440px;width:100%}
.modal-close{position:absolute;top:-2px;right:-2px;width:38px;height:38px;background:var(--lime);color:#0B0D07;
  border:2px solid #000;font-size:16px;cursor:pointer;font-family:var(--body);z-index:2}
.modal-img-wrap{position:relative;background:var(--ink2)}
.modal-img-wrap img{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated}
.modal-info{padding:18px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:12px}
.modal-name{font-family:var(--disp);font-size:15px;color:var(--lime)}
.modal-rank{font-family:var(--mono);font-size:20px;color:var(--text);letter-spacing:1px}
.modal-traits{display:flex;flex-wrap:wrap;gap:8px}

/* FOOTER */
footer{border-top:2px solid var(--lime);padding:36px 24px 30px;text-align:center;margin-top:20px;background:var(--ink2)}
.foot-links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.foot-links a{font-family:var(--mono);font-size:20px;color:var(--lime);letter-spacing:1px;transition:color .18s}
.foot-links a:hover{color:var(--text)}
.foot-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.foot-pills span{font-family:var(--ui);font-weight:700;font-size:10px;padding:8px 12px;border:2px solid var(--line);color:var(--muted);letter-spacing:1px}
.foot-copy{font-family:var(--mono);font-size:17px;color:var(--muted);letter-spacing:1px}

@media(max-width:980px){
  .grid,.grails{grid-template-columns:repeat(4,1fr)}
  .about-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(max-width:980px){
  /* stage: drop the dim back row, tighten the pyramid */
  .c-b1,.c-b2{display:none}
  .c-m1{left:2%;width:24%} .c-m2{right:2%;width:24%}
  .c-f1{left:12%;width:31%} .c-f2{right:12%;width:31%}
  .c-hero{width:46%}
  .stage{min-height:min(92vh,760px);padding-top:92px}
  .cast{height:70%}
}
@media(max-width:640px){
  .grid,.grails{grid-template-columns:repeat(3,1fr)}
  .about-facts{grid-template-columns:1fr}
  .sec{padding:44px 16px}
  /* stage: hero + 2 flanks only */
  .c-m1,.c-m2{display:none}
  .c-f1{left:0;width:34%;opacity:.8} .c-f2{right:0;width:34%;opacity:.8}
  .c-hero{width:56%}
  .stage{min-height:min(94vh,700px);padding:78px 16px 0}
  .cast{height:62%}
  .stage-type::before{inset:-30px -24px 0}
  .stage-sweep{animation-duration:11s}
}
@media(max-width:420px){
  .grid,.grails{grid-template-columns:repeat(2,1fr)}
  .c-f1,.c-f2{opacity:.62;filter:brightness(.6) blur(1px)}
  .c-hero{width:64%}
  .stage-rail{gap:12px;font-size:17px}
  .stage-rail i{display:none}
}
/* motion-safety */
@media(prefers-reduced-motion:reduce){
  .cast .c,.c-hero{animation:none}
  .stage-sweep{animation:none;opacity:.35;left:20%}
  .marq-track{animation:none}
  .live-dot{animation:none}
  html{scroll-behavior:auto}
}

/* ═══════════ MULTI-PAGE COMPONENTS ═══════════ */

/* page header (non-landing pages) */
.page-head{position:relative;border-bottom:2px solid var(--line);background:var(--ink2);
  padding:118px 24px 40px;overflow:hidden}
.page-head::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(191,255,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(191,255,0,.05) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 120% at 20% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 120% at 20% 0%,#000,transparent 70%)}
.page-head-inner{position:relative;max-width:1240px;margin:0 auto}
.page-title{font-family:var(--disp);font-size:clamp(26px,5.5vw,58px);line-height:1;color:var(--lime);
  letter-spacing:1px;margin:8px 0 14px;position:relative;display:inline-block;
  text-shadow:4px 4px 0 #000,0 0 34px var(--lime-glow)}
.page-title::after{content:attr(data-txt);position:absolute;inset:0;color:transparent;
  -webkit-text-stroke:1px rgba(228,235,210,.3);text-shadow:none;transform:translate(-2px,-2px);pointer-events:none}
.page-sub{font-family:var(--body);font-size:clamp(15px,1.7vw,19px);line-height:1.6;color:var(--muted);max-width:680px}
.page-sub em{color:var(--lime);font-style:normal}

/* landing doors */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.door{position:relative;border:2px solid var(--line);background:var(--panel);padding:26px 24px 20px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .16s,transform .16s,box-shadow .16s;overflow:hidden}
.door:hover{border-color:var(--lime);transform:translate(-3px,-3px);box-shadow:6px 6px 0 #000}
.door-n{position:absolute;top:12px;right:16px;font-family:var(--disp);font-size:26px;color:var(--line);transition:color .16s}
.door:hover .door-n{color:var(--lime-dim)}
.door h3{font-family:var(--disp);font-size:15px;color:var(--lime);letter-spacing:1px}
.door p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--muted);flex:1}
.door-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;
  padding-top:14px;border-top:2px solid var(--line);font-family:var(--mono);font-size:17px;color:var(--muted)}
.door-meta b{font-family:var(--ui);font-weight:700;font-size:10px;color:var(--text);letter-spacing:1px}

/* gallery bar + count + cell id */
.gallery-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.gallery-bar .tier-row{margin-bottom:0;flex:1}
.grid-count{font-family:var(--mono);font-size:18px;color:var(--muted);letter-spacing:1px;margin-bottom:18px}
.cell{position:relative}
.cell-id{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:14px;letter-spacing:1px;
  color:var(--text);background:rgba(11,13,7,.82);padding:2px 7px;opacity:0;transition:opacity .16s}
.cell:hover .cell-id{opacity:1}

/* rarity — tier bars */
.tier-bars{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tbar{border:2px solid var(--line);background:var(--panel);padding:15px 16px;display:block;transition:border-color .16s}
.tbar:hover{border-color:var(--lime)}
.tbar-top{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:700;font-size:11px;color:var(--text);letter-spacing:1px}
.tbar-dot{width:11px;height:11px;display:inline-block}
.tbar-top b{margin-left:auto;font-family:var(--mono);font-size:19px;color:var(--text);font-weight:400}
.tbar-top i{font-family:var(--mono);font-size:17px;color:var(--muted);font-style:normal;min-width:52px;text-align:right}
.tbar-track{height:8px;background:var(--ink);border:1px solid var(--line);margin-top:11px;overflow:hidden}
.tbar-fill{height:100%;transition:width .6s ease}

/* rarity — trait table */
.trait-table{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tt-col{border:2px solid var(--line);background:var(--panel)}
.tt-head{font-family:var(--ui);font-weight:700;font-size:12px;color:var(--lime);letter-spacing:1px;
  padding:13px 15px;border-bottom:2px solid var(--line);display:flex;justify-content:space-between}
.tt-head b{color:var(--muted);font-weight:400}
.tt-rows{max-height:340px;overflow-y:auto}
.tt-row{display:grid;grid-template-columns:1.4fr 1fr auto auto;align-items:center;gap:10px;
  padding:8px 15px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:17px}
.tt-row:last-child{border-bottom:none}
.tt-val{color:var(--text);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-bar{height:6px;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.tt-bar i{display:block;height:100%;background:var(--lime);opacity:.7}
.tt-pct{color:var(--lime);min-width:52px;text-align:right}
.tt-n{color:var(--muted);min-width:40px;text-align:right}
.tt-rows::-webkit-scrollbar{width:8px}
.tt-rows::-webkit-scrollbar-thumb{background:var(--line)}

/* grail meta tweak */
.grail-meta b{font-size:14px}

/* about — steps */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.step{position:relative;border:2px solid var(--line);background:var(--panel);padding:22px 22px 20px}
.step-n{font-family:var(--disp);font-size:22px;color:var(--lime-dim);margin-bottom:12px}
.step h3{font-family:var(--ui);font-weight:700;font-size:12px;color:var(--lime);letter-spacing:1px;margin-bottom:10px}
.step p{font-family:var(--body);font-size:15px;line-height:1.65;color:var(--muted)}
.step code{font-family:var(--mono);font-size:17px;color:var(--text);background:var(--ink);padding:1px 6px;border:1px solid var(--line)}

/* about — why grid */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.why{border-left:3px solid var(--lime);background:var(--panel);padding:18px 20px}
.why b{font-family:var(--ui);font-weight:700;font-size:12px;color:var(--text);letter-spacing:1px;display:block;margin-bottom:10px}
.why p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--muted)}

/* about — stats */
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.astat{border:2px solid var(--line);background:var(--panel);padding:22px 18px;text-align:center}
.astat b{font-family:var(--disp);font-size:clamp(16px,2.4vw,24px);color:var(--lime);display:block;margin-bottom:10px}
.astat span{font-family:var(--body);font-size:14px;color:var(--muted);line-height:1.4}

/* checker — quick row + detail card */
.quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.quick-label{font-family:var(--ui);font-weight:700;font-size:10px;color:var(--muted);letter-spacing:1px}
.quick-row{display:flex;gap:8px;flex-wrap:wrap}
.quick-id,.quick-rand{font-family:var(--mono);font-size:17px;background:var(--panel);color:var(--text);
  border:2px solid var(--line);padding:6px 13px;cursor:pointer;letter-spacing:1px;transition:border-color .16s,color .16s}
.quick-id:hover,.quick-rand:hover{border-color:var(--lime);color:var(--lime)}
.quick-rand{color:var(--lime);border-color:var(--lime-dim)}
.cr-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cr-tier{font-family:var(--ui);font-weight:700;font-size:11px;padding:6px 11px;border:2px solid;letter-spacing:1px}
.cr-rank,.cr-top,.cr-score{font-family:var(--mono);font-size:17px;color:var(--text);letter-spacing:1px;
  padding:5px 10px;border:2px solid var(--line)}
.cr-top{color:var(--lime)}
.cr-pos{margin:4px 0 4px}
.cr-pos-track{position:relative;height:8px;background:linear-gradient(90deg,var(--lime),var(--line));border:1px solid var(--line)}
.cr-pos-track i{position:absolute;top:50%;width:14px;height:14px;background:var(--text);border:2px solid #000;
  transform:translate(-50%,-50%)}
.cr-pos-ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;color:var(--muted);margin-top:6px}
.ct-table{display:flex;flex-direction:column;gap:0;border:2px solid var(--line)}
.ct-row{display:grid;grid-template-columns:1fr 1.2fr 1fr auto;align-items:center;gap:12px;
  padding:9px 13px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:17px}
.ct-row:last-child{border-bottom:none}
.ct-cat{color:var(--muted);letter-spacing:1px}
.ct-cat i{font-style:normal;font-size:14px;color:var(--lime-dim);display:block}
.ct-val{color:var(--text)}
.ct-bar{height:6px;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.ct-bar i{display:block;height:100%;background:var(--lime);opacity:.7}
.ct-pct{color:var(--lime);min-width:52px;text-align:right}
.cr-link{display:inline-block;margin-top:4px;font-size:9px}

/* responsive: collapse the 2-col page grids */
@media(max-width:820px){
  .doors,.tier-bars,.trait-table,.steps,.why-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cr-card{flex-direction:column}
  .cr-card img{width:100%;height:auto}
  .ct-row{grid-template-columns:1fr 1fr auto;gap:8px}
  .ct-bar{display:none}
}

/* X / TWITTER LINKS */
.nav-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:2px solid var(--line);color:var(--text);transition:border-color .16s,color .16s,transform .12s;margin-right:2px}
.nav-x svg{width:15px;height:15px;fill:currentColor}
.nav-x:hover{border-color:var(--lime);color:var(--lime);transform:translate(-1px,-1px)}
.foot-x{font-family:var(--mono);font-size:20px;color:var(--lime);letter-spacing:1px;transition:color .18s}
.foot-x:hover{color:var(--text)}
@media(max-width:560px){ .nav-x{width:30px;height:30px} }

/* nav right cluster: icons + CTA sit together, not spread by space-between */
.nav-right{display:flex;align-items:center;gap:10px}

/* eyebrow: separator is a real flex ITEM, so when the row wraps the bullet can
   never become a line-leading orphan — it just wraps away with its own slot.
   Narrow screens drop to one segment per line and hide the separators. */
.lore{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;line-height:1.5}
.lore-seg{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.lore-sep{color:var(--lime-dim);opacity:.85;user-select:none}
/* the 3 segments fit one line up to ~1180px; below that stack them and drop the
   separators entirely, so no bullet can ever dangle at a line end or start */
@media(max-width:1180px){.lore{flex-direction:column;gap:6px}.lore-sep{display:none}}

/* buttons: repeated digits (5555) blur together at 10px, open the tracking */
.btn-solid,.btn-ghost{letter-spacing:2px}
/* micro-caps labels were borderline against the dark panel */
.stage-rail span,.about-facts span{color:#b3c096}