/*-----------------------------------
  Reset & Grundlayout
-----------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow-x: hidden;
}
body {
  display: flex;
  flex-wrap: nowrap;
  min-height: 100vh;
  background: #111;
  color: #fff;
  font-family: sans-serif;
}

/*-----------------------------------
  Sidebar
-----------------------------------*/
nav.sidebar-left,
nav.sidebar-right {
  background: #222;
  padding: 20px;
}
nav.sidebar-left {
  width: 220px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.6);
  flex-shrink: 0;
}
nav.sidebar-right {
  width: 220px;
  box-shadow: -2px 0 8px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

/* Überschriften in den Gruppen */
.nav-section-link {
  color: #f90;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nav-section-link:hover {
  text-decoration: underline;
}

/* Links */
.nav-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background .2s;
  margin-bottom: 6px;
}
.nav-link .icon {
  margin-right: 8px;
  font-size: 18px;
}
.nav-link:hover,
.nav-link.active {
  background: #333;
}
.nav-link.inactive {
  opacity: .6;
  pointer-events: none;
}

/* Logout */
.logout-link {
  display: block;
  margin-top: auto;
  padding: 10px 0;
  text-align: center;
  background: #b00;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}

/*-----------------------------------
  Hauptbereich
-----------------------------------*/
.content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*-------------------
  Header (Machine)
--------------------*/
.machine {
  width: 100%;
  max-width: 760px;
  margin-bottom: 24px;
  background: #222;
  border: 6px solid #444;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
  text-align: center;
}
.machine h1 {
  font-size: 28px;
  margin-bottom: 8px;
}
.machine .welcome {
  color: #f90;
  font-size: 20px;
  margin-bottom: 12px;
}
.machine .balance {
  display: inline-block;
  background: #333;
  padding: 8px 20px;
  border: 1px solid #555;
  border-radius: 8px;
  font-size: 16px;
}

/*-------------------
  Section-Box
--------------------*/
.section-box {
  display: none;
  width: 100%;
  max-width: 760px;
  margin-bottom: 24px;
  background: #333;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.section-box.active {
  display: block;
}
.section-title {
  color: #f90;
  font-size: 20px;
  margin-bottom: 16px;
}

/*-------------------
  Game-Cards
--------------------*/
.games {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 20px;
}
.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #222;
  border: 4px solid #444;
  border-radius: 16px;
  padding: 24px 16px;
  text-decoration: none;
  color: #fff;
  transition: transform .2s, border-color .2s, background .2s;
}
.game-card:hover {
  transform: translateY(-6px);
  border-color: #f90;
  background: #2a2a2a;
}
.game-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.game-title {
  font-size: 20px;
  margin-bottom: 8px;
}
.jackpot-info {
  color: #f90;
  font-size: 14px;
  animation: pulse-small 1.5s infinite;
}
@keyframes pulse-small {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.05); }
}

