/**
 * FRIENDS UX Comfort Pass — readability, touch targets, safe overlays.
 * Presentation/CSS only. No economy, RTP, or slot math changes.
 */

/* 1. Skip link */
.friends-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  z-index: 100000;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  font: 600 0.85rem/1.2 var(--friends-font-ui, 'DM Sans', system-ui, sans-serif);
  border: 1px solid rgba(129, 140, 248, 0.55);
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.friends-skip-link:focus,
.friends-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* 2–3. Touch targets + consistent focus */
.showcase-topbar .beta-ui-btn,
.showcase-topbar [data-topbar-logout],
.showcase-topbar [data-topbar-login],
.showcase-topbar [data-companion-hub-open],
.showcase-topbar [data-hub-menu-toggle],
.showcase-topbar [data-lobby-back],
.game-lobby-hero-cta,
.beta-auth-actions .beta-ui-btn {
  min-height: var(--friends-touch-min, 44px);
  min-width: var(--friends-touch-min, 44px);
}

.beta-ui-btn:focus-visible,
.slot-hud-spin:focus-visible,
.game-lobby-card:focus-visible,
.showcase-balance-plus:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}

/* Under UI V2, gold shell focus wins over comfort purple on lobby cards */
html.friends-ui-v2 .game-lobby-card:focus-visible,
html.friends-ui-v2 .beta-ui-btn:focus-visible {
  outline-color: var(--shell-gold, #d4a017);
  outline-offset: 2px;
}

/* 4. Balance chip contrast */
.showcase-balance-chip,
.showcase-topbar [data-balance] {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* 5. Account retry more obvious when degraded */
.account-retry-btn:not([hidden]) {
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #fde68a !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
}

/* 6. Auth forms — clearer fields */
.beta-auth-field span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.beta-auth-field input {
  min-height: 44px;
  border-radius: 12px;
  line-height: 1.35;
}

.beta-auth-error:not(.hidden) {
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
  line-height: 1.4;
}

.beta-auth-notice {
  line-height: 1.5;
  color: #e2e8f0;
}

/* 7. Hub menu panel comfort */
.showcase-hub-menu-panel {
  min-width: 12.5rem;
  padding: 0.4rem;
  gap: 0.25rem;
}

.showcase-hub-menu-panel .beta-ui-btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
}

/* 8. Toasts — never cover topbar permanently */
.retention-toast,
.friends-toast,
.cat-room-toast,
.magic-moment-toast {
  max-width: min(24rem, calc(100vw - 1.5rem));
  line-height: 1.45;
  z-index: 12500;
}

@media (min-width: 900px) {
  .retention-toast,
  .friends-toast,
  .magic-moment-toast {
    top: calc(var(--showcase-topbar-h, 48px) + 0.75rem);
  }
}

/* 9. Quest / retention readability */
[data-daily-quest-board],
.retention-panel,
.retention-panel-hint,
.social-hub-empty {
  line-height: 1.5;
}

[data-daily-quest-board] p,
.retention-panel p {
  max-width: 42rem;
}

/* 10. Lobby cards — title clamp + calm hover (respect reduced motion) */
.game-lobby-card-title,
.game-lobby-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .game-lobby-card:hover:not([disabled]) {
    transform: none;
  }

  .game-lobby-card,
  .beta-ui-btn,
  .first-visit-coach {
    transition: none !important;
  }
}

/* 11. First-visit coach — easier dismiss */
.first-visit-coach {
  align-items: center;
}

.first-visit-coach-dismiss {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 12. Embed loading state */
.game-embed-loading {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e2e8f0;
}

.game-embed-loading::before {
  content: '';
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: #a78bfa;
  animation: friends-ux-spin 0.7s linear infinite;
}

@keyframes friends-ux-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-embed-loading::before {
    animation: none;
    border-top-color: rgba(167, 139, 250, 0.65);
  }
}

/* 13. Lobby back affordance */
.game-lobby-back-btn:not([hidden]) {
  font-weight: 700;
}

/* 14. Social / empty states breathing room */
.social-hub-empty,
.social-hub-panel .empty,
[data-social-panel] .social-hub-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: #cbd5e1;
  line-height: 1.5;
}

/* 15. API error modal spacing */
.beta-api-error-card .slot-modal-body {
  line-height: 1.5;
}

.beta-api-error-card .beta-auth-actions {
  margin-top: 0.85rem;
  gap: 0.5rem;
}

/* 16. Slot HUD labels clearer */
.slot-hud-stat .label {
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* 17. Safe gap under topbar for lobby content */
.playground--lobby-active .game-lobby,
.playground--lobby-active [data-game-lobby] {
  scroll-padding-top: 1rem;
}

/* 18. Modal cards — avoid edge clipping on narrow laptops */
.slot-modal-card.beta-auth-card,
.slot-modal-card.beta-api-error-card {
  max-height: min(92vh, 40rem);
  overflow: auto;
}

/* 19. Companion hub CTA hierarchy */
.showcase-companion-hub-btn {
  font-weight: 700;
}

/* 20. Soft atmospheric base — does not replace stage directors */
.showcase-shell {
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(124, 58, 237, 0.16), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(56, 189, 248, 0.08), transparent 55%);
  background-attachment: fixed;
}