/* Growing Minds Science — arcade.css
   Shared styling for the hidden 8-bit easter-egg games (see arcade-core.js,
   dino-game.js, invaders-game.js, asteroids-game.js). Covers the overlay shell, the page-tear
   animation, the local leaderboard, and the initials-entry form. Game-specific
   controls live in their own blocks at the bottom. Loaded on pages that host
   a game.
*/

/* ---------- Hidden triggers ---------- */
.theme-toggle { position: relative; }

/* Dead-center of the theme toggle (Classes page). Invisible on purpose. */
.gms-arcade-hotspot {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  cursor: pointer;
}

/* Themed pixel-invader glyph tucked into the Articles hero. Subtle until hover. */
.gms-arcade-invader-trigger {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.28;
  color: var(--primary);
  transition: opacity var(--transition), transform var(--transition);
}
.gms-arcade-invader-trigger:hover,
.gms-arcade-invader-trigger:focus-visible { opacity: 0.92; transform: translateY(-2px); }
.gms-arcade-invader-trigger svg { display: block; width: 100%; height: 100%; }

/* A tiny orbit glyph tucked into the About portrait. */
.gms-arcade-asteroid-trigger {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 74%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 26%, transparent);
  cursor: pointer;
  opacity: 0.24;
  color: var(--primary);
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.gms-arcade-asteroid-trigger:hover,
.gms-arcade-asteroid-trigger:focus-visible {
  opacity: 0.95;
  transform: rotate(-10deg) scale(1.08);
  box-shadow: 0 0 0 1px var(--primary), 0 12px 24px -18px var(--primary);
}
.gms-arcade-asteroid-trigger svg { display: block; width: 100%; height: 100%; }

/* A tiny pixel-spark glyph tucked into the home hero photo arch. */
.gms-arcade-snake-trigger {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  cursor: pointer;
  opacity: 0.26;
  color: var(--primary);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 2;
}
.gms-arcade-snake-trigger:hover,
.gms-arcade-snake-trigger:focus-visible { opacity: 0.95; transform: scale(1.1); }
.gms-arcade-snake-trigger svg { display: block; width: 100%; height: 100%; }

/* A pixel-brick glyph tucked into the FAQ hero. */
.gms-arcade-brick-trigger {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.28;
  color: var(--primary);
  transition: opacity var(--transition), transform var(--transition);
}
.gms-arcade-brick-trigger:hover,
.gms-arcade-brick-trigger:focus-visible { opacity: 0.92; transform: translateY(-2px); }
.gms-arcade-brick-trigger svg { display: block; width: 100%; height: 100%; }

/* A pixel-envelope glyph tucked into the Contact hero. */
.gms-arcade-envelope-trigger {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.28;
  color: var(--primary);
  transition: opacity var(--transition), transform var(--transition);
}
.gms-arcade-envelope-trigger:hover,
.gms-arcade-envelope-trigger:focus-visible { opacity: 0.92; transform: translateY(-2px); }
.gms-arcade-envelope-trigger svg { display: block; width: 100%; height: 100%; }

/* ---------- Page tear-away ---------- */
body.gms-arcade-lock { overflow: hidden; }
.gms-arcade-falling { will-change: transform, opacity; }

/* ---------- Overlay shell (fullscreen, like the Pong egg) ---------- */
.gms-arcade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Mobile hardening: no pull-to-refresh, no tap-highlight flash, no
     accidental text selection mid-game. The initials input opts back in. */
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.gms-arcade-overlay input {
  user-select: text;
  -webkit-user-select: text;
}
.gms-arcade-overlay.is-open { display: block; }

/* Page already tumbled away, so the backdrop is just the clean site bg —
   the page reads as if it became the game. */
.gms-arcade-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  animation: gms-arcade-fade 360ms ease both;
}

@keyframes gms-arcade-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gms-arcade-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* The panel fills the whole viewport: HUD up top, the game scaled to fill the
   middle, help + touch controls at the bottom. */
.gms-arcade-panel {
  position: absolute;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(10px, 2vh, 22px) clamp(12px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: gms-arcade-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

@media (prefers-reduced-motion: reduce) {
  .gms-arcade-backdrop,
  .gms-arcade-panel { animation: none; }
}

.gms-arcade-panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.gms-arcade-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}
.gms-arcade-title span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-muted);
}

.gms-arcade-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
}
.gms-arcade-close:hover { color: var(--ink); border-color: var(--ink-muted); }

