/* festival.css — Designsystem für Schröder Mini Festival
   Beach × Plakat: flache Farben, hoher Kontrast, Plakat-Shadows. */

:root {
  /* Palette */
  --ocean: #00B8D9;
  --sun:   #FFD23F;
  --coral: #FF5C5C;
  --deep:  #1D3557;
  --sand:  #F4F1DE;

  /* Status-Farben (übersetzt auf Palette) */
  --status-registration: var(--ocean);
  --status-running:      var(--coral);
  --status-reported:     var(--sun);
  --status-confirmed:    var(--ocean);
  --status-locked:       var(--deep);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Border + Shadow */
  --border-thick: 3px;
  --border-tv: 4px;
  --radius-card: 6px;
  --radius-button: 5px;

  /* Plakat-Shadows */
  --shadow-card: 5px 5px 0 var(--sun);
  --shadow-card-deep: 5px 5px 0 var(--deep);
  --shadow-button: 3px 3px 0 var(--deep);
  --shadow-mobile-card: 3px 3px 0 var(--sun);

  /* Typography */
  --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type Scale Mobile */
  --fs-caps-mobile: 11px;
  --fs-title-mobile: 28px;
  --fs-section-mobile: 18px;
  --fs-body-mobile: 14px;

  /* Type Scale Desktop */
  --fs-caps-desktop: 13px;
  --fs-title-desktop: 42px;
  --fs-section-desktop: 24px;
  --fs-body-desktop: 16px;

  /* Type Scale TV */
  --fs-caps-tv: 16px;
  --fs-title-tv: 64px;
  --fs-section-tv: 32px;
  --fs-body-tv: 22px;
  --fs-team-tv: 28px;
  --fs-score-tv: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-stack);
  background: var(--sand);
  color: var(--deep);
  font-weight: 600;
  font-size: var(--fs-body-mobile);
  line-height: 1.4;
}

@media (min-width: 720px) {
  body { font-size: var(--fs-body-desktop); }
}

h1, h2, h3, h4 {
  color: var(--deep);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
}

h1 { font-size: var(--fs-title-mobile); text-transform: uppercase; }
h2 { font-size: var(--fs-section-mobile); }
h3 { font-size: 16px; }

@media (min-width: 720px) {
  h1 { font-size: var(--fs-title-desktop); }
  h2 { font-size: var(--fs-section-desktop); }
}

a { color: var(--coral); text-decoration: none; font-weight: 800; }
a:hover { text-decoration: underline; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4);
  position: relative;
}

/* --- Caps-Label --- */
.caps-label {
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fs-caps-mobile);
  color: var(--coral);
}
.caps-label.ocean { color: var(--ocean); }
.caps-label.sun { color: var(--sun); }
.caps-label.deep { color: var(--deep); }

@media (min-width: 720px) {
  .caps-label { font-size: var(--fs-caps-desktop); }
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  background: var(--coral);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: var(--radius-button);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}
.btn:hover { text-decoration: none; }
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--deep);
}
.btn:disabled {
  background: #999;
  box-shadow: 3px 3px 0 #666;
  cursor: not-allowed;
}
.btn.ocean { background: var(--ocean); }
.btn.sun { background: var(--sun); color: var(--deep); }
.btn.deep { background: var(--deep); }
.btn.ghost {
  background: transparent;
  color: var(--deep);
  border: 2px solid var(--deep);
  box-shadow: none;
}
.btn.ghost:active { transform: none; }
.btn.full { width: 100%; }

/* --- Cards --- */
.card {
  background: white;
  border: var(--border-thick) solid var(--deep);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-mobile-card);
  margin-bottom: var(--space-3);
}

@media (min-width: 720px) {
  .card { box-shadow: var(--shadow-card); }
}

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge.ocean { background: var(--ocean); color: white; }
.badge.coral { background: var(--coral); color: white; }
.badge.sun { background: var(--sun); color: var(--deep); }
.badge.deep { background: var(--deep); color: white; }

/* Status-Badges (mapping match.status / tournament.status) */
.badge.registration { background: var(--ocean); color: white; }
.badge.running      { background: var(--coral); color: white; }
.badge.reported     { background: var(--sun); color: var(--deep); }
.badge.confirmed    { background: var(--ocean); color: white; }
.badge.locked       { background: var(--deep); color: white; }
.badge.finished     { background: var(--deep); color: white; }
.badge.cancelled    { background: #aaa; color: white; }

/* --- Geometrische Deko --- */
.deco-circle, .deco-square {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.deco-circle { border-radius: 50%; }
.deco-square { transform: rotate(20deg); }

/* Container-Inhalte über Deko legen (Deko-Elemente ausgenommen — bleiben absolute) */
.container > *:not(.deco-circle):not(.deco-square) { position: relative; z-index: 1; }

/* --- Forms --- */
input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 10px;
  border: 2px solid var(--deep);
  border-radius: 4px;
  width: 100%;
  background: white;
  color: var(--deep);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--coral);
}
label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: 13px;
}

/* --- Error Text --- */
.error { color: var(--coral); margin-top: var(--space-2); font-weight: 700; }

/* --- Modal --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 53, 87, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
}
.modal-card {
  background: white;
  border: var(--border-thick) solid var(--deep);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  max-width: 420px;
  width: 100%;
}
.modal-card h3 {
  margin-top: 0;
  font-size: 22px;
  color: var(--deep);
}
.modal-card input[type="tel"],
.modal-card input[type="text"],
.modal-card input[type="number"] {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 8px;
  padding: 12px;
  font-variant-numeric: tabular-nums;
}
.modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* --- Score-Modal --- */
.score-modal .winner-pick p { margin: 0 0 8px; font-weight: 800; }
.score-modal .winner-pick .btn { text-align: center; }
.score-modal .winner-pick .btn.selected {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}
.score-modal input[type="number"] {
  font-size: 24px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Text-Modal (override: normaler Text-Input statt PIN-Style) --- */
.text-modal input[type="text"] {
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  letter-spacing: normal;
  padding: 10px 12px;
}

/* --- Confirm- & Notify-Modal --- */
.confirm-modal p,
.notify-modal p {
  font-size: 15px;
  font-weight: 600;
  color: var(--deep);
  margin: 12px 0 0;
  line-height: 1.45;
}
.notify-modal.error h3 { color: var(--coral); }

/* --- Gruppenphase --- */
.group-standings { margin-top: 12px; }
.standings-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.standings-table th, .standings-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.standings-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; }
.group-matches { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; }
.group-round-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.5; margin: 10px 0 0; }
.group-matches > .group-round-label:first-child { margin-top: 0; }
.group-match { padding: 8px 12px; border-radius: 8px; background: var(--card, #fff); border: 2px solid rgba(0,0,0,0.08); }
.group-match.confirmed { opacity: 0.75; }
.group-match.reported { border-color: var(--coral); }
.gm-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.gm-teams .winner { color: var(--coral); }
.gm-score { font-variant-numeric: tabular-nums; opacity: 0.8; }
.group-section-title { margin-top: 20px; }
.group-knockout { display: flex; flex-direction: column; gap: 10px; }
.ko-match .ko-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; margin-bottom: 2px; }