/*-------------------
  Kontoauszug
--------------------*/
.statement-table {
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  table-layout: fixed;
}
.statement-table colgroup col:nth-child(1) { width:14%; }
.statement-table colgroup col:nth-child(2) { width:14%; }
.statement-table colgroup col:nth-child(3) { width:14%; }
.statement-table colgroup col:nth-child(4) { width:20%; }
.statement-table colgroup col:nth-child(5) { width:38%; }
.statement-table th,
.statement-table td {
  padding:14px;
  border-bottom:1px solid #444;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.statement-table th {
  background:#222;
  color:#f90;
  font-weight: normal;
}
.statement-table td.plus  { color: #6a6; }
.statement-table td.minus { color: #a66; }
.statement-table .no-rows {
  text-align:center;
  padding:20px;
  font-size:14px;
}
.more a {
  display:inline-block;
  margin-top:12px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
}

/*-------------------
  Online Spieler
--------------------*/
.online-box {
  background:#333;
  border:1px solid #555;
  border-radius:8px;
  padding:12px;
  margin-bottom:24px;
  text-align:center;
}
.online-box h3 {
  color:#f90;
  font-size:16px;
  margin-bottom:8px;
}
.online-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  list-style:none;
  padding:0;
}
.online-list li {
  background:#444;
  padding:6px 12px;
  border-radius:4px;
  font-size:14px;
}

/*-------------------
  Jackpot News
--------------------*/
.jackpot-news {
  background:#333;
  border:1px solid #555;
  border-radius:8px;
  padding:12px;
  margin-bottom:24px;
  font-size:14px;
}
.jackpot-news h2 {
  color:#f90;
  font-size:16px;
  text-align:center;
  margin-bottom:8px;
}
.marquee {
  max-height:240px;
  overflow:hidden;
}
.news-item {
  padding:8px 0;
  border-bottom:1px solid #444;
}
.news-item:last-child {
  border-bottom:none;
}
.news-line {
  display:flex;
  align-items:center;
  font-size:14px;
  font-weight:bold;
}
.news-icon {
  margin-right:8px;
  font-size:18px;
}
.news-detail {
  margin-top:4px;
  font-size:14px;
}

/*-------------------
  Jackpot-Jäger
--------------------*/
.hunter-box {
  background:#333;
  border:1px solid #555;
  border-radius:8px;
  padding:12px;
  overflow-x: auto;
}
.hunter-table {
  display: inline-table;
  border-collapse: collapse;
  table-layout: auto;
  width: auto;
}
.hunter-table th,
.hunter-table td {
  padding:8px;
  border-bottom:1px solid #444;
  font-size:14px;
  white-space: nowrap;
  text-align: center;
}
.hunter-table th {
  color:#f90;
  font-weight:normal;
}
.hunter-table tr:hover {
  background:#2a2a2a;
}

/*-----------------------------------
  Responsive Media Queries
-----------------------------------*/
/* Tablets (<= 1024px) */
@media (max-width: 1024px) {
  nav.sidebar-left,
  nav.sidebar-right {
    width: 200px;
  }
  .machine,
  .section-box {
    padding: 16px;
  }
}
/* Smartphones (<= 600px) */
@media (max-width: 600px) {
  body {
    flex-wrap: wrap;
  }
  nav.sidebar-left,
  nav.sidebar-right {
    width: 100%;
    order: 2;
  }
  .content {
    order: 1;
    width: 100%;
    padding: 10px;
  }
  .machine,
  .section-box {
    max-width: 100%;
    margin-bottom: 16px;
    border-radius: 6px;
    padding: 12px;
  }
  .games {
    grid-template-columns: 1fr;
  }
  .nav-link {
    padding: 10px;
  }
}

/*-----------------------------------
  CONTENT-SHRINK FÜR SPIELE
  skaliert *nur* die Spiel-Box
-----------------------------------*/
@media (max-width: 1366px), (max-height: 800px) {
  /* Ziel: nur die zweite Section-Box (das Spiel) */
  .content > .section-box.active + .section-box.active {
    transform: scale(0.9);
    transform-origin: top center;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  .content > .section-box.active + .section-box.active {
    transform: scale(0.85);
  }
}

/*-----------------------------------
  LOW‐RES GAME & HEADER SHRINK
  gilt nur bei <=1366×800 bzw. <=1200×700
-----------------------------------*/
@media (max-width: 1366px), (max-height: 800px) {
  /* Header flacher machen */
  .content > .section-box.active:first-child {
    padding: 16px 12px;
    margin-bottom: 12px;
  }
  .content > .section-box.active:first-child .machine {
    padding: 16px 12px;
  }
  .content > .section-box.active:first-child .machine h1 {
    font-size: 1.4rem;
  }
  .content > .section-box.active:first-child .machine .welcome {
    font-size: 1.1rem;
  }
  /* Alle Game‐Boxen (zweites .section-box.active und weitere) schrumpfen */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.9);
    transform-origin: top center;
    margin-top: -8px;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  /* Header noch flacher */
  .content > .section-box.active:first-child {
    padding: 12px 8px;
    margin-bottom: 10px;
  }
  .content > .section-box.active:first-child .machine {
    padding: 12px 8px;
  }
  .content > .section-box.active:first-child .machine h1 {
    font-size: 1.2rem;
  }
  .content > .section-box.active:first-child .machine .welcome {
    font-size: 1rem;
  }
  /* Game‐Boxen stärker schrumpfen */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.85);
    margin-top: -12px;
  }
}

