/* Proportional 800×600 LoginGui with full-viewport backdrop, shop-style scrollbar,
 * seamless brushed-metal cover over legacy Login/Pass fields, and 3 action buttons. */
body.entry-pending> :not(#gameLogin):not(#matchLoading):not(#installApp):not(script),
body.login-open> :not(#gameLogin):not(#matchLoading):not(#installApp):not(script) {visibility:hidden!important;}

#gameLogin {position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 35%,#22384f,#0e1620 72%);color:#001f36;font:12px/1.45 Arial,sans-serif;overflow:hidden;}
#gameLogin[hidden] {display:none;}

#gameLogin .loginBackdrop {position:absolute;inset:0;pointer-events:none;overflow:hidden;}
#gameLogin .backdropBot {position:absolute;top:-4px;bottom:-4px;width:50%;height:calc(100% + 8px);background-image:url(menu/login/bg_login.png);background-repeat:no-repeat;opacity:.42;filter:blur(1px) brightness(.85);}
#gameLogin .backdropBot.left {left:0;background-size:max(320%,133.3334vh) auto;background-position:left center;mask-image:linear-gradient(to right,#000 50%,transparent);}
#gameLogin .backdropBot.right {right:0;background-size:max(380.9524%,133.3334vh) auto;background-position:right center;mask-image:linear-gradient(to left,#000 50%,transparent);}

#loginStage {
  position:absolute;left:0;top:0;width:800px;height:600px;transform-origin:top left;
  background:url(menu/login/bg_login.png) -2px -2px / 804px 604px no-repeat;
  border-radius:14px;overflow:hidden;
  box-shadow:0 16px 48px #000c;
}
#loginForm {margin:0;}
#gameLogin button {margin:0;box-sizing:border-box;border-radius:0;}

/* First blue box: Últimas Atualizações with shop-style .nativeScroll scrollbar */
#loginNews {
  position:absolute;left:283px;top:158px;width:256px;height:210px;
  overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;
  box-sizing:border-box;padding:5px 12px 6px 6px;color:#001b2e;
}
#loginNews::-webkit-scrollbar {display:none;}
#loginNews h1 {
  font:bold 13px/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px;
  margin:0 0 8px;padding-bottom:4px;color:#00172b;border-bottom:1px solid #04689e;
}
#loginNews .updateItem {
  margin:0 0 7px;padding:4px 5px;background:#0486c755;border:1px solid #04689e88;
}
#loginNews .updateItem strong {display:block;font:bold 10px/1.25 Arial,sans-serif;color:#001222;margin-bottom:2px;}
#loginNews .updateItem p {margin:0;font:9.5px/1.35 Arial,sans-serif;color:#022238;}

/* Shop-style native scrollbar inside LoginGui */
#gameLogin .nativeScroll {position:absolute;width:8px;display:grid;grid-template-rows:8px minmax(0,1fr) 8px;gap:1px;z-index:2;}
#loginNewsScroll {left:531px;top:158px;height:210px;}
#gameLogin .nativeScroll button {width:8px;height:8px;padding:0;border:1px solid #d5d9e0;background:linear-gradient(#e1e4ee,#8b929f);position:relative;cursor:pointer;}
#gameLogin .nativeScroll button:disabled {opacity:.65;cursor:default;}
#gameLogin .nativeScroll button:after {content:"";position:absolute;left:1px;top:1px;border-left:2px solid transparent;border-right:2px solid transparent;}
#gameLogin .scrollUp:after {border-bottom:3px solid #343943;}
#gameLogin .scrollDown:after {border-top:3px solid #343943;top:2px!important;}
#gameLogin .scrollTrack {position:relative;min-height:0;background:#4c5057;border-left:1px solid #bfc6d0;border-right:1px solid #bfc6d0;touch-action:none;}
#gameLogin .scrollThumb {position:absolute;left:0;right:0;box-sizing:border-box;min-height:0;border:1px solid #e4e7f0;background:linear-gradient(90deg,#d9dce5,#949ba8);}

