/* ==========================================================================
   tg.css
   THE TOOLS CONTAINER THAT GROWS. Four designs.

   THE PROBLEM ALL FOUR SOLVE. Half a row is enough to OFFER something and
   nowhere near enough to PLAY it. At 486px Stack is a column of confetti and
   Glide is a letterbox. Shrinking a game to fit a container is how you build
   something nobody opens twice, so the container is the offer and the
   expansion is the thing itself.

   THEY SHARE the three band entry, and one rule: whatever grows must shrink
   back, by an obvious control AND by Escape. Somebody who opened a game in the
   middle of their home page has to be able to get their home page back without
   reloading it.
   ========================================================================== */

/* height:100% only inside a row, exactly as .dz does it. The row stretches
   both cells to the taller, and a card that does not fill its cell leaves the
   two boxes visibly different heights on the same line. */
.tg { display: flex; flex-direction: column; min-width: 0;
  padding: 26px 28px; border-radius: var(--r-lg); background: var(--raise);
  border: 1px solid var(--hair); }
.tg-kick { font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); display: block; }
.tg-mid { font-family: var(--display); font-size: clamp(20px, 2.3vw, 26px); line-height: 1.2;
  margin: 9px 0 0; }
.tg-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.tg-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 12.5px; }
/* THE GAP ABOVE THE FOOTER, AND IT MUST NOT REACH THE PHOTO'S LAYERS.
   This is a positional selector, and in the photo box the second-from-last
   child is not content at all: it is the scrim, absolutely positioned with
   inset:0. A bottom margin on an element with both top and bottom pinned
   SHRINKS it, so the scrim stopped 20px short and the bottom of the card
   showed a bright unscrimmed strip of grass under the buttons, with a hard
   line across it. Naming the two layers it must not touch is uglier than the
   bare rule and is the difference between it working and looking broken. */
.tg > *:nth-last-child(2):not(.tg-photo-scrim):not(.tg-photo-bg) { margin-bottom: 20px; }
.tg-foot a { color: var(--secondary-soft); font-weight: 600; text-decoration: none; }
.tg-foot a:hover, .tg-foot a:focus { text-decoration: none; }

.tg-bands { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tg-band { text-align: left; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--raise-2); border: 1px solid var(--hair); color: var(--ink);
  font: inherit; cursor: pointer; transition: background .18s var(--ease); }
.tg-band:hover { background: var(--hair); }
.tg-band:focus-visible { outline: 2px solid var(--secondary-soft); outline-offset: 2px; }
.tg-band b { display: block; font-family: var(--display); font-size: 17px; }
.tg-band span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px;
  line-height: 1.5; }

/* The bar every expanded state carries. A game with no way out is a trap, and
   the way out is a button AND Escape, never one or the other. */
.tg-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); }
.tg-btitle b { font-family: var(--display); font-size: 17px; }
.tg-btitle span { font-size: 12px; color: var(--ink-3); margin-left: 9px; }
.tg-close { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--raise-2); color: var(--ink-2); border: 1px solid var(--hair); }
.tg-close:hover { background: var(--hair); color: var(--ink); }
.tg-close:focus-visible { outline: 2px solid var(--secondary-soft); outline-offset: 2px; }
.tg-stage { min-height: 220px; }

/* ==========================================================================
   A, TAKE THE ROW. The grid itself changes: one column instead of two, and the
   card beside it stands down. Nothing floats and nothing covers, so the page
   below never moves.
   ========================================================================== */
.row-2.is-taken { grid-template-columns: minmax(0, 1fr); }
.row-2 > .is-standing-down { display: none; }
.tg.is-wide { padding: 22px 24px; }

/* ==========================================================================
   B, LIFT OUT. A panel over both cards, the width of the row. The row beneath
   is untouched, so putting it away puts everything back with nothing to
   re-lay-out.
   ========================================================================== */
.row-2 { position: relative; }
.tg-lift { position: absolute; inset: 0; z-index: 4; padding: 22px 24px;
  border-radius: var(--r-lg); background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hair-2); box-shadow: 0 22px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  animation: tgLift .34s var(--spring) both; }
/* The resting state is visible and the hidden state lives in the `from`, so a
   browser that never runs the animation still shows the panel. */
