/* ============================================================
   Quiniela Mundial 2026 — design tokens & base
   Aesthetic: clean sport/fintech, warm light, copper accent
   ============================================================ */

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --r-card: 22px;
  --r-chip: 13px;
  --r-pill: 999px;

  --tab-h: 76px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg:          oklch(0.984 0.006 75);
  --bg-grad:     oklch(0.975 0.012 70);
  --surface:     oklch(1 0 0);
  --surface-2:   oklch(0.966 0.008 75);
  --surface-3:   oklch(0.945 0.011 72);
  --text:        oklch(0.24 0.012 55);
  --text-muted:  oklch(0.56 0.012 60);
  --text-faint:  oklch(0.70 0.010 65);
  --border:      oklch(0.915 0.008 70);
  --border-2:    oklch(0.88 0.010 68);

  --accent:      #b51447;
  --accent-press:#990f3a;
  --accent-ink:  #ffffff;
  --accent-soft: #fae6ec;
  --accent-soft-bd: #f0c4d2;

  --good:        oklch(0.62 0.14 150);
  --good-soft:   oklch(0.95 0.05 155);
  --live:        oklch(0.60 0.21 22);
  --live-soft:   oklch(0.95 0.05 25);
  --shadow-card: 0 1px 2px rgba(40,28,16,0.04), 0 6px 20px -8px rgba(40,28,16,0.10);
  --shadow-pop:  0 8px 40px -8px rgba(40,28,16,0.22);
  --scrim:       rgba(30,22,14,0.34);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg:          oklch(0.185 0.011 58);
  --bg-grad:     oklch(0.215 0.014 55);
  --surface:     oklch(0.232 0.013 58);
  --surface-2:   oklch(0.272 0.014 57);
  --surface-3:   oklch(0.31 0.015 56);
  --text:        oklch(0.96 0.006 78);
  --text-muted:  oklch(0.72 0.012 70);
  --text-faint:  oklch(0.58 0.012 65);
  --border:      oklch(0.31 0.013 58);
  --border-2:    oklch(0.37 0.015 57);

  --accent:      #e23a6b;
  --accent-press:#c62356;
  --accent-ink:  #ffffff;
  --accent-soft: #45172a;
  --accent-soft-bd: #5e2238;

  --good:        oklch(0.74 0.15 152);
  --good-soft:   oklch(0.33 0.06 155);
  --live:        oklch(0.68 0.20 22);
  --live-soft:   oklch(0.34 0.08 25);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px -10px rgba(0,0,0,0.55);
  --shadow-pop:  0 10px 50px -10px rgba(0,0,0,0.7);
  --scrim:       rgba(0,0,0,0.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
}

body {
  background: var(--bg);
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: stretch; justify-content: center;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
  background: var(--bg);
}

/* Fluid column: fills the viewport width up to a max, full height. Not a phone. */
.frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100vh; height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition: background .4s var(--ease);
}
/* On a phone-width viewport, drop the side borders so it's edge-to-edge. */
@media (max-width: 560px) {
  .frame { border-left: none; border-right: none; }
}

/* The app surface that fills the frame */
.app {
  position: absolute; inset: 0;
  background: var(--bg);
  color: var(--text);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  transition: background .4s var(--ease), color .4s var(--ease);
}

/* numbers / scores */
.tnum { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* scroll region between header and tab bar */
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* hide native focus rings, we draw our own */
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fade/slide for screen transitions */
@keyframes screenIn {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
.screen-anim { animation: screenIn .34s var(--ease) forwards; }

@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes livePulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live);
  animation: livePulse 1.4s ease-in-out infinite;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }