/* ===== RESET & ROOT ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple: #a78bfa;
  --purple-dark: #7c3aed;
  --gold: #f59e0b;
  --green: #10b981;
  --green-light: #34d399;
  --pink: #ec4899;
  --red: #ef4444;
}

body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }

.screen { display: none; }

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

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-12px); }
}

@keyframes scaleReveal {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== CONNECTION BADGE ===== */
.ws-badge {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 200;
  pointer-events: none;
}
.ws-badge.connected    { background: rgba(16,185,129,0.2); color: var(--green-light); border: 1px solid rgba(16,185,129,0.35); }
.ws-badge.disconnected { background: rgba(239,68,68,0.2);  color: #fca5a5;            border: 1px solid rgba(239,68,68,0.35); }

/* ===========================
   PLAYER VIEW  (index.html)
   =========================== */
body.player-view {
  min-height: 100dvh;
  background: #f1f5f9;
  color: #1e293b;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
}

.player-view #app {
  width: 100%;
  max-width: 420px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.player-view .screen.active {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fadeSlideIn 0.3s ease both;
}

/* Card */
.card {
  background: white;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  color: #475569;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
  resize: none;
  color: #1e293b;
  background: #f8fafc;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--purple-dark); background: white; }

.btn-submit {
  display: block;
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color: white;
  margin-top: 0.5rem;
}
.btn-submit:active { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.error-msg { color: var(--red); font-size: 0.875rem; margin-top: 0.6rem; min-height: 1.2rem; }

/* Waiting */
.waiting-card { text-align: center; }
.waiting-card h2 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.waiting-card .my-name { color: var(--purple); font-weight: 700; margin-bottom: 0.25rem; }
.waiting-card .sub { color: #64748b; margin-bottom: 1rem; }

/* Bouncing dots */
.dots { display: flex; gap: 7px; justify-content: center; }
.dots span {
  width: 10px; height: 10px;
  background: var(--purple);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

/* Player fact block */
.player-fact-block {
  background: rgba(124,58,237,0.08);
  border-left: 4px solid var(--purple-dark);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #1e293b;
}

/* Vote buttons */
.vote-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
  color: #1e293b;
}
.vote-btn:hover  { border-color: var(--purple); background: rgba(167,139,250,0.06); }
.vote-btn:active { transform: scale(0.98); }

/* Voted screen */
.voted-card { text-align: center; }
.voted-card .check { font-size: 3rem; margin-bottom: 0.5rem; }
.voted-card h2 { font-size: 1.5rem; color: var(--green); margin-bottom: 0.25rem; }
.voted-card .sub { color: #64748b; margin-bottom: 1rem; }

/* Revealed */
.revealed-card { text-align: center; }
.revealed-card .big-emoji { font-size: 2.5rem; }
.revealed-card .label { color: #64748b; font-size: 1rem; margin: 0.4rem 0; }
.revealed-card .winner { font-size: 1.8rem; font-weight: 800; color: var(--purple-dark); margin: 0.25rem 0; }
.revealed-card .fact  { color: #475569; font-style: italic; font-size: 0.95rem; line-height: 1.5; }
.revealed-card .next  { color: #94a3b8; font-size: 0.85rem; margin-top: 1.25rem; }

/* Game over (player) */
.gameover-card { text-align: center; }
.gameover-card h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.gameover-card p { color: #64748b; }

/* ===========================
   ADMIN VIEW  (admin.html)
   =========================== */
body.admin-view {
  min-height: 100vh;
  background: #f1f5f9;
  color: #1e293b;
}

.admin-header {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color: white;
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-header h1 { font-size: 1.2rem; font-weight: 800; }
.phase-pill {
  background: rgba(255,255,255,0.2);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.admin-main { padding: 1.25rem; max-width: 820px; margin: 0 auto; }

.panel {
  background: white;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.panel-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.admin-btn {
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.1s;
}
.admin-btn:active   { transform: scale(0.97); }
.admin-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-purple  { background: var(--purple-dark); color: white; }
.btn-green   { background: var(--green); color: white; }
.btn-gold    { background: var(--gold); color: white; }
.btn-red     { background: var(--red); color: white; }
.btn-gray    { background: #e2e8f0; color: #475569; }

.controls-row { display: flex; gap: 0.65rem; flex-wrap: wrap; }

/* Slider */
.slider-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.slider-row label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.slider-row input[type=range] { flex: 1; accent-color: var(--purple-dark); }
.slider-val { font-weight: 800; color: var(--purple-dark); min-width: 3.5rem; font-size: 0.95rem; }

/* Player list */
.player-list { list-style: none; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.95rem;
}
.player-list li:last-child { border-bottom: none; }
.player-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Info row */
.info-row { display: flex; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.info-item .info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; font-weight: 700; }
.info-item .info-val   { font-size: 1.75rem; font-weight: 900; color: #1e293b; line-height: 1.1; }
.info-item .timer-val  { color: var(--gold); }

/* Fact block (admin) */
.admin-fact {
  background: #f8fafc;
  border-left: 4px solid var(--purple-dark);
  padding: 0.9rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.975rem;
  line-height: 1.55;
}

/* Vote bars (admin) */
.vote-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.vote-row { display: flex; align-items: center; gap: 0.75rem; }
.vote-row .vote-name { width: 160px; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-row .bar-wrap  { flex: 1; background: #e2e8f0; border-radius: 999px; height: 20px; overflow: hidden; }
.vote-row .bar       { height: 100%; border-radius: 999px; background: #cbd5e1; transition: width 0.65s ease-out; }
.vote-row .bar.correct { background: var(--green); }
.vote-row .vote-cnt  { font-size: 0.875rem; font-weight: 800; color: #64748b; min-width: 1.5rem; }

/* ===========================
   DISPLAY VIEW  (display.html)
   =========================== */
body.display-view {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
  color: white;
  display: flex;
  flex-direction: column;
}

.display-view #app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.display-view .screen.active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: fadeSlideIn 0.5s ease both;
}

/* --- Lobby --- */
#lobby-screen {
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 2rem;
  text-align: center;
}

.game-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.game-subtitle { font-size: clamp(1rem, 2vw, 1.4rem); color: rgba(255,255,255,0.5); margin-top: 0.35rem; }

.lobby-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
@media (min-aspect-ratio: 4/3) {
  .lobby-content { flex-direction: row; justify-content: center; align-items: center; }
}

.qr-box {
  background: white;
  padding: 14px;
  border-radius: 16px;
  display: inline-block;
  line-height: 0;
}
.qr-url { color: rgba(255,255,255,0.45); font-size: 0.875rem; margin-top: 0.5rem; }

.count-badge {
  background: rgba(167,139,250,0.12);
  border: 2px solid rgba(167,139,250,0.35);
  border-radius: 20px;
  padding: 1.5rem 2.5rem;
  text-align: center;
}
.count-badge .num   { font-size: clamp(3rem,7vw,5rem); font-weight: 900; color: var(--purple); line-height: 1; }
.count-badge .label { font-size: 1rem; color: rgba(255,255,255,0.5); margin-top: 0.25rem; }

/* --- Voting screen --- */
#voting-screen { padding: 1.5rem; align-items: center; }

.voting-inner {
  width: 100%;
  max-width: 1300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  min-height: 0;
}
@media (min-aspect-ratio: 4/3) {
  .voting-inner { flex-direction: row; align-items: stretch; }
  .voting-left  { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .voting-right { width: 260px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
}
@media (min-width: 1200px) {
  .voting-right { width: 300px; }
}

.round-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}

.fact-card {
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 0 50px rgba(167,139,250,0.12);
}

.fact-question { font-size: clamp(0.875rem, 1.5vw, 1.1rem); color: rgba(255,255,255,0.5); margin-bottom: 0.75rem; }
.fact-text-big { font-size: clamp(1.2rem, 3.5vw, 2.25rem); font-weight: 600; line-height: 1.45; color: white; }
.vote-count    { font-size: clamp(0.875rem, 1.5vw, 1.1rem); color: rgba(255,255,255,0.55); margin-top: 1rem; }
.vote-count strong { color: var(--purple); font-weight: 800; }

/* Circular timer */
.timer-wrap {
  position: relative;
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-svg,
.timer-spin-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.timer-svg { transform: rotate(-90deg); }

.t-bg   { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 6; }
.t-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke 0.4s;
}
.t-ring.urgent { stroke: var(--red); }

.timer-spin-svg { animation: spin 5s linear infinite; }
.timer-spin-svg.urgent { animation-duration: 1s; }
.t-spin-arc {
  fill: none;
  stroke: rgba(245,158,11,0.3);
  stroke-width: 2.5;
  stroke-dasharray: 35 248;
  stroke-linecap: round;
}
.t-spin-arc.urgent { stroke: rgba(239,68,68,0.3); }

.timer-num {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 900;
  color: white;
  font-variant-numeric: tabular-nums;
}

/* --- Revealed screen --- */
#revealed-screen {
  padding: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.revealed-inner {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.answer-reveal { text-align: center; }
.answer-reveal .it-was { font-size: clamp(0.875rem, 1.5vw, 1.1rem); color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; }
.winner-name {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--green-light);
  text-shadow: 0 0 40px rgba(52,211,153,0.45);
  animation: scaleReveal 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
  line-height: 1.1;
}

.revealed-fact-text {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 2rem);
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.65);
  font-style: italic;
  text-align: center;
  width: 100%;
  line-height: 1.5;
}

/* Vote bars (display) */
.d-vote-bars { width: 100%; display: flex; flex-direction: column; gap: 0.65rem; }
.d-vote-row  { display: flex; align-items: center; gap: 0.9rem; }
.d-vote-name {
  width: clamp(120px, 18vw, 210px);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-bar-wrap {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  height: clamp(24px, 4vw, 36px);
  overflow: hidden;
}
.d-bar {
  height: 100%;
  border-radius: 999px;
  background: rgba(167,139,250,0.55);
  transition: width 0.8s ease-out;
  min-width: 0;
}
.d-bar.correct {
  background: linear-gradient(90deg, var(--green), var(--green-light));
  box-shadow: 0 0 20px rgba(16,185,129,0.5);
}
.d-vote-cnt {
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  min-width: 2rem;
}

/* --- Game over --- */
#gameover-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 1rem;
}
.go-title {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.go-stats { font-size: clamp(1rem, 2.5vw, 1.75rem); color: rgba(255,255,255,0.55); }