*{
  box-sizing:border-box;
}

:root{
  color-scheme:dark;

  --bg:#08080d;
  --panel:#101017;
  --panel2:#15151e;
  --line:#292936;

  --text:#f4f2f6;
  --muted:#85818e;

  --acid:#d7ff48;
  --pink:#ff4778;
  --blue:#55d7ff;
}

html,
body{
  margin:0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(154,90,255,.08),
      transparent 30%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body{
  min-height:100vh;

  overflow-x:hidden;
}

button{
  font:inherit;
}

.bgNoise{
  position:fixed;

  inset:0;

  z-index:-1;

  opacity:.03;

  pointer-events:none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header{
  width:min(1450px,100%);

  height:70px;

  margin:auto;

  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}

.brand{
  display:flex;

  align-items:center;

  gap:10px;
}

.catLogo{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  color:#09090d;

  background:var(--acid);

  font-size:1.2rem;
  font-weight:1000;

  transform:rotate(-4deg);

  box-shadow:
    0 10px 35px
    rgba(215,255,72,.12);
}

.brand strong{
  display:block;

  font-size:.84rem;

  letter-spacing:-.02em;
}

.brand span{
  display:block;

  margin-top:2px;

  color:#777382;

  font-size:.35rem;
  font-weight:900;

  letter-spacing:.13em;
}

.headerStats{
  display:flex;

  gap:5px;
}

.headerStats > div{
  min-width:72px;

  padding:6px 10px;

  border:
    1px solid var(--line);

  border-radius:8px;

  background:#0d0d14;
}

.headerStats small{
  display:block;

  color:#666270;

  font-size:.3rem;
  font-weight:900;
}

.headerStats strong{
  display:block;

  margin-top:2px;

  color:#ccc8d2;

  font-family:
    ui-monospace,
    monospace;

  font-size:.46rem;
}

main{
  width:min(1450px,100%);

  margin:auto;

  padding:
    0 20px
    70px;
}

.intro{
  padding:
    55px 0
    27px;

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:30px;
}

.eyebrow,
.featureHeading > span{
  color:var(--acid);

  font-size:.38rem;
  font-weight:1000;

  letter-spacing:.14em;
}

.intro h1{
  margin:
    9px 0
    0;

  color:#faf8fb;

  font-size:
    clamp(
      2.5rem,
      5.7vw,
      6rem
    );

  line-height:.92;

  letter-spacing:-.065em;
}

.intro h1 em{
  display:block;

  color:#888391;

  font-style:normal;
}

.intro > p{
  max-width:250px;

  margin:0 0 6px;

  color:#777281;

  text-align:right;

  font-size:.47rem;

  line-height:1.6;
}

.gameShell{
  position:relative;

  width:100%;

  overflow:hidden;

  border:
    1px solid
    #2a2933;

  border-radius:17px;

  background:#0e0e15;

  box-shadow:
    0 40px 110px
    rgba(0,0,0,.4);

  aspect-ratio:16 / 9;
}

#game{
  display:block;

  width:100%;
  height:100%;

  touch-action:none;
}

.overlay{
  position:absolute;

  inset:0;

  z-index:30;

  display:grid;
  place-items:center;

  background:
    rgba(7,7,11,.78);

  backdrop-filter:
    blur(10px);
}

.overlay.hidden{
  display:none;
}

.overlayCard{
  width:min(450px,90%);

  padding:25px;

  border:
    1px solid
    #33313b;

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      #171720,
      #0f0f16
    );

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.55);
}

.bigCat{
  color:var(--acid);

  font-family:
    ui-monospace,
    monospace;

  font-size:1.3rem;
}

.overlayCard > span{
  display:block;

  margin-top:18px;

  color:#85808c;

  font-size:.35rem;
  font-weight:1000;

  letter-spacing:.13em;
}

.overlayCard h2{
  margin:
    6px 0
    0;

  font-size:1.65rem;

  letter-spacing:-.04em;
}

.overlayCard p{
  margin:
    10px 0
    0;

  color:#827d89;

  font-size:.48rem;

  line-height:1.6;
}

.keys{
  margin-top:18px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:6px;
}

.keys > div{
  padding:9px;

  border:
    1px solid #292833;

  border-radius:8px;

  background:#0b0b11;
}

kbd{
  min-width:24px;

  padding:5px;

  display:inline-grid;
  place-items:center;

  border:
    1px solid #373641;

  border-bottom-width:3px;

  border-radius:5px;

  color:#d4d0d8;

  background:#17171f;

  font-size:.38rem;
}

