/* ==========================================================================
   Antariksh Arcade (antariksh.io) — shared stylesheet
   Brand: Antariksh (see antariksh-brand skill). Flat, sharp-cornered,
   monochrome base with a deliberate stellar accent (Protostar red — a young,
   volatile star, matched to fast-action arcade games).
   ========================================================================== */

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Muli-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/Muli-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/Muli-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/Muli-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/Muli-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --antariksh-black: #111111;
  --antariksh-white: #ffffff;

  --gray-0: #ffffff;
  --gray-50: #f7f7f8;
  --gray-100: #ededef;
  --gray-200: #dcdce0;
  --gray-300: #c2c2c8;
  --gray-400: #9c9ca5;
  --gray-500: #75757f;
  --gray-600: #55555e;
  --gray-700: #3d3d44;
  --gray-800: #262629;
  --gray-900: #111111;

  /* Stellar accent — Protostar / Red Giant: young, energetic, volatile —
     matched deliberately to this domain's fast-action arcade games. */
  --accent: #ff3b00;
  --accent-strong: #ff4500;
  --accent-soft: #ff6f59;
  --accent-ink: #111111; /* text color when placed on the accent */

  /* Full stellar palette (see antariksh-brand skill /
     references/stellar-color-palette.md) — the complete 12-stage set,
     available site-wide so any surface can draw a deliberate, named star
     color rather than reaching for an arbitrary hex. Each game on this
     site is assigned one of these as its own identity color (see the
     game cards below and each game page's inline style block). */
  --stellar-protostar: #ff3b00;
  --stellar-o-type: #9bb0ff;
  --stellar-b-type: #cad8ff;
  --stellar-a-type: #f8f9ff;
  --stellar-f-type: #fff4ea;
  --stellar-sun: #fff1d0;
  --stellar-k-type: #ffd2a1;
  --stellar-red-dwarf: #ff6f59;
  --stellar-red-giant: #ff4500;
  --stellar-blue-supergiant: #84a9ff;
  --stellar-white-dwarf: #e6faff;
  --stellar-black-dwarf: #121214;

  --font-sans: "Mulish", "Muli", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Share Tech Mono", "Courier New", monospace;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  --radius-none: 0px;
  --radius-sm: 2px;

  /* This product is always dark — "the darkness of space" is the point,
     not a system-preference toggle. */
  --surface-base: var(--gray-900);
  --surface-raised: #17171a;
  --surface-recessed: #0a0a0b;
  --surface-hover: var(--gray-800);

  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-400);
  --text-disabled: var(--gray-600);

  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --focus-ring: var(--gray-50);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-lg); }

/* Starfield backdrop — reserved for marketing/hero surfaces per brand
   guidance; used here on the hub landing page only, not inside games. */
.starfield {
  position: relative;
  background-color: var(--surface-base);
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 220px 180px, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 300px 40px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 340px 220px, rgba(255,255,255,.4), transparent);
  background-repeat: repeat;
  background-size: 380px 260px;
}

/* Nebula wash — a soft, low-opacity blend of this site's three game
   identity colors (Protostar / K-type / Blue Supergiant). Purely
   decorative color, sitting behind the starfield dots and all content;
   this is the "gradients" use case the stellar palette is explicitly
   meant for, kept faint enough not to compete with text contrast. */
.starfield::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(720px 480px at 8% -10%, rgba(255,59,0,0.16), transparent 60%),
    radial-gradient(640px 460px at 88% 8%, rgba(132,169,255,0.14), transparent 60%),
    radial-gradient(600px 420px at 55% 90%, rgba(255,210,161,0.10), transparent 60%);
}
.starfield > * { position: relative; z-index: 1; }

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 20;
  background: rgba(17,17,17,0.92);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: var(--space-sm);
  text-decoration: none;
}
.brand img { width: 28px; height: 28px; }
.brand .wordmark {
  font-weight: 800; font-size: 16px; letter-spacing: 0.04em;
  color: var(--text-primary);
}
.brand .product-tag {
  font-weight: 600; font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent-soft); text-transform: uppercase;
  border-left: 1px solid var(--border-strong);
  padding-left: var(--space-sm); margin-left: 2px;
}
.site-nav { display: flex; gap: var(--space-lg); }
.site-nav a {
  font-weight: 600; font-size: 14px; text-decoration: none;
  color: var(--text-secondary);
}
.site-nav a:hover, .site-nav a.is-active { color: var(--text-primary); }

