/* This file is served directly to the browser (no Tailwind CLI build step in
   this repo) — it must be plain CSS the browser can parse on its own. Custom
   theme tokens (colors/fonts) live in the inline `<style type="text/tailwindcss">`
   block in views/layout/base.templ instead, which is what the
   @tailwindcss/browser runtime script actually reads; `@import "tailwindcss"`/
   `@plugin "daisyui"` here are Tailwind-CLI-only directives that a bare
   browser can't resolve (they were causing a failed same-origin fetch and
   silently breaking every custom color/font on the page). */

@layer base {
  :root {
    --color-base-100: #FFFFFF;
    --color-base-200: #F0F0F0;
    --color-base-300: #E0E0E0;
    --color-primary: #0A3B18;
    --color-primary-content: #FFFFFF;
    --color-secondary: #1ED760;
    --color-secondary-content: #1A1A1A;
    --color-accent: #FFD700;
    --color-accent-content: #1A1A1A;
    --color-neutral: #1A1A1A;
    --color-neutral-content: #FFFFFF;
    --color-info: #0A3B18;
    --color-success: #1ED760;
    --color-warning: #FFD700;
    --color-error: #FF4500;
    scroll-behavior: smooth;
  }
  body {
    font-family: 'Work Sans', sans-serif;
    background-color: #F0F0F0;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6, .font-oswald {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .stat-number, .font-mono, code, pre {
    font-family: 'JetBrains Mono', monospace !important;
    font-variant-numeric: tabular-nums;
  }
  *:focus-visible {
    outline: 4px solid #FFD700 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
  }
}

.stadium-gradient {
  position: relative;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(30, 215, 96, 0.30), transparent 60%),
    radial-gradient(ellipse 700px 450px at 100% 0%, rgba(255, 215, 0, 0.14), transparent 55%),
    linear-gradient(160deg, #0A3B18 0%, #062710 100%);
  overflow: hidden;
}
.stadium-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(65deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 26px, transparent 26px, transparent 52px);
  pointer-events: none;
}

/* Faint mown-grass stripe texture for light content sections — the low-opacity
   "grass everywhere, not just the hero" treatment. */
.grass-texture {
  background-image: repeating-linear-gradient(65deg, rgba(10,59,24,0.05) 0px, rgba(10,59,24,0.05) 26px, rgba(10,59,24,0.02) 26px, rgba(10,59,24,0.02) 52px);
}

/* Dark "scoreboard" stat tile — sits inside a .stadium-gradient masthead. */
.scoreboard-tile {
  position: relative;
  background: linear-gradient(160deg, #1A1A1A 0%, #060907 100%);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  overflow: hidden;
}
.scoreboard-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(65deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 14px, transparent 14px, transparent 28px);
  pointer-events: none;
}
.scoreboard-tile > * {
  position: relative;
}
.scoreboard-num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #1ED760;
}
.scoreboard-lbl {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.3rem;
}

/* Mown-stripe accent bar for group cards. */
.grass-stripe-accent {
  background-image: repeating-linear-gradient(90deg, #1ED760 0px, #1ED760 10px, #159146 10px, #159146 20px);
}

.ticket-stub {
  position: relative;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(10,59,24,0.12), 0 1px 4px rgba(26,26,26,0.08);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 120px;
  border: 1px solid rgba(10,59,24,0.1);
}
.ticket-stub::before, .ticket-stub::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F0F0F0;
  border-radius: 50%;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.ticket-stub::before { left: -10px; }
.ticket-stub::after { right: -10px; }
.ticket-notch-top, .ticket-notch-bottom {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F0F0F0;
  border-radius: 50%;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.ticket-notch-top { top: -10px; }
.ticket-notch-bottom { bottom: -10px; }
.ticket-left, .ticket-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  position: relative;
}
.ticket-perforation {
  width: 0;
  border-left: 2px dashed #FFD700;
  position: relative;
  flex-shrink: 0;
}
.ticket-team-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: #FF4500;
  font-weight: 600;
}
.ticket-team-label.is-home {
  color: #1A1A1A;
}
.ticket-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A3B18;
  line-height: 1;
}

.section-divider-dashed {
  width: 100%;
  height: 0;
  border-top: 2px dashed #FFD700;
  opacity: 0.5;
  margin: 0;
  position: relative;
}
.section-divider-dashed::before, .section-divider-dashed::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #FFD700;
  border-radius: 50%;
  top: -8px;
}
.section-divider-dashed::before { left: -7px; }
.section-divider-dashed::after { right: -7px; }

.perforation-divider {
  width: 100%;
  height: 4px;
  background-image: linear-gradient(to right, #FF4500 50%, transparent 50%);
  background-size: 24px 4px;
  background-repeat: repeat-x;
}

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  background: #0A3B18;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(10,59,24,0.3);
  animation: toast-in 0.2s ease-out, toast-out 0.2s ease-in 2.8s forwards;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 380px;
}
.toast-item.error { background-color: #FF4500; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }

.match-player-row .goal-stepper,
.match-player-row .assist-stepper {
  display: none;
}
.match-player-row:has(.team-radio[value="a"]:checked) .goal-stepper,
.match-player-row:has(.team-radio[value="b"]:checked) .goal-stepper,
.match-player-row:has(.team-radio[value="a"]:checked) .assist-stepper,
.match-player-row:has(.team-radio[value="b"]:checked) .assist-stepper {
  display: flex;
}
.team-toggle .team-opt {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.team-toggle .team-opt:has(.team-radio:checked) {
  background-color: #0A3B18;
  color: #FFD700;
}

@media (max-width: 640px) {
  .ticket-stub { flex-direction: column; min-height: auto; }
  .ticket-perforation { width: 100%; height: 0; border-left: none; border-top: 2px dashed #FFD700; }
  .ticket-score { font-size: 2rem; }
}