#login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 640px;
  min-height: 480px;
  transition: opacity 0.4s ease;
}

#login-wrapper.fade-out {
  opacity: 0;
}

#login-wrapper #login-inner {
  justify-content: center;
  position: relative;
  height: 100%;
  min-width: 640px;
  min-height: 480px;
  display: flex;
}

.password-input {
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}

/* Mobile: remove min-width/height that cause stretching */
@media screen and (max-width: 768px),
screen and (max-height: 500px) {
  #login-wrapper {
    min-width: 100%;
    min-height: 100%;
  }

  #login-wrapper #login-inner {
    min-width: 100%;
    min-height: 100%;
  }
}

#login-wrapper #login-inner img {
  height: 100%;
}

#login-wrapper #login-inner img.bg-portrait {
  display: none;
}

/* Login settings panel — main container */
#login-wrapper #login-inner .login-settings {
  border: 1px solid black;
  position: absolute;
  left: 32px;
  bottom: 32px;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.45);
  width: 116px;
  display: flex;
  flex-direction: column;
}

#login-wrapper #login-inner .login-settings button {
  margin: 0;
  width: 108px;
  height: 32px;
}

/* Primary actions: Login, Create Account */
.login-actions-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* OAuth section */
#oauth-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#oauth-separator {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 8px 0 6px;
  padding-top: 6px;
  text-align: center;
  font-size: 10px;
  color: #bbb;
  letter-spacing: 0.5px;
  width: 100%;
}

#oauth-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Secondary actions: Website, Discord, Settings */
.login-actions-secondary {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-secondary-row {
  display: flex;
  gap: 6px;
}

.login-secondary-row button {
  flex: 1;
  min-width: 0;
}

.login-actions-secondary button {
  font-size: 10px !important;
  height: 26px !important;
  opacity: 0.8;
}

.login-actions-secondary button:hover {
  opacity: 1;
}

#login-wrapper #login-inner .login-settings #buy-premium-btn {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, #c8a84e, #8a6d2b) !important;
  color: #fff !important;
  border: 1px solid #e0c060 !important;
  font-weight: bold;
  opacity: 1 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#login-wrapper #login-inner .login-settings #buy-premium-btn:hover {
  background-image: linear-gradient(to bottom, #e0c060, #a07830) !important;
}

#discord-btn {
  color: #fff !important;
  background-color: #5865f2 !important;
  background-image: none !important;
  border: 1px solid #4752c4 !important;
}

#discord-btn:hover {
  background-color: #4752c4 !important;
}

/* Settings modal rows */
.login-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
}

.login-settings-row label {
  font-size: 11px;
  color: #ccc;
  white-space: nowrap;
}

.login-settings-row select {
  flex: 1;
  max-width: 120px;
}

.login-settings-discord {
  background-color: #5865f2 !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #4752c4 !important;
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
}

.login-settings-discord:hover {
  background-color: #4752c4 !important;
}

.login-settings-danger {
  color: #cc6666 !important;
  font-size: 10px;
  width: 100%;
}

#login-display-mode {
  margin: 4px;
  width: 108px;
  height: 32px;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  background-color: #3a3a3a;
  color: #ccc;
  border: 1px solid #555;
}

#login-wrapper #login-inner .login-version {
  position: absolute;
  width: auto;
  top: 4px;
  left: 10px;
  color: white;
}

/* OAuth buttons */
#oauth-google,
#oauth-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 108px;
  height: 32px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background-color 0.2s;
}

#login-wrapper #login-inner .login-settings #oauth-google,
#login-wrapper #login-inner .login-settings #oauth-google:hover {
  background-color: #fff;
  background-image: none !important;
  color: #3c4043;
  border: 1px solid #dadce0;
}

#login-wrapper #login-inner .login-settings #oauth-google:hover {
  background-color: #f0f0f0;
  border-color: #c4c7c9;
}

#oauth-google::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%2334A853' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23EA4335' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

#login-wrapper #login-inner .login-settings #oauth-discord,
#login-wrapper #login-inner .login-settings #oauth-discord:hover {
  background-image: none !important;
  color: white;
}

#login-wrapper #login-inner .login-settings #oauth-discord {
  background-color: #5865f2;
  border: 1px solid #4752c4;
}

#login-wrapper #login-inner .login-settings #oauth-discord:hover {
  background-color: #4752c4;
}

