/* ==========================================================================
   gotnerd.com — vaporwave / 8-bit page shell
   ========================================================================== */

:root {
  --pink:   #ff71ce;
  --cyan:   #01cdfe;
  --purple: #b967ff;
  --yellow: #fffb96;
  --mint:   #05ffa1;

  --bg:        #0d0221;   /* deep navy: page + floor */
  --panel:     #1a0b2e;   /* OPAQUE tetris panel background */
  --panel-2:   #2d1b4e;   /* bezel inner ring */
  --ink:       #f3e8ff;
  --muted:     #9a86c4;
  --pink-dark: #8a1f6d;
  --cyan-dark: #016a86;

  --horizon: 55%;          /* where sky meets floor in .bg */
  --font: 'Press Start 2P', 'VT323', 'Courier New', monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font: 12px/1.7 var(--font);
  background: var(--bg);
  text-rendering: optimizeSpeed;
}

::selection { background: var(--pink); color: var(--bg); }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--yellow); }
a:hover,
a:focus-visible { text-shadow: 0 0 6px currentColor; }

canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* CRT scanlines over everything (ink-only, cheap) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .28) 0 1px,
    transparent 1px 3px
  );
  opacity: .5;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Background scene (.bg) — z-index 0
   -------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #06011a 0%,
    #0d0221 22%,
    #2a0a4f 40%,
    #6b1d7c 50%,
    #c0388f var(--horizon),
    var(--bg) var(--horizon),
    var(--bg) 100%
  );
}

/* stars: 2 px pixel squares via box-shadow */
.stars {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
}
.stars-a {
  box-shadow:
    3vw 8vh #fff, 9vw 22vh var(--yellow), 14vw 4vh #fff, 19vw 31vh #fff,
    24vw 15vh var(--yellow), 31vw 6vh #fff, 36vw 27vh #fff, 41vw 12vh #fff,
    47vw 3vh var(--yellow), 52vw 20vh #fff, 58vw 9vh #fff, 63vw 33vh #fff,
    68vw 17vh var(--yellow), 74vw 5vh #fff, 79vw 25vh #fff, 85vw 11vh #fff,
    90vw 36vh var(--yellow), 95vw 19vh #fff, 6vw 40vh #fff, 28vw 42vh #fff,
    55vw 44vh #fff, 83vw 46vh #fff, 44vw 38vh var(--yellow), 71vw 41vh #fff,
    12vw 48vh #fff, 97vw 2vh #fff, 35vw 47vh #fff, 65vw 49vh var(--yellow);
  animation: twinkle 3s steps(2, jump-none) infinite alternate;
}
.stars-b {
  width: 3px; height: 3px;
  box-shadow:
    7vw 14vh var(--cyan), 16vw 36vh var(--pink), 22vw 2vh var(--cyan),
    33vw 19vh var(--pink), 39vw 45vh var(--cyan), 45vw 24vh var(--mint),
    50vw 10vh var(--cyan), 60vw 39vh var(--pink), 66vw 2vh var(--cyan),
    72vw 29vh var(--mint), 77vw 14vh var(--pink), 88vw 4vh var(--cyan),
    93vw 28vh var(--pink), 2vw 30vh var(--cyan), 26vw 50vh var(--pink),
    62vw 22vh var(--cyan), 81vw 38vh var(--mint), 48vw 47vh var(--pink),
    11vw 44vh var(--cyan), 57vw 30vh var(--yellow);
  animation: twinkle 4.4s steps(2, jump-none) 1.3s infinite alternate;
}
@keyframes twinkle {
  from { opacity: 1; }
  to   { opacity: .35; }
}

/* the sun: rasterized 16-cell circle via clip-path, striped via mask */
.sun-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--horizon) - 34vmin);
  width: 44vmin; height: 44vmin;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 55%, rgba(255, 113, 206, .55) 0%, rgba(255, 113, 206, .18) 40%, transparent 68%);
}
.sun {
  position: absolute;
  left: 50%;
  top: calc(var(--horizon) - 30vmin);
  width: 30vmin; height: 30vmin;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--yellow) 0%, #ffb347 32%, var(--pink) 64%, var(--purple) 100%);
  clip-path: polygon(
    31.25% 0%, 68.75% 0%, 68.75% 6.25%, 81.25% 6.25%, 81.25% 12.5%, 87.5% 12.5%,
    87.5% 18.75%, 93.75% 18.75%, 93.75% 31.25%, 100% 31.25%, 100% 68.75%,
    93.75% 68.75%, 93.75% 81.25%, 87.5% 81.25%, 87.5% 87.5%, 81.25% 87.5%,
    81.25% 93.75%, 68.75% 93.75%, 68.75% 100%, 31.25% 100%, 31.25% 93.75%,
    18.75% 93.75%, 18.75% 87.5%, 12.5% 87.5%, 12.5% 81.25%, 6.25% 81.25%,
    6.25% 68.75%, 0% 68.75%, 0% 31.25%, 6.25% 31.25%, 6.25% 18.75%,
    12.5% 18.75%, 12.5% 12.5%, 18.75% 12.5%, 18.75% 6.25%, 31.25% 6.25%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0 52%, transparent 52% 55%,
    #000 55% 63%, transparent 63% 67%,
    #000 67% 75%, transparent 75% 80%,
    #000 80% 88%, transparent 88% 94%,
    #000 94% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0 52%, transparent 52% 55%,
    #000 55% 63%, transparent 63% 67%,
    #000 67% 75%, transparent 75% 80%,
    #000 80% 88%, transparent 88% 94%,
    #000 94% 100%
  );
}

