/*
  Shared pixel-inspired UI primitives used by the homepage, the Arcade hub,
  and arcade games. Everything here is original CSS/SVG geometry — no
  copied artwork. Pages that need it load this file in addition to
  styles.css, which still owns color tokens, layout, and typography.
*/

@font-face {
  font-display: swap;
}

.pixel-font {
  font-family: "Press Start 2P", ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.pixel-heading {
  font-family: "Press Start 2P", ui-monospace, monospace;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-shadow: 3px 3px 0 rgba(15, 23, 42, 0.28);
}

/* Cut-corner "pixel frame" — an octagon clip that reads as a chunky 8-bit panel edge. */
.pixel-frame {
  --notch: 10px;
  clip-path: polygon(
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch)),
    0 var(--notch)
  );
}

.pixel-frame--sm {
  --notch: 6px;
}

.pixel-frame--lg {
  --notch: 16px;
}

/* Chunky beveled button: instant-snap press, no easing curve, like an 8-bit UI. */
.pixel-button {
  --notch: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 0;
  cursor: pointer;
  font-weight: 850;
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.32),
    inset -3px -3px 0 rgba(0, 0, 0, 0.28),
    0 6px 0 rgba(0, 0, 0, 0.22);
}

.pixel-button:hover {
  transform: translateY(-2px);
}

.pixel-button:active {
  transform: translateY(3px);
  box-shadow:
    inset 3px 3px 0 rgba(0, 0, 0, 0.22),
    inset -3px -3px 0 rgba(255, 255, 255, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.22);
}

.pixel-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  opacity: 0.6;
  transform: none;
}

/* Pixel-grid decorative shapes, drawn with box-shadow "sprites" (one div, many dots). */
.pixel-cloud,
.pixel-star,
.pixel-sparkle,
.pixel-grass {
  position: relative;
  display: inline-block;
}

.pixel-cloud { width: 6px; height: 6px; box-shadow: 12px 0px 0 currentColor, 18px 0px 0 currentColor, 24px 0px 0 currentColor, 30px 0px 0 currentColor, 6px 6px 0 currentColor, 12px 6px 0 currentColor, 18px 6px 0 currentColor, 24px 6px 0 currentColor, 30px 6px 0 currentColor, 36px 6px 0 currentColor, 42px 6px 0 currentColor, 48px 6px 0 currentColor, 0px 12px 0 currentColor, 6px 12px 0 currentColor, 12px 12px 0 currentColor, 18px 12px 0 currentColor, 24px 12px 0 currentColor, 30px 12px 0 currentColor, 36px 12px 0 currentColor, 42px 12px 0 currentColor, 48px 12px 0 currentColor, 54px 12px 0 currentColor, 60px 12px 0 currentColor, 0px 18px 0 currentColor, 6px 18px 0 currentColor, 12px 18px 0 currentColor, 18px 18px 0 currentColor, 24px 18px 0 currentColor, 30px 18px 0 currentColor, 36px 18px 0 currentColor, 42px 18px 0 currentColor, 48px 18px 0 currentColor, 54px 18px 0 currentColor, 60px 18px 0 currentColor, 66px 18px 0 currentColor, 0px 24px 0 currentColor, 6px 24px 0 currentColor, 12px 24px 0 currentColor, 18px 24px 0 currentColor, 24px 24px 0 currentColor, 30px 24px 0 currentColor, 36px 24px 0 currentColor, 42px 24px 0 currentColor, 48px 24px 0 currentColor, 54px 24px 0 currentColor, 60px 24px 0 currentColor, 66px 24px 0 currentColor, 6px 30px 0 currentColor, 12px 30px 0 currentColor, 18px 30px 0 currentColor, 24px 30px 0 currentColor, 30px 30px 0 currentColor, 36px 30px 0 currentColor, 42px 30px 0 currentColor, 48px 30px 0 currentColor, 54px 30px 0 currentColor, 60px 30px 0 currentColor; }

.pixel-star { width: 5px; height: 5px; box-shadow: 15px 0px 0 currentColor, 15px 5px 0 currentColor, 5px 10px 0 currentColor, 15px 10px 0 currentColor, 25px 10px 0 currentColor, 0px 15px 0 currentColor, 5px 15px 0 currentColor, 10px 15px 0 currentColor, 20px 15px 0 currentColor, 25px 15px 0 currentColor, 30px 15px 0 currentColor, 10px 20px 0 currentColor, 15px 20px 0 currentColor, 20px 20px 0 currentColor, 5px 25px 0 currentColor, 25px 25px 0 currentColor, 0px 30px 0 currentColor, 30px 30px 0 currentColor; }

.pixel-sparkle { width: 4px; height: 4px; box-shadow: 8px 0px 0 currentColor, 8px 4px 0 currentColor, 0px 8px 0 currentColor, 8px 8px 0 currentColor, 16px 8px 0 currentColor, 4px 12px 0 currentColor, 8px 12px 0 currentColor, 12px 12px 0 currentColor, 8px 16px 0 currentColor; }

.pixel-grass { width: 5px; height: 5px; box-shadow: 0px 0px 0 currentColor, 10px 0px 0 currentColor, 20px 0px 0 currentColor, 30px 0px 0 currentColor, 40px 0px 0 currentColor, 50px 0px 0 currentColor, 0px 5px 0 currentColor, 10px 5px 0 currentColor, 20px 5px 0 currentColor, 30px 5px 0 currentColor, 40px 5px 0 currentColor, 50px 5px 0 currentColor, 0px 10px 0 currentColor, 5px 10px 0 currentColor, 10px 10px 0 currentColor, 15px 10px 0 currentColor, 20px 10px 0 currentColor, 25px 10px 0 currentColor, 30px 10px 0 currentColor, 35px 10px 0 currentColor, 40px 10px 0 currentColor, 45px 10px 0 currentColor, 50px 10px 0 currentColor; }

.pixel-float {
  animation: pixel-float 3.2s ease-in-out infinite;
}

.pixel-float--delay {
  animation-delay: 1.1s;
}

.pixel-twinkle {
  animation: pixel-twinkle 1.8s ease-in-out infinite;
}

@keyframes pixel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pixel-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes pixel-pop-in {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Simple chunky line icons: sharp corners, thick strokes, no curves — reads as "pixel-ish" without a literal bitmap grid. */
.pixel-icon {
  display: block;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  fill: none;
  shape-rendering: crispEdges;
}