/*--------------------------------------------------
  EXTENDED LOW-RES SHRINK
  stärkeres Skalieren bei <1366×780, <1200×700, <1024×600
--------------------------------------------------*/

/* 1366×780 oder schmaler / ≤800px hoch */
@media (max-width: 1366px), (max-height: 780px) {
  /* Header kompakt halten */
  .content > .section-box.active:first-child {
    transform: scale(0.9);
    transform-origin: top center;
    margin-bottom: 12px;
  }
  /* alle Spiel-Boxen schrumpfen */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.8);
    transform-origin: top center;
    margin-top: -16px;
  }
  /* Karten-Container etwas enger */
  .cards {
    gap: 8px;
    max-height: calc(100vh - 300px);
  }
}

/* 1200×700 oder schmaler / ≤700px hoch */
@media (max-width: 1200px), (max-height: 700px) {
  .content > .section-box.active:first-child {
    transform: scale(0.85);
    margin-bottom: 10px;
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.75);
    margin-top: -20px;
  }
  .cards {
    gap: 6px;
    max-height: calc(100vh - 280px);
  }
}

/* 1024×600 oder schmaler / ≤600px hoch */
@media (max-width: 1024px), (max-height: 600px) {
  .content > .section-box.active:first-child {
    transform: scale(0.8);
    margin-bottom: 8px;
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.7);
    margin-top: -24px;
  }
  .cards {
    gap: 4px;
    max-height: calc(100vh - 260px);
  }
}

/*--------------------------------------------------
  SUPER-SHRINK für extrem niedrige Auflösungen
  (nur Content-Boxen, Sidebars bleiben 1:1)
--------------------------------------------------*/

/* 1366×780 oder niedriger */
@media (max-width: 1366px), (max-height: 780px) {
  /* Header auf 85% skalieren */
  .content > .section-box.active:first-child {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: 10px;
  }
  /* Spiele auf 75% skalieren */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: -20px;
  }
}

/* 1200×700 oder niedriger */
@media (max-width: 1200px), (max-height: 700px) {
  .content > .section-box.active:first-child {
    transform: scale(0.8);
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.7);
    margin-top: -24px;
  }
}

/* 1024×600 oder niedriger */
@media (max-width: 1024px), (max-height: 600px) {
  .content > .section-box.active:first-child {
    transform: scale(0.75);
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.65);
    margin-top: -28px;
  }
}

/*--------------------------------------------------
  ULTRA-SHRINK für wirklich niedrige Auflösungen
  bleibt auf Content beschränkt, Sidebars unverändert
--------------------------------------------------*/
/* 1366×780 oder kleiner */
@media (max-width: 1366px), (max-height: 780px) {
  /* Header auf 80% */
  .content > .section-box.active:first-child {
    transform: scale(0.8);
    transform-origin: top center;
    margin-bottom: 8px;
  }
  /* Alle Game-Boxen auf 70% */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.7);
    transform-origin: top center;
    margin-top: -24px;
  }
  /* Karten-Grid enger machen */
  .cards {
    gap: 6px;
    max-height: calc(100vh - 260px);
  }
}

/* 1200×700 oder kleiner */
@media (max-width: 1200px), (max-height: 700px) {
  /* Header auf 75% */
  .content > .section-box.active:first-child {
    transform: scale(0.75);
  }
  /* Spiele auf 65% */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.65);
    margin-top: -28px;
  }
  .cards {
    gap: 4px;
    max-height: calc(100vh - 240px);
  }
}

