/*
  Games lane — page-specific demo styles.
  Loaded after /main_style.css and /portfolio/portfolio.css.

  Contains:
    0. Lane polish       — optical alignment for icon+text pairs, balanced pill
                           padding, letter-spacing centering compensation.
    1. .bk-*             — Neon Breaker (HUD, canvas stage, overlay states).
    2. .gr-*             — TAG Raiders: the live game embedded inline. Built as a
                           deliberate sibling of the Breaker stage — same framing
                           language, same radius/border/background — with a HUD
                           strip, a starfield poster that covers the load, and a
                           featured surface treatment so it reads as the page's
                           showcase piece.
  Accent = lane-games (#ff5e8a / #ff8fb0).
*/

/* ========================= 0. LANE POLISH ============================== */

/* Icon+text pairs are boxed to a shared width in portfolio.css. Only the two
   selectors that rule does not cover stay local. */
.pro-page .demo-caption i,
.pro-page .pill i {
  flex: none;
  width: 1em;
  text-align: center;
}

/* Captions wrap to 2-3 lines on narrow screens — pin the icon to the first
   line instead of letting it float to the vertical middle of the block. */
.pro-page .demo-caption { align-items: flex-start; }
.pro-page .demo-caption i { margin-top: 0.2rem; }

/* Pills / chips: main_style.css gives .pill a trailing `margin-right`, which
   stacks on top of the flex `gap` of every container we use it in. That put a
   phantom half-gap after the last chip in each row and pushed centred rows
   visibly off to the left. Gap alone owns the spacing here. */
.pro-page .pill {
  margin-right: 0;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  line-height: 1.35;
}

/* Optical centering for letter-spaced text.
   `letter-spacing` also applies after the LAST character, so a centred string
   sits half a letter-space left of true centre, and a pill's right padding
   looks bigger than its left. Compensate rather than eyeball it. */
.pro-page .demo-num { margin-right: -0.22em; }          /* bare text, centred   */
.pro-page .lane-kicker { padding-right: calc(0.9rem - 0.14em); }  /* pill, keep box centred */
.pro-page .hc-tag { margin-right: -0.05em; }

/* ===================== 1. DEMO 1: NEON BREAKER (game-breaker) ===================== */

.bk {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.2rem;
}

.bk-hud {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bk-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-stat b {
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-stat.bk-combo b { color: color-mix(in srgb, var(--accent) 88%, #fff); }
/* hearts are letter-spaced for legibility — claw the trailing space back so the
   pill's right padding matches its left */
.bk-stat.bk-lives b { color: #ff8fb0; letter-spacing: 0.05em; margin-right: -0.05em; }

.bk-pause {
  margin-left: auto;
  height: 34px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.04));
  color: var(--text);
  font-weight: 750;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background 180ms ease, transform 140ms ease, opacity 180ms ease;
}
.bk-pause i { width: 1em; text-align: center; }
.bk-pause:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.04)); transform: translateY(-1px); }
.bk-pause:disabled { opacity: 0.4; cursor: default; }

.bk-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, #0a0b16, #05060d);
  border: 1px solid rgba(255,255,255,0.09);
  will-change: transform;
}

.bk-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}
.bk-canvas:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }

/* Overlay states */
.bk-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, #05060d 62%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2;
  cursor: pointer;
  transition: opacity 220ms ease;
}
.bk-overlay[hidden] { display: none; }

.bk-overlay-card {
  text-align: center;
  max-width: 340px;
  padding: 0 0.5rem;
  animation: bkCardIn 300ms cubic-bezier(.2,.9,.2,1);
}
@keyframes bkCardIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