#oauth-discord::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath fill='%23fff' d='M107.7 8.07A105.15 105.15 0 0081.47 0a72.06 72.06 0 00-3.36 6.83 97.68 97.68 0 00-29.11 0A72.37 72.37 0 0045.64 0a105.89 105.89 0 00-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0032.17 16.15 77.7 77.7 0 006.89-11.11 68.42 68.42 0 01-10.85-5.18c.91-.66 1.8-1.34 2.66-2.04a75.57 75.57 0 0064.32 0c.87.71 1.76 1.39 2.66 2.04a68.68 68.68 0 01-10.87 5.19 77 77 0 006.89 11.1 105.25 105.25 0 0032.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15zM42.45 65.69C36.18 65.69 31 60 31 53.05s5-12.68 11.43-12.68S54 46.06 53.89 53.05c0 6.95-5.11 12.64-11.44 12.64zm42.24 0C78.41 65.69 73.25 60 73.25 53.05s5-12.68 11.44-12.68S96.23 46.06 96.12 53.05c0 6.95-5.09 12.64-11.43 12.64z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.forgot-link {
  color: #aaa;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.forgot-link:hover {
  color: #fff;
  text-decoration: underline;
}

.account-settings-section {
  margin: 4px 0;
}

#floater-account-settings .password-input {
  margin: 2px 0;
}

#char-select-settings {
  font-size: 11px;
}

/* Custom remember-me checkbox */
.remember-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
  color: #ccc;
}

.remember-label input {
  display: none;
}

.remember-check {
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #222;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.remember-label input:checked + .remember-check {
  background: #5a4520;
  border-color: #c8a84e;
}

.remember-label input:checked + .remember-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Inline field validation hints */
.field-hint {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  min-height: 14px;
  color: #888;
}

.field-hint.error {
  color: #e07050;
}

.field-hint.success {
  color: #70c870;
}

/* Sex select dropdown */
select.password-input {
  -webkit-appearance: none;
  appearance: none;
  background-color: #1a1a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: #fff;
  padding-right: 24px;
  cursor: pointer;
}

select.password-input option {
  background: #1a1a1a;
  color: #fff;
}

select.password-input option:disabled {
  color: #666;
}

select.password-input option:checked {
  background: #3a3020;
  color: #f0d890;
}

.password-input.field-valid {
  border-color: #70c870;
}

.password-input.field-invalid {
  border-color: #e07050;
}

/* Password show/hide toggle */
.password-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}

.password-toggle-wrap .password-input {
  flex: 1;
  min-width: 0;
}

.password-toggle-btn {
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  background: #3a3a3a;
  border: 1px solid #555;
  color: #aaa;
  margin-left: 4px;
  white-space: nowrap;
}

.password-toggle-btn:hover {
  color: #ddd;
  background: #4a4a4a;
}

/* Mobile login improvements */
@media screen and (max-width: 768px) {

  /* Center login-settings panel on mobile */
  #login-wrapper #login-inner .login-settings {
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    width: auto;
    min-width: 140px;
    max-width: 90vw;
    padding: 10px;
  }

  /* Bigger tap targets for primary buttons */
  .login-actions-primary button {
    width: 140px !important;
    height: 40px !important;
    font-size: 13px !important;
  }

  /* OAuth buttons scale up on mobile */
  #oauth-google,
  #oauth-discord {
    width: 140px;
    height: 40px;
    font-size: 13px;
  }

  #oauth-separator {
    font-size: 11px;
  }

  /* Secondary buttons stay smaller but still tappable */
  .login-actions-secondary button {
    height: 34px !important;
    font-size: 11px !important;
  }

  .login-secondary-row {
    width: 140px;
  }

  #login-display-mode {
    width: 140px;
    height: 40px;
    font-size: 13px;
  }

  /* Login/create modals: full-width on mobile, scrollable */
  #login-wrapper .modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 300px;
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    z-index: 99999;
  }

  #login-wrapper .modal .modal-body {
    max-height: calc(85vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  #login-wrapper .modal .modal-header {
    padding: 8px;
    font-size: 13px;
  }

  /* Larger inputs — 16px prevents iOS zoom */
  #login-wrapper .modal .modal-body .password-input {
    font-size: 16px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  #login-wrapper .modal .modal-body select.password-input {
    font-size: 16px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  #login-wrapper .modal .modal-body .password-toggle-btn {
    font-size: 13px;
    padding: 10px 12px;
  }

  /* Larger labels */
  #login-wrapper .modal .modal-body label {
    font-size: 13px;
  }

  /* Larger field hints */
  #login-wrapper .modal .field-hint {
    font-size: 11px;
  }

  /* Full-width footer buttons, stacked vertically */
  #login-wrapper .modal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #login-wrapper .modal .modal-footer button {
    padding: 12px 16px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Connecting/error modal */
  #login-wrapper #floater-connecting {
    max-width: 85vw;
  }
}