/* Żabia kopalnia razem - dodatki do style.css (układ, pasek, karty i pad są wspólne z grą dla jednego gracza). */
.tytul .razem { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--zielen-jasna); vertical-align: middle; margin-left: 4px; }
.ikonka[hidden] { display: none; }
.przycisk:disabled { opacity: .5; cursor: default; box-shadow: none; transform: translateY(3px); }
a.ikonka { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#hud-pokoj { letter-spacing: 2px; color: var(--zielen-jasna); }

/* Ranking nad planszą: kolor żaby, numer, imię i diamenty. Nie łapie kliknięć. */
.ranking { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 1; pointer-events: none; }
.ranking:empty { display: none; }
.gracz { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 10px; background: rgba(20, 12, 5, .78); color: var(--krem); font-size: 13px; font-weight: 700; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.gracz .nr { width: 18px; height: 18px; border-radius: 6px; background: var(--kolor); color: #1e2a14; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gracz.ja { background: rgba(31, 92, 16, .9); }
.gracz.offline { opacity: .5; }
.gracz .ikona-krysztal { width: 9px; height: 9px; border-width: 1px; margin: 0 2px; }
.gracz b { font-variant-numeric: tabular-nums; }

/* Komunikat o połączeniu na dole planszy. */
.status { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: #ffdf8e; text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 1; }
.status:empty { display: none; }
@media (pointer: coarse) { .status { right: 176px; text-align: left; } }

/* Karty (wejście, poczekalnia, wynik) korzystają z .karta ze style.css; poniżej tylko formularz. */
.karta label { display: block; margin: 10px 0 4px; font-size: 14px; font-weight: 800; text-align: left; }
.karta input { width: 100%; padding: 11px 12px; border: 2px solid #b9a76a; border-radius: 12px; background: #fff; color: var(--atrament); font: 700 17px var(--font); }
.karta input:focus-visible, .przycisk:focus-visible, .ikonka:focus-visible { outline: 3px solid var(--granat-jasny); outline-offset: 2px; }
.karta input[readonly] { background: #fffbe8; font-size: 14px; }
.konto-gracza { margin: 10px 0; padding: 9px 12px; border-radius: 12px; background: #e4f4d2; color: var(--granat); }
#kod { text-transform: uppercase; letter-spacing: 4px; text-align: center; }
.dolacz { border-top: 2px solid rgba(31, 92, 16, .18); margin-top: 14px; padding-top: 4px; }
.karta .przycisk.szeroki-btn { width: 100%; margin-left: 0; margin-right: 0; }
.kod-duzy { font-size: 34px; letter-spacing: 6px; font-weight: 800; color: var(--granat); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.lista-graczy { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.lista-graczy .gracz { background: #fff; color: var(--atrament); font-size: 14px; max-width: 100%; }
.lista-graczy .gracz.ja { background: #e4f4d2; }
.wynik-lista { list-style: none; margin: 8px 0; padding: 0; text-align: left; display: inline-block; min-width: 60%; }
.wynik-lista li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 2px solid rgba(31, 92, 16, .18); font-size: 17px; font-weight: 700; }
.wynik-lista li:first-child { border-top: 0; font-size: 20px; color: var(--pomarancz-ciemny); }
.wynik-lista .miejsce { width: 28px; color: var(--granat); font-size: 16px; font-weight: 900; text-align: right; flex: none; }
.wynik-lista b { margin-left: auto; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.wynik-duzy .ikona-krysztal { width: 24px; height: 24px; border-width: 4px; margin-right: 10px; }
.karta .zasady { font-size: 13px; opacity: .85; text-align: left; }
.karta .blad { color: #b3261e; font-weight: 800; min-height: 20px; margin: 6px 0 0; }
.karta .blad:empty { display: none; }
@media (max-width: 640px) {
  .tytul { display: inline; } .tytul { font-size: 0; } .tytul .razem { font-size: 10px; margin-left: 0; }
  .ranking { gap: 3px; } .gracz { font-size: 11px; padding: 2px 6px 2px 3px; } .gracz .nr { width: 15px; height: 15px; font-size: 10px; }
  .kod-duzy { font-size: 28px; }
}