/* =================================================================
   QUIZARENA — portal quizów, layout sidebar + main
   Mobile first. Skaluje się od 320px do 4K.
   ================================================================= */

:root {
  --bg-0: #050b1e;
  --bg-1: #0a1f44;
  --bg-2: #112d63;
  --bg-side: #08152e;
  --bg-card: rgba(15, 35, 80, 0.85);
  --bg-card-solid: #102655;
  --bg-hover: rgba(255, 255, 255, 0.06);

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text: #f4f7ff;
  --muted: #a8b4d4;
  --dim: #7282a8;

  --gold: #ffce3a;
  --gold-2: #ffb02e;
  --green: #2ecc71;
  --red: #e74c3c;
  --orange: #ff9f43;
  --blue: #3498db;
  --purple: #9b59b6;

  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* Fluid typography */
  --fs-xs: clamp(0.72rem, 1.5vw, 0.82rem);
  --fs-sm: clamp(0.85rem, 1.8vw, 0.95rem);
  --fs-base: clamp(0.95rem, 2vw, 1.05rem);
  --fs-md: clamp(1.05rem, 2.4vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 3vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 4vw, 2.2rem);
  --fs-xxl: clamp(2rem, 5vw, 3rem);

  --sidebar-w: 280px;

  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bot: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base); line-height: 1.5;
  overscroll-behavior: none;
  overflow-x: hidden;
  touch-action: manipulation;     /* blokuje double-tap zoom; pinch wyłączony przez viewport */
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg-0);
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100svh;
  height: 100dvh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

/* ============ BUTTONS ============ */
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; user-select: none; touch-action: manipulation; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #2a1500;
  font-weight: 700; font-size: var(--fs-md);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(255, 176, 46, 0.35);
  transition: transform .12s, filter .12s, box-shadow .12s;
  min-height: 46px;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px) scale(.99); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 500;
  min-height: 42px;
  transition: background .12s, border-color .12s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--border-strong); }

.btn-link {
  background: none; color: var(--gold);
  text-decoration: underline; padding: 0; font: inherit;
}

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--red) 0%, #c0392b 100%);
  color: #fff;
  font-weight: 700; font-size: var(--fs-md);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.35);
  transition: transform .12s, filter .12s;
  min-height: 46px;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { transform: translateY(1px) scale(.99); }

.end-quiz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: var(--radius);
  color: #ff7d6f;
  font-size: var(--fs-sm); font-weight: 600;
  min-height: 40px;
  transition: background .15s, border-color .15s, color .15s;
}
.end-quiz-btn:hover {
  background: rgba(231, 76, 60, 0.30);
  border-color: var(--red);
  color: #fff;
}
.end-quiz-btn .end-quiz-icon { font-weight: 800; }
@media (max-width: 480px) {
  .end-quiz-btn .end-quiz-text { display: none; }
  .end-quiz-btn { padding: 9px 12px; }
}

.confirm-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.icon-btn { width: 44px; min-width: 44px; padding: 0; font-size: 1.3rem; }

/* ============ MOBILE TOPBAR ============ */
.mobile-topbar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  align-items: center; justify-content: space-between;
  gap: 8px;
  padding: calc(var(--sa-top) + 8px) 12px 8px;
  background: rgba(8, 21, 46, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand-mini { display: flex; align-items: center; gap: 8px; font-weight: 700; }

/* ============ SIDEBAR ============ */
.sidebar {
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  height: 100dvh;
  position: sticky; top: 0;
  overflow: hidden; /* sidebar sam się nie scrolluje — kompaktowo */
  -webkit-overflow-scrolling: touch;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 10px calc(var(--sa-bot) + 10px);
  gap: 8px;
}

.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0;
  flex-shrink: 0;
}
.brand-name {
  font-size: 0.98rem; font-weight: 800;
  background: linear-gradient(135deg, var(--gold) 0%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-size: 0.72rem; color: var(--muted); margin-top: -2px; }

.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #2a1500; font-weight: 800; font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(255, 176, 46, 0.35);
  flex-shrink: 0;
}
.logo-mark.sm { width: 32px; height: 32px; font-size: .85rem; border-radius: 9px; }
/* znak marki jako obrazek (mesh-mózg) — bez złotego tła */
img.logo-mark { background: none; box-shadow: none; border-radius: 0; width: 42px; height: 42px; object-fit: contain; padding: 0; }
img.logo-mark.sm { width: 32px; height: 32px; }

.search-box {
  position: relative;
  display: flex; align-items: center;
}
.search-box .search-icon {
  position: absolute; left: 12px;
  font-size: 0.95rem; pointer-events: none; opacity: .8;
}
.search-box { flex-shrink: 0; }
.search-box input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 0.8rem;
  min-height: 30px;
  transition: border-color .15s, background .15s;
}
.search-box .search-icon { left: 10px; font-size: 0.85rem; }
.search-box input::placeholder { color: var(--dim); }
.search-box input:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.4); }

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
/* główny nav = przewijalny środek; logowanie + regulamin przypięte na dole */
.sidebar-inner > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar-inner > .nav::-webkit-scrollbar { width: 4px; }
.sidebar-inner > .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.78rem; font-weight: 500;
  text-align: left;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(255, 206, 58, 0.18), rgba(255, 206, 58, 0.04));
  color: var(--gold);
  font-weight: 600;
}
/* Top-level pozycje (Strona główna, Rankingi…) w stylu nagłówków grup */
.sidebar-inner > .nav > .nav-item {
  padding: 9px 10px; margin-top: 4px; border-radius: 8px; gap: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px;
}
.sidebar-inner > .nav > .nav-item:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.sidebar-inner > .nav > .nav-item.active {
  background: linear-gradient(135deg, rgba(255, 206, 58, 0.22), rgba(255, 206, 58, 0.06));
  color: var(--gold);
}
.sidebar-inner > .nav > .nav-item .nav-icon { width: auto; height: auto; font-size: 1.05rem; }
.nav-item .nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.nav-item .nav-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 10px;
}

.nav-section {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; /* zajmuje pozostałe miejsce */
  min-height: 0;
  overflow-y: auto; /* tylko ta sekcja scrolluje gdy kategorie rozwinięte */
}
.nav-section::-webkit-scrollbar { width: 4px; }
.nav-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
.nav-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--dim);
  font-weight: 700;
  padding: 0 10px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Rozwijane grupy gier w sidebarze (akordeon, układ drzewa) */
.nav-group { display: flex; flex-direction: column; }
.nav-group-title {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-top: 4px; cursor: pointer; border: none; border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px;
  transition: background .15s;
}
.nav-group-title:hover { background: rgba(255, 255, 255, 0.09); }
.nav-group-title .nav-icon { font-size: 1.05rem; }
.nav-group-title .nav-caret { margin-left: auto; font-size: 0.75rem; color: var(--muted); transition: transform .15s; }
.nav-group.collapsed .nav-group-title .nav-caret { transform: rotate(-90deg); }
/* drzewo: wcięcie + pionowa gałąź; pozycje zaczynają się pod nazwą grupy */
.nav-group-items {
  display: flex; flex-direction: column;
  margin: 2px 0 4px 18px; padding-left: 12px;
  border-left: 2px solid var(--border);
}
.nav-group.collapsed .nav-group-items { display: none; }
.nav-subtitle {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--dim); font-weight: 700; padding: 8px 10px 2px; opacity: .85;
}

.sidebar-premium {
  margin-top: 4px;
  flex-shrink: 0;
}
.sidebar-premium-card {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
  padding: 7px 10px;
  background: linear-gradient(135deg, rgba(255,206,58,.10), rgba(255,206,58,.03));
  border: 1px solid rgba(255,206,58,.30);
  border-radius: 8px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sidebar-premium-card:hover {
  background: linear-gradient(135deg, rgba(255,206,58,.20), rgba(255,206,58,.05));
  border-color: rgba(255,206,58,.5);
}
.sidebar-premium-card.active {
  background: linear-gradient(135deg, rgba(46,204,113,.15), rgba(255,206,58,.06));
  border-color: rgba(46,204,113,.4);
}
.sidebar-premium-card .sp-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem;
}
.sidebar-premium-card .sp-line strong { color: var(--gold); }
.sidebar-premium-card.active .sp-line strong { color: var(--green); }
.sidebar-premium-card .sp-sub {
  font-size: 0.68rem;
  color: var(--muted);
}

.sidebar-footer {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.auth-user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  cursor: pointer; border-radius: 10px;
  transition: background .15s;
}
.auth-user:hover { background: rgba(255, 255, 255, 0.05); }
.auth-caret { margin-left: auto; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
.auth-user[aria-expanded="true"] .auth-caret { transform: rotate(180deg); }

/* Rozwijane menu konta (otwiera się ku górze) */
.auth-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
.auth-menu.hidden { display: none; }
.auth-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border: none; background: transparent;
  color: var(--text); font-weight: 600; font-size: 0.92rem; cursor: pointer;
  border-radius: 8px; text-align: left;
}
.auth-menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.auth-menu-item svg { flex-shrink: 0; color: var(--muted); }
.auth-menu-item .auth-icon-badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 0.7rem; min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.auth-menu-logout { color: var(--red); }
.auth-user .auth-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.auth-user .auth-meta { flex: 1; min-width: 0; }
.auth-user .auth-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-user .auth-best {
  font-size: 0.72rem;
  color: var(--muted);
}
.auth-icons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.auth-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.auth-icon-btn svg { display: block; }
.auth-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-strong);
  color: #fff;
}
.auth-icon-btn:active { transform: scale(.94); }
.auth-icon-btn { position: relative; }
.auth-icon-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  border: 1.5px solid var(--bg-side);
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.5);
}
.auth-icon-badge.hidden { display: none; }
.auth-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.auth-logout-btn:hover {
  background: rgba(231, 76, 60, 0.18);
  border-color: rgba(231, 76, 60, 0.5);
  color: #ff7d6f;
}

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

/* Przycisk zamknięcia menu — tylko mobile */
.sidebar-close-btn { display: none; }
@media (max-width: 900px) {
  .sidebar-close-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-strong);
    color: var(--text); font-size: 1.05rem; cursor: pointer;
  }
  .sidebar-close-btn:active { transform: scale(.94); }
}

/* ============ MAIN ============ */
.main {
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at top, rgba(60, 100, 200, 0.30), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255, 180, 60, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

.view {
  display: none;
  flex: 1;
  min-height: 0;
  padding: 24px calc(var(--sa-r) + 22px) calc(var(--sa-bot) + 22px) calc(var(--sa-l) + 22px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view.active { display: block; }
/* tylko gry wypełniają wysokość (flex), reszta to normalnie przewijalny blok */
#view-mw.active, #view-quick.active, #view-piecliter.active,
#view-wykreslanka.active, #view-quickmatch.active,
#view-blitz.active, #view-survival.active,
#view-g2048.active, #view-memory.active, #view-szubienica.active, #view-sudoku.active,
#view-pm.active, #view-kal.active {
  display: flex; flex-direction: column;
}

/* Gry — statycznie, bez scrolla, dopasowane do wysokości ekranu */
#view-mw, #view-blitz, #view-survival, #view-quick,
#view-piecliter, #view-wykreslanka, #view-quickmatch,
#view-g2048, #view-memory, #view-szubienica, #view-sudoku, #view-pm, #view-kal {
  overflow: hidden;
}

/* ============ HOME VIEW ============ */
.hero {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 28px;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 206, 58, 0.18), transparent 50%);
  pointer-events: none;
}
.hero-text h1 {
  margin: 0 0 6px;
  font-size: var(--fs-xxl);
  font-weight: 800;
}
.hero-text .accent {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.hero-cta { width: auto; padding: 14px 22px; position: relative; z-index: 1; }

.section { margin-bottom: 28px; }
.section h2 {
  margin: 0 0 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.quiz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) {
  .quiz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .quiz-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1500px) {
  .quiz-grid { grid-template-columns: repeat(4, 1fr); }
}

.quiz-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform .18s ease, border-color .15s, box-shadow .18s;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.quiz-card::after {
  content: "→";
  position: absolute;
  top: 18px; right: 20px;
  font-size: 1.2rem;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s, color .2s;
}
.quiz-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.quiz-card:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--gold);
}
.quiz-card.featured,
.quiz-card.all-card {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  background: linear-gradient(135deg, rgba(255, 206, 58, 0.12) 0%, var(--bg-card) 60%);
  border-color: rgba(255, 206, 58, 0.40);
  min-height: 140px;
}
.quiz-card.featured .quiz-emoji,
.quiz-card.all-card .quiz-emoji {
  font-size: 4rem;
  flex-shrink: 0;
}

/* ============ FEATURED ROW (Polecane) ============ */
.featured-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.home-popular-grid { margin-top: 10px; }
.popular-subtitle {
  margin: 18px 0 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
@media (min-width: 760px) {
  .featured-row { grid-template-columns: 1fr 1fr; }
}
.feature-card {
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, rgba(255, 206, 58, 0.12) 0%, var(--bg-card) 60%);
  border-color: rgba(255, 206, 58, 0.40);
  min-height: 160px;
}
.feature-card .quiz-emoji {
  font-size: 3.4rem;
  width: 80px; height: 80px;
  background: rgba(255, 206, 58, 0.10);
  border-color: rgba(255, 206, 58, 0.35);
  flex-shrink: 0;
}
@media (max-width: 559px) {
  .feature-card { flex-direction: column !important; align-items: flex-start; }
}
.quiz-emoji {
  font-size: 2.6rem;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.quiz-card.all-card .quiz-emoji,
.quiz-card.featured .quiz-emoji {
  width: auto; height: auto;
  background: transparent; border: 0;
}
.quiz-content { flex: 1; min-width: 0; }
.quiz-card h3 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.25;
}
.quiz-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.quiz-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}

@media (max-width: 559px) {
  .quiz-card.featured,
  .quiz-card.all-card {
    flex-direction: column;
    align-items: flex-start;
  }
}
.tag {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border: 1px solid var(--border);
}
.quiz-card .quiz-stripe {
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
}

/* ============ GAME TOPBAR (Mistrz Wiedzy / Quick) ============ */
.game-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: clamp(8px, 1.4svh, 12px) 14px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  margin-bottom: clamp(8px, 1.6svh, 14px);
  flex-shrink: 0;
}
.prize-now { flex: 1; text-align: center; }
.prize-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.prize-value {
  display: block;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--gold);
}

/* ============ MISTRZ WIEDZY ============ */
#view-mw { padding: 18px calc(var(--sa-r) + 18px) calc(var(--sa-bot) + 18px) calc(var(--sa-l) + 18px); }

.game-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 14px;
}

.play-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== LIFELINES ===== */
.lifelines {
  display: flex; gap: clamp(8px, 2vw, 10px); justify-content: center;
  margin-bottom: clamp(8px, 1.6svh, 14px);
}
.lifeline {
  display: flex; align-items: center; justify-content: center;
  width: clamp(40px, 6.2svh, 64px);
  height: clamp(40px, 6.2svh, 64px);
  background: linear-gradient(135deg, #1f3a78 0%, #2a4d9c 100%);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  font-size: clamp(0.62rem, 1.7svh, 0.9rem);
  font-weight: 700;
  color: var(--gold);
  box-shadow: var(--shadow-md);
  transition: transform .15s, filter .15s;
}
.lifeline:hover { filter: brightness(1.15); }
.lifeline:active:not(:disabled) { transform: scale(.92); }
.lifeline:disabled {
  opacity: .35;
  filter: grayscale(.8);
  cursor: not-allowed;
  position: relative;
}
.lifeline:disabled::after {
  content: "✕";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--red); font-weight: 700;
}

/* ===== QUESTION CARD ===== */
.question-card {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-card-solid) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: clamp(12px, 2.2svh, 22px);
  margin-bottom: clamp(8px, 1.6svh, 14px);
  box-shadow: var(--shadow-md);
}
/* W grach karta pytania wypełnia dostępną wysokość i scrolluje TYLKO swoją treść
   (gdy pytanie bardzo długie), żeby odpowiedzi zawsze były widoczne bez scrolla strony. */
#view-mw .question-card, #view-blitz .question-card,
#view-survival .question-card, #view-quick .question-card {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
.q-number {
  font-size: var(--fs-xs);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: clamp(4px, 1svh, 8px);
}
.q-text {
  font-size: clamp(0.95rem, 2.3svh, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
}

/* ===== ANSWERS ===== */
.answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6px, 1.2svh, 8px);
  margin-bottom: clamp(8px, 1.6svh, 14px);
}
.answer {
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 12px);
  width: 100%;
  padding: clamp(8px, 1.5svh, 12px) 14px;
  background: linear-gradient(135deg, #122b5e 0%, #1a3a7a 100%);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: clamp(0.85rem, 1.9svh, 1rem); font-weight: 500;
  text-align: left;
  min-height: 54px;
  transition: background .15s, border-color .15s, transform .1s;
}
.answer:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a3a7a 0%, #234b9a 100%);
  border-color: var(--gold);
}
.answer:active:not(:disabled) { transform: scale(.98); }
.answer:disabled { opacity: .5; cursor: not-allowed; }

.answer .letter {
  display: flex; align-items: center; justify-content: center;
  width: clamp(26px, 4.4svh, 32px); height: clamp(26px, 4.4svh, 32px);
  background: var(--gold); color: #2a1500;
  border-radius: 50%;
  font-weight: 800; flex-shrink: 0;
}
.answer .atext { flex: 1; line-height: 1.3; }

.answer.selected {
  background: linear-gradient(135deg, var(--orange) 0%, #ff7f00 100%);
  border-color: var(--gold);
  animation: pulse 1s infinite;
}
.answer.correct {
  background: linear-gradient(135deg, #1a7a3f 0%, var(--green) 100%);
  border-color: #fff;
  animation: none;
}
.answer.wrong {
  background: linear-gradient(135deg, #7a1a1a 0%, var(--red) 100%);
  border-color: #fff;
  animation: none;
}
.answer.eliminated { visibility: hidden; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 206, 58, 0.6); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 206, 58, 0); }
}

.game-controls { margin-top: auto; padding-top: 10px; flex-shrink: 0; }
.answers, .lifelines { flex-shrink: 0; }

