/* ==========================================================
   🟢 USER AUTH MODALS  (Login / Register)
   ========================================================== */
@keyframes setupGlow {
  0%   { text-shadow: 0 0 4px #00ffff; opacity: 0.8; }
  50%  { text-shadow: 0 0 12px #00ffff; opacity: 1; }
  100% { text-shadow: 0 0 4px #00ffff; opacity: 0.8; }
}


/* Ogólny styl dla obu modali (bez powiększenia) */
.user-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: rgba(0, 0, 0, 0.0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

/* Powiększenie TYLKO dla Login */
#user-login-modal {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.4) !important;
}

.user-modal-content {
  background: #2e1f0f;
  border: 6px solid #000;
  box-shadow: 0 0 20px #000;
  padding: 32px;
  max-width: 800px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #fffbe0;
}



/* 🔹 Inputs & Buttons */
.user-modal-content input {
  display: block;
  width: 100%;
  margin: 10px auto;
  padding: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
}

.user-modal.hidden {
  display: none !important;
}


.user-modal-content button {
  margin-top: 10px;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  cursor: pointer;
}

/* 🔹 Password visibility toggle */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 30px;
}

.toggle-password {
  position: absolute;
  right: 5px;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* ==========================================================
   🟣 POST-LOGIN / TRADER LOBBY MODALS (oryginalne)
   ========================================================== */
.postlogin-modal.hidden,
.trader-lobby-modal.hidden {
  display: none;
}

.postlogin-modal__backdrop,
.trader-lobby-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.postlogin-modal__panel,
.trader-lobby-modal__panel {
  position: fixed;
  z-index: 901;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 620px);
  max-height: 80vh;
  overflow: auto;

  background: #2e1f0f;
  border: 6px solid #000;
  box-shadow: 0 0 20px #000;
  padding: 32px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #fffbe0;
}

/* 🔹 Titles */
.postlogin-modal__title,
.trader-lobby-modal__title {
  margin: 0 0 20px;
  font-size: 18px;
  color: #ffd27f;
  text-shadow: 2px 2px #000;
}

/* 🔹 Button grid layout (used by post-login modal) */
.postlogin-modal__actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

/* 🔹 Universal button */
.pl-btn {
  background: saddlebrown;
  color: #000;
  border: 3px solid #000;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.pl-btn:hover {
  background: peru;
}

/* 🔹 Close button */
.postlogin-modal__close,
.trader-lobby-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #fffbe0;
  font-size: 20px;
  cursor: pointer;
  text-shadow: 1px 1px #000;
}

/* 🔹 Form fields inside Trader Lobby modal */
.trader-lobby-modal .tl-field {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 12px;
}

.trader-lobby-modal select,
.trader-lobby-modal input {
  width: 100%;
  padding: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  background: #000;
  color: #fcfaed;
  border: 2px solid #444;
  border-radius: 0; /* retro look */
}

/* 🔹 Connection status text */
.tl-status {
 
  margin-top: 12px;
  font-weight: bold;
}

.tl-status.ok {
  color: #00d26a;
}







/* ==========================================================
   🟠 LOBBY MAIN MODAL (Enter Lobby, Connect Button, Status)
   ========================================================== */

#lobby-main-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;

}
#lobby-main-modal .lobby-main__panel {
  position: relative;
  transform: scale(1.7);
  width: auto;
  max-width: 90vw;

  background: #1b1106;
  border: 6px solid #000;
  box-shadow: 0 0 20px #000;
  padding: 12px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #ffffff;
  z-index: 10000;
}
.status-label {
  color: #00ffe5 !important;
}


.lobby-main__title {
  font-size: 12px;
  margin-bottom: 6px;
}
.lobby-main__title2 {
  font-size: 11px;
  margin-bottom: 12px;
}
#lobby-main-modal .lobby-main__btn {
  background: #a15d1e;
  color: #000;
  border: 3px solid #000;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  width: 80%;
  margin: 6px auto;
  display: block;
}

#lobby-main-modal .lobby-main__btn:hover {
  background: #c37832;
  transform: scale(1.03);
}

