/* G.A.M.E. hub styling.

   TG_GAME_FIT_V1 -- rewritten so the hub reads as part of the site.

   Two things were wrong with the previous version of this file.

   First, it defined BARE .tg-btn, .tg-btn:hover, .tg-btn--quiet, .tg-card,
   .tg-card h3, .tg-muted, .tg-notice, .tg-input and .tg-table. On the
   standalone game document that was invisible, because nothing else was on
   the page. The customer portal now hosts the hub and injects this stylesheet
   AFTER tg-ds.css, so those bare rules won the cascade on equal specificity
   and restyled the ENTIRE portal -- every button, card, input, notice and
   table in every module -- from the moment a customer opened Games. Those
   rules are gone. The design system owns them. The hub inherits the site's
   own controls instead of carrying a second, competing set of them.

   Second, what was left was green (#6d9c5a) and rounded (.35rem - .6rem)
   while the site is gold (--tg-gold) and square. Every literal that had a
   token is now that token, so the hub tracks the design system automatically
   rather than drifting away from it again.

   Everything below is scoped to #tg-game-root. Nothing in this file can
   reach another module, whichever order the stylesheets load in.

   The sponsor slot is deliberately absent: game-extra.css restyles it as a
   centred brand mark, both documents load that file, and a scoped copy here
   would now outrank it on specificity and undo it. */

#tg-game-root {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--tg-s5);
  color: var(--tg-text);
}

/* Inside the portal the shell already supplies the column width and the page
   gutter, so the hub must not add a second one. The portal sets this class on
   the host element it hands us, which is more reliable than guessing at the
   DOM shape from a descendant selector. */
#tg-game-root.tg-game--embedded {
  max-width: none;
  margin: 0;
  padding: 0;
}

#tg-game-root .tg-game-header { margin-bottom: var(--tg-s4); }
#tg-game-root .tg-game-header h2 { margin: 0 0 var(--tg-s1); }

/* The site's .tg-table carries min-width: 520px so wide staff tables scroll
   rather than crush. The leaderboard here is four narrow columns inside a
   card, and that floor would push a phone into horizontal scroll, so it is
   lifted for this surface only. Everything else about the table -- type,
   rules, header treatment -- stays the site's. */
#tg-game-root .tg-table { min-width: 0; }

/* The design system has no quiet variant, and the hub needs one for "Back to
   games", which must not compete with Play. Built from tokens on top of the
   site's own .tg-btn, so it keeps the site's geometry and type. */
#tg-game-root .tg-btn--quiet {
  background: transparent;
  border-color: var(--tg-line-soft);
  color: var(--tg-text-2);
}
#tg-game-root .tg-btn--quiet:hover {
  background: var(--tg-charcoal-2);
  color: var(--tg-text);
}

/* --------------------------------------------------------------- lists */
#tg-game-root .tg-game-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--tg-s3);
}
#tg-game-root .tg-game-card {
  background: var(--tg-charcoal-2);
  border: 1px solid var(--tg-line-soft);
  border-radius: 0;
  padding: var(--tg-s4);
}
#tg-game-root .tg-game-card h4 {
  margin: 0 0 var(--tg-s1);
  font-family: var(--tg-display, var(--tg-font));
}
#tg-game-root .tg-game-worth {
  font-size: .8rem;
  color: var(--tg-text-3);
  margin: var(--tg-s2) 0 var(--tg-s3);
}

/* ------------------------------------------------- group and category tabs */
/* TG_GAME_ORG_V1 -- the primary row separates earning points from staking
   them. That is the one distinction a customer has to get right, so it sits
   in a tier of its own above the category row rather than as one tab among
   seven. */
#tg-game-root .tg-gtabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s2);
  margin: 0 0 var(--tg-s3);
  padding-bottom: var(--tg-s3);
  border-bottom: 1px solid var(--tg-line-soft);
}
#tg-game-root .tg-gtab.is-on {
  border-color: var(--tg-gold-dim);
  color: var(--tg-gold-bright);
}
#tg-game-root .tg-group-note {
  color: var(--tg-text-3);
  font-size: .86rem;
  margin: 0 0 var(--tg-s3);
}

/* --------------------------------------------------------------- games */
#tg-game-root .tg-game-board { margin-top: var(--tg-s3); }
#tg-game-root .tg-game-status { margin: var(--tg-s2) 0; color: var(--tg-text-3); }
#tg-game-root .tg-game-controls {
  display: flex; gap: var(--tg-s2); margin-top: var(--tg-s3); flex-wrap: wrap;
}
#tg-game-root .tg-game-grid { display: grid; gap: .3rem; margin-top: var(--tg-s3); }