.keys small{
  display:block;

  margin-top:6px;

  color:#625e69;

  font-size:.3rem;
  font-weight:900;
}

#playButton{
  width:100%;

  min-height:48px;

  margin-top:17px;

  padding:0 14px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border:0;

  border-radius:9px;

  color:#101109;

  background:var(--acid);

  cursor:pointer;

  font-size:.47rem;
  font-weight:1000;
}

#playButton b{
  font-size:.9rem;
}

.trollMessage{
  position:absolute;

  z-index:22;

  left:50%;
  top:10%;

  padding:8px 12px;

  transform:
    translateX(-50%)
    translateY(-10px);

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:999px;

  color:#ece9ef;

  background:
    rgba(9,9,14,.88);

  opacity:0;

  pointer-events:none;

  font-size:.44rem;
  font-weight:800;

  transition:
    opacity .15s,
    transform .15s;
}

.trollMessage.show{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

.checkpointPopup{
  position:absolute;

  z-index:22;

  left:50%;
  bottom:12%;

  padding:8px 12px;

  transform:
    translateX(-50%)
    translateY(10px);

  border-radius:8px;

  color:#0d1108;

  background:var(--acid);

  opacity:0;

  pointer-events:none;

  font-size:.38rem;
  font-weight:1000;

  transition:.2s;
}

.checkpointPopup.show{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

.mobileControls{
  position:absolute;

  z-index:25;

  inset:
    auto 18px
    18px 18px;

  display:none;

  align-items:flex-end;
  justify-content:space-between;

  pointer-events:none;
}

.mobileControls button{
  width:58px;
  height:58px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:14px;

  color:#fff;

  background:
    rgba(15,15,22,.72);

  backdrop-filter:
    blur(8px);

  pointer-events:auto;

  touch-action:none;

  font-size:1rem;
  font-weight:1000;
}

.movement{
  display:flex;

  gap:7px;
}

.mobileControls .jumpButton{
  color:#0b1007;

  background:
    rgba(215,255,72,.88);
}

.infoStrip{
  margin-top:8px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:6px;
}

.infoStrip article{
  min-height:76px;

  padding:11px;

  display:flex;
  align-items:center;

  gap:9px;

  border:
    1px solid var(--line);

  border-radius:9px;

  background:#0d0d14;
}

.infoStrip article > span{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:var(--acid);

  background:
    rgba(215,255,72,.05);
}

.infoStrip small{
  display:block;

  color:#625e6a;

  font-size:.3rem;
  font-weight:1000;
}

.infoStrip strong{
  display:block;

  margin-top:3px;

  color:#c8c3cd;

  font-size:.45rem;
}

.features{
  margin-top:60px;
}

.featureHeading h2{
  max-width:700px;

  margin:
    7px 0
    0;

  font-size:
    clamp(
      1.5rem,
      3vw,
      2.5rem
    );

  line-height:1.05;

  letter-spacing:-.04em;
}

.featureGrid{
  margin-top:18px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:6px;
}

.featureGrid article{
  min-height:145px;

  padding:15px;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:#0d0d14;
}

.featureGrid strong{
  font-size:.55rem;
}

.featureGrid p{
  margin:
    8px 0
    0;

  color:#706b77;

  font-size:.4rem;

  line-height:1.55;
}

footer{
  width:min(1450px,100%);

  min-height:72px;

  margin:auto;

  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  color:#615d68;

  font-size:.39rem;
}

footer strong{
  color:#88838e;
}

@media(max-width:720px){

  header{
    height:60px;

    padding:0 10px;
  }

  .headerStats > div{
    min-width:54px;

    padding:5px 7px;
  }

  .headerStats > div:nth-child(3){
    display:none;
  }

  main{
    padding:
      0 8px
      45px;
  }

  .intro{
    padding:
      37px 3px
      20px;

    display:block;
  }

  .intro > p{
    margin-top:15px;

    text-align:left;
  }

  .gameShell{
    border-radius:11px;
  }

  .mobileControls{
    display:flex;
  }

  .infoStrip{
    grid-template-columns:
      1fr 1fr;
  }

  .featureGrid{
    grid-template-columns:
      1fr 1fr;
  }
}

@media(max-width:470px){

  .brand span{
    display:none;
  }

  .catLogo{
    width:35px;
    height:35px;
  }

  .intro h1{
    font-size:2.65rem;
  }

  .overlayCard{
    padding:17px;
  }

  .keys{
    display:none;
  }

  .featureGrid{
    grid-template-columns:
      1fr;
  }
}