/* =========================================================================
 * rookx — polish stylesheet (additive)
 * -------------------------------------------------------------------------
 * This file is loaded AFTER styles.css. It introduces small quality-of-life
 * improvements without changing any existing class structure or layout:
 *
 *   - smoother scrolling + reduced-motion respect
 *   - consistent focus rings for keyboard users
 *   - subtle button + card hover/active transitions
 *   - improved scrollbars in dark + light themes
 *   - loading shimmer for placeholders
 *   - prettier text selection
 *   - safer touch tap highlight on mobile
 *   - subtle entrance animation for cards/panels on first paint
 * ========================================================================= */

/* ---- 1. Motion + scrolling ---------------------------------------------- */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 2. Focus rings (accessibility) ------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus, rgba(139,92,246,0.55));
  outline-offset: 2px;
  border-radius: 8px;
}
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--focus, rgba(139,92,246,0.35));
  outline-color: transparent;
}

/* ---- 3. Buttons: subtle lift on hover, press on active ------------------ */
.btn {
  transition:
    transform 140ms cubic-bezier(.2,.7,.2,1),
    box-shadow 180ms cubic-bezier(.2,.7,.2,1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
  will-change: transform;
}
.btn:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.8);
}
.btn.btn-primary:hover:not(:disabled):not(.is-loading) {
  box-shadow: 0 8px 28px rgba(139,92,246,0.45);
}

/* ---- 4. Cards/panels: subtle hover lift --------------------------------- */
.card,
.panel {
  transition:
    transform 200ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms cubic-bezier(.2,.7,.2,1),
    border-color 220ms ease;
}
.card:hover,
.panel:hover {
  border-color: var(--border2, rgba(255,255,255,0.18));
}

/* ---- 5. Custom scrollbars (Chromium / Safari) --------------------------- */
/* The base styles.css hides scrollbars entirely on .layout etc. We keep that
 * intact and only style the *visible* scrollbars on regular content areas. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(139,92,246,0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}
:root[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.30);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ---- 6. Text selection -------------------------------------------------- */
::selection {
  background: rgba(236,72,153,0.45);  /* magenta */
  color: #fff;
}

/* ---- 7. Tap highlight (mobile) ----------------------------------------- */
* { -webkit-tap-highlight-color: rgba(139,92,246,0.18); }

/* ---- 8. Reusable loading shimmer placeholder ---------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--panel3, rgba(255,255,255,0.04));
  border-radius: 8px;
  color: transparent !important;
  min-height: 1em;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- 9. Subtle entrance animation for first-paint panels ---------------- */
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card,
.panel,
.notice {
  animation: panel-fade-in 360ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .card, .panel, .notice { animation: none; }
}

/* ---- 10. Form fields: clearer focus state ------------------------------- */
input,
select,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent, #8b5cf6);
  box-shadow: 0 0 0 3px var(--focus, rgba(139,92,246,0.30));
}

/* ---- 11. Avatar images get a soft ring --------------------------------- */
.avatar,
.avatar-sm,
.avatar-md,
.avatar-lg {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.30);
  background-color: var(--panel2, rgba(255,255,255,0.04));
}

/* ---- 12. Image rendering: prevent blurry sprites on transform ---------- */
img.brand-mark,
img.brand-wordmark,
.avatar,
.avatar img {
  image-rendering: -webkit-optimize-contrast;
}

/* ---- 13. Topbar gets a subtle backdrop blur on supporting browsers ----- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
}

/* ---- 14. Hidden helper that respects screen readers --------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- 15. Notification badge pulse -------------------------------------- */
.notification-badge:not(.hidden) {
  animation: notif-pulse 1.6s ease-in-out infinite;
}
@keyframes notif-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* ---- 16. Tooltip-like title on buttons (purely cosmetic) --------------- */
.btn[title] { position: relative; }

/* ---- 17. Tables: zebra striping in dark mode --------------------------- */
.table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.022);
}
:root[data-theme="light"] .table tbody tr:nth-child(even) td {
  background: rgba(15,23,42,0.022);
}

/* ---- 18. Tighter line-height + improved font features ------------------ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1, "tnum" 1;
  text-rendering: optimizeLegibility;
}

/* ---- 19. Reduce CLS for the Unity placeholder while loading ------------ */
.unity-placeholder { min-height: var(--unityH, 600px); }

/* ---- 20. Print-friendly fallback --------------------------------------- */
@media print {
  .topbar, .sidebar, .global-chat-messages, .notification-anchor { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* Lichess account link card (Classical Chess Online) */
.lichess-card {
  display: grid;
  gap: 8px;
}

.lichess-status-text {
  font-weight: 800;
  letter-spacing: .01em;
}

.lichess-card[data-linked="true"] .lichess-status-text {
  color: var(--accent-2, currentColor);
}

.lichess-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.leaderboard-table td .muted {
  opacity: .7;
}