/* ============================================================
   Games section
   ------------------------------------------------------------
   Two things share this file because they share a URL prefix:

     1. The /games/ hub — an ordinary terminal-theme page.
     2. The full-bleed game player (.gp-*).

   Both now load the terminal stylesheet, so both may use
   --accent / --background / --foreground. The player loads it
   for the palette and the font only: every layout rule in the
   theme hangs off `.container`, which the player never renders.

   This file is linked LAST on the player, so the full-bleed
   overrides below beat the theme's body rules.
   ============================================================ */


/* ============================================================
   1. HUB  (/games/)
   ============================================================ */

.games-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  margin: 2rem 0 0.6rem;
  border-bottom: 1px solid rgba(120, 226, 160, 0.2);
  padding-bottom: 0.2rem;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}

.games-card {
  border: 1px solid var(--accent);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--foreground);
  display: block;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.games-card:hover {
  background: var(--accent);
  color: var(--background);
}

.games-card:hover .games-card-icon,
.games-card:hover .games-card-desc {
  color: var(--background);
}

.games-card-icon {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  display: block;
  color: var(--accent);
}

.games-card-title {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0 0 0.3rem;
  letter-spacing: 0.03em;
}

.games-card-desc {
  font-size: 0.78rem;
  opacity: 0.75;
  margin: 0;
  line-height: 1.4;
  color: var(--foreground);
}

/* Announced but not playable yet — dashed and dimmed, same language as the wiki stubs. */
.games-card--soon {
  border-style: dashed;
  opacity: 0.55;
}

.games-card-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.05rem 0.3rem;
}


/* ============================================================
   2. PLAYER  (/games/<game>/)
   ============================================================ */

.gp-body {
  /*
   * Declared here, not on .gp-bar, because .gp-stage has to subtract the exact same number and a
   * custom property is only visible to the element that declares it and its descendants — the
   * stage is the toolbar's sibling, not its child.
   */
  --gp-bar-h: 44px;

  /*
   * The exact red of the floating Ko-fi button drawn in extended_footer.html. Not a new colour:
   * the toolbar Tip Me and the floating one are the same ask in two places, and picking a
   * second red would have made them look like two unrelated things.
   */
  --gp-tip: #ff5f5f;

  height: 100%;
  /* Nothing on this page scrolls. The stage is sized to what is left of the viewport. */
  overflow: hidden;
  /* A stray tap-highlight flashing over the toolbar on mobile reads as a rendering bug. */
  -webkit-tap-highlight-color: transparent;
  /* Font, colour and background come from the theme's own body rule. Do not restate them here. */
}

/* --- Toolbar ------------------------------------------------ */

.gp-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--gp-bar-h);
  box-sizing: content-box;
  padding: 0 0.75rem;
  /* Clears the notch in landscape, where the toolbar runs the full width of the display. */
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);

  /* Smaller than the site header's 1rem — this is a strip above a game, not a page masthead. */
  font-size: 0.85rem;
  user-select: none;
}

.gp-bar a {
  color: var(--accent);
  text-decoration: none;
}

.gp-bar__home {
  flex: 0 0 auto;
  display: inline-flex;
}

/*
 * `.logo` is the theme's class, inherited wholesale: accent background, background-coloured text,
 * bold. Only the padding is tightened, because the site version is sized for a page masthead.
 */
.gp-bar__home .logo {
  padding: 4px 9px;
}

/*
 * Every segment shares one typographic treatment, set once here and inherited — same weight, same
 * tracking, same size, matching .wiki-breadcrumb. The trail is one phrase that happens to contain
 * a link; the moment the halves differ in weight or tracking they stop reading as one phrase and
 * start reading as two different fonts.
 *
 * "You are here" is carried by opacity alone below. Emphasis, not typography — that distinction is
 * the whole reason this looks like a breadcrumb instead of a heading with a prefix stuck on it.
 */
.gp-bar__crumb {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-weight: normal;
  letter-spacing: 0.04em;
}