/* Server status indicator above the news card at top-right */
#loginServerStatus {
  position: absolute;
  right: 248px;
  top: 126px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7px;
  border-radius: 10px;
  background: rgba(240, 248, 255, 0.65);
  border: 1px solid rgba(4, 104, 158, 0.28);
  box-shadow: 0 1px 4px rgba(0, 24, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  font: bold 9.5px/1 Arial, sans-serif;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  user-select: none;
  pointer-events: auto;
  z-index: 10;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.statusDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: statusDotPulse 2s ease-in-out infinite;
}
@keyframes statusDotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    transform: scale(1.22);
    opacity: 0.85;
    filter: brightness(1.25);
  }
}
#loginServerStatus.status-online,
.status-online {
  background: rgba(225, 245, 255, 0.72);
  border-color: rgba(0, 180, 235, 0.45);
}
.status-online .statusDot,
.dot-blue {
  background: #00d2ff;
  box-shadow: 0 0 5px #00d2ff, 0 0 8px rgba(0, 210, 255, 0.7);
}
.status-online .statusText {
  color: #033c5e;
}
#loginServerStatus.status-maintenance,
.status-maintenance {
  background: rgba(255, 248, 225, 0.75);
  border-color: rgba(245, 158, 11, 0.5);
}
.status-maintenance .statusDot,
.dot-amber {
  background: #ffb300;
  box-shadow: 0 0 5px #ffb300, 0 0 8px rgba(255, 179, 0, 0.75);
}
.status-maintenance .statusText {
  color: #78350f;
}
#loginServerStatus.status-offline,
.status-offline {
  background: rgba(255, 235, 235, 0.75);
  border-color: rgba(239, 68, 68, 0.5);
}
.status-offline .statusDot,
.dot-red {
  background: #ef4444;
  box-shadow: 0 0 5px #ef4444, 0 0 8px rgba(239, 68, 68, 0.7);
}
.status-offline .statusText {
  color: #5c1414;
}

/* Status banner inside top blue box + Classic LOGIN / PASS slots on lower blue box of bg_login.png */
#loginStatus {
  margin:0 0 7px;padding:5px 6px;box-sizing:border-box;
  background:#036ca3cc;border:1px solid #5ec4f788;color:#eef9ff;
  font:9.5px/1.35 Arial,sans-serif;text-align:left;
}
#loginStatus.maintenance-alert {
  background: #78350fdd;
  border: 1px solid #f59e0b;
  color: #fffbeb;
}

/* Maintenance Modal */
.maintenancePopupCard {
  max-width: 400px;
}
.maintenancePopupContent {
  padding: 16px 20px;
  text-align: center;
  color: #0b2234;
}
.maintenanceBadgeIcon {
  font-size: 32px;
  margin-bottom: 8px;
}
#maintenancePopupMessage {
  font: bold 12px/1.45 Arial, sans-serif;
  margin: 0 0 8px;
  color: #082842;
}
.maintenanceSub {
  font: 11px/1.4 Arial, sans-serif;
  margin: 0;
  color: #2b4559;
}

#gameLogin input {
  position:absolute;box-sizing:border-box;min-height:0;margin:0;border:0;
  background:transparent;color:#001e30;font:bold 11px/16px Arial,sans-serif;padding:0 4px;
}
#gameLogin input::placeholder {color:#033c5e;opacity:.72;font:normal 9.5px/16px Arial,sans-serif;}
#loginName {left:364px;top:400px;width:179px;height:18px;}
#loginPassword {left:364px;top:423px;width:179px;height:16px;}
#loginClan {left:364px;top:445px;width:64px;height:16px;}
#gameLogin #loginRemember {left:527px;top:446px;width:13px;height:13px;padding:0;accent-color:#04689e;cursor:pointer;}

/* Original four-slot artwork: Apoiar (Stripe) | empty | Entrar (Google) | Treinar (Offline) */
#loginActions {
  position:absolute;left:0;top:0;width:800px;height:600px;pointer-events:none;
}
#loginActions button,
#loginActions .loginSlotBtn {
  position:absolute;top:483px;width:78px;height:19px;
  pointer-events:auto;box-sizing:border-box;margin:0;padding:0;
  border:0;background:transparent;
  color:#0b1f30;font:bold 11px/19px Arial,sans-serif;text-align:center;
  cursor:pointer;border-radius:2px;user-select:none;overflow:hidden;
  transition:background-color .1s ease,color .1s ease,transform .05s ease;
}
#loginActions #loginDonate {
  left:266px;display:flex;align-items:center;justify-content:center;
}
#loginActions #loginDonate .loginSlotLabel {
  position:relative;z-index:1;pointer-events:none;
}
#loginActions #loginDonate stripe-buy-button {
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.001;cursor:pointer;z-index:2;
}
#loginActions #loginEnter {left:425px;}
#loginActions #loginOffline {left:503px;}

#loginActions button:hover:not(:disabled),
#loginActions .loginSlotBtn:hover {
  background:rgba(255,255,255,.22);color:#000;
}
#loginActions button:active:not(:disabled),
#loginActions .loginSlotBtn:active {
  background:rgba(0,0,0,.15);transform:translateY(1px);
}
#loginActions button:disabled {opacity:.5;cursor:wait;}

