/* ==========================================================================
   PANEL KONTA (LOGOWANIE / REJESTRACJA) — css/auth.css
   -------------------------------------------------------------------------
   Mroczny pixel-art (klimat ekranu ładowania: portal + ognisko):
   - Tła paneli: głęboki, nienasycony fiolet nocy (#1a1625 / #0f0d14),
     PŁASKIE kolory — bez gładkich gradientów.
   - Ramki: masywne "kamienne" obramowania (3-4px #3a324b) z jaśniejszą
     górną krawędzią (#4f4562) imitującą światło pochodni.
   - Przyciski: pixel-art "klocki" (klasyczne RPG) — twarde światło/cień
     przez border-color (góra-lewo jasne, dół-prawo ciemne), :active
     odwraca ramkę (efekt wciśnięcia).
   - Akcenty: złoto pochodni #d49a31 (CTA), mroczna purpura #6d5aa8 /
     magiczny błękit portalu #4a7fb5 (stany hover/focus).
   - Typografia: jednolity font 'Press Start 2P' (UI + wordmark).
   Motywy: neutralne high-fantasy (natura, żywioły, minerały).
   ========================================================================== */

/* --- Paleta pixel-art (wspólna dla ekranów konta) -------------------------- */

:root {
  --px-bg-deep: #0f0d14;      /* nocne niebo / wgłębienia */
  --px-bg-panel: #1a1625;     /* tła paneli */
  --px-bg-insert: #241e33;    /* ciemne wstawki */
  --px-stone: #3a324b;        /* kamienna rama */
  --px-stone-light: #4f4562;  /* światło na górnej krawędzi */
  --px-stone-dark: #2a2438;   /* cień na dolnej krawędzi */
  --px-gold: #d49a31;         /* złoto z pochodni/ogniska */
  --px-gold-light: #f0c064;
  --px-gold-dark: #8a5f1c;
  --px-purple-hover: #6d5aa8; /* mroczna purpura (hover) */
  --px-blue-hover: #4a7fb5;   /* magiczny błękit portalu (hover/focus) */
  --px-text: #cfc7dd;
  --px-text-muted: #8f87a3;
}

#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--px-text);
  font-family: 'Press Start 2P', monospace;
  /* Grafika klimatyczna + PŁASKIE przyciemnienie (bez gradientów). */
  background: var(--px-bg-deep) url('../assets/loading-background (1)-resizeme.jfif') center / cover no-repeat;
}

/* Płaska przesłona pod czytelność (stały kolor, nie gradient). */
#auth-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(15, 13, 20, 0.52);
}

/* --- Paski górny/dolny (status serwera, social, wersja, domena) ----------- */

.auth-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Prawy padding = miejsce na ikonę audio (.audio-toggle-btn) w prawym górnym
     narożniku; dolny pasek (.auth-bar-bottom) nadpisuje go własnym paddingiem. */
  padding: 18px 58px 0 30px;
  font-size: 8px;
  letter-spacing: 0px;
}

.auth-bar-bottom {
  padding: 0 30px 18px;
  margin-top: auto;
}

.auth-bar-group {
  display: flex;
  gap: 14px;
}

/* Chip = mała kamienna tabliczka. */
.auth-chip {
  padding: 5px 10px;
  background: var(--px-bg-panel);
  border: 2px solid var(--px-stone);
  border-color: var(--px-stone-light) var(--px-stone-dark) var(--px-stone-dark) var(--px-stone-light);
  color: var(--px-text-muted);
  white-space: nowrap;
}

