#login-wrapper { position: fixed; inset: 0; width: 100%; height: 100dvh; min-width: 0; min-height: 0; }
#login-wrapper #login-inner { width: 100%; height: 100%; min-width: 0; min-height: 0; }
#login-wrapper #login-inner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#login-wrapper .login-version { display: none; }
.login-topbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 380px; max-width: calc(100% - 24px); gap: 10px; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 16px; box-sizing: border-box; border: 1px solid #171817; background: #343635 url('../png/bg2.png'); box-shadow: inset 0 0 0 1px #626662, 0 2px 8px #0008; z-index: 2; }
#login-online { font-size: 13px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.login-topbar-buttons { display: flex; align-items: center; gap: 6px; flex: none; }
.login-topbar-button { display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; margin: 0; padding: 0; color: #ddd; }
.login-topbar-button:hover { color: #fff; }
.login-topbar-button[hidden] { display: none; }
.login-topbar-button svg { display: block; width: 20px; height: 20px; fill: currentColor; }
#login-discord { color: #8c9eff; }
#login-discord:hover { color: #b3bfff; }
.login-settings-icon { display: block; width: 20px; height: 20px; background: #ddd; -webkit-mask: url('../png/mobile-targeting/settings.svg') center / contain no-repeat; mask: url('../png/mobile-targeting/settings.svg') center / contain no-repeat; }
#login-center { position: absolute; inset: 64px 12px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; }
/* display is plain (no !important) on purpose: #login-center + #floater-enter is already more
   specific than .modal's own "display: none", so this alone is what makes the login card show
   up by default without any JS -- and, unlike !important, it does not fight an inline
   style.display the way Interface.hideLoginForm/showLoginForm set to actually hide/show it once
   a login attempt is in flight (Douglas, 2026-09-26: it used to never go away once "Connecting
   to Gameworld..." appeared in front of it). */
#login-center #floater-enter { display: block; position: relative !important; inset: auto !important; transform: none !important; flex: none; width: 320px; max-width: 100%; max-height: none; box-sizing: border-box; z-index: 1; background: #333 url('../png/bg.png'); border: 1px solid #111; box-shadow: inset 0 0 0 1px #72746d,0 4px 14px #0009; }
#floater-enter .modal-header { cursor: default; font-size: 12px; padding: 6px; background-image: url('../png/bg2.png'); }
#floater-enter .modal-body { padding: 14px; }
#login-form { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 10px 8px; align-items: center; font-size: 12px; }
#login-form input { width: 100%; min-width: 0; height: 32px; box-sizing: border-box; text-align: left; padding: 4px 6px; }
#floater-enter p { margin: 12px 0 8px; font-size: 12px; }
#floater-enter label { cursor: pointer; }
#floater-enter a { color: #d3d3cc; font-size: 11px; }
#floater-enter a:hover { color: white; }
#floater-enter .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#floater-enter #enter-game { min-width: 80px; min-height: 32px; margin: 0; }
#settings-box .modal-body { min-width: 220px; padding: 16px; }
#clear-database { min-height: 40px; width: 100%; margin: 0 0 12px; }
@media(max-width:600px) {
  #login-form input { height: 40px; font-size: 16px; }
  #floater-enter #enter-game { min-height: 40px; }
}
@media(max-height:420px) {
  #login-center { justify-content: flex-start; }
}