/* Eine zurückhaltende Flutlicht-Atmosphäre: lebendig, ohne die Inhalte zu überlagern. */
:root {
  --stadium-glow: rgba(101, 230, 137, .34);
  --stadium-gold: rgba(255, 209, 77, .25);
  --surface: rgba(255, 255, 255, .91);
}

body {
  min-height: 100vh;
  overflow-x: clip;
  isolation: isolate;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: -28vmax;
  pointer-events: none;
  content: "";
  opacity: .72;
  background:
    radial-gradient(circle at 16% 24%, var(--stadium-glow) 0 4%, transparent 17%),
    radial-gradient(circle at 82% 18%, var(--stadium-gold) 0 3%, transparent 15%),
    radial-gradient(circle at 58% 84%, rgba(103, 205, 132, .16) 0 5%, transparent 20%);
  filter: blur(8px);
  animation: stadium-sweep 20s ease-in-out infinite alternate;
}

.container { position: relative; z-index: 1; }

.public-area .brand {
  position: relative;
  letter-spacing: -.015em;
}

.public-area .brand::after {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin: 0 0 .1rem .38rem;
  border-radius: 50%;
  background: #ef9f1b;
  box-shadow: 0 0 0 0 rgba(239, 159, 27, .45);
  content: "";
  animation: live-pulse 2.8s ease-out infinite;
}

.public-area .card,
.public-area .table,
.public-area .legal {
  background: var(--surface);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 28px rgba(19, 37, 26, .08);
}

.public-area .card,
.public-area .mobile-game-card,
.public-area .welcome-notice {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .public-area .mobile-game-card-link:hover,
  .public-area .card:hover {
    transform: translateY(-3px);
    border-color: #9bcdaa;
    box-shadow: 0 15px 34px rgba(19, 37, 26, .13);
  }

  .public-area .mobile-game-card-link:hover .mobile-game-title,
  .public-area .table a:hover {
    color: var(--green-dark);
  }
}

.public-area .button,
.public-area button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .public-area .button:hover,
  .public-area button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(17, 85, 41, .18);
  }
}

/* Tailgate-Details nur für die öffentliche Spielübersicht. */
.public-area .desktop-random-game,
.public-area .mobile-random-game {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #19733a 0 52%, #12592e 52% 100%);
}

.public-area .desktop-random-game:active,
.public-area .mobile-random-game:active,
.public-area .tailgate-random.is-drawing {
  transform: translateY(5px) !important;
}

.public-area .welcome-notice {
  border: 2px dashed #d69d26;
  background: linear-gradient(105deg, rgba(255, 248, 218, .96), rgba(233, 248, 235, .94));
}

.public-area .welcome-notice h2::before {
  margin-right: .42rem;
  content: '🏈';
}

.public-area .mobile-game-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #bcdcc3;
  border-left: 4px solid #62aa76;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95) 0 76%, rgba(233, 248, 235, .96) 76% 100%);
  box-shadow: 0 7px 18px rgba(19, 37, 26, .07);
}

.public-area .mobile-game-card dd:last-child {
  color: #17632b;
}

