/* Session D50 — game timer (overlay module).
 * D39: #gameTimer is OUT of the row's flex flow.
 *   - position:absolute inside #tray (the row is made position:relative by JS)
 *   - vertically centred
 *   - the row is given padding-left = timer width + the row's own gap, so the
 *     timer sits in its reserved slot at the row's left and the existing
 *     children keep flowing in the remaining space, centred by the row's
 *     own justify-content:center (the game CSS already sets centre).
 *   - flex-wrap:nowrap on the row while the timer is present (class .hasTimer)
 *     so the content can never wrap to a second line, at any width, for any
 *     tile name. If the content would not fit at scale 1, fitTray() in timer.js
 *     shrinks label/tile/buttons via --trayScale (floor 0.6) so it always fits.
 *
 * D50: --timerInset (set live on the row by timer.js) = the in-game top
 *   bar's (header) first visible child's left edge minus the tray row's own
 *   left edge, rounded to 0.5px — so the timer's left edge lines up with the
 *   placed-counter badge ("N / M placed") instead of merely the tray's own
 *   padding. Fallback (no top bar / zero-width badge) = the row's padding-left
 *   (the D40 value).
 *
 * Variables --timerSize / --timerInk / --timerDone are still read live by the
 * D38 timer module. --timerW and --timerGap are set by D39's timer.js.
 * --trayScale is set per-row by fitTray() on the row element (not :root).
 */

#tray.hasTimer{
  position:relative;
  flex-wrap:nowrap;
  align-items:center;
  /* D40: padding-left now includes the row's own padding (inset) so the
     timer's content-box left (var(--timerInset)) aligns with the row's
     content-box left, and the group's remaining width starts after
     the timer + gap measured from the inset position. */
  padding-left:calc(var(--timerInset,10px) + var(--timerW,66px) + var(--timerGap,14px));
}

#gameTimer{
  position:absolute;
  left:var(--timerInset, 10px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:none;
  background:none;
  box-shadow:none;
  color:var(--timerInk, rgba(138,160,192,0.85));
  font-family:inherit;
  font-size:var(--timerSize, 16px);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  white-space:nowrap;
  user-select:none;
  pointer-events:none; /* not interactive */
  z-index:2;
}
/* D40: inset = the row's own padding-left (10 px from game CSS), set here so
   the timer reads as placed inside the row's content area, not flush against
   the viewport edge. The row's --timerInset is also used to offset its
   padding-left so the group's remaining width starts at the same position. */
:root{ --timerInset: 10px; }

/* D39: the row is padded on the left by the timer's width + the row's own gap,
   so the existing children (label, tile, recycle/restart button) have the
   remaining width to work with and are centred by the row's own
   justify-content:center (already set by the game CSS).
   The D38 auto-margin rules are removed here — they were for the
   in-flow timer layout and would otherwise fight the new absolute positioning. */

#gameTimer .timerInk{
  display:block;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}

#gameTimer .timerBest{
  display:none;
  font-size:0.7em;
  color:var(--timerInk, rgba(138,160,192,0.85));
  font-variant-numeric:tabular-nums;
  letter-spacing:0.03em;
}

#gameTimer.done .timerInk{
  color:var(--timerDone, #ffca28);
}

/* D39 fitTray(): label / tile / buttons scale with the row via --trayScale.
   The row's own font-sizes come from the game CSS (0.85rem label, 1.05rem
   tile, 1.4rem recycle icon, 0.78rem / 0.68rem review buttons); we multiply
   them by the row's --trayScale (default 1) so fitTray can shrink them all
   together without the game CSS ever being edited. The multipliers are
   applied with calc() on font-size only — padding and min-height are left
   at their game-CSS values, so the row height stays where the game set it. */
#tray.hasTimer{ --trayScale:1; }
#tray.hasTimer #trayLabel{ font-size:calc(0.85rem * var(--trayScale)); }
#tray.hasTimer #dragTile{   font-size:calc(1.05rem * var(--trayScale)); }
#tray.hasTimer #recycleBtn{ font-size:calc(1.4rem  * var(--trayScale)); }
#tray.hasTimer #reviewRestartBtn{
  font-size:calc(0.78rem * var(--trayScale));
}
@media (max-width:640px){
  #tray.hasTimer #reviewRestartBtn{
    font-size:calc(0.68rem * var(--trayScale));
  }
}