/* ========================================
   GAMES EXPLORER PAGE
   Loaded after chess-working.css so the design tokens
   (--bg, --surface, --text, --gap, etc.) are already in :root.

   Layout: vertical flex column. Title, tabs row, tile grid (flex-1
   so it absorbs remaining space and scrolls when tile count grows
   past one screen), utility row.
   ======================================== */

.page.games-explorer-page.active {
  --games-explorer-unit: min(calc(100vh / 9), calc(100vw / 12));

  display: flex !important;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--bg);
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ---- Title ---- */
.games-explorer-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--text);
  font-weight: 700;
  font-size: clamp(20px, calc(var(--games-explorer-unit) * 0.5), 56px);
  letter-spacing: 0.5px;
  text-align: center;
  padding: 4px 0;
}

/* ---- Tabs row: My Games | More Games ----
   Height matches a single row of the Eye Gaze settings panel
   (.eye-gaze-settings divides 100vh evenly across ~7 rows). */
.games-explorer-tabs-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  height: clamp(72px, 14vh, 140px);
}

.games-explorer-tab,
.games-explorer-edit-btn {
  background: var(--surface);
  border: var(--border-width) solid #fff;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 700;
  font-size: clamp(15px, calc(var(--games-explorer-unit) * 0.32), 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}
.games-explorer-tab:hover,
.games-explorer-edit-btn:hover {
  transform: translateY(-2px);
  background: var(--surface-hover);
}
.games-explorer-tab.selected,
.games-explorer-edit-btn.selected {
  background: var(--state-selected);
  border-color: var(--border-selected);
}

/* ---- Tile grid ----
   Auto-fill so the grid expands or contracts based on viewport
   width. Tile floor is 180px (per spec §1.7's eye-gaze accessibility
   target — close enough to 200px for desktop while leaving room for
   ~5-7 per row at 1366px wide). Aspect-ratio:1 keeps tiles square.
   The grid scrolls vertically when more games are added than fit on
   one screen — needed once we go beyond ~12-15 tiles. */
/* Exactly 6 columns, so each tile is 1/3 of a tab's width. With
   fewer than 6 games the trailing cells stay empty (visual cue
   that there's room for more games). aspect-ratio:1 keeps tiles
   square, so on a 1366px-wide viewport each tile is ~225×225. */
.games-explorer-tile-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: max-content;
  gap: var(--gap);
  align-content: start;
  overflow-y: auto;
  min-height: 0;
}

.games-explorer-tile {
  background: var(--surface);
  border: var(--border-width) solid #fff;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  aspect-ratio: 1;
}
.games-explorer-tile:hover {
  transform: translateY(-2px);
  background: var(--surface-hover);
}
.games-explorer-tile-icon {
  font-size: clamp(36px, calc(var(--games-explorer-unit) * 0.7), 72px);
  line-height: 1;
}
.games-explorer-tile-label {
  font-size: clamp(13px, calc(var(--games-explorer-unit) * 0.24), 20px);
}

/* Edit-mode visuals — when the grid is in edit mode, tiles show a
   directional arrow indicating where they'd go on tap. The arrow
   sits in the top-right corner so it doesn't fight the icon. The
   tile itself dims slightly so it's clear edit mode is active and
   tapping won't launch a game. */
.games-explorer-tile-grid.editing .games-explorer-tile {
  cursor: pointer;
  background: var(--surface);
  border-style: dashed;
  border-color: var(--state-selected);
}
.games-explorer-tile-edit-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: clamp(20px, calc(var(--games-explorer-unit) * 0.4), 32px);
  line-height: 1;
  pointer-events: none;
}

/* ---- Utility row: Rest | Language | Eye Gaze Settings | Edit ----
   ( + Minimize | Exit in Electron — see .is-electron rule below.)
   Height matches the tabs row + a single Eye Gaze settings row. */
.games-explorer-utility-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--gap);
  height: clamp(72px, 14vh, 140px);
}

/* Hide window-control buttons outside Electron — they have no
   sensible browser implementation (window.close() typically only
   works for tabs the script opened; there's no minimize). */
.electron-only { display: none; }

/* In Electron, expose the two extra buttons and stretch the grid
   from 4 to 6 columns so every tile keeps a fair share of the row. */
.games-explorer-page.is-electron .games-explorer-utility-row {
  grid-template-columns: repeat(6, 1fr);
}
.games-explorer-page.is-electron .electron-only { display: flex; }

.games-explorer-btn {
  background: var(--surface);
  border: var(--border-width) solid #fff;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 700;
  font-size: clamp(13px, calc(var(--games-explorer-unit) * 0.28), 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
  padding: 6px;
  box-sizing: border-box;
}
.games-explorer-btn:hover { transform: translateY(-2px); background: var(--surface-hover); }

.games-explorer-rest-container { display: flex; align-items: stretch; }

/* createRestButton ships with inline styles (orange bg, fixed 60px
   min-height). Override so it fills its grid cell like the other
   utility buttons. */
.games-explorer-rest-container #eyeGazeCoreRestBtn {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  font-size: clamp(13px, calc(var(--games-explorer-unit) * 0.28), 24px) !important;
  border-radius: var(--radius) !important;
  border: var(--border-width) solid #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* ========================================
   Mobile reflow — vertical stack like chess settings.
   ======================================== */
@media (max-width: 600px), (orientation: portrait) {
  .page.games-explorer-page.active {
    height: 100vh;
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
  }
  .games-explorer-title {
    font-size: clamp(20px, 6vw, 32px);
    padding: 8px 0;
  }
  .games-explorer-tabs-row,
  .games-explorer-utility-row {
    grid-template-columns: 1fr;
    grid-auto-rows: 80px;
    height: auto;
  }
  .games-explorer-tile-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 120px;
    overflow-y: visible;
  }
  .games-explorer-tile { aspect-ratio: auto; flex-direction: row; gap: 16px; padding: 12px; }
  .games-explorer-tile-icon { font-size: 48px; }
  .games-explorer-tile-label { font-size: 22px; }
  .games-explorer-rest-container #eyeGazeCoreRestBtn {
    height: 80px !important;
  }
}

/* ---- Auto-update banner (electron-spec.md §7) ----
   Non-intrusive: sits at the top of the Games Explorer above the
   title, only visible when main process has fired 'update-ready'.
   Small height so it doesn't push the tile grid; restart + later
   buttons are dwell-targetable. Hidden by default; .visible class
   is toggled by JS in index.html when the platform layer fires
   onUpdateReady. Goes nowhere outside Electron. */
.update-banner {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  background: var(--state-selected, #2a4a6a);
  border: 2px solid #fff;
  border-radius: var(--radius, 8px);
  padding: 8px 16px;
  color: var(--text, #fff);
  font-size: clamp(14px, calc(var(--games-explorer-unit) * 0.32), 22px);
  font-weight: 600;
}
.update-banner.visible { display: flex; }
.update-banner-message { flex: 1 1 auto; text-align: center; }
.update-banner-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.update-banner-btn {
  background: var(--surface);
  border: 2px solid #fff;
  border-radius: var(--radius, 8px);
  color: var(--text);
  font-weight: 700;
  font-size: inherit;
  padding: 6px 14px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, background 0.15s;
}
.update-banner-btn:hover { transform: translateY(-1px); background: var(--surface-hover, #3a4a62); }