/* ============================================================
   KING OF CHAOS — LOGIN ROYAL
   Camada visual isolada do login. Não altera contratos JS.
   ============================================================ */

/* O online.js controla a visibilidade pela classe .active. */
html body #onlineAuth.online-auth:not(.active){display:none!important}

html body #onlineAuth.online-auth{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:grid!important;
  place-items:center!important;
  min-height:100dvh!important;
  padding:clamp(16px,3vw,38px)!important;
  overflow:auto!important;
  isolation:isolate!important;
  background:
    linear-gradient(90deg,rgba(6,3,2,.78) 0%,rgba(8,4,2,.48) 42%,rgba(5,3,2,.22) 68%,rgba(3,2,2,.60) 100%),
    linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 70%,rgba(0,0,0,.64)),
    url('../fundo.png') center center / cover no-repeat fixed!important;
}

html body #onlineAuth.online-auth::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 42%,transparent 0 22%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.60) 100%),
    repeating-linear-gradient(90deg,rgba(255,219,137,.018) 0 1px,transparent 1px 88px)!important;
}

html body #onlineAuth.online-auth::after{
  content:"KING OF CHAOS  •  O TRONO AGUARDA"!important;
  position:fixed!important;
  left:50%!important;
  bottom:max(13px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  color:rgba(255,224,153,.76)!important;
  font:700 9px/1.2 Georgia,"Times New Roman",serif!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 8px #000,0 0 14px rgba(180,116,35,.34)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

html body #onlineAuth .online-auth-card{
  position:relative!important;
  width:min(440px,calc(100vw - 30px))!important;
  max-height:none!important;
  margin:0!important;
  padding:38px 34px 28px!important;
  overflow:visible!important;
  border-radius:14px 14px 10px 10px!important;
  border:1px solid #cda659!important;
  color:#f7ead0!important;
  text-align:left!important;
  background:
    linear-gradient(180deg,rgba(52,31,15,.98),rgba(20,13,9,.985) 38%,rgba(11,8,7,.99) 100%)!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.78),
    0 0 0 3px rgba(37,21,10,.92),
    0 0 0 4px rgba(209,168,83,.32),
    inset 0 1px 0 rgba(255,237,191,.17),
    inset 0 0 45px rgba(142,81,26,.22)!important;
  backdrop-filter:none!important;
}

/* moldura real externa */
html body #onlineAuth .online-auth-card::before{
  content:""!important;
  position:absolute!important;
  inset:9px!important;
  border:1px solid rgba(229,192,112,.36)!important;
  border-radius:9px!important;
  pointer-events:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.58),
    inset 0 0 24px rgba(174,107,39,.08)!important;
}

html body #onlineAuth .online-auth-card::after{
  content:"♛"!important;
  position:absolute!important;
  left:50%!important;
  top:-22px!important;
  transform:translateX(-50%)!important;
  width:74px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #caa150!important;
  border-bottom-color:#73521f!important;
  border-radius:50% 50% 36% 36% / 75% 75% 35% 35%!important;
  color:#ffdc82!important;
  background:linear-gradient(180deg,#5e421f,#24150b 72%)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,235,178,.22)!important;
  font:28px/1 Georgia,"Times New Roman",serif!important;
  text-shadow:0 2px 4px #000,0 0 12px rgba(255,190,73,.30)!important;
  pointer-events:none!important;
}

html body #onlineAuth .auth-game-logo{
  display:block!important;
  width:min(270px,82%)!important;
  max-height:155px!important;
  object-fit:contain!important;
  margin:-7px auto 3px!important;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(185,127,46,.18))!important;
}

html body #onlineAuth .online-logo{display:none!important}

html body #onlineAuth .online-auth-card h1{
  position:relative!important;
  margin:6px 0 8px!important;
  padding-bottom:12px!important;
  text-align:center!important;
  color:#ffe3a0!important;
  font:700 clamp(18px,2.1vw,23px)/1.15 Georgia,"Times New Roman",serif!important;
  letter-spacing:.11em!important;
  text-shadow:0 2px 4px #000,0 0 12px rgba(174,117,39,.25)!important;
}

