/* Shared styles for games/_shared/turn-ui.js's two visual components: the
   tap/hold action button's hold-progress fill, and the zoom/pan/center
   control row. Deliberately minimal/neutral (a translucent white fill, a
   generic round dark-glass control button) so each game's own page theme
   shows through -- override any of these classes in a per-game
   <style> block for a closer visual match (see games/chinese-checkers/
   index.html for an example: #goBtn already carries its own background/
   border/color, this stylesheet only adds the fill layer and control-row
   layout on top). */

.tui-hold-btn { position: relative; overflow: hidden; }
.tui-hold-fill {
  position: absolute; inset: 0; width: 0%;
  background: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

/* Fixed-position viewport wrapper, present when a game's board element
   gets attachZoomControls({fullscreenClass}) toggled on -- same "takes the
   board out of normal flow to fill the screen over a dark backdrop"
   pattern chess's own #boardViewport.fullscreen used, just under a
   reusable class name so a per-game stylesheet doesn't have to redefine
   the positioning/backdrop, only its own inner sizing (see the trap note
   in CLAUDE.md: an <iframe>/<img>/<video> content element needs explicit
   width/height here, a plain content div does not). */
.tui-fullscreen {
  position: fixed; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 9, 0.97);
  touch-action: none;
}

/* Control row -- a horizontal row, not a vertical stack, per the
   fixed-position-clearance trap documented in CLAUDE.md: a vertical stack
   of 3 needed ~180px of reserved clearance and forced scrolling on real
   phone sizes, a horizontal row cut that to under 100px. Positioned
   fixed so it floats above a .tui-fullscreen board; the calling page is
   responsible for reserving equivalent clearance in its own normal-flow
   layout (e.g. #wrap's top padding in chess/checkers), same as before --
   this stylesheet can't know the caller's layout. */
.tui-zoom-row {
  position: fixed; z-index: 13;
  display: flex; flex-direction: row; gap: 6px;
}
.tui-ctrl-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20, 14, 9, 0.55); border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.tui-ctrl-btn:active { background: rgba(20, 14, 9, 0.75); }
.tui-ctrl-btn.active { background: rgba(201, 139, 61, 0.85); border-color: #c98b3d; color: #2c2117; }

/* Leave/forfeit -- same round dark-glass shape as .tui-ctrl-btn (dropped
   into the same .tui-zoom-row on the board screen so it doesn't need its
   own layout clearance reserved), but its own red-tinted border so it
   doesn't get mistaken for a zoom/pan control mid-row. Also used
   standalone (not inside a .tui-zoom-row) on the waiting-room panel and
   the games-list row in the root index.html. */
.tui-forfeit-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20, 14, 9, 0.55); border: 2px solid rgba(211, 71, 61, 0.6);
  color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.tui-forfeit-btn:active { background: rgba(120, 20, 15, 0.55); }

/* Full-cover PASS interstitial -- "PASS TO <name>", tapped through to
   reveal the real game UI for that seat (and, per the design, the moment
   its per-turn clock actually starts -- see functions/room/reveal.js).
   Sits above everything else on the game screen; a per-game page can
   restyle .tui-pass-gate freely (background/typography) as long as it
   keeps covering the full viewport and stays tappable. */
.tui-pass-gate {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px; box-sizing: border-box;
  background: rgba(10, 8, 6, 0.92); color: #f3e6d2;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.tui-pass-gate .tui-pass-title { font: 800 22px "Segoe UI", sans-serif; letter-spacing: 0.03em; }
.tui-pass-gate .tui-pass-sub { font-size: 13px; opacity: 0.75; }

/* Read-only spectate banner, shown above the live board while it's a
   remote player's or an NPC's turn and this device holds no controls to
   offer -- deliberately quiet (a thin strip, not a modal) since the whole
   point of spectate mode is that the board itself stays live and visible
   underneath it. */
.tui-spectate-banner {
  width: 100%; text-align: center; font-size: 12px; padding: 6px 10px;
  border-radius: 8px; opacity: 0.8; box-sizing: border-box;
}