*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1c1208; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas { display: block; touch-action: none; position: relative; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }

#landing {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #4a3320 0%, #1c1208 80%);
  flex-direction: column;
}
#landing.hidden { display: none; }

.logo {
  font-family: 'Georgia', serif;
  font-size: 64px;
  font-weight: bold;
  color: #fbbf24;
  letter-spacing: 6px;
  text-shadow: 0 0 40px rgba(251,191,36,0.3);
  margin-bottom: 12px;
  user-select: none;
}
.subtitle {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #888;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 50px;
  user-select: none;
}
.start-btn {
  padding: 16px 48px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  box-shadow: 0 4px 20px rgba(37,99,235,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.start-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(37,99,235,0.5);
}
.start-btn:active { transform: scale(0.97); }

/* ---------- Player Count Popup (Step 1) ---------- */
#player-count-popup {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
#player-count-popup.visible { display: flex; }

.player-count-options {
  display: flex; gap: 16px; justify-content: center;
  margin-bottom: 32px;
}
.player-count-card {
  width: 100px; height: 120px;
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  user-select: none;
}
.player-count-card:hover {
  border-color: #6b7280;
  transform: scale(1.04);
}
.player-count-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 20px rgba(37,99,235,0.3);
}
.player-count-card .count {
  font-family: 'Georgia', serif;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.player-count-card .label {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #9ca3af;
}
.player-count-card.selected .count { color: #fbbf24; }

.popup-btn-row {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}

/* ---------- Room Popup (Step 2) ---------- */
#room-popup {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
#room-popup.visible { display: flex; }

.popup-box {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.popup-box h2 {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 24px;
  margin-bottom: 24px;
}
.room-id-box {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 24px;
}
.room-id-box span {
  font-family: Arial, sans-serif;
  color: #999;
  font-size: 14px;
}
.room-id-value {
  font-family: 'Courier New', monospace;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  background: #1f2937;
  padding: 8px 20px;
  border-radius: 10px;
  letter-spacing: 6px;
}
#qrcode {
  margin-bottom: 20px;
}
#qrcode img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.share-text {
  font-family: Arial, sans-serif;
  color: #999;
  font-size: 13px;
  margin-bottom: 6px;
}
.waiting-text {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: bold;
}
.url-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.url-text {
  font-family: Arial, sans-serif;
  color: #6b7280;
  font-size: 11px;
  word-break: break-all;
  padding: 0 10px;
  user-select: text;
  -webkit-user-select: text;
}
.copy-btn {
  padding: 8px 16px;
  background: #374151;
  color: #fff;
  border: 1px solid #4b5563;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: background 0.15s;
}
.copy-btn:hover {
  background: #4b5563;
}
.copy-btn.success {
  background: #059669;
  border-color: #10b981;
}
.play-solo-btn {
  padding: 14px 40px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.play-solo-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(37,99,235,0.4);
}
.play-solo-btn:active { transform: scale(0.97); }
.play-solo-btn.secondary {
  background: #374151;
  box-shadow: none;
}
.play-solo-btn.secondary:hover {
  background: #4b5563;
  box-shadow: none;
}

.btn-row {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.join-btn {
  background: none;
  border: 1px solid #4b5563;
  color: #9ca3af;
  padding: 10px 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.join-btn:hover {
  border-color: #6b7280;
  color: #d1d5db;
}

#join-popup {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
#join-popup.visible { display: flex; }

.code-input {
  width: 100%;
  padding: 14px 16px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 10px;
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 8px;
  text-transform: uppercase;
  outline: none;
  margin-bottom: 24px;
}
.code-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.popup-actions {
  display: flex; gap: 12px; justify-content: center;
}
.cancel-btn {
  padding: 14px 32px;
  background: #374151;
  color: #9ca3af;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.cancel-btn:hover { background: #4b5563; color: #fff; }

#profile-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(31,41,55,0.8);
  border: 1px solid #374151;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #d1d5db;
  transition: background 0.15s, border-color 0.15s;
}
#profile-btn:hover {
  background: #374151;
  border-color: #4b5563;
}
#profile-btn .avatar {
  font-size: 20px;
  line-height: 1;
}
#profile-btn .pname {
  font-family: Arial, sans-serif;
  font-weight: bold;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profile-popup {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
#profile-popup.visible { display: flex; }

.profile-avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.profile-avatar-big {
  font-size: 64px;
  line-height: 1;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  border-radius: 50%;
  border: 2px solid #374151;
}
.random-avatar-btn {
  padding: 10px 16px;
  background: #374151;
  color: #d1d5db;
  border: 1px solid #4b5563;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: background 0.15s, border-color 0.15s;
}
.random-avatar-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
}

.profile-name-input {
  width: 100%;
  padding: 12px 14px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 10px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  outline: none;
  margin-bottom: 24px;
}
.profile-name-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

#error-popup {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
#error-popup.visible { display: flex; }

#debug-btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 20001;
  padding: 8px 14px;
  background: rgba(255,107,107,0.3);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,107,107,0.2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
}
#debug-btn:hover {
  background: rgba(255,107,107,0.6);
  color: white;
}
#debug-finish-btn {
  position: fixed;
  bottom: 10px;
  right: 90px;
  z-index: 20001;
  padding: 8px 14px;
  background: rgba(251,191,36,0.3);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
}
#debug-finish-btn:hover {
  background: rgba(251,191,36,0.6);
  color: white;
}

