/* ==========================================================================
   PLAYFELLAS — hub stylesheet
   Made By Alakshit

   Performance note: this sheet deliberately avoids blur filters,
   backdrop-filter, blend modes, fixed full-viewport overlays and looping
   animations. Every one of those forces the browser to repaint while
   scrolling, which is what made the page stutter. Colour now comes from
   flat gradients that paint once. Transitions fire only on hover/focus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:          #08070E;
  --bg-soft:     #0C0A15;
  --surface:     #12101E;
  --surface-hi:  #1A1728;

  /* lines */
  --line:        rgba(255,255,255,.075);
  --line-hi:     rgba(255,255,255,.16);
  --inset:       inset 0 1px 0 rgba(255,255,255,.06);

  /* ink */
  --ink:         #F7F5FF;
  --ink-dim:     #BCB6DA;
  --muted:       #837DA6;

  /* brand */
  --v1:          #7C5CFF;
  --v2:          #FF4D8D;
  --v3:          #33E1ED;
  --brand-grad:  linear-gradient(100deg, var(--v3) 0%, var(--v1) 46%, var(--v2) 100%);

  /* geometry */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --max:   1180px;
  --gutter: clamp(20px, 5vw, 40px);

  --ease: cubic-bezier(.22,.68,.28,1);

  /* type */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;
  --font-jp:      "Noto Sans JP", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  font-family:var(--font-body);
  font-size:clamp(15px, .42vw + 14px, 17px);
  line-height:1.65;
  color:var(--ink-dim);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

::selection{ background:var(--v1); color:#fff; }

:focus-visible{
  outline:2px solid var(--v3);
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */
h1, h2, h3, h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:800;
  text-wrap:balance;
}

.grad-text{
  background:var(--brand-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body);
  font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:7px 15px 7px 11px;
  border:1px solid var(--line-hi);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--v3);
  box-shadow:0 0 0 4px rgba(51,225,237,.16);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ position:relative; padding-block:clamp(70px, 9vw, 116px); }
.section--tight{ padding-block:clamp(54px, 6.5vw, 88px); }

.section__head{ max-width:660px; margin-bottom:clamp(38px, 4.6vw, 56px); }
.section__title{
  font-size:clamp(32px, 4.6vw, 54px);
  margin-block:20px 16px;
}
.section__title .lb{ display:block; }
.section__lead{ font-size:clamp(15px, .5vw + 14px, 18px); color:var(--muted); }

.rule{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--line-hi) 22%, var(--line-hi) 78%, transparent);
}

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  background:var(--v1); color:#fff; font-weight:700;
}
.skip:focus{ left:0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  color:var(--ink);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-hi);
  box-shadow:var(--inset);
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.btn svg{ width:17px; height:17px; flex:none; }

.btn--primary{
  color:#0A0714;
  border-color:transparent;
  background:var(--brand-grad);
  box-shadow:0 6px 22px -10px rgba(124,92,255,.7), var(--inset);
}
.btn--primary:hover{
  background:linear-gradient(100deg, #5BE9F2 0%, #8E72FF 46%, #FF6BA0 100%);
  border-color:transparent;
}

.btn--sm{ padding:10px 20px; font-size:14px; }

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
/* opaque on purpose — backdrop-filter re-blurs on every scroll frame */
.nav.is-stuck{
  background:#0A0812;
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex; align-items:center; gap:20px;
  height:68px;
}

.brand{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:900;
  font-size:19px; letter-spacing:-.045em;
  color:var(--ink);
  margin-right:auto;
}
.brand__mark{
  width:32px; height:32px; flex:none;
  border-radius:9px;
  display:grid; place-items:center;
  background:var(--brand-grad);
  box-shadow:var(--inset);
}
.brand__mark svg{ width:14px; height:14px; color:#0A0714; }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{
  padding:9px 15px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:var(--ink-dim);
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.07); }

.burger{
  display:none;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-hi);
  background:rgba(255,255,255,.05);
  place-items:center;
}
.burger span{
  display:block; width:17px; height:1.6px; border-radius:2px;
  background:var(--ink);
}
.burger span + span{ margin-top:4.5px; }
body.drawer-open .burger span:nth-child(1){ transform:translateY(6.1px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2){ opacity:0; }
body.drawer-open .burger span:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg); }

.drawer{
  position:fixed; inset:68px 0 auto; z-index:55;
  background:#0A0812;
  border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 26px;
  display:none;
}
body.drawer-open .drawer{ display:grid; gap:2px; }
.drawer a{
  padding:15px 4px;
  font-family:var(--font-display); font-weight:700; font-size:20px;
  letter-spacing:-.02em; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.drawer .btn{ margin-top:16px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex; align-items:center;
  padding-block:clamp(118px, 15vh, 164px) clamp(60px, 8vh, 92px);
  overflow:hidden;
}

/* One element, three flat gradients. Paints once, never animates. */
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 52% at 10% 4%,   rgba(124,92,255,.34), transparent 64%),
    radial-gradient(52% 48% at 94% 12%,  rgba(255,77,141,.26), transparent 64%),
    radial-gradient(66% 52% at 60% 106%, rgba(51,225,237,.15), transparent 66%);
}