#lobby-main-modal .lobby-main__status {
  margin-top: 10px;
  line-height: 1.2;
  font-size: 10px;
}

#lobby-main-modal .lobby-main__status span {
  color: #ff4d4d;
}

#lobby-main-modal .lobby-main__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #fffef6;
  font-size: 40px;
  cursor: pointer;
  text-shadow: 1px 1px #000;
}

.lobby-main__cta {
  font-size: 28px;
  color: #f5c16c;
 
  cursor: pointer;
   text-shadow:
    -2px 0 #000,
     2px 0 #000,
     0 -2px #000,
     0  2px #000;
}

.lobby-main__cta:hover {
  color: #fff7e7;
}

.lobby-main__cta-sub {
  font-size: 7px;
  color: #636363;
  line-height: 1.4;
  
    transform: skewX(-6deg);
}

#lobby-connect-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
/* ==========================================================
   🔵 LOBBY CONNECT MODAL (Broker Connect Panel)
   ========================================================== */
/* ==========================================================
   🔶 LOBBY CONNECT MODAL – klasyczny (retro-brązowy) styl
   ========================================================== */

#lobby-connect-modal .lobby-connect__panel {
  position: relative;
  transform: scale(1.4);
  width: 620px;
 
  overflow: auto;
  overflow: auto;

  background: #2e1f0f;
  border: 6px solid #000;
  box-shadow: 0 0 20px #000;
  padding: 32px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #fffbe0;
  z-index: 10000;
}
#lobby-connect-modal .lobby-connect__panel {
  position: relative;
  transform: scale(1.4);
  width: 620px;
  max-height: 600px;
  overflow-y: auto;
}
#lobby-connect-modal .lobby-connect__title {
  margin: 0 0 20px;
  font-size: 18px;
  color: #ffd27f;
  text-shadow: 2px 2px #000;
}

#lobby-connect-modal .lobby-connect__field {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 12px;
}

#lobby-connect-modal .lobby-connect__field select,
#lobby-connect-modal .lobby-connect__field input {
    min-width: 0;
  width: 100%;
  padding: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  background: #000;
  color: #fffbe0;
  border: 2px solid #444;
  border-radius: 0; /* retro look */
   grid-column: 2 / -1;
}

/* guziki */
#lobby-connect-modal .lobby-connect__btn {
  background: saddlebrown;
  color: #000;
  border: 3px solid #000;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

#lobby-connect-modal .lobby-connect__btn:hover {
  background: peru;
}

/* status */
#lobby-connect-modal .lobby-connect__status {
  margin-top: 12px;
  font-weight: bold;
  color: #00d26a;
}

/* przycisk zamknięcia */
#lobby-connect-modal .lobby-connect__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #fffbe0;
  font-size: 40px;
  cursor: pointer;
  text-shadow: 1px 1px #000;
}


#lobby-connect-modal .lobby-connect__field input[type="datetime-local"] {
  background: #000;
  color: #fffbe0;
  border: 2px solid #444;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  padding: 10px;
  width: 100%;
}

#lobby-connect-modal .lobby-connect__footer {
  margin-top: 20px;
  text-align: left;
  font-size: 12px;
  color: #fffbe0;
}


#broker-select,
#broker-type {
  width: 100% !important;
  display: block;
  box-sizing: border-box;
}



.selected-account {
  background-color: #222;
  border: 2px solid #00ff9d;
  transform: scale(1.03);
  transition: 0.1s;
}
/* 🔵 Styl wybranego konta (aktywny) */
.selected-account {
  background-color: #008b8b;     /* turkusowy */
  border: 2px solid #00ffff;     /* jaśniejszy neonowy turkus */
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 0 10px #00e6e6;
  transition: 0.15s ease;
}


/* 🔹 efekt kliknięcia (krótki błysk przy nacisku) */
.lobby-connect__btn:active {
  transform: scale(0.97);
  filter: brightness(1.2);
}



























/* ==========================================================
   ⚙️ GLOBAL + LOBBY MODALS VISIBILITY FIX
   ========================================================== */