/* ---------- Round Result Overlay ---------- */
#round-result-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8);
}
#round-result-overlay.visible { display: flex; }

.round-result-box {
  background: #111827;
  border: 2px solid #fbbf24;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.round-result-box h2 {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 22px;
  margin-bottom: 16px;
}
.round-result-winner {
  font-family: Arial, sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}
.round-result-deduction {
  font-family: Arial, sans-serif;
  color: #ef4444;
  font-size: 15px;
  margin-bottom: 20px;
}
.round-result-deduction.joker {
  color: #fbbf24;
}
.scores-table {
  width: 100%;
  margin-bottom: 24px;
}
.scores-table .score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #374151;
}
.scores-table .score-row:last-child {
  border-bottom: none;
}
.scores-table .player-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  color: #d1d5db;
  font-size: 14px;
}
.scores-table .player-score {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
}
.scores-table .player-score.positive { color: #22c55e; }
.scores-table .player-score.zero { color: #ef4444; }

/* ---------- Vote Overlay ---------- */
#vote-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8);
}
#vote-overlay.visible { display: flex; }

.vote-box {
  background: #111827;
  border: 2px solid #374151;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.vote-box h2 {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 20px;
  margin-bottom: 20px;
}
.vote-status {
  font-family: Arial, sans-serif;
  color: #9ca3af;
  font-size: 14px;
  margin-bottom: 16px;
}
.vote-players {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.vote-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #1f2937;
  border-radius: 8px;
}
.vote-player-name {
  font-family: Arial, sans-serif;
  color: #d1d5db;
  font-size: 13px;
}
.vote-player-status {
  font-size: 16px;
}
.vote-player-status.voted-yes { color: #22c55e; }
.vote-player-status.voted-no { color: #ef4444; }
.vote-player-status.waiting { color: #6b7280; }
.vote-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.vote-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vote-btn.continue {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}
.vote-btn.continue:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(34,197,94,0.4);
}
.vote-btn.leave {
  background: #374151;
  color: #9ca3af;
}
.vote-btn.leave:hover {
  background: #4b5563;
  color: #fff;
}
.vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Leaderboard Overlay ---------- */
#leaderboard-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85);
}
#leaderboard-overlay.visible { display: flex; }

.leaderboard-box {
  background: #111827;
  border: 2px solid #fbbf24;
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.leaderboard-box h2 {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 26px;
  margin-bottom: 8px;
}
.leaderboard-reason {
  font-family: Arial, sans-serif;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 24px;
}
.leaderboard-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #1f2937;
  border-radius: 10px;
  gap: 12px;
}
.leaderboard-row.first {
  background: linear-gradient(135deg, #78350f, #92400e);
  border: 1px solid #fbbf24;
}
.leaderboard-row.second {
  background: #374151;
  border: 1px solid #9ca3af;
}
.leaderboard-row.third {
  background: #1f2937;
  border: 1px solid #78350f;
}
.leaderboard-rank {
  font-family: 'Georgia', serif;
  font-size: 20px;
  width: 32px;
  text-align: center;
}
.leaderboard-name {
  flex: 1;
  text-align: left;
  font-family: Arial, sans-serif;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.leaderboard-score {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  color: #fbbf24;
}
.leaderboard-back-btn {
  padding: 14px 40px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.leaderboard-back-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(37,99,235,0.4);
}

/* ---------- Game Over Overlay ---------- */
#gameover-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8);
}
#gameover-overlay.visible { display: flex; }

.gameover-box {
  background: #111827;
  border: 2px solid #fbbf24;
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.gameover-box h2 {
  font-family: Arial, sans-serif;
  color: #fbbf24;
  font-size: 28px;
  margin-bottom: 28px;
}
.gameover-btn {
  padding: 14px 40px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gameover-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(37,99,235,0.4);
}

/* ---------- Score Display ---------- */
#score-display {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20001;
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 8px 16px;
  display: none;
  gap: 16px;
  align-items: center;
}
#score-display.visible { display: flex; }
.score-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #d1d5db;
}
.score-item .score-emoji {
  font-size: 14px;
}
.score-item .score-value {
  font-weight: bold;
  font-family: 'Courier New', monospace;
}
.score-item .score-value.high { color: #22c55e; }
.score-item .score-value.medium { color: #fbbf24; }
.score-item .score-value.low { color: #ef4444; }