/* technical grid, faded at the edges */
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 42%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 76% 60% at 50% 42%, #000 20%, transparent 78%);
}

/* fade the hero into the page below it */
.hero__fade{
  position:absolute; inset:auto 0 0; height:32%;
  background:linear-gradient(to bottom, transparent, var(--bg) 90%);
}

.hero__inner{ position:relative; z-index:1; max-width:1000px; }

.hero__title{
  font-size:clamp(44px, 8vw, 112px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.92;
  margin-block:26px 0;
}
.hero__title .line{ display:block; }

.hero__sub{
  max-width:600px;
  margin-block:26px 38px;
  font-size:clamp(16px, .6vw + 15px, 19.5px);
  color:var(--ink-dim);
  text-wrap:pretty;
}
.hero__sub b{ color:var(--ink); font-weight:700; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* stat row */
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  margin-top:clamp(48px, 6vw, 70px);
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--inset);
}
.stat{ background:#0E0C18; padding:22px 20px; }
.stat__num{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px, 3.4vw, 40px); letter-spacing:-.045em;
  color:var(--ink); line-height:1;
}
.stat__label{
  margin-top:8px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

/* --------------------------------------------------------------------------
   8. Franchise strip — static; this used to be a scrolling marquee
   -------------------------------------------------------------------------- */
.strip{
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.018);
  padding-block:18px;
}
.strip__row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:12px 17px;
}
.strip__item{
  font-family:var(--font-display); font-weight:800;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.strip__item.jp{
  font-family:var(--font-jp); font-weight:900;
  letter-spacing:.06em; text-transform:none; color:var(--v1);
}
.strip__dot{ width:4px; height:4px; border-radius:50%; background:var(--v2); flex:none; opacity:.65; }

/* --------------------------------------------------------------------------
   9. Game cards
   -------------------------------------------------------------------------- */
.games{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:clamp(16px, 2vw, 24px);
}

.card{
  --a1:var(--v1);
  --a2:var(--v2);
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--inset);
  overflow:hidden;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.card:hover{
  border-color:var(--line-hi);
  background:#151322;
}

/* top accent hairline */
.card__edge{
  position:absolute; inset:0 0 auto; height:2px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--a1), var(--a2), transparent);
  opacity:.6;
}
.card:hover .card__edge{ opacity:1; }

/* art */
.card__art{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 78% 0%, color-mix(in srgb, var(--a1) 38%, transparent), transparent 70%),
    radial-gradient(90% 90% at 12% 100%, color-mix(in srgb, var(--a2) 28%, transparent), transparent 68%),
    var(--surface-hi);
}
.card__art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 26%;
  filter:grayscale(1) contrast(1.1) brightness(.86);
  opacity:.6;
  transition:opacity .18s var(--ease), filter .18s var(--ease);
}
.card:hover .card__art img{
  opacity:.82;
  filter:grayscale(.4) contrast(1.05) brightness(.98);
}
/* transparent character cut-outs sit inside the frame instead of filling it */
.card__art img.is-cutout{
  object-fit:contain;
  object-position:center 62%;
  padding:18px 18px 0;
}
/* vignette so the title never fights the art */
.card__art::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 34%, rgba(18,16,30,.55) 74%, var(--surface) 100%);
}

.card__kanji{
  position:absolute; z-index:2;
  right:14px; bottom:-6px;
  font-family:var(--font-jp); font-weight:900;
  font-size:clamp(58px, 9vw, 82px); line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.22);
  opacity:.7;
  pointer-events:none;
}
.card:hover .card__kanji{ opacity:1; }

.card__badge{
  position:absolute; z-index:2; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  background:rgba(8,7,14,.78);
  border:1px solid var(--line-hi);
}
.card__badge i{ width:5px; height:5px; border-radius:50%; background:var(--a1); }

/* body */
.card__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; flex:1;
  padding:22px 24px 24px;
  margin-top:-1px;
}
.card__title{
  font-size:24px; font-weight:800; letter-spacing:-.035em;
  color:var(--ink);
}
.card__desc{
  margin-top:10px;
  font-size:14.5px; line-height:1.6; color:var(--muted);
  text-wrap:pretty;
}
.card__modes{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:18px;
}
.chip{
  padding:5px 11px; border-radius:8px;
  font-size:12px; font-weight:600;
  color:var(--ink-dim);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.card:hover .chip{ color:var(--ink); }

.card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:auto; padding-top:22px;
}
.card__meta{ font-size:12.5px; color:var(--muted); }
.card__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:14.5px;
  color:var(--ink);
}
.card__cta i{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--a1), var(--a2));
}
.card__cta svg{ width:14px; height:14px; color:#0A0714; }

/* whole card is the link */
.card__link{ position:absolute; inset:0; z-index:5; }
.card__link span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }


