/* Tripel board. Cards are landscape so 21 of them fit a phone in 3 columns without scrolling. */

.tripel-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--s2) 0 var(--s4);
}
.tripel-hud .clock { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: center; }
.tripel-hud .left { font-size: var(--fs-s); color: var(--text-2); }
.tripel-hud .right { justify-self: end; }

.scores { display: flex; gap: var(--s2); }
.score {
  display: flex; align-items: center; gap: var(--s2);
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.score.lead { outline: 2px solid var(--text); outline-offset: -2px; }

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* landscape cards (--ar set by the board, see boardAspect) */
.card {
  aspect-ratio: var(--ar, 120 / 76);
  background: var(--card-face);
  border-radius: var(--r);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  display: grid; place-items: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
}
.card svg { width: 100%; height: 100%; }
.card:active { transform: scale(0.97); }
.card.sel {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), inset 0 0 0 2.5px var(--text);
}
.card.hint { box-shadow: var(--shadow-1), inset 0 0 0 2.5px var(--card-orange); }
.card.wrong { animation: shake 280ms var(--ease); box-shadow: var(--shadow-1), inset 0 0 0 2.5px var(--bad); }
.card.gone { opacity: 0; transform: scale(0.9); }
.card.new { animation: deal var(--t-slow) var(--ease) both; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes deal { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

.tripel-foot {
  display: flex; gap: var(--s3); justify-content: center;
  margin-top: var(--s5);
}
.progress {
  height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: var(--s2);
}
.progress i { display: block; height: 100%; background: var(--text); border-radius: 2px; }

.toast {
  position: fixed; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-s); font-weight: 600;
  box-shadow: var(--shadow-3);
}

/* result, waiting and pause screens */
.stage.result { align-items: center; text-align: center; gap: var(--s3); }
.result-big { font-size: var(--fs-xxl); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.result-line { color: var(--text-2); font-size: var(--fs-s); max-width: 32ch; }
.others { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; margin-top: var(--s4); font-size: var(--fs-s); }
.others > span, .others { color: var(--text-2); }
.others .avatar { vertical-align: middle; margin-right: 6px; }
.lock { justify-self: end; font-size: var(--fs-s); font-weight: 600; color: var(--bad); }
.card:disabled { opacity: 0.45; }