html body #onlineAuth .online-auth-card h1::after{
  content:""!important;
  position:absolute!important;
  left:14%!important;
  right:14%!important;
  bottom:2px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,#8c672c,#f0ca72,#8c672c,transparent)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.72)!important;
}

html body #onlineAuth .online-auth-card>p:not(.auth-message){
  max-width:355px!important;
  margin:0 auto 18px!important;
  text-align:center!important;
  color:#c7b99d!important;
  font:11px/1.55 Arial,sans-serif!important;
}

html body #onlineAuth .auth-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  margin:0 0 17px!important;
  padding:4px!important;
  border:1px solid #684a22!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:linear-gradient(#130d08,#24170d)!important;
  box-shadow:inset 0 1px 7px #000a!important;
}

html body #onlineAuth .auth-tabs button{
  min-height:40px!important;
  padding:8px 9px!important;
  border:1px solid transparent!important;
  border-radius:4px!important;
  color:#9e8c70!important;
  background:linear-gradient(180deg,#2b1d11,#140d08)!important;
  font:700 10px/1 Arial,sans-serif!important;
  letter-spacing:.13em!important;
  text-shadow:0 1px 2px #000!important;
  transition:filter .14s ease,border-color .14s ease,color .14s ease,transform .1s ease!important;
}

html body #onlineAuth .auth-tabs button:hover{
  color:#ead7ae!important;
  border-color:#705327!important;
  filter:brightness(1.08)!important;
}

html body #onlineAuth .auth-tabs button.active{
  color:#fff0bf!important;
  border-color:#c49a4e!important;
  background:linear-gradient(180deg,#704f24,#3e2812 47%,#24170d 52%,#171008)!important;
  box-shadow:inset 0 1px 0 rgba(255,231,169,.20),inset 0 -2px 0 #d7ad58,0 0 12px rgba(171,108,31,.12)!important;
}

html body #onlineAuth .auth-form{gap:12px!important}

html body #onlineAuth .auth-form label{
  display:block!important;
  color:#dbc38f!important;
  font:700 9px/1.2 Arial,sans-serif!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

html body #onlineAuth .auth-form input{
  width:100%!important;
  height:44px!important;
  margin-top:6px!important;
  padding:0 13px!important;
  border:1px solid #5c462b!important;
  border-radius:5px!important;
  outline:none!important;
  color:#fff4db!important;
  caret-color:#e9bd63!important;
  background:
    linear-gradient(180deg,rgba(7,5,4,.96),rgba(24,16,10,.98))!important;
  box-shadow:
    inset 0 1px 7px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(255,232,177,.025)!important;
  font:14px Arial,sans-serif!important;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease!important;
}

html body #onlineAuth .auth-form input:focus{
  border-color:#cf9f4d!important;
  background:linear-gradient(180deg,#100b07,#2a1b0e)!important;
  box-shadow:0 0 0 2px rgba(201,153,70,.10),inset 0 1px 7px rgba(0,0,0,.95),0 0 14px rgba(175,112,36,.10)!important;
}

html body #onlineAuth .online-primary{
  position:relative!important;
  min-height:46px!important;
  margin-top:2px!important;
  border:1px solid #d0a454!important;
  border-radius:6px!important;
  overflow:hidden!important;
  color:#fff1c5!important;
  background:
    linear-gradient(180deg,#7d5724 0%,#563817 46%,#2c1b0d 51%,#1d1209 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,195,.23),
    inset 0 -3px 0 rgba(0,0,0,.30),
    0 4px 11px rgba(0,0,0,.55)!important;
  font:700 11px/1 Arial,sans-serif!important;
  letter-spacing:.15em!important;
  text-shadow:0 2px 3px #000!important;
  transition:filter .14s ease,transform .08s ease,box-shadow .14s ease!important;
}

html body #onlineAuth .online-primary:hover{
  filter:brightness(1.14) saturate(1.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,206,.32),inset 0 -3px 0 rgba(0,0,0,.28),0 5px 15px rgba(0,0,0,.62),0 0 18px rgba(201,143,48,.16)!important;
}

html body #onlineAuth .online-primary:active{
  transform:translateY(1px)!important;
  filter:brightness(.96)!important;
}