@keyframes tgLift { from { opacity: 0; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .tg-lift { animation: none; } }
/* The cards underneath are still there and still laid out; they are just not
   the thing being looked at. */
.row-2.is-lifted > *:not(.tg-lift) { opacity: .12; pointer-events: none; }

/* ==========================================================================
   C, OPEN BELOW. Nothing is covered and nothing stands down. The only one of
   the four where both cards stay readable while a game is running.
   ========================================================================== */
.tg-below { border-radius: var(--r-lg); background: var(--raise);
  border: 1px solid var(--hair); padding: 22px 24px;
  animation: tgDrop .3s var(--ease) both; }
@keyframes tgDrop { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .tg-below { animation: none; } }

/* ==========================================================================
   D, THE WHOLE SCREEN. The only one that gives a game the room a game wants,
   and the only one that takes the page away from somebody who did not ask for
   that, which is why it says so on the way in.
   ========================================================================== */
/* IT GROWS OUT OF THE CARD IT WAS PRESSED IN. The panel is placed exactly on
   the container's own rectangle and then released to full screen, which is why
   it reads as the container opening rather than a new screen arriving from
   nowhere. Position and size are animated rather than a transform scale,
   because scaling a panel stretches the text and the game inside it, and a
   game that arrives distorted and then snaps straight looks broken. */
.tg-full { position: fixed; z-index: 90; display: flex; flex-direction: column;
  top: 0; left: 0; width: 100vw; height: 100dvh;
  padding: 20px clamp(16px, 5vw, 64px) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--canvas); border-radius: 0; overflow: hidden;
  transition: top .34s var(--spring), left .34s var(--spring),
              width .34s var(--spring), height .34s var(--spring),
              border-radius .34s var(--spring), opacity .2s var(--ease); }
/* The start and end of the journey, set from the card's measured rect. */
.tg-full.is-opening, .tg-full.is-closing {
  top: var(--tg-y); left: var(--tg-x);
  width: var(--tg-w); height: var(--tg-h);
  border-radius: var(--r-lg); }
.tg-full.is-opening { opacity: .4; }
.tg-full.is-closing { opacity: 0; }
/* The bar and the game fade in behind the travel, so the panel is not carrying
   a full layout across the screen while it moves. */
.tg-full > * { animation: tgIn .26s var(--ease) .16s both; }
@keyframes tgIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .tg-full { transition: none; }
  .tg-full > * { animation: none; }
}
.tg-full .tg-stage { flex: 1 1 auto; min-height: 0; display: flex;
  align-items: center; justify-content: center; }
.tg-full .tg-stage > * { width: 100%; }
/* The page behind must not scroll under a full screen game. */
body.tg-locked { overflow: hidden; }

/* Clear of the floating tab bar, for the same reason everything else on this
   host is: a control a scroll leaves under the bar is one nobody can press. */
.tg, .tg-band, .tg-close { scroll-margin-bottom: 150px; }

/* ==========================================================================
   THE BOX DESIGNS. Andy picked the whole screen expansion, so what is left is
   what the box LOOKS like at rest. Every one opens the same way and they
   differ only in what they ask for.
   ========================================================================== */

/* 1, THE TILES. The only one where somebody who knows what they want gets it
   in one press instead of two. */
.tg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 16px; }
.tg-tile { text-align: left; padding: 15px 16px; border-radius: var(--r-md);
  background: var(--raise-2); border: 1px solid var(--hair); color: var(--ink);
  font: inherit; cursor: pointer; transition: background .18s var(--ease); }
.tg-tile:hover { background: var(--hair); }
.tg-tile:focus-visible { outline: 2px solid var(--secondary-soft); outline-offset: 2px; }
.tg-tile b { display: block; font-family: var(--display); font-size: 16px; }
.tg-tile span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* 2, ONE INVITATION. The smallest possible ask, for the container that has to
   work when somebody has almost no attention left. */
.tg-big { font-family: var(--display); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12;
  letter-spacing: -.015em; margin: 10px 0 0; }
.tg-lede { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 12px 0 0; }
.tg-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* 3, THE PHOTO. The same treatment the home hero uses. The only design here
   that reads as a place rather than a control panel. */
.row-2 .tg, .row-1 .tg { height: 100%; }
.tg-photo { position: relative; overflow: hidden; padding: 0; border: 0;
  min-height: 320px; }
/* The photo fills whatever height the row gives it and the picture covers it,
   so it matches the card beside it rather than ending short or running past. */
.row-2 .tg-photo { height: 100%; }
.tg-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.tg-photo-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,12,21,.25), rgba(8,12,21,.9)); }
.tg-photo-in { position: relative; z-index: 2; margin-top: auto; padding: 28px; color: #fff; }
.tg-photo-in .tg-kick { color: rgba(255,255,255,.66); }

/* 4, THE QUIET LINE. The least room on the page of any of them, which matters
   because this container is competing with medication for the row. */
.tg-quiet { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tg-qline { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2);
  max-width: 34ch; }
.tg-qbtn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--secondary); color: #fff; border: 1px solid var(--secondary);
  transition: filter .16s var(--ease); }
.tg-qbtn:hover { filter: brightness(1.08); }
.tg-qbtn:focus-visible { outline: 2px solid var(--secondary-soft); outline-offset: 3px; }