/* stepped pixel mountains sitting on the horizon */
.mountains {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - var(--horizon));
}
.mountains-far {
  height: 11vh;
  background: #2a0f4d;
  clip-path: polygon(
    0% 100%, 0% 60%, 4% 60%, 4% 40%, 8% 40%, 8% 20%, 12% 20%, 12% 40%, 16% 40%,
    16% 60%, 20% 60%, 20% 80%, 24% 80%, 24% 50%, 28% 50%, 28% 30%, 32% 30%,
    32% 10%, 36% 10%, 36% 30%, 40% 30%, 40% 50%, 44% 50%, 44% 70%, 48% 70%,
    48% 90%, 52% 90%, 52% 60%, 56% 60%, 56% 40%, 60% 40%, 60% 20%, 64% 20%,
    64% 40%, 68% 40%, 68% 60%, 72% 60%, 72% 80%, 76% 80%, 76% 50%, 80% 50%,
    80% 30%, 84% 30%, 84% 10%, 88% 10%, 88% 30%, 92% 30%, 92% 50%, 96% 50%,
    96% 70%, 100% 70%, 100% 100%
  );
}
.mountains-near {
  height: 7vh;
  background: #14062b;
  clip-path: polygon(
    0% 100%, 0% 70%, 6% 70%, 6% 40%, 10% 40%, 10% 20%, 14% 20%, 14% 40%,
    18% 40%, 18% 60%, 22% 60%, 22% 80%, 30% 80%, 30% 60%, 34% 60%, 34% 40%,
    38% 40%, 38% 60%, 42% 60%, 42% 80%, 50% 80%, 50% 60%, 54% 60%, 54% 30%,
    58% 30%, 58% 10%, 62% 10%, 62% 30%, 66% 30%, 66% 50%, 70% 50%, 70% 70%,
    74% 70%, 74% 90%, 80% 90%, 80% 70%, 84% 70%, 84% 50%, 88% 50%, 88% 30%,
    92% 30%, 92% 50%, 96% 50%, 96% 80%, 100% 80%, 100% 100%
  );
}

/* perspective grid floor */
.grid {
  position: absolute;
  top: var(--horizon);
  left: -50%;
  width: 200%;
  height: 60vh;
  transform-origin: 50% 0;
  transform: perspective(75vh) rotateX(60deg);
  background-image:
    linear-gradient(to right,  var(--pink) 0 2px, transparent 2px),
    linear-gradient(to bottom, var(--cyan) 0 2px, transparent 2px);
  background-size: 64px 64px;
  background-position: 0 0;
  opacity: .8;
  animation: gridscroll 1.6s linear infinite;
  will-change: background-position;
}
@keyframes gridscroll {
  from { background-position: 0 0; }
  to   { background-position: 0 64px; }
}
.grid-fade {
  position: absolute;
  top: var(--horizon);
  left: 0; right: 0;
  height: 16vh;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(13, 2, 33, .85) 30%, transparent 100%);
}
.horizon {
  position: absolute;
  top: var(--horizon);
  left: 0; right: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink), 0 0 28px var(--purple);
}

/* --------------------------------------------------------------------------
   Cat layer — z-index 1 (cats run over the scene, under .page)
   -------------------------------------------------------------------------- */
#cat-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Page — z-index 2
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* Hero (transparent: cats visible behind) */
.hero {
  text-align: center;
  padding: clamp(40px, 9vh, 96px) 0 40px;
}