/* globalna wersja hidden (dla wszystkiego) */
.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* dodatkowo zabezpiecz lobby, żeby na pewno się nie pokazywały po odświeżeniu */
.lobby-modal.hidden,
#lobby-main-modal.hidden,
#lobby-connect-modal.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* opcjonalnie — gdy JS zdejmie .hidden, pokaż animacyjnie */
.lobby-modal:not(.hidden) {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}



/* FORCE equal width for broker selects */
#broker-select,
#broker-type {
  display: block !important;
  width: calc(100% - 0px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-right: 28px !important;
}

/* override centering & inline context */
#broker-select,
#broker-type {
  text-align: left !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* kill browser select intrinsic sizing */
#broker-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#lobby-connect-modal .lobby-connect__field {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

#lobby-connect-modal .lobby-connect__field label {
  display: block;
}

#lobby-connect-modal .lobby-connect__field input,
#lobby-connect-modal .lobby-connect__field select {
  width: 100%;
  box-sizing: border-box;
}












/* ==========================================================
   ACCOUNT LIST – CLEAN, FLAT, NO SCROLL
   ========================================================== */

#lobby-connect-modal .account-list {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;

  max-height: none;
  overflow: visible;
}

/* pojedynczy wiersz */
#lobby-connect-modal .account-row {
  display: grid;
  grid-template-columns: 28px 1fr 40px;
  align-items: center;

  padding: 6px 8px;
  margin: 4px 0;

  background: #1a1208;
  border: 2px solid #000;

  font-size: 10px;
  cursor: pointer;
}

/* hover */
#lobby-connect-modal .account-row:hover {
  background: #2a1d10;
}

/* selected */
#lobby-connect-modal .account-row.selected {
  background: #0e3a38;
  border-color: #00ffff;
}

/* numer */
#lobby-connect-modal .account-idx {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  background: #000;
  border: 1px solid #333;
  color: #00ffff;

  font-size: 9px;
}

/* nazwa */
#lobby-connect-modal .account-name {
  padding-left: 8px;
  text-align: left;
}

/* waluta */
#lobby-connect-modal .account-currency {
  text-align: right;
  opacity: 0.75;
}

/* ==========================================================
   SETUP ACTION – TEXT, NOT BUTTON (BOTTOM)
   ========================================================== */

#lobby-connect-modal #broker-setup-data {
  display: none;          /* JS pokazuje po wyborze */
  margin-top: 12px;

  font-size: 14px;
  text-align: center;

  color: #00ffff;
  cursor: pointer;
  user-select: none;
}

#lobby-connect-modal #broker-setup-data {
  border: 1px solid transparent;
}

#lobby-connect-modal #broker-setup-data:hover {
  border-color: #00ffff;
}

#lobby-connect-modal #broker-setup-data {
  animation: setupGlow 1.4s infinite;
}
#lobby-connect-modal #broker-setup-data:hover {
  animation: none;
  color: #ffffff;
  text-shadow: 0 0 16px #00ffff;
}
#lobby-connect-modal .lobby-connect__footer {
  display: flex;
  justify-content: center;
}
#update-date-wrapper {
  display: none;
}











#lobby-connect-modal .setup-extra {
  margin: 8px 0;
  text-align: left;
}

#lobby-connect-modal .setup-extra label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}

#lobby-connect-modal .setup-extra input {
  width: 100%;
  padding: 10px;
  background: #000;
  color: #fffbe0;
  border: 2px solid #444;
  font-family: 'Press Start 2P', monospace;
}
#update-date-wrapper { display: none; }



















/* Update data from – jak normalne pola formularza */
#lobby-connect-modal #update-date-wrapper {
   display: none;    
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  text-align: left;
}

/* label po lewej */
#lobby-connect-modal #update-date-wrapper label {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

/* input po prawej – TA SAMA szerokość co inne */
#lobby-connect-modal #update-date-wrapper input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  padding: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;

  background: #000;
  color: #fffbe0;
  border: 2px solid #444;
}
/* gdy JS ustawi display:block — styl pola */
#lobby-connect-modal #update-date-wrapper[style*="display: block"] {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  text-align: left;
}




