/* Timer Imposter — ADDITIONS ONLY.
 *
 * ../timer-game/style.css is loaded first and owns everything shared: the
 * tokens, fonts, header bar, .big-button system (green START, .is-running
 * orange STOP, .is-handoff slate for pass/reveal), .players-card, .count-btn,
 * .diff-tagline and the .article-section accordion. Nothing here redefines any
 * of that. Rewriting those values locally is exactly how the two games would
 * drift apart, which is the mistake this file exists to avoid.
 *
 * Only two things are genuinely new: the secret card (Imposter's private
 * reveal, which the Timer has no equivalent of) and the end-of-round times
 * list.
 */

/* ---------- stages ----------
   [hidden] { display: none !important } already comes from Timer's stylesheet,
   so a class selector here must never set display on a hidden stage. */
.ti-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ti-stage[hidden] { display: none !important; }

/* #app's flex gap is 8px, but .big-button paints a 12px hard shadow BELOW its
   border box, so on every screen that ends in a button the shadow overlapped
   into the gap and collided with the accordion. The intro looked fine only
   because it ends in a card instead. Clear the shadow, then add real space. */
.article-section { margin-top: 1.75rem; }

.ti-turn {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  text-align: center;
}

.ti-help {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

/* ---------- secret card ----------
   Imposter's private reveal. Deliberately tap-to-open and tap-to-hide: a phone
   being passed round a table has no hover, and an accidental reveal ends the
   round. */
/* FIXED height, not min-height. Closed and open hold different content, and a
   card that resizes on tap throws the whole page down as you reveal, which is
   especially bad here because the next thing you do is hand the phone over. */
.secret-card {
  appearance: none;
  width: 100%;
  height: 200px;
  border: 2px dashed var(--gof-primary-dark);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  transition: border-color 120ms ease-out;
}

.secret-card.is-open { border-style: solid; }

/* Already read: the card is no longer the action, the button below is. Drop
   the tap affordance so it does not invite a tap that now does nothing. */
.secret-card.is-spent { cursor: default; }

/* One grid cell shared by two buttons: whichever is visible sits in the same
   place at the same size, so swapping them moves nothing. */
.ti-button-slot {
  display: grid;
  place-items: center;
}

.ti-button-slot > .big-button { grid-area: 1 / 1; }

/* iOS holds a tap for ~300ms waiting to see if a double-tap is coming, then
   fires zoom instead of a second click. On a button people tap twice in under
   a tenth of a second that means the STOP is either swallowed or turns into a
   page zoom. Timer Game sets this on .guess-step-btn but NOT on .big-button,
   which is the one it matters most on (reported on device 2026-08-23: double
   taps zooming or not registering, fastest recorded stop 0.06s).
   `manipulation` kills double-tap zoom on this element only; pinch zoom on the
   rest of the page still works, so nothing is lost for accessibility. */
.big-button,
.secret-card {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.is-invisible {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- the secret, on the real clock ---------- */
.secret-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.secret-clock .clock-display { width: auto; min-width: 8.5rem; }

/* The imposter gets the same plate, in amber. It has to be instantly different
   from the red target at a glance, because you read it in front of everyone. */
.secret-clock.is-imposter .clock-display {
  font-family: 'League Spartan', sans-serif;
  letter-spacing: 0.12em;
  color: var(--clock-glow-amber);
  text-shadow: 0 0 2px var(--clock-glow-amber);
}

/* Hierarchy inside the card, closed: the name identifies who should be
   holding the phone, the action line is what they do, the hint is a whisper.
   Three clearly different sizes, not three competing ones. */
.secret-card-who {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2rem);
  line-height: 1.05;
  color: var(--text-primary);
  text-align: center;
}

.secret-card-face {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  color: var(--gof-primary-dark);
  text-align: center;
}

.secret-card-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.85;
}

/* Open, the name drops to a quiet label: the clock is the point now. The card
   itself stays white, because the dark plate belongs to the clock, exactly as
   it does on the Timer's own screen. */
.secret-card.is-open .secret-card-who {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Timer's .players-card is display:none until body[data-played="false"], an
   attribute that belongs to the Timer's own state machine. This game drives
   phases instead, so it is shown outright. Its fixed 13.4rem height also has
   to go, because the name inputs expand inside it. */
.players-card {
  display: flex;
  height: auto;
}

/* ---------- names ---------- */
.ti-names {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}

/* Row shape copied from Trivia (.player-row / .player-remove / .btn-add-player)
   so removing a player works the way it does in the other games, painted in
   Timer Game's tokens rather than Trivia's. */
.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.player-remove {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1.5px solid #cfd8dc;
  border-radius: 10px;
  background: var(--card-bg);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}

.player-remove:hover:not(:disabled) {
  border-color: var(--gof-warm);
  color: var(--gof-warm);
}

.player-remove:disabled { opacity: 0.3; cursor: default; }

.btn-add-player {
  width: 100%;
  border: 1.5px dashed var(--gof-primary-dark);
  border-radius: 10px;
  background: none;
  padding: 10px;
  font-family: 'Arimo', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gof-primary-dark);
  cursor: pointer;
  margin-top: 4px;
}

.btn-add-player:disabled { opacity: 0.4; cursor: default; }

.ti-name-input {
  font-family: 'Arimo', sans-serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  padding: 0.55rem 0.75rem;
  border: 1.5px solid #cfd8dc;
  border-radius: 10px;
  background: var(--card-bg);
  width: 100%;
}

.ti-name-input:focus {
  outline: none;
  border-color: var(--gof-primary-dark);
}

.ti-locked-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.4rem;
}

/* ---------- times list ---------- */
.ti-times {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ti-time-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}

.ti-time-row.is-imposter {
  outline: 2px solid var(--gof-warm);
}

.ti-time-who {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.ti-time-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}