/* Guesstures — everything the shared theme does not already cover.
 *
 * Phone first, and specifically a phone held at arm's length by somebody who is
 * also flapping their arms: the word is the largest thing on the screen, GOT IT
 * is a thumb-sized slab pinned under it, and nothing in the acting screen needs
 * to be read carefully.
 *
 * Every control that takes typing is >= 16px, because iOS Safari zooms the page
 * in on any focused control under that and never zooms back out.
 */

:root {
  --gs-1: var(--ansi-green);
  --gs-2: var(--ansi-yellow);
  --gs-3: var(--ansi-magenta);
  --gs-panic: var(--ansi-red);
}

/* Team colors, indexed the way the engine indexes teams. */
.gs-team-0 { --team: var(--ansi-red); }
.gs-team-1 { --team: var(--ansi-blue); }
.gs-team-2 { --team: var(--ansi-green); }
.gs-team-3 { --team: var(--ansi-yellow); }
.gs-team-4 { --team: var(--ansi-magenta); }
.gs-team-5 { --team: var(--ansi-cyan); }

.gs-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--fg-dim);
  margin: 0;
}

.gs-hint { font-size: 0.85rem; line-height: 1.5; margin: 0.25rem 0 0; }

/* --- scoreboard --------------------------------------------------------- */

.gs-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gs-score {
  flex: 1 1 6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--team, var(--line));
  border-radius: var(--radius);
  background: var(--bg-cell);
}

.gs-score-up {
  background: var(--bg-raised);
  border-color: var(--team, var(--accent));
}

.gs-score-name { color: var(--fg-dim); font-size: 0.85rem; }
.gs-score-n { font-size: 1.4rem; color: var(--team, var(--fg)); }

/* --- setup -------------------------------------------------------------- */

.gs-teams { gap: 0.5rem; }

.gs-team-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.gs-team-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* The shared theme styles `input[type='text']` and `select` only, so a number
   field falls through to the browser's own control: a white box sitting in a
   row of dark themed buttons. This restates the theme's own input rule for it.
   Worth pushing up into assets/theme.css when this game is merged into the site
   — any other page with a number field has the same hole. */
input[type='number'] {
  font-family: var(--mono);
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  width: 100%;
}

input[type='number']:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

/* The presets beside the field already do the stepping, and the native spinner
   eats half of a 5rem-wide box. */
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gs-field { display: flex; flex-direction: column; gap: 0.4rem; }

.gs-field-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Width lives in the qualified block at the end of this file for the same
   specificity reason as the font size — see the note down there. */
.gs-number { text-align: center; }

/* 44px, in literal pixels, because what this number is for is the size of a
   fingertip — not a multiple of a root font-size that is 15px here. 2.4rem came
   out at 36, which is a miss-and-try-again on a phone being held by somebody who
   is also being watched by the room. */
.gs-mini,
.gs-wide-mini {
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  min-height: 44px;
}

.gs-wide-mini { width: 100%; }

.gs-mini.gs-on {
  border-color: var(--accent);
  color: var(--accent);
}

.gs-sound-row { justify-content: space-between; }

.gs-primary,
.gs-quiet {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.9rem 1rem;
}

.gs-primary {
  border-color: var(--accent);
  color: var(--accent);
}

.gs-go { font-size: 1.3rem; padding: 1.1rem 1rem; }

.gs-quiet { color: var(--fg-dim); font-size: 0.9rem; padding: 0.6rem; min-height: 44px; }

/* --- handoff / recap / winner ------------------------------------------- */

.gs-handoff,
.gs-recap,
.gs-over {
  text-align: center;
  border-left: 3px solid var(--team, var(--line));
}

.gs-big-team {
  font-size: clamp(2rem, 12vw, 3.5rem);
  margin: 0.2rem 0;
  color: var(--team, var(--fg));
  line-height: 1.1;
}

.gs-rules { text-align: left; color: var(--fg-dim); line-height: 1.6; margin: 0; padding-left: 1.1rem; }
.gs-rules li { margin-bottom: 0.35rem; }

.gs-recap-list,
.gs-final {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  text-align: left;
}

.gs-recap-list li,
.gs-final li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--line);
}

.gs-recap-word { flex: 1 1 auto; }
.gs-recap-mark { width: 1rem; text-align: center; }
.gs-got-it { color: var(--fg); }
.gs-got-it .gs-recap-mark { color: var(--ansi-green); }
.gs-lost-it { color: var(--fg-dim); text-decoration: line-through; }
.gs-lost-it .gs-recap-mark { color: var(--ansi-red); text-decoration: none; }
.gs-recap-pts { color: var(--fg-dim); }