/* Forgot password link */
.forgot-link {
  color: #fffc4c;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  text-align: center;
  margin: 0px 0 12px 0;
  transition: all 0.2s ease;
  user-select: none;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  opacity: 0.8;
}

.forgot-link:hover {
  color: #ffffff;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 8px rgba(255, 0, 0, 0.6);
  letter-spacing: 0.5px;
  opacity: 1;
}

.forgot-link:active {
  color: #ff6666;
}





/* Forgot password modal - smaller width */
.forgot-modal-small {
  max-width: 400px;
  padding: 30px;
}

/* Info text below buttons */
.forgot-info {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #aaa;
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.phone-number {
  color: #4a9eff;
  font-weight: bold;
}

/* Success message */
.success-message {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #4aff4a;
  text-align: center;
  margin: 20px 0;
  line-height: 1.8;
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 5px rgba(74, 255, 74, 0.4);
}

.forgot-modal-small {

  max-width: 400px;
  padding: 30px;
  z-index: 9999;
}




















/* ==========================================================
   🔴 NOWE MODALE WYMAGANAI REJESTRACJA
   ========================================================== */    

/* ==========================================================
   🔴 FORM MESSAGES & VALIDATION STYLES
   ========================================================== */

/* Kontener na komunikaty błędów/sukcesu */
.form-message {
  display: none;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  border: 2px solid;
}

.form-message.error {
  display: block;
  background: rgba(255, 0, 0, 0.15);
  border-color: #ff4444;
  color: #ff6b6b;
}

.form-message.success {
  display: block;
  background: rgba(0, 255, 100, 0.1);
  border-color: #00ff66;
  color: #00ff66;
}

.form-message.warning {
  display: block;
  background: rgba(255, 200, 0, 0.1);
  border-color: #ffcc00;
  color: #ffcc00;
}

/* Sekcja wymagań */
.form-requirements {
  margin: 16px 0 8px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  text-align: left;
  font-size: 12px;
  line-height: 1.8;
  color: #aaa;
}

.form-requirements h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #ffd27f;
}

.form-requirements ul {
  margin: 0;
  padding-left: 16px;
}

.form-requirements li {
  margin: 4px 0;
}

.form-requirements .example {
  color: #00ff99;
}

.form-requirements .warning-text {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #333;
  color: #ff9966;
  font-size: 14px;
}

/* Fix wyrównania inputów */
.user-modal-content input[type="email"],
.user-modal-content input[type="password"],
.user-modal-content input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
}

/* ==========================================================
   🟡 NICKNAME MODAL (szerszy)
   ========================================================== */

.nick-window {
  width: 560px !important;
  max-width: 90vw;
}

.nick-window h2 {
  margin-bottom: 16px;
}

.nick-requirements {
  margin: 12px 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #444;
  text-align: left;
  font-size: 8px;
  line-height: 1.7;
  color: #aaa;
}

.nick-requirements h4 {
  margin: 0 0 6px 0;
  font-size: 9px;
  color: #ffd27f;
}

.nick-requirements .example {
  color: #00ff99;
}

.nick-message {
  display: none;
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 9px;
  text-align: left;
  border: 2px solid;
}

.nick-message.error {
  display: block;
  background: rgba(255, 0, 0, 0.15);
  border-color: #ff4444;
  color: #ff6b6b;
}




/* Custom Select */
.custom-select {
  position: relative;
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}

.custom-select__selected {
  padding: 10px;
  background: #000;
  color: #fffbe0;
  border: 2px solid #444;
  cursor: pointer;
}

.custom-select__options {
  position: relative;
  width: 100%;
  background: #000000;
  border: 3px solid #000;
  border-top: none;
  z-index: 100;
}

.custom-select__options.hidden {
  display: none;
}

.custom-select__options div {
  padding: 10px;
  cursor: pointer;
  color: #fffbe0;
}

.custom-select__options div:hover {
  background: #333;
}