/* Minimal, czysta stylistyka */
:root{
  --bg:#0b0e14;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22d3ee;
  --btn:#2563eb;
  --btn-text:#fff;
  --border:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;background:rgba(11,14,20,.9);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border);z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;font-size:1.15rem;color:#fff}
.nav a{margin-left:16px;color:var(--text)}
.hero {
  padding: 20px 0;
  margin-bottom: 20px; /* niewielki odstęp od gier */
}.hero h1{font-size:2rem;margin:0 0 8px}
.hero p{color:var(--muted);margin:0}
.games{padding:32px 0}
.game-card{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:center;background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px;margin:18px 0}
.game-card h3{margin-top:0}
.game-meta ul{margin:0;padding-left:18px;color:var(--muted)}
.ad{margin:16px auto}
.more-info ul{padding-left:18px}
.site-footer{border-top:1px solid var(--border);padding:20px 0;color:var(--muted)}
.btn{display:inline-block;background:var(--btn);color:var(--btn-text);padding:10px 14px;border-radius:12px;font-weight:600;border:0;cursor:pointer}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-secondary{background:#374151;color:#fff}
.cookie-banner{position:fixed;inset:auto 16px 16px 16px;background:var(--card);border:1px solid var(--border);padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none;max-width:680px}
.cookie-banner .cookie-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.consent-panel{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.consent-panel .panel-content{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px;width:min(600px,92%)}
@media (max-width:720px){.game-card{grid-template-columns:1fr}}

#consent-panel[hidden] {
  display: none !important;
}

.game-card {
  text-align: center;
}

.game-card img.game-image {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  margin-bottom: 8px;
  transition: transform 0.2s;
}

.game-card img.game-image:hover {
  transform: scale(1.05);
}

/* === GRID: zawsze 4 kolumny w jednym wierszu === */
.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolumny */
  gap: 18px;
  align-items: start;
  justify-items: center;
  margin-top: 16px;
  /* jeśli chcesz wymusić, żeby nie łamać wiersza na małych ekranach:
     overflow-x: auto; white-space: nowrap; ale poniżej dodaję responsywność */
}

/* kafelek gry (link) */
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;      /* stała szerokość kafelka */
  flex: 0 0 300px;   /* zapobiega skalowaniu w gridzie */
  background: #111827;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.18s;
}

/* obrazek gry — wymuszone 200x300 */
.game-thumb {
  width: 300px;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* placeholder — nieklikalne puste pole */
.game-placeholder {
  width: 200px;
  flex: 0 0 200px;
  text-align: center;
  color: var(--muted);
  opacity: 0.85;
  pointer-events: none; /* wyłącz klikalność */
}

.placeholder-img {
  width: 200px;
  height: 300px;
  border-radius: 8px;
  border: 2px dashed #2b3440;
  background: repeating-linear-gradient(45deg, #0f1620 0 8px, #0b1117 8px 16px);
  display: inline-block;
  box-sizing: border-box;
}

/* tytuły pod obrazkiem */
.game-title {
  margin-top: 10px;
  padding: 8px 10px;
  width: 100%;
  text-align: center;
  background: #0f1720;
  color: var(--accent);
  font-weight: 700;
  border-top: 1px solid var(--border);
}

/* hover efekt */
.game-tile:hover {
  transform: translateY(-6px);
}

/* RESPONSYWNOŚĆ: przy mniejszych ekranach reduce columns */
@media (max-width: 980px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolumny */
  }
  .game-tile, .game-placeholder { width: 45%; flex: 0 0 45%; }
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr; /* 1 kolumna na najmniejszych ekranach */
  }
  .game-tile, .game-placeholder { width: 100%; flex: 0 0 100%; }
}

.scores {
  margin-top: 2rem;
}

.scores h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #fff;
}

.score-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 8px;
}

#scores-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: #e0e0e0;
}

#scores-table th, 
#scores-table td {
  padding: 10px 14px;
  text-align: left;
}

#scores-table thead {
  background: #222;
  position: sticky;
  top: 0;
  z-index: 1;
}

#scores-table th {
  font-weight: 600;
  color: #ffda79; /* złoty nagłówek */
  border-bottom: 2px solid #444;
}

#scores-table tbody tr:nth-child(even) {
  background: #1b1b1b;
}

#scores-table tbody tr:hover {
  background: #2a2a2a;
}

#scores-table td:first-child {
  font-weight: 600;
}

#scores-table td {
  border-bottom: 1px solid #333;
}
/* === TŁO + SEJF + SPADAJĄCE DOLARY === */

/* globalne tło z banknotami */
/*
body {
  background: url("/assets/img/dollars_bg1.jpg") repeat center center fixed;
  background-size: cover;
  
  overflow-x: hidden;
  
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); 
  z-index: -1;
}


.safe {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  background: url("/assets/img/safe.png") no-repeat center/contain;
  z-index: 20;
}
*/
/* animowane dolary */
.dollar {
  position: fixed;
  top: -50px;
  font-size: 32px;
  animation: fall linear;
  z-index: 10;
  pointer-events: none;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0.7;
  }
}