a.auth-link {
  color: var(--px-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

a.auth-link:hover,
a.auth-link:focus-visible {
  color: var(--px-blue-hover);
  border-color: var(--px-blue-hover);
  outline: none;
}

/* --- Środek: wordmark + panel konta (masywne okno kamienne) --------------- */

.auth-center {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vh, 26px);
  padding: 10px 20px;
}

/* Placeholder tekstowy logo (tymczasowy wordmark) — font nagłówkowy
   Press Start 2P z silnym obrysem w kolorach bieli i fioletu.
   Docelowo: pixel-art 16/32-bit rysowany przez grafika (patrz brandbook). */
.auth-logo {
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(22px, 4.2vh, 40px);
  font-weight: 400;
  color: #f5f2ff;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
  text-shadow:
    3px 0 0 var(--px-stone), -3px 0 0 var(--px-stone),
    0 3px 0 var(--px-stone), 0 -3px 0 var(--px-stone),
    3px 3px 0 var(--px-stone), -3px 3px 0 var(--px-stone),
    3px -3px 0 var(--px-stone), -3px -3px 0 var(--px-stone),
    6px 6px 0 rgba(109, 90, 168, 0.65),
    0 12px 26px rgba(0, 0, 0, 0.85);
}

/* Tagline pod wordmarkiem. */
.auth-logo .auth-logo-tag {
  display: block;
  margin-top: 10px;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px;
  letter-spacing: 0px;
  color: var(--px-text-muted);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

/* Masywne okno: płaski fiolet + kamienna rama 4px + wgłębienie (inset). */
.auth-panel {
  width: min(520px, 94vw);
  padding: clamp(16px, 2.8vh, 28px) clamp(18px, 3vw, 34px);
  background: var(--px-bg-panel);
  border: 4px solid var(--px-stone);
  border-color: var(--px-stone-light) var(--px-stone-dark) var(--px-stone-dark) var(--px-stone-light);
  box-shadow:
    0 0 0 2px var(--px-bg-deep),
    0 18px 50px rgba(0, 0, 0, 0.72),
    inset 0 0 0 2px var(--px-bg-deep),
    inset 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* --- Wiersze pól: etykieta nad polem -------------------------------------- */

.auth-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.auth-row-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--px-text-muted);
}

/* Input = rzeźbiona tabliczka: smolista czerń + wgłębione cienie. */
.auth-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  background: #000000;
  border: 3px solid var(--px-stone);
  border-color: var(--px-stone-dark) var(--px-stone-light) var(--px-stone-light) var(--px-stone-dark);
  outline: none;
  color: #b9b4c9;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0px;
  caret-color: var(--px-gold);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.85),
    inset -1px -1px 0 rgba(122, 106, 148, 0.22);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.auth-row input::placeholder {
  color: #5c566b;
  font-style: italic;
}

/* Focus: magiczny błękit portalu. */
.auth-row input:focus {
  border-color: var(--px-blue-hover);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.85),
    0 0 12px rgba(74, 127, 181, 0.45);
}

/* --- Formularz konta + wiersz akcji --------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-actions {
  display: flex;
  gap: 10px;
}

/* --- Przyciski pixel-art ("klocki" z klasycznych RPG) ----------------------
   Twarde światło/cień: border-color góra-lewo jasny, dół-prawo ciemny.
   :active odwraca ramkę + skok przycisku — efekt wciśnięcia klawisza. */

