/* =========================================
   TELAS INICIAIS
========================================= */
#loginScreen,
#registerScreen,
#characterScreen,
#createCharacterScreen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at top, rgba(255,215,0,0.10), transparent 40%),
    linear-gradient(180deg, #0a0a0a, #000);
  z-index:1000;
}

/* =========================================
   CARDS
========================================= */
#loginCard,
#registerCard,
#characterCard,
#createCharacterCard{
  width:100%;
  max-width:420px;
  padding:26px 22px;
  border:2px solid #8b5a2b;
  border-radius:18px;
  background:linear-gradient(180deg, #1a1a1a, #050505);
  box-shadow:
    0 0 30px rgba(255,215,0,0.15),
    inset 0 0 10px rgba(255,255,255,0.05);
  color:#fff;
}

/* =========================================
   TÍTULOS
========================================= */
#loginCard h1,
#registerCard h2,
#characterCard h2,
#createCharacterCard h2{
  margin:0 0 10px 0;
  text-align:center;
  color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,0.25);
}

#loginSub,
#registerSub,
#characterSub,
#createCharacterSub{
  margin:0 0 18px 0;
  text-align:center;
  color:#ccc;
  font-size:14px;
}

#loginHint{
  margin:14px 0 0 0;
  text-align:center;
  color:#999;
  font-size:12px;
}

/* =========================================
   FORMS
========================================= */
#loginForm,
#registerForm,
#createCharacterForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#loginForm label,
#registerForm label,
#createCharacterForm label{
  font-size:14px;
  color:#f2f2f2;
}

/* =========================================
   INPUTS
========================================= */
#loginForm input,
#registerForm input,
#createCharacterForm input[type="text"],
#createCharacterForm input[type="password"]{
  width:100%;
  padding:12px 14px;
  border:2px solid #5a3a1b;
  border-radius:10px;
  outline:none;
  background:#111;
  color:#fff;
  font-size:15px;
}

#loginForm input::placeholder,
#registerForm input::placeholder,
#createCharacterForm input[type="text"]::placeholder,
#createCharacterForm input[type="password"]::placeholder{
  color:#777;
}

#loginForm input:focus,
#registerForm input:focus,
#createCharacterForm input[type="text"]:focus,
#createCharacterForm input[type="password"]:focus{
  border-color:#ffd700;
  box-shadow:0 0 10px rgba(255,215,0,0.20);
}

/* =========================================
   BOTÕES PRINCIPAIS
========================================= */
#loginBtn,
#registerBtn,
#createCharacterBtn,
.charPlayBtn,
#openCreateCharacter{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg, #a36a2d, #6f4318);
  color:#fff;
  font-weight:bold;
  font-size:15px;
  box-shadow:0 0 10px rgba(255,215,0,0.18);
  transition:all 0.2s ease;
}

#loginBtn:hover,
#registerBtn:hover,
#createCharacterBtn:hover,
.charPlayBtn:hover,
#openCreateCharacter:hover{
  transform:translateY(-1px);
  box-shadow:0 0 15px rgba(255,215,0,0.35);
}

#loginBtn:active,
#registerBtn:active,
#createCharacterBtn:active,
.charPlayBtn:active,
#openCreateCharacter:active{
  transform:scale(0.97);
}

/* =========================================
   BOTÕES SECUNDÁRIOS
========================================= */
#openRegister,
#backToLogin,
#backToLoginFromRegister,
#cancelCreateCharacter,
.charDeleteBtn{
  width:100%;
  padding:12px;
  border:1px solid #8b5a2b;
  border-radius:10px;
  background:linear-gradient(180deg, #2a2a2a, #111);
  color:#ffd700;
  font-weight:bold;
  font-size:14px;
  transition:all 0.2s ease;
}

#openRegister:hover,
#backToLogin:hover,
#backToLoginFromRegister:hover,
#cancelCreateCharacter:hover,
.charDeleteBtn:hover{
  box-shadow:0 0 10px rgba(255,215,0,0.20);
}

#openRegister:active,
#backToLogin:active,
#backToLoginFromRegister:active,
#cancelCreateCharacter:active,
.charDeleteBtn:active{
  transform:scale(0.97);
}

/* =========================================
   TELA DE PERSONAGENS
========================================= */
#characterCard{
  max-width:520px;
}

#characterList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.charSlot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid #5a3a1b;
  background:#111;
}

.charInfo{
  flex:1;
}

.charInfo h3{
  margin:0 0 6px 0;
  color:#ffd700;
  font-size:18px;
}

.charInfo p{
  margin:0;
  color:#aaa;
  font-size:13px;
}

.charActions{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:110px;
}

.charPlayBtn:disabled,
.charDeleteBtn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  box-shadow:none;
}

#characterMenuBtns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

/* =========================================
   CRIAR PERSONAGEM
========================================= */
#createCharacterCard{
  max-width:520px;
}

#raceList,
#classList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.classOption{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  border:1px solid #5a3a1b;
  background:#111;
  cursor:pointer;
}

.classOption input[type="radio"]{
  margin-top:3px;
  accent-color:#ffd700;
}

.classOption strong{
  color:#ffd700;
  display:block; 
}

.classOption small{
  color:#aaa;
  display:block;
  margin-top:2px;
}

#createCharacterBtns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (min-width:768px){
  #loginCard,
  #registerCard,
  #characterCard,
  #createCharacterCard{
    max-width:500px;
  }
}

@media (max-width: 560px){
  #loginScreen,
  #registerScreen,
  #characterScreen,
  #createCharacterScreen{
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #loginCard,
  #registerCard,
  #characterCard,
  #createCharacterCard{
    max-width: 100%;
    padding: 18px 14px;
    border-radius: 14px;
    margin: auto 0;
  }
}
.classEmpty{
  padding:10px;
  border-radius:10px;
  border:1px dashed #5a3a1b;
  background:#111;
  color:#aaa;
  font-size:13px;
}