/* Reflex Tap — activity styles (player + host).
   Source of truth: MASTER_SPEC Part C + DESIGN.md. */

/* ---------- shared stage bits ---------- */

.rh-round, .rp-round {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.rh-round b, .rp-round b { color: var(--yellow); }

/* ---------- PLAYER ---------- */

.reflex-player {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rp-timer {
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 4.6ch;
  text-align: right;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  padding: 0.35rem 0.7rem;
  color: var(--white);
}

.rp-timer.low { color: #f87171; border-color: #f87171; }

.rp-next {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.rp-next b {
  color: var(--yellow);
  font-size: 1.25rem;
}

.rp-wrongs {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fda4af;
  min-height: 1.1em;
}

.rp-grid {
  display: grid;
  gap: 0.55rem;
  width: 100%;
}

.rp-tile {
  aspect-ratio: 1;
  border: none;
  border-radius: 0.9rem;
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(31, 18, 53, 0.45);
  transition: transform 0.05s ease, opacity 0.25s ease, box-shadow 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}

.rp-tile:active {
  transform: scale(0.93);
  box-shadow: 0 1px 0 rgba(31, 18, 53, 0.45);
}

.rp-tile:nth-child(5n + 1) { background: var(--yellow); }
.rp-tile:nth-child(5n + 2) { background: var(--pink); }
.rp-tile:nth-child(5n + 3) { background: var(--cyan); }
.rp-tile:nth-child(5n + 4) { background: var(--orange); }
.rp-tile:nth-child(5n) { background: var(--green); }

.rp-tile.cleared {
  opacity: 0.18;
  transform: scale(0.82);
  pointer-events: none;
  box-shadow: none;
}

.rp-tile.wrong {
  animation: rb-shake 0.3s ease;
}

.rp-grid.dense .rp-tile { font-size: 1.05rem; border-radius: 0.6rem; }
.rp-grid.dense { gap: 0.3rem; }

@keyframes rb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* countdown + GO + overlays */

.rp-stage {
  position: relative;
  width: 100%;
}

.rp-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 16, 101, 0.55);
  border-radius: 1.25rem;
  z-index: 5;
}

.rp-countdown b {
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--magenta);
  animation: rb-pop 1s ease infinite;
  font-variant-numeric: tabular-nums;
}

.rp-go {
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 900;
  color: var(--green);
  text-shadow: 4px 4px 0 var(--ink);
  animation: rb-go 0.7s ease forwards;
}

@keyframes rb-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes rb-go {
  0% { transform: scale(0.3); opacity: 0; }
  35% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.rp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(46, 16, 101, 0.72);
  border-radius: 1.25rem;
  z-index: 6;
  text-align: center;
  padding: 1rem;
}

.rp-overlay .rp-big {
  font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: 900;
  color: var(--white);
}

.rp-overlay .rp-big.gold { color: var(--yellow); }
.rp-overlay .rp-big.timesup { color: #f87171; }

.rp-overlay .rp-sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.rp-overlay .rp-time {
  font-size: 2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
}

/* ---------- HOST ---------- */

.reflex-host {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rh-stage {
  position: relative;
  width: 100%;
  min-height: 16rem;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  gap: 0.9rem;
  overflow: hidden;
}

.rh-timer {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: center;
  color: var(--white);
}

.rh-timer.low { color: #f87171; }

.rh-tiles {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 34rem;
}

.rh-tile {
  aspect-ratio: 1;
  border-radius: 0.8rem;
  font-size: clamp(1rem, 3vw, 1.7rem);
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.rh-tile:nth-child(5n + 1) { background: var(--yellow); }
.rh-tile:nth-child(5n + 2) { background: var(--pink); }
.rh-tile:nth-child(5n + 3) { background: var(--cyan); }
.rh-tile:nth-child(5n + 4) { background: var(--orange); }
.rh-tile:nth-child(5n) { background: var(--green); }

.rh-timesup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 16, 101, 0.55);
  z-index: 5;
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  color: #f87171;
  text-shadow: 4px 4px 0 var(--ink);
  animation: rb-pop 0.5s ease;
}

/* the bomb (C5) */

.rh-bomb {
  position: relative;
  width: 100%;
  max-width: 24rem;
}

.rh-bomb svg { width: 100%; display: block; }

.rb-body { fill: #312e81; stroke: #1e1b4b; stroke-width: 4; }
.rb-highlight { fill: rgba(255, 255, 255, 0.22); }
.rb-cap { fill: #475569; }
.rb-fuse-base { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 7; stroke-linecap: round; }
.rb-fuse { fill: none; stroke: #d6b077; stroke-width: 7; stroke-linecap: round; }
.rb-number {
  font-size: 74px;
  font-weight: 900;
  fill: var(--yellow);
  stroke: var(--magenta);
  stroke-width: 3;
  paint-order: stroke;
  font-family: 'Segoe UI', 'Trebuchet MS', sans-serif;
}

.rb-spark { transform-box: fill-box; transform-origin: center; }

/* explosion burst */

.rh-burst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  z-index: 8;
  pointer-events: none;
}

.rh-burst svg { width: 70%; max-width: 22rem; }

.rh-burst .burst-text {
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--magenta);
  animation: rb-flash 0.6s ease both;
}

@keyframes rb-flash {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1.35); opacity: 1; }
  55% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* leaderboard (C7) */

.rh-lb { width: 100%; }

.rh-lb-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--yellow);
  text-align: center;
  margin-bottom: 0.8rem;
}

.rh-lb-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rh-lb-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.9rem;
  padding: 0.65rem 1rem;
  min-height: 3.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.rh-lb-row .lb-rank {
  font-weight: 900;
  color: var(--yellow);
  min-width: 2.2ch;
  text-align: center;
}

.rh-lb-row .lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rh-lb-row .lb-time {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--green);
}