#gameLogin button:focus-visible,#gameLogin input:focus-visible,#loginNews:focus-visible {outline:2px solid #8fd9f4;outline-offset:1px;}

/* Google OAuth Authentication Gate for Online Play */
.googleAuthModalOverlay {
  position:absolute;inset:0;z-index:150;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
}
.googleAuthModalOverlay[hidden] {display:none!important;}
.googleModalCard {
  width:360px;background:linear-gradient(180deg,#f5f7fb 0%,#ccd3e0 100%);
  border:2px outset #ffffff;box-shadow:0 16px 40px #000c;
  padding:16px 20px;box-sizing:border-box;color:#0b1f30;font:11px/1.45 Arial,sans-serif;
}
.googleModalTop {
  display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #7c899c;
}
.googleModalMark {
  width:22px;height:22px;background:#fff;border:1px solid #7a889b;color:#1a73e8;
  font:bold 14px/22px Arial,sans-serif;text-align:center;border-radius:2px;flex:none;
}
.googleModalCard h2 {margin:0;font:bold 12.5px Arial,sans-serif;color:#051a2d;}
.googleModalDesc {margin:0 0 10px;font-size:10px;color:#1a334a;}
#gameLogin .googleModalCard label {display:block;font:bold 9.5px Arial,sans-serif;margin-bottom:4px;color:#072138;}
#gameLogin .googleModalCard input[type=email],
#gameLogin #googleModalEmail {
  position:relative;left:auto;top:auto;width:100%;height:26px;box-sizing:border-box;
  background:#fff;border:1px solid #718196;padding:0 8px;font:11px Arial,sans-serif;color:#000;margin:0 0 12px;
}
#gameLogin .googleModalButtons {display:flex;gap:6px;position:relative;}
#gameLogin .googleModalButtons button {
  position:relative;left:auto;top:auto;height:26px;flex:1;border:2px outset #dcdfe7;
  background:linear-gradient(180deg,#f5f7fb 0%,#c7cdd8 50%,#9da5b4 52%,#b8bfcc 100%);
  color:#092032;font:bold 10px Arial,sans-serif;cursor:pointer;padding:0 4px;
}
#gameLogin .googleModalButtons #googleModalSubmit {
  background:linear-gradient(180deg,#e8f2fe 0%,#96bfe9 50%,#689bd1 52%,#86b4e4 100%);
  border-color:#a8cdfa;color:#031e3b;
}
#gameLogin .googleModalButtons button:hover {filter:brightness(1.08);}
#gameLogin .googleModalButtons button:active {border-style:inset;}
.googleModalFooter {margin:10px 0 0;font-size:9px;color:#3b4e60;text-align:center;}

/* Classic Torque CREATE GAME style modal for account registration */
.classicPopupModal {
  position:absolute;inset:0;z-index:200;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
}
.classicPopupModal[hidden] {display:none!important;}
.classicPopupCard {
  position:relative;width:400px;height:150px;
  background:url(menu/common/popup/bg_creategame.png) no-repeat;
  box-shadow:0 14px 44px rgba(0,0,0,.85);
  box-sizing:border-box;color:#001f35;font:11px Arial,sans-serif;
}
.classicPopupHeader {
  position:absolute;left:46px;top:6px;right:15px;height:16px;
  display:flex;align-items:center;gap:6px;
}
.classicPopupHeader h2 {
  margin:0;font:bold 10px/14px Arial,sans-serif;color:#222;
  text-transform:uppercase;letter-spacing:.5px;
}
.classicPopupGoogleTag {
  font:bold 9px Arial,sans-serif;color:#023f66;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
#gameLogin .classicPopupCard .popupField {
  position:absolute;left:48px;width:332px;height:38px;
  display:flex;align-items:center;margin:0;padding:0;
}
#gameLogin .classicPopupCard .popupField.fieldName {top:25px;}
#gameLogin .classicPopupCard .popupField.fieldPass {top:75px;}
.popupFieldTag {
  position:absolute;left:10px;top:11px;font:bold 12px/16px Arial,sans-serif;
  color:#002b47;text-transform:uppercase;pointer-events:none;
}
#gameLogin .classicPopupCard input {
  position:absolute;box-sizing:border-box;margin:0;border:0;
  background:transparent;color:#001d33;font:bold 12px/24px Arial,sans-serif;
  padding:0 4px;
}
#gameLogin #regNick {left:86px;top:7px;width:235px;height:24px;}
#gameLogin #regPass {left:86px;top:7px;width:150px;height:24px;}
#gameLogin #regClan {
  left:245px;top:7px;width:75px;height:24px;
  background:rgba(255,255,255,.2);border:1px solid #04689e44;
  font:bold 10.5px/22px Arial,sans-serif;text-transform:uppercase;
  padding:0 4px;
}
#createAccountNotice {
  position:absolute;left:48px;top:118px;width:200px;height:24px;
  font:9px/1.2 Arial,sans-serif;color:#850000;overflow:hidden;
}
.classicPopupFooter {
  position:absolute;right:16px;bottom:7px;display:flex;gap:6px;
}
.classicPopupFooter button {
  width:88px;height:22px;background:transparent;border:0;
  font:bold 10.5px Arial,sans-serif;color:#00223b;cursor:pointer;
  text-transform:uppercase;box-sizing:border-box;
}
.classicPopupFooter button:hover {background:rgba(255,255,255,.3);}
.classicPopupFooter button:active {transform:translateY(1px);}


