/* ==========================================================================
   VOXEL ARCADE — shared stylesheet for index.html + apps.html

   Contents:
     1.  Design tokens (palette lives here — reskin from this block alone)
     2.  Base / reset
     3.  Top bar + voxel buttons
     4.  Hero (animated gradient, drifting cubes, pixel-stair edge)
     5.  Game section
     6.  Apps directory grid
     7.  Footer
     8.  Responsive + reduced motion

   Animation rule of thumb: only `transform` and `opacity` are animated so
   everything stays on the GPU and cheap phones don't melt.
   ========================================================================== */


/* ── 1. Design tokens ───────────────────────────────────────────────────── */
:root {
  /* Two gradient pairs used consistently everywhere. Swap these four
     colours and the entire site reskins. */
  --g1-a: #ff5f9e;   /* sunset pink  */
  --g1-b: #8a5aff;   /* violet       */
  --g2-a: #22d3ee;   /* cyan         */
  --g2-b: #a3e635;   /* lime         */

  --grad-1: linear-gradient(135deg, var(--g1-a), var(--g1-b));
  --grad-2: linear-gradient(135deg, var(--g2-a), var(--g2-b));

  /* Surfaces */
  --bg:        #0f0d1a;
  --bg-soft:   #171331;
  --panel:     #1d1838;
  --panel-hi:  #292350;
  --ink:       #f4f1ff;
  --ink-dim:   #b6aee0;
  --edge:      rgba(255, 255, 255, .14);

  /* Type */
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-body:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --ease-pop: cubic-bezier(.22, 1.4, .36, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);

  --topbar-h: 62px;
}


/* ── 2. Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* cubes drift near the edges */
}

a { color: inherit; }

h1, h2, h3 { line-height: 1.15; margin: 0; }

/* Pixel font is for accents ONLY — never body copy, it's unreadable. */
.kicker, .hero-title, .section-title, .hud, .overlay-title,
.btn-chunky, .card-title, .brand-text {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: .02em;
}


/* ── 3. Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(12px, 3vw, 28px);
  background: rgba(15, 13, 26, .82);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--edge);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-text { font-size: 14px; }

/* Little isometric cube built from one conic-gradient + a hexagon clip.
   Cheap, sharp, and no extra markup. */
.brand-cube,
.footer-cube,
.voxel-cube,
.card-cube {
  --top:   var(--g1-a);
  --right: var(--g1-b);
  --left:  #5b3fd6;
  background: conic-gradient(from -60deg,
              var(--top)   0 120deg,
              var(--right) 0 240deg,
              var(--left)  0);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.brand-cube {
  width: 22px;
  aspect-ratio: 1 / 1.1547;   /* regular hexagon */
  transition: transform .5s var(--ease-pop);
}
.brand:hover .brand-cube { transform: rotate(180deg) scale(1.15); }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Chunky tactile button — pixel-notched corners, presses down on click. */
.btn-voxel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 4px 0 0 #0b0918, inset 0 0 0 2px var(--edge);
  transition: transform .18s var(--ease-pop),
              box-shadow .18s var(--ease-out),
              background .25s var(--ease-out);
  /* pixel-stepped corners instead of a plain rounded rect */
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}

.btn-voxel:hover  { background: var(--panel-hi); transform: translateY(-2px); box-shadow: 0 6px 0 0 #0b0918, inset 0 0 0 2px rgba(255,255,255,.28); }
.btn-voxel:active { transform: translateY(3px); box-shadow: 0 1px 0 0 #0b0918, inset 0 0 0 2px var(--edge); }

.pixicon { width: 18px; height: 18px; flex: none; fill: var(--g1-a); }
.btn-apps .pixicon { fill: var(--g2-a); }
.pixicon .pix-hole { fill: var(--bg); }

/* Silly hover animations, one per button */
.btn-linkedin:hover .pixicon { animation: wiggle .5s var(--ease-pop); }
.btn-apps:hover     .pixicon { animation: bounce .5s var(--ease-pop); }

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-14deg) scale(1.15); }
  75%      { transform: rotate(14deg)  scale(1.15); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-6px) scale(1.12); }
}


