/* 30PX CATS — Y2K pop-pastel theme (shared across all pages) */
:root{
  --cream:#fff4fb; --white:#ffffff;
  --ink:#4b2a66; --ink-soft:#9a7ab8; --line:#f0d9ee;
  --pink:#ff9ad4; --pink-deep:#ff5cb4;
  --blue:#93d4ff; --blue-deep:#4fabf5;
  --lav:#c6b2ff; --lav-deep:#9a7dff;
  --mint:#9ff0cf; --butter:#ffe488;
  --rarity-common:#7fb5d6; --rarity-rare:#4fabf5; --rarity-epic:#9a7dff; --rarity-legendary:#ff9f1c;
  --shadow:6px 7px 0 rgba(154,125,255,.22);
  --shadow-pink:5px 6px 0 rgba(255,92,180,.28);
  --r:22px; --r-lg:34px;
  /* back-compat aliases for inline styles left in the pages */
  --text:#4b2a66; --panel:#ffffff; --acid:#ff5cb4;
}
*{box-sizing:border-box;}
html,body{min-height:100%;}
body{
  margin:0; color:var(--ink);
  font-family:"Quicksand",system-ui,sans-serif; font-weight:500; font-size:15px; line-height:1.6;
  background:
    radial-gradient(42vw 42vw at 8% -6%, #ffd6ef 0%, transparent 60%),
    radial-gradient(40vw 40vw at 102% 8%, #cfe6ff 0%, transparent 58%),
    radial-gradient(46vw 46vw at 50% 116%, #e3d6ff 0%, transparent 60%),
    radial-gradient(34vw 34vw at 88% 92%, #d2fff0 0%, transparent 60%),
    var(--cream);
  background-attachment:fixed;
}
/* twinkle layer */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.5px, transparent 1.6px);
  background-size:46px 46px; background-position:0 0;
}
a{color:inherit;text-decoration:none;}
button,input,select{font:inherit;color:inherit;}
button{cursor:pointer;}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;}
.wrap{width:min(1240px,calc(100% - 34px));margin:0 auto;position:relative;z-index:1;}

/* ── nav ── */
.nav{
  position:sticky;top:14px;z-index:50;margin:14px auto 0;width:min(1240px,calc(100% - 34px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 14px 10px 16px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border:2px solid #fff;box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:11px;}
.brand .ico{
  width:34px;height:34px;flex:none;border-radius:9px;
  background:linear-gradient(135deg,var(--pink),var(--lav));
  -webkit-mask:var(--catmask);mask:var(--catmask);
}
:root{--catmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 25 L18 25 L18 0 L39 19 L61 19 L82 0 L82 25 L100 25 L100 100 L0 100 Z'/%3E%3C/svg%3E") center/contain no-repeat;}
.brand b{font-family:"Bagel Fat One",cursive;font-weight:400;font-size:18px;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--pink-deep),var(--lav-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand span{display:block;font-size:9px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.22em;font-weight:700;}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;}
.nav-links a{
  padding:9px 15px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);border-radius:999px;transition:.15s;
}
.nav-links a:hover{color:var(--ink);background:#fdeef9;}
.nav-links a.active{color:#fff;background:linear-gradient(120deg,var(--pink),var(--lav-deep));box-shadow:var(--shadow-pink);}

/* ── generic ── */
section{padding:46px 0;position:relative;z-index:1;}
h1{font-family:"Bagel Fat One",cursive;font-weight:400;font-size:clamp(40px,7.5vw,82px);line-height:.98;margin:0 0 18px;
  color:var(--ink);text-shadow:3px 4px 0 #fff,6px 8px 0 rgba(255,154,212,.4);}
h2{font-family:"Bagel Fat One",cursive;font-weight:400;font-size:22px;margin:0 0 18px;color:var(--lav-deep);}
h2::before{content:"✦ ";color:var(--pink-deep);}
h3{font-family:"Bagel Fat One",cursive;font-weight:400;margin:0 0 8px;font-size:18px;color:var(--ink);}
p{color:var(--ink);} .muted{color:var(--ink-soft);} .acid{color:var(--pink-deep);font-weight:700;}
.tag{display:inline-block;padding:7px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border-radius:999px;background:#fff;border:2px solid var(--lav);color:var(--lav-deep);transform:rotate(-2deg);box-shadow:var(--shadow);}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;
  border:2px solid #fff;background:#fff;color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.03em;
  box-shadow:var(--shadow);transition:transform .1s,box-shadow .1s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:9px 11px 0 rgba(154,125,255,.28);}
.btn:active{transform:translate(2px,2px);box-shadow:2px 3px 0 rgba(154,125,255,.25);}
.btn.primary{background:linear-gradient(120deg,var(--pink),var(--lav-deep));color:#fff;border-color:#fff;box-shadow:var(--shadow-pink);}
.btn.primary:hover{box-shadow:9px 11px 0 rgba(255,92,180,.32);}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:54px 0 46px;}
.hero .lede{color:var(--ink-soft);font-size:17px;font-weight:600;max-width:46ch;margin:0 0 26px;}
.cta{display:flex;gap:13px;flex-wrap:wrap;}
.hero-art{display:grid;place-items:center;}
.hero-art .frame{
  padding:24px;border-radius:var(--r-lg);background:#fff;border:3px solid #fff;
  box-shadow:10px 12px 0 rgba(154,125,255,.22);transform:rotate(2deg);position:relative;
}
.hero-art .frame::after{content:"✿";position:absolute;top:-16px;right:-12px;font-size:34px;color:var(--pink-deep);transform:rotate(12deg);}
.hero-art .frame::before{content:"★";position:absolute;bottom:-14px;left:-14px;font-size:26px;color:var(--butter);}
.hero-art canvas{width:330px;height:330px;display:block;border-radius:16px;background:#fff;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px;}
.stats div{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);}
.stats div:nth-child(2){background:#eaf5ff;border-color:#cfe6ff;}
.stats div:nth-child(3){background:#f3edff;border-color:#e0d4ff;}
.stats div:nth-child(4){background:#fff0f8;border-color:#ffd6ef;}
.stats b{display:block;font-family:"Bagel Fat One",cursive;font-weight:400;font-size:28px;color:var(--lav-deep);}
.stats span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-weight:700;}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.card{border:2px solid var(--line);background:#fff;border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);transition:transform .12s;}
.card:hover{transform:translateY(-4px) rotate(-1deg);}
.card:nth-child(2){background:#f3edff;} .card:nth-child(3){background:#eafff5;}
.card .num{font-family:"Bagel Fat One",cursive;color:var(--pink-deep);font-size:20px;}

/* ── generator ── */
.gen{display:grid;grid-template-columns:minmax(340px,1fr) 380px;gap:18px;margin:22px 0 40px;}
.gen .stage,.gen .panel{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.gen .stage{display:grid;grid-template-rows:1fr auto;overflow:hidden;}
.stage .art{display:grid;place-items:center;padding:clamp(20px,4vw,48px);min-height:480px;
  background:radial-gradient(circle at 50% 40%,#fff0f8,#eef4ff);}
.stage .art canvas{width:min(420px,68vw);height:min(420px,68vw);border-radius:20px;background:#fff;box-shadow:6px 7px 0 rgba(154,125,255,.18);}
.stage .bar{display:flex;gap:9px;flex-wrap:wrap;padding:16px;border-top:2px solid var(--line);}
.panel{padding:22px;overflow:auto;}
.panel .head{display:flex;justify-content:space-between;align-items:baseline;}
.panel .head .id{font-family:"Bagel Fat One",cursive;font-size:24px;color:var(--ink);}
.panel .head .score{font-family:"Bagel Fat One",cursive;font-size:24px;color:var(--lav-deep);}
.panel .sub{color:var(--ink-soft);font-size:12px;font-weight:600;margin-bottom:16px;}
.seedrow{display:flex;gap:8px;}
.seedrow input{flex:1;min-width:0;padding:11px 14px;border:2px solid var(--lav);border-radius:999px;background:#fbf4ff;font-weight:600;}
.seedrow input:focus{outline:none;border-color:var(--pink-deep);}
.trait{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:10px;margin-bottom:9px;}
.trait label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.trait select{padding:9px 11px;border:2px solid var(--line);border-radius:13px;background:#fbf4ff;min-width:0;font-weight:600;}
.trait .rar{font-size:11px;font-weight:700;color:var(--lav-deep);justify-self:end;}
.metalist{margin-top:16px;}
.meta-row{display:grid;grid-template-columns:80px 1fr auto;gap:8px;padding:8px 0;border-bottom:1.5px dashed var(--line);font-size:13px;font-weight:600;}
.meta-row .t{color:var(--ink-soft);text-transform:uppercase;font-size:10px;letter-spacing:.06em;font-weight:700;}

/* ── gallery ── */
.gal-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px;}
.gal .cell{border:2px solid var(--line);background:#fff;border-radius:var(--r);padding:11px;text-align:center;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;cursor:pointer;}
.gal .cell:nth-child(3n){background:#f3edff;} .gal .cell:nth-child(3n+1){background:#fff0f8;}
.gal .cell:hover{transform:translate(-2px,-3px) rotate(-1.5deg);box-shadow:9px 12px 0 rgba(255,92,180,.24);}
.gal .cell canvas{width:100%;aspect-ratio:1;display:block;background:#fff;border-radius:14px;}
.gal .cell .lab{margin-top:9px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.gal .cell .lab .r{font-size:10px;text-transform:uppercase;}

/* ── traits ── */
.tr-sec{margin-bottom:34px;}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;}
.tr-card{border:2px solid var(--line);background:#fff;border-radius:18px;padding:10px;text-align:center;box-shadow:var(--shadow);}
.tr-card canvas{width:100%;aspect-ratio:1;background:#fff;border-radius:12px;}
.tr-card .n{margin-top:8px;font-size:12px;font-weight:700;}
.tr-card .c{font-size:10px;color:var(--ink-soft);font-weight:700;}

/* ── about ── */
.prose{max-width:740px;}
.prose p{color:var(--ink-soft);font-weight:600;margin:0 0 16px;}
.prose strong{color:var(--ink);}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0;}
.tier{border:2px solid var(--line);border-radius:var(--r);padding:16px;background:#fff;box-shadow:var(--shadow);}
.tier b{display:block;font-family:"Bagel Fat One",cursive;font-weight:400;font-size:15px;}

footer{border-top:2px dashed var(--line);margin-top:20px;padding:26px 0;color:var(--ink-soft);font-size:12px;font-weight:700;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}

@media(max-width:900px){
  .hero,.gen{grid-template-columns:1fr;}
  .stats,.feature-grid,.tiers{grid-template-columns:repeat(2,1fr);}
  .nav{flex-wrap:wrap;border-radius:24px;}
}

/* ════════════════ BOLD Y2K LAYER ════════════════ */
:root{
  --hot:#ff2d9b; --cyan:#34e3ff; --lime:#c6ff5e;
  --holo:linear-gradient(100deg,#ff8fd0,#9be7ff,#c6b0ff,#a8ffd6,#ffe27a,#ff8fd0);
  --chrome:linear-gradient(180deg,#ffffff,#dfecff 38%,#b9c8e8 50%,#eaf2ff 64%,#ffffff);
}
@keyframes holo{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes bgdrift{0%,100%{background-position:0 0,0 0,0 0,0 0,0 0}50%{background-position:3% -2%,-3% 2%,2% 3%,-2% -3%,0 0}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-7px) rotate(var(--rot,0deg))}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* star cursor */
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 2l2.7 7.6L23 12l-7.3 2.4L13 22l-2.7-7.6L3 12l7.3-2.4z' fill='%23ff5cb4' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 13 13, auto;}
a,button,select,input,canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 26 26'%3E%3Cpath d='M13 2l2.7 7.6L23 12l-7.3 2.4L13 22l-2.7-7.6L3 12l7.3-2.4z' fill='%2334e3ff' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 13 13, pointer;}

/* drifting gradient bg + floating stickers */
body{animation:bgdrift 18s ease-in-out infinite;}
body::after{
  content:"★ ✦ ♥ ⋆ ✿"; position:fixed; top:90px; right:18px; z-index:0; pointer-events:none;
  font-size:20px; letter-spacing:18px; color:var(--hot); opacity:.35;
  text-shadow:0 0 8px #fff; animation:twinkle 3.4s ease-in-out infinite;
}

/* holographic chrome wordmark */
.brand b{
  background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:holo 6s linear infinite;
}
.brand .ico{position:relative;animation:bob 4s ease-in-out infinite;}
.brand .ico::after{ /* lil bow sticker */
  content:"🎀";position:absolute;top:-9px;right:-7px;font-size:13px;-webkit-text-fill-color:initial;}

/* nav active = holographic pill */
.nav-links a.active{background:var(--holo);background-size:200% 100%;animation:holo 5s linear infinite;color:#5a2a66;text-shadow:0 1px 0 #fff;}

/* scrolling Y2K ticker ribbon under the nav */
.ticker{position:relative;z-index:40;overflow:hidden;margin:12px auto 0;width:min(1240px,calc(100% - 34px));
  border:2px solid #fff;border-radius:999px;background:var(--hot);box-shadow:var(--shadow-pink);}
.ticker-row{display:inline-flex;white-space:nowrap;will-change:transform;animation:ticker 22s linear infinite;
  padding:7px 0;font-weight:700;font-size:12px;letter-spacing:.14em;color:#fff;text-transform:uppercase;}
.ticker-row span{padding:0 14px;}
.ticker:hover .ticker-row{animation-play-state:paused;}

/* primary button: holo sweep on hover */
.btn.primary{position:relative;overflow:hidden;background:var(--holo);background-size:220% 100%;color:#6a2a5e;animation:holo 7s linear infinite;text-shadow:0 1px 0 rgba(255,255,255,.6);}
.btn.primary:hover{filter:saturate(1.2) brightness(1.04);}

/* chrome stat numbers + hotter headings */
.stats b{background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo 6s linear infinite;}
h1{ -webkit-text-stroke:2px #fff; paint-order:stroke fill;
  text-shadow:4px 5px 0 var(--hot),7px 9px 0 rgba(52,227,255,.4);}
h2::before{content:"✿ ";color:var(--hot);}
h2::after{content:" ⋆";color:var(--cyan);}

/* checkerboard ribbon above footer */
footer{border-top:none;}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:10px;
  background:conic-gradient(var(--hot) 90deg,#fff 0 180deg,var(--hot) 0 270deg,#fff 0) 0 0/20px 20px;}

/* hero frame sparkle stickers bob; add a third sticker */
.hero-art .frame{--rot:2deg;animation:bob 5s ease-in-out infinite;}
.hero-art .frame::after{animation:twinkle 2.8s ease-in-out infinite;}

/* gallery / cards: candy hover wobble already set; add sparkle on cells */
.gal .cell::after{content:"✦";position:absolute;}
.gal .cell{position:relative;}
.gal .cell::after{top:6px;right:9px;font-size:11px;color:var(--hot);opacity:0;transition:.15s;}
.gal .cell:hover::after{opacity:1;}

@media(max-width:900px){ body::after{display:none;} }