/* ===== LADDER ===== */
.ladder {
  width: 200px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px;
  overflow-y: auto;
  flex-shrink: 0;
}
.ladder ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column-reverse;
  gap: 3px;
}
.ladder li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
}
.ladder li.guaranteed { color: #fff; }
.ladder li.guaranteed .l-num { background: rgba(255, 255, 255, 0.15); }
.ladder li.current {
  background: linear-gradient(90deg, rgba(255, 206, 58, 0.3), rgba(255, 206, 58, 0.05));
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 7px;
}
.ladder li.won { color: var(--green); }
.ladder .l-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: .7rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============ RANKINGI ============ */
.rk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 10px;
  margin-bottom: 18px;
}
.rk-tab {
  flex: 1; min-width: 110px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
}
.rk-tab:hover { color: var(--text); }
.rk-tab.active {
  background: rgba(255, 206, 58, 0.18);
  color: var(--gold);
}
.rankings-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 720px;
}
.rk-row {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rk-row.place-1 {
  background: linear-gradient(135deg, rgba(255,206,58,.18), rgba(0,0,0,.3));
  border-color: rgba(255,206,58,.4);
}
.rk-row.place-2 { border-color: rgba(192,192,192,.4); }
.rk-row.place-3 { border-color: rgba(205,127,50,.4); }
.rk-row .rk-place {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.rk-row.place-1 .rk-place, .rk-row.place-2 .rk-place, .rk-row.place-3 .rk-place { font-size: 1.7rem; }
.rk-row .rk-name {
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-row .rk-val {
  font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.rk-row .rk-sub {
  font-size: 0.72rem; color: var(--muted);
  grid-column: 4;
}

/* ============ DAILY STATUS CARD ============ */
.daily-status {
  background: linear-gradient(135deg, rgba(255,206,58,.12), rgba(255,206,58,.04));
  border: 1px solid rgba(255,206,58,.30);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.daily-status .ds-streak {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem;
}
.daily-status .ds-streak strong { color: var(--gold); font-size: 1.4rem; font-weight: 800; }
.daily-status .ds-fire { font-size: 1.8rem; }
.daily-status .ds-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 0.82rem; color: var(--muted);
}
.daily-status .ds-meta strong { color: var(--text); }
.daily-status .ds-reward {
  font-size: 0.85rem;
  padding: 6px 10px;
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.35);
  border-radius: 8px;
  color: var(--green);
  text-align: center;
  font-weight: 600;
}
.daily-status .ds-played {
  padding: 12px;
  background: rgba(46,204,113,.18);
  border: 1px solid rgba(46,204,113,.4);
  border-radius: 10px;
  text-align: center;
}
.daily-status .ds-played-title { font-weight: 800; color: var(--green); margin-bottom: 4px; }
.daily-status .ds-played-sub { font-size: 0.82rem; color: var(--muted); }
.daily-status .ds-risk {
  font-size: 0.82rem;
  color: #ff7d6f;
  font-weight: 600;
  padding: 6px 10px;
  background: rgba(231,76,60,.12);
  border: 1px solid rgba(231,76,60,.3);
  border-radius: 8px;
  text-align: center;
}

#daily-nav-badge {
  background: var(--red);
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 0.65rem;
}

/* ============ LEVEL BUTTONS (intro / multi) ============ */
.intro-levels {
  text-align: left;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.intro-levels .rules-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.intro-level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.level-btn {
  padding: 14px 10px;
  border-radius: 10px;
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}
.level-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.level-btn.level-easy { border-color: rgba(46, 204, 113, 0.5); }
.level-btn.level-easy:hover { background: rgba(46, 204, 113, 0.18); }
.level-btn.level-medium { border-color: rgba(255, 206, 58, 0.5); }
.level-btn.level-medium:hover { background: rgba(255, 206, 58, 0.18); }
.level-btn.level-hard { border-color: rgba(231, 76, 60, 0.5); }
.level-btn.level-hard:hover { background: rgba(231, 76, 60, 0.18); }
@media (max-width: 480px) {
  .intro-level-grid { grid-template-columns: 1fr; }
}

/* Multiplayer modal: difficulty toggle */
.difficulty-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.diff-opt {
  position: relative;
  cursor: pointer;
  padding: 10px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.diff-opt input { position: absolute; opacity: 0; }
.diff-opt:has(input:checked) {
  border-color: var(--gold);
  background: rgba(255, 206, 58, 0.12);
  color: var(--gold);
}

/* ============ GAME INTRO SCREEN ============ */
.game-intro {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.5svh, 18px) 20px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(6px, 1.2svh, 12px);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.game-intro.hidden { display: none; }
.game-intro .intro-actions { flex-shrink: 0; }
.game-intro .intro-emoji {
  font-size: clamp(1.8rem, 5svh, 3.4rem);
  line-height: 1;
}
.game-intro h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
}
.game-intro .intro-sub {
  margin: -8px 0 4px;
  color: var(--muted);
  font-size: var(--fs-md);
}
.game-intro .intro-rules {
  text-align: left;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: clamp(8px, 1.4svh, 14px) 16px;
}
.game-intro .intro-rules .rules-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-intro .intro-rules ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.7svh, 0.92rem);
}
.game-intro .intro-rules li { margin-bottom: 2px; line-height: 1.4; }
.game-intro .intro-rules li strong { color: var(--text); }

.game-intro .intro-best {
  background: rgba(255, 206, 58, 0.12);
  border: 1px solid rgba(255, 206, 58, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.game-intro .intro-best .ib-label {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.game-intro .intro-best .ib-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
}

.game-intro .intro-top {
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(8px, 1.4svh, 14px) 16px;
}
.game-intro .intro-top .rules-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-intro .intro-top-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.game-intro .intro-top-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 0.88rem;
}
.game-intro .intro-top-list .top-place {
  font-weight: 800;
  min-width: 28px;
}
.game-intro .intro-top-list .top-name { flex: 1; font-weight: 600; }
.game-intro .intro-top-list .top-val { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

.game-intro .intro-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.game-intro .intro-actions .intro-start {
  font-size: 1.1rem;
  padding: clamp(10px, 1.6svh, 16px);
}

.hidden { display: none !important; }

/* ============ BLITZ / SURVIVAL ============ */
#view-blitz, #view-survival { padding: 0; display: none; flex-direction: column; }
#view-blitz.active, #view-survival.active { display: flex; }
#view-blitz .game-area .play-area, #view-survival .game-area .play-area { padding: clamp(8px, 1.6svh, 14px); user-select: none; display: flex; flex-direction: column; min-height: 0; flex: 1; }

#view-blitz .prize-value, #view-survival .prize-value {
  font-family: monospace;
  font-size: clamp(1.3rem, 4svh, 2rem);
  color: var(--gold);
}
#view-blitz.warning .prize-value, #view-survival.warning .prize-value { color: var(--red); animation: pulse 1s infinite; }

.blitz-hud, .surv-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: clamp(8px, 1.6svh, 14px);
  flex-shrink: 0;
}
.surv-hud { grid-template-columns: 2fr 1fr; }
.hud-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(6px, 1.2svh, 10px);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hud-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.hud-val { font-size: clamp(1rem, 2.6svh, 1.4rem); font-weight: 800; color: var(--gold); }
.hud-val.ok { color: var(--green); }
.hud-val.wrong { color: var(--red); }
.hud-val.streak { color: #ff9f43; }

.hud-hearts {
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.6rem;
  letter-spacing: 4px;
}

.blitz-pop {
  position: fixed;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 4px 24px rgba(255, 206, 58, 0.6);
  pointer-events: none;
  animation: popUp .8s ease-out forwards;
  z-index: 60;
}
@keyframes popUp {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  30% { transform: translate(-50%, -80%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}

/* ============ QUICK QUIZ EXTRAS ============ */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);
  transition: width .35s ease;
}
.quick-score {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--muted);
  padding: 10px;
}
.quick-score span { color: var(--text); font-weight: 700; }

/* ============ MODAL ============ */
.modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: fadeIn .2s ease;
}
.modal.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: 100%; max-width: 420px;
  max-height: calc(100dvh - 40px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: clamp(20px, 5vw, 32px);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: popIn .3s ease;
}
@keyframes popIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-card h2 { margin: 0 0 10px; font-size: var(--fs-xl); color: var(--gold); }
.modal-card h3 { margin: 0 0 12px; font-size: var(--fs-lg); color: var(--gold); }
.modal-card p  { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-base); }
.end-prize {
  font-size: var(--fs-xxl);
  font-weight: 800;
  color: var(--gold);
  margin: 16px 0 22px;
  text-shadow: 0 4px 24px rgba(255, 206, 58, 0.4);
}
.modal-actions { display: flex; flex-direction: column; gap: 8px; }