.gms-arcade-scores {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.gms-arcade-scores strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The stage takes all remaining height; the canvas scales up to fill it,
   preserving its pixel aspect ratio (letterboxed against the page bg). */
.gms-arcade-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gms-arcade-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

/* ---------- Overlay messages (start / game over) ---------- */
.gms-arcade-prompt[hidden] { display: none; }
.gms-arcade-prompt {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-4);
  overflow-y: auto;
  background: rgba(244, 239, 227, 0.86);
  color: #0E2A2D;
  font-family: var(--font-body);
}
[data-theme="dark"] .gms-arcade-prompt { background: rgba(18, 22, 20, 0.86); color: #ECE5D4; }
.gms-arcade-prompt__title { margin: 0; font-weight: 700; font-size: var(--text-md); }
.gms-arcade-prompt__text { margin: 0; font-size: var(--text-sm); }
.gms-arcade-prompt__actions { pointer-events: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

.gms-arcade-help {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- Local leaderboard ---------- */
.gms-arcade-lb { width: 100%; max-width: 280px; margin: 0 auto; pointer-events: none; }
.gms-arcade-lb__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.gms-arcade-lb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gms-arcade-lb__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.gms-arcade-lb__row.is-you { background: color-mix(in oklab, var(--primary) 22%, transparent); }
.gms-arcade-lb__who { font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
.gms-arcade-lb__pts { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.gms-arcade-lb__empty { font-size: var(--text-sm); color: var(--ink-muted); text-align: center; }

/* ---------- Initials entry ---------- */
.gms-arcade-initials { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gms-arcade-initials__label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.gms-arcade-initials__row { display: flex; gap: var(--space-2); }
.gms-arcade-initials__input {
  width: 4.5rem;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
  text-indent: 0.35em;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.gms-arcade-initials__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Shared on-screen control buttons (touch) ---------- */
.gms-arcade-touchbtn {
  align-self: center;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  user-select: none;
  touch-action: none;
  cursor: pointer;
  transition: transform 80ms ease, background 80ms ease;
}
.gms-arcade-touchbtn:active,
.gms-arcade-touchbtn.is-held {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
  transform: scale(0.94);
}
@media (prefers-reduced-motion: reduce) {
  .gms-arcade-touchbtn { transition: none; }
  .gms-arcade-touchbtn:active,
  .gms-arcade-touchbtn.is-held { transform: none; }
}

/* ---------- Floating virtual stick (GMSArcade.makeStick) ---------- */
/* Anchors under the thumb wherever it lands on the stage; hidden until
   touched. Translucent so the play field stays readable behind it. */
.gms-arcade-stick {
  position: absolute;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  pointer-events: none;
  z-index: 3;
}
.gms-arcade-stick__nub {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 70%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Invaders touch row (left / fire / right) ---------- */
.gms-arcade-touchrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  /* keep thumbs clear of the iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gms-arcade-touchrow .gms-arcade-touchbtn {
  flex: 1 1 0;
  min-width: 64px;
  max-width: 150px;
  min-height: 48px;
}

/* On precise pointers (mouse) we hide the on-screen touch controls. */
@media (hover: hover) and (pointer: fine) {
  .gms-arcade-touchbtn { display: none; }
  .gms-arcade-touchrow { display: none; }
}

@media (max-width: 700px) {
  .gms-arcade-panel {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: var(--space-2);
  }
  .gms-arcade-panel__head { align-items: flex-start; }
  .gms-arcade-title { font-size: 1.15rem; line-height: 1.1; }
  .gms-arcade-title span { display: inline; font-size: 0.82rem; }
  .gms-arcade-scores {
    gap: 0.25rem 0.85rem;
    font-size: 0.68rem;
    line-height: 1.25;
  }
  .gms-arcade-help {
    max-width: 100%;
    padding-inline: var(--space-2);
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .gms-arcade-touchrow {
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .gms-arcade-touchrow .gms-arcade-touchbtn {
    min-width: 62px;
    padding: 0.55rem 0.85rem;
  }
}

/* Phones held sideways: every vertical pixel goes to the play field. The
   title tagline and help line are the first things to give way; the HUD
   collapses into the header row. */
@media (max-height: 480px) and (orientation: landscape) {
  .gms-arcade-panel {
    padding: 6px clamp(10px, 3vw, 20px) calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  .gms-arcade-title { font-size: 1rem; }
  .gms-arcade-title span { display: none; }
  .gms-arcade-help { display: none; }
  .gms-arcade-scores { font-size: 0.66rem; gap: 0.2rem 0.8rem; }
  .gms-arcade-touchrow .gms-arcade-touchbtn {
    min-height: 42px;
    padding: 0.35rem 0.7rem;
  }
}