/* Underline-on-hover only, matching .wiki-breadcrumb a — the ancestor is a way out, not a shout. */
.gp-bar .gp-bar__crumb-up {
  opacity: 0.7;
  border-bottom: 1px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.gp-bar .gp-bar__crumb-up:hover {
  opacity: 1;
  border-bottom-color: var(--accent);
}

.gp-bar__crumb-sep {
  opacity: 0.5;
  margin: 0 0.35em;
  color: var(--accent);
}

/* Weight, tracking and size all come from .gp-bar__crumb. Only the emphasis is set here. */
.gp-bar__title {
  color: var(--accent);
  white-space: nowrap;
}

/*
 * The theme's signature dashes, copied from .header__logo::after. It doubles as the flexible
 * spacer, so everything after it is pinned to the right edge.
 */
.gp-bar__rule {
  flex: 1 1 auto;
  min-width: 20px;
  height: 28px;
  background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
}

/*
 * The theme styles bare <button> with a 4px accent border and 18px padding — a page-level call to
 * action, far too heavy for a strip this size. Both the link and the button are restated here so
 * they match each other exactly rather than one inheriting and the other not.
 */
.gp-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: normal;
  line-height: 1.54em;
  cursor: pointer;
  transition: background 0.15s linear, color 0.15s linear;
}

.gp-bar__link:hover {
  background: var(--accent);
  color: var(--background);
}

/*
 * The one thing in the bar that is asking for something rather than just being available, so it
 * is the one thing allowed to break the green. Red border, red bold label, and it fills solid on
 * hover — the same invert the rest of the bar uses, so it stands out by colour, not by behaving
 * differently.
 *
 * Deliberately NOT animated. A pulse or a glow looping forever beside a game competes with the
 * thing the player came for, and a tip button that nags is a tip button people learn to ignore.
 */
/*
 * Scoped to `.gp-bar` for weight, not for reach: `.gp-bar a` above is (0,1,1) and a bare
 * `.gp-bar__tip` is (0,1,0), so the green would quietly win and this rule would do nothing.
 */
.gp-bar .gp-bar__tip {
  border-color: var(--gp-tip);
  color: var(--gp-tip);
  font-weight: bold;
}

.gp-bar .gp-bar__tip:hover {
  background: var(--gp-tip);
  color: var(--background);
}

.gp-bar__fs {
  padding: 4px 8px;
}

/* --- Stage -------------------------------------------------- */

.gp-stage {
  /*
   * `dvh` rather than `vh`: on mobile Safari and Chrome, `100vh` is the viewport with the browser
   * bars *hidden*, so the game would be overscrolled by exactly the height of the address bar
   * until the user swiped it away.
   */
  height: calc(100dvh - var(--gp-bar-h) - env(safe-area-inset-top));
  width: 100%;
  /*
   * The game's own background, not the site's — this is what shows while the ~12 MB payload
   * downloads, and it should hand over to the first real frame without a flash of another colour.
   */
  background-color: var(--gp-bg, #0E1116);
}

/* No `dvh` support — fall back to the old behaviour rather than to no height at all. */
@supports not (height: 100dvh) {
  .gp-stage {
    height: calc(100vh - var(--gp-bar-h) - env(safe-area-inset-top));
  }
}

.gp-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Narrow screens ----------------------------------------- */
/*
 * Horizontal room is the scarce resource on a phone. The Tip Me wording goes and the cup carries
 * it alone; the dashes stay, because they are the spacer that holds the layout apart.
 */
/*
 * The bar must never wrap, so it sheds content in steps as the viewport narrows — least
 * informative first. Measured at the bar's own font, not guessed: the full row needs ~700px, so
 * the first step lands just above that.
 *
 *   >=761px   [Archison]  Browser Games / CORELOCK  ///  CORELOCK on Android   Tip Me   [ ]
 *   <=760px   [Archison]  Browser Games / CORELOCK  ///  Android              Tip Me   [ ]
 *   <=620px   [Archison]  Browser Games / CORELOCK  ///  robot  cup  [ ]
 *   <=380px   [Archison]  CORELOCK  ///  robot  cup  [ ]
 */

/* The game's name goes first: on this page it is the one word already on screen behind the bar. */
@media (max-width: 760px) {
  .gp-bar__linklabel-long {
    display: none;
  }
}

/* Words give way to icons, and the whole bar steps down a size with them. */
@media (max-width: 620px) {
  .gp-bar {
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .gp-bar__linklabel {
    display: none;
  }

  /*
   * No per-segment override here. Tightening the tracking on the title alone is exactly the
   * mismatch this layout was fixed for — if the crumb needs to shrink, shrink .gp-bar__crumb so
   * both halves move together.
   */
}

/*
 * Below ~380px the full crumb, the logo and both buttons stop fitting on one line, and something
 * has to give. The ancestor link goes rather than the game's name: the logo beside it already
 * leads out of the player, so the exit survives — this degrades to exactly the bar that shipped
 * before the crumb existed, which is a known-good layout rather than a squeezed one.
 */
@media (max-width: 380px) {
  .gp-bar__crumb-up,
  .gp-bar__crumb-sep {
    display: none;
  }
}