/* ============================================================
 * player.css — sidspecifika justeringar för spelarens vy.
 * Den delade designsystemet (.app, .card, .btn, .option, .leader,
 * CSS-variabler m.m.) bor i /theme.css och dupliceras INTE här.
 * ============================================================ */

/* ---------- Skärmväxling (visa/dölj sektioner) ---------- */
.screen { display: none; }
.screen.is-active { display: block; }

/* Mobil-först: ge appen en lugn maxbredd och luft. */
.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 18px calc(32px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* ---------- Varumärke / logga ---------- */
.brand {
  text-align: center;
  margin: 8px 0 26px;
}
.brand--small {
  margin: 8px 0 16px;
}
.brand .tiles {
  justify-content: center;
}
.brand__tagline {
  margin: 14px 0 0;
  font-size: 0.95rem;
}

/* ---------- Startkort ---------- */
.start-card {
  padding: 22px;
}
.field-label {
  display: block;
  margin: 2px 2px 6px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.input--upper {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.inline-error {
  margin: 4px 2px 0;
  color: #fff;
  background: rgba(220, 38, 38, 0.85);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- Återuppta-prompt ---------- */
.resume-emoji {
  font-size: 3rem;
  line-height: 1;
}

/* ---------- Felskärm ---------- */
.error-emoji {
  font-size: 3.2rem;
  line-height: 1;
}

/* ---------- Frågevy ---------- */
.quiz-head {
  margin-bottom: 18px;
}
.quiz-head__row {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* Framstegsetiketten behåller sin storlek; namntaggen får krympa. */
.quiz-head__row #progress-label {
  flex: 0 0 auto;
}

/* ---------- Namntagg (tidigare en fast cirkel) ----------
 * En pill som växer med namnet men kapas snyggt med ellips
 * om någon skriver in ett riktigt långt namn. */
.player-tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  display: inline-block;
  padding: 7px 14px;
  background: var(--accent-grad);
  color: var(--text);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 16px rgba(20, 16, 80, 0.22);
  user-select: none;
}

.question-card {
  padding: 22px;
}
.question-text {
  margin: 0 0 20px;
  /* Upprätt – inte kursiv som .display-rubrikerna. */
  font-style: normal;
  /* Tydligt mindre än .display – frågan ska vara läsbar, inte dunka. */
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  letter-spacing: 0.2px;
  line-height: 1.3;
  /* En enda mjuk skugga – stilen kvar, men "hardcore"-kanten borta. */
  text-shadow: 0 2px 6px rgba(20, 16, 80, 0.18);
  /* Bryt även långa ord/URL:er istället för att flöda över kortet. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.options-list {
  gap: 12px;
}

/* Låt alternativknappen växa i höjd när texten radbryts; håll
 * nyckel-bollen uppe vid första raden istället för mitten. */
.option {
  align-items: flex-start;
}
.option__key {
  margin-top: 1px;
}

/* Kort tryck-feedback när man väljer ett alternativ. */
.option__label {
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.option--press {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}

/* ---------- Resultat ---------- */
.results-shell {
  gap: 18px;
}
.section-heading {
  margin: 8px 2px 2px;
  font-size: 1.15rem;
}

.score-card {
  padding: 26px 22px;
}
.score-eyebrow {
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.95;
}
.score-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 6px auto 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 4px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.score-badge__num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.score-badge__den {
  font-size: 1rem;
  opacity: 0.85;
  margin-top: 2px;
}
.score-line {
  margin: 6px 0 14px;
  font-size: clamp(1.4rem, 7vw, 2rem);
}

/* ---------- Genomgång (per fråga) ---------- */
.review-list {
  gap: 10px;
}
.review-row {
  padding: 14px 16px;
  border-left: 6px solid transparent;
}
.review-row--correct {
  border-left-color: #06d6a0;
}
.review-row--wrong {
  border-left-color: #ff5a5f;
}
.review-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.review-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.9rem;
  color: #fff;
}
.review-row--correct .review-mark {
  background: #12c98a;
}
.review-row--wrong .review-mark {
  background: #ff5a5f;
}
.review-row--correct .review-verdict {
  color: #6cf2c4;
}
.review-row--wrong .review-verdict {
  color: #ff9b9e;
}
.review-verdict {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}
.review-question {
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.3;
}
.review-answer {
  margin: 2px 0;
  font-size: 0.95rem;
}
.review-answer__label {
  font-weight: 600;
}
.review-answer--correct {
  font-weight: 700;
  color: #7af5c8;
}

/* ---------- Topplista ---------- */
.leaderboard-status {
  text-align: center;
  margin: 4px 0;
}
.leader-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.leader-me-tag {
  font-weight: 500;
}
.playing-list {
  margin-top: 6px;
}
.leader-row--playing {
  opacity: 0.95;
}
.live-dot {
  color: #06d6a0;
  font-size: 0.7rem;
  animation: pulse-live 1.4s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.play-again {
  margin-top: 14px;
}

/* ---------- Konfetti-canvas ---------- */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
#confetti-canvas.is-active {
  display: block;
}

/* ---------- Tillgänglighet: minska rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
  .option--press,
  .live-dot {
    animation: none !important;
    transition: none !important;
  }
}