.pixel-button,
.auth-btn,
.auth-btn-guest {
  font-family: inherit;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0px;
  cursor: pointer;
  border-radius: 0;
  border: 2px solid;
  border-color: var(--px-stone-light) var(--px-stone-dark) var(--px-stone-dark) var(--px-stone-light);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.06s ease, filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.pixel-button:hover:not(:disabled),
.auth-btn:hover:not(:disabled),
.auth-btn-guest:hover:not(:disabled) {
  filter: brightness(1.12);
}

.pixel-button:focus-visible,
.auth-btn:focus-visible,
.auth-btn-guest:focus-visible {
  outline: 2px solid var(--px-gold-light);
  outline-offset: 2px;
}

.pixel-button:active:not(:disabled),
.auth-btn:active:not(:disabled),
.auth-btn-guest:active:not(:disabled) {
  transform: translateY(3px);
  border-color: var(--px-stone-dark) var(--px-stone-light) var(--px-stone-light) var(--px-stone-dark);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.pixel-button:disabled,
.auth-btn:disabled,
.auth-btn-guest:disabled {
  opacity: 0.55;
  cursor: wait;
  filter: none;
}

/* Wariant bazowy (do reuse w innych panelach) — kamienny fiolet. */
.pixel-button {
  background-color: #5c4e73;
  color: #ffffff;
}

.pixel-button:hover:not(:disabled) {
  background-color: var(--px-purple-hover);
}

/* Główne CTA "PLAY AS GUEST" — złoto z pochodni/ogniska. */
.auth-btn-guest {
  display: block;
  width: 100%;
  margin: 2px 0 6px;
  padding: 13px 16px;
  font-size: 14px;
  background-color: var(--px-gold);
  border-color: var(--px-gold-light) var(--px-gold-dark) var(--px-gold-dark) var(--px-gold-light);
  color: #241a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.auth-btn-guest:hover:not(:disabled) {
  background-color: var(--px-gold-light);
}

.auth-btn-guest:active:not(:disabled) {
  border-color: var(--px-gold-dark) var(--px-gold-light) var(--px-gold-light) var(--px-gold-dark);
}

/* Domyślny przycisk akcji (LOG IN / CREATE ACCOUNT / VERIFY / ...) —
   kamienny fiolet, hover = mroczna purpura. */
.auth-btn {
  flex: 1;
  min-width: 150px;
  padding: 11px 12px;
  font-size: 12px;
  background-color: #5c4e73;
  border-color: var(--px-stone-light) var(--px-stone-dark) var(--px-stone-dark) var(--px-stone-light);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.auth-btn:hover:not(:disabled) {
  background-color: var(--px-purple-hover);
}

/* Przycisk wtórny (przełącznik CREATE ACCOUNT na ekranie logowania) — kamień. */
.auth-btn-steel {
  background-color: var(--px-bg-insert);
  border-color: var(--px-stone-light) var(--px-stone-dark) var(--px-stone-dark) var(--px-stone-light);
  color: var(--px-text);
}

.auth-btn-steel:hover:not(:disabled) {
  background-color: var(--px-stone);
  border-color: var(--px-blue-hover) var(--px-stone-dark) var(--px-stone-dark) var(--px-blue-hover);
}

/* --- Separator ----- OR ----- ----------------------------------------------- */

.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 14px;
  color: var(--px-text-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0px;
}

.auth-sep::before,
.auth-sep::after {
  content: '';
  flex: 1;
  border-top: 2px solid var(--px-stone);
}

/* --- Komunikaty / captcha / linki ------------------------------------------ */

.auth-error {
  min-height: 16px;
  margin-top: 10px;
  color: #e07a7a;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0px;
}

.auth-info {
  min-height: 16px;
  margin-top: 2px;
  color: #7fd18a;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0px;
}

/* Puste komunikaty (błąd/info) nie rezerwują wysokości — notka i link
   („Link your account…" / „Forgot password?") siedzą blisko przycisków
   akcji, tuż nad separatorem OR i PLAY AS GUEST (mniejszy odstęp). */
.auth-error:empty,
.auth-info:empty {
  min-height: 0;
  margin-top: 0;
}

.auth-note {
  margin-top: 6px;
  color: var(--px-text-muted);
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0px;
}

.auth-links {
  margin-top: 2px;
  text-align: center;
}

.auth-links a {
  display: inline-block;
  margin: 4px 8px 0;
  color: var(--px-text);
  font-size: 8px;
  letter-spacing: 0px;
  text-decoration: underline;
  cursor: pointer;
}

.auth-links a:hover,
.auth-links a:focus-visible {
  color: var(--px-blue-hover);
  outline: none;
}

.auth-captcha {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* --- Pomoc hasła: checklista reguł + pasek siły (rejestracja / reset) ------ */

.auth-pass-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin: -4px 0 8px;
  padding: 2px 4px;
  font-size: 8px;
  letter-spacing: 0px;
  color: var(--px-text-muted);
}

.auth-pass-rule::before {
  content: '\2717\00a0';
  color: #8a5a5a;
}

.auth-pass-rule.ok {
  color: #7fd18a;
}

.auth-pass-rule.ok::before {
  content: '\2713\00a0';
  color: #7fd18a;
}

.auth-pass-strength {
  height: 5px;
  margin: 0 0 12px;
  background: var(--px-bg-deep);
  border: 2px solid var(--px-stone);
  border-color: var(--px-stone-dark) var(--px-stone-light) var(--px-stone-light) var(--px-stone-dark);
  overflow: hidden;
}

.auth-pass-strength-fill {
  height: 100%;
  width: 0;
  transition: width 0.2s ease, background 0.2s ease;
}

.auth-pass-strength-fill.weak { width: 33%; background: #e07a7a; }
.auth-pass-strength-fill.medium { width: 66%; background: var(--px-gold); }
.auth-pass-strength-fill.strong { width: 100%; background: #7fd18a; }

/* --- Kod weryfikacyjny z maila (tryb verify) ------------------------------- */

input.auth-code {
  letter-spacing: 0px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
}

/* --- Live-sprawdzanie zajętości nicku (tryb register) ---------------------- */

.nick-status {
  min-height: 13px;
  font-size: 8px;
  letter-spacing: 0px;
  color: var(--px-text-muted);
}

.nick-status.ok {
  color: #7fd18a;
}

.nick-status.ok::before {
  content: '\2713\00a0';
}

.nick-status.bad {
  color: #e07a7a;
}

.nick-status.bad::before {
  content: '\2717\00a0';
}

/* --- Kompaktowe ekrany (bez scrolli — całość w viewportcie) ---------------- */

@media (max-height: 720px) {
  .auth-logo { font-size: clamp(18px, 3.2vh, 28px); }
  .auth-bar { padding: 12px 48px 0 24px; }
  .auth-bar-bottom { padding: 0 24px 12px; }
  .auth-row { margin-bottom: 8px; }
  .auth-row input { padding: 9px 10px; }
  .auth-btn-guest { padding: 10px 14px; font-size: 12px; }
  .auth-sep { margin: 8px 0 10px; }
  .auth-btn { padding: 9px 10px; }
  .auth-note { margin-top: 8px; }
  .auth-pass-rules { font-size: 8px; gap: 1px 10px; margin-bottom: 4px; }
  .auth-pass-strength { margin-bottom: 8px; }
}