/* Keeps shared metadata and navigation from interfering with game play. */
.seo-content.game-info-panel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* These links used to be viewport-fixed, so they followed play and could
   cover controls or the game HUD. They must participate in layout: absolute
   positioning still overlays the game even when it is anchored at page start. */
#siteHomeLink,
#gameMenuLink,
a[aria-label="Back to Wong Hong Wei"],
a[aria-label="Back to game menu"] {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: fit-content;
  margin: 12px 12px 0 !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Older standalone games use their own class names rather than the shared
   ARIA labels. Keep their return links thumb-sized too. */
.back,
.calm-back,
.home-link,
.nav-back,
.ttt-back,
a[href="/"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

a[aria-label="Back to Wong Hong Wei"]:focus-visible,
a[aria-label="Back to game menu"]:focus-visible {
  outline: 3px solid #58e7ff;
  outline-offset: 3px;
}

/* One destination, one label. Games historically called this link "Home",
   "Wong Hong Wei", or "All games"; its visible label is now consistent. */
#siteHomeLink,
a[aria-label="Back to Wong Hong Wei"],
a[href="/"] {
  font-size: 0 !important;
}

#siteHomeLink::after,
a[aria-label="Back to Wong Hong Wei"]::after,
a[href="/"]::after {
  content: "← All games";
  font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

:where(button, input, select, textarea, a[href]):focus-visible {
  outline: 3px solid #58e7ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (pointer: coarse), (max-width: 640px) {
  a[href="/"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 600px) {
  #siteHomeLink,
  #gameMenuLink,
  a[aria-label="Back to Wong Hong Wei"],
  a[aria-label="Back to game menu"] { margin: 8px 10px 0 !important; }

  /* Tic Tac Toe: keep the active 3x3 board and restart action together. */
  .ttt-section { align-items: flex-start; min-height: 0; padding: 12px 10px; }
  .ttt-card { padding: 14px; border-radius: 18px; }
  .ttt-title { font-size: 24px; }
  .ttt-subtitle { margin-bottom: 12px; font-size: 13px; }
  .ttt-board { margin-bottom: 12px; gap: 5px; }
  .ttt-board[data-size="3"] { width: min(62vw, 232px); }
  .ttt-board[data-size="3"] .ttt-cell { font-size: 32px; border-radius: 11px; }
  .ttt-reset { min-height: 44px; }

  /* Snakes: reserve room for the complete touch D-pad under the board. */
  .stage:has(#board) { padding: 10px; }
  .stage:has(#board) .board-wrap { width: min(50vh, 280px); border-width: 6px; }
  .stage:has(#board) .touch-pad {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 44px);
    margin-top: 8px;
  }
  .stage:has(#board) .touch-pad button { min-height: 44px; }

  /* Put the live Minesweeper board ahead of the setup panel on phones. */
  .game:has(.board-panel) { display: flex; flex-direction: column; gap: 10px; }
  .game:has(.board-panel) .board-panel { order: -1; }

  /* Board games: preserve the actual game area before optional marketing. */
  #kt-open-knights-tour .kt-hero { display: none; }
  #kt-open-knights-tour { padding-top: 12px; }
  #kt-open-knights-tour .kt-board-panel { padding: 12px; }

  body:has(.checkers-board) .wrap { padding: 10px; }
  body:has(.checkers-board) .hero { display: none; }
  body:has(.checkers-board) .toolbar { padding: 10px; gap: 8px; }
  body:has(.checkers-board) .game { padding: 10px; gap: 12px; }
  body:has(.checkers-board) .board { width: min(100%, 320px); }
  body:has(.checkers-board) .side { gap: 8px; }
  body:has(.checkers-board) .side .card { display: none; }
  body:has(.checkers-board) .status { padding: 10px; }

  /* Fullscreen arcade canvases sit after the in-flow home/menu links. Size
     their active play view to the remaining visual viewport instead of one
     full viewport, otherwise the lower HUD and touch controls are clipped. */
  body:has(#bgCanvas) #app {
    min-height: calc(100dvh - 44px) !important;
    height: calc(100dvh - 44px) !important;
  }
  body:has(#bgCanvas) #app .screen,
  body:has(#bgCanvas) #app .game-area { min-height: inherit !important; }

  body:has(#gameCanvas) #gameCanvas {
    height: calc(100dvh - 44px) !important;
    max-height: calc(100dvh - 44px) !important;
  }
  body:has(#gameCanvas).has-mobile-controls #gameCanvas {
    height: calc(100dvh - 180px) !important;
    max-height: calc(100dvh - 180px) !important;
  }
}