/* Classic metal/blue registration panel; labels are real text, without baked artwork. */
#gameLogin #createAccountModal .classicPopupCard{
  height:215px;border:2px outset #e4e7ee;
  background:repeating-linear-gradient(0deg,#ffffff12 0px,#ffffff12 1px,#00000006 1px,#00000006 2px),linear-gradient(#f5f6f8,#c1c6ce);
}
#gameLogin #createAccountModal .classicPopupHeader{left:20px;top:6px;right:20px;height:18px}
#gameLogin #createAccountModal .classicPopupHeader h2{font:bold 11px Arial,sans-serif;color:#09283b}
#gameLogin #createAccountForm .popupField{left:20px;width:356px;height:36px;border:1px solid #04689e88;background:linear-gradient(#139fd7,#0886c1);box-shadow:inset 1px 1px 3px #00395b55}
#gameLogin #createAccountForm .fieldName{top:28px}
#gameLogin #createAccountForm .fieldPass{top:70px}
#gameLogin #createAccountForm .fieldClan{top:112px}
#gameLogin #regNick,#gameLogin #regPass,#gameLogin #regClan{left:78px;top:6px;width:266px;height:24px;background:#ffffff22;border:1px dashed #075b8380}
#gameLogin #regClan{text-transform:uppercase}
#gameLogin #createAccountNotice{left:20px;top:155px;width:356px;height:30px;font:10px/1.3 Arial,sans-serif}
#gameLogin #createAccountModal .classicPopupFooter button{border:2px outset #e1e4eb;background:linear-gradient(#f8f9fa,#b5bac4);color:#0b2639}
@media(max-width:679px){
  #gameLogin #createAccountModal .classicPopupCard{width:344px;transform:translateX(19px)}
  #gameLogin #createAccountForm .popupField{left:20px;width:304px}
  #gameLogin #regNick,#gameLogin #regPass,#gameLogin #regClan{left:68px;width:222px}
  #gameLogin #createAccountNotice{left:20px;width:304px}
}
#gameLogin #loginName:disabled,#gameLogin #loginPassword:disabled,#gameLogin #loginClan:disabled{opacity:.55;cursor:not-allowed}

/* Lightweight status indicator; CSS animation stops when the status is replaced. */
#loginStatus {display:flex;align-items:center;gap:7px;min-height:30px;}
.loginStatusSpinner {display:inline-block;flex:0 0 13px;width:13px;height:13px;box-sizing:border-box;border:2px solid #b7edff66;border-top-color:#eefaff;border-radius:50%;animation:loginStatusSpin .8s linear infinite;}
@keyframes loginStatusSpin {to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loginStatusSpinner {animation:none;}}

/* PWA install offer (hud/install-app.js), top right of the login screen, in the panel's metal style. */
#installApp {position:fixed;top:16px;right:16px;z-index:101;padding:7px 14px;border:1px solid #6f7b88;border-radius:3px;
  background:linear-gradient(#f2f4f6,#c3cad1 55%,#aeb6bf);color:#001f36;font:bold 12px/1 Arial,sans-serif;letter-spacing:.04em;
  box-shadow:0 1px 0 #fff inset,0 2px 6px #0008;cursor:pointer;}
#installApp::before {content:'';display:inline-block;width:14px;height:14px;margin:-2px 7px -3px 0;vertical-align:middle;
  background:url(../icons/botzin-192.png) center/contain no-repeat;image-rendering:pixelated;}
#installApp:hover {background:linear-gradient(#fff,#d4dae0 55%,#bec6ce);}
#installApp:active {transform:translateY(1px);}
#installApp:focus-visible {outline:2px solid #8fd9f4;outline-offset:2px;}
#installApp[hidden] {display:none;}