/* ---- Hero ---- */
.hero { padding: var(--space-3xl) 0 var(--space-2xl); }
.eyebrow {
  font-weight: 600; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-soft);
  margin: 0 0 var(--space-md);
}
.hero h1 {
  font-weight: 900; font-size: clamp(32px, 6vw, 56px);
  line-height: 1.05; margin: 0 0 var(--space-md); max-width: 16ch;
}
.hero p {
  font-size: 17px; color: var(--text-secondary); max-width: 52ch;
  margin: 0 0 var(--space-xl);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  padding: 12px 22px; border-radius: var(--radius-none);
  border: 1px solid var(--border-strong);
  text-decoration: none; cursor: pointer;
  background: transparent; color: var(--text-primary);
}
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #111111;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }

/* ---- Games grid ---- */
.section-title {
  font-weight: 800; font-size: 22px; margin: 0 0 var(--space-lg);
}
.games-grid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding-bottom: var(--space-3xl);
}
.game-card {
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--card-accent, var(--accent));
  background: var(--surface-raised);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.game-card:hover {
  border-color: var(--border-strong);
  border-top-color: var(--card-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 32px -8px var(--card-accent, var(--accent));
}
.game-card .glyph {
  width: 40px; height: 40px; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--card-accent, var(--accent)); font-size: 20px;
}
.game-card h3 { font-weight: 700; font-size: 18px; margin: 0; }
.game-card p { color: var(--text-secondary); font-size: 14px; margin: 0; flex: 1; }
.game-card .meta {
  display: flex; gap: var(--space-sm); font-size: 11px;
  color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border-default);
  padding: var(--space-2xl) 0; color: var(--text-secondary); font-size: 13px;
}
.site-footer a { color: var(--text-primary); text-decoration: underline; }
.site-footer .foot-row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md);
}

/* ---- Game page chrome ---- */
.game-header { padding: var(--space-md) 0; }
.back-link {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.back-link:hover { color: var(--text-primary); }

.game-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg);
}
.game-title-row h1 { font-size: 26px; font-weight: 800; margin: 0; }
.game-title-row p { color: var(--text-secondary); font-size: 14px; margin: 4px 0 0; }

.game-stage {
  border: 1px solid var(--border-strong);
  background: #000;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 720px;
  margin: 0 auto;
}
.game-stage canvas { display: block; width: 100%; height: 100%; }

/* subtle CRT scanline texture — retro cue layered on top of the brand chrome */
.scanlines::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
}
.scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
}

.hud {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 720px; margin: var(--space-md) auto 0;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.03em; color: var(--accent-soft);
}
.hud .hud-item { display: flex; flex-direction: column; gap: 2px; }
.hud .hud-label {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-disabled); text-transform: uppercase;
}

.controls-row {
  max-width: 720px; margin: var(--space-lg) auto 0;
  display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;
}

.panel {
  max-width: 720px; margin: var(--space-xl) auto 0;
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  padding: var(--space-lg);
}
.panel h2 { font-size: 14px; font-weight: 700; margin: 0 0 var(--space-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.panel p, .panel li { font-size: 14px; color: var(--text-secondary); }
.panel ul { margin: 0; padding-left: 1.1em; }

.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--space-md); text-align: center;
  background: rgba(0,0,0,0.78);
  padding: var(--space-lg);
}
.overlay[hidden] { display: none; }
.overlay h2 { font-size: 22px; font-weight: 800; margin: 0; }
.overlay p { color: var(--text-secondary); font-size: 14px; margin: 0; max-width: 32ch; }

/* touch dpad, used by canvas games on small screens */
.touch-pad { display: none; }
@media (max-width: 640px) {
  .touch-pad {
    display: flex; justify-content: space-between; max-width: 720px;
    margin: var(--space-md) auto 0; gap: var(--space-md);
  }
  .touch-pad .tp-btn {
    flex: 1; padding: 18px 0; text-align: center;
    border: 1px solid var(--border-strong); background: var(--surface-raised);
    font-weight: 700; font-size: 20px; user-select: none;
  }
}

@media (max-width: 560px) {
  .site-nav a:not(.always-show) { display: none; }
}