.glitch {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(1.25rem, 6vw, 3rem);
  line-height: 1.2;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 4px 4px 0 var(--bg), 6px 6px 0 var(--purple);
  white-space: nowrap;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  text-shadow: none;
  mix-blend-mode: screen;
  pointer-events: none;
}
.glitch::before {
  color: var(--pink);
  transform: translate(-3px, 0);
  animation: glitch-a 4s steps(1, end) infinite;
}
.glitch::after {
  color: var(--cyan);
  transform: translate(3px, 0);
  animation: glitch-b 5.2s steps(1, end) .7s infinite;
}
@keyframes glitch-a {
  0%, 89%, 100% { clip-path: inset(0);             transform: translate(-3px, 0); }
  90%           { clip-path: inset(12% 0 62% 0);   transform: translate(-9px, 2px); }
  92%           { clip-path: inset(55% 0 18% 0);   transform: translate(7px, -2px); }
  94%           { clip-path: inset(80% 0 0 0);     transform: translate(-6px, 0); }
  96%           { clip-path: inset(30% 0 45% 0);   transform: translate(5px, 1px); }
}
@keyframes glitch-b {
  0%, 91%, 100% { clip-path: inset(0);             transform: translate(3px, 0); }
  92%           { clip-path: inset(65% 0 5% 0);    transform: translate(-7px, -1px); }
  94%           { clip-path: inset(5% 0 75% 0);    transform: translate(9px, 2px); }
  96%           { clip-path: inset(40% 0 30% 0);   transform: translate(-5px, 0); }
  98%           { clip-path: inset(20% 0 55% 0);   transform: translate(6px, -2px); }
}
.glitch.big {
  font-size: clamp(4rem, 22vw, 9rem);
  line-height: 1;
  text-shadow: 6px 6px 0 var(--bg), 10px 10px 0 var(--purple);
}

.tagline {
  margin: 20px 0 0;
  color: var(--cyan);
  font-size: clamp(8px, 2.2vw, 11px);
  letter-spacing: .06em;
  text-shadow: 2px 2px 0 var(--bg);
}
.tagline::after {
  content: "_";
  color: var(--yellow);
  animation: blink 1s steps(2, jump-none) infinite;
}
@keyframes blink { to { opacity: 0; } }

#hero-cat {
  display: block;
  width: 128px;
  height: 128px;
  margin: 24px auto 0;
  filter: drop-shadow(4px 4px 0 rgba(13, 2, 33, .6));
  animation: bob 1.4s steps(2, jump-none) infinite alternate;
}
@keyframes bob { to { transform: translateY(-4px); } }

/* --------------------------------------------------------------------------
   Buttons — pixel 3D
   -------------------------------------------------------------------------- */
button,
.btn {
  appearance: none;
  display: inline-block;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bg);
  background: var(--pink);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .45),
    0 4px 0 var(--pink-dark),
    0 8px 0 var(--bg);
  transition: none;
}
button:hover,
.btn:hover { filter: brightness(1.12); color: var(--bg); text-shadow: none; }
button:active,
.btn:active {
  transform: translateY(4px);
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .25),
    0 0 0 var(--pink-dark),
    0 4px 0 var(--bg);
}
button:disabled { cursor: default; filter: saturate(.3) brightness(.7); }

.btn { margin-top: 28px; background: var(--cyan); box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .45),
    0 4px 0 var(--cyan-dark),
    0 8px 0 var(--bg); }
.btn:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .25),
    0 0 0 var(--cyan-dark),
    0 4px 0 var(--bg); }

/* --------------------------------------------------------------------------
   Tetris panel — OPAQUE, cats run behind it
   .tetris-layout uses display:contents so board / side / overlay are all
   direct grid items of .panel, letting the overlay share the board's cell.
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 28px;
  row-gap: 20px;
  margin: 8px 12px 64px;
  padding: 24px 24px 28px;
  background: var(--panel);
  box-shadow:
    inset 0 0 0 4px var(--panel-2),
    inset 0 0 48px rgba(0, 0, 0, .45),
    0 0 0 4px var(--purple),
    0 0 0 8px var(--bg),
    0 0 0 12px var(--pink),
    0 0 36px 12px rgba(185, 103, 255, .35);
}

.panel-title {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--yellow);
  font-size: clamp(11px, 3vw, 16px);
  letter-spacing: .1em;
  text-shadow: 3px 3px 0 var(--pink-dark), 0 0 12px var(--pink);
}

.tetris-layout { display: contents; }

#tetris-board {
  grid-row: 2;
  grid-column: 1;
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--cyan), 0 0 18px 6px rgba(1, 205, 254, .25);
}

.tetris-side {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 172px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 3px var(--panel-2);
}
.stat .label {
  color: var(--pink);
  font-size: 9px;
  letter-spacing: .08em;
}
.stat > span:not(.label) {
  color: var(--yellow);
  font-size: 14px;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--pink-dark);
  font-variant-numeric: tabular-nums;
}
#tetris-next {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}

#tetris-start { width: 100%; }

/* music mute button: cyan while sound is on, purple when muted (aria-pressed) */
.music-toggle {
  white-space: nowrap;
  background: var(--cyan);
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .45),
    0 4px 0 var(--cyan-dark),
    0 8px 0 var(--bg);
}
.music-toggle:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .25),
    0 0 0 var(--cyan-dark),
    0 4px 0 var(--bg); }