/* 1024×600 oder kleiner */
@media (max-width: 1024px), (max-height: 600px) {
  /* Header auf 70% */
  .content > .section-box.active:first-child {
    transform: scale(0.7);
  }
  /* Spiele auf 60% */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.6);
    margin-top: -32px;
  }
  .cards {
    gap: 2px;
    max-height: calc(100vh - 220px);
  }
}

/*--------------------------------------------------
  ULTRA-PLUS-SHRINK ADJUSTED: etwas größer & schärfer
  gilt nur bei <=1366×780, <=1200×700, <=1024×600
--------------------------------------------------*/

/* 1366×780 oder niedriger */
@media (max-width: 1366px), (max-height: 780px) {
  /* Header auf 90% */
  .content > .section-box.active:first-child {
    transform: scale(0.9) !important;
    transform-origin: top center;
    margin-bottom: 10px !important;
  }
  /* Spiele-Boxen auf 80% */
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.8) !important;
    transform-origin: top center;
    margin-top: -20px !important;
  }
  /* Kartenraster etwas lockerer */
  .cards {
    gap: 10px !important;
    max-height: calc(100vh - 280px) !important;
  }
}

/* 1200×700 oder niedriger */
@media (max-width: 1200px), (max-height: 700px) {
  .content > .section-box.active:first-child {
    transform: scale(0.85) !important;
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.75) !important;
    margin-top: -24px !important;
  }
  .cards {
    gap: 8px !important;
    max-height: calc(100vh - 260px) !important;
  }
}

/* 1024×600 oder niedriger */
@media (max-width: 1024px), (max-height: 600px) {
  .content > .section-box.active:first-child {
    transform: scale(0.8) !important;
  }
  .content > .section-box.active:not(:first-child) {
    transform: scale(0.7) !important;
    margin-top: -28px !important;
  }
  .cards {
    gap: 6px !important;
    max-height: calc(100vh - 240px) !important;
  }
}

