/* Just One — наследует базовые стили от ../spyfall/style.css (sf-*).
 * Здесь только специфичные jo-* */

.jo-progress-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.jo-progress-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.jo-progress-label strong {
  color: var(--purple);
  font-size: 16px;
}

.jo-guesser-info {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  padding: 12px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.jo-guesser-info strong { color: var(--purple); font-weight: 700; }

/* Word card (loud, gradient) */
.jo-word-card {
  background: linear-gradient(135deg, oklch(95% 0.05 291), oklch(90% 0.10 291));
  border: 2.5px solid var(--purple);
  border-radius: 20px;
  padding: 28px 32px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 16px 48px oklch(65% 0.19 291 / 0.18);
  animation: sf-pop .4s cubic-bezier(.22,.8,.36,1);
}
html[data-theme="dark"] .jo-word-card {
  background: linear-gradient(135deg, oklch(28% 0.10 291), oklch(22% 0.05 291));
  color: white;
}
.jo-word-label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.jo-word-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--purple);
}
html[data-theme="dark"] .jo-word-value { color: white; }

/* Hint form */
.jo-hint-form {
  text-align: center;
}
.jo-hint-form input,
.jo-guessing input {
  font-family: var(--font-sans);
  font-size: 18px;
  width: 100%;
  max-width: 400px;
  padding: 14px 18px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  margin-bottom: 14px;
  transition: border-color .15s;
}
.jo-hint-form input:focus,
.jo-guessing input:focus { border-color: var(--purple); }

.jo-err {
  color: oklch(55% 0.22 25);
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}
.jo-my-hint {
  margin-top: 18px;
  padding: 12px 16px;
  background: oklch(96% 0.04 145);
  color: oklch(35% 0.10 145);
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
html[data-theme="dark"] .jo-my-hint {
  background: oklch(20% 0.08 145);
  color: oklch(85% 0.10 145);
}
.jo-my-hint strong { color: inherit; }

.jo-hint-progress {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Waiting hints (guesser screen) */
.jo-waiting-hints {
  text-align: center;
  padding: 40px 20px;
}
.jo-waiting-hints h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 16px;
  text-transform: lowercase;
}

/* Guessing — hints grid */
.jo-guessing { text-align: center; }
.jo-guessing h2 {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: lowercase;
  margin-bottom: 20px;
}
.jo-hints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.jo-hint {
  padding: 14px 12px;
  background: var(--surface);
  border: 1.5px solid var(--purple-light);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.jo-hint.cancelled {
  text-decoration: line-through;
  opacity: 0.4;
  border-color: oklch(55% 0.22 25);
  background: var(--bg);
}

.jo-guess-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hinter view during guessing */
.jo-hints-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.jo-hint-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.jo-hint-author.cancelled {
  text-decoration: line-through;
  opacity: 0.5;
}
.jo-hint-author .jo-hint-author-name {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Reveal */
.jo-result-banner {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 18px;
  text-transform: lowercase;
}
.jo-result-banner.correct {
  background: linear-gradient(135deg, oklch(85% 0.10 145), oklch(75% 0.15 145));
  color: oklch(20% 0.05 145);
}
.jo-result-banner.wrong {
  background: linear-gradient(135deg, oklch(85% 0.10 25), oklch(75% 0.15 25));
  color: oklch(20% 0.05 25);
}
.jo-result-banner.pass {
  background: linear-gradient(135deg, oklch(90% 0.04 80), oklch(80% 0.10 80));
  color: oklch(25% 0.06 80);
}
.jo-result-banner.final {
  background: linear-gradient(135deg, oklch(80% 0.15 291), oklch(70% 0.20 291));
  color: white;
  font-size: 36px;
}
.jo-final-score {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
}
.jo-final-score strong {
  font-family: var(--font-mono);
  font-size: 28px;
  margin: 0 4px;
}

.jo-reveal-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.jo-reveal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
}
.jo-reveal-row strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.jo-hints-review {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.jo-reveal-controls {
  text-align: center;
  margin-top: 20px;
}

/* History */
.jo-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 24px;
}
.jo-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.jo-history-row.correct { border-left: 4px solid oklch(55% 0.18 145); }
.jo-history-row.wrong { border-left: 4px solid oklch(55% 0.22 25); }
.jo-history-row.pass { border-left: 4px solid oklch(60% 0.16 80); }
.jo-history-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 480px) {
  .jo-word-value { font-size: 28px; }
  .jo-hint { font-size: 14px; padding: 12px 8px; }
  .jo-result-banner { font-size: 22px; padding: 18px; }
  .jo-result-banner.final { font-size: 26px; }
}