:root {
  --bg: #0b1020;
  --gradient-1: #0ea5e9; /* sky */
  --gradient-2: #8b5cf6; /* violet */
  --card: #0f172a80; /* slate/opacity */
  --text: #e5e7eb; /* light */
  --muted: #a1a1aa; /* zinc-400 */
  --accent: #22d3ee; /* cyan */
  --success: #16a34a; /* green */
  --danger: #ef4444; /* red */
  --warning: #f59e0b; /* amber */
  --border: #33415588;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] {
  --bg: #eef2ff; /* indigo-50 */
  --card: #ffffffcc;
  --text: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --border: #e2e8f0cc; /* slate-200 */
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  align-content: center;
  background: linear-gradient(135deg, #0b1220, #0b1020 60%);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(
      1200px 700px at 15% 15%,
      rgba(34, 211, 238, 0.15),
      transparent 60%
    ),
    radial-gradient(
      1200px 700px at 85% 25%,
      rgba(139, 92, 246, 0.18),
      transparent 60%
    ),
    linear-gradient(135deg, #0b1220, #0b1020 60%);
  position: relative;
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* stabilizuje tło przy scrollu */
  overscroll-behavior-y: none;
}

/* jeśli Twoje panele są "kaflem" */
.panel,
.container,
.card {
  width: 100%;
}

.container {
  max-width: 1280px;
  margin: clamp(16px, 5vh, 40px) auto;
  padding: 24px;
}

.card {
  /* background: var(--card); */
  /* border: 1px solid var(--border); */
  /* border-radius: 24px; */
  /* backdrop-filter: blur(10px) saturate(140%); */
  /* box-shadow: var(--shadow); */
  overflow: hidden;
}

/* ===== Header ===== */
header.app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.12),
    rgba(139, 92, 246, 0.12)
  );
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: conic-gradient(from 0deg, var(--gradient-1), var(--gradient-2));
  color: white;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    0 6px 18px rgba(14, 165, 233, 0.35);
  font-weight: 900;
}

.tagline {
  font-size: 0.9rem;
  color: var(--muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* już na desktop może pomóc przy dłuższych napisach */
}

.icon-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s transform;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ===== Panele (tylko .active widoczny) ===== */
.panel {
  display: none !important;
}

.panel.active {
  display: block !important;
}

.panel.active.start,
.panel.active.results {
  display: grid !important;
}

/* ===== Start panel ===== */
.start {
  padding: 26px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
}

/* ===== Hero ===== */
.hero {
  padding: 26px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: radial-gradient(
      600px 160px at 0% 0%,
      rgba(34, 211, 238, 0.12),
      transparent 70%
    ),
    radial-gradient(
      600px 160px at 100% 0%,
      rgba(139, 92, 246, 0.12),
      transparent 70%
    ),
    linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.02)
    );
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
}

.hero-radius {
  border-radius: 20px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.chip {
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ===== Settings ===== */
.settings {
  display: grid;
  gap: 14px;
  padding: 8px 0;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 0.9rem;
  color: var(--muted);
}

.select,
.range,
.switch {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

select,
input[type="number"],
input[type="range"] {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
}

select:focus,
input:focus {
  outline: none;
}

/* Select (ładniejszy) */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 40px 10px 12px;
  color: var(--text);
  font-size: 0.95rem;

  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

select:hover,
select:focus {
  border-color: #9db6f3;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

select option {
  background: var(--bg);
  color: var(--text);
}

/* Switch */
.switch input {
  appearance: none;
  width: 44px;
  height: 26px;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.switch input:checked {
  background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
}

.switch input::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

.switch input:checked::after {
  left: 21px;
}

/* CTA + Buttons */
.cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap; /* ważne: niech się łamią na mniejszych ekranach */
}

.btn {
  --btn-bg: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
  border: none;
  color: white;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  background: var(--btn-bg);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.32);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:hover {
  transform: translateY(-1px);
}

/* ===== Game ===== */
.game {
  padding: 18px;
}

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 6px 16px;
}

.status,
.lifelines,
#qa,
#qa.question {
  margin-bottom: 20px;
}
.progress {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex: 1;
}

.progress .bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
  transition: width 0.35s ease;
}

.lifelines {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pill[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.question {
  padding: 12px 10px 16px;
  font-size: clamp(2.4rem, 0.8rem + 1vw, 1.4rem);
  font-weight: 700;
}

.answers {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.answer {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 20px;
  font-size: 17px;
  border-radius: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms,
    background 180ms;
}

.answer.is-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.answer:hover {
  transform: translateY(-1px);
}

.answer.correct {
  background: linear-gradient(
    0deg,
    rgba(22, 163, 74, 0.12),
    rgba(22, 163, 74, 0.2)
  );
  border-color: rgba(22, 163, 74, 0.55);
}

.answer.wrong {
  background: linear-gradient(
    0deg,
    rgba(239, 68, 68, 0.1),
    rgba(239, 68, 68, 0.18)
  );
  border-color: rgba(239, 68, 68, 0.55);
}

.explanation {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted);
  border-left: 3px solid var(--border);
  padding-left: 10px;
  display: none;
}

.explanation.show {
  display: block;
}

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ===== Results ===== */
.results {
  padding: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.results-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stat {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 8px;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.03)
  );
}

.stat h3 {
  margin: 0;
}

.score-lg {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.list {
  display: grid;
  gap: 10px;
}

.list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ===== Animations ===== */
.fade-in {
  animation: fade 0.35s ease both;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Inputs / Layout helpers ===== */
.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.sep {
  border: 0;
  border-top: 1px dashed var(--border);
  margin: 16px 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-gap2 input,
.grid-gap2 .avatars-grid {
  margin-top: 10px;
}

/* Avatary */
.avatars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow: auto;
  padding: 6px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* kontener z przewijaniem */
.avatars-grid {
  scrollbar-gutter: stable; /* żeby nie „skakało” przy pojawieniu się paska */
}

/* szerokość paska */
.avatars-grid::-webkit-scrollbar {
  width: 10px;
}

/* tło paska */
.avatars-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

/* „kciuk” (to co się przeciąga) */
.avatars-grid::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.55); /* violet */
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.6); /* delikatny „oddech” od tracka */
}

.avatars-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 211, 238, 0.7); /* cyan przy hover */
}