/* ── 4. Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(88vh - var(--topbar-h));
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vw, 110px) 20px clamp(90px, 12vw, 150px);
  overflow: hidden;

  /* Slowly drifting gradient. background-position is composited cheaply. */
  background: linear-gradient(120deg, #2a1055, #5b1e6e, #123a63, #0d2f4f, #3a1250);
  background-size: 300% 300%;
  animation: drift-gradient 26s ease-in-out infinite;

  /* Pixel-stair bottom edge, so the section isn't a plain rectangle */
  clip-path: polygon(
    0 0, 100% 0,
    100% 92%, 95% 92%, 95% 100%, 90% 100%, 90% 92%, 85% 92%,
    85% 100%, 80% 100%, 80% 92%, 75% 92%, 75% 100%, 70% 100%,
    70% 92%, 65% 92%, 65% 100%, 60% 100%, 60% 92%, 55% 92%,
    55% 100%, 50% 100%, 50% 92%, 45% 92%, 45% 100%, 40% 100%,
    40% 92%, 35% 92%, 35% 100%, 30% 100%, 30% 92%, 25% 92%,
    25% 100%, 20% 100%, 20% 92%, 15% 92%, 15% 100%, 10% 100%,
    10% 92%, 5% 92%, 5% 100%, 0 100%);
}

@keyframes drift-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Drifting background cubes */
.voxel-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.voxel-cube {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1 / 1.1547;
  opacity: .5;
  will-change: transform;
  animation: cube-float var(--d) var(--ease-out) var(--t) infinite alternate;
}
.voxel-cube.alt  { --top: var(--g2-a); --right: #1596ad; --left: #0f6f80; }
.voxel-cube.lime { --top: var(--g2-b); --right: #6ea723; --left: #4d7418; }

@keyframes cube-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(18px, -34px, 0) scale(1.12); }
}

.hero-inner { position: relative; text-align: center; max-width: 760px; }

