/* ═══════════════════════════════════════════════════════════════
   GOLFOURS — styles.css
   Primary: #00A219 (RGB 0,162,25)

   Sections:
   1. BASE & RESET
   2. CSS VARIABLES (design tokens)
   3. UTILITY CLASSES
   4. CARD & LAYOUT
   5. TABS
   6. SCORECARD TABLE
   7. SCORE ENTRY
   8. LOGIN PAGE
   9. BACK BUTTON & BOTTOM NAV
   10. HOLE TRANSITION & WIN POPUP
   11. PLAYER PICKER
═══════════════════════════════════════════════════════════════ */


/* ─── 1. BASE & RESET ────────────────────────────────────────── */
[x-cloak] { display: none !important; }

body {
  background: #F2F9F3;   /* Neutral-100 — green-tinted page bg */
  -webkit-tap-highlight-color: transparent;
  font-family: 'DM Sans', sans-serif;
  color: #1A221B;
}

*, *::before, *::after { font-family: inherit; }

h1, h2, h3, h4, h5, h6,
.font-display, [class*="font-display"] {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }


/* ─── 2. CSS VARIABLES ───────────────────────────────────────── */
:root {
  /* Primary green */
  --p100: #E0FFE5;
  --p200: #AAEDB4;
  --p300: #67C675;
  --p400: #16BF30;   /* active icons, live dot */
  --p500: #00A219;   /* main brand — nav, headers, CTAs */
  --p600: #008414;
  --p700: #006910;   /* dark hover */
  --p800: #004D0C;
  --p900: #003308;   /* text on green bg */

  /* Gold accent */
  --g300: #FFD189;
  --g400: #EDB761;   /* selected tag pill, "X UP" — brighter */
  --g500: #D4A04C;
  --g900: #433113;

  /* Info blue — card tints */
  --b100: #E7F0FF;   /* hover bg */
  --b200: #C8DDFF;   /* card tint, ongoing match bg, standing bar */
  --b700: #1C4E9F;   /* text on blue tint */

  /* Neutral (green-tinted gray) */
  --n100: #F2F9F3;   /* page background */
  --n200: #E2EEE3;   /* card borders, dividers */
  --n300: #C8D9CA;   /* input borders */
  --n400: #A5B9A7;
  --n500: #7A937C;   /* muted text */
  --n600: #5C7260;
  --n700: #435447;   /* secondary text */
  --n800: #2D3A2F;
  --n900: #1A221B;   /* body text */

  /* Teams */
  --team-a: #00A219;
  --team-b: #92400e;

  /* Purple (CGL/Strokes) */
  --purple100: #F3E8FF;
  --purple500: #7C3AED;

  /* Danger */
  --danger100: #FFE9E9;
  --danger500: #EF4343;
  --danger700: #9B2323;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.11);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}


/* ─── 3. UTILITY CLASSES ─────────────────────────────────────── */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); }
.btn-score   { min-width: 44px; min-height: 44px; }
.grain {
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 3px 3px;
}


/* ─── 4. CARD & LAYOUT ───────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid var(--n200);
  border-radius: var(--radius-md);   /* 8px — reduced from 16px */
  box-shadow: var(--shadow-sm);
}

/* Info-tinted surface (ongoing match, net chip, standing bar) */
.card-info {
  background: var(--b200);
  border: 1px solid var(--b200);
  border-radius: var(--radius-md);
}

/* Team accent left border */
.team-a-card { border-left: 3px solid var(--team-a) !important; }
.team-b-card { border-left: 3px solid var(--team-b) !important; }

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,34,10,0.6);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--n900);
}


/* ─── 5. TABS ────────────────────────────────────────────────── */
.tab-active {
  border-bottom: 2px solid var(--p500);
  color: var(--p500);
  font-weight: 700;
}
.tab-inactive { color: var(--n500); }

/* Tab underline pill (rounded) */
.tab-active-pill {
  position: relative;
  color: var(--p500);
  font-weight: 700;
}
.tab-active-pill::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--p500);
  border-radius: 999px;
}