.avatars-grid {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: rgba(139, 92, 246, 0.65) rgba(255, 255, 255, 0.06); /* thumb track */
}

.avatar {
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
}

.avatar.selected {
  border-color: var(--accent);
}

.avatar img {
  width: 100%;
  display: block;
}

/* Gracze */
.player-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.player-pill.active {
  border-color: rgba(34, 211, 238, 0.9);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.08);
}

.player-pill img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.player-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.player-switch .player-pill {
  cursor: pointer;
}

/* Tabs / ranking */
.tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  white-space: nowrap;
}

.tab.active {
  background: linear-gradient(90deg, var(--gradient-1), var(--gradient-2));
  color: white;
}

.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  gap: 10px;
  font-size: 16px;
}

.rank-row .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rank-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.rank-row.top-1 {
  border: 2px solid #d3bb31c7;
}
.rank-row.top-2 {
  border: 2px solid #e1e1e1c7;
}
.rank-row.top-3 {
  border: 2px solid #975d22a6;
}

/* Rules (jeśli kiedyś wrócisz do details) */
.rules {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
}

.rules summary {
  cursor: pointer;
  font-weight: 700;
  user-select: none;
  list-style: none;
}

.rules summary::-webkit-details-marker {
  display: none;
}

.rules summary::after {
  content: "▾";
  float: right;
  opacity: 0.7;
}

.rules[open] summary::after {
  content: "▴";
}

.rules-body {
  margin-top: 10px;
  color: var(--text);
}

.rules-body ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.rules-body li {
  margin: 6px 0;
  color: var(--muted);
}

.rules-body strong {
  color: var(--text);
}

/* ===== MODAL ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.modal.active {
  display: block;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  max-width: 520px;
  margin: 10vh auto;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var ↳ 0 10px 30px rgba(0, 0, 0, 0.35) ↳ 0 10px 30px #00000059
    (--shadow);
}

.modal-content ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.modal-content li {
  margin: 8px 0;
  color: var(--muted);
}

.modal-content strong {
  color: var(--text);
}

.remove-player {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
}

.remove-player:hover {
  opacity: 0.8;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
}

.home-main,
.home-rank {
  min-width: 0;
  margin-top: 20px;
}

/* ======================================================
   RESPONSIVE (Mobile / Tablet) — bez dublowania stylów
====================================================== */

/* Tablet + mniejsze laptopy */
/* @media (max-width: 1024px) {
  .container {
    max-width: 920px;
  }
} */

/* Układ START / RESULTS w jednej kolumnie */
@media (max-width: 860px) {
  body {
    background-attachment: scroll;
  }
  .start {
    grid-template-columns: 1fr;
  }

  .results {
    grid-template-columns: 1fr;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }
}

/* Phone / małe tablety */
@media (max-width: 720px) {
  /* Header */
  header.app {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn,
  .header-actions .icon-btn {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  /* Kontener / karta */
  .container {
    padding: 20px;
  }

  .start,
  .game {
    padding: 20px 0;
  }

  .card {
    border-radius: 18px;
  }

  /* Game: status pionowo */
  .status {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .timer {
    text-align: right;
  }

  /* Lifelines: zawijanie + lepszy tap */
  .lifelines {
    gap: 8px;
  }

  .pill {
    justify-content: center;
    padding: 10px 12px;
  }

  /* Odpowiedzi */
  .answers {
    grid-template-columns: 1fr;
  }

  .answer {
    padding: 16px;
    font-size: 1rem;
  }

  /* Bottom bar w kolumnie */
  .bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bottom-bar .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .question {
    font-size: 1.7rem;
  }

  .modal-card {
    max-width: 370px;
  }
}

/* Małe telefony: CTA zawsze 100% */
@media (max-width: 600px) {
  .cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta .btn {
    width: 100%;
  }

  .modal-card {
    margin: 6vh 12px;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .home-grid {
    grid-template-columns: minmax(560px, 1fr) 460px;
    align-items: start;
  }

  #homePanel {
    max-height: calc(100svh - 24px);
    overflow: hidden;
  }

  .home-main {
    max-height: calc(100svh - 24px);
    overflow: auto;
    padding-right: 6px;
  }

  .home-rank {
    position: sticky;
    /* top: 12px; */
    max-height: calc(100svh - 24px);
    overflow: auto;
    padding-right: 6px;
  }
}