.gs-final li { justify-content: space-between; color: var(--team, var(--fg)); }

/* --- building the stack, face down -------------------------------------- */

.gs-slots { display: flex; gap: 0.4rem; }

.gs-slot {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-cell);
}

.gs-slot-full { border-style: solid; border-color: var(--accent); }
.gs-slot-n { font-size: 0.65rem; letter-spacing: 0.14em; color: var(--fg-dim); }
.gs-slot-face { font-size: 1.15rem; color: var(--fg-dim); }
.gs-slot-full .gs-slot-face { color: var(--accent); }

.gs-piles { gap: 0.5rem; }

.gs-pile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
}

/* The stack is full: the piles stay on screen so the choice made is still
   readable, but they no longer answer a tap. */
.gs-pile-off { opacity: 0.35; }

.gs-pile-pts { display: flex; align-items: center; gap: 0.3rem; }

.gs-pile-pt {
  font-size: 0.95rem;
  color: var(--pts);
  border: 1px solid var(--pts);
  border-radius: 999px;
  min-width: 1.7rem;
  padding: 0.15rem 0;
  text-align: center;
}

.gs-pile-or { font-size: 0.65rem; color: var(--fg-dim); }
.gs-pile-body { display: flex; flex-direction: column; gap: 0.15rem; }
.gs-pile-name { font-size: 1rem; }
.gs-pile-note { font-size: 0.72rem; color: var(--fg-dim); line-height: 1.35; }

/* --- picking a side, and the order they load in ------------------------- */

.gs-picks { gap: 0.9rem; }

/* A card is a thing you pick up, so it looks like one — and it slides rather
   than jumps when the card being dragged passes it. The dragged card itself is
   exempt: it follows the finger, and a transition there is lag. */
.gs-pick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.3rem 0.35rem 0.45rem;
  background: var(--bg);
  transition: transform 0.14s ease;
}

.gs-pick.gs-lift {
  transition: none;
  position: relative;
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.45);
}

/* The card's whole header is its grab handle. `touch-action: none` is what
   stops the page scroller from stealing a vertical drag — which is exactly why
   it is confined to this strip and not put on the card: everywhere else on the
   pick screen still scrolls with a thumb. */
.gs-grip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: transparent;
  text-align: left;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  /* Holding a card on iOS must pick it up, not offer to copy the word. */
  -webkit-touch-callout: none;
}

.gs-grip:hover:not(:disabled) { border-color: transparent; }
.gs-grip:focus-visible { outline: 1px solid var(--accent); border-radius: var(--radius); }
.gs-lift .gs-grip { cursor: grabbing; }

.gs-grip-dots {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--fg-dim);
  /* The braille grip glyph is drawn tall and thin; nudge it onto the baseline
     of the label beside it. */
  transform: translateY(-0.05em);
}

.gs-lift .gs-grip-dots,
.gs-grip:active .gs-grip-dots { color: var(--accent); }

.gs-pick-n {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.gs-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.gs-face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.7rem;
  min-height: 5rem;
  text-align: left;
  border-left: 3px solid var(--pts, var(--line));
}

.gs-pts-1 { --pts: var(--gs-1); }
.gs-pts-2 { --pts: var(--gs-2); }
.gs-pts-3 { --pts: var(--gs-3); }

.gs-face-pts {
  font-size: 0.7rem;
  color: var(--pts);
  border: 1px solid var(--pts);
  border-radius: 999px;
  padding: 0 0.4rem;
}

.gs-face-text { font-size: 1rem; line-height: 1.25; }
.gs-face-cat { font-size: 0.7rem; color: var(--fg-dim); }

.gs-face.gs-chosen {
  border-color: var(--pts);
  background: color-mix(in srgb, var(--pts) 12%, var(--bg-cell));
}

/* --- acting: the Mimer -------------------------------------------------- */

/* While a turn runs, the page's own heading, tagline and rules panels come off
   the screen: on a 390px phone they are half the viewport, and the actor cannot
   scroll to find GOT IT with four seconds on a card. */
.gs-playing .gs-chrome { display: none; }

.gs-acting {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Fill what is actually visible. On an installed iOS home-screen app both
     100dvh and a percentage come back short by the top safe-area inset, which
     is why this leans on the wrapper rather than pinning to the viewport. */
  min-height: 88vh;
}

.gs-acting-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.gs-abandon {
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  min-height: 0;
  color: var(--fg-dim);
  border-color: var(--line);
}

.gs-acting-team {
  color: var(--team, var(--fg));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.gs-run-score { color: var(--fg-dim); font-size: 0.85rem; }

.gs-turnbar,
.gs-bar {
  display: block;
  height: 0.35rem;
  background: var(--bg-cell);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.gs-bar { height: 0.9rem; margin-top: auto; }

.gs-turnbar-fill,
.gs-bar-fill {
  display: block;
  height: 100%;
  background: var(--fg-dim);
  /* No transition: the width IS the clock, and easing it would lie about how
     much time is left at exactly the moment it matters most. */
}

.gs-bar-fill { background: var(--pts, var(--accent)); }

.gs-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--pts, var(--line));
  border-radius: var(--radius);
  background: var(--bg-cell);
  min-height: 15rem;
}

.gs-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.gs-card-pts { color: var(--pts, var(--fg-dim)); }

.gs-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.gs-word {
  font-size: clamp(1.8rem, 9vw, 3rem);
  line-height: 1.12;
  color: var(--fg);
  overflow-wrap: break-word;
  hyphens: auto;
}

.gs-cat {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.gs-left { text-align: right; font-size: 0.9rem; color: var(--fg-dim); }

.gs-counting .gs-word { font-size: clamp(4rem, 28vw, 8rem); color: var(--accent); }
.gs-counting .gs-cat { text-transform: none; letter-spacing: 0; }

.gs-panic { border-color: var(--gs-panic); }
.gs-panic .gs-bar-fill { background: var(--gs-panic); }
.gs-panic .gs-left { color: var(--gs-panic); }
.gs-panic .gs-word { color: var(--gs-panic); }

.gs-empty .gs-word { color: var(--ansi-green); }

.gs-pips { display: flex; gap: 0.4rem; justify-content: center; }

.gs-pip {
  width: 1.6rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--bg-cell);
  border: 1px solid var(--line);
}

.gs-pip-snatched { background: var(--ansi-green); border-color: var(--ansi-green); }
.gs-pip-dropped { background: transparent; border-color: var(--ansi-red); }
.gs-pip-live { background: var(--accent); border-color: var(--accent); }

.gs-got {
  width: 100%;
  min-height: 5.5rem;
  font-size: 2rem;
  letter-spacing: 0.1em;
  border-color: var(--ansi-green);
  color: var(--ansi-green);
  /* A double-tap on a big target is a zoom gesture on iOS otherwise, and the
     actor is going to hit this button hard and often. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.gs-got:active { background: color-mix(in srgb, var(--ansi-green) 22%, var(--bg-cell)); }

.gs-got-waiting { border-color: var(--line); color: var(--fg-dim); }

/* The house rule from the theme: hover only where hover is real, and never a
   solid fill with an inverted label — the word has to stay readable on top of
   whatever the fill is. */
@media (hover: hover) {
  .gs-face:hover { border-color: var(--pts); background: var(--bg-raised); }
  .gs-got:hover { background: color-mix(in srgb, var(--ansi-green) 14%, var(--bg-cell)); }
}

@media (min-width: 40rem) {
  .gs-acting { min-height: 32rem; }
  .gs-card { min-height: 18rem; }
}

/* --- last, and on purpose ------------------------------------------------
 *
 * Both of these lose to the shared theme's `input[type='text']` rule if written
 * as a bare class: an attribute selector counts for as much as a class, so
 * `.gs-team-name` (0,1,0) is beaten by `input[type='text']` (0,1,1) and the
 * declarations silently do nothing. Two consequences, neither of them visible
 * in a passing test:
 *
 *   - font-size falls back to the theme's 0.9rem = 14.4px, and iOS Safari zooms
 *     the page in on any focused control under 16px and never zooms back out;
 *   - the team's color stripe down the side of its name field disappears.
 *
 * The same tie sends `width: 100%` through from the input rule, which stretched
 * the number field across the row and wrapped its presets onto a second line.
 *
 * So they are qualified to out-specify the theme, and they go at the end of the
 * file where nothing else can tie with them.
 */
/* 16px flat, not 1rem: the shared theme sets the root to 15px, so `1rem` here
   is 15px — under the threshold, and measured at 15px in a real browser before
   this line said `px`. iOS's rule is about the computed pixel size, so that is
   what gets written. */
input[type='text'].gs-team-name,
input[type='number'].gs-number {
  font-size: 16px;
  min-height: 44px;
}

input[type='text'].gs-team-name {
  border-left: 3px solid var(--team, var(--line));
}

input[type='number'].gs-number {
  width: 5rem;
  flex: 0 0 auto;
}