/* ============================================================
   LOBBY.CSS — Lobby, world picker and mode picker (v4.2.0)
   ============================================================ */

/* ---- Lobby header ---- */
.lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.lobby-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.lobby-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.lobby-brand-text { display: flex; flex-direction: column; min-width: 0; }
.lobby-brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}
.lobby-brand-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.lobby-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Text-size control (A− / A+) */
.text-size {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
}
.text-size-btn {
  width: 42px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.text-size-btn:hover:not(:disabled) { background: var(--surface-hover); }
.text-size-btn:disabled { opacity: 0.35; cursor: default; }
.text-size-label {
  min-width: 3rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--surface-hover); transform: translateY(-1px); }

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.875rem 0.25rem 0.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  max-width: 14rem;
}
.player-chip-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Hero ---- */
.lobby-hero { margin-bottom: var(--space-5); }
.lobby-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.lobby-sub {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- Primary action cards ---- */
.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.action-card {
  --action-color: var(--primary);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--action-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--action-color) 45%, var(--border));
}
.action-card:active { transform: scale(0.99); }

.action-card--play     { --action-color: var(--primary); }
.action-card--practice { --action-color: var(--success); }
.action-card--compete  { --action-color: var(--accent-violet); }

.action-emoji {
  font-size: 2.25rem;
  line-height: 1;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--action-color) 16%, transparent);
}
.action-text { display: flex; flex-direction: column; min-width: 0; }
.action-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
}
.action-desc { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.action-go {
  font-size: 1.5rem;
  color: var(--action-color);
  transition: transform var(--dur-fast) var(--ease-out);
}
.action-card:hover .action-go { transform: translateX(4px); }

/* ---- Picker head ---- */
.picker-top { margin-bottom: var(--space-4); }
.picker-head { margin-bottom: var(--space-5); }
.picker-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.picker-sub { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }

/* ---- World picker ---- */
.world-list { display: flex; flex-direction: column; gap: var(--space-5); }
.area-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.world-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

.world-card {
  --world-color: var(--primary);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.world-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--world-color) 55%, var(--border));
  box-shadow: var(--shadow-md);
}
.world-card:active { transform: scale(0.99); }
.world-card.is-locked {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
  box-shadow: none;
}
.world-card.is-locked:hover { transform: none; }

.world-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--world-color) 16%, transparent);
}
.world-info { display: flex; flex-direction: column; min-width: 0; }
.world-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.world-sub { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.world-tail { font-size: 1.25rem; color: var(--world-color); }
.world-card.is-locked .world-tail { color: var(--text-faint); }

/* ---- Mode picker ---- */
.mode-options { display: flex; flex-direction: column; gap: var(--space-3); }
.mode-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mode-option:hover {
  transform: translateY(-3px);
  border-color: var(--accent-violet);
  box-shadow: var(--shadow-lg);
}
.mode-option-emoji {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-violet) 16%, transparent);
}
.mode-option-text { display: flex; flex-direction: column; min-width: 0; }
.mode-option-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--text); }
.mode-option-desc { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }

