/* The account modal — login and register — and the modal shell it lives in.

   WHY IT IS ITS OWN FILE. This used to sit in lobby.css, which is the HOMEPAGE's stylesheet: it
   styles the whole start screen and carries bare `button` / `.error` element rules that would
   restyle any other page that linked it. La Esquina now opens the same modal (js/authUI.js
   builds it from one source, so there is not a second auth form to keep in step), and it needed
   the styling without inheriting the homepage.

   So the rules moved here verbatim, and the few things the card borrowed from lobby.css's
   element selectors — the button shape, the primary button, the error line — are restated at
   the bottom SCOPED to .modal-card. On the homepage they land on the same pixels they already
   did; on La Esquina they are the only ones that apply. */

/* --- account auth panel (Phase 1: online identity only) --- */
.auth-panel {
  margin: 14px 0 4px; padding: 14px;
  background: #f3f5fb; border: 1px solid #e2e6f0; border-radius: 12px;
}
.auth-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.auth-tab {
  flex: 1; margin: 0; padding: 8px 4px; font-size: 13px; font-weight: 700;
  background: #fff; color: #444; border: 2px solid #d8dbe2; border-radius: 9px; cursor: pointer;
}
.auth-tab:hover { border-color: var(--cuba-blue); }
.auth-tab.sel { background: var(--cuba-blue); color: #fff; border-color: var(--cuba-blue); }
.auth-input {
  width: 100%; padding: 11px 14px; font-size: 16px; background: #fff; color: #1a1a22;
  border: 2px solid #d8dbe2; border-radius: 10px; outline: none; margin-bottom: 8px;
}
.auth-input:focus { border-color: var(--cuba-blue); }
/* Account-requirements hint, shown only in register mode (toggled by lobby.js). */
.auth-hint { margin: -2px 0 8px; font-size: 12.5px; line-height: 1.4; color: #8ea3cf; text-align: center; }
.auth-hint.hidden { display: none; }
.auth-panel button.primary { margin-top: 4px; }

/* --- modals (account login/register + online-play gate) --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 14, 34, .68); backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none; }
.modal-card {
  position: relative; width: min(384px, 100%); background: #fffdf7; color: #1a1a22;
  border-radius: 16px; padding: 26px 24px 22px; border-top: 4px solid var(--cuba-red);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
#lobby .modal-close, .modal-close {
  position: absolute; top: 10px; right: 10px; width: auto; margin: 0; padding: 4px 9px;
  background: transparent; border: none; color: #9aa1b0; font-size: 16px; cursor: pointer; border-radius: 8px;
}
.modal-close:hover { color: #333; background: #eef1f8; }
.modal-logo { text-align: center; margin: 2px 0 14px; }
.modal-logo img { width: 150px; height: auto; }
.modal-card .auth-panel { background: transparent; border: none; padding: 0; margin: 0; }
body.modal-open { overflow: hidden; }

/* --- what the card used to borrow from lobby.css's element selectors ---------------------
   The card sat inside a stylesheet with bare `button` and `.error` rules and quietly inherited
   them. Only two things actually depended on that: the submit button (the generic shape plus
   button.primary's colours) and the error line. Both are restated here, folded into ONE rule
   each and scoped to the card.

   Deliberately NOT a generic `.modal-card button` rule: that would outrank .auth-tab on
   specificity and restyle the Entrar/Crear cuenta tabs, which have a look of their own. */
.modal-card button.primary {
  cursor: pointer; width: 100%; margin-top: 10px; padding: 12px 16px;
  font-size: 15px; font-weight: 700;
  color: #fff; background: var(--cuba-red);
  border: 2px solid transparent; border-radius: 10px;
  transition: transform .05s, background .15s, border-color .15s;
}
.modal-card button.primary:hover:not(:disabled) { background: var(--cuba-red-d); }
.modal-card button.primary:active:not(:disabled) { transform: translateY(1px); }
.modal-card button.primary:disabled { opacity: .45; cursor: not-allowed; }
.modal-card .error { color: var(--cuba-red); min-height: 18px; font-size: 13px; margin: 10px 0 0; text-align: center; }