/* Przycisk X zamykający popup wyniku */
.end-modal-card { position: relative; }
.modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.3); color: var(--muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.modal-x:hover { color: #fff; background: rgba(0, 0, 0, 0.5); }

/* ============ END MODAL — rozszerzony ============ */
.end-modal-card {
  max-width: 680px;
  text-align: center;
}
.end-secondary-actions {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.85rem; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-ghost-sm:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-strong);
  color: var(--text);
}

.end-suggestions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.end-suggestions h4 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
}
.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.suggestion-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, transform .12s;
  color: var(--text);
}
.suggestion-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.suggestion-emoji { font-size: 1.6rem; flex-shrink: 0; }
.suggestion-text { flex: 1; min-width: 0; }
.suggestion-name {
  font-size: 0.85rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggestion-cat {
  font-size: 0.7rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============ FRIENDS MODAL (osobny) ============ */
.friends-modal-card {
  max-width: 460px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.friends-modal-card h3 {
  margin: 0 0 14px;
  text-align: center;
}
.friends-modal-card .friends-tabs { margin: 0 0 14px; }
.friends-modal-card .friends-pane { flex: 1; overflow-y: auto; }
.friends-modal-card #friends-close { margin-top: 14px; }

/* ============ USTAWIENIA / PROFIL (strona) ============ */
.profile-page { max-width: 560px; margin: 0 auto; }
.profile-premium .pp-head { margin-bottom: 6px; }
.pp-badge { display: inline-block; font-size: 0.78rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid var(--border); }
.pp-badge.active { background: rgba(255,206,58,.18); color: var(--gold); border-color: rgba(255,206,58,.4); }
.pp-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.pp-sub.warn { color: #ffb454; }
.pp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-loading { font-size: 0.82rem; color: var(--muted); }

/* Moje wygrane */
.win-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.win-card.chosen { border-color: rgba(46,204,113,.4); }
.win-card.pending { border-color: rgba(255,206,58,.4); }
.win-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.win-trophy { font-size: 1.8rem; }
.win-title { font-weight: 800; font-size: 0.98rem; }
.win-sub { font-size: 0.8rem; color: var(--muted); }
.win-choose { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.win-choose .wk-select { flex: 1; min-width: 180px; }
.win-choose .btn-primary { padding: 8px 18px; }
.win-warn { font-size: 0.78rem; color: #ffb454; margin: 8px 0 0; }
.win-chosen { font-size: 0.92rem; color: var(--green); }
.win-lock { color: var(--muted); font-size: 0.8rem; }
.prize-issued { color: var(--green); font-size: 0.84rem; }
.admin-prz-filter-btn { padding: 6px 12px; font-size: 0.82rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); }
.admin-prz-filter-btn.active { background: rgba(255,206,58,.18); color: var(--gold); border-color: rgba(255,206,58,.4); }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 0.82rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: #1f1f1f; font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: background .15s; }
.btn-google:hover { background: #f2f2f2; }
.btn-google svg { flex: none; }
.premium-refund-note { color: var(--muted); font-size: 0.85rem; margin: 12px 2px 0; line-height: 1.5; }
.premium-refund-note a { color: var(--gold); }
.multi-users { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.multi-user { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 10px; background: rgba(255,255,255,.04); border-radius: 8px; }
.multi-user-name { font-weight: 700; }
.multi-user-meta { color: var(--muted); font-size: .82rem; }

/* ===== Karuzela banerów (strona główna) ===== */
.home-banner { position: relative; width: 100%; height: clamp(220px, 26vw, 360px); border-radius: 16px; overflow: hidden; margin-bottom: 22px; background: #0f1420; }
.home-banner-slide { position: absolute; inset: 0; background-size: cover; background-position: left center; display: flex; align-items: center; justify-content: flex-end; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.home-banner-slide.active { opacity: 1; pointer-events: auto; }
.home-banner-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(8,11,18,.5) 60%, rgba(8,11,18,.85) 100%); }
.home-banner-overlay { position: relative; z-index: 2; width: min(48%, 540px); padding: 0 clamp(56px, 6vw, 84px) 0 clamp(20px, 4vw, 48px); text-align: right; }
.home-banner-title { font-size: clamp(1.4rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: 0 0 10px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.home-banner-sub { font-size: clamp(.85rem, 1.4vw, 1.05rem); color: #d7dce6; margin: 0 0 16px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.home-banner-cta { font-size: 1rem; padding: 11px 22px; }
.home-banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.4); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.home-banner-arrow:hover { background: rgba(0,0,0,.7); }
.home-banner-arrow.prev { left: 12px; }
.home-banner-arrow.next { right: 12px; }
.home-banner-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 3; display: flex; gap: 8px; justify-content: center; }
.home-banner-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.home-banner-dot.on { background: var(--gold); width: 22px; border-radius: 5px; }
/* slider wypełnia całą wysokość strony (z normalnymi marginesami treści, zaokrąglony) */
#view-home #home-categories > .home-banner { flex: 1 1 auto; height: auto; min-height: 440px; margin-bottom: 0; }
@media (max-width: 760px) {
  #view-home.active { display: flex; flex-direction: column; }
  #view-home #home-categories > .home-banner { flex: 1 1 auto; height: auto; min-height: 320px; margin-bottom: 0; }
}
@media (max-width: 700px) {
  .home-banner-slide { justify-content: center; background-position: center center; }
  .home-banner-slide::after { background: linear-gradient(180deg, rgba(8,11,18,.25), rgba(8,11,18,.82)); }
  .home-banner-overlay { width: 100%; text-align: center; padding: 0 18px; }
  .home-banner-arrow { display: none; }  /* na mobile tylko swipe palcem */
}

/* ===== Slajd „Popularne quizy" w hero-sliderze (kafelki kategorii jeden pod drugim) ===== */
.home-banner-slide.hero-pop { justify-content: center; overflow: hidden;
  background:
    radial-gradient(62% 50% at 16% 20%, rgba(255,200,80,.20), transparent 70%),
    radial-gradient(58% 48% at 86% 84%, rgba(80,140,255,.20), transparent 72%),
    linear-gradient(135deg,#15315f 0%,#0a1f44 58%,#071633 100%); }
.home-banner-slide.hero-pop::after { background: linear-gradient(180deg, rgba(8,11,18,.18), rgba(8,11,18,.5)); }
/* dekoracyjne emoji w tle (subtelne, „quizowy" motyw) */
.hero-pop-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-pop-deco span { position: absolute; opacity: .12; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.hero-pop-deco span:nth-child(1){ top:5%;  left:7%;  font-size: clamp(56px,12vw,104px); transform: rotate(-12deg); }
.hero-pop-deco span:nth-child(2){ top:11%; right:9%; font-size: clamp(44px,9vw,78px);  transform: rotate(11deg); }
.hero-pop-deco span:nth-child(3){ bottom:9%; left:5%; font-size: clamp(48px,10vw,86px); transform: rotate(8deg); }
.hero-pop-deco span:nth-child(4){ bottom:6%; right:7%; font-size: clamp(60px,13vw,110px); transform: rotate(-9deg); }
.hero-pop-deco span:nth-child(5){ top:43%; left:42%; font-size: clamp(40px,8vw,64px); transform: rotate(6deg); }
.hero-pop-deco span:nth-child(6){ top:62%; right:26%; font-size: clamp(42px,9vw,70px); transform: rotate(-14deg); }
.hero-pop-deco span:nth-child(7){ top:22%; left:28%; font-size: clamp(38px,7.5vw,60px); transform: rotate(4deg); }
.hero-pop-deco span:nth-child(8){ top:74%; left:50%; font-size: clamp(40px,8vw,66px); transform: rotate(-6deg); }
.hero-pop-inner { position: relative; z-index: 2; width: min(94%, 600px); padding: 0 clamp(16px,4vw,44px); }
.hero-pop-title { font-size: clamp(1.05rem, 2.6vw, 1.55rem); font-weight: 800; color: #fff; margin: 0 0 clamp(10px,1.6vw,14px); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero-pop-tiles { display: flex; flex-direction: column; gap: clamp(9px, 1.4vw, 13px); }
.hero-pop-tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: clamp(66px, 15vw, 84px);
  text-align: left; cursor: pointer; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 10px 18px; color: #fff; font-weight: 700; font-size: clamp(1rem,1.7vw,1.18rem);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: background .15s, transform .15s; }
.hero-pop-tile:hover { background: rgba(255,255,255,.17); transform: translateX(3px); }
.hero-pop-tile .hpt-emoji { font-size: 1.7em; line-height: 1; flex: none; }
.hero-pop-tile .hpt-name { flex: 1 1 auto; }
.hero-pop-tile .hpt-go { font-size: .8em; color: var(--gold); font-weight: 800; flex: none; }

/* ============ PROFILE MODAL ============ */
.profile-modal-card {
  max-width: 480px;
  max-height: 88vh;
  text-align: left;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.profile-modal-card h3 {
  text-align: center;
  margin: 0 0 14px;
}
.profile-section {
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
}
.profile-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
}
.profile-row + .profile-row { border-top: 1px solid var(--border); }
.pr-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}
.pr-value {
  font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60%;
}
.profile-details summary {
  cursor: pointer;
  padding: 6px 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  list-style: none;
  color: var(--gold);
  user-select: none;
}
.profile-details summary::-webkit-details-marker { display: none; }
.profile-details summary::after {
  content: " ▾";
  opacity: .6;
  font-size: .75rem;
  transition: transform .2s;
}
.profile-details[open] summary::after { content: " ▴"; }
.profile-form {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.profile-form label { display: flex; flex-direction: column; gap: 6px; }
.profile-form label > span {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.profile-form input {
  width: 100%; padding: 11px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-base);
  min-height: 42px;
}
.profile-form input:focus { outline: none; border-color: var(--gold); }
.form-success {
  min-height: 18px;
  font-size: var(--fs-xs);
  color: var(--green);
  font-weight: 600;
}
.optional {
  font-style: normal;
  font-weight: 400;
  opacity: .65;
  text-transform: none;
  letter-spacing: 0;
}

#modal-profile .profile-section:last-of-type { margin-bottom: 14px; }

/* ============ FRIENDS UI ============ */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  background: var(--red);
  color: #fff;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}
.badge.success {
  background: var(--green);
}
.friends-tabs {
  display: flex; gap: 6px;
  margin: 10px 0 12px;
  padding: 4px;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
}
.friends-tab {
  flex: 1; padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.friends-tab.active {
  background: rgba(255,206,58,.18);
  color: var(--gold);
}
.friends-pane { display: none; }
.friends-pane.active { display: block; }

.friend-add-form {
  display: flex; gap: 8px;
  margin-bottom: 8px;
}
.friend-add-form input {
  flex: 1; padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  min-height: 40px;
}
.friend-add-form input:focus { outline: none; border-color: var(--gold); }
.friend-add-form .btn-primary {
  width: auto; padding: 0 16px;
  min-height: 40px;
  font-size: 0.9rem;
}

.friends-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.friend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.friend-row .f-name {
  flex: 1; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friend-row .f-meta {
  font-size: 0.72rem;
  color: var(--muted);
}
.friend-row .f-actions {
  display: flex; gap: 6px;
}
.friend-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.friend-btn.accept { background: rgba(46,204,113,.18); color: var(--green); border-color: rgba(46,204,113,.4); }
.friend-btn.reject, .friend-btn.remove { background: rgba(231,76,60,.15); color: #ff7d6f; border-color: rgba(231,76,60,.4); }
.friend-btn:hover { filter: brightness(1.1); }
.friend-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}
.friends-sub-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dim);
  font-weight: 700;
  margin: 12px 0 6px;
}

/* ============ PREMIUM ============ */
.premium-status {
  margin: 10px 0;
  padding: 12px;
  background: rgba(255,206,58,.10);
  border: 1px solid rgba(255,206,58,.30);
  border-radius: 10px;
  text-align: center;
}
.premium-status.active {
  background: linear-gradient(135deg, rgba(46,204,113,.20), rgba(255,206,58,.15));
  border-color: rgba(46,204,113,.4);
}
.premium-status .ps-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; }
.premium-status .ps-sub { font-size: 0.82rem; color: var(--muted); }
#premium-actions { display: flex; flex-direction: column; gap: 8px; }

/* ============ HOME — STAŁA WYSOKOŚĆ ============ */
/* tylko gdy widok jest aktywny — żeby nie nakładał się na inne widoki */
#view-home.active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#view-home .hero { margin-bottom: 16px; padding: 18px 22px; }
#view-home .hero-text h1 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
#view-home .hero-text p { font-size: var(--fs-sm); }
#view-home #home-categories {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#view-home .cat-section { margin-bottom: 24px; }
#view-home .hint-text { display: none; }
@media (max-width: 768px) {
  #view-home.active { overflow: auto; } /* na mobile pozwalamy scrollować */
}

/* ============ ADMIN QUESTIONS ============ */
.aq-list { display: flex; flex-direction: column; gap: 10px; }
.aq-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.aq-row.pending { border-left: 4px solid var(--gold); }
.aq-row.verified { border-left: 4px solid var(--green); }
.aq-row.rejected { opacity: .5; }
.aq-meta {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.aq-meta .aq-tag {
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 99px;
}
.aq-meta .aq-tag.diff-1 { color: var(--green); background: rgba(46,204,113,.15); }
.aq-meta .aq-tag.diff-2 { color: var(--gold); background: rgba(255,206,58,.15); }
.aq-meta .aq-tag.diff-3 { color: #ff7d6f; background: rgba(231,76,60,.15); }
.aq-meta .aq-tag.src { color: var(--text); background: rgba(52,152,219,.15); }
.aq-q {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}
.aq-q-img img { max-height: 60px; background: #fff; border-radius: 4px; padding: 4px; }
.aq-answers { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.aq-answers .aq-a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
  border-radius: 6px;
  font-size: 0.85rem;
}
.aq-answers .aq-a.correct { background: rgba(46,204,113,.18); border: 1px solid rgba(46,204,113,.4); }
.aq-letter { font-weight: 800; color: var(--muted); min-width: 18px; }
.aq-a.correct .aq-letter { color: var(--green); }
.aq-actions { display: flex; flex-direction: column; gap: 6px; min-width: 110px; }
.aq-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.aq-actions .ok { background: rgba(46,204,113,.18); color: var(--green); border-color: rgba(46,204,113,.4); }
.aq-actions .no { background: rgba(231,76,60,.18); color: #ff7d6f; border-color: rgba(231,76,60,.4); }
.aq-actions button:hover { filter: brightness(1.1); }

.admin-toolbar select {
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  min-height: 40px;
  min-width: 160px;
}

/* ============ ADMIN PANEL ============ */
.nav-item.nav-admin {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.12), transparent) !important;
  color: #ff7d6f !important;
  font-weight: 600;
  border: 1px solid rgba(231, 76, 60, 0.25);
}
.nav-item.nav-admin:hover {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.22), rgba(231, 76, 60, 0.05)) !important;
}

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap; gap: 10px;
}
.admin-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.admin-header .btn-ghost { width: auto; padding: 8px 18px; min-height: 36px; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  align-items: stretch;
}

/* ===== Analityka (statystyki rozszerzone) ===== */
.an-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 0.9rem; color: var(--text); }
.an-summary b { color: var(--gold); }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.an-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.an-panel.an-wide { grid-column: 1 / -1; }
.an-panel h3 { margin: 0 0 12px; font-size: 0.92rem; color: var(--gold); }
.an-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.8rem; }
.an-bar-label { flex: 0 0 38%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.an-bar-track { flex: 1; height: 14px; background: rgba(255,255,255,.05); border-radius: 7px; overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 7px; background: var(--gold); }
.an-bar-fill.g { background: #3498db; }
.an-bar-fill.c { background: #2ecc71; }
.an-bar-fill.d { background: #9b59b6; }
.an-bar-val { flex: 0 0 auto; color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.an-dim { color: var(--muted); font-size: 0.72rem; }
.an-empty { color: var(--muted); font-size: 0.82rem; padding: 6px 0; }
.an-hours { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 6px; }
.an-hcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.an-hbar { width: 70%; min-height: 3px; background: linear-gradient(to top, #3498db, #5dade2); border-radius: 3px 3px 0 0; }
.an-hlbl { font-size: 0.6rem; color: var(--muted); margin-top: 3px; height: 10px; }
.an-modes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.an-chip { font-size: 0.74rem; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; color: var(--text); }

/* Podpowiedź o limicie rund (gry MP bez Premium) */
.mp-rounds-hint { font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; }
.mp-rounds-hint .btn-link { font-size: 0.78rem; color: var(--gold); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.stat-card {
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.stat-card .stat-card-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  line-height: 1.25;
  /* rezerwa na 2 linie — wartości wyrównane w jednej osi niezależnie od długości etykiety */
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}
.stat-card .stat-card-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.stat-card .stat-card-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
  min-height: 1em;
}
.stat-card.online .stat-card-value { color: var(--green); }
.stat-card.banned .stat-card-value { color: var(--red); }
.stat-card.premium .stat-card-value { color: var(--gold); }

.admin-toolbar {
  display: flex; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-toolbar input {
  flex: 1; min-width: 200px;
  padding: 11px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  min-height: 40px;
}
.admin-toolbar input:focus { outline: none; border-color: var(--gold); }

.admin-filter {
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.admin-filter-btn {
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
}
.admin-filter-btn:hover { color: var(--text); }
.admin-filter-btn.active {
  background: rgba(255, 206, 58, 0.18);
  color: var(--gold);
}

.admin-users {
  display: flex; flex-direction: column; gap: 8px;
}
.admin-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.admin-user-row.banned {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.3);
}
.admin-user-row.admin {
  border-left: 3px solid var(--red);
}
.admin-user-info {
  flex: 1; min-width: 200px;
}
.admin-user-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.admin-user-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}
.admin-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.admin-tag.online   { background: rgba(46, 204, 113, .18); color: var(--green); border: 1px solid rgba(46, 204, 113, .4); }
.admin-tag.premium  { background: rgba(255, 206, 58, .18); color: var(--gold);  border: 1px solid rgba(255, 206, 58, .4); }
.admin-tag.admin    { background: rgba(231, 76, 60, .18);  color: #ff7d6f;      border: 1px solid rgba(231, 76, 60, .4); }
.admin-tag.banned   { background: rgba(231, 76, 60, .25);  color: #fff;         border: 1px solid rgba(231, 76, 60, .6); }

.admin-actions {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.admin-action {
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.admin-action:hover { background: rgba(255, 255, 255, 0.12); }
.admin-action.grant { background: rgba(255, 206, 58, .18); color: var(--gold); border-color: rgba(255, 206, 58, .4); }
.admin-action.ban   { background: rgba(231, 76, 60, .18);  color: #ff7d6f;     border-color: rgba(231, 76, 60, .4); }
.admin-action.unban { background: rgba(46, 204, 113, .18); color: var(--green); border-color: rgba(46, 204, 113, .4); }
.admin-action.details-toggle { background: rgba(255,255,255,.04); color: var(--muted); }
.admin-action[aria-expanded="true"].details-toggle { background: rgba(255,206,58,.14); color: var(--gold); border-color: rgba(255,206,58,.4); }

/* Rozwijane szczegóły gracza */
.admin-user-item { display: flex; flex-direction: column; }
.admin-user-details {
  margin: 6px 0 2px 12px;
  padding: 12px 14px;
  border-left: 2px solid rgba(255,206,58,.3);
  background: rgba(255,255,255,.02);
  border-radius: 0 8px 8px 0;
}
.admin-user-details[hidden] { display: none; }
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.aud-sec h4 { margin: 0 0 7px; font-size: 0.82rem; color: var(--gold); }
.aud-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.aud-actions a.admin-action { text-decoration: none; display: inline-block; }
.aud-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: var(--text); }
.aud-note { font-size: 0.8rem; color: var(--muted); }
.aud-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.aud-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.aud-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.aud-list { margin: 0; padding-left: 18px; font-size: 0.8rem; line-height: 1.5; }
.aud-list .aud-empty, .aud-table .aud-empty { color: var(--muted); list-style: none; }
.aud-dim { color: var(--muted); font-size: 0.74rem; }

.admin-pagination {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 14px;
}
.admin-pagination button {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
}
.admin-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.admin-pagination .pg-info { color: var(--muted); font-size: 0.82rem; }

/* ============ PREMIUM VIEW ============ */
.premium-hero {
  text-align: center;
  padding: 30px 22px 24px;
  background: linear-gradient(135deg, rgba(255,206,58,.10) 0%, var(--bg-card) 60%);
  border: 1px solid rgba(255,206,58,.40);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
}
.premium-hero .premium-emoji {
  font-size: 3.5rem;
  margin-bottom: 6px;
}
.premium-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
}
.premium-hero p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
}

.premium-status-card {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  margin-bottom: 22px;
}
.premium-status-card.active {
  background: linear-gradient(135deg, rgba(46,204,113,.15), rgba(255,206,58,.08));
  border-color: rgba(46,204,113,.4);
}
.premium-status-card .ps-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}
.premium-status-card.active .ps-title { color: var(--green); }
.premium-status-card .ps-sub { font-size: 0.9rem; color: var(--muted); }
.premium-status-card .ps-sub strong { color: var(--text); }
.premium-status-card .ps-note {
  font-size: 0.78rem;
  color: var(--dim);
  margin-top: 8px;
  font-style: italic;
}

.premium-section-title {
  font-size: var(--fs-md);
  margin: 22px 0 12px;
}

.premium-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .premium-tiers { grid-template-columns: repeat(3, 1fr); }
}
.tier-card {
  position: relative;
  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.tier-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}
.tier-card.popular {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255,206,58,.10), var(--bg-card));
  transform: scale(1.02);
}
.tier-popular {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #2a1500;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  letter-spacing: 0.5px;
}
.tier-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}
.tier-days {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  margin-bottom: 8px;
}
.tier-price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.tier-currency {
  font-size: 1.2rem;
  color: var(--muted);
  font-weight: 600;
}
.tier-per-day {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 6px 0 18px;
}
.tier-btn {
  width: 100%;
}

/* === Metody płatności (oficjalne logo) === */
.payment-methods {
  margin: 22px 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.pm-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 14px;
}
.pm-list {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 12px;
}
.pm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 40px;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform .15s;
}
.pm-icon:hover { transform: translateY(-2px); }
.pm-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Dla logo monochromatycznych (Apple/Google Pay): czarna ikonka na białym tle */
.pm-icon.pm-icon-mono img { width: 100%; height: 100%; }
.pm-secure {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

.premium-benefits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.premium-benefits li {
  padding: 12px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.premium-benefits li strong { color: var(--text); }

/* ============ MULTIPLAYER: notka wymagająca konta ============ */
.auth-required {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.auth-required-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.auth-required h2 {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  color: var(--gold);
}
.auth-required p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.auth-required-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============ MULTIPLAYER HUB ============ */
.join-form {
  display: flex; gap: 8px;
}
.join-form input {
  flex: 1; padding: 12px 14px; text-align: left;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-base);
  min-height: 46px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  font-family: monospace;
}
.join-form input:focus { outline: none; border-color: var(--gold); }
.join-form .btn-primary, .join-form .btn-ghost { width: auto; padding: 0 22px; min-height: 46px; flex: 0 0 auto; }
/* popup tworzenia pokoju (pm/kalambury/statki) — odstępy */
#modal-room-cfg .cfg-form-row { margin-bottom: 18px; }
#modal-room-cfg #rcfg-premium-hint { margin-bottom: 6px; }
#modal-room-cfg .modal-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
/* Baner cookies + zgoda na regulamin */
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; background: rgba(10,31,68,.97); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5); font-size: .9rem; color: var(--text); }
.cookie-banner[hidden] { display: none; }
.cookie-banner a { color: var(--gold); }
.cookie-banner .btn-primary { width: auto; padding: 8px 20px; min-height: 38px; flex: 0 0 auto; }
.auth-form label.auth-tos-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--muted); margin: 2px 0; text-transform: none; }
.auth-form label.auth-tos-row > span { font-size: .8rem; line-height: 1.35; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.auth-form label.auth-tos-row input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--gold); cursor: pointer; }
.auth-tos-row a { color: var(--gold); }
.admin-sort-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); margin-left: auto; }
.admin-sort-wrap .wk-select { width: auto; min-width: 200px; }
.field-hint { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.field-hint.err { color: #ff6b6b; }

.public-rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) { .public-rooms { grid-template-columns: 1fr 1fr; } }

.public-room-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.public-room-card .prc-info { flex: 1; min-width: 0; }
.public-room-card .prc-code-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.public-room-card .prc-code {
  font-size: 1.2rem; font-weight: 800; color: var(--gold);
  font-family: monospace;
  letter-spacing: 2px;
}
.prc-diff {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.prc-diff.diff-easy   { background: rgba(46, 204, 113, .18); color: var(--green); border: 1px solid rgba(46, 204, 113, .4); }
.prc-diff.diff-medium { background: rgba(255, 206, 58, .18); color: var(--gold);  border: 1px solid rgba(255, 206, 58, .4); }
.prc-diff.diff-hard   { background: rgba(231, 76, 60, .18);  color: #ff7d6f;      border: 1px solid rgba(231, 76, 60, .4); }
.public-room-card .prc-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.public-room-card .btn-primary { width: auto; padding: 8px 16px; min-height: 36px; font-size: 0.85rem; }

/* ============ CREATE ROOM MODAL ============ */
.create-room-card {
  max-width: 460px;
  text-align: left;
}
.create-room-card h3 { text-align: center; margin: 0 0 18px; }
.create-room-card form { display: flex; flex-direction: column; gap: 16px; }
.cfg-form-row { display: flex; flex-direction: column; gap: 8px; }
.cfg-form-row > label { display: flex; flex-direction: column; gap: 6px; }
.cfg-form-row label > span {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex; justify-content: space-between;
}
.cfg-form-row label > span strong { color: var(--gold); }
.cfg-form-row input[type="range"] { width: 100%; accent-color: var(--gold); }
.cfg-label-block {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.premium-hint {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 8px 12px;
  background: rgba(255,206,58,.08);
  border: 1px dashed rgba(255,206,58,.3);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.visibility-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vis-opt {
  position: relative;
  cursor: pointer;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  transition: border-color .15s, background .15s;
}
.vis-opt input { position: absolute; opacity: 0; }
.vis-opt span {
  display: flex; flex-direction: column; gap: 2px;
  font-weight: 600; font-size: 0.85rem;
}
.vis-opt small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}
.vis-opt:has(input:checked) {
  border-color: var(--gold);
  background: rgba(255,206,58,.10);
}

/* ============ LOBBY: 1 / 2 / 3 kolumny ============ */
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 14px 14px;
}
@media (min-width: 720px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; }
  .lobby-chat-col { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .lobby-grid { grid-template-columns: 1fr 1fr 1.1fr; }
  .lobby-chat-col { grid-column: auto; }
}
.lobby-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.lobby-col h2 {
  margin: 0 0 12px;
  font-size: var(--fs-lg);
}
.section-sub-title {
  margin: 18px 0 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
}

.lobby-cfg {
  margin-bottom: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 12px;
}
.cfg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
}
.cfg-row + .cfg-row { border-top: 1px solid var(--border); }
.cfg-row .cfg-label { font-size: 0.85rem; color: var(--muted); }
.cfg-row .cfg-value { font-weight: 700; color: var(--gold); }

.visibility-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(46,204,113,.18);
  color: var(--green);
  border: 1px solid rgba(46,204,113,.4);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.visibility-tag.private {
  background: rgba(255,206,58,.18);
  color: var(--gold);
  border-color: rgba(255,206,58,.4);
}

.lobby-accept {
  margin-top: 14px;
  padding: 14px;
  background: rgba(255,206,58,.10);
  border: 1px solid rgba(255,206,58,.30);
  border-radius: 10px;
  text-align: center;
}
.lobby-accept p { margin: 0 0 8px; }

/* ============ PREMIUM PLAYER STYLE ============ */
.user-premium {
  color: var(--gold) !important;
  font-weight: 700;
}
.premium-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1a2e;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(255, 176, 46, 0.5);
}
.premium-check::before { content: "✓"; }

/* ============ "Wróć do gry" nav button ============ */
.nav-return-game {
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.18), rgba(46, 204, 113, 0.04)) !important;
  color: var(--green) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(46, 204, 113, 0.30);
  animation: pulseReturn 2.2s ease-in-out infinite;
}
.nav-return-game:hover {
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.30), rgba(46, 204, 113, 0.10)) !important;
}
@keyframes pulseReturn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

/* ============ CHAT W LOBBY ============ */
.lobby-chat {
  display: flex;
  flex-direction: column;
}
.chat-messages {
  list-style: none;
  margin: 0 0 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.chat-empty {
  text-align: center;
  color: var(--dim);
  font-size: 0.8rem;
  font-style: italic;
  margin: auto;
}
.chat-message {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-message.chat-mine {
  background: rgba(255, 206, 58, 0.10);
  border-color: rgba(255, 206, 58, 0.3);
  align-self: flex-end;
  max-width: 90%;
}
.chat-message:not(.chat-mine) {
  align-self: flex-start;
  max-width: 90%;
}
.chat-message .chat-author {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.78rem;
  margin-right: 6px;
}
.chat-message.chat-mine .chat-author { color: var(--gold-2); }
.chat-message { position: relative; }
.chat-report {
  opacity: 0;
  background: transparent;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0 3px;
  margin-left: 4px;
  transition: opacity .12s, color .12s;
  vertical-align: baseline;
}
.chat-message:hover .chat-report { opacity: 0.55; }
.chat-report:hover { opacity: 1 !important; color: #ff7d6f; }
.chat-report:disabled { cursor: default; color: #2ecc71; opacity: 1 !important; }
.chat-form {
  display: flex;
  gap: 6px;
}
.chat-form input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  min-height: 40px;
}
.chat-form input:focus { outline: none; border-color: var(--gold); }
.chat-form .btn-primary {
  width: auto;
  padding: 0 18px;
  min-height: 40px;
  font-size: 0.9rem;
}

.rules-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 0.82rem;
}
.rules-box .rules-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rules-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.rules-box li { margin-bottom: 3px; line-height: 1.4; }
.rules-box li strong { color: var(--text); }

/* ============ INVITE POPUP (bottom-right) ============ */
.invite-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  width: min(360px, calc(100vw - 40px));
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: slideUp .25s ease;
}
.invite-popup.hidden { display: none; }
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.invite-popup-inner { padding: 14px; }
.invite-icon { font-size: 2rem; text-align: center; margin-bottom: 6px; }
.invite-body { text-align: center; margin-bottom: 12px; }
.invite-from { font-size: 0.95rem; }
.invite-from strong { color: var(--gold); }
.invite-code {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}
.invite-code code {
  font-family: monospace;
  background: rgba(0,0,0,.4);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 2px;
}
.invite-actions { display: flex; gap: 8px; }
.invite-actions .btn-primary, .invite-actions .btn-ghost {
  width: auto; flex: 1;
  padding: 8px 14px;
  min-height: 38px;
  font-size: 0.85rem;
}

/* ============ STARE STYLE LOBBY (zachowane dla list graczy) ============ */
.lobby-players {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.lobby-player {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lobby-player.is-leader {
  background: linear-gradient(90deg, rgba(255,206,58,.10), transparent);
  border-color: rgba(255,206,58,.30);
}
.lobby-player.offline { opacity: .55; }
.lobby-player .lp-name { font-weight: 600; }
.lobby-player .lp-accepted { font-size: 0.8rem; color: var(--muted); }
.lobby-player .lp-acc { font-size: .78rem; color: var(--muted); }
.lobby-player .lp-acc.on { color: var(--green); font-weight: 700; }
.lobby-player.accepted { border-color: rgba(46,204,113,.45); background: linear-gradient(90deg, rgba(46,204,113,.10), transparent); }
.mp-accept-box {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 12px; margin: 6px 0;
  border: 1px solid rgba(46,204,113,.35); border-radius: 12px;
  background: rgba(46,204,113,.06);
}
.mp-accept-cd { font-weight: 800; font-size: 1.05rem; }
.mp-accept-cd #mp-accept-timer { color: var(--gold); }
.mp-accept-count { font-size: .9rem; color: var(--muted); }
.mp-accept-count #mp-accept-count { color: var(--green); font-weight: 700; }
.mp-accept-box .btn-primary { width: 100%; }
.lobby-kick {
  margin-left: 8px;
  width: 24px; height: 24px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(231,76,60,.45);
  background: rgba(231,76,60,.12);
  color: #e74c3c;
  border-radius: 6px;
  font-size: .8rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lobby-kick:hover { background: #e74c3c; color: #fff; }

.lobby-cfg {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  margin-bottom: 12px;
}
.lobby-cfg label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.lobby-cfg input[type="range"] {
  width: 100%; accent-color: var(--gold);
}

/* ============ MULTIPLAYER BOARD ============ */
.mp-scoreboard {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
}
.mp-score-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 99px;
  font-size: 0.85rem;
}
.mp-score-row .mps-rank { font-weight: 700; color: var(--muted); font-size: 0.75rem; }
.mp-score-row .mps-name { font-weight: 600; }
.mp-score-row .mps-score { color: var(--gold); font-weight: 700; }

.mp-score-row.mp-score-me {
  background: linear-gradient(135deg, rgba(255,206,58,.18), rgba(255,206,58,.04));
  border: 1px solid rgba(255,206,58,.4);
}
.mp-score-row.mp-score-me .mps-rank { color: var(--gold); }
.mp-score-row.mp-score-hidden { opacity: .7; }
.mp-score-row.mp-score-hidden .mps-score { color: var(--muted); font-weight: 600; }
.mp-score-note {
  width: 100%;
  flex-basis: 100%;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 8px 2px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}

.mp-countdown {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  min-height: 32px;
}

.mp-stage { display: flex; flex-direction: column; gap: 12px; }

/* Blokada kopiowania/zaznaczania treści pytania w multiplayerze (anti-cheat) */
#view-multi-board .question-card,
#view-multi-board .question-card .q-text,
#view-multi-board .question-card .q-number,
#view-multi-board .flag-display,
#view-multi-board .answer {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#view-multi-board .flag-display img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.mp-pick { text-align: center; }
.mp-pick h3 { margin: 0 0 14px; color: var(--gold); }
.mp-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.mp-pick-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s, filter .15s;
  color: var(--text);
}
.mp-pick-card:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.1); }
.mp-pick-card:disabled { opacity: .5; cursor: not-allowed; }
.mp-pick-emoji { font-size: 2.4rem; }
.mp-pick-name { font-weight: 600; font-size: 0.9rem; }

.mp-prequestion {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  padding: 40px 20px;
}
.mp-prequestion h3 { color: var(--gold); margin: 0 0 10px; font-size: 1.8rem; }
.mp-prequestion p { color: var(--text); margin: 6px 0; font-size: 1rem; }

/* ===== QUICKMATCH 1v1 — pytanie, odpowiedzi, odliczanie ===== */
.mp-question-flag { display: flex; justify-content: center; margin-bottom: 14px; }
.mp-question-flag img {
  max-width: 220px; width: 100%; border-radius: 10px; border: 1px solid var(--border);
}
.mp-question-text {
  font-size: var(--fs-md); font-weight: 600; line-height: 1.4;
  text-align: center; margin-bottom: 16px;
}
.mp-answers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.mp-answer-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 14px; text-align: left;
  background: linear-gradient(135deg, #122b5e 0%, #1a3a7a 100%);
  border: 2px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.mp-answer-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a3a7a 0%, #234b9a 100%); border-color: var(--gold);
}
.mp-answer-btn:active:not(:disabled) { transform: scale(.98); }
.mp-answer-btn:disabled { cursor: not-allowed; }
.mp-ans-letter {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--gold); color: #2a1500; border-radius: 50%; font-weight: 800;
}
.mp-answer-btn.selected {
  background: linear-gradient(135deg, var(--orange) 0%, #ff7f00 100%);
  border-color: var(--gold); animation: pulse 1s infinite;
}
.mp-answer-btn.correct {
  background: linear-gradient(135deg, #1a7a3f 0%, var(--green) 100%);
  border-color: #fff; animation: none;
}
.mp-answer-btn.wrong {
  background: linear-gradient(135deg, #7a1a1a 0%, var(--red) 100%);
  border-color: #fff; animation: none;
}
.mp-countdown-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.12); margin-bottom: 4px;
}
.mp-countdown-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange));
  transition: width 1s linear;
}
.mp-countdown-text { text-align: center; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
@media (max-width: 480px) { .mp-answers { grid-template-columns: 1fr; } }

/* ===== PIĘĆ LITER (gra typu Wordle) ===== */
.pl-wrap {
  max-width: 540px; margin: 0 auto; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; width: 100%;
}
/* górny pasek: tryby + akcje */
.pl-topbar {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.pl-topbar-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.pl-icon-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px;
  padding: 0 14px; border-radius: 10px; white-space: nowrap; line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border-strong);
  color: var(--text); font-weight: 600; font-size: .82rem; cursor: pointer;
  transition: border-color .15s, background .15s, transform .06s;
}
.pl-icon-btn:hover { border-color: var(--gold); background: rgba(255,206,58,.1); }
.pl-icon-btn:active { transform: translateY(1px); }
.pl-exit { width: 38px; padding: 0; justify-content: center; font-size: 1.05rem; color: var(--muted); }
.pl-exit:hover { color: #fff; border-color: var(--red); background: rgba(229,72,77,.18); }
@media (max-width: 560px) {
  .pl-topbar { flex-wrap: wrap; justify-content: center; }
  .pl-modes { order: 2; }
}

/* segmentowy przełącznik trybu */
.pl-modes {
  display: inline-flex; padding: 4px; gap: 4px; height: 38px; align-items: center;
  background: rgba(0,0,0,.32); border: 1px solid var(--border-strong); border-radius: 10px;
}
.pl-mode {
  padding: 0 16px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: var(--muted); font-weight: 700; cursor: pointer; font-size: .85rem;
  transition: background .18s, color .18s, box-shadow .18s;
}
.pl-mode.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1500;
  box-shadow: 0 2px 12px rgba(255,206,58,.32);
}
.pl-mode:not(.active):hover { color: var(--text); }

.pl-date { color: var(--muted); font-size: .9rem; margin: 8px 0 12px; text-align: center; letter-spacing: .3px; }

.pl-grid { display: grid; gap: clamp(5px, 1svh, 7px); margin-bottom: clamp(8px, 1.6svh, 14px); width: fit-content; }
.pl-row { display: grid; grid-template-columns: repeat(5, min(54px, 5.8svh, 16vw)); gap: clamp(4px, 0.9svh, 7px); }
.pl-tile {
  width: min(54px, 5.8svh, 16vw); height: min(54px, 5.8svh, 16vw); display: flex; align-items: center; justify-content: center;
  font-size: min(1.6rem, 3svh, 8vw); font-weight: 800; text-transform: uppercase; color: var(--text);
  background: rgba(255,255,255,.03);
  border: 2px solid var(--border-strong); border-radius: 12px;
}
.pl-tile.filled { border-color: var(--gold); background: rgba(255,206,58,.07); animation: plPop .14s ease; }
@keyframes plPop { 0% { transform: scale(.86); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
.pl-tile.correct { background: linear-gradient(135deg, #1f9d57, #16b364); border-color: transparent; color: #fff; box-shadow: 0 5px 16px rgba(22,179,100,.3); }
.pl-tile.present { background: linear-gradient(135deg, #d4a017, #f0b429); border-color: transparent; color: #2a1500; box-shadow: 0 5px 16px rgba(240,180,41,.26); }
.pl-tile.absent  { background: #2a3142; border-color: transparent; color: #8b93a7; }
.pl-row.pl-shake { animation: plShake .42s; }
@keyframes plShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

.pl-message { min-height: 22px; color: var(--gold); font-weight: 700; margin-bottom: 12px; text-align: center; font-size: .95rem; }

.pl-keyboard { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 520px; }
.pl-kb-row { display: flex; gap: 6px; justify-content: center; }
.pl-key {
  width: clamp(26px, 8.2vw, 42px); height: min(46px, 4.8svh); flex: 0 0 auto;
  border: none; border-radius: 8px; color: var(--text);
  background: linear-gradient(180deg, #475173, #3a4358);
  font-weight: 700; font-size: 1rem; cursor: pointer; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .06s, filter .15s;
}
.pl-key:hover { filter: brightness(1.13); }
.pl-key:active { transform: translateY(2px); box-shadow: none; }
.pl-key.pl-key-wide { width: clamp(44px, 13vw, 64px); font-size: 1.25rem; background: linear-gradient(180deg, #54608a, #434c63); }
.pl-key.correct { background: linear-gradient(180deg, #1f9d57, #16b364); color: #fff; box-shadow: 0 2px 0 #0d7a43; }
.pl-key.present { background: linear-gradient(180deg, #e0ad1a, #d4a017); color: #2a1500; box-shadow: 0 2px 0 #a87d0c; }
.pl-key.absent  { background: #222838; color: #59617a; box-shadow: none; }

.pl-end { width: 100%; text-align: center; }
.pl-end h3 { color: var(--gold); margin: 0 0 8px; font-size: 1.5rem; }
.pl-answer { color: var(--gold); font-weight: 800; letter-spacing: 2px; }
.pl-stats { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.pl-stats div {
  display: flex; flex-direction: column; gap: 3px; flex: 1; max-width: 92px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 12px; padding: 11px 6px;
}
.pl-stats b { font-size: 1.5rem; color: var(--gold); line-height: 1; }
.pl-stats span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pl-note { color: var(--muted); font-size: .85rem; }
.pl-end-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pl-credit { color: var(--muted); font-size: .7rem; margin-top: 18px; opacity: .6; }
@media (max-width: 520px) {
  .pl-tile { border-radius: 10px; }
}

/* Zasady — treść w modalu */
.pl-rules { text-align: left; }
.pl-rules p { margin: 0 0 12px; color: var(--text); line-height: 1.55; }
.pl-rules-h { font-weight: 700; color: var(--text); margin-bottom: 10px !important; }
.pl-rules-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.pl-rules-list li { display: flex; align-items: center; gap: 12px; color: var(--text); line-height: 1.4; }
.pl-rules-list li > span:last-child { flex: 1; }
.pl-sw {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-weight: 800; font-size: 1.15rem; color: #fff; text-transform: uppercase;
}
.pl-sw.correct { background: linear-gradient(135deg, #1f9d57, #16b364); }
.pl-sw.present { background: linear-gradient(135deg, #d4a017, #f0b429); color: #2a1500; }
.pl-sw.absent  { background: #2a3142; color: #8b93a7; }
.pl-rules-modes { background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.pl-rules-modes p { margin: 0 0 6px; font-size: .92rem; }
.pl-rules-modes p:last-child { margin-bottom: 0; }
.pl-rules-note { font-size: .78rem; color: var(--muted); margin-bottom: 0 !important; }

/* ===== WYKREŚLANKA ===== */
.wk-wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; width: 100%; }
.wk-topbar { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-topbar .wk-select { flex: 1; min-width: 120px; }
.wk-topbar .pl-exit { margin-left: auto; flex-shrink: 0; }
.wk-diff { padding: 4px; }
select option { background: #16203c; color: var(--text); }
.wk-select {
  height: 38px; padding: 0 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; font-size: .82rem; cursor: pointer;
}
.wk-message { min-height: 22px; color: var(--green); font-weight: 700; text-align: center; }
.wk-grid {
  display: grid;
  grid-template-columns: repeat(var(--wk-size, 9), 1fr);
  grid-template-rows: repeat(var(--wk-size, 9), 1fr);
  gap: 3px; width: min(92vw, 480px, 48svh); aspect-ratio: 1;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.wk-cell {
  display: flex; align-items: center; justify-content: center;
  background: #16203c; border-radius: 6px; color: var(--text);
  font-weight: 700; font-size: clamp(.55rem, 3.1vw, 1.05rem); text-transform: uppercase;
  cursor: pointer; transition: background .08s;
}
.wk-cell.sel { background: var(--gold); color: #2a1500; }
.wk-cell.found { background: linear-gradient(135deg, #1f9d57, #16b364); color: #fff; }
.wk-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wk-word {
  padding: 6px 13px; border-radius: 99px; background: rgba(0,0,0,.25);
  border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .9rem; text-transform: uppercase;
}
.wk-word.found {
  text-decoration: line-through; color: var(--muted); opacity: .65;
  background: rgba(22,179,100,.12); border-color: rgba(22,179,100,.4);
}

/* ===== Wspólny pasek gier logicznych ===== */
.g2048-wrap, .mem-wrap, .szu-wrap, .sdk-wrap {
  max-width: 680px; margin: 0 auto; width: 100%; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6svh, 14px);
}
.g2048-topbar, .mem-topbar, .szu-topbar, .sdk-topbar {
  width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.g2048-topbar .pl-exit, .mem-topbar .pl-exit, .szu-topbar .pl-exit, .sdk-topbar .pl-exit {
  margin-left: auto; flex-shrink: 0;
}

/* ===== 2048 ===== */
.g2048-stats { display: flex; gap: 8px; }
.g2048-stat {
  display: flex; flex-direction: column; align-items: center; min-width: 72px;
  background: rgba(0,0,0,.32); border: 1px solid var(--border-strong); border-radius: 10px; padding: 5px 12px;
}
.g2048-stat-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.g2048-stat span:last-child { font-size: 1.1rem; font-weight: 800; color: var(--gold); line-height: 1.1; }
.g2048-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: clamp(6px, 1.4vw, 12px); width: min(92vw, 440px, 52svh); aspect-ratio: 1;
  background: rgba(0,0,0,.34); border-radius: 14px; padding: clamp(6px, 1.4vw, 12px);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.g2048-tile {
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  font-weight: 800; font-size: clamp(1rem, 5.2vw, 1.9rem); color: #2a1500;
  transition: background .1s;
}
.g2048-empty { background: rgba(255,255,255,.045); }
.g2048-v2    { background: #eee4da; }
.g2048-v4    { background: #ede0c8; }
.g2048-v8    { background: #f2b179; color: #fff; }
.g2048-v16   { background: #f59563; color: #fff; }
.g2048-v32   { background: #f67c5f; color: #fff; }
.g2048-v64   { background: #f65e3b; color: #fff; }
.g2048-v128  { background: #edcf72; font-size: clamp(.9rem, 4.6vw, 1.7rem); }
.g2048-v256  { background: #edcc61; font-size: clamp(.9rem, 4.6vw, 1.7rem); }
.g2048-v512  { background: #edc850; font-size: clamp(.9rem, 4.6vw, 1.7rem); }
.g2048-v1024 { background: #edc53f; color: #fff; font-size: clamp(.78rem, 3.8vw, 1.4rem); }
.g2048-v2048 { background: #edc22e; color: #fff; font-size: clamp(.78rem, 3.8vw, 1.4rem); }
.g2048-vbig  { background: #3c3a32; color: #fff; font-size: clamp(.7rem, 3.4vw, 1.3rem); }
.g2048-msg { min-height: 22px; color: var(--gold); font-weight: 700; text-align: center; font-size: .95rem; }

/* ===== Memory ===== */
.mem-moves-box { font-size: .85rem; color: var(--muted); font-weight: 600; }
.mem-moves-box strong { color: var(--gold); }
.mem-grid {
  display: grid; grid-template-columns: repeat(var(--mem-cols, 4), 1fr);
  gap: clamp(5px, 1.2vw, 10px); width: min(92vw, 460px, 56svh); aspect-ratio: 1;
}
.mem-card {
  position: relative; border-radius: 10px; cursor: pointer; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #475173, #3a4358); border: 1px solid var(--border-strong);
  transition: transform .08s, background .15s;
}
.mem-card:active { transform: scale(.96); }
.mem-card .mem-face { display: none; font-size: clamp(1.1rem, 6vw, 2.1rem); line-height: 1; }
.mem-card .mem-back { display: block; font-size: clamp(.9rem, 4.6vw, 1.6rem); opacity: .55; }
.mem-card.flipped { background: rgba(255,255,255,.06); border-color: var(--gold); }
.mem-card.flipped .mem-face { display: block; }
.mem-card.flipped .mem-back { display: none; }
.mem-card.matched { background: rgba(22,179,100,.16); border-color: rgba(22,179,100,.5); cursor: default; }
.mem-msg { min-height: 22px; color: var(--green); font-weight: 700; text-align: center; font-size: .95rem; }

/* ===== Szubienica ===== */
.szu-topbar .wk-select { flex: 1; min-width: 120px; }
.szu-lives { font-size: .85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.szu-gallows {
  margin: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: clamp(.7rem, 2.4svh, 1rem); line-height: 1.15; color: var(--gold);
  background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 16px; white-space: pre;
}
.szu-word { display: flex; flex-wrap: wrap; gap: clamp(5px, 1.4vw, 10px); justify-content: center; }
.szu-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(22px, 7vw, 38px); height: clamp(30px, 6svh, 48px);
  border-bottom: 3px solid var(--border-strong); font-size: clamp(1.1rem, 4.4vw, 1.8rem);
  font-weight: 800; text-transform: uppercase; color: var(--text);
}
.szu-letter.missed { color: var(--red); }
.szu-msg { min-height: 22px; color: var(--gold); font-weight: 700; text-align: center; font-size: .95rem; }
/* Klawiatura Szubienicy korzysta ze stylu Pięć Liter (.pl-keyboard / .pl-kb-row / .pl-key) */
.szu-key:disabled { cursor: default; }

/* ===== Sudoku ===== */
.sdk-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  width: min(92vw, 440px, 46svh); aspect-ratio: 1;
  background: var(--border-strong); border: 2px solid var(--border-strong); border-radius: 8px;
  gap: 1px; overflow: hidden;
}
.sdk-cell {
  display: flex; align-items: center; justify-content: center; background: #16203c;
  font-size: clamp(.8rem, 4vw, 1.5rem); font-weight: 600; color: #7fb2ff; cursor: pointer;
  transition: background .08s;
}
.sdk-cell.given { color: var(--text); font-weight: 800; cursor: default; }
.sdk-cell.sel { background: rgba(255,206,58,.28); }
.sdk-cell.same { background: rgba(255,255,255,.07); }
.sdk-cell.sel.same { background: rgba(255,206,58,.28); }
.sdk-cell.wrong { color: var(--red); }
.sdk-cell[data-c="2"], .sdk-cell[data-c="5"] { box-shadow: inset -2px 0 0 var(--border-strong); }
.sdk-cell[data-r="2"], .sdk-cell[data-r="5"] { box-shadow: inset 0 -2px 0 var(--border-strong); }
.sdk-cell[data-c="2"][data-r="2"], .sdk-cell[data-c="2"][data-r="5"],
.sdk-cell[data-c="5"][data-r="2"], .sdk-cell[data-c="5"][data-r="5"] { box-shadow: inset -2px -2px 0 var(--border-strong); }
.sdk-msg { min-height: 20px; color: var(--gold); font-weight: 700; text-align: center; font-size: .9rem; }
.sdk-pad { display: flex; flex-wrap: wrap; gap: clamp(4px, 1vw, 8px); justify-content: center; max-width: 460px; }
.sdk-num {
  width: clamp(34px, 8.4vw, 48px); height: clamp(38px, 5.4svh, 52px); border: 1px solid var(--border-strong);
  border-radius: 10px; background: linear-gradient(180deg, #475173, #3a4358); color: var(--text);
  font-weight: 800; font-size: clamp(1rem, 4vw, 1.4rem); cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .06s, filter .15s;
}
.sdk-num:hover { filter: brightness(1.13); }
.sdk-num:active { transform: translateY(2px); box-shadow: none; }
.sdk-erase { font-size: clamp(.9rem, 3.6vw, 1.2rem); }

/* ===== Państwa-miasta (multiplayer) ===== */
.pm-wrap { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#pm-screen, #kal-screen, #st-screen { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px; max-width: 980px; width: 100%; margin: 0 auto; }
/* hub Brainshow — te same wymiary co lobby pm/kalambury */
#multi-hub-content { display: flex; flex-direction: column; gap: 12px; padding: 4px; max-width: 980px; width: 100%; margin: 0 auto; }
.pm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.pm-topbar .pl-exit { width: 40px; min-width: 40px; }
.pm-code-tag, .pm-round-tag { font-size: .9rem; color: var(--muted); }
.pm-code-tag strong, .pm-round-tag strong { color: var(--gold); letter-spacing: 1px; }
.pm-timer { background: rgba(0,0,0,.32); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 12px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

.pm-card {
  background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(14px, 2.5svh, 26px); text-align: center; display: flex; flex-direction: column; gap: 12px;
  max-width: 520px; width: 100%; margin: 0 auto;
}
.pm-hint { margin: 0; color: var(--muted); font-size: .82rem; }

/* Quiz MP hub — dwie kolumny (1v1 | dołącz po kodzie), jednakowe kafelki */
.mp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; align-items: stretch; }
.mp-cols .mp-col-card {
  margin: 0; height: 100%; display: flex; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
}
.mp-cols .mp-col-card > h2 { margin: 0; font-size: 1.1rem; }
.mp-cols .mp-col-card .quick-card {
  margin: 0; flex: 1; background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 14px;
}
.mp-cols .mp-col-card .join-form { margin-top: auto; flex-direction: column; align-items: stretch; gap: 10px; }
.mp-cols .mp-col-card .join-form input { width: 100%; }
.mp-cols .mp-col-card .btn-primary { width: 100%; padding: 0; min-height: 46px; }
@media (max-width: 760px) { .mp-cols { grid-template-columns: 1fr; } }

/* Państwa-miasta — baner + dwie kolumny */
.pm-hero {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: linear-gradient(135deg, rgba(22,160,133,.28), rgba(0,0,0,.18));
  border: 1px solid var(--border); border-radius: 16px; padding: clamp(14px, 2.5svh, 22px) 20px;
}
.pm-hero-emoji { font-size: clamp(2rem, 6svh, 3.2rem); flex-shrink: 0; }
.pm-hero-text h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.pm-hero-text p { margin: 5px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.pm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.pm-cols .pm-block { text-align: left; height: 100%; }
@media (max-width: 700px) { .pm-cols { grid-template-columns: 1fr; } }
.pm-emoji { font-size: clamp(2.2rem, 6svh, 3.4rem); }
.pm-card h2 { margin: 0; color: var(--gold); }
.pm-sub { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.pm-menu { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pm-block { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pm-block-title { font-weight: 800; color: var(--text); }
.pm-or { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.pm-row { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text); font-weight: 600; }
.pm-check { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); }
.pm-code-input { text-align: left; text-transform: uppercase; letter-spacing: 6px; font-weight: 800; font-size: 1.4rem;
  height: 48px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.3); color: var(--text); }
.pm-err { color: var(--red); font-weight: 600; min-height: 18px; }

.pm-players { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pm-player { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 99px; padding: 7px 14px; font-weight: 600; }
.pm-wait { color: var(--muted); font-style: italic; }
.pm-invite { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: left; }
.pm-friends { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.pm-friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0,0,0,.22); border-radius: 8px; padding: 6px 10px; }
.pm-friend-row > span { font-weight: 600; }
.pm-friend-here { color: var(--green); font-size: .8rem; font-weight: 700; }
.pm-friend-empty { color: var(--muted); font-size: .85rem; }

.pm-play { display: flex; flex-direction: column; gap: clamp(8px, 1.6svh, 14px); align-items: center; }
.pm-letter {
  width: clamp(60px, 14svh, 96px); height: clamp(60px, 14svh, 96px); display: flex; align-items: center; justify-content: center;
  font-size: clamp(2.4rem, 9svh, 4rem); font-weight: 900; color: #2a1500;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); border-radius: 18px; box-shadow: 0 8px 24px rgba(255,206,58,.3);
}
.pm-stop-banner { background: rgba(229,72,77,.18); border: 1px solid var(--red); border-radius: 10px; padding: 8px 14px; color: #fff; font-weight: 700; }
.pm-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 100%; }
.pm-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.pm-field-label { text-align: center; color: var(--muted); font-weight: 700; font-size: .82rem; }
.pm-input { width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.3); color: var(--text); padding: 0 10px; font-size: 1rem; text-align: center; }
@media (max-width: 900px) { .pm-fields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pm-fields { grid-template-columns: 1fr; } }
.pm-input:focus { outline: none; border-color: var(--gold); }
.pm-stop { font-size: 1.05rem; padding: 12px 20px; }
.pm-stop:disabled { opacity: .5; cursor: not-allowed; }
.pm-stop-hint { color: var(--muted); font-size: .82rem; text-align: center; }
/* Głosowanie */
.pm-vote-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pm-vote-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.pm-vote-item.voted { opacity: .75; }
.pm-vote-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-vote-cat { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pm-vote-text { font-weight: 800; color: var(--text); }
.pm-vote-author { font-size: .78rem; color: var(--muted); }
.pm-vote-btns { display: flex; gap: 6px; flex-shrink: 0; }
.pm-vote-btn { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.25); font-size: 1.1rem; cursor: pointer; }
.pm-vote-btn.ok.chosen { background: rgba(22,179,100,.3); border-color: var(--green); }
.pm-vote-btn.no.chosen { background: rgba(229,72,77,.3); border-color: var(--red); }
.pm-vote-btn:disabled { cursor: default; }
.pm-vote-own { font-size: .78rem; color: var(--muted); font-style: italic; flex-shrink: 0; }
.pm-a-rejected { border-left: 3px solid var(--red); opacity: .7; }
.pm-a-rejected .pm-a-pts { color: var(--red); }

.pm-reveal { display: flex; flex-direction: column; gap: 12px; max-width: 760px; width: 100%; margin: 0 auto; }
.pm-standings { background: rgba(255,206,58,.08); border: 1px solid rgba(255,206,58,.25); border-radius: 12px; padding: 10px 14px; }
.pm-standings-title { font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.pm-stand-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.pm-stand-pos { width: 24px; color: var(--muted); font-weight: 700; }
.pm-stand-name { flex: 1; font-weight: 600; }
.pm-stand-score { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-reveal-player { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.pm-reveal-head { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 6px; }
.pm-reveal-rt { color: var(--green); }
.pm-a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pm-a { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.22); border-radius: 8px; padding: 5px 8px; font-size: .85rem; }
.pm-a-cat { color: var(--muted); font-size: .72rem; text-transform: uppercase; min-width: 54px; }
.pm-a-text { flex: 1; font-weight: 600; }
.pm-a-pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-a-unique { border-left: 3px solid var(--green); }
.pm-a-unique .pm-a-pts { color: var(--green); }
.pm-a-dup { border-left: 3px solid var(--gold); }
.pm-a-dup .pm-a-pts { color: var(--gold); }
.pm-a-unknown { border-left: 3px solid #e67e22; }
.pm-a-unknown .pm-a-pts { color: #e67e22; }
.pm-a-unknown .pm-a-text::after { content: " ?"; color: #e67e22; font-weight: 800; }
.pm-a-bad, .pm-a-empty { opacity: .55; }
.pm-reveal-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 4px; }
.pm-final { font-size: 1.15rem; font-weight: 800; color: var(--gold); }

/* ===== Kalambury ===== */
.kal-hero { background: linear-gradient(135deg, rgba(232,67,147,.28), rgba(0,0,0,.18)); }
.kal-wordbar { text-align: center; min-height: 28px; }
.kal-word { font-weight: 800; color: var(--gold); font-size: 1.1rem; letter-spacing: .5px; }
.kal-mask { font-weight: 800; color: var(--text); font-size: 1.4rem; letter-spacing: 4px; font-family: ui-monospace, Consolas, monospace; }
.kal-stage { display: grid; grid-template-columns: 1fr 280px; gap: 12px; align-items: start; flex: 1; min-height: 0; }
.kal-canvas-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: center; }
#kal-canvas {
  height: min(54svh, 64vw); width: auto; max-width: 100%;
  aspect-ratio: 4 / 3; background: #fff; border: 2px solid var(--border-strong);
  border-radius: 12px; touch-action: none; cursor: crosshair;
}
#kal-canvas:not(.is-drawer) { cursor: default; }
.kal-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kal-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; padding: 0; }
.kal-color.active { border-color: var(--gold); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255,206,58,.4); }
.kal-tool-btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font-weight: 600; font-size: .82rem; }
.kal-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kal-players-box { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.kal-pl { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.05); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.kal-pl.drawer { border-left: 3px solid var(--gold); }
.kal-pl.guessed { border-left: 3px solid var(--green); }
.kal-pl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-pl-score { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.kal-chat { flex: 1; min-height: 120px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.kal-msg { font-size: .85rem; line-height: 1.35; }
.kal-msg.system { color: var(--muted); font-style: italic; }
.kal-msg.correct { color: var(--green); font-weight: 700; }
.kal-guessbar { display: flex; flex-direction: column; gap: 8px; }
.kal-guessbar input { width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0,0,0,.3); color: var(--text); padding: 0 12px; font-size: 1rem; box-sizing: border-box; }
.kal-guessbar input:focus { outline: none; border-color: var(--gold); }
.kal-guessbar .btn-primary { width: 100%; }
.kal-drawer-note { color: var(--muted); font-size: .85rem; text-align: center; font-style: italic; }
.kal-reveal-word { text-align: center; font-size: 1.2rem; }
.kal-reveal-word strong { color: var(--gold); letter-spacing: 1px; }
.kal-next-info { color: var(--muted); font-weight: 600; }
.kal-next-info span { color: var(--gold); font-weight: 800; }
@media (max-width: 760px) {
  .kal-stage { grid-template-columns: 1fr; }
  .kal-chat { max-height: 150px; }
}

/* ===== Ujednolicony górny pasek gier (równe wysokości i szerokości) ===== */
.pl-icon-btn, .pl-exit, .pl-modes, .wk-select { height: 40px; }
.pl-mode { height: 32px; }
/* Przyciski akcji „Nowa" + „✕" — jednakowa szerokość i wysokość, zgrupowane po prawej */
.wk-topbar .pl-icon-btn, .g2048-topbar .pl-icon-btn, .mem-topbar .pl-icon-btn,
.szu-topbar .pl-icon-btn, .sdk-topbar .pl-icon-btn,
.wk-topbar .pl-exit, .g2048-topbar .pl-exit, .mem-topbar .pl-exit,
.szu-topbar .pl-exit, .sdk-topbar .pl-exit {
  width: 90px; min-width: 90px; padding: 0; justify-content: center; flex-shrink: 0;
}
/* 2048 / Pary / Sudoku — brak elementu wypełniającego, więc grupujemy kafelki
   razem i centrujemy (bez dużej przerwy od margin-left:auto) */
.g2048-topbar, .mem-topbar, .sdk-topbar { justify-content: center; }
.g2048-topbar .pl-icon-btn, .mem-topbar .pl-icon-btn, .sdk-topbar .pl-icon-btn,
.g2048-topbar .pl-exit, .mem-topbar .pl-exit, .sdk-topbar .pl-exit { margin-left: 0; }
.wk-topbar .pl-exit, .szu-topbar .pl-exit { margin-left: 0; }

/* Sudoku — połączone, pełnowysokie kafelki trudności (równe z Nowa/✕) */
.sdk-topbar .pl-modes { gap: 0; padding: 0; }
.sdk-topbar .pl-mode { height: 40px; min-width: 78px; border-radius: 8px; }

/* 2048 — statystyki jako jeden połączony kafelek wyrównany do wysokości przycisków */
.g2048-stats { gap: 0; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.g2048-stat { height: 40px; min-width: 64px; justify-content: center; border: none; border-radius: 0; background: rgba(0,0,0,.32); padding: 2px 14px; }
.g2048-stat + .g2048-stat { border-left: 1px solid var(--border-strong); }

/* Pięć Liter — wszystkie kafelki paska tej samej wielkości, zgrupowane bez dużej przerwy */
.pl-topbar { justify-content: center; }
#view-piecliter .pl-modes { gap: 0; flex: 0 0 auto; }
#view-piecliter .pl-mode {
  width: 116px; flex: 0 0 auto; text-align: center; justify-content: center;
  padding: 0 6px; font-size: .82rem; white-space: nowrap;
}
#view-piecliter .pl-topbar-actions .pl-icon-btn,
#view-piecliter .pl-topbar-actions .pl-exit { width: 116px; min-width: 116px; padding: 0; justify-content: center; white-space: nowrap; }

/* ===== Niskie ekrany — kompaktowanie gier, by nic nie uciekało w pionie ===== */
@media (max-height: 720px) {
  #view-mw, #view-blitz, #view-survival, #view-quick,
  #view-piecliter, #view-wykreslanka, #view-quickmatch,
  #view-g2048, #view-memory, #view-szubienica, #view-sudoku { padding-top: 8px; padding-bottom: calc(var(--sa-bot) + 8px); }
  .pl-credit { display: none; }
  .pl-date { margin: 4px 0 8px; font-size: .82rem; }
  .pl-message { min-height: 16px; margin-bottom: 6px; }
  .wk-grid { width: min(92vw, 500px, 48svh); }
  .game-intro .intro-top { display: none; }
}
@media (max-height: 560px) {
  .pl-date { display: none; }
  .pl-message { min-height: 0; }
  .pl-modes .pl-mode { padding: 5px 12px; font-size: .8rem; }
  .wk-words { gap: 5px; }
  .wk-word { padding: 4px 9px; font-size: .8rem; }
  .wk-grid { width: min(92vw, 460px, 46svh); }
  .lifelines { margin-bottom: 6px; }
}

.mp-end {
  text-align: center;
}
.mp-end h2 { color: var(--gold); margin: 0 0 18px; font-size: 2rem; }
.mp-final-table {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.mp-final-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
}
.mp-final-row.place-1 {
  background: linear-gradient(135deg, rgba(255,206,58,.22), rgba(0,0,0,.3));
  border-color: rgba(255,206,58,.5);
}
.mp-final-row .mft-place { font-size: 1.4rem; min-width: 40px; }
.mp-final-row .mft-name { flex: 1; font-weight: 600; }
.mp-final-row .mft-score { color: var(--gold); font-weight: 700; }

.mp-end .btn-primary {
  max-width: 480px;
  margin: 0 auto;
  display: block;
}
.mp-end-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 18px;
}

/* Slot machine */
.mp-slot {
  max-width: 480px;
  margin: 0 auto 22px;
  padding: 28px 20px;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-card-solid) 100%);
  border: 2px solid var(--border-strong);
  border-radius: 18px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.mp-slot.hidden { display: none; }
.mp-slot-place {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 10px;
}
.mp-slot-name {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
  min-height: 2.6rem;
  transition: transform .25s ease;
}
.mp-slot.spinning .mp-slot-name {
  animation: slotShake .12s ease-in-out infinite alternate;
}
.mp-slot.settled .mp-slot-name {
  animation: slotPop .5s ease-out;
}
.mp-slot-score {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
  min-height: 1.5rem;
}
.mp-slot.settled .mp-slot-score {
  animation: slotFadeIn .4s ease;
}
@keyframes slotShake {
  from { transform: translateY(-2px); }
  to   { transform: translateY(2px); }
}
@keyframes slotPop {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes slotFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mp-fade-in {
  animation: mpFadeIn .4s ease;
}
@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ REVIEW MODAL ============ */
.review-modal-card {
  max-width: 640px;
  max-height: 88vh;
  text-align: left;
  display: flex; flex-direction: column;
}
.review-modal-card h3 {
  margin: 0 0 6px;
  text-align: center;
}
.review-summary {
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.review-summary .rs-correct { color: var(--green); font-weight: 700; }
.review-summary .rs-wrong { color: var(--red); font-weight: 700; }

.review-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 12px;
  padding-right: 4px;
}
.review-item {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 12px 14px;
}
.review-item.correct { border-left-color: var(--green); }
.review-item .rv-num {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.review-item .rv-num .rv-status {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(231, 76, 60, 0.18);
  color: #ff7d6f;
}
.review-item.correct .rv-num .rv-status {
  background: rgba(46, 204, 113, 0.18);
  color: var(--green);
}
.review-item .rv-q {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.35;
}
.review-item .rv-flag {
  display: flex; justify-content: center;
  margin: 4px 0 10px;
}
.review-item .rv-flag img {
  height: 60px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.review-item .rv-answers {
  display: flex; flex-direction: column; gap: 4px;
}
.review-item .rv-answer {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.85rem;
}
.review-item .rv-answer .rv-letter {
  font-weight: 700;
  width: 18px;
  color: var(--muted);
}
.review-item .rv-answer.is-correct {
  background: rgba(46, 204, 113, 0.18);
  color: #fff;
}
.review-item .rv-answer.is-correct .rv-letter { color: var(--green); }
.review-item .rv-answer.is-chosen-wrong {
  background: rgba(231, 76, 60, 0.20);
  color: #fff;
  text-decoration: line-through;
}
.review-item .rv-answer.is-chosen-wrong .rv-letter { color: var(--red); }
.review-item .rv-answer .rv-icon { margin-left: auto; }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  color: var(--text);
  font-size: 0.9rem;
  z-index: 200;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ============ AUTH MODAL ============ */
.auth-modal { text-align: left; max-width: 420px; }
.auth-tabs {
  display: flex; gap: 6px; margin-bottom: 18px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}
.tab {
  flex: 1; padding: 10px;
  color: var(--muted); border-radius: 8px;
  font-weight: 600; font-size: var(--fs-sm);
  transition: background .15s, color .15s;
}
.tab.active { background: rgba(255, 206, 58, 0.18); color: var(--gold); }

.auth-form { display: none; flex-direction: column; gap: 14px; }
.auth-form.active { display: flex; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label[hidden] { display: none !important; }
.auth-form label > span {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-form input {
  width: 100%; padding: 13px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-base);
  min-height: 46px;
  transition: border-color .15s, background .15s;
}
.auth-form input:focus {
  outline: none; border-color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
}
/* formularze w modalach (przypomnij/ustaw hasło) — styl pól bez przełączania zakładek */
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form label { display: flex; flex-direction: column; gap: 6px; }
.modal-form label > span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.modal-form input { width: 100%; padding: 13px 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-base); min-height: 46px; transition: border-color .15s, background .15s; }
.modal-form input:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.4); }
.form-error {
  min-height: 18px;
  font-size: var(--fs-xs);
  color: var(--red); font-weight: 600;
}
.hint {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 4px 0 0;
}
.auth-close { margin-top: 14px; }

/* ===== Phone friend / audience visualization ===== */
#info-body { text-align: left; margin-bottom: 16px; }
.phone-tip {
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  border-radius: 8px;
  font-style: italic;
  font-size: var(--fs-sm);
}
.audience-bars { display: flex; flex-direction: column; gap: 10px; }
.audience-bar {
  display: grid;
  grid-template-columns: 28px 1fr 56px;
  align-items: center; gap: 10px;
  font-size: var(--fs-sm);
}
.audience-bar .bar-letter { font-weight: 700; color: var(--gold); text-align: center; }
.audience-bar .bar-track {
  height: 18px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  overflow: hidden;
}
.audience-bar .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);
  width: 0;
  transition: width .8s ease;
}
.audience-bar .bar-pct {
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ============ SIDEBAR — ROZWIJANE KATEGORIE ============ */
.nav-cat-group {
  display: flex;
  flex-direction: column;
}
.nav-cat-toggle {
  font-weight: 600;
}
.nav-cat-toggle > span:not(.nav-icon):not(.chev) {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-cat-toggle .chev {
  margin-left: auto;
  transition: transform .2s;
  opacity: .55;
  font-size: 0.7rem;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.nav-cat-toggle:hover .chev { opacity: .9; background: rgba(255, 255, 255, 0.10); }
.nav-cat-toggle.expanded .chev { transform: rotate(180deg); opacity: 1; }
.nav-cat-children {
  display: none;
  margin: 1px 0 4px 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  flex-direction: column;
  gap: 1px;
}
.nav-cat-children.expanded { display: flex; }
.nav-item.nav-sub {
  padding: 5px 8px;
  font-size: 0.78rem;
}
.nav-item.nav-sub .nav-icon {
  width: 18px; height: 18px;
  font-size: 0.85rem;
}
.nav-item.nav-sub-all {
  background: rgba(255, 206, 58, 0.06);
  color: var(--gold);
  font-weight: 600;
}
.nav-item.nav-sub-all:hover {
  background: rgba(255, 206, 58, 0.14);
}

/* ============ HOME — sekcje per kategoria ============ */
.cat-section { margin-bottom: 32px; }
.cat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cat-header h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.cat-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  font-size: 1.3rem;
}
.cat-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
}

.tag-flag {
  background: rgba(231, 76, 60, 0.15) !important;
  color: #ff7d6f !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
}
.tag-gold {
  background: rgba(255, 206, 58, 0.18) !important;
  color: var(--gold) !important;
  border-color: rgba(255, 206, 58, 0.45) !important;
}

/* Karta "Wszystkie" wyróżniona */
.quiz-card.all-card {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 206, 58, 0.10) 0%, var(--bg-card) 60%);
  border-color: rgba(255, 206, 58, 0.40);
}
.quiz-card.all-card .quiz-emoji {
  font-size: 3rem; flex-shrink: 0;
}

/* Sidebar — wirtualna kategoria "Wszystkie" */
.nav-cat-all .nav-all {
  background: linear-gradient(90deg, rgba(255, 206, 58, 0.10), transparent);
  border: 1px solid rgba(255, 206, 58, 0.25);
  margin-bottom: 6px;
  font-weight: 600;
}
.nav-cat-all .nav-all:hover {
  background: linear-gradient(90deg, rgba(255, 206, 58, 0.20), rgba(255, 206, 58, 0.05));
}

/* Drobny tip na home */
.hint-text {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 24px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}

/* ============ QUIZ FLAG ============ */
.flag-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(4px, 1svh, 10px) 0;
  padding: clamp(6px, 1.4svh, 16px);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.flag-display img {
  width: auto;
  max-width: min(300px, 72%);
  height: auto;
  max-height: clamp(70px, 20svh, 200px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background: #fff;
}

/* ============ UTILS ============ */
.hidden { display: none !important; }

/* ============ SCROLLBARS ============ */
.sidebar::-webkit-scrollbar,
.view::-webkit-scrollbar,
.ladder::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb,
.view::-webkit-scrollbar-thumb,
.ladder::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* ============ RESPONSIVE: MOBILE (≤ 900px) ============ */
@media (max-width: 900px) {
  #app {
    display: flex;
    flex-direction: column;
  }
  .mobile-topbar { display: flex !important; flex-shrink: 0; position: relative; top: auto; z-index: 30; }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(82vw, 320px);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: block; }

  .view { padding: 14px 14px calc(var(--sa-bot) + 14px); }
  .hero { padding: 20px; flex-direction: column; align-items: flex-start; }
  .hero-cta { width: 100%; }
  .quiz-card.featured { flex-direction: column; align-items: flex-start; }
}

/* ===== TABLET: two-column answers ===== */
@media (min-width: 560px) {
  .answers { grid-template-columns: 1fr 1fr; }
}

/* ===== MOBILE LADDER as drawer ===== */
.ladder-close {
  display: none; /* widoczny tylko na mobile gdy drawer open */
}
.ladder-backdrop {
  display: none;
}

@media (max-width: 900px) {
  #view-mw .ladder {
    position: fixed;
    top: 0; right: 0;
    width: min(75vw, 280px);
    height: 100dvh;
    z-index: 45;
    transform: translateX(100%);
    transition: transform .25s ease;
    background: rgba(10, 25, 60, 0.97);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    padding: calc(var(--sa-top) + 50px) 14px calc(var(--sa-bot) + 14px);
    border-radius: 0;
  }
  #view-mw .ladder.open { transform: translateX(0); }
  #ladder-toggle { display: inline-flex; }

  #view-mw .ladder .ladder-close {
    display: inline-flex;
    position: absolute;
    top: calc(var(--sa-top) + 10px);
    right: 10px;
    width: 36px; height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    z-index: 46;
  }
  #view-mw .ladder .ladder-close:hover {
    background: rgba(231, 76, 60, 0.30);
    border-color: rgba(231, 76, 60, 0.5);
    color: #ff7d6f;
  }

  .ladder-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 44;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .ladder-backdrop.open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 901px) {
  #ladder-toggle { display: none; }
}

/* ===== Quick match 1v1 ===== */
.quick-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255,206,58,.12), rgba(255,206,58,.02));
  border: 1px solid rgba(255,206,58,.32);
  border-radius: 14px;
}
.quick-card-text { flex: 1; min-width: 0; }
.quick-card-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
/* Przycisk to .btn-primary (width:100%) — w karcie flex wypychał tekst do zera.
   Tu ma brać tylko tyle, ile potrzebuje, a tekst dostaje resztę. */
.quick-card .btn-primary { width: auto; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .quick-card { flex-direction: column; align-items: stretch; }
  .quick-card .btn-primary { width: 100%; }
}

.qm-queue, .qm-end {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 40px 20px; gap: 18px; max-width: 600px; margin: 0 auto;
}
.qm-spinner {
  width: 48px; height: 48px; border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: qm-spin 1s linear infinite;
}
@keyframes qm-spin { to { transform: rotate(360deg); } }

.qm-scoreboard {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 12px;
}
.qm-score-box {
  flex: 1; max-width: 220px;
  background: rgba(0,0,0,.30); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; text-align: center;
}
.qm-score-name { font-size: 0.8rem; color: var(--muted); margin-bottom: 2px; }
.qm-score-pts { font-size: 1.6rem; font-weight: 800; color: var(--gold); }
.qm-vs { font-size: 1.2rem; font-weight: 800; color: var(--muted); }

.qm-cat-tag {
  display: inline-block;
  align-self: center;
  padding: 4px 12px;
  background: rgba(255,206,58,.12);
  border: 1px solid rgba(255,206,58,.3);
  border-radius: 99px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.qm-opp-status {
  text-align: center; padding: 8px;
  font-size: 0.85rem; color: var(--muted);
}
.qm-opp-dot { display: inline-block; padding: 4px 10px; border-radius: 99px;
  background: rgba(0,200,80,.15); color: #79e09b; font-size: 0.78rem; }
.qm-delta { font-weight: 600; }

.qm-end-icon { font-size: 4rem; margin-bottom: 6px; }
.qm-end-scores {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 14px 0;
}

/* ===== Strony prawne (regulamin, polityka) ===== */
.legal-page { background: var(--bg-0); color: var(--text); margin: 0; padding: 32px 20px; height: 100dvh; height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.legal-doc {
  max-width: 880px; margin: 0 auto;
  line-height: 1.6;
}
.legal-doc h1 { font-size: 1.8rem; margin-top: 8px; }
.legal-doc h2 { font-size: 1.2rem; margin-top: 24px; color: var(--gold); }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc li { margin: 6px 0; }
.legal-doc a { color: var(--gold); }
.legal-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.legal-back { margin-bottom: 8px; }
.legal-back a { font-size: 0.9rem; color: var(--muted); text-decoration: none; }
.legal-back a:hover { color: var(--text); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 12px 0; }
.legal-table th, .legal-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table th { color: var(--gold); font-weight: 600; }

/* Stopka prawna w sidebarze */
.sidebar-legal {
  padding: 6px 4px 0;
  display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap;
  font-size: 0.68rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  flex-shrink: 0;
}
.sidebar-legal a { color: var(--muted, #888); text-decoration: none; }
.sidebar-legal a:hover { color: var(--fg, #e8e8ea); }

/* Checkbox akceptacji w Premium */
.premium-tos {
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 0.88rem;
}
.premium-tos label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; }
.premium-tos input[type="checkbox"] { margin-top: 2px; transform: scale(1.15); accent-color: var(--gold, #ffce3a); }
.premium-tos a { color: var(--gold, #ffce3a); }
.premium-tos .tos-info {
  margin: 10px 0 0; padding: 10px 12px;
  background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.25);
  border-radius: 8px; font-size: 0.82rem; color: var(--muted); line-height: 1.45;
}
.premium-tos .tos-info strong { color: var(--text); }
.premium-tier .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Lista zakupów Premium */
.premium-purchases { margin-top: 20px; }
.purchase-card {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px 14px; margin: 8px 0;
  background: rgba(0,0,0,.30); border: 1px solid var(--border);
  border-radius: 10px;
}
.purchase-card.refunded { opacity: 0.6; }
.pc-main { flex: 1; min-width: 200px; }
.pc-title { font-weight: 700; }
.pc-meta { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.pc-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 600;
}
.pc-badge.window { background: rgba(46,204,113,.18); color: #79e09b; }
.pc-badge.expired { background: rgba(255,255,255,.06); color: var(--muted); }
.pc-badge.refunded { background: rgba(231,76,60,.18); color: #ee9b94; }
.pc-actions { display: flex; gap: 8px; align-items: center; }
.btn-withdraw {
  padding: 8px 14px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text); font-size: 0.85rem; font-weight: 600;
}
.btn-withdraw:hover { background: rgba(231,76,60,.10); border-color: rgba(231,76,60,.4); color: #ee9b94; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============ KAFELEK ZGŁOSZEŃ + MODAL ============ */
.sidebar-report-card {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(52,152,219,.12), rgba(52,152,219,.03));
  border: 1px solid rgba(52,152,219,.30);
  border-radius: 8px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sidebar-report-card:hover {
  background: linear-gradient(135deg, rgba(52,152,219,.22), rgba(52,152,219,.05));
  border-color: rgba(52,152,219,.5);
}
.sidebar-report-card .sr-icon { font-size: 1.1rem; }
.sidebar-report-card .sr-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.sidebar-report-card .sr-text strong { font-size: 0.8rem; }
.sidebar-report-card .sr-sub { font-size: 0.67rem; color: var(--muted); }

.report-modal { max-width: 480px; text-align: left; position: relative; }
.report-intro { color: var(--muted); font-size: 0.88rem; margin: 4px 0 14px; }
.report-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.report-select, .report-textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
}
.report-textarea { resize: vertical; min-height: 96px; }
.report-count { text-align: right; font-size: 0.72rem; color: var(--muted); margin-top: 3px; }

/* ============ ADMIN: zakładki dodatkowe ============ */
.admin-subtitle { font-size: 1rem; font-weight: 700; margin: 4px 0 10px; color: var(--text); }
.admin-rep-filter-btn {
  padding: 7px 13px; border-radius: 7px; font-size: 0.82rem; font-weight: 600;
  color: var(--muted); background: transparent;
}
.admin-rep-filter-btn:hover { color: var(--text); }
.admin-rep-filter-btn.active { background: rgba(255,206,58,.18); color: var(--gold); }

.stat-card.clickable { cursor: pointer; transition: transform .12s, border-color .15s; }
.stat-card.clickable:hover { transform: translateY(-2px); border-color: rgba(255,206,58,.5); }
.stat-card.alert { border-color: rgba(231,76,60,.55); background: rgba(231,76,60,.08); }

.admin-reports-list { display: flex; flex-direction: column; gap: 8px; }
.admin-report-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.admin-report-row.resolved { opacity: 0.62; }
.admin-report-row .arr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-report-row .arr-type { font-weight: 700; font-size: 0.88rem; }
.admin-report-row .arr-meta { font-size: 0.72rem; color: var(--muted); margin-left: auto; }
.admin-report-row .arr-msg { font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.admin-report-row .arr-target { font-size: 0.84rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-report-row .arr-context { font-size: 0.92rem; line-height: 1.4; padding: 7px 11px; margin-bottom: 8px; border-left: 3px solid #ff7d6f; background: rgba(255,125,111,.08); border-radius: 0 6px 6px 0; white-space: pre-wrap; word-break: break-word; }

/* ============ STATKI (Battleship) ============ */
.st-hero { background: linear-gradient(135deg, rgba(41,128,185,.18), rgba(41,128,185,.04)); }
.st-rules-btn { margin-top: 8px; }

.st-turn {
  text-align: center; font-weight: 700; padding: 9px 12px; border-radius: 10px;
  margin: 8px auto 12px; max-width: 680px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted);
}
.st-turn.you { background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.5); color: var(--text); }

.st-boards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.st-board-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.st-board-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); }

.st-board { --stc: clamp(20px, 3.3vw, 32px); display: inline-block; user-select: none; }
.st-row { display: flex; }
.st-hcell, .st-corner {
  width: var(--stc); height: var(--stc);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: var(--muted); font-weight: 700;
}
.st-cell {
  width: var(--stc); height: var(--stc);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(13,52,89,.55);
  font-size: calc(var(--stc) * 0.55); line-height: 1;
}
.st-cell.ship { background: #5b6470; }
.st-cell.hit { background: #c0392b; }
.st-cell.sunk { background: #7b241c; }
.st-cell.miss { background: rgba(13,52,89,.55); color: rgba(255,255,255,.45); }
.st-cell.aim { cursor: crosshair; }
.st-cell.aim:hover { background: rgba(46,204,113,.35); box-shadow: inset 0 0 0 2px rgba(46,204,113,.7); }

.st-place-wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.st-place-side { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.st-palette { display: flex; flex-direction: column; gap: 6px; }
.st-ship-btn {
  text-align: left; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);
  font-size: 0.82rem; cursor: pointer; letter-spacing: 1px;
}
.st-ship-btn.sel { border-color: var(--gold); background: rgba(255,206,58,.14); }
.st-ship-btn.done { color: var(--muted); opacity: .65; letter-spacing: 0; }
.st-place-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.st-place-actions .btn-ghost { flex: 1; }
.st-opp-status { font-size: 0.8rem; color: var(--muted); text-align: center; min-height: 1em; }
.st-place-wait { text-align: center; }

.st-result { text-align: center; font-size: 1.4rem; font-weight: 800; margin-bottom: 14px; }
.st-result.win { color: var(--green); }
.st-result.lose { color: #e74c3c; }
.st-ended { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.st-rules p { margin: 7px 0; font-size: 0.9rem; line-height: 1.45; }

.mp-auth-gate { margin: 24px auto; max-width: 460px; }

/* Statki — gwarancja identycznych, kwadratowych komórek na obu planszach (1:1) */
.st-board .st-cell,
.st-board .st-hcell,
.st-board .st-corner {
  flex: 0 0 var(--stc);
  box-sizing: border-box;
}

/* ============ STATKI v2 — wizualne statki + drag&drop ============ */
#st-screen { --stc: clamp(22px, 3.1vw, 34px); }
/* ekran końcowy: obie plansze zawsze obok siebie (poziomo), przeskalowane by się zmieściły */
.st-ended { --stc: clamp(13px, 3.5vw, 30px); }
.st-ended .st-boards { flex-wrap: nowrap; gap: 10px; align-items: flex-start; justify-content: center; }
.st-ended .st-board-col { min-width: 0; }
.st-board2 { display: inline-block; user-select: none; }
.st-b2-colhead { display: flex; }
.st-b2-body { display: flex; }
.st-b2-rowhead { display: flex; flex-direction: column; }
.st-board2 .st-hcell, .st-board2 .st-corner {
  width: var(--stc); height: var(--stc); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: var(--muted);
}
.st-cells {
  position: relative;
  width: calc(var(--stc) * 10); height: calc(var(--stc) * 10);
  touch-action: none;
}
.st-cells-grid { display: grid; grid-template-columns: repeat(10, var(--stc)); grid-template-rows: repeat(10, var(--stc)); }
.st-board2 .st-cell {
  width: var(--stc); height: var(--stc); box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(13,52,89,.55);
}
.st-board2 .st-cell.aim { cursor: crosshair; }
.st-board2 .st-cell.aim:hover { background: rgba(46,204,113,.30); box-shadow: inset 0 0 0 2px rgba(46,204,113,.7); }

/* statek jako kadłub */
.st-ship { position: absolute; padding: 2px; box-sizing: border-box; z-index: 2; touch-action: none; }
.st-ship.yard { position: relative; }
.st-ship.draggable { cursor: grab; }
.st-ship.draggable:active { cursor: grabbing; }
.st-ship-body {
  display: flex; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--stc) * 0.34);
  background: linear-gradient(180deg, #9aa3ad 0%, #6b747e 55%, #4a525b 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4);
}
.st-ship.v .st-ship-body { flex-direction: column; }
.st-seg { flex: 1; border-right: 1px solid rgba(0,0,0,.22); }
.st-ship.v .st-seg { border-right: none; border-bottom: 1px solid rgba(0,0,0,.22); }
.st-seg:last-child { border: none; }
.st-ship-body::after {
  content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 2px;
  transform: translateY(-50%); background: rgba(0,0,0,.18); border-radius: 2px;
}
.st-ship.sunk .st-ship-body { background: linear-gradient(180deg, #b0392c, #6e1b12); filter: saturate(.8); }

/* znaczniki strzałów */
.st-mark {
  position: absolute; width: var(--stc); height: var(--stc); z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-size: calc(var(--stc) * 0.62);
}
.st-mark.miss { color: rgba(255,255,255,.55); font-size: calc(var(--stc) * 0.5); }

/* stocznia (dock) */
.st-yard-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.st-yard { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 10px; }
.st-yard-item { display: flex; align-items: center; gap: 12px; }
.st-yard-name { font-size: 0.8rem; color: var(--muted); }
.st-yard-empty { color: var(--green); font-size: 0.85rem; }

/* duch przeciągania */
.st-ship-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .9; padding: 2px; box-sizing: border-box; }
.st-ship-ghost .st-ship-body {
  display: flex; width: 100%; height: 100%; border-radius: 9px;
  background: linear-gradient(180deg, #9aa3ad, #5a626b);
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.st-ship-ghost.v .st-ship-body { flex-direction: column; }
.st-ship-ghost.bad .st-ship-body { background: linear-gradient(180deg, #e74c3c, #7b241c); }

/* statusy zaproszeń */
.pm-friend-sent { font-size: 0.78rem; color: var(--gold); }
.pm-friend-status { font-size: 0.78rem; color: var(--muted); margin-right: 6px; }
.pm-friend-status.declined { color: #e74c3c; }
.pm-friend-row .friend-btn { white-space: nowrap; }

/* ============ DZWONEK POWIADOMIEŃ ============ */
.brand { position: relative; }
.notif-bell {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; position: relative; padding: 5px; border-radius: 8px; color: var(--text);
}
.notif-bell:hover { background: rgba(255,255,255,.08); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: #e74c3c; color: #fff; font-size: .6rem; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.6);
  z-index: 300; padding: 8px; max-height: 60vh; overflow-y: auto;
}
.notif-item { background: rgba(255,255,255,.04); }
.notif-head { font-weight: 700; font-size: .85rem; padding: 2px 6px 8px; }
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item { border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.notif-text { font-size: .82rem; line-height: 1.35; margin-bottom: 7px; }
.notif-game { font-weight: 700; color: var(--gold); }
.notif-actions { display: flex; gap: 6px; }
.notif-actions .friend-btn { flex: 1; }
.notif-empty { font-size: .82rem; color: var(--muted); padding: 8px 6px; text-align: center; }

/* ujednolicone lobby gier MP (3 kolumny + chat) */
#pm-screen .lobby-grid, #kal-screen .lobby-grid, #st-screen .lobby-grid { padding: 0; }
.lobby-players { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.lobby-player { padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby-player .lp-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lobby-cfg .cfg-row, .lobby-cfg label.cfg-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; min-height: 38px; }
.lobby-cfg label.cfg-row { cursor: pointer; margin: 0; }
.lobby-cfg .cfg-row .cfg-label { white-space: nowrap; }
.lobby-col .cfg-row select.wk-select { margin-left: auto; width: auto; min-width: 92px; max-width: 150px; height: 36px; box-sizing: border-box; }
.chat-msg { padding: 3px 2px; font-size: .85rem; line-height: 1.35; word-break: break-word; }
.chat-msg b { color: var(--gold); }
.chat-msg.system { color: var(--muted); font-style: italic; }
.lobby-col .lobby-chat { display: flex; flex-direction: column; min-height: 260px; }
.lobby-col .chat-messages { flex: 1; min-height: 180px; max-height: 360px; overflow-y: auto; }

/* lobby gier MP na pełną szerokość (jak Brainshow) */
#pm-screen.screen-wide, #kal-screen.screen-wide, #st-screen.screen-wide {
  max-width: none; padding: 8px 18px 18px;
}

/* mobile: dzwonek nie może nachodzić na ✕ zamykania sidebara */
@media (max-width: 900px) {
  .brand { padding-right: 48px; }
  /* panel powiadomień przypięty do ekranu, nie wyjeżdża poza sidebar/widok */
  .notif-panel { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; max-width: none; max-height: 70vh; }
}

/* mały przycisk Zasady w banerze gier MP + wynik best-of */
.pm-hero-text { flex: 1; min-width: 0; }
.pm-hero { flex-wrap: wrap; }
.pm-rules-btn { width: auto; flex: 0 0 auto; margin-left: auto; align-self: center; padding: 7px 13px; font-size: .82rem; }
.st-score { font-size: .85rem; color: var(--text); white-space: nowrap; margin-left: 6px; }
.st-score strong { color: var(--gold); }
.st-score-sub { text-align: center; color: var(--muted); margin: 2px 0 12px; font-size: .95rem; }
@media (max-width: 560px) { .pm-rules-btn { padding: 5px 9px; font-size: .72rem; } }

.hero-actions { display: flex; flex-direction: row-reverse; gap: 10px; align-items: center; }
.hero-actions .btn-primary, .hero-actions .btn-ghost { width: auto; min-width: 175px; padding: 14px 22px; justify-content: center; }
@media (max-width: 700px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; min-width: 0; }
}

/* ===== MOBILE: gry MP (menu Stwórz/Dołącz + pokoje) — pełna szerokość, bez wyjeżdżania poza ekran ===== */
@media (max-width: 900px) {
  #pm-screen, #kal-screen, #st-screen,
  #pm-screen.screen-wide, #kal-screen.screen-wide, #st-screen.screen-wide {
    max-width: 100%; width: 100%; padding: 8px 10px 16px; overflow-x: hidden;
  }
  /* lobby 3-kolumnowe → jedna kolumna na telefonie */
  .lobby-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .lobby-col, .lobby-chat-col { min-width: 0; }
  /* menu Stwórz pokój / Dołącz po kodzie → jedna kolumna */
  .mp-cols, .pm-cols { grid-template-columns: 1fr !important; }
  .pm-block, .mp-col-card { min-width: 0; }
  /* baner gry — emoji/tekst/Zasady w pionie, nic nie wystaje */
  .pm-hero { flex-direction: column; align-items: stretch; text-align: left; }
  .pm-hero .pm-rules-btn { margin-left: 0; align-self: flex-start; }
  .pm-hero-text h1 { font-size: 1.3rem; }
  /* topbar pokoju — przycisk wyjścia nie nachodzi na kod */
  .game-topbar { flex-wrap: wrap; gap: 8px; }
  /* pola i selecty nie szersze niż ekran */
  .pm-code-input, .wk-select, .pm-code-input, .lobby-col input, .join-form input { max-width: 100%; width: 100%; }
  .lobby-col .cfg-row select.wk-select { width: auto; max-width: 60%; }
  .chat-form { display: flex; gap: 6px; }
  .chat-form .rchat-input { min-width: 0; flex: 1; }
  /* planszowe gry nie rozpychają layoutu */
  .st-boards { gap: 12px; }
  /* „Liczba rund" w menu Stwórz pokój — zawsze w jednej linii */
  .pm-block .pm-row { flex-wrap: nowrap; white-space: nowrap; justify-content: space-between; }
  .pm-block .pm-row .wk-select { flex: 0 0 auto; min-width: 0; width: auto; }
}

/* ============ PAŃSTWA-MIASTA — licznik, odliczanie, tabela, gotowość ============ */
.pm-timer-center { display: flex; justify-content: center; margin: 2px 0 10px; }
.pm-timer-center .pm-timer { font-size: 1.05rem; }

.pm-countdown { align-items: center; text-align: center; gap: 14px; }
.pm-cd-label { font-size: 1rem; color: var(--muted); font-weight: 600; }
.pm-cd-num { font-size: 1.1rem; color: var(--gold); font-weight: 700; }
.pm-letter-spin { animation: pmSpin .35s linear infinite; color: var(--gold); }
@keyframes pmSpin { 0% { transform: scale(.92); opacity:.6; } 50% { transform: scale(1.05); opacity:1; } 100% { transform: scale(.92); opacity:.6; } }

.pm-section-h { font-size: 1.05rem; margin: 4px 0 10px; }
.pm-answers-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.pm-answers-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pm-answers-table th, .pm-answers-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; vertical-align: middle; }
.pm-answers-table thead th { background: rgba(255,255,255,.06); font-size: .8rem; }
.pm-answers-table .pm-tbl-cat { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; background: rgba(255,255,255,.03); }
.pm-tcell { position: relative; }
.pm-tc-text { display: block; }
.pm-tc-pts { display: block; font-size: .7rem; font-weight: 700; opacity: .85; margin-top: 2px; }
.pm-tcell.pm-a-unique { background: rgba(46,204,113,.16); }
.pm-tcell.pm-a-dup { background: rgba(241,196,15,.14); }
.pm-tcell.pm-a-unknown { background: rgba(52,152,219,.14); }
.pm-tcell.pm-a-rejected, .pm-tcell.pm-a-bad { background: rgba(231,76,60,.14); }
.pm-tcell.pm-a-empty { color: var(--muted); }
.pm-tbl-totals th, .pm-tbl-totals td { background: rgba(0,0,0,.25); font-weight: 800; }
.pm-tc-total { color: var(--gold); }

.pm-vote-box { background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.pm-vote-tally { font-size: .78rem; color: var(--muted); margin-left: 8px; white-space: nowrap; }

.pm-ready-box { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 6px; }
.pm-ready-count-inline { font-weight: 700; font-size: .92rem; color: var(--muted); white-space: nowrap; }
.pm-ready-count-inline #pm-ready-count { color: var(--green); }
.mp-prequestion-sub { margin-top: 8px; font-size: .9rem; color: var(--muted); font-weight: 600; }

/* ===== Strona główna — turniej (lewo, wysoki) + 6 kafelków (prawo, 3×2) ===== */
.home-hero-layout { display: flex; flex-wrap: nowrap; gap: 16px; align-items: stretch; }
.home-hero-tile-tall { flex: 0 0 26%; aspect-ratio: auto; }
.home-hero-tile-tall .home-hero-tile-label { font-size: clamp(1.1rem, 2vw, 1.6rem); }
/* prawa siatka — większe kafelki (proporcja 3:2 zamiast 16:9) */
.home-hero-tiles { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-hero-tiles .home-hero-tile { aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
  .home-hero-layout { flex-direction: column; }
  .home-hero-tile-tall { flex: none; aspect-ratio: 16 / 9; }
}

/* desktop: blok kafelków wypełnia całą wysokość strony głównej */
@media (min-width: 761px) {
  #view-home.active { display: flex; flex-direction: column; }
  #view-home > .hero { flex: 0 0 auto; }
  #view-home #home-categories { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #view-home #home-categories > .cat-section:first-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
  #view-home #home-categories > .cat-section:first-child .home-hero-layout { flex: 1 1 auto; min-height: 360px; }
  /* kafelki dzielą wysokość po równo (2 rzędy), bez sztywnej proporcji */
  #view-home .home-hero-tiles { grid-template-rows: repeat(2, 1fr); }
  #view-home .home-hero-tiles .home-hero-tile { aspect-ratio: auto; }
}
.home-hero-tile {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 9; cursor: pointer;
  border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(0,0,0,.40);
  transition: transform .18s, box-shadow .18s;
}
.home-hero-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.home-hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.home-hero-tile:hover img { transform: scale(1.06); }
.home-hero-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 45%, transparent 72%);
}
.home-hero-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 16px; color: #fff; font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: .3px;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
@media (max-width: 760px) { .home-hero-tiles { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 440px) { .home-hero-tiles { grid-template-columns: 1fr; } }

/* TYMCZASOWO: ukryj wszystko poniżej kafelków graficznych na stronie głównej.
   Aby przywrócić — usuń tę regułę. */
#home-categories > .cat-section:not(:first-child) { display: none !important; }
/* Nick gracza po akceptacji (Dalej/Gotowy) — zielono */
.pm-answers-table th[data-pm-nick].pm-nick-ready { color: var(--green); }
.pm-answers-table th[data-pm-nick].pm-nick-ready::after { content: " ✓"; }
.pm-stand-card[data-pm-nick].pm-nick-ready {
  background: linear-gradient(135deg, rgba(46,204,113,.24), rgba(46,204,113,.06));
  border-color: rgba(46,204,113,.6);
}
.pm-stand-card[data-pm-nick].pm-nick-ready .pm-stand-name { color: var(--green); }
.pm-stand-card[data-pm-nick].pm-nick-ready .pm-stand-name::after { content: " ✓"; color: var(--green); font-weight: 800; }
.pm-ready-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pm-ready-row { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: .82rem; }
.pm-ready-badge { font-size: .72rem; color: var(--muted); }
.pm-ready-badge.on { color: var(--green); font-weight: 700; }
.pm-ready-box .btn-primary { width: auto; min-width: 220px; }
.pm-standings-screen { display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* PM — głosowanie w komórkach tabeli */
.pm-tcell { min-width: 96px; }
.pm-tc-vote { display: inline-flex; gap: 3px; justify-content: center; margin-top: 4px; }
.pm-tc-vote .pm-vote-btn { padding: 1px 6px; font-size: .9rem; line-height: 1.2; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid var(--border); cursor: pointer; }
.pm-tc-vote .pm-vote-btn.chosen { background: var(--gold); }
.pm-tc-vote .pm-vote-btn:disabled { opacity: .5; cursor: default; }
.pm-tc-own { display: block; font-size: .62rem; color: var(--muted); margin-top: 3px; font-style: italic; }
.pm-tc-tally { display: block; font-size: .62rem; color: var(--muted); margin-top: 2px; }
.pm-review-hint { text-align: center; margin: 0 0 10px; }

/* PM — klasyfikacja w kafelkach + gotowość */
.pm-standings { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.pm-standings-title { font-weight: 800; font-size: 1rem; text-align: center; margin-bottom: 4px; }
.pm-stand-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px;
}
.pm-stand-card.top { background: linear-gradient(135deg, rgba(255,206,58,.18), rgba(255,206,58,.04)); border-color: rgba(255,206,58,.45); }
.pm-stand-card .pm-stand-pos { font-size: 1.3rem; width: 34px; text-align: center; }
.pm-stand-card .pm-stand-name { flex: 1; font-weight: 700; }
.pm-stand-card .pm-stand-score { font-weight: 800; color: var(--gold); font-size: 1.1rem; }
.pm-stand-card .pm-stand-score small { font-size: .65rem; color: var(--muted); margin-left: 3px; font-weight: 600; }

.pm-ready-title { font-weight: 700; font-size: .92rem; text-align: center; }
.pm-ready-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pm-ready-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
  transition: background .15s, border-color .15s;
}
.pm-ready-tile.on { background: rgba(46,204,113,.16); border-color: rgba(46,204,113,.5); }
.pm-ready-tile-name { font-weight: 700; font-size: .88rem; }

.pm-final-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pm-final-actions .btn-primary, .pm-final-actions .btn-ghost { width: auto; min-width: 150px; }

/* ====== TURNIEJE ====== */
.trn-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.trn-h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 8px 0; }
.trn-sub { color: var(--text-muted, #9aa); font-size: .9rem; margin-bottom: 16px; }
.trn-cols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.trn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.trn-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.trn-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; }
.trn-type { color: #b9c; font-weight: 700; }
.trn-prize { color: var(--gold, #f1c40f); font-weight: 700; }
.trn-card-title { font-weight: 700; font-size: 1rem; }
.trn-card-meta { font-size: .82rem; color: #9aa; }
.trn-card-actions { margin-top: auto; }
.trn-card-actions .btn-primary, .trn-card-actions .btn-ghost-sm { width: 100%; }
.trn-rank { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; }
.trn-rank h3 { font-size: .95rem; margin: 0 0 10px; }
.trn-rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .88rem; }
.trn-rank-row.me { background: rgba(46,204,113,.12); border-radius: 8px; }
.trn-rank-pos { min-width: 22px; white-space: nowrap; text-align: center; font-weight: 800; color: var(--gold, #f1c40f); }
.trn-rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-rank-pts { font-weight: 700; color: #9cf; }
.trn-muted { color: #778; }

/* lobby */
.trn-lobby { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.trn-lobby-players { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; }
.trn-players { list-style: none; margin: 8px 0 0; padding: 0 4px 0 0; max-height: 420px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--blue) rgba(255,255,255,.06); }
.trn-players::-webkit-scrollbar { width: 8px; }
.trn-players::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 8px; }
.trn-players::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4aa3e0, #2980b9); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.trn-players::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.trn-players li { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; }
.trn-lobby-mid { text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 24px; }
.trn-bigcount { font-size: clamp(2.4rem, 9vw, 4.5rem); font-weight: 900; color: var(--gold, #f1c40f); line-height: 1.1; }
.trn-lobby-info { font-weight: 700; margin: 8px 0; }
.trn-lobby-rules { color: #9aa; font-size: .85rem; margin-bottom: 16px; }

/* drabinka z kreskami łączącymi rundy */
.trn-bracket { display: flex; overflow-x: auto; padding: 14px 4px 18px; --gap: 42px; --gap1: 26px; --line: rgba(255,255,255,.22); align-items: stretch; }
.trn-round { display: flex; flex-direction: column; min-width: 215px; margin-right: var(--gap); }
.trn-round:last-child { margin-right: 0; }
.trn-round-h { font-weight: 800; text-align: center; color: #b9c; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.trn-matches { flex: 1; display: flex; flex-direction: column; }
/* odstęp między parami w pierwszej rundzie (para, przerwa, para…) */
.trn-round:first-child .trn-matches { gap: var(--gap1); }
.trn-match { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; position: relative; }
.trn-slot { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.trn-slot.live { border-color: rgba(231,76,60,.6); box-shadow: 0 0 12px rgba(231,76,60,.28); }
.trn-side { padding: 8px 11px; font-size: .88rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trn-side:first-child { border-radius: 9px 9px 0 0; }
.trn-side:last-child { border-radius: 0 0 9px 9px; }
.trn-side + .trn-side { border-top: 1px solid rgba(255,255,255,.08); }
.trn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-sc { font-weight: 800; color: #9aa; min-width: 16px; text-align: center; }
.trn-side.win { background: rgba(46,204,113,.16); color: #2ecc71; font-weight: 800; }
.trn-side.win .trn-sc { color: #2ecc71; }
.trn-slot.live .trn-sc { color: #e74c3c; }
/* kreski: poziom w prawo + pion łączący parę + poziom w lewo do kolejnego meczu */
.trn-round:not(:last-child) .trn-match::after { content: ""; position: absolute; top: 50%; right: calc(var(--gap) / -2); width: calc(var(--gap) / 2); height: 2px; background: var(--line); }
.trn-round:not(:last-child) .trn-match:nth-child(odd)::before { content: ""; position: absolute; top: 50%; right: calc(var(--gap) / -2); width: 2px; height: 100%; background: var(--line); }
/* w pierwszej rundzie pion musi pokryć też przerwę między parą, inaczej kreska się rozjeżdża */
.trn-round:first-child .trn-match:nth-child(odd)::before { height: calc(100% + var(--gap1)); }

/* ===== ADMIN: Turnieje — pytania ===== */
.atrn-hint { color: #9aa; font-size: .88rem; margin: 0 0 14px; }
.atrn-loading { color: #9aa; padding: 12px; font-size: .9rem; }
.atrn-days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.atrn-day { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #cdd; cursor: pointer; text-align: left; }
.atrn-day:hover { background: rgba(255,255,255,.09); }
.atrn-day.active { border-color: var(--gold,#f1c40f); background: rgba(241,196,15,.12); color: #fff; }
.atrn-day-name { font-weight: 800; font-size: .9rem; }
.atrn-day-meta { font-size: .72rem; color: #9aa; }
.atrn-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.atrn-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #dde; cursor: pointer; text-align: left; width: 100%; }
.atrn-row:hover { background: rgba(255,255,255,.08); }
.atrn-row.active { border-color: var(--gold,#f1c40f); background: rgba(241,196,15,.1); }
.atrn-row-time { font-weight: 800; min-width: 48px; }
.atrn-row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atrn-row-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.1); color: #bcd; }
.atrn-row-tag.t-voucher { background: rgba(46,204,113,.2); color: #2ecc71; }
.atrn-row-tag.t-monthly { background: rgba(241,196,15,.2); color: #f1c40f; }
.atrn-row-q { font-size: .78rem; color: #8fb; min-width: 56px; text-align: right; }
.atrn-row-q.empty { color: #c66; }
.atrn-item { display: flex; flex-direction: column; }
.atrn-row-caret { display: inline-block; min-width: 12px; color: #9aa; transition: transform .15s ease; }
.atrn-row[aria-expanded="true"] .atrn-row-caret { transform: rotate(90deg); color: var(--gold,#f1c40f); }
.atrn-q-panel { padding: 10px 2px 14px 14px; margin: 6px 0 2px 12px; border-left: 2px solid rgba(241,196,15,.3); }
.atrn-q-panel[hidden] { display: none; }
.atrn-qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.atrn-qhead h2 { margin: 0 0 2px; font-size: 1.1rem; }
.atrn-qsub { color: #9aa; font-size: .8rem; }
.atrn-round-h { font-weight: 800; color: #f1c40f; margin: 16px 0 8px; font-size: .95rem; }
.atrn-round-h span { color: #8a9; font-weight: 500; font-size: .76rem; }
.atrn-round { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.atrn-q { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px; }
.atrn-q-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.atrn-q-num { font-weight: 800; color: #9aa; font-size: .8rem; }
.atrn-edited { font-size: .68rem; color: #f1c40f; }
.atrn-q-text { width: 100%; resize: vertical; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; color: #fff; padding: 7px 9px; font: inherit; font-size: .9rem; margin-bottom: 7px; }
.atrn-q-answers { display: flex; flex-direction: column; gap: 5px; }
.atrn-ans { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; border: 1px solid transparent; }
.atrn-ans.correct { background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.4); }
.atrn-ans-letter { font-weight: 800; color: #9aa; min-width: 14px; }
.atrn-ans-text { flex: 1; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #fff; padding: 5px 8px; font: inherit; font-size: .86rem; }
.atrn-q-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.atrn-q-actions .btn-primary { padding: 5px 14px; font-size: .82rem; }
.atrn-saved { color: #2ecc71; font-size: .78rem; }
.atrn-reset { white-space: nowrap; }

/* ===== Baner kwalifikacji do Turnieju Miesiąca (złote tło) ===== */
.trn-qbanner {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #f1c40f, #e6a200);
  color: #3a2c00; font-weight: 700; font-size: .95rem; line-height: 1.4;
  border: 1px solid #ffd64d; box-shadow: 0 4px 18px rgba(241,196,15,.35);
}
.trn-qbanner b { color: #1c1500; }
.trn-qbanner .btn-link { color: #1c1500; font-weight: 800; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; }

/* ===== Przycisk pod rankingiem tygodnia ===== */
.trn-rank-more { width: 100%; margin-top: 10px; }

/* ===== Widok: Rankingi turniejowe ===== */
.trn-rank-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.trn-rank-head h1 { margin: 0; font-size: 1.4rem; }
.trn-rank-controls { margin: 10px 0 14px; color: #cdd; font-size: .9rem; }
.trn-rank-controls select { margin-left: 6px; background: rgba(0,0,0,.3); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 10px; font: inherit; }
.trn-rank-sub { color: #9aa; font-size: .86rem; margin: 0 0 12px; }
/* kafelki nagród (zależne od ligi) */
.trn-prizes { margin: 0 0 18px; max-width: 680px; }
.trn-prizes-ttl { font-size: .82rem; font-weight: 800; color: var(--gold, #f1c40f); margin-bottom: 8px; }
.trn-prizes-row { display: flex; gap: 10px; }
.trn-prize { flex: 1; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trn-prize .pm { font-size: 1.1rem; font-weight: 900; line-height: 1; }
.trn-prize .pv { font-size: 1rem; font-weight: 900; color: var(--gold, #f1c40f); }
.trn-prize .pl { font-size: .66rem; color: #9aa; }
/* mobile: 4 kafelki w jednej linii */
@media (max-width: 600px) {
  .trn-prizes-row { gap: 6px; }
  .trn-prize { padding: 10px 3px; }
  .trn-prize .pm { font-size: .95rem; }
  .trn-prize .pv { font-size: .8rem; }
  .trn-prize .pl { font-size: .58rem; }
}
.trn-rank-list { display: flex; flex-direction: column; gap: 4px; max-width: 680px; }
.trn-rank-row2 { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.trn-rank-row2 .trn-rank-pos { min-width: 46px; flex-shrink: 0; white-space: nowrap; font-weight: 800; color: #f1c40f; text-align: center; }
.trn-rank-row2 .trn-rank-name { flex: 0 1 auto; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-rank-row2 .trn-rank-pts { font-weight: 800; color: #2ecc71; margin-left: auto; }
.trn-rank-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.trn-mq2 { background: linear-gradient(135deg, #2ecc71, #16a34a) !important; color: #04210f !important; }
.trn-rank-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #9aa; font-size: .76rem; margin: 0 0 12px; }
.trn-wkstatus { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 20px; vertical-align: middle; }
.trn-wkstatus.live { background: rgba(46,204,113,.16); color: #2ecc71; }
.trn-wkstatus.closed { background: rgba(255,255,255,.1); color: #bcd; }
h3 .trn-wkstatus { font-size: .66rem; margin-left: 6px; }
.notif-item.trn-notif { cursor: pointer; display: flex; align-items: flex-start; gap: 6px; }
.notif-item.trn-notif:hover { background: rgba(255,255,255,.06); }
.notif-item.trn-notif.unread { background: rgba(46,204,113,.1); }
.notif-item.trn-notif .notif-text { flex: 1; min-width: 0; margin-bottom: 0; }
.notif-del { flex: 0 0 auto; background: transparent; border: none; color: #9aa; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.notif-del:hover { background: rgba(255,255,255,.12); color: #fff; }
.notif-sub { color: #9aa; font-size: .82rem; }
.trn-cycle-week { margin-bottom: 16px; }
.trn-cycle-h { font-weight: 800; color: #f1c40f; margin: 0 0 6px; font-size: .92rem; }
.trn-cycle-h span { color: #8a9; font-weight: 500; font-size: .78rem; }
.trn-rank-row2.me { background: rgba(241,196,15,.14); border-color: rgba(241,196,15,.45); }
.trn-rank-mine { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(255,255,255,.18); max-width: 680px; }
.trn-rank-mine-l { display: block; color: #9aa; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
/* panele kontekstowe w hubie (mini / tygodnia / miesiąca) */
.trn-rank-hint { color: #9aa; font-size: .78rem; margin: 2px 0 8px; line-height: 1.35; }
.trn-rank-plus { margin-top: 8px; padding: 7px 9px; background: rgba(46,204,113,.1); border: 1px dashed rgba(46,204,113,.35); border-radius: 9px; font-size: .82rem; color: #cfe; }
.trn-week-win { margin: 2px 0 10px; padding: 8px 10px; background: rgba(241,196,15,.14); border: 1px solid rgba(241,196,15,.4); border-radius: 9px; font-size: .9rem; }
.trn-mini-week { margin-bottom: 12px; }
.trn-mini-week-h { font-weight: 800; color: #f1c40f; font-size: .82rem; margin: 0 0 4px; }
.trn-week-empty { padding: 5px 4px; font-size: .8rem; }
/* widok „Rankingi turniejowe" — drabina + opisy sekcji */
.trn-rank-intro { color: #9aa; font-size: .82rem; margin: 4px 0 8px; }
.trn-ladder { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.trn-ladder-step { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: #bcd; }
.trn-ladder-step.on { background: rgba(241,196,15,.16); border-color: rgba(241,196,15,.5); color: #fff; font-weight: 700; }
.trn-ladder-ic { font-size: 1.05rem; }
.trn-ladder-arr { color: #6a7; font-size: 1.1rem; font-weight: 800; }
.trn-rank-explain { background: rgba(52,152,219,.1); border: 1px solid rgba(52,152,219,.28); border-radius: 12px; padding: 12px 14px; font-size: .86rem; line-height: 1.5; color: #d6e6f5; margin: 0 0 14px; }
.trn-rank-listhead { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; gap: 8px; }
.trn-rank-listhead h3 { font-size: 1rem; margin: 0; }
.trn-rank-listhead-r { color: #9aa; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.trn-mq3 { background: rgba(255,255,255,.08); color: #cdd; }
.trn-rank-finalwrap { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px dashed rgba(255,255,255,.14); }
.trn-rank-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 14px 0 8px; }
.trn-rank-h:first-child { margin-top: 2px; }
.trn-rank-h-r { margin-left: auto; color: #9aa; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
/* Turniej Tygodnia: lewo = tabela końcowa, prawo = uczestnicy */
.trn-tt-cols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.trn-tt-left, .trn-tt-right { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; }
@media (max-width: 560px) { .trn-ladder-lbl { display: none; } .trn-ladder-step { padding: 7px 10px; } }
/* znacznik kwalifikacji do Turnieju Miesiąca przy nicku (Top 4) */
.trn-mq { display: inline-block; font-size: .66rem; font-weight: 800; vertical-align: middle;
  padding: 1px 7px; border-radius: 20px; background: linear-gradient(135deg, #f1c40f, #e6a200);
  color: #3a2c00; white-space: nowrap; }
.trn-rank-ico { display: flex; gap: 4px; flex-shrink: 0; font-size: .82rem; line-height: 1; }
.trn-rank-row .trn-rank-pts { flex-shrink: 0; }
.trn-rank-row .trn-rank-name { min-width: 40px; }
.trn-round:not(:first-child) .trn-slot::before { content: ""; position: absolute; top: 50%; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2); height: 2px; background: var(--line); }

/* baner zwycięzcy */
.trn-champion { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; padding: 16px 22px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(241,196,15,.22), rgba(241,196,15,.06)); border: 1px solid rgba(241,196,15,.4); }
.trn-champion-trophy { font-size: 2.6rem; line-height: 1; }
.trn-champion-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #cbb; }
.trn-champion-name { font-size: 1.6rem; font-weight: 900; color: var(--gold, #f1c40f); }
.trn-champion-prize { font-size: .9rem; color: #d8c98a; margin-top: 2px; }

/* popup "start za 60 s" */
.trn-soon { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4000;
  background: #1c2230; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: 92vw; }
.trn-soon.hidden { display: none; }
.trn-soon .btn-primary { width: auto; padding: 8px 16px; }

/* modal meczu */
/* Mecz turniejowy = normalny widok (z sidebarem), treść w kolumnie */
.trn-match-page { max-width: 720px; margin: 0 auto; padding: 8px 0 48px; }
.trn-match-ready { text-align: center; }
.trn-match-h { font-size: 1.5rem; font-weight: 900; margin-bottom: 6px; }
.trn-match-opp { color: #9aa; margin-bottom: 14px; }
.trn-match-cd { font-size: 1.2rem; font-weight: 800; color: var(--gold, #f1c40f); margin-bottom: 16px; }
.trn-bigbtn { font-size: 1.1rem; padding: 14px 22px; width: 100%; }
.trn-match-msg { color: #9aa; font-size: .88rem; margin-top: 12px; min-height: 1.2em; }
/* pasek VS z punktami */
.trn-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.trn-vs-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.trn-vs-side.me { border-color: rgba(52,152,219,.5); background: rgba(52,152,219,.12); }
.trn-vs-name { font-size: .85rem; color: #cdd; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-vs-pts { font-size: 1.9rem; font-weight: 900; color: var(--gold,#f1c40f); line-height: 1; }
.trn-vs-mid { font-size: .85rem; font-weight: 900; color: #8a93a6; letter-spacing: .05em; }
/* postęp pytań */
.trn-q-progress { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.trn-q-count { color: #9aa; font-size: .82rem; }
.trn-q-count b { color: #fff; }
.trn-q-dots { display: flex; gap: 5px; }
.trn-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.trn-dot.done { background: #2ecc71; }
.trn-dot.cur { background: var(--gold,#f1c40f); box-shadow: 0 0 0 3px rgba(241,196,15,.25); }
.trn-timebar { height: 8px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.trn-timebar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c); }
/* karta pytania */
.trn-q-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.trn-q-theme { align-self: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); background: rgba(52,152,219,.14); border: 1px solid rgba(52,152,219,.35); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.trn-flag { font-size: 3rem; text-align: center; margin-bottom: 8px; }
.trn-q-text { font-size: 1.18rem; font-weight: 700; text-align: center; line-height: 1.35; }
/* odpowiedzi A/B/C/D */
.trn-answers { display: grid; gap: 10px; }
.trn-answers-grid { grid-template-columns: 1fr 1fr; }
.trn-ans { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: inherit; font-size: 1rem; cursor: pointer; text-align: left; transition: background .12s, border-color .12s, transform .08s; }
.trn-ans:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.trn-ans:active:not(:disabled) { transform: scale(.98); }
.trn-ans-let { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; color: #cdd; }
.trn-ans-txt { flex: 1; }
.trn-ans.sel { border-color: #3498db; background: rgba(52,152,219,.22); }
.trn-ans.sel .trn-ans-let { background: #3498db; color: #fff; }
.trn-ans.correct { border-color: #2ecc71; background: rgba(46,204,113,.25); }
.trn-ans.correct .trn-ans-let { background: #2ecc71; color: #06240f; }
.trn-ans.wrong { border-color: #e74c3c; background: rgba(231,76,60,.22); }
.trn-ans.wrong .trn-ans-let { background: #e74c3c; color: #fff; }
.trn-q-note { text-align: center; margin-top: 12px; font-weight: 700; min-height: 1.2em; }
@media (max-width: 460px) { .trn-answers-grid { grid-template-columns: 1fr; } }
/* popup po meczu */
.trn-match-end { text-align: center; padding: 8px 4px 4px; }
.trn-end-icon { font-size: 3.6rem; line-height: 1; margin-bottom: 4px; }
.trn-end-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 10px; }
.trn-match-end.win .trn-end-title { color: var(--gold,#f1c40f); text-shadow: 0 0 24px rgba(241,196,15,.35); }
.trn-match-end.loss .trn-end-title { color: #e7eaf0; }
.trn-match-end.noshow .trn-end-title { color: #9aa; }
.trn-end-score { display: inline-flex; gap: 12px; align-items: baseline; font-size: 2.2rem; font-weight: 900; margin-bottom: 10px; }
.trn-end-me { color: #2ecc71; }
.trn-end-opp { color: #e7eaf0; }
.trn-end-sep { color: #6a7390; }
.trn-end-sub { color: #9aa; font-size: .78rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.trn-end-msg { color: #aeb6c6; font-size: .92rem; margin-bottom: 18px; line-height: 1.4; }
.trn-match-end.win { animation: trnEndPop .3s ease; }
@keyframes trnEndPop { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* hero + zakładki + kompaktowa lista */
.trn-hero { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(135deg, #3a2d5e, #1c2230); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; }
.trn-hero-badge { font-size: .72rem; letter-spacing: .08em; color: #cbb; font-weight: 800; }
.trn-hero-title { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin: 4px 0 6px; }
.trn-hero-desc { color: #cfe0ff; font-size: .95rem; line-height: 1.5; max-width: 640px; margin: 0 0 12px; }
.trn-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trn-hero-prizes { display: inline-block; color: #f3f6ff; font-size: .88rem; line-height: 1.45; max-width: 640px; margin: 0 0 8px; padding: 8px 12px; background: rgba(255,200,80,.10); border: 1px solid rgba(255,200,80,.28); border-radius: 12px; }
.trn-hero-prizes b { color: var(--gold); }
.trn-hero-extra { color: #aebfda; font-size: .82rem; margin: 0 0 12px; }
.trn-hero-extra b { color: var(--gold); }
.trn-hero-stats { display: flex; gap: 10px; }
.trn-stat { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 14px; text-align: center; min-width: 80px; }
/* mobile: dwa kafelki statystyk obok siebie w jednej linii (desktop bez zmian) */
@media (max-width: 600px) {
  .trn-hero-stats { flex-direction: row; width: 100%; gap: 8px; }
  .trn-stat { flex: 1; min-width: 0; padding: 8px 6px; }
  .trn-stat-v { font-size: 1.1rem; }
  .trn-stat-l { font-size: .66rem; }
  /* trzy przyciski (Zasady/Rankingi/Nagrody) w jednej linii */
  .trn-hero-actions { gap: 6px; width: 100%; }
  .trn-hero-actions .btn-ghost-sm { flex: 1; justify-content: center; padding: 8px 4px; font-size: .72rem; gap: 4px; white-space: nowrap; }
}
.trn-stat-v { display: block; font-size: 1.3rem; font-weight: 900; color: var(--gold, #f1c40f); }
.trn-stat-l { font-size: .72rem; color: #9aa; }
.trn-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.trn-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font-size: .85rem; }
.trn-tab.on { background: var(--gold, #f1c40f); color: #1a1a1a; border-color: transparent; font-weight: 800; }
.trn-rows { display: flex; flex-direction: column; gap: 8px; }
.trn-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 12px; }
.trn-row.running { border-color: rgba(231,76,60,.5); }
.trn-row-time { font-weight: 900; font-size: 1rem; min-width: 46px; color: var(--gold, #f1c40f); }
.trn-row-main { flex: 1; min-width: 0; }
.trn-row-title { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-row-sub { font-size: .78rem; color: #9aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-live { color: #e74c3c; font-weight: 800; }
.trn-rbtn { width: auto; padding: 7px 16px; }
.trn-rules-list { margin: 6px 0 10px; padding-left: 18px; }
.trn-rules-list li { margin-bottom: 5px; font-size: .9rem; }
.trn-rules-h { font-weight: 700; margin: 10px 0 4px; }
.trn-rules-note { font-size: .82rem; color: #9aa; }

@media (max-width: 860px) {
  .trn-cols { grid-template-columns: 1fr; }
  .trn-tt-cols { grid-template-columns: 1fr; }
  .trn-lobby { grid-template-columns: 1fr; }
  .trn-hero { flex-direction: column; align-items: flex-start; }
  .trn-hero-stats { width: 100%; }
  .trn-row { padding: 13px 14px; }
  .trn-row-title { font-size: 1rem; white-space: normal; }
  .trn-row-sub { white-space: normal; }
  .trn-row-time { font-size: 1.1rem; }
}