/* ──────────────────────────────────────────────────────────────────────────
 * app.css — design tokens + small overrides on top of Tailwind Play CDN
 * Aesthetic: warm-neutral editorial, amber accent. DM Sans + JetBrains Mono.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:           #FAFAF9; /* stone-50 */
  --surface:      #FFFFFF;
  --surface-2:   #F5F5F4; /* stone-100 */
  --text:         #1C1917; /* stone-900 */
  --text-muted:  #78716C; /* stone-500 */
  --border:       #E7E5E4; /* stone-200 */
  --border-strong:#D6D3D1; /* stone-300 */
  --accent:       #D97706; /* amber-600 */
  --accent-2:    #B45309; /* amber-700 */
  --accent-bg:   #FEF3C7;
}

html.dark {
  --bg:           #0C0A09; /* stone-950 */
  --surface:      #1C1917;
  --surface-2:   #292524;
  --text:         #FAFAF9;
  --text-muted:  #A8A29E;
  --border:       #292524;
  --border-strong:#44403C;
  --accent:       #F59E0B; /* amber-500 */
  --accent-2:    #FBBF24;
  --accent-bg:   rgba(245, 158, 11, 0.10);
}

html, body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--text);
}

.font-display {
  font-family: "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.015em;
}
.font-mono, .font-mono * {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-feature-settings: "calt", "ss01";
}

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Focus rings on form controls — replace browser default with amber */
:where(input, select, textarea, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reusable */
.card-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.input-base {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
}
.input-base:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1; transition: all 120ms; cursor: pointer; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text-muted); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }

/* Subtle entrance for cards */
@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-rise] { animation: rise 280ms ease both; }
[data-rise]:nth-child(2) { animation-delay: 40ms; }
[data-rise]:nth-child(3) { animation-delay: 80ms; }
[data-rise]:nth-child(4) { animation-delay: 120ms; }
[data-rise]:nth-child(5) { animation-delay: 160ms; }
[data-rise]:nth-child(6) { animation-delay: 200ms; }

/* Topbar pulse fix — accent dot */
@keyframes pulse-dot { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Make the game cover gradients consistent per provider */
.cover-PG       { background: linear-gradient(135deg, #FB923C 0%, #C2410C 100%); }
.cover-nlm      { background: linear-gradient(135deg, #A78BFA 0%, #5B21B6 100%); }
.cover-JILI     { background: linear-gradient(135deg, #22D3EE 0%, #0E7490 100%); }
.cover-JOKER    { background: linear-gradient(135deg, #F87171 0%, #991B1B 100%); }
.cover-pracmatic{ background: linear-gradient(135deg, #34D399 0%, #065F46 100%); }

/* Reports / log tables — shared table styling */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead tr { background: var(--surface-2); }
.data-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.data-table th[data-sort] { cursor: pointer; }
.data-table th[data-sort]:hover { color: var(--text); }
.data-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.data-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th.\!text-right, .data-table td.\!text-right { text-align: right; }