html body #onlineAuth .auth-message{
  min-height:17px!important;
  margin:10px 0 6px!important;
  text-align:center!important;
  color:#ddb86b!important;
  font:11px/1.35 Arial,sans-serif!important;
}

html body #onlineAuth .online-auth-card>small{
  display:block!important;
  padding-top:8px!important;
  border-top:1px solid rgba(142,103,45,.22)!important;
  text-align:center!important;
  color:#8e816d!important;
  font:9px/1.5 Arial,sans-serif!important;
}

@media (min-width:900px){
  html body #onlineAuth.online-auth{place-items:center end!important;padding-right:clamp(5vw,9vw,12vw)!important}
  html body #onlineAuth .online-auth-card{transform:translateY(-1vh)!important}
}

@media (max-width:899px){
  html body #onlineAuth.online-auth{
    place-items:center!important;
    padding:18px 14px max(18px,env(safe-area-inset-bottom))!important;
    background:
      linear-gradient(180deg,rgba(4,2,1,.46),rgba(7,4,2,.60)),
      url('../fundo.png') center center / cover no-repeat!important;
  }
  html body #onlineAuth .online-auth-card{
    width:min(430px,100%)!important;
    padding:32px 22px 22px!important;
  }
  html body #onlineAuth .auth-game-logo{width:min(235px,78%)!important;max-height:130px!important}
}

@media (max-width:520px){
  html body #onlineAuth.online-auth{align-items:center!important;padding:12px!important}
  html body #onlineAuth .online-auth-card{
    width:100%!important;
    padding:28px 17px 17px!important;
    border-radius:10px!important;
  }
  html body #onlineAuth .online-auth-card::after{top:-18px!important;width:62px!important;height:36px!important;font-size:24px!important}
  html body #onlineAuth .auth-game-logo{width:min(205px,76%)!important;max-height:112px!important;margin:-4px auto 1px!important}
  html body #onlineAuth .online-auth-card h1{font-size:16px!important;padding-bottom:9px!important;margin:3px 0 6px!important}
  html body #onlineAuth .online-auth-card>p:not(.auth-message){font-size:10px!important;margin-bottom:13px!important}
  html body #onlineAuth .auth-tabs{margin-bottom:12px!important}
  html body #onlineAuth .auth-tabs button{min-height:36px!important;font-size:9px!important}
  html body #onlineAuth .auth-form{gap:8px!important}
  html body #onlineAuth .auth-form input{height:40px!important;font-size:13px!important}
  html body #onlineAuth .online-primary{min-height:42px!important;font-size:10px!important}
  html body #onlineAuth.online-auth::after{display:none!important}
}

@media (max-height:650px) and (orientation:landscape){
  html body #onlineAuth.online-auth{padding:7px 16px!important}
  html body #onlineAuth .online-auth-card{width:min(420px,72vw)!important;padding:20px 22px 13px!important}
  html body #onlineAuth .online-auth-card::after{top:-11px!important;width:54px!important;height:29px!important;font-size:19px!important}
  html body #onlineAuth .auth-game-logo{width:155px!important;max-height:72px!important;margin:-3px auto 0!important}
  html body #onlineAuth .online-auth-card h1{font-size:13px!important;margin:0 0 4px!important;padding-bottom:6px!important}
  html body #onlineAuth .online-auth-card>p:not(.auth-message){display:none!important}
  html body #onlineAuth .auth-tabs{margin-bottom:7px!important}
  html body #onlineAuth .auth-tabs button{min-height:28px!important;padding:4px!important;font-size:8px!important}
  html body #onlineAuth .auth-form{gap:4px!important}
  html body #onlineAuth .auth-form label{font-size:7px!important}
  html body #onlineAuth .auth-form input{height:29px!important;margin-top:2px!important;font-size:11px!important}
  html body #onlineAuth .online-primary{min-height:30px!important;padding:4px!important;font-size:8px!important}
  html body #onlineAuth .auth-message{margin:3px 0!important;min-height:10px!important;font-size:8px!important}
  html body #onlineAuth .online-auth-card>small{display:none!important}
}