/* ── Live Game: Player UI ─────────────────────────────────── */

:root {
  --kahoot-red:   #e21b3c;
  --kahoot-blue:  #1368ce;
  --kahoot-gold:  #d89e00;
  --kahoot-green: #26890c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.player-root { font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; flex-direction: column; background: #1a1a2e; color: #fff; }

/* ── Join Screen ── */
.player-join { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.player-join-logo { font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; }
.player-join-logo span { color: #6c5ce7; }
.player-join-card { background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; width: 100%; max-width: 360px; text-align: center; }
.player-join-brand { font-size: 2rem; font-weight: 800; color: #6c5ce7; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.player-join-tagline { font-size: 0.8rem; color: #9ca3af; margin-bottom: 1.5rem; font-style: italic; }
.player-input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 1rem; text-align: center; margin-bottom: 0.75rem; font-family: 'Poppins', sans-serif; color: #1a1a2e; }
.player-input:focus { outline: none; border-color: #6c5ce7; }
.player-input-pin { font-size: 1.5rem; letter-spacing: 0.2em; font-weight: 600; }
.player-btn { width: 100%; padding: 0.75rem; border: none; border-radius: 0.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all 0.15s; }
.player-btn-primary { background: #6c5ce7; color: #fff; }
.player-btn-primary:hover { background: #5a4bd1; }
.player-btn-primary:disabled { opacity: 0.5; cursor: default; }
.player-btn-secondary { background: rgba(26,26,46,0.08); color: #1a1a2e; border: 1px solid rgba(26,26,46,0.16); }
.player-btn-secondary:hover { background: rgba(26,26,46,0.12); }
.player-btn:focus-visible,
.player-answer-btn:focus-visible,
.player-modal-close:focus-visible,
.player-modal-password-toggle:focus-visible,
.player-modal-links a:focus-visible {
  outline: 3px solid rgba(108, 92, 231, 0.35);
  outline-offset: 2px;
}
/* old .player-error replaced with structured error box */
.player-error-box { display: flex; align-items: flex-start; gap: 0.55rem; background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.28); border-radius: 0.5rem; padding: 0.65rem 0.85rem; text-align: left; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.player-error-icon { color: #e74c3c; font-size: 1.2rem !important; flex-shrink: 0; margin-top: 0.05rem; }
.player-error-box > div { font-size: 0.82rem; color: #e74c3c; line-height: 1.4; }
.player-error-hint { color: #c08080 !important; font-size: 0.77rem !important; margin-top: 0.2rem; }
.player-login-hint { color: #6b7280; font-size: 0.8rem; margin-top: 0.75rem; }
.player-login-hint a { color: #6c5ce7; }

/* ── Screens ── */
.player-screen { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.player-screen.active { display: flex; }

/* ── Waiting ── */
.player-waiting-icon { font-size: 3rem; margin-bottom: 1rem; animation: pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.player-waiting-text { font-size: 1.1rem; color: #a0a0c0; }
.player-nickname { font-size: 1.25rem; font-weight: 600; color: #6c5ce7; margin-bottom: 0.5rem; }

/* ── Question ── */
.player-q-timer { font-size: 2rem; font-weight: 700; background: #6c5ce7; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.player-q-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; max-width: 500px; line-height: 1.4; }
.player-q-counter { font-size: 0.8rem; color: #a0a0c0; margin-bottom: 0.5rem; }
.player-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; max-width: 400px; }
@media (max-width: 400px) { .player-answers { grid-template-columns: 1fr; } }
.player-answer-btn { padding: 1.25rem 0.5rem; border: none; border-radius: 0.75rem; color: #fff; font-size: 1.5rem; font-weight: 600; cursor: pointer; min-height: 80px; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, opacity 0.15s; font-family: 'Poppins', sans-serif; }
.player-answer-btn:active { transform: scale(0.95); }
.player-answer-btn:nth-child(1) { background: #e21b3c; }
.player-answer-btn:nth-child(2) { background: #1368ce; }
.player-answer-btn:nth-child(3) { background: #d89e00; }
.player-answer-btn:nth-child(4) { background: #26890c; }
.player-answer-btn.disabled { opacity: 0.45; cursor: default; pointer-events: none; transform: none; }
.player-answer-btn .answer-shape { font-size: 2rem; }

/* ── Submitted ── */
.player-submitted-icon { font-size: 3rem; margin-bottom: 1rem; color: #6c5ce7; }
.player-submitted-text { font-size: 1rem; color: #a0a0c0; }

/* ── Result ── */
.player-result-icon { font-size: 4rem; margin-bottom: 0.75rem; }
.player-result.correct .player-result-icon { color: #2ecc71; }
.player-result.wrong   .player-result-icon { color: #e74c3c; }
.player-result-points { font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; }
.player-result-label { font-size: 0.9rem; color: #a0a0c0; margin-bottom: 0.5rem; }
.player-result-rank { font-size: 1rem; color: #6c5ce7; font-weight: 500; }

/* ── Final ── */
.player-final-rank { font-size: 3rem; font-weight: 700; color: #6c5ce7; margin-bottom: 0.25rem; }
.player-final-score { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.player-final-label { font-size: 0.9rem; color: #a0a0c0; }
.player-podium-badge { background: #ffd700; color: #1a1a2e; padding: 0.5rem 1.5rem; border-radius: 2rem; font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }

/* ── Spinner ── */
.player-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #6c5ce7; border-radius: 50%; animation: pSpin 0.6s linear infinite; margin: 1rem auto; }
@keyframes pSpin { to { transform: rotate(360deg); } }

/* ── Disconnected ── */
.player-disconnected { color: #e74c3c; font-size: 0.9rem; padding: 0.5rem 1rem; background: rgba(231,76,60,0.15); border-radius: 0.5rem; margin-top: 1rem; }

/* ── Missing classes — synced to actual HTML/JS ── */

/* Join fields */
.player-join-fields { display: flex; flex-direction: column; gap: 0.65rem; }
.player-join-actions { display: flex; flex-direction: column; gap: 0.65rem; }

/* Waiting screen */
.player-waiting { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.player-waiting h2 { font-size: 1.1rem; color: #c5c5e0; font-weight: 500; }
.player-waiting-name { font-size: 1.2rem; font-weight: 700; color: #6c5ce7; }

/* Question screen */
.player-question-header { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 600px; margin-bottom: 0.75rem; font-size: 0.85rem; color: #a0a0c0; }
.player-timer { font-size: 1.2rem; font-weight: 700; background: #6c5ce7; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.player-question-title { font-size: 1.2rem; font-weight: 600; max-width: 600px; line-height: 1.5; margin-bottom: 1.25rem; }
.player-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; max-width: 520px; }
@media (max-width: 420px) { .player-answer-grid { grid-template-columns: 1fr; } }
.player-answer-grid--text { grid-template-columns: 1fr; max-width: 520px; }
.player-answer-btn { gap: 0.5rem; }
.player-answer-btn.selected { outline: 4px solid #fff; outline-offset: 2px; }
.answer-text { font-size: 0.95rem; }
.player-text-answer-card { display: grid; gap: 0.75rem; width: 100%; padding: 1rem; border-radius: 1rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.22); }
.player-text-answer-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #d4d5f2; text-align: left; }
.player-text-answer-input { width: 100%; padding: 0.9rem 1rem; border-radius: 0.8rem; border: 1px solid rgba(255,255,255,0.22); background: rgba(13, 13, 32, 0.9); color: #fff; font-size: 1rem; font-family: 'Poppins', sans-serif; }
.player-text-answer-input:focus-visible { outline: 2px solid rgba(108,92,231,0.85); outline-offset: 2px; }
.player-text-answer-input::placeholder { color: rgba(255,255,255,0.55); }
.player-text-answer-submit { max-width: none; }

/* Submitted screen */
.player-submitted { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.player-submitted-hint { font-size: 0.9rem; color: #a0a0c0; }

/* Result screen */
.player-result { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.player-result h2 { font-size: 1.75rem; font-weight: 700; }
.player-result.correct h2 { color: #2ecc71; }
.player-result.wrong   h2 { color: #e74c3c; }
.player-result.neutral h2 { color: #f59e0b; }
.player-result-score { font-size: 2rem; font-weight: 700; color: #ffd700; }
.player-result-streak { font-size: 1rem; color: #f59e0b; font-weight: 600; min-height: 1.4em; }
.player-result-rank { min-height: 1.4em; }

/* Final screen */
.player-final { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.player-final-icon { font-size: 3.5rem; }
.player-final h1 { font-size: 2.5rem; font-weight: 800; color: #ffd700; }
.player-final p { font-size: 1.25rem; color: #c5c5e0; }
.player-final .player-btn { max-width: 220px; background: #6c5ce7; color: #fff; }

/* Kicked screen */
.player-kicked { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.player-kicked h2 { font-size: 1.2rem; color: #c5c5e0; }
.player-kicked .player-btn { max-width: 200px; background: #6c5ce7; color: #fff; }

/* Cancelled / ended screen */
.player-cancelled { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.player-cancelled-icon { font-size: 3rem !important; color: #f59e0b; }
.player-cancelled h2 { font-size: 1.4rem; font-weight: 700; }
.player-cancelled-sub { color: #a0a0c0; font-size: 0.9rem; max-width: 320px; line-height: 1.5; text-align: center; }

/* Disconnect banner */
#playerDisconnectBanner { display: none; position: fixed; top: 0; left: 0; right: 0; padding: 0.6rem 1rem; background: #c0392b; font-size: 0.88rem; font-weight: 500; z-index: 999; letter-spacing: 0.01em; align-items: center; justify-content: center; gap: 0.4rem; }
#playerPausedBanner { display: none; position: fixed; top: 2.75rem; left: 0.75rem; right: 0.75rem; padding: 0.65rem 0.9rem; background: rgba(245, 158, 11, 0.95); color: #1f1300; font-size: 0.86rem; font-weight: 600; z-index: 998; border-radius: 0.85rem; align-items: center; justify-content: center; gap: 0.45rem; box-shadow: 0 12px 30px rgba(0,0,0,0.22); }

/* Join error shake */
@keyframes playerErrorShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}
.player-error-shake { animation: playerErrorShake 0.45s ease; }

/* In-game toast notification */
.player-ingame-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); background: rgba(30,30,60,0.95); color: #fff; font-size: 0.88rem; font-weight: 500; padding: 0.6rem 1.25rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.12); z-index: 1000; white-space: nowrap; transition: transform 0.28s ease, opacity 0.28s ease; opacity: 0; pointer-events: none; }
.player-ingame-toast--visible { transform: translateX(-50%) translateY(0); opacity: 1; }

body.player-modal-open { overflow: hidden; }
.player-modal-overlay[hidden] { display: none !important; }
.player-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(8, 10, 25, 0.76); backdrop-filter: blur(10px); z-index: 1200; }
.player-modal { position: relative; width: min(100%, 420px); background: #fff; color: #1a1a2e; border-radius: 1.1rem; padding: 1.4rem; box-shadow: 0 32px 80px rgba(0,0,0,0.38); }
.player-modal-head { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.player-modal-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6c5ce7; }
.player-modal-copy { color: #5b6078; font-size: 0.92rem; line-height: 1.55; }
.player-modal-close { position: absolute; top: 0.8rem; right: 0.8rem; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border: none; border-radius: 999px; background: rgba(26,26,46,0.08); color: #1a1a2e; cursor: pointer; }
.player-modal-form { display: grid; gap: 0.85rem; }
.player-modal-field { display: grid; gap: 0.35rem; text-align: left; }
.player-modal-field > span { font-size: 0.82rem; font-weight: 700; color: #3d4159; }
.player-modal-input-wrap { position: relative; }
.player-modal-input { width: 100%; padding: 0.85rem 0.95rem; border-radius: 0.8rem; border: 1px solid rgba(26,26,46,0.14); font-size: 0.96rem; font-family: 'Poppins', sans-serif; color: #1a1a2e; background: #fff; }
.player-modal-input-wrap .player-modal-input { padding-right: 3rem; }
.player-modal-input:focus-visible { outline: 2px solid rgba(108,92,231,0.3); border-color: rgba(108,92,231,0.5); }
.player-modal-password-toggle { position: absolute; top: 50%; right: 0.55rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: #5b6078; cursor: pointer; }
.player-modal-message { min-height: 1.2rem; color: #c0392b; font-size: 0.85rem; line-height: 1.4; }
.player-modal-submit { margin-top: 0.15rem; }
.player-modal-submit:disabled { opacity: 0.6; cursor: default; }
.player-modal-links { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.84rem; }
.player-modal-links a { color: #6c5ce7; text-decoration: none; }
.player-modal-links a:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .player-join-actions { flex-direction: row; }
  .player-join-actions .player-btn { flex: 1 1 0; }
}

@media (max-width: 640px) {
  .player-modal { padding: 1.15rem; }
  .player-modal-links { flex-direction: column; align-items: flex-start; }
}