/*--------------------------------------------------
  SCHÄRFERE SCHRIFT IN ALLEN BOXEN
--------------------------------------------------*/
.section-box,
.machine {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*--------------------------------------------------
  BLACKJACK: nur noch EIN äußerer Rahmen statt drei
--------------------------------------------------*/
.content > .section-box.active .machine {
  /* .section-box behält seinen Rahmen, die .machine-Box wird durchsichtig */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Abstand und Layout im verbliebenen Rahmen justieren */
.content > .section-box.active .status {
  margin: 12px 0 !important;
}
.content > .section-box.active h2 {
  margin: 8px 0 !important;
}
.content > .section-box.active .cards {
  margin: 8px 0 !important;
}

/* damit der Innenteil schön luftig bleibt */
.content > .section-box.active {
  padding: 16px !important;
}

/*--------------------------------------------------
  BLACKJACK: inneren Kasten entfernen, Status umranden
--------------------------------------------------*/
/* 1) Maschine-Box im Blackjack unsichtbar machen */
.content > .section-box.active .machine {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important; 
}

/* 2) Dünner Rahmen um Einsatz/Gewinn (.status) */
.content > .section-box.active .status {
  background: #333;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Optional: Schrift und Icon ein wenig anpassen */
.content > .section-box.active .status p {
  margin: 0;
  font-size: 1rem;
}

/*--------------------------------------------------
  BLACKJACK: nur EIN äußerer Rahmen,
  inneren .section-box und .machine  
  komplett ausblenden, dünner Kasten um .status
--------------------------------------------------*/

/* 1) Alles verschachtelte .section-box innerhalb der
      Haupt-.section-box verstecken */
.content > .section-box.active .section-box {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Auch alle .machine-Boxen innerhalb der aktiven
      .section-box komplett entfernen */
.content > .section-box.active .machine {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

/* 3) Dünner Rahmen nur um Einsatz/Gewinn (.status) */
.content > .section-box.active .status {
  background: #333;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 12px 0 16px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 4) Kleines Feintuning für Überschrift und Karten */
.content > .section-box.active h2 {
  margin: 8px 0 !important;
}
.content > .section-box.active .cards {
  margin: 8px 0 !important;
}

/*-----------------------------------
  SINGLE PAGE – EINHEITS-HÖHE FÜR ALLE SPIEL-KARTEN
-----------------------------------*/
.section-box.active .games {
  /* Grid-Items in der Höhe ausdehnen */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.section-box.active .game-card {
  /* Karte über die volle Zeilen-Höhe strecken */
  height: 100%;
  /* Inhalte vertikal verteilen, damit Jackpot-Info unten bleibt */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*--------------------------------------------------
  SINGLE: alle Game-Cards gleich groß & Text oben
--------------------------------------------------*/
.section-box.active .games {
  display: grid !important;
  /* genau drei Spalten gleicher Breite */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: stretch;        /* gleiche Höhe */
}

/* Basis-Styling für jede Karte */
.section-box.active .game-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Text oben beginnen */
  align-items: center;
  padding: 24px 16px;          /* etwas mehr Innenabstand */
  min-height: 260px;           /* gleiche Mindesthöhe */
  text-decoration: none;
  background: #222;            /* gleiche Card-Hintergründe */
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  transition: transform .2s;
}
.section-box.active .game-card:hover {
  transform: scale(1.02);
}

/* Icon oben ein wenig größer */
.section-box.active .game-card .game-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Titel direkt unter dem Icon */
.section-box.active .game-card .game-title {
  font-size: 1.2rem;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Jackpot-Info bleibt unten */
.section-box.active .game-card .jackpot-info {
  margin-top: auto;
  font-size: 0.9rem;
}

/* Falls Blackjack keine .jackpot-info hat, erzwinge den Platz unten */
.section-box.active .game-card:nth-child(3)::after {
  content: '';
  display: block;
  margin-top: auto;
}

/*-----------------------------------
  SINGLE: gleiche Breiten, automatische Höhe
-----------------------------------*/
.section-box.active .games {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  /* alte grid-auto-rows entfernen, damit Höhe nicht erzwungen wird */
  grid-auto-rows: auto !important;
  align-items: start; /* sorgt dafür, dass Karten oben anfangen */
}

.section-box.active .game-card {
  /* nicht mehr full-height, sondern nur so hoch wie Inhalt */
  height: auto !important;
  min-height: 0 !important;
  /* Breite folgt automatisch den 1fr-Spalten */
  width: 100% !important;
  /* optional: etwas weniger Padding, damit sie nicht zu hoch werden */
  padding: 16px 12px !important;
}

/*-----------------------------------
  SINGLE: Blackjack auf Höhe von Slot & Wheel bringen
-----------------------------------*/
.section-box.active .games {
  /* Drei gleich breite Spalten, alle Zeilen gleich hoch */
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}

.section-box.active .game-card {
  /* volle Höhe der Grid-Zeile nutzen */
  height: 100% !important;
}

.game-card .game-icon {
  /* Icon-Container zentrieren */
  text-align: center;
  margin-bottom: 6px;
}
.game-card .game-icon img {
  display: inline-block;
  vertical-align: middle;
}

/* Reveal-Panel zentrieren */
.reveal-panel {
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal zentrieren */
  justify-content: center;  /* vertikal zentrieren innerhalb des Panels */
  margin: 24px auto;
  text-align: center;       /* für die draw-text */
}

/* Lottie-Player als Blockelement mit automatischem Margin */
.reveal-panel lottie-player {
  display: block;
  margin: 0 auto;
}

/* Text darunter auch zentrieren */
.draw-text {
  margin-top: 8px;
  width: 100%;
  text-align: center;
}