/* ================================================ LOGOWANIE I PANEL
   Dokładany do `hub.css` — zmienne barw i klasa `.ramka` są stamtąd, tu
   siedzą tylko ekrany kont. Osobny plik, bo gra i panel administratora to
   dwa różne ekrany i nie ma powodu, żeby ładowały swoje style nawzajem. */

/* ------------------------------------------------------------ BRAMA */
.brama {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 16px;
}
.brama-karta { width: min(380px, 100%); padding: 22px 20px; }
.brama-tytul {
  margin: 0 0 4px; font-size: 17px; letter-spacing: .16em; color: var(--zloto);
}
.brama-pod {
  margin: 0 0 18px; font-size: 10.5px; letter-spacing: .05em; color: var(--krem-dim);
}
.brama-form { display: flex; flex-direction: column; gap: 12px; }
.brama-pole { display: flex; flex-direction: column; gap: 5px; }
.brama-pole span { font-size: 10px; letter-spacing: .12em; color: var(--krem-dim); }
.brama-pole input {
  padding: 9px 10px;
  background: #16122A; border: 2px solid var(--linia);
  color: var(--krem); font-family: inherit; font-size: 13px;
}
.brama-pole input:focus { outline: none; border-color: var(--fiolet); }
.brama-btn {
  margin-top: 4px; padding: 10px 14px;
  background: linear-gradient(180deg, #3A1D66, #24123F);
  border: 2px solid var(--linia-jasna);
  color: var(--krem); font-family: inherit; font-size: 12px;
  letter-spacing: .12em; cursor: pointer;
}
.brama-btn:hover:not(:disabled) { border-color: var(--zloto); color: var(--zloto); }
.brama-btn:disabled { opacity: .5; cursor: default; }
.brama-btn--maly { margin: 0; padding: 7px 11px; font-size: 10.5px; }
.brama-blad {
  margin: 2px 0 0; min-height: 14px;
  font-size: 10.5px; letter-spacing: .04em; color: #FF8B8B;
}

/* ------------------------------------------------- KONTO NA PASKU GRY */
.konto { display: flex; align-items: center; gap: 8px; }
.konto-kto {
  font-size: 10.5px; letter-spacing: .06em; color: var(--zloto);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-wejdz {
  padding: 6px 10px;
  background: #16122A; border: 2px solid var(--linia);
  color: var(--krem-dim); font-size: 10px; letter-spacing: .12em;
  text-decoration: none;
}
.konto-wejdz:hover { border-color: var(--zloto); color: var(--zloto); }
/* Reset kasuje postęp bezpowrotnie, więc odróżnia się barwą od reszty paska —
   nie ma być przyciskiem, w który wchodzi się odruchowo. */
.konto-wejdz--reset { font-family: inherit; cursor: pointer; }
.konto-wejdz--reset:hover { border-color: #FF8B8B; color: #FF8B8B; }

/* ------------------------------------------------------------ PANEL */
.panel {
  max-width: 1000px; margin: 0 auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel-gora {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
}
.panel-tytul { margin: 0; font-size: 14px; letter-spacing: .14em; color: var(--zloto); }
.panel-kto { margin-left: auto; font-size: 11px; color: var(--krem-dim); }
.panel-blok { padding: 14px; }
.panel-naglowek {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; color: var(--krem-dim);
}
.panel-licznik {
  margin-left: 6px; padding: 1px 7px;
  background: #1B1730; border: 1px solid var(--zloto-ciemne); color: var(--zloto);
}
.panel-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.panel-form input, .panel-form select {
  padding: 8px 10px;
  background: #16122A; border: 2px solid var(--linia);
  color: var(--krem); font-family: inherit; font-size: 12px;
}
.panel-form input { flex: 1 1 180px; min-width: 0; }
.panel-form input:focus, .panel-form select:focus {
  outline: none; border-color: var(--fiolet);
}

/* Formularz wiadomości ma dwa piętra: odbiorca z przyciskiem u góry, pole
   treści pod spodem na całą szerokość — akapit wpisany w wąski pasek obok
   selecta nie dawał się przeczytać przed wysłaniem. */
.panel-form--kolumna { flex-direction: column; align-items: stretch; }
.panel-form-rzad { display: flex; gap: 8px; align-items: center; }
.panel-form-rzad select { flex: 1 1 auto; min-width: 0; }
.panel-form textarea {
  padding: 8px 10px;
  background: #16122A; border: 2px solid var(--linia);
  color: var(--krem); font-family: inherit; font-size: 12px;
  resize: vertical;
}
.panel-form textarea:focus { outline: none; border-color: var(--fiolet); }

/* Hasło startowe: świadomie krzykliwe. Pokazuje się raz i admin ma je
   przepisać, więc nie może wyglądać jak zwykły komunikat do przewinięcia. */
.panel-haslo {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(58, 44, 20, .5); border: 2px solid var(--zloto);
}
.panel-haslo-opis { margin: 0 0 6px; font-size: 10.5px; color: var(--krem); }
.panel-haslo-kod {
  display: block; font-family: inherit; font-size: 18px;
  letter-spacing: .22em; color: var(--zloto);
  user-select: all;                 /* jedno kliknięcie zaznacza całość */
}
.panel-blad {
  margin: 8px 0 0; min-height: 14px; font-size: 10.5px; color: #FF8B8B;
}

/* Tabela w przewijanej otoczce — na telefonie sześć kolumn nie mieści się
   w szerokości ekranu, a strona nie ma prawa jeździć w poziomie. */
.panel-tabela-otoczka { overflow-x: auto; }
.panel-tabela { width: 100%; border-collapse: collapse; font-size: 11px; }
.panel-tabela th, .panel-tabela td {
  padding: 7px 9px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--linia);
}
.panel-tabela th {
  font-weight: normal; font-size: 9.5px; letter-spacing: .1em;
  color: var(--krem-dim);
}
.panel-tabela td { color: var(--krem); }
.panel-akcje { display: flex; gap: 6px; }
.panel-btn {
  padding: 5px 8px;
  background: #16122A; border: 1px solid var(--linia);
  color: var(--krem-dim); font-family: inherit; font-size: 9.5px;
  letter-spacing: .06em; cursor: pointer;
}
.panel-btn:hover:not(:disabled) { border-color: var(--zloto); color: var(--zloto); }
.panel-btn:disabled { opacity: .4; cursor: default; }
.panel-btn--usun:hover:not(:disabled) { border-color: #FF8B8B; color: #FF8B8B; }