/* ============================================================================
   WM-App Responsive Layout
   ----------------------------------------------------------------------------
   Mobile-First — alles bisher beschriebene gilt für < 768 px. Diese Datei
   atmet für Tablet (768–1023) und Desktop (≥ 1024).

   Strategie:
     - Bottom-Nav bleibt auf allen Viewports (Sport-Apps machen das,
       Daumen-Reichweite ist auch auf großen Tablets schön)
     - .page max-width wächst mit dem Viewport
     - Match-Cards & Gruppentabellen werden 2-spaltig ab 768
     - Leaderboard 2-spaltig auf Desktop
     - Type-Scale wird in tokens.css responsive hochgezogen
   ============================================================================ */

/* ============================================================================
   TABLET — 768 bis 1023 px
   ============================================================================ */
@media (min-width: 768px) {
  .page {
    max-width: 720px;
    padding: var(--space-5) var(--space-4) 90px;
  }
  .hdr-inner {
    max-width: 720px;
  }
  .nav-inner {
    max-width: 720px;
  }

  /* Auth: etwas breiter, mehr Atemraum */
  .login-box {
    max-width: 460px;
  }
  .auth-card,
  .login-card {
    padding: var(--space-5) var(--space-5);
  }

  /* Admin-Match-Cards 2-spaltig auf Tablet (Tipps-Tab nutzt jetzt Tabellen) */
  #admin-matches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .match {
    margin-bottom: 0;
  }

  /* Leaderboard-Rows: etwas mehr Padding */
  .lb-row {
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================================================
   DESKTOP — 1024 px aufwärts
   ============================================================================ */
@media (min-width: 1024px) {
  .page {
    max-width: 1120px;
    padding: var(--space-6) var(--space-5) 90px;
  }
  .hdr-inner,
  .nav-inner {
    max-width: 1120px;
  }
  .hdr {
    padding: var(--space-3) var(--space-5);
  }
  .hdr-logo {
    height: 112px;
  }
  .hdr-title {
    font-size: var(--fs-base);
  }
  .hdr-sub {
    font-size: var(--fs-sm);
  }

  /* Match-Row symmetrisch (3-spaltig): linke Spalte = rechte Spalte, damit
     VS bzw. Ergebnis in der Page-Mitte sitzen und mit dem Logo darueber
     fluchten. */
  .match-row {
    grid-template-columns: 170px 1fr 170px;
    padding: 11px 14px;
  }
  /* Comfort-Modus auf Desktop: groessere Schrift braucht breitere Spalten,
     sonst brechen Datum + Countdown um. Symmetrie bleibt durch gleiche
     Aussenspalten-Breite erhalten. */
  html.comfort .match-row {
    grid-template-columns: 218px 1fr 218px;
  }
  .mr-date {
    font-size: var(--fs-sm);
  }
  /* Flaggen auf Desktop deutlich größer (einheitliche Box, kein Crop) */
  .mr-flag {
    width: 33px;
    height: 22px;
  }
  .mr-teams {
    font-size: var(--fs-base);
    gap: 10px;
  }
  .mr-team-side {
    gap: 8px;
  }
  .mr-vs {
    font-size: var(--fs-sm);
    padding: 0 6px;
  }
  .mr-score {
    font-size: var(--fs-base);
  }

  /* Auth-Screens nutzen mehr von der Höhe, aber Box bleibt fokussiert */
  .auth-card,
  .login-card {
    padding: var(--space-6);
  }
  .login-box {
    max-width: 480px;
  }

  /* Admin-Tab: 3 Spalten Match-Cards auf Desktop */
  #admin-matches {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
  }

  /* Bonus-Tab: GW-Grid 6 Spalten auf Desktop */
  .gw-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .gw-admin-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Leaderboard kann breiter sein, mehr Detail */
  .lb-row {
    padding: var(--space-4) var(--space-5);
    grid-template-columns: 48px 1fr auto;
  }

  /* Gruppen-Standings: 2-spaltig auf Desktop */
  #group-standings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  /* Hilfe-Seite: zwei Spalten für die Regel-Cards */
  #tab-help .card {
    /* leave as-is for first 3 cards (Tipparten) — keep them stacked */
  }

  /* Bottom-Nav etwas dezenter auf Desktop, weniger Höhe */
  .nav {
    border-top: 1px solid var(--c-gold-border);
  }
  .nav-btn {
    padding: var(--space-3) 0;
  }
  .nav-btn .ni svg {
    width: 26px;
    height: 26px;
  }
  .nav-btn {
    font-size: var(--fs-xs);
  }
}

/* ============================================================================
   WIDE — 1440 px und mehr
   ============================================================================ */
@media (min-width: 1440px) {
  .page {
    max-width: 1280px;
  }
  .hdr-inner,
  .nav-inner {
    max-width: 1280px;
  }
}

/* ============================================================================
   HOVER-FÄHIGE GERÄTE — leichte Hover-Effekte (auf Touch unterdrückt)
   ============================================================================ */
@media (hover: hover) {
  .btn-y:hover,
  .admin-invite-btn:hover {
    filter: brightness(1.05);
  }
  .btn-sm:hover,
  .tip-btn:hover {
    border-color: var(--c-gold-border);
    color: var(--c-gold);
  }
  .lb-row:hover {
    background: var(--c-card-strong);
  }
  .match:hover {
    border-color: rgba(255, 255, 255, 0.13);
  }
  .nav-btn:hover:not(.active) {
    color: var(--c-text-2);
  }
}

/* ============================================================================
   COMFORT-MODE TOGGLE BUTTON
   ----------------------------------------------------------------------------
   Floating Brille-Icon unten-rechts. Toggles html.comfort, in tokens.css
   verdoppelt das die Type-Tokens.
   ============================================================================ */
.comfort-toggle {
  /* Floating Lupe — nach Schema frost-panel: leichter Frost-Hintergrund,
     runder Gold-Rand, Lupe in Gold. */
  display: inline-flex;
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom, 0));
  right: var(--space-4);
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--r-pill);
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  color: var(--c-gold);
  backdrop-filter: blur(var(--frost-blur));
  -webkit-backdrop-filter: blur(var(--frost-blur));
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-nav);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.comfort-toggle:hover {
  transform: scale(1.05);
  border-color: var(--c-gold);
}
html.comfort .comfort-toggle {
  background: var(--c-gold);
  color: #111;
  border-color: var(--c-gold);
  /* Im Comfort-Mode wird die Nav groesser → Button leicht anheben. */
  bottom: calc(103px + env(safe-area-inset-bottom, 0));
}
.comfort-toggle svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) {
  .comfort-toggle {
    /* Button sitzt am rechten Content-Rand (Page max-width 1120, zentriert),
       leicht in die Marge ueberlappend. */
    right: max(var(--space-4), calc((100vw - 1120px) / 2 - 34px));
  }
}

@media (min-width: 1440px) {
  .comfort-toggle {
    /* Wide-Mode hat .page max-width 1280 → Marge neu rechnen */
    right: max(var(--space-4), calc((100vw - 1280px) / 2 - 34px));
  }
}