.bk-overlay-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  padding-left: 0.02em;              /* optical centre against the letter-spacing */
  color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.bk-overlay-title.bk-neon {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bk-overlay-sub { margin: 0 0 1.1rem; color: rgba(255,255,255,0.72); font-size: 0.88rem; line-height: 1.5; }
.bk-overlay-score { color: color-mix(in srgb, var(--accent) 85%, #fff); font-weight: 800; }

.bk-play {
  height: 46px;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #10041f;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 160ms ease, box-shadow 220ms ease;
}
.bk-play i { width: 1em; text-align: center; }
.bk-play:hover { transform: translateY(-2px); box-shadow: 0 20px 52px color-mix(in srgb, var(--accent) 55%, transparent); }
.bk-play:active { transform: translateY(0); }

/* keyboard hint: a centred, comfortably-spaced row that wraps cleanly */
.bk-hint {
  margin: 0.9rem 0 0;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  line-height: 1.7;
}
.bk-hint kbd {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  min-width: 1.35em;
  text-align: center;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
}

.bk-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.bk-note i { flex: none; width: 1em; text-align: center; margin-top: 0.2rem; color: color-mix(in srgb, var(--accent) 78%, var(--muted)); }
.bk-note a { color: color-mix(in srgb, var(--accent) 85%, #fff); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.bk-note a:hover { border-bottom-color: var(--accent); }

/* ============ 2. DEMO 2: TAG RAIDERS — live game, embedded ============ */

/* Featured surface. The page's one focal point: same shape as every other
   stage (so it reads as a sibling of Breaker), but lifted with an accent-tinted
   border, a warmer surface and a wider shadow, plus a hairline of accent along
   the top edge. */
.demo-stage.gr-featured {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card) 42%);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.46),
    0 0 46px color-mix(in srgb, var(--accent) 13%, transparent);
}
.demo-stage.gr-featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
}

.gr {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.2rem;
}

/* ---- HUD strip (mirrors .bk-hud) ---- */

.gr-hud {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gr-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
}
.gr-name i { flex: none; width: 1em; text-align: center; color: color-mix(in srgb, var(--accent) 82%, #fff); }

.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* letter-spaced caps: shave the trailing space off the right padding */
  padding: 0.4rem calc(0.8rem - 0.1em) 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 15%, rgba(255,255,255,0.03));
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 26%, #fff);
}
.gr-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #46e6a8;
  box-shadow: 0 0 10px #46e6a8;
  animation: grLive 2.4s ease-in-out infinite;
}
@keyframes grLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

.gr-fs {
  margin-left: auto;
  height: 34px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.04));
  color: var(--text);
  font-weight: 750;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background 180ms ease, transform 140ms ease;
}
.gr-fs i { flex: none; width: 1em; text-align: center; }
.gr-fs:hover { background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.04)); transform: translateY(-1px); }
.gr-fs[hidden] { display: none; }

/* ---- Game stage (mirrors .bk-stage exactly) ---- */

.gr-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, #0a0b16, #05060d);
  border: 1px solid rgba(255,255,255,0.09);
}

/* The live frame sits under the poster and is revealed on its `load` event. */
.gr-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  z-index: 1;
}

/* Fullscreen: drop the letterbox ratio and the rounded frame.
   Separate rules on purpose — one unsupported pseudo would invalidate a list. */
#gr-stage:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; border: 0; }
#gr-stage:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; border: 0; }

/* ---- Poster / skeleton shown while the game loads ---- */

.gr-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 8%, #141033 0%, #0a0820 45%, #05040f 100%);
  transition: opacity 380ms ease;
}
.gr-poster.is-gone { opacity: 0; pointer-events: none; }
.gr-poster[hidden] { display: none; }

/* Layered CSS starfield (three parallax planes via box-shadow star fields) */
.gr-stars, .gr-stars2, .gr-stars3 {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
}
.gr-stars {
  box-shadow:
    40px 30px #fff, 120px 80px #cbd6ff, 200px 50px #fff, 280px 140px #fff, 360px 90px #b7c6ff,
    440px 200px #fff, 520px 60px #fff, 60px 180px #fff, 180px 240px #d7e0ff, 320px 20px #fff,
    480px 160px #fff, 560px 220px #c7d2ff, 100px 120px #fff, 240px 190px #fff, 400px 250px #fff,
    620px 110px #fff, 700px 40px #d7e0ff, 780px 170px #fff, 860px 90px #fff, 940px 210px #b7c6ff,
    660px 260px #fff, 820px 300px #fff, 900px 30px #fff, 740px 330px #cbd6ff, 980px 130px #fff,
    140px 330px #fff, 300px 360px #fff, 460px 320px #d7e0ff, 580px 390px #fff, 880px 380px #fff;
  opacity: 0.9;
  animation: grDrift 26s linear infinite;
}
.gr-stars2 {
  box-shadow:
    80px 60px #a7b6ff, 160px 150px #fff, 260px 100px #fff, 340px 210px #cdb4ff, 420px 40px #fff,
    500px 130px #fff, 30px 220px #fff, 140px 40px #fff, 300px 180px #ffb4d4, 460px 230px #fff,
    540px 90px #fff, 220px 70px #fff, 600px 200px #fff, 680px 80px #cdb4ff, 760px 250px #fff,
    840px 140px #fff, 920px 60px #ffb4d4, 640px 340px #fff, 800px 20px #fff, 960px 290px #fff,
    380px 300px #fff, 200px 400px #fff, 520px 420px #cdb4ff, 720px 400px #fff, 60px 300px #fff;
  opacity: 0.7;
  animation: grDrift 40s linear infinite;
}
.gr-stars3 {
  box-shadow:
    50px 100px #ff8fb0, 200px 200px #fff, 380px 150px #fff, 520px 190px #b7c6ff, 110px 250px #fff,
    290px 120px #fff, 430px 100px #ffd0e0, 610px 160px #fff, 750px 110px #ff8fb0, 890px 230px #fff,
    970px 70px #fff, 690px 300px #ffd0e0, 350px 380px #fff, 850px 350px #fff, 130px 420px #b7c6ff;
  opacity: 0.55;
  animation: grDrift 60s linear infinite;
}
@keyframes grDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-140px); }
}

