/* ═══════════════════════════ BUTTONS ═══════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 700;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  width: 100%;
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow  var(--dur-fast) var(--ease-out),
    transform   var(--dur-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: 3px solid var(--clr-primary-light);
  outline-offset: 3px;
}

.btn-lg { font-size: var(--text-lg); min-height: 56px; border-radius: var(--radius-sm); }

/* Shimmer overlay */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
}
.btn:hover::after {
  animation: shimmer var(--dur-dramatic) var(--ease-in-out);
}

.btn-primary {
  background: var(--clr-primary);
  color: #fff;
}
.btn-primary:hover  { background: var(--clr-primary-hover); box-shadow: var(--shadow-primary); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }

.btn-secondary {
  background: var(--clr-secondary);
  color: #fff;
}
.btn-secondary:hover  { background: var(--clr-secondary-hover); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
}
.btn-ghost:hover  { background: var(--clr-surface-2); color: var(--clr-text); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(1px); }

/* ═══════════════════════════ SETUP: INPUTS ═══════════════════════════ */
.players-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.vs-badge {
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--clr-text-subtle);
  padding-bottom: .55rem;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.field input {
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-family: var(--font);
  font-size: var(--text-base);
  padding: var(--sp-3) var(--sp-4);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

/* ═══════════════════════════ SETUP: MODE SELECTOR ═══════════════════════════ */
.mode-group {
  border: none;
  margin-bottom: var(--sp-6);
}
.mode-group legend {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-3);
}
.mode-option {
  display: block;
  cursor: pointer;
  margin-bottom: var(--sp-2);
}
.mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.mode-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--clr-surface-2);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition:
    border-color var(--dur-fast),
    background   var(--dur-fast),
    transform    var(--dur-fast);
}
.mode-option input[type="radio"]:checked + .mode-label {
  border-color: var(--clr-primary);
  background: rgba(124,58,237,.1);
}
.mode-option:focus-within .mode-label {
  box-shadow: 0 0 0 3px rgba(124,58,237,.3);
}
.mode-option:hover .mode-label { transform: translateX(3px); }

.mode-icon { font-size: var(--text-2xl); }
.mode-text strong { display: block; font-size: var(--text-sm); }
.mode-text small  { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* ═══════════════════════════ PICK SCREEN ═══════════════════════════ */
.pick-card { text-align: center; }

.turn-indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--clr-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}

.turn-avatar {
  background: var(--clr-primary);
  color: #fff;
  font-weight: 900;
  font-size: var(--text-sm);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.turn-text { font-size: var(--text-base); }
.turn-text strong { color: var(--clr-primary-light); }

.pick-hint {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-5);
  letter-spacing: .3px;
}

.pick-buttons {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

.btn-pick {
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--clr-surface-2);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  width: auto;
  flex: 1;
  max-width: 130px;
  transition:
    border-color var(--dur-fast),
    background   var(--dur-fast),
    transform    var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn-pick:hover {
  border-color: var(--clr-primary);
  background: rgba(124,58,237,.1);
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 12px 28px rgba(124,58,237,.3);
}
.btn-pick:active { transform: scale(0.94) translateY(0); box-shadow: none; }

.btn-pick.selected {
  border-color: var(--clr-primary);
  background: rgba(124,58,237,.15);
  box-shadow: 0 0 0 4px rgba(124,58,237,.2);
}

.btn-pick.bouncing { animation: pickBounce var(--dur-slow) var(--ease-spring) forwards; }

.pick-emoji { font-size: 2.8rem; line-height: 1; display: block; }
.pick-label { font-size: var(--text-xs); color: var(--clr-text-muted); font-weight: 700; }

/* ═══════════════════════════ HANDOFF SCREEN ═══════════════════════════ */
.handoff-card { text-align: center; }
.handoff-icon {
  font-size: 4rem;
  margin-bottom: var(--sp-4);
  display: block;
  animation: float 2.5s var(--ease-in-out) infinite;
}
.handoff-title { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--sp-3); }
.handoff-msg   { font-size: var(--text-base); margin-bottom: var(--sp-2); }
.handoff-msg strong { color: var(--clr-primary-light); }
.handoff-sub   { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--sp-6); }

/* ═══════════════════════════ RESULT SCREEN ═══════════════════════════ */
.result-card { text-align: center; overflow: visible; }

.result-arena {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) 0;
  overflow: hidden;          /* clips sliding emojis */
}

.result-pick-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  will-change: transform, opacity;
}
.result-pick-block.enter-left  { animation: pickEntryLeft  var(--dur-slow) var(--ease-out) forwards; }
.result-pick-block.enter-right { animation: pickEntryRight var(--dur-slow) var(--ease-out) forwards; }
.result-pick-block.loser { animation: loserFade var(--dur-slow) var(--ease-out) forwards; }

.result-vs { font-size: var(--text-xs); font-weight: 900; color: var(--clr-text-subtle); letter-spacing: 1px; }

.res-pname { font-size: var(--text-xs); font-weight: 700; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.res-emoji { font-size: 4rem; line-height: 1; display: block; }
.res-pick-label { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* Result banner */
.result-banner {
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-lg);
  font-weight: 800;
  margin-bottom: var(--sp-5);
  opacity: 0;
  transform: scale(0.7);
}
.result-banner.show        { animation: resultReveal var(--dur-slow) var(--ease-spring) forwards; }
.result-banner.banner-win  { background: rgba(34,197,94,.15);  color: var(--clr-success); }
.result-banner.banner-draw { background: rgba(245,158,11,.15); color: var(--clr-warning); }

.result-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ═══════════════════════════ GAME OVER SCREEN ═══════════════════════════ */
.gameover-card { text-align: center; }

.gameover-trophy {
  font-size: 5rem;
  display: block;
  margin-bottom: var(--sp-4);
  animation: float 2.5s var(--ease-in-out) infinite;
}

.gameover-title {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: 900;
  margin-bottom: var(--sp-2);
  line-height: 1.15;
}

.go-winner-name {
  display: inline-block;
  color: var(--clr-primary-light);
}

/* Typewriter chars */
.tw-char {
  display: inline-block;
  opacity: 0;
  animation: twChar var(--dur-fast) var(--ease-out) forwards;
}

.gameover-subtitle {
  color: var(--clr-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--sp-6);
}

.gameover-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  background: var(--clr-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.go-score-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.go-score-val {
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1;
}
.go-dash { font-size: var(--text-xl); color: var(--clr-text-subtle); }

.gameover-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ─ Confetti piece ─ */
.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 3px;
  animation: confettiFall var(--dur-long) var(--ease-in) forwards;
  will-change: transform, opacity;
}

/* ─ Responsive ─ */
@media (max-width: 400px) {
  .btn-pick { padding: var(--sp-4) var(--sp-2); }
  .pick-emoji { font-size: 2rem; }
  .res-emoji { font-size: 3rem; }
  .players-row { flex-direction: column; gap: var(--sp-2); }
  .vs-badge { padding-bottom: 0; text-align: center; }
}