.music-toggle[aria-pressed="true"] {
  color: var(--ink);
  background: var(--purple);
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .3),
    0 4px 0 #5c2a8f,
    0 8px 0 var(--bg);
}
.music-toggle[aria-pressed="true"]:hover { color: var(--ink); }
.music-toggle[aria-pressed="true"]:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .2),
    0 0 0 #5c2a8f,
    0 4px 0 var(--bg); }
.tetris-side .music-toggle { width: 100%; }
.hero .music-toggle { display: block; margin: 20px auto 0; }

.help {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.9;
}

/* overlay shares the board cell */
#tetris-overlay {
  grid-row: 2;
  grid-column: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px;
  text-align: center;
  color: var(--yellow);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  background: rgba(13, 2, 33, .82);
  text-shadow: 3px 3px 0 var(--pink-dark), 0 0 12px var(--pink);
  animation: pulse 1.2s steps(2, jump-none) infinite alternate;
}
@keyframes pulse { to { opacity: .55; } }

.hidden { display: none !important; }

/* touch controls: shown by default, hidden on mouse/trackpad devices */
.touch-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "left rotate right"
    "down down drop";
  gap: 12px;
  max-width: 320px;
  width: 100%;
  margin: 4px auto 0;
}
.touch-controls button {
  font-size: 16px;
  padding: 16px 0;
  background: var(--cyan);
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .45),
    0 4px 0 var(--cyan-dark),
    0 8px 0 var(--bg);
}
.touch-controls button:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35),
    inset  4px  4px 0 rgba(255, 255, 255, .25),
    0 0 0 var(--cyan-dark),
    0 4px 0 var(--bg); }
.touch-controls [data-action="left"]   { grid-area: left; }
.touch-controls [data-action="rotate"] { grid-area: rotate; background: var(--purple); box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .45), 0 4px 0 #5c2a8f, 0 8px 0 var(--bg); }
.touch-controls [data-action="rotate"]:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .25), 0 0 0 #5c2a8f, 0 4px 0 var(--bg); }
.touch-controls [data-action="right"]  { grid-area: right; }
.touch-controls [data-action="down"]   { grid-area: down; }
.touch-controls [data-action="drop"]   { grid-area: drop; background: var(--pink); box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--pink-dark), 0 8px 0 var(--bg); }
.touch-controls [data-action="drop"]:active { box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .25), 0 0 0 var(--pink-dark), 0 4px 0 var(--bg); }

@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.hero-404 { padding-top: clamp(48px, 12vh, 120px); }
.lost {
  /* boxed like a dialogue caption so it stays legible over the sun */
  display: block;
  width: max-content;
  margin: 20px auto 0;
  max-width: min(420px, 100%);
  padding: 10px 14px;
  background: var(--panel);
  border: 4px solid var(--purple);
  box-shadow: 4px 4px 0 var(--bg);
  color: var(--cyan);
  font-size: clamp(8px, 2.2vw, 10px);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   Footer (transparent)
   -------------------------------------------------------------------------- */
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 var(--bg);
}
.foot p { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive: stack the game on narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin: 8px 12px 56px;
    padding: 20px 12px 24px;
  }
  #tetris-board,
  #tetris-overlay { grid-row: 2; grid-column: 1; }
  #tetris-board { width: min(240px, 100%); }
  .tetris-side {
    grid-row: 3;
    grid-column: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
  .stat-next { grid-row: 1 / span 3; grid-column: 1; }
  #tetris-next { width: 72px; height: 72px; }
  #tetris-start,
  .tetris-side .music-toggle,
  .help { grid-column: 1 / -1; }
  .help { text-align: center; }
  .touch-controls { grid-row: 4; }
}

@media (max-width: 380px) {
  .panel { padding-left: 8px; padding-right: 8px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: kill decorative animation, keep static aberration
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stars-a, .stars-b, .grid, .glitch::before, .glitch::after,
  .tagline::after, #hero-cat, #tetris-overlay {
    animation: none !important;
  }
  .glitch::before { clip-path: none; transform: translate(-3px, 0); }
  .glitch::after  { clip-path: none; transform: translate(3px, 0); }
}