.kicker {
  margin: 0 0 18px;
  font-size: 11px;
  color: var(--g2-b);
  text-transform: uppercase;
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

.hero-title { display: grid; gap: .35em; font-size: clamp(28px, 7.5vw, 62px); }
.hero-title .line { text-shadow: 0 6px 0 rgba(0, 0, 0, .45); }
.hero-title .grad {
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Big arcade button */
.btn-chunky {
  display: inline-block;
  padding: 15px 22px;
  font-size: 12px;
  text-decoration: none;
  color: #17102b;
  background: var(--grad-2);
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 0 0 #0b0918;
  transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-out);
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}
.btn-chunky:hover  { transform: translateY(-3px); box-shadow: 0 9px 0 0 #0b0918; }
.btn-chunky:active { transform: translateY(4px);  box-shadow: 0 2px 0 0 #0b0918; }
.btn-chunky.ghost  { background: var(--grad-1); color: #fff; }


/* ── 5. Game section ────────────────────────────────────────────────────── */
.game-section {
  padding: clamp(40px, 7vw, 80px) 20px clamp(60px, 8vw, 100px);
  background:
    radial-gradient(1000px 480px at 50% -10%, rgba(138, 90, 255, .28), transparent 70%),
    var(--bg);
}

.game-shell { max-width: 680px; margin: 0 auto; }

.game-head {
  /* Match the canvas width so the HUD sits flush with its edges */
  width: min(100%, 640px, calc(76vh * 0.8));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.section-title { font-size: clamp(15px, 3.4vw, 22px); }

.hud { display: flex; gap: 10px; }
.hud-cell {
  display: grid;
  gap: 5px;
  padding: 8px 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--edge);
  clip-path: polygon(
    0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.hud-key { font-size: 8px;  color: var(--ink-dim); }
.hud-val { font-size: 13px; color: var(--g2-b); }

.canvas-wrap {
  position: relative;
  /* Grows to 640px on roomy desktops, but never taller than the viewport:
     the third term is the width implied by a height cap (ratio is 4:5). */
  width: min(100%, 640px, calc(76vh * 0.8));
  margin: 0 auto;
  background: #0a0815;
  box-shadow: 0 10px 0 0 #0b0918, inset 0 0 0 3px var(--edge);
  clip-path: polygon(
    0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
}

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 500;
  /* Keep the upscale hard-edged — this is what sells the voxel look. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;          /* we handle drags ourselves */
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 8, 21, .86);
  transition: opacity .25s var(--ease-out);
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.overlay-title { margin: 0; font-size: clamp(18px, 5vw, 26px); line-height: 1.5; color: var(--g1-a); }
.overlay-body  { margin: 0; font-size: 14px; color: var(--ink-dim); }
.overlay-hint  { margin: 0; font-size: 12px; color: #7f77ab; }

/* On-screen d-pad — only useful on touch, hidden elsewhere (see media query) */
.touch-pad { display: none; gap: 14px; margin: 16px auto 0; max-width: 640px; }
.btn-pad {
  flex: 1;
  padding: 20px 0;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--ink);
  background: var(--panel);
  border: 0;
  cursor: pointer;
  box-shadow: 0 5px 0 0 #0b0918, inset 0 0 0 2px var(--edge);
  transition: transform .12s var(--ease-pop), box-shadow .12s var(--ease-out);
  touch-action: none;
}
.btn-pad:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #0b0918, inset 0 0 0 2px var(--edge); }

.game-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-dim); text-align: center; }


/* ── 6. Apps directory ──────────────────────────────────────────────────── */
.apps-section { padding: clamp(36px, 6vw, 70px) 20px clamp(60px, 8vw, 100px); }

.apps-head { max-width: 1100px; margin: 0 auto clamp(28px, 5vw, 48px); text-align: center; }
.apps-head .section-title { font-size: clamp(18px, 4.6vw, 30px); }
.apps-head p { margin: 18px auto 0; max-width: 56ch; color: var(--ink-dim); }
.apps-head code {
  padding: 2px 6px;
  font-size: .9em;
  background: var(--panel);
  color: var(--g2-b);
}

.apps-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Cartridge card. Entrance is staggered via --i set inline on each card. */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 22px;
  background: linear-gradient(160deg, var(--panel), var(--bg-soft));
  box-shadow: inset 0 0 0 2px var(--edge);
  opacity: 0;
  transform: translateY(22px) scale(.96);
  animation: card-in .6s var(--ease-pop) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform .28s var(--ease-pop), box-shadow .28s var(--ease-out);
  clip-path: polygon(
    0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
}
.card:hover { transform: translateY(-6px) scale(1.015); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }

/* Cards for apps that actually exist get an accent edge so they read as
   real next to the placeholders. Add `is-live` as each one ships. */
.card.is-live       { box-shadow: inset 0 0 0 2px rgba(34, 211, 238, .55); }
.card.is-live:hover { box-shadow: inset 0 0 0 2px var(--g2-a); }

@keyframes card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-cube { width: 42px; aspect-ratio: 1 / 1.1547; transition: transform .45s var(--ease-pop); }
.card:hover .card-cube { transform: translateY(-4px) rotate(12deg); }
/* Alternate the two palettes so the grid reads as one system */
.card:nth-child(even) .card-cube { --top: var(--g2-a); --right: #1596ad; --left: #0f6f80; }

.card-title { font-size: 13px; }
.card-desc  { margin: 0; font-size: 15px; color: var(--ink-dim); flex: 1; }

.card-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: #17102b;
  background: var(--grad-2);
  transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-out);
  box-shadow: 0 4px 0 0 #0b0918;
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.card:nth-child(even) .card-btn { background: var(--grad-1); color: #fff; }
.card-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 0 #0b0918; }
.card-btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 #0b0918; }


/* ── 7. Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 34px 20px 46px;
  border-top: 3px solid var(--edge);
  color: var(--ink-dim);
  font-size: 14px;
}
.site-footer p { margin: 0; }
.footer-cube { width: 18px; aspect-ratio: 1 / 1.1547; flex: none; }


/* ── 8. Responsive + accessibility ──────────────────────────────────────── */

/* Hide button labels on narrow screens — icons carry the meaning */
@media (max-width: 560px) {
  .btn-label { display: none; }
  .btn-voxel { padding: 10px 12px; }
  body { font-size: 16px; }
}

/* Show the d-pad only where there's no hover (i.e. touch devices) */
@media (hover: none) and (pointer: coarse) {
  .touch-pad { display: flex; }
}

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

/* Respect users who'd rather not be wobbled at */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card { opacity: 1; transform: none; }
}