/* Memory */
#tg-game-root .tg-game-grid--memory {
  grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 20rem;
}
#tg-game-root .tg-tile {
  aspect-ratio: 1; font-size: 1.3rem; cursor: pointer;
  background: var(--tg-charcoal-3);
  border: 1px solid var(--tg-line);
  border-radius: 2px; color: inherit;
}
#tg-game-root .tg-tile.is-open { background: var(--tg-gold-wash); }

/* Simon. The four pads have to stay distinguishable by hue, so these are the
   one place literals are still right -- a token palette has no four-way
   colour set and reusing gold for two pads would break the game. */
#tg-game-root .tg-game-grid--simon {
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 15rem;
}
#tg-game-root .tg-pad {
  aspect-ratio: 1; border: 1px solid var(--tg-line);
  border-radius: 2px; cursor: pointer; opacity: .55;
}
#tg-game-root .tg-pad--0 { background: #7d4040; }
#tg-game-root .tg-pad--1 { background: #40667d; }
#tg-game-root .tg-pad--2 { background: #5c7d40; }
#tg-game-root .tg-pad--3 { background: #7d6d40; }
#tg-game-root .tg-pad.is-lit { opacity: 1; filter: brightness(1.7); }

/* 2048. The value ramp now runs charcoal to gold rather than grey to green,
   so a high tile reads as the site's accent. */
#tg-game-root .tg-game-grid--2048 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 20rem;
}
#tg-game-root .tg-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--tg-charcoal); border-radius: 2px;
  font-weight: 700; font-size: 1rem;
}
#tg-game-root .tg-cell--v2   { background: var(--tg-charcoal-2); }
#tg-game-root .tg-cell--v4   { background: var(--tg-charcoal-3); }
#tg-game-root .tg-cell--v8   { background: #3a3022; }
#tg-game-root .tg-cell--v16  { background: #4a3c26; }
#tg-game-root .tg-cell--v32  { background: #5a4828; }
#tg-game-root .tg-cell--v64  { background: #6b552b; }
#tg-game-root .tg-cell--v128,
#tg-game-root .tg-cell--v256,
#tg-game-root .tg-cell--v512,
#tg-game-root .tg-cell--v1024,
#tg-game-root .tg-cell--v2048 { background: var(--tg-gold); color: var(--tg-black); }

/* Sudoku */
#tg-game-root .tg-game-grid--sudoku {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  max-width: 24rem; gap: 1px;
  background: var(--tg-line); padding: 1px;
}
#tg-game-root .tg-sq {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--tg-charcoal); font-size: .85rem; text-align: center;
  border: 0; color: inherit; width: 100%; padding: 0;
}
#tg-game-root .tg-sq--fixed { color: var(--tg-text-3); font-weight: 700; }
#tg-game-root .tg-sq--input { background: var(--tg-black); }
#tg-game-root .tg-sq--input:focus {
  outline: 2px solid var(--tg-gold); outline-offset: -2px;
}

/* Word search */
#tg-game-root .tg-game-grid--word {
  grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 24rem;
}
#tg-game-root .tg-letter {
  aspect-ratio: 1; font-size: .8rem; cursor: pointer;
  background: var(--tg-charcoal); border: 1px solid var(--tg-line-soft);
  border-radius: 2px; color: inherit;
}
#tg-game-root .tg-letter.is-picked { background: var(--tg-gold-wash); }
#tg-game-root .tg-letter.is-found { background: var(--tg-gold); color: var(--tg-black); }

/* Solitaire. .tg-card-box is a playing card, not a design-system card, so it
   keeps its own light face -- that is what a card looks like. */
#tg-game-root .tg-foundations {
  display: flex; gap: var(--tg-s2); margin: var(--tg-s3) 0; flex-wrap: wrap;
}
#tg-game-root .tg-foundation {
  border: 1px solid var(--tg-line); border-radius: 2px;
  padding: var(--tg-s1) var(--tg-s3); font-size: .9rem;
  background: var(--tg-charcoal);
}
#tg-game-root .tg-card-box {
  display: grid; place-items: center;
  width: 5rem; height: 7rem;
  background: #f4f4f4; color: #111;
  border-radius: var(--tg-r-sm); font-size: 1.2rem; font-weight: 700;
}
#tg-game-root .tg-card-box.is-red { color: #a32020; }

@media (max-width: 30rem) {
  #tg-game-root .tg-game-grid--sudoku,
  #tg-game-root .tg-game-grid--word { max-width: 100%; }
  #tg-game-root .tg-sq,
  #tg-game-root .tg-letter { font-size: .7rem; }
}