.public-area .mobile-game-card.phase-preseason { border-left-color: #8eb6d8; }
.public-area .mobile-game-card.phase-regular { border-left-color: #62aa76; }
.public-area .mobile-game-card.phase-playoffs { border-left-color: #e0ad47; }
.public-area .mobile-game-card.is-superbowl { border-color: #dbbc72; border-left-color: #d69d26; background: linear-gradient(145deg, #fffdf7 0 76%, #fff4d8 76% 100%); }
.mobile-game-details { align-items: start; }
.mobile-card-phase dd { display: flex; align-items: center; gap: .48rem; }
.mobile-phase-badge { display: inline; font-size: 1em; font-weight: 650; letter-spacing: .025em; }
.mobile-phase-badge.phase-preseason { color: #315f85; }
.mobile-phase-badge.phase-regular { color: #17632b; }
.mobile-phase-badge.phase-playoffs { color: #8a5205; }
.mobile-jets-rule { color: #17632b; font-size: .68rem; font-weight: 850; letter-spacing: .11em; line-height: 1; text-transform: uppercase; animation: jets-rule-pulse 2.4s ease-in-out infinite; }

.public-area .desktop-game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  margin: 1rem 0;
}

.public-area .desktop-game-card {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(15rem, 1.55fr) auto;
  align-items: center;
  min-height: 4.15rem;
  gap: .2rem .9rem;
  padding: .3rem .75rem;
  border: 1px solid #bcdcc3;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95) 0 76%, rgba(233, 248, 235, .96) 76% 100%);
  box-shadow: 0 7px 18px rgba(19, 37, 26, .07);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.desktop-game-meta { display: grid; gap: .1rem; color: #526171; font-size: .77rem; font-weight: 650; }
.desktop-phase-badge { justify-self: start; font-size: .77rem; font-weight: 650; letter-spacing: .025em; }
.desktop-jets-rule { justify-self: start; color: #17632b; font-size: .68rem; font-weight: 850; letter-spacing: .11em; line-height: 1; text-transform: uppercase; animation: jets-rule-pulse 2.4s ease-in-out infinite; }
.desktop-phase-badge.phase-preseason { color: #315f85; }
.desktop-phase-badge.phase-regular { color: #17632b; }
.desktop-phase-badge.phase-playoffs { color: #8a5205; }
.desktop-game-card.phase-preseason { border-left: 4px solid #8eb6d8; }
.desktop-game-card.phase-regular { border-left: 4px solid #62aa76; }
.desktop-game-card.phase-playoffs { border-left: 4px solid #e0ad47; }
.desktop-game-card.is-superbowl { border-color: #dbbc72; border-left-color: #d69d26; background: linear-gradient(145deg, #fffdf7 0 76%, #fff4d8 76% 100%); }
.desktop-game-matchup { font-size: 1.02rem; line-height: 1.3; }
.desktop-game-matchup span { color: var(--green); }
.desktop-game-footer { display: grid; justify-items: end; gap: .12rem; color: #526171; font-size: .78rem; text-align: right; white-space: nowrap; }
.desktop-game-footer b { color: #17632b; }

@media (hover: hover) and (pointer: fine) {
  .public-area .desktop-game-card:hover {
    transform: translateY(-3px);
    border-color: #a95454;
    background: linear-gradient(145deg, #fffdfd 0 76%, #fff1f0 76% 100%);
    box-shadow: 0 12px 24px rgba(122, 45, 45, .16);
  }

  .public-area .mobile-game-card-link:hover {
    transform: translateY(-3px);
    border-color: #a95454;
    border-left-color: #a95454;
    background: linear-gradient(145deg, #fffdfd 0 76%, #fff1f0 76% 100%);
    box-shadow: 0 12px 24px rgba(122, 45, 45, .16);
  }
}

.public-area .desktop-game-card:focus-visible {
  outline: 3px solid #ef9f1b;
  outline-offset: 3px;
}

@media (max-width: 840px) and (min-width: 701px) {
  .public-area .desktop-game-card { grid-template-columns: minmax(0, 1fr) auto; }
  .desktop-game-meta { grid-column: 1; }
  .desktop-game-matchup { grid-column: 1; }
  .desktop-game-footer { grid-column: 2; grid-row: 1 / span 2; }
}

.public-area .desktop-games-table tbody tr {
  transition: background-color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .public-area .desktop-games-table tbody tr:hover {
    transform: scale(1.008);
    background: #f5fff6;
    box-shadow: inset 4px 0 #ef9f1b;
  }
}

.tailgate-card-enter { animation: tailgate-card-enter .42s both; animation-delay: var(--tailgate-delay, 0ms); }

@keyframes stadium-sweep {
  from { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(4%, 3%, 0) rotate(3deg) scale(1.07); }
}

@keyframes live-pulse {
  0%, 35% { box-shadow: 0 0 0 0 rgba(230, 174, 49, .45); }
  65%, 100% { box-shadow: 0 0 0 .46rem rgba(230, 174, 49, 0); }
}

@keyframes tailgate-card-enter {
  from { opacity: 0; transform: translateY(10px) rotate(-.4deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes jets-rule-pulse {
  0%, 100% { opacity: .64; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Die Admin-Karten verwenden dieselbe klare Spielkartenform, bleiben aber nüchtern. */
.admin-area .mobile-game-card {
  position: relative;
  overflow: hidden;
  border: 2px solid #c5e1cb;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff 0 72%, #edfaee 72% 100%);
  box-shadow: 0 8px 20px rgba(19, 37, 26, .08);
}

.admin-area .mobile-game-card .mobile-game-title { padding-right: .4rem; }
.admin-area .mobile-game-card .mobile-game-actions { margin-top: .9rem; }

.pinnchen-counter {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.pinnchen-value { font-weight: 800; }
.pinnchen-counter.pinnchen-complete .pinnchen-value { animation: pinnchen-finish .42s ease-out; }

.pinnchen-confetti { position: absolute; inset: 0; pointer-events: none; }
.pinnchen-confetti i {
  position: absolute;
  top: 42%;
  left: 50%;
  width: .38rem;
  height: .58rem;
  border-radius: .12rem;
  background: #ef9f1b;
  opacity: 0;
  animation: pinnchen-confetti .88s cubic-bezier(.18,.7,.32,1) forwards;
  animation-delay: var(--confetti-delay);
}
.pinnchen-confetti i:nth-child(3n) { background: #19733a; }
.pinnchen-confetti i:nth-child(4n) { background: #d45842; }

@keyframes pinnchen-finish {
  0% { transform: scale(1); }
  45% { transform: scale(1.22) rotate(-2deg); color: #d97706; }
  100% { transform: scale(1); }
}

@keyframes pinnchen-confetti {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), -3.3rem) rotate(300deg); }
}

@media (max-width: 700px) {
  body::before { inset: -45vmax; opacity: .52; filter: blur(12px); animation-duration: 26s; }
  .public-area .card,
  .public-area .table,
  .public-area .legal { backdrop-filter: none; }
  .public-area .brand::after { width: .36rem; height: .36rem; margin-left: .26rem; }
  .public-area .welcome-notice { box-shadow: 0 8px 22px rgba(19, 37, 26, .07); }
  .public-area .mobile-random-game { min-height: 52px; }
  .public-area .mobile-game-card { padding-top: .75rem; }
  .public-area .desktop-game-grid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}