/* TG_GAME_EXTRA_V1 -- styling for the tower defense and chess boards, plus the
   credits footer. Uses the existing design tokens so the new games look like
   they belong beside the original six rather than like imported strangers. */

/* ---------------------------------------------------------- tower defense */

.tg-td-hud {
  display: flex; flex-wrap: wrap; gap: var(--tg-s3);
  margin-bottom: var(--tg-s2);
}
.tg-td-stat {
  font-size: .9rem; color: var(--tg-text-2);
}
.tg-td-stat span {
  color: var(--tg-gold-bright); font-weight: 600; margin-left: 4px;
}
.tg-td-canvas {
  display: block; width: 100%; max-width: 512px; height: auto;
  border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  background: #141417; touch-action: manipulation;
}
.tg-td-picker {
  display: flex; flex-wrap: wrap; gap: var(--tg-s2);
  margin-top: var(--tg-s2);
}
.tg-td-picker .is-active {
  background: var(--tg-gold-wash); color: var(--tg-gold-bright);
  border-color: rgba(200,162,71,.35);
}

/* ------------------------------------------------------------------ chess */

.tg-chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%; max-width: 420px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-sm);
  overflow: hidden;
  margin: var(--tg-s2) 0;
}
.tg-chess-sq {
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: #2b2b33;
  font-size: clamp(16px, 5vw, 30px); line-height: 1;
  transition: background .12s;
}
.tg-chess-sq.is-dark { background: #1b1b21; }
.tg-chess-sq.is-selected { background: var(--tg-gold-wash); }
.tg-chess-sq.is-target { box-shadow: inset 0 0 0 3px rgba(200,162,71,.45); }
.tg-chess-sq:hover { background: var(--tg-charcoal-3); }
.tg-chess-piece.is-white { color: #f2f2f4; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tg-chess-piece.is-black { color: #17171b; text-shadow: 0 1px 0 rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- credits */

.tg-game-credits {
  margin-top: var(--tg-s5, 32px);
  padding-top: var(--tg-s3);
  border-top: 1px solid var(--tg-line-soft);
  text-align: center;
}
.tg-game-credits a {
  color: var(--tg-text-3, #8b8b96);
  font-size: .82rem;
  text-decoration: none;
}
.tg-game-credits a:hover {
  color: var(--tg-gold-bright);
  text-decoration: underline;
}
.tg-pre {
  white-space: pre-wrap; word-break: break-word;
  font-size: .74rem; line-height: 1.45;
  color: var(--tg-text-3, #8b8b96);
  background: var(--tg-charcoal);
  padding: var(--tg-s3); border-radius: var(--tg-r-sm);
  border: 1px solid var(--tg-line-soft);
  margin-top: var(--tg-s2);
  overflow-x: auto;
}
/* TG_GAME_FIT_V1 -- was a bare `details > summary`, which reached every
   <summary> in the portal once this file was injected. Scoped. */
#tg-game-root details > summary {
  cursor: pointer; color: var(--tg-text-2);
  margin-top: var(--tg-s2);
}

/* ---------------------------------------------------------------- mahjong */

.tg-mj-board {
  position: relative;
  width: 100%; max-width: 420px;
  height: 400px;
  margin: var(--tg-s2) 0;
}
.tg-mj-tile {
  position: absolute;
  width: 40px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: #2b2b33; color: #f2f2f4;
  border: 1px solid var(--tg-line);
  border-radius: 4px;
  cursor: pointer; padding: 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  transition: transform .1s, background .12s;
}
.tg-mj-tile.is-blocked { opacity: .45; cursor: not-allowed; }
.tg-mj-tile.is-selected {
  background: var(--tg-gold-wash);
  border-color: var(--tg-gold);
  transform: translateY(-2px);
}
.tg-mj-tile:not(.is-blocked):hover { background: var(--tg-charcoal-3); }

/* -------------------------------------------------------------- solitaire */

.tg-sol-row { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; margin: var(--tg-s2) 0; }
.tg-sol-gap { width: 18px; }
.tg-sol-tableau { display: flex; gap: 6px; align-items: flex-start; }
.tg-sol-col { display: flex; flex-direction: column; gap: 0; min-width: 44px; }
.tg-sol-slot, .tg-sol-cardbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
}
.tg-sol-cardbtn { margin-top: -30px; }
.tg-sol-col .tg-sol-cardbtn:first-child { margin-top: 0; }
.tg-sol-card {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 60px;
  background: #f4f4f6; color: #17171b;
  border: 1px solid var(--tg-line); border-radius: 4px;
  font-size: .82rem; font-weight: 600;
}
.tg-sol-card.is-red { color: #b8354a; }
.tg-sol-card.is-down { background: #26262d; color: #55555f; }
.tg-sol-card.is-empty { background: transparent; border-style: dashed; }
.is-selected .tg-sol-card { outline: 2px solid var(--tg-gold); outline-offset: 1px; }

/* ------------------------------------------------------------- maze chase */

.tg-maze-canvas {
  display: block; width: 100%; max-width: 380px; height: auto;
  border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  background: #0a0a0b; touch-action: none; margin: var(--tg-s2) 0;
}

/* ----------------------------------------------------------------- sudoku */

.tg-sud-grid {
  display: grid; grid-template-columns: repeat(9, 1fr);
  width: 100%; max-width: 360px; aspect-ratio: 1/1;
  border: 2px solid var(--tg-line); margin: var(--tg-s2) 0;
}
.tg-sud-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tg-line-soft);
  background: #1b1b21; color: var(--tg-text);
  font-size: clamp(12px, 3.6vw, 18px); cursor: pointer; padding: 0;
}
.tg-sud-cell.is-given { background: #26262d; font-weight: 700; color: var(--tg-gold-bright); }
.tg-sud-cell.is-selected { background: var(--tg-gold-wash); }
.tg-sud-cell.is-bad { color: #d94f4f; }
.tg-sud-cell.edge-r { border-right: 2px solid var(--tg-line); }
.tg-sud-cell.edge-b { border-bottom: 2px solid var(--tg-line); }
.tg-sud-notes { font-size: 8px; color: var(--tg-text-3); letter-spacing: 1px; }
.tg-sud-pad { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--tg-s2); }

/* ------------------------------------------------------------ word search */

.tg-ws-grid {
  display: grid; grid-template-columns: repeat(14, 1fr);
  width: 100%; max-width: 380px; aspect-ratio: 1/1;
  gap: 1px; margin: var(--tg-s2) 0;
  user-select: none;
}
.tg-ws-cell {
  display: flex; align-items: center; justify-content: center;
  background: #1b1b21; color: var(--tg-text-2);
  border: 0; border-radius: 2px; padding: 0;
  font-size: clamp(9px, 2.6vw, 14px); cursor: pointer;
}
.tg-ws-cell.is-dragging { background: var(--tg-gold-wash); color: var(--tg-gold-bright); }
.tg-ws-cell.is-found { background: rgba(126,201,126,.22); color: #9fe09f; }
.tg-ws-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--tg-s2); }
.tg-ws-word { font-size: .82rem; color: var(--tg-text-2); }
.tg-ws-word.is-found { text-decoration: line-through; color: var(--tg-text-3); }

/* ----------------------------------------------------------------- memory */

.tg-mem-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px; width: 100%; max-width: 400px; margin: var(--tg-s2) 0;
}
.tg-mem-grid .tg-tile {
  aspect-ratio: 3/4; font-size: clamp(16px, 5vw, 26px);
  display: flex; align-items: center; justify-content: center;
  background: #2b2b33; border: 1px solid var(--tg-line);
  border-radius: 4px; cursor: pointer; color: #f2f2f4;
}
.tg-mem-grid .tg-tile.is-open { background: var(--tg-gold-wash); }
.tg-mem-grid .tg-tile.is-done { opacity: .35; cursor: default; }

/* ------------------------------------------------------------ tile icons */

.tg-game-icon {
  width: 28px; height: 28px;
  display: block;
  margin-bottom: var(--tg-s2);
  color: var(--tg-gold);
}
.tg-game-card { display: flex; flex-direction: column; }

/* ------------------------------------------------------------ minesweeper */

.tg-ms-grid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 2px; width: 100%; max-width: 340px; aspect-ratio: 1/1;
  margin: var(--tg-s2) 0;
}
.tg-ms-cell {
  display: flex; align-items: center; justify-content: center;
  background: #2b2b33; border: 1px solid var(--tg-line);
  border-radius: 2px; padding: 0; cursor: pointer;
  font-size: clamp(9px, 2.6vw, 13px); font-weight: 700;
  color: var(--tg-text-2);
}
.tg-ms-cell.is-open { background: #1b1b21; border-color: var(--tg-line-soft); }
.tg-ms-cell.is-mine { background: #5a2222; color: #ffb3b3; }
.tg-ms-cell.is-flag { color: var(--tg-gold-bright); }
.tg-ms-cell[data-n="1"] { color: #6fa8d6; }
.tg-ms-cell[data-n="2"] { color: #7ec97e; }
.tg-ms-cell[data-n="3"] { color: #d97f7f; }
.tg-ms-cell[data-n="4"] { color: #9a7fd0; }
.tg-ms-cell[data-n="5"] { color: #d9a05b; }

/* ------------------------------------------------------------------ snake */

.tg-snake-canvas, .tg-bb-canvas {
  display: block; width: 100%; max-width: 360px; height: auto;
  border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  background: #141417; touch-action: none; margin: var(--tg-s2) 0;
}

/* ----------------------------------------------------------- four in a row */

.tg-fir-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; width: 100%; max-width: 340px;
  background: #1b1b21; padding: 6px; border-radius: var(--tg-r-sm);
  margin: var(--tg-s2) 0;
}
.tg-fir-cell {
  aspect-ratio: 1/1; border-radius: 50%;
  background: #0f0f12; border: 1px solid var(--tg-line);
  padding: 0; cursor: pointer;
}
.tg-fir-cell.is-me { background: var(--tg-gold); border-color: var(--tg-gold-bright); }
.tg-fir-cell.is-them { background: #b8354a; border-color: #d4566b; }

/* -------------------------------------------------------- sliding puzzle */

.tg-sl-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; width: 100%; max-width: 300px; aspect-ratio: 1/1;
  margin: var(--tg-s2) 0;
}
.tg-sl-tile {
  display: flex; align-items: center; justify-content: center;
  background: #2b2b33; color: var(--tg-text);
  border: 1px solid var(--tg-line); border-radius: 4px;
  font-size: clamp(14px, 5vw, 22px); font-weight: 600; cursor: pointer;
}
.tg-sl-tile.is-hole { background: transparent; border-style: dashed; cursor: default; }

/* ---------------------------------------------------------------- reversi */

.tg-rv-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px; width: 100%; max-width: 340px; aspect-ratio: 1/1;
  background: #1b4d2e; padding: 4px; border-radius: var(--tg-r-sm);
  margin: var(--tg-s2) 0;
}
.tg-rv-cell {
  display: flex; align-items: center; justify-content: center;
  background: #236b3f; border: 0; border-radius: 2px; padding: 0; cursor: pointer;
}
.tg-rv-cell.is-playable { box-shadow: inset 0 0 0 2px rgba(200,162,71,.5); }
.tg-rv-disc { width: 76%; height: 76%; border-radius: 50%; display: block; }
.tg-rv-disc.is-me { background: #17171b; }
.tg-rv-disc.is-them { background: #f2f2f4; }

/* --------------------------------------------------------------- nonogram */

.tg-ng-wrap { overflow-x: auto; margin: var(--tg-s2) 0; }
.tg-ng-grid {
  display: grid;
  grid-template-columns: 54px repeat(8, 30px);
  gap: 2px;
}
.tg-ng-corner { }
.tg-ng-clue {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--tg-text-3); line-height: 1.1;
}
.tg-ng-col { flex-direction: column; min-height: 46px; }
.tg-ng-row { justify-content: flex-end; padding-right: 4px; }
.tg-ng-cell {
  width: 30px; height: 30px;
  background: #1b1b21; border: 1px solid var(--tg-line-soft);
  border-radius: 2px; padding: 0; cursor: pointer;
  color: var(--tg-text-3); font-size: 13px;
}
.tg-ng-cell.is-filled { background: var(--tg-gold); border-color: var(--tg-gold-bright); }
.tg-ng-cell.is-crossed { color: #d97f7f; }

/* ------------------------------------------------- tile alignment (V2) --
   Descriptions differ in length, so without this the Play button floats at a
   different height on every tile and the grid looks ragged. The grid already
   stretches each tile to the row height; pushing the points line down with
   margin-top:auto pins it and the button to the bottom, so the buttons line
   up across the row whatever the text above them does. */
.tg-game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tg-game-card > .tg-game-worth {
  margin-top: auto;       /* absorbs the slack, pinning what follows */
}
.tg-game-card > .tg-btn {
  align-self: flex-start; /* the button sizes to its text, not the tile */
}

/* ======================================================================
   MOBILE
   ======================================================================
   Most customers will open this on a phone between appointments, so the
   games have to be properly playable there, not merely visible.

   Three problems this addresses:
     1. Boards sized in fixed pixels overflowed a 360px screen.
     2. Tap targets below ~44px are hard to hit accurately with a thumb.
     3. Canvas games needed their controls within thumb reach.
   ====================================================================== */

/* Nothing in a game may force the page wider than the screen. */
.tg-game-board { max-width: 100%; overflow-x: auto; }
.tg-game-board canvas { max-width: 100%; height: auto; }

@media (max-width: 560px) {
  /* Tiles go single column: two columns at this width leaves each too narrow
     to read the description. */
  .tg-game-list { grid-template-columns: 1fr !important; }

  /* Boards fill the width they are given rather than a fixed pixel size. */
  .tg-td-canvas, .tg-maze-canvas, .tg-snake-canvas, .tg-bb-canvas {
    max-width: 100%;
  }
  .tg-chess-board, .tg-sud-grid, .tg-ws-grid, .tg-ms-grid,
  .tg-rv-grid, .tg-fir-grid, .tg-sl-grid, .tg-mem-grid {
    max-width: 100%;
  }

  /* Mahjong is absolutely positioned, so it cannot simply reflow: scroll it
     horizontally instead of letting it push the page sideways. */
  .tg-mj-board {
    height: 340px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Solitaire and FreeCell have the widest boards; let them scroll as a unit
     so cards keep a tappable size instead of shrinking to slivers. */
  .tg-sol-tableau, .tg-sol-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .tg-sol-card { width: 40px; height: 56px; font-size: .78rem; }
  .tg-sol-col { min-width: 40px; }
  .tg-sol-cardbtn { margin-top: -28px; }

  /* Buttons big enough for a thumb, and full width where they stack. */
  .tg-td-picker, .tg-sud-pad {
    gap: 6px;
  }
  .tg-td-picker .tg-btn, .tg-sud-pad .tg-btn {
    min-height: 44px;
    min-width: 44px;
    flex: 1 1 auto;
  }

  /* The number pad is the main Sudoku control on a phone: five across, large. */
  .tg-sud-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  /* A 12x12 word search at 360px gives ~28px cells; keep the letters legible
     and allow the grid to scroll rather than shrink further. */
  .tg-ws-grid { font-size: 11px; }

  /* Nonogram clues need fixed width to stay readable, so the board scrolls. */
  .tg-ng-wrap { -webkit-overflow-scrolling: touch; }

  /* Mahjong tiles were 40px wide; nudge up for thumbs. */
  .tg-mj-tile { width: 42px; height: 54px; }
}

/* Very small phones (320-360px). */
@media (max-width: 380px) {
  .tg-mj-board { height: 300px; }
  .tg-sol-card { width: 36px; height: 50px; font-size: .72rem; }
  .tg-sol-col { min-width: 36px; }
  .tg-ng-grid { grid-template-columns: 44px repeat(8, 26px); }
  .tg-ng-cell { width: 26px; height: 26px; }
}

/* Landscape phones are short, not narrow: cap board height so the controls
   and status line stay on screen without scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
  .tg-td-canvas, .tg-maze-canvas, .tg-snake-canvas, .tg-bb-canvas {
    max-height: 62vh;
    width: auto;
  }
  .tg-chess-board, .tg-sud-grid, .tg-ws-grid, .tg-ms-grid, .tg-rv-grid {
    max-height: 70vh;
    max-width: 70vh;
  }
  .tg-mj-board { height: 58vh; }
}

/* A double-tap on a game control should not zoom the page. */
.tg-game-board button,
.tg-mj-tile, .tg-sol-slot, .tg-sol-cardbtn, .tg-chess-sq,
.tg-sud-cell, .tg-ws-cell, .tg-ms-cell, .tg-rv-cell,
.tg-fir-cell, .tg-sl-tile, .tg-ng-cell {
  touch-action: manipulation;
}

/* Long-press on a board cell should not raise the text-selection menu. */
.tg-ms-grid, .tg-ws-grid, .tg-mj-board, .tg-ng-grid {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* --------------------------------------------- word search (larger board) --
   14x14 with a two-tap selection mode. The preview highlight has to read
   clearly at small sizes, so selected cells are stronger than a tint. */
.tg-ws-cell.is-dragging {
  background: var(--tg-gold);
  color: #17140c;
  font-weight: 700;
}
.tg-ws-cell.is-found {
  background: rgba(126,201,126,.28);
  color: #b6f0b6;
  font-weight: 600;
}
@media (max-width: 560px) {
  /* 14 columns on a narrow screen: keep letters legible and cells tappable. */
  .tg-ws-grid { font-size: 10px; gap: 1px; }
  .tg-ws-cell { border-radius: 1px; }
}

/* ------------------------------------------------- sponsor slot (own logo) --
   The slot now leads with a logo and puts the text underneath, so it reads as
   a brand mark rather than a line of text with a picture stuck on the end. */
.tg-sponsor--own,
.tg-sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--tg-s3);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r-sm);
  background: var(--tg-charcoal);
  text-decoration: none;
}
/* A FIXED box. The logo is scaled to fit inside it with its proportions
   intact (object-fit: contain), so a tall logo and a wide logo both sit in
   the same footprint and neither is stretched or cropped. */
.tg-sponsor__frame {
  width: 200px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tg-sponsor__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.tg-sponsor__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 2px solid var(--tg-gold);
  border-radius: 50%;
  color: var(--tg-gold-bright);
  font-weight: 700; font-size: 1.4rem; letter-spacing: 1px;
}
.tg-sponsor__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tg-text-3);
}
.tg-sponsor__fallback, .tg-sponsor__name {
  color: var(--tg-text-2); font-size: .92rem;
}
.tg-sponsor__campaign { font-size: .82rem; color: var(--tg-text-3); }
.tg-sponsor__cta { margin-top: 4px; }


/* ------------------------------------------------- sponsor frame (mobile) --
   The frame keeps its aspect on a narrow screen but gives back some height so
   it does not dominate the top of the hub. */
@media (max-width: 560px) {
  .tg-sponsor__frame { width: 160px; height: 72px; }
}


/* TG_GAME_MULTIPLIER_V1 -- the Multiplier section: the tab row and the inert
   Coming soon tile. Classes rather than inline styles, because the portal
   sends a Content Security Policy with a style-src nonce and no unsafe-inline,
   which refuses style attributes and .style assignments alike. Hiding reuses
   .tg-hide from tg-ds.css rather than introducing a second hide class.
   This file is a SOURCE: build_platform.py regenerates the preview's
   platform-game.css from it, so rules added here survive a rebuild. */
.tg-mtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.9rem;
}
.tg-mtab { opacity: 0.62; font-weight: 400; }
.tg-mtab.is-on { opacity: 1; font-weight: 700; }

/* A tile with nothing to click should read as unavailable, not merely quiet. */
.tg-game-card--soon { opacity: 0.72; }

.tg-placeholder-box {
  border: 1px dashed currentColor;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
}

/* TG_UI_AUDIT_STAGE_V1: readable boards, comfortable touch controls and narrow-screen layouts. */
.tg-chess-board{grid-template-rows:repeat(8,minmax(0,1fr))}
.tg-chess-sq{min-height:0;min-width:0;height:100%;aspect-ratio:1;overflow:hidden}
.tg-chess-piece.is-black{color:#17171b;text-shadow:1px 0 #d7d7df,-1px 0 #d7d7df,0 1px #d7d7df,0 -1px #d7d7df}
.tg-freecell .tg-sol-card{align-items:flex-start;justify-content:flex-start;padding:4px 3px;box-sizing:border-box}
.tg-freecell .tg-sol-cardbtn{margin-top:-28px}
.tg-game-focus{scroll-margin-top:100px}
.tg-board-scroll{overflow:auto;max-width:100%;padding:4px}
.tg-board-scroll.is-enlarged .tg-ws-grid{width:644px;max-width:none;grid-template-columns:repeat(14,44px)}
.tg-board-scroll.is-enlarged .tg-ws-cell{width:44px;height:44px;aspect-ratio:auto;font-size:15px}
.tg-board-scroll.is-enlarged .tg-ms-grid{width:460px;max-width:none;grid-template-columns:repeat(10,44px)}
.tg-board-scroll.is-enlarged .tg-ms-cell{width:44px;height:44px;aspect-ratio:auto}
.tg-board-scroll.is-enlarged .tg-ng-grid{grid-template-columns:54px repeat(8,44px)}
.tg-board-scroll.is-enlarged .tg-ng-cell{width:44px;height:44px}
.tg-game-guest-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tg-game-help{margin:12px 0}