/* ABAX TRACKER — style aplikacji. Przeniesione bez zmian z inline <style>.

   CSP wymaga teraz style-src 'self' (zero inline CSS w HTML i JS-templates). */
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  /* touch-action:manipulation wyłącza opóźnienie 300ms i double-tap zoom na mobilkach */
  :root {
    --ink: #130e0a;            /* ciemny brąz: tło oraz tekst na jasnych przyciskach */
    --ink-rgb: 19, 14, 10;
    --bg: var(--ink);
    --bg-grad: radial-gradient(circle at 50% 0%, #2b1f16 0%, var(--bg) 80%);
    --surface: rgba(255, 244, 230, 0.04);
    --surface-2: rgba(255, 244, 230, 0.07);
    --surface-hover: rgba(var(--accent-rgb), 0.15);
    --brown-800: #241a13; --brown-700: #35271c; --brown-600: #4f3a29; --brown-500: #8c7358;
    --tap: 44px;               /* minimalny cel dotyku */
    --pc: var(--accent-text);  /* kolor gracza (ustawiany klasami .c0–.c7) */
    --card-bg: rgba(36, 26, 19, 0.92);
    --card-inner: #1c140e;
    /* Trzy poziomy głębi: 1 = zwykłe karty, 2 = aktywne elementy, 3 = dialogi i przeciąganie */
    --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.85);

    /* Teal = akcent (przyciski, zaznaczenia, fokus), brąz = tło, obramowania, tekst pomocniczy.
       Tekst na jasnych gradientach przycisków jest ciemny (--ink): kontrast min. 5:1. */
    --accent-rgb: 45, 212, 191;
    --accent: #2dd4bf;
    --accent-light: #5eead4;
    --accent-dark: #14b8a6;
    --accent-text: #99f6e4;    /* etykiety i ikony na ciemnym tle */
    --accent-grad: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #14b8a6 100%);
    --tan-rgb: 212, 163, 115;

    --green-grad: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    --red-grad: linear-gradient(135deg, #fda4af 0%, #fb7185 50%, #f43f5e 100%);

    --border: rgba(var(--tan-rgb), 0.28);
    --border-glow: rgba(var(--tan-rgb), 0.14);

    --green: #4ade80;
    --red: #fb7185;
    --text-light: #fbf4ea;
    /* Podbity kontrast tekstu pomocniczego (WCAG AA na ciemnym tle) */
    --text-muted: #d9c3a8;

    --fs-mult: 1;
    color-scheme: dark;      /* ciemne paski przewijania i natywne kontrolki */

    /* Systemowy stack czcionek — zero zapytań sieciowych */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  html, body {
    background: var(--bg);
    background-image: var(--bg-grad);
    color: var(--text-light);
    min-height: 100vh;
    min-height: 100dvh;
  }

  body {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: contain; /* pull-to-refresh nie przeładuje apki podczas przeciągania kart */
  }

  h1 {
    font-size: calc(24px * var(--fs-mult));
    letter-spacing: 1.5px;
    text-align: center;
    padding: 16px 0;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 50%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }

  h2 {
    font-size: calc(20px * var(--fs-mult));
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-light);
  }

  .sub {
    font-size: calc(11px * var(--fs-mult));
    color: var(--accent-text);
    letter-spacing: 2px;
    margin: 20px 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
  }

  .card {
    position: relative;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    transition: border-color 0.2s;
  }

  .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .row-left { display:flex; align-items:center; gap:12px; min-width:0; }

  .btn {
    display: block;
    width: 100%;
    border: 1px solid var(--accent-light);
    padding: 14px;
    font-size: calc(14px * var(--fs-mult));
    font-weight: 800;
    letter-spacing: 1.5px;
    background: var(--accent-grad);
    color: var(--ink);
    cursor: pointer;
    transition: transform .1s, filter .15s, box-shadow .15s;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
    text-transform: uppercase;
  }
  .btn:active { transform: scale(.98); }
  .btn:disabled { background: var(--brown-800); border-color: var(--brown-700); color: var(--brown-500); cursor: default; box-shadow: none; }

  .btn-main { padding: 11px; font-size: calc(12px * var(--fs-mult)); letter-spacing: 1px; }

  .btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-light);
    font-weight: 700;
    padding: 0 14px;
    font-size: calc(13px * var(--fs-mult));
    letter-spacing: 0.5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
  }
  .btn-outline:active { transform: scale(.93); }
  .btn-outline:disabled { opacity:.35; pointer-events:none; }

  input[type=text], input[type=tel] {
    width: 100%;
    background: rgba(var(--ink-rgb), 0.85);
    border: 1px solid var(--border);
    color: #fff;
    padding: 12px;
    font-family: inherit;
    font-size: calc(15px * var(--fs-mult));
    outline: none;
    margin-top: 8px;
    border-radius: 8px;
    transition: border-color 0.2s;
  }
  input[type=text]:focus, input[type=tel]:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3); }

  .colors { display:grid; grid-template-columns:repeat(4, 1fr); justify-items:center; gap:8px; margin-top:10px; }
  .dot { width:var(--tap); height:var(--tap); background:var(--pc); border:2px solid var(--bg); border-radius:50%; cursor:pointer; flex-shrink:0; transition:transform .15s; padding:0; }
  .dot.sel { border-color:#fff; transform:scale(1.1); box-shadow: 0 0 12px var(--accent); }
  /* zajęty kolor: widoczny (nie niewidzialna plamka), ale wyraźnie przekreślony */
  /* zajęty kolor: pusta ramka zamiast kropki (czytelny znak „niedostępny”) */
  .dot:disabled { background:transparent; border:2px dashed var(--brown-500); box-shadow:none; opacity:1; pointer-events:none; }
  /* brązowy (c10) słabo widoczny na ciemnym tle — obwódka jak przy czarnym */
  .dot.c10 { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); }
  .dot.sel.c10 { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4), 0 0 12px var(--accent); }
  .avatar.c10 { border:1px solid rgba(255,255,255,0.4); }

  .avatar { width:16px; height:16px; border-radius:50%; flex-shrink:0; background:var(--pc); border: 1px solid rgba(255,255,255,0.2); }

  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 12px 14px;
    margin-bottom: 8px;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
  }
  .name { font-size: calc(15px * var(--fs-mult)); color: var(--text-light); font-weight: 600; }
  .scroll { margin-top:4px; overflow-anchor:none; }
  body { overflow-anchor:none; }

  .score-num {
    font-size: clamp(40px, calc(56px * var(--fs-mult)), 84px);
    font-weight: 900;
    text-align: center;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #ccfbf1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform .18s ease;
  }
  .score-num.bump { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--accent)); }
  .pending { font-size: calc(22px * var(--fs-mult)); font-weight: 800; }

  .score-btns { display:flex; flex-wrap:nowrap; gap:6px; margin-top:14px; }
  .score-btns button {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tap);
    padding: 10px 2px;
    background: var(--surface-2);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--text-light);
    font-size: calc(var(--btn-fs, 14px) * var(--fs-mult));
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
  }
  .score-btns button:active { background: rgba(var(--accent-rgb), 0.3); border-color: var(--accent); }
  /* A10: etykieta nie może być ucięta przy dużych wartościach i dużej czcionce —
     skala czcionki zależna od długości tekstu (JS ustawia klasę), awaryjnie zawijanie */
  .score-btns button.long-lbl { font-size: calc(0.68 * var(--btn-fs, 14px) * var(--fs-mult)); white-space:normal; overflow:visible; line-height:1.1; padding:4px 2px; }  /* A10: nie ucinamy, tylko zawijamy */
  .score-btns button.amount-btn { border-style: dashed; border-color: var(--border-glow); background: rgba(255,255,255,0.02); color: var(--accent-text); }

  .confirm-row { display:flex; gap:10px; margin-top:12px; }
  .confirm-row button {
    flex:1;
    padding:12px 0;
    cursor:pointer;
    font-size:18px;
    font-weight:900;
    border-radius:8px;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-row button.btn-cancel {
    background: var(--red-grad);
    color: var(--ink);
    border: 1px solid rgba(244, 63, 94, 0.8);
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.25);
  }
  .confirm-row button.btn-apply {
    background: var(--green-grad);
    color: var(--ink);
    border: 1px solid rgba(74, 222, 128, 0.8);
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.25);
  }
  .confirm-row button:active { transform: scale(.96); filter: brightness(1.1); }
  .confirm-row button.off { opacity:.3; box-shadow:none; }

  .history-chips { display:flex; flex-direction:column; gap:4px; width:56px; flex-shrink:0; margin:0; }
  .history-chips .chip {
    flex:0 0 auto;
    min-height:var(--tap);
    padding:2px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    font-weight:800;
    font-size: calc(13px * var(--fs-mult));
    text-align:center;
    cursor:pointer;
    transition: all .15s;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .history-chips .chip:active { transform: scale(.94); }

  .dialog-back { position:fixed; inset:0; background:rgba(var(--ink-rgb), 0.88); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
  .dialog { background:var(--card-inner); border:1px solid var(--accent); padding:24px; width:100%; max-width:340px; margin:0 auto; animation:dialogIn .18s ease-out; box-shadow:var(--shadow-3); border-radius:12px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y:auto; }
  /* re-render otwartego dialogu (np. wybór koloru) nie odtwarza animacji */
  .dialog-back[data-anim="off"] .dialog { animation: none; }
  /* dodawanie gracza: karta dokładnie tej szerokości co karty modułów (padding jak body: 16 px) */
  .dialog-back[data-dlg="addPlayer"], .dialog-back[data-dlg="addPlayerColor"] { padding:16px; }
  .dialog-back[data-dlg="addPlayer"] .dialog,
  .dialog-back[data-dlg="addPlayerColor"] .dialog { max-width:480px; }
  .dialog h3 { font-size: calc(20px * var(--fs-mult)); margin-bottom:12px; color:var(--text-light); text-align:center; border-bottom:1px solid var(--border); padding-bottom:8px; font-weight:800; }
  .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

  .empty { text-align:center; color:var(--text-muted); font-size: calc(14px * var(--fs-mult)); padding:36px 12px; line-height:1.6; font-style:italic; }
  .header-row { display:flex; align-items:center; gap:4px; margin-bottom:16px; flex-wrap:wrap; row-gap:8px; }
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--brown-800); border:1px solid var(--accent); color:#fff; font-size: calc(12px * var(--fs-mult)); font-weight:600; padding:10px 20px; z-index:99; animation:toastIn .22s ease-out; box-shadow:var(--shadow-2); border-radius:30px; letter-spacing:0.5px; max-width: 90vw; text-align:center; }
  /* A8: toast to stabilny live region — chowamy przez przezroczystość (display/hidden
     wycinałoby element z drzewa dostępności), ekran czytnika ogłasza zmianę tekstu */
  .toast[hidden] { display:flex; visibility:hidden; pointer-events:none; }
  .toast { display:flex; align-items:center; }
  .tiny { font-size: calc(11px * var(--fs-mult)); color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
  .mt { margin-top:12px; }
  .winner { font-size: calc(32px * var(--fs-mult)); font-weight:900; background:linear-gradient(135deg, #fff 0%, var(--accent-text) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; padding:8px 0; }

  .dlg-btn { flex:1; min-height:var(--tap); padding:12px 0; font-size: calc(13px * var(--fs-mult)); font-weight:800; cursor:pointer; border:1px solid var(--border); border-radius:8px; transition:transform .05s; text-transform:uppercase; letter-spacing:0.5px; background:transparent; color:var(--text-light); }
  .dlg-btn:active { transform:scale(.98); }
  .dlg-btn.secondary { background:transparent; color:var(--text-light); }
  .dlg-btn.green { background:var(--green-grad); color:var(--ink); border-color:var(--green); box-shadow:0 4px 15px rgba(74, 222, 128, 0.2); }
  .dlg-btn.red { background:var(--red-grad); color:var(--ink); border-color:var(--red); box-shadow:0 4px 15px rgba(244, 63, 94, 0.2); }
  .dlg-btn.solid { background:var(--accent-grad); color:var(--ink); border-color:var(--accent); box-shadow:0 4px 15px rgba(var(--accent-rgb), 0.25); }

  .lang-btn { flex:1; height:44px; background:var(--surface); border:1px solid var(--border); color:var(--text-light); font-weight:800; font-size:calc(13px * var(--fs-mult)); letter-spacing:1px; border-radius:8px; cursor:pointer; transition:all .15s; }
  .lang-btn.sel { background:var(--accent-grad); color:var(--ink); border-color:var(--accent); box-shadow:0 4px 15px rgba(var(--accent-rgb), 0.25); }
  .lang-btn:active { transform:scale(.97); }

  .rank-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
  .rank-row { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:8px; }
  .rank-row.first { border-color:var(--accent); background:var(--surface-hover); box-shadow:0 0 15px rgba(var(--accent-rgb), 0.25); }
  .rank-pos { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--brown-800); color:var(--accent-text); font-weight:800; font-size:12px; border-radius:50%; border:1px solid var(--border); }
  .rank-row.first .rank-pos { color:var(--ink); background:var(--accent); border-color:var(--accent); }
  .rank-name { flex:1; display:flex; align-items:center; gap:10px; font-size: calc(15px * var(--fs-mult)); color:var(--text-light); min-width:0; font-weight:600; }
  .rank-name .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rank-score { flex-shrink:0; min-width:48px; text-align:right; font-size: calc(22px * var(--fs-mult)); font-weight:800; color:var(--text-light); }

  .icon-btn { color:var(--accent-text); display:flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); background:var(--surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; flex-shrink:0; padding:0; transition:all .15s; }
  .icon-btn:active { transform:scale(.93); }
  .icon-btn svg { width:18px; height:18px; display:block; }
  .icon-btn:disabled { opacity:.2; pointer-events:none; }

  /* Podświetlenie po najechaniu — tylko urządzenia z myszą (bez „przyklejonego” hover na dotyku) */
  @media (hover:hover) {
    .btn-outline:hover { border-color: var(--accent-text); background: var(--surface-hover); }
    .history-chips .chip:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
    .icon-btn:hover { border-color:var(--accent); background:var(--surface-hover); }
    .score-btns button:hover { background:rgba(var(--accent-rgb), .18); border-color:var(--accent); }
    .btn:hover:not(:disabled) { filter:brightness(1.1); box-shadow:0 4px 24px rgba(var(--accent-rgb), .45); }
    .dlg-btn:hover { filter:brightness(1.12); border-color:var(--accent); }
    .dlg-btn.secondary:hover { background:var(--surface-hover); }
    .lang-btn:hover:not(.sel) { border-color:var(--accent); background:var(--surface-hover); }
    .confirm-row button:hover { filter:brightness(1.1); }
    .module-card:hover { border-color:var(--accent); }
    button.stat-btn:hover { border-color:var(--accent); }
  }

  /* WIDOCZNY FOCUS DLA NAWIGACJI KLAWIATURĄ (dostępność) */
  :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
  .dot:focus-visible, .chip:focus-visible { outline-offset: 1px; }

  @keyframes dialogIn{
    from{ opacity:0; transform:scale(.95); }
    to{ opacity:1; transform:scale(1); }
  }

  @keyframes toastIn{
    from{ opacity:0; transform:translate(-50%,10px); }
    to{ opacity:1; transform:translate(-50%,0); }
  }

  /* ===== Kolory graczy: klasy z białej listy (indeks palety) zamiast inline style ===== */
  .c0 { --pc:#FFFFFF; } .c1 { --pc:#E53935; } .c2 { --pc:#1E88E5; } .c3 { --pc:#43A047; }
  .c4 { --pc:#FDD835; } .c5 { --pc:#757575; } .c6 { --pc:#FB8C00; } .c7 { --pc:#8E24AA; }
  .c8 { --pc:#D81B60; } .c9 { --pc:#00ACC1; } .c10 { --pc:#6D4C41; } .c11 { --pc:#000000; }  /* czarny: na ciemnym tle zawsze z jaśniejszą obwódką */
  .player-card { border-left:4px solid var(--pc); }
  .list-item.accent { border-left-color:var(--pc); }
  /* A7: czarny (c11) na ciemnym tle — karta gracza i wyróżnione pozycje też z obwódką;
     brąz (c10) i fiolet (c7) mają kontrast paska 2,4–2,6:1 z tłem (audyt WCAG 1.4.11) */
  .player-card.c11 { border-left-color:#3a3a3a; box-shadow: inset 2px 0 0 rgba(255,255,255,0.35); }
  .list-item.accent.c11 { border-left-color:#3a3a3a; box-shadow: inset 2px 0 0 rgba(255,255,255,0.35); }
  .player-card.c10, .player-card.c7 { box-shadow: inset 2px 0 0 rgba(255,255,255,0.35); }
  .list-item.accent.c10, .list-item.accent.c7 { box-shadow: inset 2px 0 0 rgba(255,255,255,0.35); }
  .pos { color:var(--green); } .neg { color:var(--red); }
  /* czarny (c11) widoczny na ciemnym tle: obwódka/poświata zamiast krycia */
  .dot.c11 { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
  .dot.sel.c11 { box-shadow: inset 0 0 0 2px #fff, 0 0 12px var(--accent); }
  .avatar.c11 { border:1px solid rgba(255,255,255,0.45); }
  .die-tile.col.c11 { border-color: rgba(255,255,255,0.45); color:#fff; }

  /* ===== Pomocnicze klasy (zastępują style inline) ===== */
  .tc { text-align:center; } .full { width:100%; } .grow { flex:1; }
  .pad { padding:12px; } .mt4 { margin-top:4px; } .mt8 { margin-top:8px; } .mt10 { margin-top:10px; }
  .note { text-transform:none; letter-spacing:0; line-height:1.5; }
  /* Ekran główny: Nowa gra → Wznów grę → Ustawienia w jednej, wyśrodkowanej kolumnie */
  .home-top { display:flex; flex-direction:column; gap:12px; width:100%; max-width:480px; margin:0 auto; }
  .home-top .card { margin-bottom:0; }
  .home-top .sub { margin:8px 0 10px; }
  .home-top .btn-outline { min-height:48px; font-size:calc(14px * var(--fs-mult)); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
  .counter { text-align:center; color:var(--accent-text); }
  .header-row.between { justify-content:space-between; }
  /* nagłówek ekranu gry zostaje na wierzchu podczas przewijania listy graczy */
  .header-row.sticky { position:sticky; top:0; z-index:10; margin:0 -16px 8px; padding:8px 16px; background:rgba(var(--ink-rgb), .88); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
  .row-left.tools { gap:8px; margin-left:auto; }
  .row-left.col { flex-direction:column; align-items:flex-start; gap:2px; }
  .btn-pair { display:flex; gap:8px; }
  .player-name { font-weight:700; font-size:calc(18px * var(--fs-mult)); }
  .score-row { align-items:center; gap:8px; margin-top:8px; }
  .score-btns.s14 { --btn-fs:14px; }
  .resume-list { margin-top:10px; }
  .resume-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); }
  .resume-row:last-child { border-bottom:0; }
  .resume-row .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .resume-score { flex-shrink:0; font-weight:800; font-size:calc(18px * var(--fs-mult)); }
  .save-meta { font-size:calc(11px * var(--fs-mult)); color:var(--text-muted); }
  .font-ctl { justify-content:center; gap:16px; }
  .font-btn { width:48px; padding:0; font-size:16px; }
  .pct { min-width:52px; text-align:center; letter-spacing:.5px; }
  .pair-row { padding:8px 0; border-bottom:1px solid var(--border); }
  .pair-actions { display:flex; align-items:center; gap:8px; }
  input.pair-input { width:70px; text-align:center; margin:0; }
  .dlg-text { font-size:14px; margin-top:10px; text-align:center; color:var(--text-light); }
  .dlg-name { margin-top:8px; color:var(--text-light); text-align:center; }
  .dialog-actions.tight { margin-top:16px; }
  .edit-list { max-height:260px; overflow-y:auto; }
  .edit-row { padding:6px 0; border-bottom:1px solid var(--border); }

  /* ===== Przeciąganie kart ===== */
  .drag-handle { touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; color:var(--text-muted); transition:color .15s; }
  @media (hover:hover) { .drag-handle:hover { color:var(--accent-text); } }
  .card.dragging .drag-handle { color:var(--accent-text); }
  .card.dragging { z-index:5; cursor:grabbing; transition:none; border-color:var(--accent); box-shadow:var(--shadow-3), 0 0 0 1px var(--accent); }

  /* ===== Dostępność: ograniczony ruch ===== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }
  /* A9: Windows High Contrast — gradientowe wypełnienia tekstu (-webkit-text-fill-color:
     transparent) znikają w trybie forced-colors; przywracamy zwykły kolor */
  @media (forced-colors: active) {
    h1, .score-num, .winner { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; color: canvastext; }
  }
  .check-row { display:flex; align-items:center; gap:12px; min-height:var(--tap); cursor:pointer; }
  .check-row input { width:22px; height:22px; flex-shrink:0; margin:0; accent-color:var(--accent); cursor:pointer; }
  .check-row span { font-size:calc(14px * var(--fs-mult)); font-weight:600; color:var(--text-light); }

  /* ===== Kości ===== */
  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  select { width:100%; background:rgba(var(--ink-rgb), 0.85); border:1px solid var(--border); color:#fff; padding:12px; font-family:inherit; font-size:calc(15px * var(--fs-mult)); margin-top:8px; border-radius:8px; min-height:var(--tap); }
  .dice-count { margin-top:8px; }
  .dice-static { margin-top:8px; text-align:center; font-weight:800; font-size:calc(18px * var(--fs-mult)); color:var(--text-light); }
  .dice-out { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; min-height:76px; margin-top:16px; }
  .die-tile { min-width:64px; height:64px; padding:0 8px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1; overflow-wrap:anywhere; border-radius:12px; border:2px solid var(--accent); background:var(--surface-2); color:var(--text-light); font-size:calc(28px * var(--fs-mult)); font-weight:900; box-shadow:0 4px 15px rgba(0,0,0,.4); }
  .die-tile.long { font-size:calc(16px * var(--fs-mult)); }
  .die-tile.col { background:var(--pc); border-color:var(--pc); }
  /* A6: kolor tekstu na kolorowej kości wg luminancji tła (fiolet/brąz/róż dają z --ink tylko ~2,5–3,9:1) */
  .die-tile.col { color:#fff; }
  /* tekst wg luminancji ścianki (audyt: kontrasty ≥4,5:1 dla 15 px kafelków) */
  .die-tile.col.c0, .die-tile.col.c3, .die-tile.col.c4 { color:var(--ink); }
  .die-tile.col.c5 { color:#fff; }  /* szary: biały tekst 4,61:1 (audyt WCAG) */
  .die-tile.col.c1, .die-tile.col.c2 { color:var(--ink); }
  .die-tile.col.c9 { color:var(--ink); }  /* turkus: ciemny tekst 7,01:1 (audyt WCAG) */
  .dice-info { min-height:24px; margin-top:8px; text-align:center; font-weight:800; font-size:calc(18px * var(--fs-mult)); color:var(--accent-text); }
  .face-list { max-height:min(320px, 45vh); max-height:min(320px, 45dvh); overflow-y:auto; margin-top:10px; }
  .face-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
  .face-n { width:24px; text-align:right; flex-shrink:0; }
  .face-input { margin:0; flex:1; min-width:0; }
  .die-sw { width:var(--tap); height:var(--tap); flex-shrink:0; padding:0; cursor:pointer; border-radius:8px; border:2px dashed var(--border); background:transparent; color:var(--text-muted); font-size:calc(14px * var(--fs-mult)); }
  .die-sw.col { background:var(--pc); border:2px solid rgba(255,255,255,.35); }
  .die-tile.mini { min-width:36px; height:36px; padding:0 6px; font-size:calc(15px * var(--fs-mult)); border-radius:8px; border-width:1px; box-shadow:none; }
  .dice-log { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:6px; max-height:168px; overflow-y:auto; }
  .log-row { border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:rgba(255,255,255,0.02); }
  .log-head { display:flex; justify-content:space-between; gap:8px; font-size:calc(12px * var(--fs-mult)); font-weight:700; color:var(--text-muted); }
  .log-sum { color:var(--accent-text); white-space:nowrap; }
  .log-faces { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  /* okno rzutu przyklejone do góry: rosnąca historia nie przesuwa przycisku RZUĆ */
  .dialog-back[data-dlg="dice"] { align-items:flex-start; padding-top:max(20px, 8vh); }
  .dialog-back[data-dlg="dice"] .dialog { max-height: calc(100vh - max(20px, 8vh) - 20px); max-height: calc(100dvh - max(20px, 8vh) - 20px); }

  /* ===== Karta gracza (kompaktowa) i ekran główny ===== */
  .player-card { padding:12px 16px 14px; }
  .score-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:2px; }
  .score-side { min-width:0; }
  .score-row .score-side:last-child { text-align:left; }
  .card-row { margin-top:10px; min-height:44px; display:flex; align-items:stretch; border-top:1px dashed var(--border-glow); padding-top:10px; }
  .card-row .history-chips { flex:1; min-width:0; width:auto; flex-direction:row; justify-content:center; align-items:stretch; gap:8px; }
  /* ===== Ostatnie wpisy na karcie gracza: zwykłe liczby, bez obwódki i tła
     (nie wyglądają jak przyciski punktacji) — klikalne do edycji przy pomyłce ===== */
  .card-row .history-chips .chip {
    flex:0 1 96px; min-width:60px; min-height:44px;
    border:none; background:transparent; box-shadow:none;
    font-weight:800; text-decoration:underline dotted rgba(var(--tan-rgb), .55);
    text-underline-offset:3px;
  }
  .card-row .history-chips .chip.pos { color:var(--green); }
  .card-row .history-chips .chip.neg { color:var(--red); }
  @media (hover:hover) { .card-row .history-chips .chip:hover { text-decoration-color:var(--accent); } }
  .card-row .confirm-row { flex:1; margin-top:0; }
  .card-row .confirm-row button { padding:0; min-height:44px; }
  .no-entries { align-self:center; font-style:italic; text-transform:none; letter-spacing:0; }
  .score-stack .score-btns + .score-btns { margin-top:6px; }
  .home-top .btn-main { min-height:52px; padding:14px; font-size:calc(16px * var(--fs-mult)); letter-spacing:1.5px; }

  /* kości: większy wynik przy małej liczbie kości */
  .dice-out { min-height:112px; }
  .die-tile.lg { min-width:76px; height:76px; font-size:calc(40px * var(--fs-mult)); }
  .die-tile.xl { min-width:96px; height:96px; font-size:calc(52px * var(--fs-mult)); border-radius:16px; }
  .die-tile.lg.long { font-size:calc(20px * var(--fs-mult)); }
  .die-tile.xl.long { font-size:calc(24px * var(--fs-mult)); }
  .dice-static { text-align:left; font-weight:600; font-size:calc(15px * var(--fs-mult)); color:var(--text-muted); padding:12px; border:1px dashed var(--border); border-radius:8px; margin-top:8px; }

  /* ===== Nagłówki grup ustawień (Rozgrywka / Wygląd / Dane) — mocniejsze niż .sub ===== */
  /* nagłówki semantyczne w Ustawieniach (h2/h3) — zero różnicy wizualnej względem dawnych <p> */
  h2.settings-group, h3.sub { margin:0; }  /* N4: reset tylko dla nagłówków Ustawień — p.sub (sekcje na home i NOWA GRA) wraca do globalnych marginesów .sub */
  /* N4: łątka dla ekranu głównego usunięta — p.sub wraca do globalnych marginesów .sub */
  h2.settings-group { font-size: calc(13px * var(--fs-mult)); font-weight:900; letter-spacing:2.5px; text-transform:uppercase; text-align:left; color:var(--text-light); margin:28px 0 4px; padding-bottom:6px; border-bottom:2px solid var(--border); }
  h3.sub { font-size: calc(12px * var(--fs-mult)); font-weight:800; letter-spacing:2px; text-transform:uppercase; text-align:left; color:var(--text-muted); margin:16px 0 6px; }
  .settings-group:first-child { margin-top:0; }
  .settings-group + .sub { margin-top:12px; }

  /* ===== Moduły gry (v11): losowanie, rundy, pomiar czasu, cel, kość ===== */
  .module-list { display:flex; flex-direction:column; gap:10px; margin-bottom:4px; }
  .module-card { padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .15s; }
  .module-card:active { transform:scale(.98); }
  /* aktywny moduł: subtelna kropka statusu przy nazwie (bez mocnej ramki — ta zostaje
     tylko dla interakcji: hover/active w bloku @media oraz stan .dragging) */
  .module-card .name::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:1px; background:var(--brown-700); }
  .module-card:not(.off) .name::before { background:var(--accent); }
  .module-card .name { font-size:calc(14px * var(--fs-mult)); font-weight:800; letter-spacing:1px; color:var(--accent-text); text-transform:uppercase; }
  .module-card .mod-state { text-transform:none; letter-spacing:0; white-space:nowrap; }
  /* nagłówek karty modułu = przełącznik: minimalna wysokość celu dotykowego 44 px */
  .module-card .module-head { min-height:44px; cursor:pointer; }
  .module-card .module-head:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:8px; }

  /* moduł wyłączony: przygaszona karta — klik rozjaśnia i dodaje do gry */
  .module-card.off { background:rgba(255,255,255,0.02); border-color:var(--border); opacity:.65; }
  .module-card.off .name { color:var(--text-muted); }
  .mod-ctl { justify-content:center; gap:8px; }
  .mod-ctl .pct { min-width:64px; text-transform:none; }
  input.mod-input { text-align:center; }
  .dlg-modules { margin:10px 0 14px; }
  /* pasek statusu gry (nagłówek ekranu gry): runda / cel / czas */
  .game-status { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0; flex-wrap:wrap; }
  .stat-btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); min-width:44px; padding:4px 10px; background:var(--surface-2); border:1px solid rgba(var(--accent-rgb), .35); color:var(--accent-text); font-weight:800; font-size:calc(13px * var(--fs-mult)); border-radius:8px; cursor:default; white-space:nowrap; font-variant-numeric:tabular-nums; }  /* U1: min-width 44px — README obiecuje cele dotykowe 44 px */
  /* P1: lista wyników zakończonej gry w Ustawieniach (OSTATNIE GRY) */
  .finish-list { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
  .finish-row { display:flex; align-items:center; gap:6px; min-width:0; }
  .finish-row .name { font-size:calc(13px * var(--fs-mult)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .finish-score { font-weight:800; font-size:calc(13px * var(--fs-mult)); color:var(--text-muted); }
  .finish-row.win .name { color:var(--accent-text); }
  .finish-row.win .finish-score { color:var(--green); }
  button.stat-btn { cursor:pointer; transition:all .15s; }
  button.stat-btn:active { transform:scale(.95); }
  /* flaga osiągnięcia celu przy nazwie gracza */
  .target-flag { color:var(--green); font-size:calc(15px * var(--fs-mult)); margin-left:6px; }
  /* ikona w tytule karty modułu i w statusie czasu */
  .mod-ico { display:inline-flex; width:16px; height:16px; margin-right:6px; vertical-align:-3px; color:inherit; }
  .mod-ico svg { width:100%; height:100%; display:block; }
  /* przycisk „+ DODAJ GRACZA” na ekranie NOWA GRA */
  .btn-add-player { min-height:52px; width:100%; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
  /* toast cofnięcia: informacja + przycisk PRZYWRÓĆ (gaśnie po 5 s) */
  .toast-undo { display:flex; align-items:center; gap:12px; justify-content:center; max-width:92vw; z-index:100; }
  .toast-undo[hidden] { display:none; }
  .toast-undo-btn { flex:0 0 auto; min-height:44px; padding:6px 16px; background:var(--accent-grad); color:var(--ink); border:1px solid var(--accent); border-radius:20px; font-weight:800; font-size:calc(11px * var(--fs-mult)); letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
  .toast-undo-btn:active { transform:scale(.95); }

  /* ===== TABLET + DESKTOP: szerszy układ od 700 px (tablet pionowo = 2 kolumny kart) ===== */
  @media (min-width: 700px) {
    body { max-width: 1100px; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); }
    .header-row.sticky { margin: 0 -24px 8px; padding: 8px 24px; }

    /* Ekran gry: karty graczy w rzędach, wyśrodkowane (2 graczy = 2 karty na środku, niepełny rząd też).
       Drag & drop działa bez zmian: dragTick liczy pozycję docelową po obu osiach (X w rzędzie, Y między rzędami). */
    [data-screen="game"] .scroll { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; }
    [data-screen="game"] .scroll .card { margin-bottom: 0; width: 340px; max-width: 100%; }
    /* dokładnie 4 graczy: siatka 2×2 zamiast 1×4 — spójnie z układem 900 px i 6 graczami */
    [data-screen="game"] .scroll:has(> .card:nth-child(4):last-child) { max-width: calc(2 * 340px + 14px); margin-inline: auto; }

    /* Ekran główny: zapisane składy wyśrodkowane (1 karta stoi na środku, kolejne dokładają się rzędami) */
    [data-screen="home"] .scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
    [data-screen="home"] .scroll .card { margin-bottom: 0; width: 480px; max-width: 100%; }   /* tak samo szeroko jak kolumna przycisków nad nimi */
    [data-screen="home"] .scroll .empty { width: 100%; }

    /* Nowa gra i Ustawienia: formularze nie mają się rozciągać na cały monitor */
    [data-screen="setup"], [data-screen="settings"] { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }

    .dialog { max-width: 420px; }

    /* desktop/tablet: karty modułów w kolumnie 600 px — dialog dodawania gracza taki sam */
    .dialog-back[data-dlg="addPlayer"], .dialog-back[data-dlg="addPlayerColor"] { padding:24px; }
    .dialog-back[data-dlg="addPlayer"] .dialog,
    .dialog-back[data-dlg="addPlayerColor"] .dialog { max-width:600px; }
  }