/**
 * Premium UI Polish — July 2026
 * Visual quality only: spacing, elevation, motion, states.
 * No redesign, no layout ownership changes, no mechanics.
 */

:root {
  --premium-space-1: 8px;
  --premium-space-2: 16px;
  --premium-space-3: 24px;
  --premium-space-4: 40px;
  --premium-radius-sm: 8px;
  --premium-radius-md: 12px;
  --premium-radius-lg: 16px;
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --premium-duration: 180ms;
  --premium-duration-slow: 280ms;
  --premium-elev-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --premium-elev-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 48px rgba(0, 0, 0, 0.42);
  --premium-focus: 0 0 0 2px rgba(15, 20, 34, 0.95), 0 0 0 4px rgba(212, 160, 23, 0.85);
  --shell-gold: #d4a017;
  --shell-gold-hover: #e8b82a;
  --shell-surface: rgba(11, 14, 24, 0.94);
  --shell-border: rgba(212, 160, 23, 0.26);
  --shell-text: #f3efe6;
  --shell-muted: #a8b0bf;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --premium-duration: 0ms;
    --premium-duration-slow: 0ms;
  }
}

/* ── Shell buttons ── */
html.friends-ui-v2 .shell-btn {
  border-radius: var(--premium-radius-md);
  padding: 0.5rem 0.95rem;
  min-height: 2.5rem;
  letter-spacing: 0.01em;
  transition:
    transform var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease),
    border-color var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease),
    opacity var(--premium-duration) var(--premium-ease),
    color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .shell-btn--primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 18px rgba(212, 160, 23, 0.22);
}
html.friends-ui-v2 .shell-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0c14b, var(--shell-gold-hover));
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 10px 24px rgba(212, 160, 23, 0.28);
}
html.friends-ui-v2 .shell-btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 3px 10px rgba(212, 160, 23, 0.18);
}
html.friends-ui-v2 .shell-btn--secondary:hover:not(:disabled) {
  border-color: rgba(212, 160, 23, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
html.friends-ui-v2 .shell-btn--ghost:hover:not(:disabled) {
  color: var(--shell-text);
  background: rgba(255, 255, 255, 0.04);
}
html.friends-ui-v2 .shell-btn:disabled,
html.friends-ui-v2 .shell-btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
html.friends-ui-v2 .shell-btn:focus-visible,
html.friends-ui-v2 .shell-menu-item:focus-visible,
html.friends-ui-v2 .friends-topbar-logo:focus-visible,
html.friends-ui-v2 .friends-topbar-avatar-cluster:focus-visible,
html.friends-ui-v2 .companion-rail-toggle:focus-visible,
html.friends-ui-v2 .companion-hub-open-btn:focus-visible {
  outline: none;
  box-shadow: var(--premium-focus);
}

/* ── Topbar ── */
html.friends-ui-v2 .friends-topbar {
  min-height: 68px;
  padding: 0.55rem 1.15rem;
  gap: var(--premium-space-2);
  border-bottom-color: rgba(212, 160, 23, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--shell-surface);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
html.friends-ui-v2 .friends-topbar-title {
  letter-spacing: 0.06em;
}
html.friends-ui-v2 .friends-topbar-subtitle {
  opacity: 0.9;
}
html.friends-ui-v2 .friends-topbar-section {
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  background: rgba(212, 160, 23, 0.08);
}
html.friends-ui-v2 .friends-topbar-balance {
  border-radius: var(--premium-radius-md);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.32);
  padding: 0.4rem 0.7rem;
  transition: border-color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-topbar-balance:hover {
  border-color: rgba(212, 160, 23, 0.35);
}
html.friends-ui-v2 .friends-topbar-avatar-cluster {
  min-height: 2.75rem;
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-topbar-avatar-cluster:hover {
  border-color: rgba(212, 160, 23, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
html.friends-ui-v2 .friends-topbar-dropdown,
html.friends-ui-v2 .friends-topbar-popover {
  border-radius: var(--premium-radius-lg);
  padding: 0.45rem;
  border-color: rgba(212, 160, 23, 0.28);
  background: rgba(12, 16, 28, 0.98);
  box-shadow: var(--premium-elev-2);
  animation: premium-menu-in var(--premium-duration-slow) var(--premium-ease);
}
html.friends-ui-v2 .shell-menu-item {
  border-radius: var(--premium-radius-sm);
  padding: 0.62rem 0.8rem;
  transition: background var(--premium-duration) var(--premium-ease), color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .shell-menu-item:hover {
  background: rgba(212, 160, 23, 0.14);
}

@keyframes premium-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Companion rail ── */
html.friends-ui-v2 aside.companion-rail {
  border-right-color: rgba(212, 160, 23, 0.2);
  background:
    linear-gradient(180deg, rgba(212, 160, 23, 0.05), transparent 28%),
    var(--shell-surface);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
  transition: width var(--premium-duration-slow) var(--premium-ease);
}
html.friends-ui-v2 .companion-rail--collapsed .companion-rail-expanded,
html.friends-ui-v2 .companion-rail--collapsed [data-rail-expanded-body] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.friends-ui-v2 .companion-rail-expanded {
  padding: 2.5rem 0.85rem 1rem;
  gap: 0.75rem;
}
html.friends-ui-v2 .companion-rail-room {
  border-radius: var(--premium-radius-lg);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--premium-elev-1);
}
html.friends-ui-v2 .companion-rail-dialogue {
  color: var(--shell-muted);
  line-height: 1.4;
  min-height: 2.6em;
}
html.friends-ui-v2 .companion-rail-stats {
  gap: 0.55rem;
}
html.friends-ui-v2 .companion-rail-stats > div {
  padding: 0.45rem 0.55rem;
  border-radius: var(--premium-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
html.friends-ui-v2 .companion-rail-stats span {
  color: var(--shell-muted);
  font-size: 0.72rem;
}
html.friends-ui-v2 .companion-rail-stats strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
html.friends-ui-v2 .companion-rail-quest {
  border-radius: var(--premium-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.75rem;
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease),
    transform var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .companion-rail-quest:hover {
  border-color: rgba(212, 160, 23, 0.28);
  background: rgba(212, 160, 23, 0.05);
}
html.friends-ui-v2 .companion-rail-quest.is-claimable {
  border-color: rgba(61, 154, 95, 0.45);
  box-shadow: 0 0 0 1px rgba(61, 154, 95, 0.12);
}
html.friends-ui-v2 .companion-rail-quest-title {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
}
html.friends-ui-v2 .companion-rail-quest-desc {
  margin: 0 0 0.55rem;
  color: var(--shell-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* ── Platform surfaces (shared rhythm) ── */
html.friends-ui-v2 .friends-home,
html.friends-ui-v2 .friends-social-surface,
html.friends-ui-v2 .friends-profile-surface,
html.friends-ui-v2 .friends-rank-surface,
html.friends-ui-v2 .friends-stats-surface,
html.friends-ui-v2 .friends-achievements-surface,
html.friends-ui-v2 .friends-settings-surface,
html.friends-ui-v2 .tx-history-surface,
html.friends-ui-v2 .friends-quests-surface,
html.friends-ui-v2 .friends-daily-plan-surface,
html.friends-ui-v2 .companion-hub-surface {
  gap: var(--premium-space-2);
}

html.friends-ui-v2 .friends-home-welcome,
html.friends-ui-v2 .friends-profile-hero,
html.friends-ui-v2 .friends-social-card,
html.friends-ui-v2 .friends-social-panel,
html.friends-ui-v2 .tx-history-row,
html.friends-ui-v2 .companion-hub-active,
html.friends-ui-v2 .companion-hub-detail-card,
html.friends-ui-v2 .companion-hub-card,
html.friends-ui-v2 .companion-hub-welcome-callout,
html.friends-ui-v2 .companion-hub-welcome {
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-elev-1);
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease),
    transform var(--premium-duration) var(--premium-ease);
}

html.friends-ui-v2 .friends-home-kicker,
html.friends-ui-v2 .friends-social-kicker,
html.friends-ui-v2 .friends-profile-kicker,
html.friends-ui-v2 .tx-history-kicker,
html.friends-ui-v2 .companion-hub-kicker,
html.friends-ui-v2 .companion-hub-starter-kicker {
  letter-spacing: 0.08em;
  opacity: 0.92;
}

html.friends-ui-v2 .friends-home-title,
html.friends-ui-v2 .friends-social-title,
html.friends-ui-v2 .friends-profile-title,
html.friends-ui-v2 .tx-history-title,
html.friends-ui-v2 .companion-hub-title {
  letter-spacing: -0.01em;
  line-height: 1.15;
}

html.friends-ui-v2 .friends-home-sentence,
html.friends-ui-v2 .friends-social-lead,
html.friends-ui-v2 .friends-profile-lead,
html.friends-ui-v2 .tx-history-lead,
html.friends-ui-v2 .companion-hub-lead {
  color: rgba(207, 198, 180, 0.88);
  line-height: 1.5;
}

/* Home cards */
html.friends-ui-v2 .friends-home-btn {
  min-height: 2.6rem;
  border-radius: 999px;
  transition:
    transform var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease),
    border-color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-home-portal,
html.friends-ui-v2 .friends-catalog-card,
html.friends-ui-v2 .friends-home-block {
  border-radius: var(--premium-radius-lg);
  transition:
    transform var(--premium-duration) var(--premium-ease),
    border-color var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-home-portal:hover,
html.friends-ui-v2 .friends-catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-elev-2);
}

/* Quests / daily */
html.friends-ui-v2 .friends-quest-card,
html.friends-ui-v2 .friends-daily-card,
html.friends-ui-v2 [class*='quest-card'],
html.friends-ui-v2 [data-quest-card] {
  border-radius: var(--premium-radius-lg);
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease),
    transform var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-quest-card:hover,
html.friends-ui-v2 .friends-daily-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--premium-elev-1);
}

/* Friends list rows */
html.friends-ui-v2 .friends-social-row,
html.friends-ui-v2 .friends-friend-row,
html.friends-ui-v2 .friends-social-request {
  border-radius: var(--premium-radius-md);
  transition: background var(--premium-duration) var(--premium-ease), border-color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-social-row:hover,
html.friends-ui-v2 .friends-friend-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Profile / rank / achievements / stats */
html.friends-ui-v2 .friends-profile-nav-btn,
html.friends-ui-v2 .tx-history-filter {
  border-radius: 999px;
  min-height: 2.4rem;
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease),
    color var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .friends-profile-nav-btn:hover,
html.friends-ui-v2 .tx-history-filter:hover {
  border-color: rgba(212, 160, 23, 0.4);
}
html.friends-ui-v2 .friends-profile-nav-btn.is-active,
html.friends-ui-v2 .tx-history-filter.is-active {
  background: rgba(212, 160, 23, 0.12);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.18);
}
html.friends-ui-v2 .friends-profile-avatar {
  box-shadow: var(--premium-elev-1);
}
html.friends-ui-v2 .friends-achievement-card,
html.friends-ui-v2 .friends-stat-card,
html.friends-ui-v2 .friends-rank-card {
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-elev-1);
}

/* History rows */
html.friends-ui-v2 .tx-history-row {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}
html.friends-ui-v2 .tx-history-row:hover {
  border-color: rgba(212, 160, 23, 0.22);
  background: rgba(212, 160, 23, 0.04);
}

/* Companion Hub foundation */
html.friends-ui-v2 .companion-hub-surface {
  padding-bottom: var(--premium-space-3);
}
html.friends-ui-v2 .companion-hub-tabs {
  gap: 0.5rem;
  margin: 0.85rem 0 1rem;
}
html.friends-ui-v2 .companion-hub-tabs .shell-btn {
  border-radius: 999px;
}
html.friends-ui-v2 .companion-hub-tabs .shell-btn.is-active {
  border-color: rgba(212, 160, 23, 0.5);
  background: rgba(212, 160, 23, 0.12);
  color: #fff6d8;
}
html.friends-ui-v2 .companion-hub-stats {
  gap: 0.65rem;
}
html.friends-ui-v2 .companion-hub-stats > div {
  padding: 0.7rem 0.8rem;
  border-radius: var(--premium-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
html.friends-ui-v2 .companion-hub-starter-card,
html.friends-ui-v2 .companion-hub-card {
  transition:
    border-color var(--premium-duration) var(--premium-ease),
    transform var(--premium-duration) var(--premium-ease),
    box-shadow var(--premium-duration) var(--premium-ease),
    background var(--premium-duration) var(--premium-ease);
}
html.friends-ui-v2 .companion-hub-starter-card:hover,
html.friends-ui-v2 .companion-hub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 160, 23, 0.35);
  box-shadow: var(--premium-elev-1);
}
html.friends-ui-v2 .companion-hub-starter-card.is-selected {
  border-color: rgba(212, 160, 23, 0.65);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), var(--premium-elev-1);
}
html.friends-ui-v2 .companion-hub-loading,
html.friends-ui-v2 .companion-hub-empty {
  color: var(--shell-muted);
  padding: 1.25rem 0.25rem;
}

/* Dialogs / panels / placeholders */
html.friends-ui-v2 [data-shell-placeholder-host],
html.friends-ui-v2 .shell-panel,
html.friends-ui-v2 .beta-auth-modal,
html.friends-ui-v2 .auth-portal-overlay,
html.friends-ui-v2 .auth-portal-card,
html.friends-ui-v2 .retention-modal,
html.friends-ui-v2 .farm-hub-modal {
  --premium-panel-radius: var(--premium-radius-lg);
}
html.friends-ui-v2 .shell-panel,
html.friends-ui-v2 [data-shell-placeholder-host] > section,
html.friends-ui-v2 .beta-auth-modal,
html.friends-ui-v2 .auth-portal-card {
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-elev-2);
}

/* Loading placeholders */
html.friends-ui-v2 .companion-hub-loading,
html.friends-ui-v2 .friends-social-loading,
html.friends-ui-v2 .tx-history-loading,
html.friends-ui-v2 [data-loading],
html.friends-ui-v2 .is-loading {
  position: relative;
}
html.friends-ui-v2 .companion-hub-loading::after,
html.friends-ui-v2 .tx-history-loading::after {
  content: '';
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.45rem;
  border-radius: 50%;
  border: 2px solid rgba(212, 160, 23, 0.25);
  border-top-color: rgba(212, 160, 23, 0.9);
  vertical-align: -0.1em;
  animation: premium-spin 0.7s linear infinite;
}
@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Lists densify / breathing room */
html.friends-ui-v2 .friends-social-list,
html.friends-ui-v2 .tx-history-list,
html.friends-ui-v2 .companion-hub-grid {
  gap: 0.75rem;
}

/* Keyboard / focus for platform controls */
html.friends-ui-v2 .friends-home-btn:focus-visible,
html.friends-ui-v2 .friends-profile-nav-btn:focus-visible,
html.friends-ui-v2 .tx-history-filter:focus-visible,
html.friends-ui-v2 .companion-hub-starter-card:focus-visible,
html.friends-ui-v2 .companion-hub-card-main:focus-visible,
html.friends-ui-v2 .friends-catalog-card:focus-visible,
html.friends-ui-v2 .friends-home-portal:focus-visible,
html.friends-ui-v2 .game-lobby-card:focus-visible,
html.friends-ui-v2 .game-lobby-tab:focus-visible,
html.friends-ui-v2 .game-lobby-hero-cta:focus-visible {
  outline: 2px solid var(--shell-gold, #d4a017);
  outline-offset: 2px;
  box-shadow: var(--premium-focus);
}

/* Mobile breathing room */
@media (max-width: 720px) {
  html.friends-ui-v2 .friends-topbar {
    padding: 0.5rem 0.75rem;
    gap: 0.55rem;
  }
  html.friends-ui-v2 .companion-rail-expanded {
    padding-inline: 0.7rem;
  }
  html.friends-ui-v2 .friends-home,
  html.friends-ui-v2 .friends-social-surface,
  html.friends-ui-v2 .tx-history-surface,
  html.friends-ui-v2 .companion-hub-surface {
    padding-inline: 0.15rem;
  }
}