.rh-lb-row .lb-arrow { min-width: 1.6ch; text-align: center; font-weight: 900; }
.rh-lb-row .lb-arrow.up { color: var(--green); }
.rh-lb-row .lb-arrow.down { color: #f87171; }

/* round 1 cascade */
.rh-lb-row.lb-cascade { animation: rb-cascade 0.5s ease both; }
@keyframes rb-cascade {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* later rounds: slide from old position to new */
.rh-lb-row.lb-slide { transition: transform 4s cubic-bezier(0.2, 0.6, 0.25, 1); }
.rh-lb-row.lb-new { animation: rb-cascade 0.5s ease both; }

/* podium (C8) */

.rh-podium { width: 100%; text-align: center; }

.rh-podium-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--yellow);
  margin-bottom: 1rem;
}

.podium-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  min-height: 15rem;
}

.podium-slot {
  flex: 1;
  max-width: 14rem;
  border-radius: 0.9rem 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1rem 0.5rem 0;
  font-weight: 900;
  color: var(--ink);
  animation: rb-podium 0.7s ease both;
}

.podium-slot .ps-name { font-size: 1.15rem; overflow-wrap: anywhere; }
.podium-slot .ps-time { font-size: 1rem; font-variant-numeric: tabular-nums; }
.podium-slot .ps-place { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; }

.podium-slot.first { height: 13.5rem; background: var(--yellow); animation-delay: 0.15s; }
.podium-slot.second { height: 10.5rem; background: #cbd5e1; animation-delay: 0s; }
.podium-slot.third { height: 8rem; background: #d97706; color: var(--white); animation-delay: 0.3s; }

@keyframes rb-podium {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.rh-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* host setup screen (C11) */

.reflex-setup {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rs-title { margin: 0; font-size: 1.4rem; font-weight: 900; color: var(--yellow); }

.rs-hint { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }

.rs-list { display: flex; flex-direction: column; gap: 0.55rem; }

.rs-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.9rem;
  padding: 0.6rem 0.8rem;
  font-weight: 700;
}

.rs-label { min-width: 5rem; color: var(--yellow); }

.rs-row label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }

.rs-row input {
  width: 4.6rem;
  font-size: 1rem;
  font-weight: 800;
  padding: 0.45rem 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.rs-btn {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  border-radius: 0.6rem;
  min-width: 2.4rem;
  height: 2.4rem;
  font-weight: 900;
  cursor: pointer;
}

.rs-btn:hover { background: rgba(255, 255, 255, 0.3); }
.rs-btn.remove { color: #fca5a5; }

.rs-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.rs-error { margin: 0; color: #fca5a5; font-weight: 700; min-height: 1.2em; }