/* ─── 6. SCORECARD TABLE ─────────────────────────────────────── */
.sc-table td,
.sc-table th {
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  border: 1px solid var(--n200);
}
.sc-table th   { font-weight: 700; background: var(--n100); color: var(--n700); }
.sc-winner-a   { background: var(--team-a); color: white; }
.sc-winner-b   { background: var(--team-b); color: white; }


/* ─── 7. SCORE ENTRY ─────────────────────────────────────────── */
/* Birdie / Eagle rings */
.gross-birdie {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-weight: 700;
}
.gross-eagle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-shadow: 0 0 0 2px white, 0 0 0 3.5px currentColor;
  font-weight: 700;
}

/* Net score chip (info blue tint) */
.net-chip {
  background: var(--b100);
  border: 1px solid var(--b200);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--b700);
}

/* Stroke checkbox */
.stroke-checked {
  background: white;
  border: 1.5px solid var(--purple500);
  border-radius: var(--radius-sm);
}
.stroke-unchecked {
  background: white;
  border: 1.5px solid var(--n300);
  border-radius: var(--radius-sm);
}

/* Press pills */
.press-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}
.press-A { background: var(--team-a); color: white; }
.press-B { background: var(--team-b); color: white; }
.press-0 { background: var(--n200); color: var(--n500); }


/* ─── 8. LOGIN PAGE ──────────────────────────────────────────── */
.bg-parallax-container {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.bg-parallax-image {
  position: absolute; top: -5%; left: -5%;
  width: 110%; height: 110%;
  background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBQL-E1kQJtGu6nD8_50Xe1dpKGe0OkXGpGSfplKFj65X_Ry1zItcA30cOEGTUlh_EyWNJjuSscMr6_4fLSSLmZAZjF_RhXBcC5EFgdw0UiMHlbHFPbfHebjhZYcVpSJxgq2nRISAKluc41mX2zn3sm1VWnK1RU2vY0KPBQsb3vm6FMBKUHAUvjnVI9IVHixLRXxd0b-RpTGVizZDbWtKA4gqmqioq2azTARA8jUsovSTancuBEC0J2r0lxFHt6gTLcOQ1gHJUBA80');
  background-size: cover; background-position: center;
  animation: bg-drift 20s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { transform: scale(1) translateX(0); }
  100% { transform: scale(1.05) translateX(-2%); }
}
@keyframes slide-up-bounce {
  0%   { transform: translateY(100%); opacity: 0; }
  60%  { transform: translateY(-5%);  opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-card-entrance { animation: slide-up-bounce 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.animate-logo-fade     { opacity: 0; animation: fade-in 0.8s ease-out 0.3s forwards; }

.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::after {
  content: ''; position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 45%,
    rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 55%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0%        { transform: translateX(-150%) rotate(45deg); }
  20%, 100% { transform: translateX(150%)  rotate(45deg); }
}
.input-underline-wrap {
  position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 1px; background: #acadad;
  transition: all 300ms ease-out;
}
.input-group:focus-within .input-underline-wrap { height: 2px; background: var(--p500); }
.login-screen-hidden .bg-parallax-container { display: none; }


/* ─── 9. BACK BUTTON & BOTTOM NAV ────────────────────────────── */
.back-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px 0;
  font-size: 13px; font-weight: 700;
  color: var(--p500);
  background: none; border: none; cursor: pointer;
}
.back-btn svg { width: 20px; height: 20px; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: white;
  border-top: 1px solid var(--n200);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-btn {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; padding: 10px 0 6px;
  border: none; background: none; cursor: pointer;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n500);
  transition: color 0.15s;
}
.bottom-nav-btn.active { color: var(--p500); }
.bottom-nav-btn svg { width: 22px; height: 22px; }

/* Active nav dot indicator */
.nav-active-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--p500);
  margin-top: 1px;
}


/* ─── 10. HOLE TRANSITION & WIN POPUP ───────────────────────── */
@keyframes hole-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.hole-enter { animation: hole-in 0.28s cubic-bezier(0.34,1.3,0.64,1) both; }

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  {             transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.win-card { animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }


/* ─── 11. PLAYER PICKER ──────────────────────────────────────── */
.picker-page {
  position: fixed; inset: 0;
  background: white; z-index: 200;
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.picker-page.open { transform: translateX(0); }