/* === Lineup Game Styles === */

/* Difficulty colors — MinuteThief palette (not NYT clones) */
:root {
  --lineup-yellow: #fdd87a;   /* amber-gold, echoes brand accent */
  --lineup-green: #7ec8a4;    /* teal-green, echoes brand primary */
  --lineup-blue: #89b4d4;     /* slate-blue */
  --lineup-purple: #d4829a;   /* rose-pink */
  --lineup-yellow-text: #5c3a00;
  --lineup-green-text: #0d3d28;
  --lineup-blue-text: #0f2d45;
  --lineup-purple-text: #4a0f22;
}


/* Title section */
.target-section {
  text-align: center;
  padding: 1.5rem 0 1rem;
}

.target-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Solved groups area */
.lineup-solved {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0 0.5rem;
  min-height: 0;
}

.solved-group {
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  text-align: center;
  animation: group-reveal 0.4s ease-out;
}

.solved-group-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.solved-group-words {
  font-size: 0.8rem;
  margin-top: 0.15rem;
  opacity: 0.85;
}

.solved-group.tier-1 { background: var(--lineup-yellow); color: var(--lineup-yellow-text); }
.solved-group.tier-2 { background: var(--lineup-green); color: var(--lineup-green-text); }
.solved-group.tier-3 { background: var(--lineup-blue); color: var(--lineup-blue-text); }
.solved-group.tier-4 { background: var(--lineup-purple); color: var(--lineup-purple-text); }

@keyframes group-reveal {
  0% { opacity: 0; transform: translateY(-8px) scaleY(0.8); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Mistakes display */
.lineup-mistakes {
  text-align: center;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.mistake-dots {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: 0.4rem;
}

.mistake-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: background 0.3s, opacity 0.3s;
}

.mistake-dot.used {
  background: var(--color-error);
  opacity: 0.4;
}

/* Word grid */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 0.5rem 0;
}

.lineup-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.4rem 0.25rem;
  font-size: clamp(0.7rem, 2.5vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  color: var(--color-text);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8);
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.lineup-tile:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.lineup-tile:active { transform: scale(0.96); }

.lineup-tile.selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 150, 12, 0.3);
}

.lineup-tile.solved { display: none; }

/* Shake animation for wrong guess */
.lineup-tile.shake {
  animation: tile-shake 0.4s ease-in-out;
}

@keyframes tile-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Bounce animation for correct tiles before they disappear */
.lineup-tile.correct {
  animation: tile-bounce 0.3s ease-out;
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

@keyframes tile-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Action buttons */
.lineup-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 0;
}

.lineup-actions .btn { flex: 1; max-width: 130px; }

.lineup-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Next puzzle countdown */
.lineup-countdown {
  text-align: center;
  padding: 0.75rem 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.lineup-countdown-time {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Victory overlay */
.lineup-victory {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lineup-victory.show { display: flex; }

.lineup-victory-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  width: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
}

.lineup-victory-stars {
  font-size: 2rem;
  margin: 0.5rem 0;
  min-height: 2.5rem;
}

.lineup-victory-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.lineup-victory.won .lineup-victory-title { color: var(--color-success); }

.lineup-victory-detail {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.lineup-victory-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lineup-victory-actions .btn { width: 100%; }

/* Stats modal — Lineup-specific: Avg Mistakes instead of Avg Steps */
.lineup-stat-extra {
  text-align: center;
  margin-bottom: 1rem;
}

.lineup-stat-extra .stat-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lineup-stat-extra .stat-value {
  font-size: 1.2rem;
  font-weight: 800;
  display: block;
}

/* Responsive */
@media (max-width: 380px) {
  .lineup-tile {
    min-height: 42px;
    font-size: clamp(0.65rem, 2.2vw, 0.85rem);
    padding: 0.3rem 0.2rem;
  }

  .lineup-actions .btn { max-width: 110px; font-size: 0.85rem; }
}

@media (min-width: 480px) {
  .lineup-tile {
    min-height: 54px;
  }
}

/* Help modal tier badges */
.help-tier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0;
}

.help-tier-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
}

.help-tier-amber { background: var(--lineup-yellow); color: var(--lineup-yellow-text); }
.help-tier-teal  { background: var(--lineup-green);  color: var(--lineup-green-text);  }
.help-tier-slate { background: var(--lineup-blue);   color: var(--lineup-blue-text);   }
.help-tier-rose  { background: var(--lineup-purple); color: var(--lineup-purple-text); }