/* ═══════════════════════ RESET & BASE ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Nunito', sans-serif;
  background: #FFF8E7;
  color: #2D2D2D;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100dvh;
  padding: 1rem;
  overflow-y: auto;
}

/* ═══════════════════════ COLOR PALETTE ═══════════════════════ */
:root {
  --bg: #FFF8E7;
  --card-coral: #E8856C;
  --card-sage: #7EAA92;
  --card-gold: #F2C57C;
  --card-purple: #9B72AA;
  --card-blue: #6BA3BE;
  --card-pink: #D4849A;
  --text: #2D2D2D;
  --text-light: #5A5A5A;
  --shadow: rgba(45, 45, 45, 0.12);
  --correct: #5CB85C;
  --wrong: #D9534F;
}

/* ═══════════════════════ LAYOUT ═══════════════════════ */
#app {
  width: 100%;
  max-width: 480px;
  position: relative;
}
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  animation: fadeSlideIn 0.4s ease;
  width: 100%;
}
.screen.active { display: flex; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════ TYPOGRAPHY ═══════════════════════ */
h1 { font-size: 2.2rem; font-weight: 900; text-align: center; line-height: 1.1; }
h2 { font-size: 1.5rem; font-weight: 700; text-align: center; }
h3 { font-size: 1.1rem; font-weight: 700; text-align: center; color: var(--text-light); }
p { text-align: center; color: var(--text-light); line-height: 1.4; }

/* ═══════════════════════ BUTTONS ═══════════════════════ */
.btn {
  background: var(--card-coral);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 0.85rem 2rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px var(--shadow);
}
.btn:active { transform: scale(0.95); box-shadow: 0 2px 6px var(--shadow); }
.btn.sage { background: var(--card-sage); }
.btn.gold { background: var(--card-gold); color: var(--text); }
.btn.purple { background: var(--card-purple); }
.btn.small { padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 10px; }

/* ═══════════════════════ INPUTS ═══════════════════════ */
input[type="text"], input[type="number"] {
  width: 100%;
  border: 3px solid #E8E0D4;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
input:focus { border-color: var(--card-coral); }

/* ═══════════════════════ LOBBY ═══════════════════════ */
.title-icon { font-size: 3rem; margin-bottom: -0.5rem; }
#player-inputs { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.player-row {
  display: flex; gap: 0.5rem; align-items: center;
}
.player-row input { flex: 1; }
.player-row .dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.add-remove-row { display: flex; gap: 0.5rem; justify-content: center; }

/* ═══════════════════════ PASS SCREEN ═══════════════════════ */
.pass-icon { font-size: 4rem; margin-top: 1.5rem; animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ═══════════════════════ SECRET WORD ═══════════════════════ */
.secret-word-box {
  background: linear-gradient(135deg, var(--card-gold), #F5D89A);
  border-radius: 16px;
  padding: 1.2rem 2rem;
  box-shadow: 0 6px 20px rgba(242, 197, 124, 0.4);
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.secret-word-box .word {
  font-size: 2rem; font-weight: 900; letter-spacing: 1px;
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════ CLUE INPUT ═══════════════════════ */
.clue-input-wrap {
  width: 100%;
  position: relative;
}

/* ═══════════════════════ CLUE CARDS ═══════════════════════ */
.clue-cards { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }
.clue-card {
  background: white;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 3px 10px var(--shadow);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.clue-card.visible { opacity: 1; }
.clue-card .player-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.clue-card .clue-text {
  flex: 1; font-size: 1.2rem; font-weight: 700;
}
.clue-card.cancelled {
  opacity: 0.4;
  transform: scale(0.95);
}
.clue-card.cancelled .clue-text { text-decoration: line-through; }
.clue-card.survived { /* no extra animation */ }

@keyframes flipIn {
  from { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
  to { transform: perspective(400px) rotateX(0); opacity: 1; }
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0) scale(0.95); }
  20% { transform: translateX(-8px) scale(0.95); }
  40% { transform: translateX(8px) scale(0.95); }
  60% { transform: translateX(-5px) scale(0.95); }
  80% { transform: translateX(5px) scale(0.95); }
}

/* ═══════════════════════ GUESS RESULT ═══════════════════════ */
.result-icon { font-size: 4rem; }
.result-word {
  font-size: 1.8rem; font-weight: 900;
  padding: 0.5rem 1.5rem;
  border-radius: 12px;
}
.result-words-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.result-words-row .result-word { font-size: 1.4rem; }
.result-word-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
  opacity: 0.7;
}
.result-word-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-word.correct { background: #D4EDDA; color: #155724; }
.result-word.wrong { background: #F8D7DA; color: #721C24; }

/* ═══════════════════════ SCOREBOARD ═══════════════════════ */
.scoreboard {
  width: 100%;
  background: white;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 3px 10px var(--shadow);
}
.score-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
}
.score-row:nth-child(even) { background: #F9F5EE; }
.score-row .name { font-weight: 700; }
.score-row .pts { font-weight: 900; color: var(--card-coral); }

/* ═══════════════════════ ROUND BADGE ═══════════════════════ */
.round-badge {
  background: white;
  border-radius: 20px;
  padding: 0.3rem 1rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-light);
  box-shadow: 0 2px 8px var(--shadow);
}

/* ═══════════════════════ CONFETTI ═══════════════════════ */
.confetti-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 2px;
  animation: confettiFall 1.5s ease-out forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════ HOW TO PLAY ═══════════════════════ */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,45,45,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.help-overlay.active { display: flex; }
.help-box {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  max-width: 500px;
  width: 100%;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: popIn 0.3s ease;
}
.help-box ul { text-align: left; padding-left: 1.2rem; }
.help-box li { margin: 0.5rem 0; line-height: 1.4; }
.help-box { text-align: center; }
.help-btn {
  position: fixed;
  top: 1rem; right: 1rem;
  background: white;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--card-purple);
  box-shadow: 0 2px 8px var(--shadow);
  cursor: pointer;
  z-index: 100;
}

/* ═══════════════════════ TIMER RING ═══════════════════════ */
.timer-ring-wrap {
  position: relative;
  width: 80px; height: 80px;
  flex-shrink: 0;
}
.timer-ring { width: 80px; height: 80px; transform: rotate(-90deg); display: block; }
.timer-ring-bg { fill: none; stroke: #E8E0D4; stroke-width: 6; }
.timer-ring-progress {
  fill: none;
  stroke: var(--card-sage);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--text);
  transition: color 0.3s;
}
.timer-ring-wrap.urgent .timer-ring-progress { stroke: var(--card-coral); }
.timer-ring-wrap.urgent .timer-text { color: var(--card-coral); }
.timer-ring-wrap.urgent { animation: timerPulse 0.5s ease-in-out infinite; }
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ═══════════════════════ BUTTON RIPPLE ═══════════════════════ */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════ TRAITOR REVEAL ═══════════════════════ */
#result-traitor-text {
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  animation: traitorReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes traitorReveal {
  from { transform: scale(0.4) rotate(-5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
#result-traitor-text.caught-bg { background: #D4EDDA; color: #155724; }
#result-traitor-text.escaped-bg { background: #F8D7DA; color: #721C24; }

/* ═══════════════════════ VOTE BUTTONS ═══════════════════════ */
.vote-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.vote-btn {
  background: white;
  border: 3px solid #E8E0D4;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: all 0.2s;
}
.vote-btn:hover { border-color: var(--card-purple); }
.vote-btn.selected {
  border-color: var(--card-purple);
  background: #F3ECF7;
  transform: scale(1.02);
}
.vote-btn {
  animation: voteSlideIn 0.35s ease both;
}
@keyframes voteSlideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.vote-btn .player-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}

/* ═══════════════════════ TRAITOR ROLE BADGE ═══════════════════════ */
.role-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
}
.role-badge.traitor,
.role-badge.undercover { background: #F8D7DA; color: #721C24; }
.role-badge.ally,
.role-badge.civil { background: #D4EDDA; color: #155724; }
.role-badge.blanco { background: #EFE5F1; color: #3D2A4D; font-style: italic; }

.white-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem auto;
  padding: 0.6rem 0.9rem;
  background: white;
  border: 2px solid #E8E0D4;
  border-radius: 12px;
  max-width: 320px;
  cursor: pointer;
  font-size: 0.95rem;
  text-align: left;
}
.white-toggle input { width: 18px; height: 18px; accent-color: var(--card-purple); }
.white-info { font-size: 0.8rem; color: var(--text-light); margin: -0.4rem 0 0.4rem; }

/* ═══════════════════════ MODE SELECT ═══════════════════════ */
.mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.mode-buttons .btn { width: 100%; }

/* ═══════════════════════ JOIN SCREEN ═══════════════════════ */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.join-form .btn { width: 100%; }
.divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-light);
  font-size: 0.85rem;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E8E0D4;
}
.online-error {
  color: var(--wrong);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
}
.connection-status {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2rem;
}
.connection-status.disconnected {
  color: var(--wrong);
  font-weight: 700;
  animation: pulse 1.5s infinite;
}

/* ═══════════════════════ WAITING ROOM ═══════════════════════ */
.waiting-player-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  background: white;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  box-shadow: 0 3px 10px var(--shadow);
}
.waiting-player-list .player-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
}

/* ═══════════════════════ ROOM CODE (big, prominent for mobile) ═══════════════════════ */
.room-code-big {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-align: center;
  background: white;
  border-radius: 14px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 3px 10px var(--shadow);
  color: var(--card-purple);
}

/* ═══════════════════════ MOBILE ENHANCEMENTS ═══════════════════════ */
input[type="text"] { font-size: 16px; } /* prevents iOS zoom on focus */
.btn, .vote-btn { touch-action: manipulation; } /* no double-tap zoom */
.vote-btn { min-height: 48px; }

#room-code-input {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 400px) {
  h1 { font-size: 1.8rem; }
  .secret-word-box .word { font-size: 1.6rem; }
  .room-code-big { font-size: 2rem; }
  #room-code-input { font-size: 1.4rem; }
}