.gr-neblae {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 22% 78%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(38% 46% at 82% 30%, rgba(140,110,255,0.28), transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.gr-poster-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.2rem;
  text-align: center;
  z-index: 2;
}
.gr-title {
  font-size: clamp(1.6rem, 5.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  padding-left: 0.16em;              /* optical centre against the letter-spacing */
  line-height: 1.1;
  background: linear-gradient(120deg, #fff, var(--accent2) 45%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 40%, transparent));
}
.gr-sub {
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em;              /* optical centre against the letter-spacing */
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.gr-loading {
  margin: 0.9rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.66);
}
.gr-loading i { flex: none; width: 1em; text-align: center; font-size: 1rem; color: color-mix(in srgb, var(--accent) 80%, #fff); }
.gr-loading[hidden] { display: none; }

/* Honest failure state — replaces the spinner if the frame never loads */
.gr-fail {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: 40ch;
}
.gr-fail[hidden] { display: none; }
.gr-fail-msg {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
  color: rgba(255,255,255,0.72);
}
.gr-fail-msg i { flex: none; width: 1em; text-align: center; margin-top: 0.2rem; color: #ffd17d; }
.gr-fail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.04));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}
.gr-fail-link i { flex: none; width: 1em; text-align: center; font-size: 0.76rem; }
.gr-fail-link:hover { background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,0.04)); }

/* ---- Capability chips ---- */

.gr-caps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.gr-cap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
}
.gr-cap i { flex: none; width: 1em; text-align: center; color: color-mix(in srgb, var(--accent) 80%, #fff); }

/* ---- Foot: honest note + escape hatch ---- */

.gr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}
.gr-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.gr-note i { flex: none; width: 1em; text-align: center; margin-top: 0.2rem; color: color-mix(in srgb, var(--accent) 78%, var(--muted)); }

.gr-ext {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 750;
  color: color-mix(in srgb, var(--accent) 85%, #fff);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.gr-ext i { flex: none; width: 1em; text-align: center; font-size: 0.74rem; }
.gr-ext:hover { border-bottom-color: var(--accent); }

/* ========================= 3. RESPONSIVE ============================== */

@media (max-width: 640px) {
  .bk-hud { gap: 0.4rem; }
  .bk-stat { padding: 0.34rem 0.6rem; font-size: 0.66rem; }
  .bk-pause { width: 100%; margin-left: 0; order: 5; }

  .gr { padding: 0.9rem 0.9rem 1.1rem; }
  .gr-hud { gap: 0.4rem; }
  .gr-name { padding: 0.34rem 0.7rem; font-size: 0.8rem; }
  .gr-badge { font-size: 0.62rem; padding: 0.34rem calc(0.68rem - 0.1em) 0.34rem 0.6rem; }
  .gr-fs { width: 100%; margin-left: 0; order: 5; }

  /* Portrait-ish frame so the game is actually usable at phone widths: 16/9
     leaves ~190px of playfield, which is unplayable. The game's own layout is
     fluid, so it letterboxes inside whatever box we give it — it never
     overflows. Kept under half the viewport height so the section is still easy
     to scroll past on a phone. */
  .gr-stage { aspect-ratio: 4 / 5; }

  .gr-caps { gap: 0.4rem; }
  .gr-cap { font-size: 0.75rem; padding: 0.38rem 0.7rem; }
  .gr-foot { justify-content: center; text-align: center; }
  .gr-note { justify-content: center; }
}

/* ======================= 4. REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce) {
  .bk-overlay-card { animation: none; }
  .gr-stars, .gr-stars2, .gr-stars3 { animation: none; }
  .gr-dot { animation: none; }
  .gr-poster { transition: none; }
  .gr-loading i { animation: none; }
  .gr-fs:hover, .bk-pause:hover:not(:disabled) { transform: none; }
}