/* group heading above each games grid */
.group{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 20px;
  font-size:15px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-dim);
}
.group span{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:4px 10px; border:1px solid var(--line); border-radius:999px;
}
.group + .games{ margin-bottom:clamp(46px, 5vw, 66px); }
.games + .group{ margin-top:0; }

/* illustrated card art keeps its own colour instead of the duotone pass */
.card__art img.is-art{
  object-fit:contain;
  object-position:center;
  padding:14px 16px 22px;
  filter:none;
  opacity:.88;
}
.card:hover .card__art img.is-art{ opacity:1; filter:none; }

/* --------------------------------------------------------------------------
   10. Features
   -------------------------------------------------------------------------- */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--inset);
}
.feature{
  background:var(--bg-soft);
  padding:clamp(24px, 3vw, 34px);
  transition:background-color .18s var(--ease);
}
.feature:hover{ background:var(--surface); }
.feature__icon{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  margin-bottom:20px;
  color:var(--v3);
  background:rgba(51,225,237,.09);
  border:1px solid rgba(51,225,237,.2);
}
.feature__icon svg{ width:19px; height:19px; }
.feature h3{ font-size:18px; letter-spacing:-.025em; }
.feature p{ margin-top:9px; font-size:14.5px; color:var(--muted); }

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:clamp(18px, 2.4vw, 30px);
  counter-reset:step;
}
.step{ position:relative; padding-top:26px; border-top:1px solid var(--line); }
.step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute; top:-1px; left:0;
  padding-top:26px;
  font-family:var(--font-display); font-weight:800;
  font-size:13px; letter-spacing:.1em;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{ margin-top:34px; font-size:21px; letter-spacing:-.03em; }
.step p{ margin-top:10px; font-size:14.5px; color:var(--muted); }

/* --------------------------------------------------------------------------
   12. Maker strip
   -------------------------------------------------------------------------- */
.maker{
  position:relative;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(90% 130% at 88% 4%, rgba(124,92,255,.16), transparent 62%),
    radial-gradient(70% 110% at 4% 96%, rgba(255,77,141,.12), transparent 60%),
    var(--bg-soft);
  box-shadow:var(--inset);
  padding:clamp(30px, 5vw, 60px);
  overflow:hidden;
}
.maker__grid{
  display:grid; gap:clamp(26px, 4vw, 56px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:center;
}
.maker h2{ font-size:clamp(28px, 3.6vw, 44px); }
.maker p{ margin-top:18px; color:var(--ink-dim); max-width:52ch; text-wrap:pretty; }
.maker__links{ display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }

.maker__panel{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:rgba(8,7,14,.6);
  padding:6px 22px;
}
.maker__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-block:15px;
}
.maker__row + .maker__row{ border-top:1px solid var(--line); }
.maker__row dt{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.maker__row dd{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--ink); text-align:right;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer{
  position:relative;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(124,92,255,.045));
  padding-block:clamp(46px, 5.5vw, 68px) 40px;
}
.footer__top{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:34px;
  padding-bottom:38px;
}
.footer__blurb{ max-width:34ch; margin-top:16px; font-size:14.5px; color:var(--muted); }
.footer__cols{ display:flex; flex-wrap:wrap; gap:clamp(34px, 6vw, 80px); }
.footer__col h4{
  font-family:var(--font-body); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:14px;
}
.footer__col li + li{ margin-top:9px; }
.footer__col a{ font-size:14.5px; color:var(--ink-dim); transition:color .16s var(--ease); }
.footer__col a:hover{ color:var(--ink); }

/* the credit line */
.made{
  display:grid; place-items:center; gap:12px;
  padding-top:40px;
  border-top:1px solid var(--line);
  text-align:center;
}
.made__line{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px, 7vw, 62px);
  letter-spacing:-.05em;
  line-height:1;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.made__sub{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* --------------------------------------------------------------------------
   14. 404
   -------------------------------------------------------------------------- */
.oops{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:120px var(--gutter) 80px;
  text-align:center;
}
.oops__code{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(84px, 22vw, 210px); line-height:.86;
  letter-spacing:-.06em;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.oops h1{ margin-top:20px; font-size:clamp(26px, 4vw, 40px); }
.oops p{ margin-top:14px; color:var(--muted); }
.oops .btn{ margin-top:32px; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .maker__grid{ grid-template-columns:1fr; }
}

@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:grid; }
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .games{ grid-template-columns:1fr; }
}

@media (max-width: 420px){
  .card__body{ padding:20px 18px 22px; }
  .footer__top{ gap:26px; }
  .strip__row{ gap:10px 16px; }
  .strip__item{ font-size:12.5px; }
}

/* --------------------------------------------------------------------------
   16. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition-duration:.01ms !important; }
}

@media print{
  .nav, .drawer, .strip, .hero__bg, .hero__grid, .hero__fade{ display:none !important; }
  body{ background:#fff; color:#000; }
}