/* ===================== THEME TOKENS ===================== */
:root {
  /* Light mode */
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --text: #0b1220;
  --muted: #475569;

  /* Accenty / brand */
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, .12);
  --link: #3949ab;
  /* jasny odpowiednik #a9b8ff */
  --btn-bg: #e7ecff;
  /* jasny odpowiednik #1b2c4a */
  --btn-fg: #0b1220;
  /* jasny tekst na jasnym przycisku */

  /* Obrysy / szkło */
  --border: rgba(15, 23, 42, .12);
  --glass-03: rgba(0, 0, 0, .03);
  --glass-08: rgba(0, 0, 0, .08);
  --glass-12: rgba(0, 0, 0, .12);
  --glass-15: rgba(0, 0, 0, .15);

  /* Tła dekoracyjne */
  --bg-grad-spot: #c7d2fe;
  /* jasna plama w rogu */
  --bg-grad-top: #ffffff;
  --bg-grad-bottom: #f1f5f9;

  /* Cienie */
  --shadow-color: rgba(0, 0, 0, .25);
  --shadow-strong: rgba(0, 0, 0, .35);
}

/* DARK THEME: przeniesione dotychczasowe wartości */
.dark {
  --bg: #0a0d1d;
  --panel: #0d1424;
  --panel-2: #121a30;
  --text: #eef2ff;
  --muted: #b8c1ff;

  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, .12);
  --link: #a9b8ff;
  --btn-bg: #1b2c4a;
  --btn-fg: #eaf0ff;

  --border: rgba(255, 255, 255, .12);
  --glass-03: rgba(255, 255, 255, .03);
  --glass-08: rgba(255, 255, 255, .08);
  --glass-12: rgba(255, 255, 255, .12);
  --glass-15: rgba(255, 255, 255, .15);

  --bg-grad-spot: #1b2c4a;
  --bg-grad-top: #0d1022;
  --bg-grad-bottom: #0a0d1d;

  --shadow-color: rgba(0, 0, 0, .25);
  --shadow-strong: rgba(0, 0, 0, .35);
}

/* ===================== BASE ===================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 450px at 12% 0%, var(--bg-grad-spot) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg-grad-bottom) 100%);
  display: flex;
  min-height: 100vh;
  touch-action: manipulation;
}

.wrap {
  max-width: 860px;
  margin: 0px auto 8px;
  padding: 0 8px;
  text-align: center;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
}

/* ===================== BUTTONY / LINKI ===================== */
.back,
.score {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--link);
  font: 600 14px ui-sans-serif, system-ui;
  text-decoration: none;
  padding: 6px 12px;

  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--glass-03);
  transition: background .2s, transform .2s;
}

.back:hover {
  background: var(--glass-08);
  transform: translateX(-2px);
}

.score:hover {
  background: var(--glass-08);
}

.back::before {
  content: "↩︎";
  font-size: 15px;
  line-height: 1;
}

/* ===================== BOARD ===================== */
#board {
  display: block;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px var(--shadow-strong);
}

.hint {
  color: var(--muted);
  margin-top: 10px;
}

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--glass-08);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
}

/* ===================== MODAL (Lines-5) ===================== */
.line5-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.line5-modal {
  width: min(520px, 90vw);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px var(--shadow-strong);
  padding: 20px;
}

.line5-modal h3 {
  margin: 0 0 8px;
  font: 700 18px ui-sans-serif, system-ui;
}

.line5-modal p {
  margin: 0 0 14px;
  font: 400 14px ui-sans-serif, system-ui;
  opacity: .85;
}

.line5-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.line5-field label {
  font: 600 13px ui-sans-serif, system-ui;
  opacity: .9;
}

.line5-field input {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.line5-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
}

.line5-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 10px;
}

.line5-summary .cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.line5-cell-label {
  opacity: .7;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
}

.line5-cell-value {
  font-weight: 700;
  font-size: 16px;
}

.line5-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.line5-btn {
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: 600 14px ui-sans-serif, system-ui;
}

.line5-btn:hover {
  filter: brightness(1.05);
}

.line5-btn.secondary {
  background: transparent;
}

/* ===================== RANKING ===================== */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 18px var(--shadow-color);
  padding: 16px;
  margin-bottom: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

th {
  font-weight: 700;
  font-size: 13px;
  opacity: .8;
}

td {
  font-size: 14px;
}

.muted {
  opacity: .75;
}

.you {
  background: var(--accent-soft);
}

.badge {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 10px;
  font: 700 12px ui-sans-serif;
  color: var(--link);
  text-decoration: none;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.hint {
  font-size: 13px;
  opacity: .8;
}

#board {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.segmented {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.segbtn {
  padding: 6px 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, .12));
  background: var(--panel-2, #f1f5f9);
  border-radius: 10px;
  cursor: pointer;
  font: 600 13px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  color: var(--link);
}

.segbtn[aria-pressed="true"] {
  outline: 2px solid var(--accent, #4f46e5);
  background: var(--btn-bg, #e7ecff);
}

#typeFilter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#typeFilterSection h2 {
  margin: 0px;
  font: 700 16px ui-sans-serif;
}


/* Modal – ogólne */
.line5-modal {
  width: min(560px, 94vw);
  max-width: 94vw;
  padding: 16px;
  border-radius: 14px;
}

/* Pola w modalu – anty-zoom iOS: font >= 16px */
.line5-field input {
  font-size: 17px; /* kluczowe dla iOS */
}

/* Pasek akcji */
.line5-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}

/* zachowaj sensowny „oddech” po prawej, także przy notchu */
@supports (padding: max(0px)) {
  .line5-actions { padding-right: max(env(safe-area-inset-right), 12px); }
}

/* Gdy iOS jest przybliżony (dodajemy klasę body.ios-zoom z JS): 
   - nie trzymaj Zapisz przy samej krawędzi ekranu,
   - nie pozwól, by wszedł na Anuluj (gap + autolayout to załatwia) */
body.ios-zoom .line5-modal {
  width: 90vw;
  padding-right: clamp(12px, 8vw, 56px);
}

body.ios-zoom .line5-actions {
  justify-content: flex-start; /* „przesuń” bliżej lewej przy zoomie */
}

/* ostatni przycisk = Zapisz (wg Twojej kolejności) – odsuń od prawej krawędzi */
body.ios-zoom .line5-actions .line5-btn:last-child {
  margin-left: auto;
  margin-right: clamp(8px, 10vw, 32px);
}

/* Opcjonalnie minimalna szerokość przycisków, żeby nie „wpadały” na siebie przy zoomie */
.line5-actions .line5-btn { min-width: 96px; }