/* ---- Ranking: theme-aware overrides (full restyle in a later sprint) ---- */
.ranking-section { background: var(--surface); border-color: var(--border); }
.ranking-title { background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ranking-chevron { color: var(--text-muted); }
.ranking-table-wrap { overflow-x: auto; }
.ranking-table { min-width: 20rem; }
.ranking-table thead th { color: var(--text-faint); border-bottom-color: var(--border); }
.ranking-table tbody tr { background: var(--surface-2); }
.ranking-table tbody tr:hover { background: var(--surface-hover); }
.ranking-table tbody tr.ranking-top { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ranking-table tbody tr.rank-1 { background: color-mix(in srgb, var(--accent-yellow) 14%, transparent); }
.ranking-table tbody tr.rank-2 { background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.ranking-table tbody tr.rank-3 { background: color-mix(in srgb, var(--accent-orange) 14%, transparent); }
.ranking-table td { color: var(--text-muted); }
.ranking-table td:last-child { color: var(--success); }
.ranking-player { color: var(--text) !important; }
.ranking-table tr.rank-1 .ranking-pos,
.ranking-table tr.rank-2 .ranking-pos,
.ranking-table tr.rank-3 .ranking-pos { font-size: 1.25rem; }
.ranking-empty { color: var(--text-faint); }

/* ---- Footer: autoría y enlaces ---- */
.lobby-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-5) 0 var(--space-2);
  border-top: 1.5px solid var(--border);
  color: var(--text-muted);
}
.lobby-footer-brand {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.lobby-footer-credit {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}
.lobby-footer-author {
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--primary) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lobby-footer-author:hover,
.lobby-footer-author:focus-visible {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.lobby-footer-site {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.875rem;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lobby-footer-site:hover,
.lobby-footer-site:focus-visible {
  background: var(--surface-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* ---- Responsive: wide screens / projectors ---- */
@media (min-width: 720px) {
  .action-grid { grid-template-columns: repeat(3, 1fr); }
  .action-card {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-left-width: 1.5px;
    border-top: 5px solid var(--action-color);
  }
  .action-go { justify-self: end; }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
  .lobby-footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .screen-inner.lobby { max-width: 62.5rem; padding: 2.5rem; }
  .world-grid { grid-template-columns: repeat(3, 1fr); }
  .world-name { font-size: 1.25rem; }
}

/* ============================================================
   PLAYER CHIP (button)
   ============================================================ */
button.player-chip {
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
button.player-chip:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* ============================================================
   PROFILE MODAL
   ============================================================ */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.profile-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
.profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.profile-modal {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 92%;
  max-width: min(28rem, 92vw);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(12px);
  transition: transform var(--dur-slow) var(--ease-bounce);
}
.profile-overlay.active .profile-modal { transform: scale(1) translateY(0); }
.profile-modal .bubble-close { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.profile-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--text); }
.profile-sub { color: var(--text-muted); font-size: 0.875rem; margin: 0.25rem 0 1rem; }
.profile-avatar-preview { font-size: 3rem; line-height: 1; text-align: center; margin: 0.5rem 0 1.25rem; }
.profile-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.375rem; }
.profile-modal .ranking-name-input { width: 100%; margin-bottom: 1.25rem; }
.profile-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.profile-avatar-option {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.profile-avatar-option:hover { border-color: var(--primary); transform: translateY(-2px); }
.profile-avatar-option.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.onboarding-overlay.active { opacity: 1; }
.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.onboarding-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 92%;
  max-width: min(26rem, 92vw);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform var(--dur-slow) var(--ease-bounce);
}
.onboarding-overlay.active .onboarding-card { transform: translateY(0) scale(1); }
.onboarding-dots { display: flex; gap: 0.375rem; justify-content: center; margin-bottom: 1.25rem; }
.onboarding-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); transition: all var(--dur-base) var(--ease-out); }
.onboarding-dot.active { background: var(--primary); width: 1.25rem; border-radius: var(--radius-pill); }
.onboarding-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 0.5rem; }
.onboarding-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; }
.onboarding-desc { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1.75rem; }
.onboarding-actions { display: flex; gap: 0.75rem; }
.onboarding-skip {
  flex: 1;
  min-height: 48px;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.onboarding-skip:hover { color: var(--text); background: var(--surface-2); }
.onboarding-next { flex: 2; }

/* ============================================================
   NAME PROMPT (first run)
   ============================================================ */
.name-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.name-prompt-overlay.active { opacity: 1; }
.name-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.name-prompt-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 92%;
  max-width: min(28rem, 92vw);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform var(--dur-slow) var(--ease-bounce);
}
.name-prompt-overlay.active .name-prompt-card { transform: translateY(0) scale(1); }
.name-prompt-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.25rem; }
.name-prompt-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; }
.name-prompt-desc { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1.25rem; }
.name-prompt-card .ranking-name-input { width: 100%; margin-bottom: 1rem; }
.name-prompt-card .profile-avatars { margin-bottom: 1.5rem; }
.name-prompt-actions { display: flex; gap: 0.75rem; }
.name-prompt-actions .onboarding-skip { flex: 1; }
.name-prompt-actions .btn { flex: 2; }

/* Highlight the current student's row in the ranking */
.ranking-table tbody tr.rank-me { box-shadow: inset 0 0 0 2px var(--primary); }
.ranking-table tbody tr.rank-me .ranking-player { color: var(--primary) !important; font-weight: 800; }