* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* BOSS de encenação - visual grande */
.Character.boss {
  transform-origin: center center !important;
  scale: 2 !important;
  transition: none !important;
}

#planet-layer, #marte-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* planetas no fundo */
  pointer-events: none;
}

#game-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; /* jogo acima dos planetas */
  pointer-events: none; /* mantém como estava */
  will-change: transform;
  transform: translateZ(0);
}

#exit-fullscreen-01 {
    position: fixed !important;

    top: 0px;
    right: 0px;

    width: 28px;
    height: 28px;

    z-index: 999999999 !important;

    border-radius: 50%;
    border: 2px solid white;

    background: rgba(0,0,0,0.7);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


/* X */
#exit-fullscreen-01::before,
#exit-fullscreen-01::after {

    content:"";

    position:absolute;

    width:16px;
    height:2px;

    background:white;

    border-radius:5px;
}


#exit-fullscreen-01::before {
    transform:rotate(45deg);
}

#exit-fullscreen-01::after {
    transform:rotate(-45deg);
}

/* Ativa o painel quando a classe .debug-mode estiver no body */
body.debug-mode #debug-panel {
  display: block !important;
}


/* ajuste para telas pequenas */
@media(max-width:600px){

    #exit-fullscreen-01 {

        width: 32px;      /* ou 44px para melhor acessibilidade */
        height: 32px;
        top: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid #ff4444; /* vermelho para chamar atenção */
        box-shadow: 0 0 10px rgba(255,255,255,0.3);

    }

    #exit-fullscreen-01::before,
    #exit-fullscreen-01::after {
        width: 18px;      /* antes era 16px */
        height: 2px;
    }

}

/* Se o #game-container tiver z-index, ajuste também */
#game-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; /* mesmo nível do canvas, ou superior */
}

#sol-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none !important;
}

#mercurio-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  pointer-events: none !important;
}

#venus-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* ou 15 se quiser igual ao Mercúrio */
  pointer-events: none !important;
}

#lua-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none !important;
}

/* efeito quando suga cristal */
.grid-coin.sucked {
  transform: scale(0.2) translateY(-10px);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
}

/* animação de morte do boss (opcional) */
.Character.boss.boss-dead {
  animation: bossFade 0.6s forwards;
}
@keyframes bossFade {
  to { transform: scale(0.4) translateY(40px); opacity: 1; filter: blur(2px); }
}

/* barra de vida do boss (usa a mesma classe .Character_name-bot mas por id) */
#life-boss_scene_1 {
  transition: width .25s linear;
}

.Character.boss.boss-sucking {
  animation: bossSuckPulse 0.4s infinite alternate;
  filter: drop-shadow(0 0 25px rgba(255,180,100,0.9));
}

@keyframes bossSuckPulse {
  from { transform: scale(1.8); }
  to   { transform: scale(2.0); }
}

.boss-sucking {
    animation: suck 1s infinite;
}
@keyframes suck {
    0%   { transform: scale(1)   }
    50%  { transform: scale(1.15)}
    100% { transform: scale(1)   }
}

.password-box {
  position: fixed;
  top: 0; left: 0;
  width:100vw; height:100vh;
  background: rgba(0,0,0,.5);
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:28px;
  z-index: 99999 !important;
}

/*.Boss_sprite {
    width: 48px;
    height: 48px;
    background: url(images/boss.png) no-repeat;
    background-size: contain;
    transform: translateY(-10px) scale(1.9);
    image-rendering: pixelated;
} */

.cristais-opcao span {
  font-size:40px;
  cursor:pointer;
  margin:10px;
}
.senha-slot {
  display:flex;
  margin-top:10px;
  font-size:40px;
  min-height:50px;
}

html, body {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px; /* espaço pro footer fixo (ajuste conforme a altura real do footer) */
  box-sizing: border-box;
  height: auto;
  background: linear-gradient(
    180deg, 
    #e8f1ff 0%,   /* azul gelo, lembra cristal */
    #c9d6ff 40%,  /* lilás suave */
    #a3bffa 70%,  /* azul claro */
    #6d83f2 100%  /* azul mais forte, dá profundidade */
  );
  font-family: 'VT323', monospace;
  display: block;
  align-items: unset;
  justify-content: unset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;   
  user-select: none;
  color: white;
  font-size: 14px;
  overflow-y: scroll;   /* mantém rolagem */
  overflow-x: hidden;   /* bloqueia horizontal */   /* permite rolagem vertical */
  scrollbar-width: thin;
  scrollbar-color: #25d5ff #020817; /* Firefox: thumb / trilho */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  display: block;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #020817;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #25d5ff, #0a6fa8);
  border-radius: 8px;
  border: 2px solid #020817;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9af1ff, #25d5ff);
}

.game-container {
  position: relative;
  width: 90vw;           /* ocupa até 90% da largura da tela */
  max-width: 480px;      /* não cresce além disso em desktops */
  aspect-ratio: 16 / 9;  /* mantém proporção */
  background-size: cover;
  background-position: center;
  overflow: visible;
  image-rendering: pixelated;
  display: none;
  margin: 20px auto;     /* centraliza */
  z-index: 5000 !important;
  transform: none;
  transform-origin: center center;    
}

.game-container-01 {  /*Ajuste o conteudo principal ele é quem manda */
  z-index: 9999999;
  pointer-events: none; /* ← impede que ele capture os cliques/toques */
}

.player-info {
  position: relative;
  top: -200px; /* distância do topo */
  transform: translateX(50%);
  display: flex;
  justify-content: center; /* centraliza conteúdo interno */
  align-items: center;     /* alinha verticalmente se necessário */
  width: 50%;
}

.player-info h1 {
  color:  #071f82;
  font-weight: bold;
  font-size: 25px;
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  text-shadow: 0 0 5px #fff, 0 0 10px #b0c4de, 0 0 15px #7a87a6;
} 

#exit-fullscreen {
  position: relative;
  left: 95%;
  width: 40px;
  height: 40px;
  background: url('images/exit-btnOri.png') no-repeat center center;
  background-size: contain;
  border: none;
  z-index: 10000;
  pointer-events: auto;
  display: none;
}


input[type="text"] {
  padding-left: 0.5em;
  border: 3px solid #16bdc0;
  width: 60%;
  text-transform: none;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 18px;
  height: 44px;
  border-radius: 4px;
  outline: 0;
  background-color: rgba(66, 226, 223, 0.3);
  color: white;
}

button{
  background: #c5d8ff; 
  border: 0;
  border-bottom: 2px solid #c5d8ff;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 18px;
  height: 44px;
  border-radius: 4px;
  outline: 0;
  padding: 1em 1em;
  font-size: clamp(17px, 1.5vw, 17px);
  border-radius: 8px;
  cursor: pointer;
  width: 60%;
  letter-spacing: 20px; /* espaçamento entre letras */
}

#intro-container {
  position: fixed;           /* fica sempre visível no centro */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* move pro centro exato */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #001F3F; /* opcional: fundo escuro */
  padding: 20px;
  border-radius: 10px;
}

#confirmarSenha {
  margin-top: 20px; /* espaço abaixo do vídeo */
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 12px 20px;
  width: clamp(100px, 60%, 200px);
  text-align: center;
  top: 15px;
  right: 15px;


}

#intro-container video {
  max-width: 90%;   /* responsivo */
  max-height: 50vh; /* não ultrapassa a tela */
  border-radius: 4px;
}

#intro-container button {
  margin-top: 20px; /* espaço abaixo do vídeo */
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 12px 20px;
  width: clamp(100px, 60%, 200px);
  text-align: center;
  top: 15px;
  right: 15px;
}

#reset-button{
  cursor: none;
  opacity: 0%;
  width: 1%;
  height: 1%;
}

#change-control{
  display: none;
}

button:active {
  transform: scale(0.97);
}

.menu-botoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* espaço entre os botões */
  margin: 15px 0;
}

.menu-botoes button {
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 12px 20px;
  width: clamp(160px, 60%, 260px);
  text-align: center;
}

#player-name {
  width: 100%;
  padding: 10px 14px;
  font-family: 'VT323', monospace;
  font-size: 32px;
  text-align: center;

  background: linear-gradient(145deg, #f0f7ff, #dbe7ff);
  border: 2px solid #9bb8ff;
  border-radius: 8px;

  color: #001F3F;
  outline: none;
  transition: all 0.25s ease-in-out;
}

#player-name:focus {
  border-color: #3d94ff;
  box-shadow: 0 0 10px rgba(61, 148, 255, 0.6);
}

/* Characters */
.grid-cell {
  position: absolute;
  width: 33px;
  height: 30px; 
}

/* Somete para o multiplayer ---------------------------------------------------------------*/
.grid-cell-01 {
  position: absolute;
  width: 66px;
  height: 60px;
}

.grid-enemy {
  position: absolute;
  width: 16px;
  height: 16px;
}

.grid-coin {
  position: absolute;
  width: 16px;   /* 1 TILE */
  height: 16px;  /* 1 TILE */
}

.grid-coin-01 {
  position: absolute;
  width: 32px;   /* 1 TILE */
  height: 32px;  /* 1 TILE */
}

 .debug-coin {
  outline: 1px dashed yellow;
  background-color: rgba(255, 255, 0, 0.2);
}

/*.Character {
  transition: transform 0.4s; 
}*/
.Character.you {
  z-index: 5000 !important;
}

.Character.you .Character_sprite {
  z-index: 5001 !important; /* o sprite acima ainda */
}

.Character.you .Character_you-arrow {
  display: block;
}
.Character_you-arrow {
  display: none;
  position: absolute;
  top: -18px;
  left: 5px;
  width: 15px;
  height: 17px;
  background: url(images/arrow.png) no-repeat;
}
.Character_sprite,
.Character_sprite- {
  overflow-y: auto;
  top: -3px;
  background: url(images/characters.png);
  z-index: 2001 !important; /* maior que o efeito */
}
.Character[data-direction="right"] .Character_sprite,
.Character[data-direction="right"] .Character_sprite- {
  background-position-x: -34px;
}
.Character[data-direction="left"] .Character_sprite,
.Character[data-direction="left"] .Character_sprite- {
  background-position-x: 0px;
}

.Character[data-direction="up"] .Character_sprite,
.Character[data-direction="up"] .Character_sprite- {
  background-position-x: 35px;
}

.Character[data-direction="down"] .Character_sprite,
.Character[data-direction="down"] .Character_sprite- {
  background-position-x: 70px;
}

.Character[data-color="Tempestara"] .Character_sprite,
.Character[data-color="Tempestara"] .Character_sprite- {
  background-position-y: -33px;
}
.Character[data-color="Sylvarion"] .Character_sprite,
.Character[data-color="Sylvarion"] .Character_sprite- {
  background-position-y: -60px;
}
.Character[data-color="Quarzalis"] .Character_sprite,
.Character[data-color="Quarzalis"] .Character_sprite- {
  background-position-y: -85px;
}
.Character[data-color="Zephyrium"] .Character_sprite,
.Character[data-color="Zephyrium"] .Character_sprite- {
  background-position-y: -118px;
}
.Character[data-color="Terranova"] .Character_sprite,
.Character[data-color="Terranova"] .Character_sprite- {
  background-position-y: -146px;
}

.Character_sprite_Enemy,
.Character_sprite_Enemy {
  overflow-y: auto;
  top: 2px;
  background: url(images/enemy.png);
  z-index: 100; /* maior que o efeito */
}
.Character[data-direction="right"] .Character_sprite_Enemy,
.Character[data-direction="right"] .Character_sprite_Enemy {
  background-position-x: 16px;
}
.Character[data-color="Tempestara"] .Character_sprite_Enemy,
.Character[data-color="Tempestara"] .Character_sprite_Enemy {
  background-position-y: -16px;
}
.Character[data-color="Sylvarion"] .Character_sprite_Enemy,
.Character[data-color="Sylvarion"] .Character_sprite_Enemy {
  background-position-y: -32px;
}
.Character[data-color="Quarzalis"] .Character_sprite_Enemy,
.Character[data-color="Quarzalis"] .Character_sprite_Enemy {
  background-position-y: -48px;
}
.Character[data-color="Zephyrium"] .Character_sprite_Enemy,
.Character[data-color="Zephyrium"] .Character_sprite_Enemy {
  background-position-y: -64px;
}
.Character[data-color="Terranova"] .Character_sprite_Enemy,
.Character[data-color="Terranova"] .Character_sprite_Enemy {
  background-position-y: -80px;
}

.Character_shadow {
  background: url(images/shadow.png) no-repeat;
  top: 15px;
  width: 150%;
  left: 15px;
}

.Character_name-container {
  width: 10px;
  height: 3px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
  margin-top: -7px;
}

.Character_name-container_player {
  position: absolute;
  top: -10px;
  left: 0px;
  font-size: 5px;
  padding: 1px 2px;
  border-radius: 3px;
  background: #333;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: 'VT323', monospace; 
}
    
/* só a barrinha do bot */
.Character_name-bot {
  height: 100%;
  width: 100%;
  background: #0f0; /* verde da vida */
  border-radius: 3px;
  transition: width 0.8s linear; /* anima encolhimento */
}

.Character.you-01 {
  z-index: 5000 !important;
}

.Character.Character.you-01 .Character_sprite-01 {
  z-index: 5001 !important; /* o sprite acima ainda */
}

.Character-01.you-01 .Character_you-arrow-01 {
  display: block;
}
.Character_you-arrow-01 {
  display: none;
  position: absolute;
  top: -30px;
  left: 0px;
  width: 200px;
  height: 157px;
  background: url(images/cristalverde.png) no-repeat;
}
.Character_sprite-01,
.Character_sprite-01- {
  overflow-y: visible;
  width: 64px;
  height: 64px;
  top: -3px;
  top: -3px;
  background: url(images/characters-01.png);
  z-index: 2 !important; /* maior que o efeito */
}
.Character-01[data-direction="right"] .Character_sprite-01,
.Character-01[data-direction="right"] .Character_sprite-01 {
  background-position-x: -68px;
}
.Character-01[data-direction="left"] .Character_sprite-01,
.Character-01[data-direction="left"] .Character_sprite-01 {
  background-position-x: 0px;
}
.Character-01[data-direction="up"] .Character_sprite-01,
.Character-01[data-direction="up"] .Character_sprite-01 {
  background-position-x: 66px;
}

.Character-01[data-direction="down"] .Character_sprite-01,
.Character-01[data-direction="down"] .Character_sprite-01 {
  background-position-x: 135px;
}

.Character-01[data-color="Tempestara"] .Character_sprite-01,
.Character-01[data-color="Tempestara"] .Character_sprite-01- {
  background-position-y: -60px;
}
.Character-01[data-color="Sylvarion"] .Character_sprite-01,
.Character-01[data-color="Sylvarion"] .Character_sprite-01- {
  background-position-y: -120px;
}
.Character-01[data-color="Quarzalis"] .Character_sprite-01,
.Character-01[data-color="Quarzalis"] .Character_sprite-01- {
  background-position-y: -170px;
}
.Character-01[data-color="Zephyrium"] .Character_sprite-01,
.Character-01[data-color="Zephyrium"] .Character_sprite-01- {
  background-position-y: -220px;
}
.Character-01[data-color="Terranova"] .Character_sprite-01,
.Character-01[data-color="Terranova"] .Character_sprite-01- {
  background-position-y: -275px;
}

/* ==== ENEMY SPRITE ==== */
.Character_sprite-Enemy-01,
.Character_sprite--Enemy-01 {
  overflow-y: auto;
  top: 2px;
  width: 65px;
  height: 62px;
  background: url(images/enemy-01.png);
  z-index: 2001 !important; /* maior que o efeito */
}
.Character-01[data-direction="right"] .Character_sprite-Enemy-01,
.Character-01[data-direction="right"] .Character_sprite--Enemy-01 {
  background-position-x: 65px;
}
.Character-01[data-color="Tempestara"] .Character_sprite-Enemy-01,
.Character-01[data-color="Tempestara"] .Character_sprite--Enemy-01 {
  background-position-y: -60px;
}
.Character-01[data-color="Sylvarion"] .Character_sprite-Enemy-01,
.Character-01[data-color="Sylvarion"] .Character_sprite--Enemy-01 {
  background-position-y: -120px;
}
.Character-01[data-color="Quarzalis"] .Character_sprite-Enemy-01,
.Character-01[data-color="Quarzalis"] .Character_sprite--Enemy-01 {
  background-position-y: -180px;
}
.Character-01[data-color="Zephyrium"] .Character_sprite-Enemy-01,
.Character-01[data-color="Zephyrium"] .Character_sprite--Enemy-01 {
  background-position-y: -240px;
}
.Character-01[data-color="Terranova"] .Character_sprite-Enemy-01,
.Character-01[data-color="Terranova"] .Character_sprite--Enemy-01 {
  background-position-y: -320px;
}
     
.Character_name-container-01 {
  width: 15px;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: visible;
  margin-top: -10px;
}

.Character_name-container_player-01 {
  position: absolute;
  top: -25px;
  left: 5px;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #333;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: 'VT323', monospace; 
  text-shadow: 0 0 5px #000, 0 0 10px #2a65ff;
  z-index: 1;
}
    
/* só a barrinha do bot */
.Character_name-bot-01 {
  height: 100%;
  width: 100%;
  background: #0f0; /* verde da vida */
  border-radius: 3px;
  transition: width 0.8s linear; /* anima encolhimento */
}

/* Coins */
.Coin_sprite,
.Coin_sprite- {
  width: 100%;
  height: 100%;
  background-size: contain; /* garante que a imagem se ajuste */

  background: url(images/coin.png) no-repeat;
  animation: coinFloat 0.8s linear infinite alternate-reverse;
}
.Coin_sprite- {
  background-image: url(images/coin-.png);
}

.Coin_sprite-01,
.Coin_sprite-01- {
  width: 100%;
  height: 100%;
  background-size: contain; /* garante que a imagem se ajuste */

  background: url(images/coin.png) no-repeat;
  animation: coinFloat 0.8s linear infinite alternate-reverse;
  transform: scale(2);
  transform-origin: center;
}
.Coin_sprite-01 {
   width: 100%;
  height: 100%;
  background: url(images/coin.png) no-repeat center center;
  background-size: contain;
  image-rendering: pixelated;
}

/*Somete no singleplayer------------------------------------------------------------------------*/
.Coin_shadow {
  background: url(images/coin-shadow.png) no-repeat;
}

.top-menu {
  background-color: #001F3F;
  padding: 0.5rem clamp(0.5rem, 6vw, 10rem);
  text-align: center;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  height: auto;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;   
}

.ui-container {
  z-index: 10;
}

.top-menu a {
  color: white;
  margin: 0.5rem;
  font-weight: bold;
  font-size: clamp(12px, 2vw, 16px); /* tamanho adaptável */
  text-decoration: none;
  font-family: 'VT323', monospace;
}

.top-menu a:hover {
  text-decoration: underline;
}

.conteudo-principal {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem; /* espaço entre os blocos */
  padding: 1rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

main.conteudo-principal {
  min-height: calc(100vh - 100px); /* 100px = topo (menu) + rodapé */
}

.conteudo-principal-01 {
  justify-content: center;
  display: flex;
  overflow: visible;
  width: 700px;
  z-index: 9999999;
}

main.conteudo-principal-01 {
  min-height: calc(100vh - 100px); /* 100px = topo (menu) + rodapé */
   z-index: 9999999;
}

.page-content {
  position: relative;        /* em vez de absolute */
  width: 100%;
  max-width: 900px;
  margin: 0 auto;   /* espaço no topo p/ menu fixo e embaixo p/ footer */
  padding: 24px;
  box-sizing: border-box;

  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,240,255,0.9));
  border: 2px solid rgba(200,220,255,0.8);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.5);

  color: #001F3F;
  font: bold 16px/1.6 'VT323', monospace;
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-content h1 {
  font-size: clamp(18px, 4vw, 28px);
  text-align: center;
  color: #2a65ff; font-size: 30px; margin: 0 0 16px;
}

.page-content h2 {
  font-size: clamp(18px, 4vw, 28px);
  color: #001F3F;
  text-align: center;
  color: #2a65ff; font-size: 30px; margin: 0 0 16px;
}

.page-content h3 {
  font-size: clamp(18px, 4vw, 28px);
  color: #001F3F;
  text-align: center;
  color: #2a65ff; font-size: 30px; margin: 0 0 16px;
}

.page-content ul, ol, dl {
 padding-left: 30px;
 font-size: 20px;
 text-align: justify;
 text-indent: 50px;
}

.page-content dl {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  text-align: center;
  text-indent: 50px;
}

.page-content p {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  text-align: justify;
  text-indent: 50px;
}

.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content figure {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.tutorial-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 25, 0.9);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.tutorial-box {
  max-width: 80%;
  font-size: 3.2rem;
  margin-bottom: 20px;
  text-align: center;
}

.tutorial-btn { 
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  border-radius: 4px;
  outline: 0;
  font-size: clamp(18px, 1.5vw, 18px);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px; /* espaçamento entre letras */
  text-align: center;
  display: flex;
  margin: 20px auto; /* centraliza horizontal */
  justify-content: center; 
  align-items: center; 
  width: 160px;             /* largura fixa pra não encolher demais */
  margin: 20px auto; 
  background: #00f7ff;
  border-bottom: none;
}

.tutorial-controls {
  display: flex;
  gap: 10px;
}

.tutorial-btn.skip {
cursor: pointer;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  border-radius: 4px;
  outline: 0;
  font-size: clamp(18px, 1.5vw, 18px);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px; /* espaçamento entre letras */
  text-align: center;
  display: flex;
  margin: 20px auto; /* centraliza horizontal */
  justify-content: center; 
  align-items: center; 
  width: 160px;             /* largura fixa pra não encolher demais */
  margin: 20px auto; 
  background-color: #ff5555;
  color: white;
}

.tutorial-img {
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px auto;
  border-radius: 10px;
  display: block;
}

/* joystick - visível por padrão (ajuste custom depois se quiser) */
#joystick-zone{
  display: flex;
  opacity: 1;
}

#joystick-zone-01{
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  display: flex;
  opacity: 1;
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: auto; /* garante que toques passem para o joystick */
  z-index: 99999;   /* 🔥 garante que fica acima do canvas */
}

canvas {
  pointer-events: none !important;
  touch-action: none;
}

.joystick-container {
  opacity: 0%;
  position: fixed;
}

.joystick-container-01 {
  opacity: 0%;
}

.fullscreen-game {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: scale(1) !important;
  margin: 0 !important;
  background-size: cover !important;
  z-index: 1000 !important;
}

#seletor-nave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
}

#preview-nave {
  width: 25px; /* tamanho do frame original */
  height: 25px;
  background: url('images/characters-.png') no-repeat;
  background-position: -24px -48px; /* escolhe o frame */
  background-size: auto; 
  image-rendering: pixelated;

  display: block;
  margin: 0 auto;

  /* aumenta escala 2x e inverte no eixo X */
  transform: scale(2.5) scaleX(-1);
}

#prev-nave{
  background: url("images/seta.png") no-repeat;
  width: 32px;   /* largura do botão */
  height: 32px;  /* altura do botão */
  background-size: contain; /* garante que a seta encaixe */
  background-position: center;
  background-repeat: no-repeat;
  padding: 0; /* remove padding que bagunça */
  scale: -1;
  right: 10%;
  position: relative;
}

#next-nave{
  background: url("images/seta.png") no-repeat;
  width: 32px;   /* largura do botão */
  height: 32px;  /* altura do botão */
  background-size: contain; /* garante que a seta encaixe */
  background-position: center;
  background-repeat: no-repeat;
  padding: 0; /* remove padding que bagunça */
  left: 10%;
  position: relative;
}

.btn-nave:active {
  transform: scale(0.95);
}

.btn-nave:active {
  transform: scale(0.95);
}

#telaAguardando{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000000;
  color: white;
  font-family: 'VT323', monospace;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 30px;
}

@keyframes coinFloat {
  from { transform: translateY(0); }
  to { transform: translateY(5px); }
}

#telaInicio {
  flex: 0 0 280px; /* largura fixa para o menu */
  position: fixed;
  inset: 0; /* ocupa toda a área */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  top: -50px;
  right: auto;
  transform: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  z-index: 200;
  width: clamp(260px, 10%, 400px); /* min 260px, max 400px */
  height: auto;
}

#tela-art {
  flex: 0 0 280px; /* largura fixa para o menu */
  position: fixed;
  inset: 0; /* ocupa toda a área */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  top: 0;
  left: auto;
  transform: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  z-index: 200;
  width: clamp(260px, 10%, 400px); /* min 260px, max 400px */
  height: auto;
  min-height: 250px; /* reserva espaço antes da imagem carregar */
}

#telaInicio h1, #telaInicio h2, #telaInicio p {
    text-align: center;
    color: white;
    font-size: clamp(18px, 4vw, 28px); /* mínimo 16px, escala até 32px */
    text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
}

/* Imagens dentro da tela de início */
#telaInicio img {
    max-width: 80%;
    height: auto;
}

#telaInicio-start {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 10%, 400px);
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 12px;
  text-align: center;
  z-index: 300;
  min-height: 300px; /* garante espaço para mostrar o seletor */
  gap: 1rem;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* <-- centraliza certinho */
}

#telaInicio-start h1, #telaInicio-start h2, #telaInicio-start p {
    text-align: center;
    color: white;
    font-size: clamp(18px, 4vw, 28px); /* mínimo 16px, escala até 32px */
    text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
}

/* Imagens dentro da tela de início */
#telaInicio-start img {
    max-width: 80%;
    height: auto;
}

#telaInicio-start label {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 4vw, 28px);
  color: white; /* vermelho forte */
  font-weight: bold;
  text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
  margin-top: 10px;
}

.site-footer {
  background-color: #001F3F;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;   /* controla altura pelo padding */
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  font-size: 13px;
}


.site-footer a { color: #ffffff; text-decoration: none; margin: 0 25px;   font-size: 13px;}
.site-footer a:hover { text-decoration: underline; }

/* Layout para páginas de conteúdo (evita conflito com index/jogo) */
body.content-page {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* a área de conteúdo rola, o footer fica fixo */
}

/* Área principal rola e respeita header/footer fixos */

/* Títulos e listas */
body.content-page .page-content h1 { color: #2a65ff; font-size: 30px; margin: 0 0 16px; }
body.content-page .page-content h2 { font-size: 22px; margin: 20px 0 10px; }
body.content-page .page-content ul { padding-left: 0px; justify-content: center; }
body.content-page .page-content p { margin: 12px 0; }


#logo {
  position: relative;
  width:  70px;
}

.ranking-actions {
  text-align: center;
  margin: 10px 0 20px; /* espaço acima e abaixo do botão */
}

.ranking-actions button {
  background: linear-gradient(145deg, #7388ad, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 12px 20px;
  width: 100px;
  text-align: center;

  box-shadow:
    0 6px 12px rgba(0,0,0,0.2),
    inset 0 0 6px rgba(255,255,255,0.6);

  transition: all 0.25s ease;
}

.ranking-actions button:hover {
  background: linear-gradient(145deg, #f8fbff, #dce9ff);
  transform: scale(1.05);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.25),
    inset 0 0 12px rgba(255,255,255,0.8);
}

.div-centralizada{
  width: 50%; /* ou um valor fixo, como 300px */
  margin-left: auto;
  margin-right: auto;
}

#table-ranking{ 
      border-collapse: collapse;
      width: 100%;
      background-color: #ffffffcc;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      color: #001F3F;
      font-size: 30px;
    }
   th, td {   
      border-bottom: 5px solid #ccc;
      padding-left: 70px;
      color: #001F3F;
    }

    th {
      background-color: #eee;
      font-weight: bold;
      padding-left: 0px;
    }
    tr:hover {
      background-color: rgba(197, 216, 255, 0.4);
    }

  .table-wrapper {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical se quiser */
  margin: 20px auto;
  width: 100%;
}

#table-history {
  border-collapse: collapse;
  width: 100%;  /* controla a largura */
  background-color: #ffffffcc;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-size: 25px;
  font-family: 'VT323', monospace;
  text-align: center;
}

#table-history th, 
#table-history td {
  text-align: center; /* centraliza o conteúdo */
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffffcc;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-size: 25px;
  font-family: 'VT323', monospace;
}

#table-history th:nth-child(1),
#table-history td:nth-child(1) {
  width: 10%;
}

#table-history th:nth-child(2),
#table-history td:nth-child(2) {
  width: 10%;
}

#table-history th:nth-child(3),
#table-history td:nth-child(3) {
  width: 10%;
}


#tutorial-ranking {
      left: 270px;
      position: relative;
    }

    #tutorial-ranking h2{
      color: white;
      padding-right: 500px;
    }

#cronometro{
      position:absolute; 
      font-size: 5px; 
      font-weight: bold; 
      color: white; 
      font-family: 'VT323', monospace; 
      background-color: rgba(0,0,0,0.6); 
      padding: 2px 2px; 
      border-radius: 4px; 
      width: 12%; 
      top: 0px; 
      display: none;
      height: 4%;
    }

    /* HUD fixo dentro do jogo */
#hud {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  display: none;
  align-items: center;
  column-gap: 0px; /* reduz a distância entre descrição e valor */
  flex-direction: column;
  gap: 0.3px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 2px;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
  z-index: 999;
  width: 15%;
  height: 16%;
}

.hud-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ separa label e valor */
  width: 100%; /* garante o espaço total */
}

.hud-item-especial {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ separa label e valor */
  width: 94%; /* garante o espaço total */
}

.hud-value {
  font-size: 6px;
  text-align: right;  
}

.hud-value {
  font-size: 6px;
  text-align: right;  
}

.hud-label {
  display: inline-block;
  min-width: 30px;    /* largura fixa para não recuar */
  text-align: left;   /* garante alinhamento à esquerda */
}

.bot-emoji {
  position: absolute;
  top: -10px;
  left: 8px;
  font-size: 8px;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 0 4px black;
}

.BotEspecial {
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  image-rendering: pixelated;
  transform-origin: center center;
  transition: transform 0.02s linear;
}

@keyframes botEspGlow {
  0% { filter: brightness(1) drop-shadow(0 0 6px #ff0); }
  100% { filter: brightness(1.6) drop-shadow(0 0 14px #f00); }
}

#hud-01 {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  display: none;
  align-items: center;
  column-gap: 0px; /* reduz a distância entre descrição e valor */
  flex-direction: column;
  gap: 0.3px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 2px;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
  z-index: 999;
  width: 20%;
  height: auto;
}

.hud-item-01 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ separa label e valor */
  width: 100%; /* garante o espaço total */
}

.hud-item-especial-01 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ separa label e valor */
  width: 94%; /* garante o espaço total */
}

.hud-value-01 {
  font-size: 6px;
  text-align: right;  
}

.hud-value-01 {
  font-size: 6px;
  text-align: right;  
}

.hud-label-01 {
  display: inline-block;
  min-width: 30px;    /* largura fixa para não recuar */
  text-align: left;   /* garante alinhamento à esquerda */
}

.especial, .Especial {
  width: 39px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  background: url(images/gun.gif);
}


/* orientação do tiro especial */
.Especial.dir-right { transform: none; }
.Especial.dir-left  { transform: scaleX(-1); }
.Especial.dir-up    { transform: rotate(90deg); }
.Especial.dir-down  { transform: rotate(-90deg); }

.minha-div{
  text-align: center; /* Para centralizar a imagem */
  position: fixed; /* <-- fixa em relação à tela toda */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* <-- centraliza certinho */
  display: none;
}

.minha-div img {
    width: 100%; /* Garante que a imagem não ultrapasse a div */
    height: auto;
  }

figure{
  text-align: center;
  text-align: center; 
  padding: 10px; 
  border-radius: 10px;
}

figure img {
 width: 400px;
 border-radius: 8px;
}

/* efeito de tomar dano */
.Character_sprite.damage,
.Character_sprite_Enemy.damage,
.Character_sprite_Enemy.damage,
.Character.bot-hit .Character_sprite,
.Character.bot-hit .Character_sprite_Enemy,
.Character.bot-hit .Character_sprite_Enemy {
  animation: damageFlash 0.28s ease;
}

/* Efeito de piscar ao tomar dano */
@keyframes damageFlash {
  0%   { filter: brightness(1) }
  25%  { filter: brightness(2) saturate(2) } /* fica mais claro/vermelho */
  50%  { filter: brightness(0.7) }
  75%  { filter: brightness(1.5) saturate(1.5) }
  100% { filter: brightness(1) }
}

.bot-hit {
  animation: botDamage 0.3s ease;
}

@keyframes botDamage {
  0% { filter: brightness(2) hue-rotate(0deg); }
  50% { filter: brightness(1) hue-rotate(-30deg); }
  100% { filter: none; }
}

.end-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: none; /* escondido por padrão */
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.end-box {
  background: linear-gradient(145deg, #1a1a1a, #2e2e2e);
  border: 3px solid #00ffcc;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  color: #fff;
  font-family: 'VT323', monospace;
  box-shadow: 0 0 30px #00ffcc;
  animation: popIn 0.6s ease;
  /* resto do seu estilo já existente */
}

.end-box h1{
  font-size: 36px;
  margin-bottom: 20px;
  color: #00ffcc;
  text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffaa;
}

.end-box  p{
  font-size: 36px;
  margin-bottom: 20px;
  color: #00ffcc;
  text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffaa;
}

.end-box button {
  margin-top: 20px;
  padding: 12px 25px;
  border: none;
  border-radius: 12px;
  background: #00ffcc;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s;
  letter-spacing: 1px; /* espaçamento entre letras */
  width: 100%;
}

.end-img {
  max-width: 250px;   /* controla o tamanho */
  width: 80%;         /* escala responsiva */
  height: auto;
  margin-bottom: 20px; /* espaço abaixo da imagem */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* === AURA BRILHANTE DOS CRISTAIS DE TRANSFORMAÇÃO === */

/* Fogo */ 
/* ====== AURA DRAGON BALL PARA CRISTAIS ====== */

/* === BRILHO LINDO E SUAVE PARA CRISTAIS === */

.crystal-glow {
  position: relative;
  filter: drop-shadow(0 0 6px var(--cor1)) drop-shadow(0 0 12px var(--cor2));
  animation: glowPulse 1.8s ease-in-out infinite;
  z-index: 5;
}

.crystal-glow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor2), transparent 70%);
  filter: blur(12px);
  opacity: 0.6;
  animation: softAura 2.4s ease-in-out infinite;
  z-index: -1;
}

/* pulso suave */
@keyframes glowPulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 6px var(--cor1)); }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 14px var(--cor2)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 6px var(--cor1)); }
}

/* movimentação da aura */
@keyframes softAura {
  0%   { opacity: 0.45; transform: scale(1); }
  50%  { opacity: 0.85; transform: scale(1.18); }
  100% { opacity: 0.45; transform: scale(1); }
}

/* ===== CORES ESPECÍFICAS ===== */

.crystal-fire {
  --cor1: #ff6600;
  --cor2: #ff3300;
}

.crystal-ice {
  --cor1: #7fdfff;
  --cor2: #44c8ff;
}

.crystal-plant {
  --cor1: #2aff78;
  --cor2: #00cc44;
}

.crystal-eletric {
  --cor1: #ffff55;
  --cor2: #fff000;
}

.crystal-wind {
  --cor1: #d7d7ff;
  --cor2: #b0b0ff;
}

.crystal-water {
  --cor1: #33ccff;
  --cor2: #0099ff;
}

@keyframes impactoMeteoro {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  80% {
    transform: scale(2.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.efeito-meteoro-explosao {
  position: absolute;
  width: 32px;     /* ajuste do tamanho */
  height: 32px;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  animation: impactoMeteoro 0.4s ease-out forwards;
  z-index: 999; /* aparece por cima */
}

/* Gun and Bullet */
.Gun,
.Bullet {  
  width: 50px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  background: url(images/normal.gif);
}
.Gun {
  visibility: hidden;
}

.BulletBot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: url(images/normal.gif);
  box-shadow: 0 0 8px 3px yellow;
  z-index: 2000;
  image-rendering: pixelated;
}

.BulletEspecial{
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: url(images/ice.gif);
  box-shadow: 0 0 15px 5px cyan;
  animation: pulseSpecial 0.4s infinite alternate;
  z-index: 2500;
  image-rendering: pixelated;
}

/* orientações da bala */
.Bullet { 
  transform-origin: center center;
  transition: transform 0.02s linear;
  pointer-events: none;
  image-rendering: pixelated;
}

/* direção padrão (sem transformação) */
.Bullet.dir-right { transform: none; }

/* espelha horizontalmente para left */
.Bullet.dir-left { transform: scaleX(-1); }

/* rotaciona para cima/baixo */
.Bullet.dir-up { transform: rotate(90deg); }
.Bullet.dir-down { transform: rotate(-90deg); }

/* mantém o estilo Especial (se já tiver) */


/* mantém o estilo Especial (se já tiver)-------------------------------------------------gun01 bullet01 */
.Gun-01,
.Bullet-01 {  
  width: 50px;
  height: 18px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/normal.gif);
}

.BulletEspecial-01 {  
  width: 50px;
  height: 18px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/ice.gif);
}

.BulletEspecial-02 {  
  width: 50px;
  height: 36px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/plant.gif);
}

.BulletEspecial-03 {  
  width: 50px;
  height: 18px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/eletric.gif);
}

.BulletEspecial-04 {  
  width: 20px;
  height: 15px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/wind.png);
}

.BulletEspecial-05 {  
  width: 70px;
  height: 70px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/waterGun.gif);
}

.BulletEspecial-06 {  
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  position: absolute;
  background: url(images/fire.gif);
}

.Gun-01 {
  visibility: hidden;
}

.BulletBot-01 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  background: url(images/normal.gif);
}

/* orientações da bala */
.Bullet-01 { 
  transform-origin: center center;
  transition: transform 0.02s linear;
  pointer-events: none;
  image-rendering: pixelated;
}

/* direção padrão (sem transformação) */
.Bullet.dir-right-01 { transform: none; }

/* espelha horizontalmente para left */
.Bullet.dir-left-01 { transform: scaleX(-1); }

/* rotaciona para cima/baixo */
.Bullet.dir-up-01 { transform: rotate(-90deg); }
.Bullet.dir-down-01 { transform: rotate(90deg); }

/* mantém o estilo Especial (se já tiver) */

.Hazard {
  position: absolute;
  width: 32px;
  height: 32px;
  background-size: cover;
  pointer-events: none;
}

.Hazard.cometa {
  background-image: url("images/meteoro.png");
  animation: cometaSpin 1s linear infinite;
}

.Hazard.meteoro {
  background-image: url("images/meteoro.png");
  animation: meteoroShake 0.6s linear infinite;
}

.Meteoro {
  width: 38px;
  height: 40px;
  background-image: url("images/meteoro.png");
  position: absolute;
  z-index: 99;
}


@keyframes cometaSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes meteoroShake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.PowerUpIce {
  width: 16px;
  height: 16px;
  background: url(images/ice.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.PowerUpFire{
  width: 16px;
  height: 16px;
  background: url(images/fire.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.PowerUpWater{
  width: 16px;
  height: 16px;
  background: url(images/water.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.PowerUpPlant{
  width: 16px;
  height: 16px;
  background: url(images/plant.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.PowerUpEletric{
  width: 16px;
  height: 16px;
  background: url(images/eletric.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.PowerUpWind {
  width: 16px;
  height: 16px;
  background: url(images/wind.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.EspecialIce {
  width: 39px;
  height: 16px;
  background: url(images/ice.gif);
  background-size: contain;
}

.EspecialFire {
  width: 24px;
  height: 20px;
  background: url(images/fireGun.gif);
  background-size: contain;
}

.EspecialWater {
  width: 25px;
  height: 25px;
  background: url(images/waterGun.gif);
  background-size: contain;
}

.BulletAgua {
  width: 50px;
  height: 16px;
  background: url(../public/images/water.gif) no-repeat center center;
  background-size: cover;
  position: absolute;
}

.EnergyPack {
  width: 16px;
  height: 16px;
  background: url(images/coin.gif) no-repeat center center;
  background-size: contain;
  z-index: 3000;
}

.Character_trail2.Auralis {
  position: absolute;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  z-index: 9999999;
}

.Character_trail.Auralis {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Auralis {
  transform: scaleX(1);
  left: 28px;
}

.Character[data-direction="right"] .Character_trail2.Auralis {
  transform: scaleX(1);
  left: 28px;
  top: 0px;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Auralis {
  transform: scaleX(-1);
  left: -13px;
}

.Character[data-direction="left"] .Character_trail2.Auralis {
  transform: scaleX(-1);
  left: -13px;
  top: 0px;
}

.Character[data-direction="up"] .Character_trail.Auralis {
  transform: rotate(90deg);
  left: 7px;
  top: 15px;
  z-index: 9999999;
}

.Character[data-direction="up"] .Character_trail2.Auralis {
  transform: rotate(90deg);
  left: 7px;
  top: 7px;
  z-index: 9999999;
}

.Character[data-direction="down"] .Character_trail.Auralis {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Auralis {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character_trail.Tempestara {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Tempestara {
  transform: scaleX(1);
  left: 28px;
}

.Character[data-direction="right"] .Character_trail2.Tempestara {
 opacity: 0;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Tempestara {
  transform: scaleX(-1);
  left: -13px;
}

.Character[data-direction="left"] .Character_trail2.Tempestara {
opacity: 0;
}

.Character[data-direction="up"] .Character_trail.Tempestara {
  transform: rotate(90deg);
  left: 7px;
  top: 10px;
  z-index: 9999999;
}

.Character[data-direction="up"] .Character_trail2.Tempestara {
opacity: 0;
}

.Character[data-direction="down"] .Character_trail.Tempestara {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Tempestara {
  opacity: 0;
}

.Character_trail.Sylvarion {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Sylvarion {
  transform: scaleX(1);
  left: 28px;
}

.Character[data-direction="right"] .Character_trail2.Sylvarion {
 opacity: 0;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Sylvarion {
  transform: scaleX(-1);
  left: -13px;
}

.Character[data-direction="left"] .Character_trail2.Sylvarion {
opacity: 0;
}

.Character[data-direction="up"] .Character_trail.Sylvarion {
  transform: rotate(90deg);
  left: 9px;
  top: 13px;
  z-index: 9999999;
}

.Character[data-direction="up"] .Character_trail2.Sylvarion {
opacity: 0;
}

.Character[data-direction="down"] .Character_trail.Sylvarion {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Sylvarion {
  opacity: 0;
}

.Character_trail.Quarzalis  {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Quarzalis  {
  transform: scaleX(1);
  left: 28px;
}

.Character[data-direction="right"] .Character_trail2.Quarzalis  {
 opacity: 0;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Quarzalis  {
  transform: scaleX(-1);
  left: -13px;
}

.Character[data-direction="left"] .Character_trail2.Quarzalis  {
opacity: 0;
}

.Character[data-direction="up"] .Character_trail.Quarzalis  {
  transform: rotate(90deg);
  left: 8px;
  top: 17px;
  z-index: 9999999;
}

.Character[data-direction="up"] .Character_trail2.Quarzalis  {
opacity: 0;
}

.Character[data-direction="down"] .Character_trail.Quarzalis  {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Quarzalis {
  opacity: 0;
}

.Character_trail.Zephyrium   {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Zephyrium   {
  transform: scaleX(1);
  left: 30px;
}
.Character[data-direction="right"] .Character_trail2.Zephyrium  {
 opacity: 0;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Zephyrium  {
  transform: scaleX(-1);
  left: -12px;
}

.Character[data-direction="left"] .Character_trail2.Zephyrium  {
opacity: 0;
}

.Character[data-direction="up"] .Character_trail.Zephyrium  {
  transform: rotate(90deg);
  left: 10px;
  top: 10px;
  z-index: 9999999;
  background: url("images/turbina2.gif") no-repeat center center;
}

.Character[data-direction="up"] .Character_trail2.Zephyrium  {
opacity: 0;
}

.Character[data-direction="down"] .Character_trail.Zephyrium  {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Zephyrium {
  opacity: 0;
}

.Character_trail.Terranova  {
  position: absolute;
  top: 2px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail.Terranova {
  transform: scaleX(1);
  left: 30px;
}
.Character[data-direction="right"] .Character_trail2.Terranova {
 opacity: 0;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail.Terranova {
  transform: scaleX(-1);
  left: -12px;
}

.Character[data-direction="left"] .Character_trail2.Terranova {
opacity: 0;
}

.Character[data-direction="up"] .Character_trail.Terranova {
  transform: rotate(90deg);
  left: 10px;
  top: 10px;
  z-index: 9999999;
  background: url("images/turbina2.gif") no-repeat center center;
}

.Character[data-direction="up"] .Character_trail2.Terranova {
opacity: 0;
}

.Character[data-direction="down"] .Character_trail.Terranova {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail2.Terranova {
  opacity: 0;
}

.Character_trail_Enemy {
  position: absolute;
  top: 1px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbinaEnemy.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail_Enemy {
  transform: scaleX(1);
  left: 11px;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail_Enemy {
  transform: scaleX(-1);
  left: -12px;
}

.Character_trail-01-2.Auralis {
  position: absolute;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  z-index: 9999999;
}

.Character_trail-01.Auralis {
  position: absolute;
  top: 5px;  /* ajuste conforme seu sprite */
  left: 15px;
  width: 16px;
  height: 16px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  transform: scaleX(1); /* padrão */
}

.Character[data-direction="right"] .Character_trail-01.Auralis {
  transform: scaleX(1);
  left: 28px;
}

.Character[data-direction="right"] .Character_trail-01-2.Auralis {
  transform: scaleX(1);
  left: 28px;
  top: 0px;
}

/* Quando nave olhar pra esquerda → espelha */
.Character[data-direction="left"] .Character_trail-01.Auralis {
  transform: scaleX(-1);
  left: -13px;
}

.Character[data-direction="left"] .Character_trail-01-2.Auralis {
  transform: scaleX(-1);
  left: -13px;
  top: 0px;
}

.Character[data-direction="up"] .Character_trail-01.Auralis {
  transform: rotate(90deg);
  left: 7px;
  top: 15px;
  z-index: 9999999;
}

.Character[data-direction="up"] .Character_trail-01-2.Auralis {
  transform: rotate(90deg);
  left: 7px;
  top: 7px;
  z-index: 9999999;
}

.Character[data-direction="down"] .Character_trail-01.Auralis {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character[data-direction="down"] .Character_trail-01-2.Auralis {
  transform: rotate(-90deg);
  opacity: 0;
}

.Character_trail-01,
.Character_trail-01-2 {
  position: absolute;
  width: 12px;
  height: 28px;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.Character_trail-01 {
  background: radial-gradient(circle, rgba(0,255,255,0.6), transparent);
}

.Character_trail-01-2 {
  background: radial-gradient(circle, rgba(0,100,255,0.4), transparent);
}

/* Direções */
.trail-left  { transform: translateX(-50%) rotate(180deg); }
.trail-right { transform: translateX(-50%) rotate(0deg); }
.trail-up    { transform: translateX(-50%) rotate(90deg); }
.trail-down  { transform: translateX(-50%) rotate(-90deg); }


.Character_fire {
  position: absolute;
  top: -30px;   /* ajuste para alinhar ao bot */
  left: -18px;
  width: 50px;
  height: 50px;
  background: url("images/burn.gif") no-repeat center center;
  background-size: contain;
  display: none;         /* começa escondido */
  pointer-events: none;  /* não atrapalha cliques */
  z-index: -500;
  opacity: 85%;            /* fica acima do bot */
}

.Character_plant {
  position: absolute;
  top: -8px;    /* ajuste conforme o tamanho da animação */
  left: -8px;
  width: 40px;  /* tamanho dos frames do efeito Plant */
  height: 40px;
  z-index: 200; /* MENOR que o player */
  pointer-events: none; /* não atrapalha clique/colisão */
}

.Character_eletric {
  position: absolute;
  top: -30px;   /* ajuste para alinhar ao bot */
  left: -18px;
  width: 50px;
  height: 50px;
  background: url("images/raio.gif") no-repeat center center;
  background-size: contain;
  display: none;         /* começa escondido */
  pointer-events: none;  /* não atrapalha cliques */
  z-index: -500;
  opacity: 85%;            /* fica acima do bot */
}

#space, #planet-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
}

#space, #marte-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
}

#space {
  z-index: 0; /* fundo */
}

#planet-layer {
  z-index: 1; /* planeta acima da nebulosa */
}

#marte-layer {
  z-index: 2; /* marte acima do planeta */
}

#space {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: black;
}

canvas#space {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: black;
  pointer-events: none;
}

#space, #game-container {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#game-container {
  position: relative;
  z-index: 9999999; /* acima do fundo */
}

#game-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  pointer-events: none;
}

.Character_wind {
  position: absolute;
  top: 0px;   /* ajuste para alinhar ao bot */
  left: -15px;
  width: 50px;
  height: 50px;
  background: url("images/ciclone.gif") no-repeat center center;
  background-size: contain;
  display: none;         /* começa escondido */
  pointer-events: none;  /* não atrapalha cliques */
  z-index: +10000;
  opacity: 85%;            /* fica acima do bot */
}

.Character_sprite_Enemy.on-plant {
  animation: glowPlant 1s infinite alternate;
}

.Character[data-color="Tempestara"].glow-plant .Character_sprite {
  animation: glowPlant 1s infinite alternate;
}

.debug-box {
  position: absolute;
  border: 2px dashed red;   /* colisor do player */
  pointer-events: none;
  z-index: 99999;
}

.debug-box-coin {
  position: absolute;
  border: 2px dashed yellow; /* colisor da moeda */
  pointer-events: none;
  z-index: 99999;
}


.Character-01 { overflow: visible !important; }

.Character_trail-01,
.Character_trail-01-2 {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 12px;
  height: 35px;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease;
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

.Character_trail-01 {
  background: radial-gradient(circle, rgba(0,255,255,0.6), transparent);
}
.Character_trail-01-2 {
  background: radial-gradient(circle, rgba(0,100,255,0.4), transparent);
}

/* ============================================================
   CONTROLES MOBILE – só aparecem com a classe .is-mobile
   ============================================================ */

/* Esconde por padrão em qualquer dispositivo */
.joystick-container-01,
.attack-button-01,
.eject-button-01 {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Quando a classe .is-mobile estiver no <body>, exibe os controles */
body.is-mobile .joystick-container-01,
body.is-mobile .attack-button-01,
body.is-mobile .eject-button-01 {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ajustes específicos para mobile (opcional) */
body.is-mobile .joystick-container-01 {
  position: fixed !important;
  bottom: 30px !important;
  left: 20px !important;
  z-index: 999999 !important;
  width: 120px !important;
  height: 120px !important;
}

body.is-mobile #joystick-zone-01 {
  width: 120px !important;
  height: 120px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  touch-action: none !important;
  pointer-events: auto !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}

body.is-mobile .attack-button-01 {
  position: fixed !important;
  bottom: 40px !important;
  right: 20px !important;
  width: 80px !important;
  height: 80px !important;
  background-image: url(images/ataque.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  z-index: 999999 !important;
  left: auto !important;
  top: auto !important;
}

/* 🔥 BOTÃO DE EJETAR (mobile) — mesma ação da tecla 'E' no PC (ver
   EJECT_KEYS em 01.js), acessível por toque. Ancorado ao botão de
   atirar (não a um valor "no chute"): a base de referência é a MESMA
   caixa do .attack-button-01 logo acima (bottom:40px / right:20px /
   width:80px) — por isso o cálculo abaixo é exato em qualquer
   resolução/orientação, já que o botão de atirar também usa essa
   mesma posição fixa independente de tela.
     right: 20px (right do ataque) + 80px (largura do ataque)
          + 12px (respiro entre os dois) = 112px
   `bottom: 40px` igual ao do ataque garante que as bases dos dois
   círculos fiquem perfeitamente alinhadas, mesmo com alturas
   diferentes (64px aqui vs 80px do ataque). */
body.is-mobile .eject-button-01 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  position: fixed !important;
  bottom: 40px !important;
  right: 112px !important;
  left: auto !important;
  top: auto !important;

  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-family: 'VT323', monospace !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  z-index: 999999 !important;
  transition: background-color 0.1s ease, transform 0.1s ease !important;
}

/* Feedback de toque — mesma ideia do .attack-button-01:active (linha
   ~3522), mas escopado a .is-mobile pra não competir em especificidade
   com a posição acima. `.is-pressed` é adicionada/removida via JS pra
   cobrir touchstart/touchend, já que :active nem sempre é confiável
   em todos os navegadores mobile durante toques rápidos. */
body.is-mobile .eject-button-01:active,
body.is-mobile .eject-button-01.is-pressed {
  background-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(0.9) !important;
}

/* Tabelas do Modo Sistema Solar */
  .cw-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; }
  .cw-table th, .cw-table td { border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; text-align: left; }
  .cw-table th { background: rgba(68, 221, 255, 0.12); color: #171f20; }
  .cw-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }

  /* ====== Seções novas da Home ====== */
  .cw-section { margin: 50px 0; }
  .cw-section-title {
    font-family: 'Press Start 2P', monospace;
    color: #44ddff;
    font-size: 1.1em;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .cw-section-sub {
    text-align: center;
    color: #4a5a72;
    font-size: 0.98em;
    max-width: 760px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
  }

  /* Grid de naves */
  .cw-ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    margin-top: 20px;
  }
  .cw-ship-card {
    background: linear-gradient(160deg, rgba(68,221,255,0.08), rgba(0,0,0,0.35));
    border: 1px solid rgba(68,221,255,0.25);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .cw-ship-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(68,221,255,0.25);
  }
  .cw-ship-card img {
    width: 90px; height: 90px; object-fit: contain;
    image-rendering: pixelated;
    margin-bottom: 8px;
  }
  .cw-ship-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7em;
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
  }
  .cw-ship-elem { font-size: 0.9em; color: #ffd166; }
  .cw-ship-stats { font-size: 0.78em; color: #5c6b82; margin-top: 6px; line-height: 1.5; }

  /* Grid de cristais */
  .cw-crystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 20px;
  }
  .cw-crystal-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: transform .2s ease;
  }
  .cw-crystal-card:hover { transform: scale(1.03); }
  .cw-crystal-card img {
    width: 64px; height: 64px; object-fit: contain;
    image-rendering: pixelated; margin-bottom: 6px;
  }
  .cw-crystal-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.62em; color: #fff; display: block; margin-bottom: 4px;
  }
  .cw-crystal-desc { font-size: 0.82em; color: #556478; line-height: 1.45; }
  .cw-crystal-raro { border-color: rgba(255,209,102,0.45); box-shadow: 0 0 12px rgba(255,209,102,0.12) inset; }

  /* Destaques / features */
  .cw-highlight-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  .cw-highlight {
    background: linear-gradient(160deg, rgba(255,193,7,0.08), rgba(0,0,0,0.3));
    border: 1px solid rgba(255,193,7,0.25);
    border-radius: 10px;
    padding: 16px;
  }
  .cw-highlight h4 {
    margin: 0 0 8px 0; color: #ffd166; font-family: 'Press Start 2P', monospace; font-size: 0.72em;
  }
  .cw-highlight p { margin: 0; font-size: 0.92em; line-height: 1.55; color: #3f4d63; }

  /* Banners de imagem (para você colar as artes) */
  .cw-banner {
    display: block; margin: 26px auto; max-width: 100%;
    border-radius: 8px; text-align: center;
  }
  .cw-banner img { max-width: 100%; height: auto; border-radius: 8px; }
  .cw-banner figcaption {
    font-size: 0.85em; color: #5c6b82; margin-top: 6px;
  }

  /* =========================================================
   FIX dos textos dos cards de CRISTAL e de NAVE
   Cole no FINAL de styles.css
   ========================================================= */

/* 1) Desfaz o text-indent/padding herdados de .page-content p */
.cw-crystal-desc,
.cw-ship-stats {
  padding: 0 !important;
  text-indent: 0 !important;
  text-align: center !important;
  font-size: 0.82em !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 0 !important;
}

/* 2) Nome do cristal — precisa de contraste */
.cw-crystal-name {
  color: #0b2c66 !important;   /* azul-marinho sobre o card claro */
  font-size: 0.7em !important; /* um pouco maior, estava em 0.62em */
  letter-spacing: 0 !important;
}

/* 3) Descrição do cristal — cinza escuro legível */
.cw-crystal-desc {
  color: #16233a !important;
}

/* 4) Nome da nave — mesmo problema de branco sobre claro */
.cw-ship-name {
  color: #0b2c66 !important;
  font-size: 0.72em !important;
}

/* 5) Estatísticas da nave */
.cw-ship-stats {
  color: #16233a !important;
}

/* 🔥 Telas muito estreitas (ex: celulares pequenos em portrait, <360px):
   os dois botões (80px + 64px + respiros) mais o joystick (120px) podem
   apertar a largura disponível. Reduz um pouco o botão de ejetar e o
   aproxima do de atirar, mantendo a mesma lógica de ancoragem acima. */
@media screen and (max-width: 360px) {
  body.is-mobile .eject-button-01 {
    right: 104px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
}


@keyframes glowPlant {
  from {
    filter: drop-shadow(0 0 5px #00ff55) drop-shadow(0 0 10px #00cc44);
  }
  to {
    filter: drop-shadow(0 0 15px #00ff55) drop-shadow(0 0 25px #00cc44);
  }
}


@keyframes pulseGlow {
  from { filter: brightness(1) drop-shadow(0 0 8px orange); }
  to   { filter: brightness(1.4) drop-shadow(0 0 16px red); }
}


/* ❄ Efeito de gelo */
.Character_sprite_Enemy.on-ice {
  filter: drop-shadow(0 0 8px rgb(175, 175, 235)) brightness(1.2) saturate(1.5);
  animation: iceAnim 0.6s infinite alternate;
}

.Character_sprite_Enemy.on-water {
  animation: waterSplash 0.8s ease-out forwards, shimmer 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgb(100, 200, 255)) brightness(1.1) saturate(1.3);
  transform-origin: center;
}

@keyframes waterSplash {
  0%   { transform: scale(1) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 6px rgb(80, 180, 0)) brightness(1.05) saturate(5.2);
}
  25%  { transform: scale(1.3) rotate(12deg); opacity: 0.9; filter: drop-shadow(0 0 6px rgb(80, 0, 100)) brightness(1.05) saturate(7.2);
}
  50%  { transform: scale(0.85) rotate(-12deg); opacity: 0.8; filter: drop-shadow(0 0 6px rgb(80, 180, 50)) brightness(1.05) saturate(1.2);
}
  75%  { transform: scale(1.1) rotate(6deg); opacity: 0.9; filter: drop-shadow(0 0 6px rgb(80, 180, 25)) brightness(1.05) saturate(7.2);
}
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 6px rgb(10, 0, 25)) brightness(1.05) saturate(10.2);
}
}

.Character_sprite_Enemy.on-fire {
  filter: drop-shadow(0 0 8px rgb(255, 85, 0)) brightness(1.3) saturate(2);
  animation: fireAnim 0.4s infinite alternate;
}
@keyframes fireAnim {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 6px rgb(255, 100, 0)) brightness(1.2) saturate(1.8);
  }
  100% {
    transform: scale(1.05) rotate(1deg);
    filter: drop-shadow(0 0 10px rgb(255, 50, 0)) brightness(1.4) saturate(2.2);
  }
}

.Character_sprite_Enemy.on-eletric {
  filter: drop-shadow(0 0 8px rgb(255, 85, 0)) brightness(1.3) saturate(2);
  animation: glowEletric 1s infinite alternate;
}

@keyframes shimmer {
  0%   { filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.6)); }
  50%  { filter: drop-shadow(0 0 14px rgba(0, 220, 255, 1)); }
  100% { filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.6)); }
}



@keyframes iceAnim {
  from { filter: drop-shadow(0 0 8px rgb(123, 123, 165)) brightness(2.2); }
  to   { filter: drop-shadow(0 0 15px #0ff) brightness(5.5); }
}


@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* Efeito de brilho gelo na nave Auralis */
.Character[data-color="Auralis"].glow-ice .Character_sprite {
  animation: glowIce 1s infinite alternate;
}

@keyframes glowIce {
  from {
    filter: drop-shadow(0 0 5px #00faff) drop-shadow(0 0 10px #00d9ff);
  }
  to {
    filter: drop-shadow(0 0 15px #00faff) drop-shadow(0 0 25px #00d9ff);
  }
}


/* Sylvarion ⚡ Eletric */
.Character[data-color="Sylvarion"].glow-eletric .Character_sprite {
  animation: glowEletric 1s infinite alternate;
}
@keyframes glowEletric {
  from { filter: drop-shadow(0 0 5px #fff700) drop-shadow(0 0 10px #ffea00); }
  to   { filter: drop-shadow(0 0 15px #fff700) drop-shadow(0 0 25px #ffea00); }
}

/* Quarzalis 💨 Wind */
.Character[data-color="Quarzalis"].glow-wind .Character_sprite {
  animation: glowWind 1s infinite alternate;
}
@keyframes glowWind {
  from { filter: drop-shadow(0 0 5px #00ffe5) drop-shadow(0 0 10px #00d9ff); }
  to   { filter: drop-shadow(0 0 15px #00ffe5) drop-shadow(0 0 25px #00d9ff); }
}

/* Zephyrium 💧 Water */
.Character[data-color="Zephyrium"].glow-water .Character_sprite {
  animation: glowWater 1s infinite alternate;
}
@keyframes glowWater {
  from { filter: drop-shadow(0 0 5px #0077ff) drop-shadow(0 0 10px #3399ff); }
  to   { filter: drop-shadow(0 0 15px #0077ff) drop-shadow(0 0 25px #3399ff); }
}

/* Terranova 🔥 Fire */
.Character[data-color="Terranova"].glow-fire .Character_sprite {
  animation: glowFire 1s infinite alternate;
}
@keyframes glowFire {
  from { filter: drop-shadow(0 0 5px #ff5500) drop-shadow(0 0 10px #ff2200); }
  to   { filter: drop-shadow(0 0 15px #ff5500) drop-shadow(0 0 25px #ff2200); }
}


.Character_sprite_Enemy.on-wind {
  animation: windSpin 7s steps(1, end) forwards;
  transform-origin: center;
  perspective: 500px; /* Dá profundidade ao giro */
}

/* Animação de rotação horizontal e vertical */
@keyframes windSpin {
  0% {
    transform: rotateX(180deg) rotateY(0deg);
    filter: drop-shadow(0 0 6px rgb(0, 255, 255)) brightness(1.5);
  }
  25% {
    transform: rotateX(150deg) rotateY(0deg);
    filter: drop-shadow(0 0 6px rgb(0, 100, 255)) brightness(0.8);
  }
  50% {
    transform: rotateX(100deg) rotateY(0deg);
    filter: drop-shadow(0 0 6px rgb(255, 255, 225)) brightness(2);
  }
  75% {
    transform: rotateX(120deg) rotateY(0deg);
    filter: drop-shadow(0 0 6px rgb(100, 100, 100)) brightness(1);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
    filter: drop-shadow(0 0 6px rgb(100, 255, 255)) brightness(0.5);
  }
}

.explosao-especial {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255,255,0,0.8) 0%, rgba(255,0,0,0.3) 60%, transparent 100%);
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  animation: explosaoEspecial 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 999;
}

@keyframes explosaoEspecial {
  0% { transform: scale(0); opacity: 1; }
  70% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.crystal-trail {
  position: absolute;
  width: 42px;
  height: 42px;
  background: radial-gradient(rgba(0, 230, 255, 0.9), rgba(0, 150, 255, 0.3), rgba(0, 0, 0, 0));
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.95;
  pointer-events: none;
  animation: cristalFade 0.35s ease-out forwards;
}

@keyframes cristalFade {
  0% {
    transform: scale(0.7) rotate(0deg);
    opacity: 1;
    filter: blur(2px);
  }
  50% {
    transform: scale(1.2) rotate(30deg);
    opacity: 0.7;
    filter: blur(5px);
  }
  100% {
    transform: scale(0.6) rotate(-20deg);
    opacity: 0;
    filter: blur(7px);
  }
}


/* Mobile Styles */
@media screen and (orientation: portrait) and (max-width: 900px) {

.password-box {
  position: fixed;
  top: 0; left: 0;
  width:100vw; height:100vh;
  background: rgba(0,0,0,.5);
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:25px;
  z-index: 99999 !important;
}

.cristais-opcao span {
  font-size:25px;
  cursor:pointer;
  margin:10px;
}

.senha-slot {
  font-size:35px;
}

  #space, #planet-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
}

#space, #marte-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
}

#space {
  z-index: 0; /* fundo */
}

#planet-layer {
  z-index: 1; /* planeta acima da nebulosa */
}

#marte-layer {
  z-index: 2; /* marte acima do planeta */
}

#space {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: black;
}

canvas#space {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: black;
  pointer-events: none;
}

#space, #game-container {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


  #logo {
  position: relative;
  width:  50px;
}

  #tela-art {
  flex: 0 0 280px; /* largura fixa para o menu */
  position: fixed;
  inset: 0; /* ocupa toda a área */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  top: 0;
  left: auto;
  transform: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  z-index: 200;
  width: clamp(260px, 10%, 400px); /* min 260px, max 400px */
  height: auto;
  min-height: 250px; /* reserva espaço antes da imagem carregar */
}

 #hud {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  display: none;
  align-items: center;
  column-gap: 0px; /* reduz a distância entre descrição e valor */
  flex-direction: column;
  gap: 1.3px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 2px;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
  z-index: 999;
  width: 40%;
  height: 13%;
}

.hud-value {
  font-size: 6px;
  text-align: right;  
}

 #hud-01 {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  display: none;
  align-items: center;
  column-gap: 0px; /* reduz a distância entre descrição e valor */
  flex-direction: column;
  gap: 0.3px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 2px;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
  z-index: 999;
  width: 40%;
  height: auto;
}

.hud-value-01 {
  font-size: 6px;
  text-align: right;  
}

#telaInicio {
  position: relative;
  top: 25vh;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px;
  border-radius: 12px;
  text-align: center;
  z-index: 1000;
  width: 100%;
  max-height: 30vh;
  font-size: 14px;
  margin-bottom: 40px;
}

#telaInicio h1, #telaInicio h2, #telaInicio p {
    text-align: center;
    color: white;
    font-size: clamp(12px, 2vw, 152x); /* mínimo 16px, escala até 32px */
}

.player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  padding: 5px 0;
  gap: 5px;
  text-align: center;
  top: 80px;
  left: 210px;
}

  .player-info h1,
  .player-info p {
    position: static;
    font-size: 12px;
    text-align: center;
    margin: 4px 0;
    color: #001F3F;
  }

#telaInicio-start {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.55);
  color: white;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  z-index: 300;
  width: 60%;
  display: flex;
}

figure{
  text-align: center;
  text-align: center; 
  padding: 10px; 
  border-radius: 10px;
}

figure img {
 width: 250px;
 border-radius: 8px;
}

  html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(
    180deg, 
    #e8f1ff 0%,   /* azul gelo, lembra cristal */
    #c9d6ff 40%,  /* lilás suave */
    #a3bffa 70%,  /* azul claro */
    #6d83f2 100%  /* azul mais forte, dá profundidade */
  );
  font-family: 'VT323', monospace;
  display: block;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antigo */
  user-select: none;
  color: white;
  font-size: 14px;
}

  button{
  padding: 0 0.5em;
  background: #42e2df; 
  border: 0;
  border-bottom: 2px solid #16bdc0;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 18px;
  height: 44px;
  border-radius: 4px;
  outline: 0;
}

input[type="text"] {
  border: 3px solid #16bdc0;
  text-transform: none;
  font-family: 'VT323', monospace;
  font-weight: bold;
  font-size: 5px;
  height: 25px;
  border-radius: 4px;
  outline: 0;
  background-color: rgba(66, 226, 223, 0.3);
  color: white;
  position: relative;
}

.game-container {
  width: 100vw !important;
  max-width: 480px !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  margin: 20px auto !important;
  z-index: 100; /* menor que o player-info */
}

.game-container-01 {
  display: flex;
  position: relative;
  width: 10%;
  height: 50%;
  z-index: 1000; /* acima do fundo */
}

  #reset-button{
  opacity: 0%;
}

.directional-buttons {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 999;
}

  .directional-buttons .middle-row {
    display: flex;
    gap: 8px;
  }

  .directional-buttons button {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  /* Botões com imagens */
  .btn-dir-up {
    background-image: url(images/up-removebg-preview.png);
  }
  .btn-dir-down {
    background-image: url(images/down-removebg-preview.png);
  }
  .btn-dir-left {
    background-image: url(images/left-removebg-preview.png);
  }
  .btn-dir-right {
    background-image: url(images/right-removebg-preview.png);
  }
  .btn-red {
    background-image: url(images/ataquw-removebg-preview.png);
  }

.page-content {
  position: relative;        /* em vez de absolute */
  max-width: 100%;
  margin: 0 auto;   /* espaço no topo p/ menu fixo e embaixo p/ footer */
  padding: 16px;
  box-sizing: border-box;

  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,240,255,0.9));
  border: 2px solid rgba(200,220,255,0.8);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.5);

  color: #001F3F;
  font: bold 'VT323', monospace;
  margin-top: clamp(70px, 24vw, 130px) !important; /* espaço extra: o menu quebra em várias linhas no retrato */
  margin-bottom: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

  .page-content h1 {
    font-size: clamp(20px, 6vw, 28px);
  }

  .page-content h2 {
    font-size: clamp(18px, 5vw, 22px);
  }

  .page-content p,
  .page-content ul {
  padding-left: 8px;   /* reduzindo a margem lateral */
  padding-right: 8px;
  font-size: clamp(15px, 4vw, 18px);
  text-align: justify;
  text-indent: clamp(10px, 4vw, 20px);    /* recuo menor na primeira linha */
}

.page-content img {
  max-width: 100%;
  height: auto;
}

  .site-footer {
    background-color: #001F3F;
    color: #ffffff;
    text-align: center;
    padding: 4px 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 10px;
  }

.site-footer a { color: #ffffff; text-decoration: none; margin: 0 12px;   font-size: 12px;}

.tutorial-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 25, 0.9);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.tutorial-box {
  max-width: 90%;
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: white;
}

.tutorial-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.tutorial-btn {
  padding: 0px 5px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
}

.tutorial-btn.skip {
  background-color: #ff5555;
  color: white;
}

.tutorial-btn {
  background-color: #00f7ff;
  color: black;
}

/* joystick - visível por padrão (ajuste custom depois se quiser) */
#joystick-zone{
  -webkit-touch-callout: none;
  position: relative;
  left: 5px;
  top: 80%;
  width: 120px;
  height: 120px;
  display: flex;
  opacity: 1;
  background: rgba(255,255,255,0.04); /* visível para testes */
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 99999;   /* 🔥 garante que fica acima do canvas */
}

#joystick-zone-01{
  position: absolute;
  left: 0px;
  width: 120px;
  height: 120px;
  display: flex;
  opacity: 1;
  background:rgba(150, 230, 210, 0.4); /* visível para testes */
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 999999 !important;   /* 🔥 garante que fica acima do canvas */
  bottom: 20px;
  -webkit-touch-callout: none;
  pointer-events: auto; /* garante que toques passem para o joystick */

}

.joystick-container {
  position: absolute;
  top: 80%;
  left: 5%;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  display: flex !important;
  opacity: 0%;
}

.joystick-container-01 {
  position: fixed;
  top: 85%;
  left: -5%;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  display: flex !important;
  opacity: 0%;
  color: cyan;
}

.attack-button {
  background-color: rgba(255, 255, 255, 0); /* fundo transparente */;
  top: -125px;
  left: 250px;
  display: block !important; /* garantir que apareça */
  width: 133px;
  height: 133px; /* altura do botão */
  background-image: url(images/ataque.png);
  background-repeat: no-repeat;
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto;
  border: none;
}

.attack-button-01 {
  background-color: rgba(255, 255, 255, 0); /* fundo transparente */;
  top: 0%;
  left: 225%;
  display: block !important; /* garantir que apareça */
  width: 133px;
  height: 133px; /* altura do botão */
  background-image: url(images/ataque.png);
  background-repeat: no-repeat;
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto;
  border: none;
}

.attack-button-01:active {
  transform: scale(0.9);
  filter: brightness(1.2);
}
  /* Cabeçalho */
  .top-menu {
    display: flex;
    flex-wrap: wrap;       /* permite quebrar de linha se não couber */
    justify-content: center;
    align-items: center;
    gap: 8px;              /* espaço entre os links */
    padding: 6px;
    height: auto;
  }

  .top-menu a {
    font-size: 13px;       /* reduzido pra caber */
    padding: 4px 6px;      /* padding menor */
    margin: 0;
    display: inline-block;
    white-space: nowrap;   /* evita quebra dentro do link */
  }

.logo {
  position: relative;
  width: 50px; /* largura fixa */
}

.logo-menu {
  position: absolute;
  width: 30px; /* largura fixa */
  left: 20px;
  top: 10px;
  display: none;
}

.site-footer {
  background-color: #001F3F;
  color: #ffffff;
  text-align: center;
  padding: 0px 0;   /* controla altura pelo padding */
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  font-size: 10px;
}

.site-footer a:hover { text-decoration: underline; }
/* Layout para páginas de conteúdo (evita conflito com index/jogo) */
body.content-page {
  display: flex;
  flex-direction: column;
}

/* Área principal rola e respeita header/footer fixos */
body.content-page .page-content {
  flex: 1 1 auto;
  max-width: 900px;
  width: calc(100% - 24px);
  margin: 96px auto 0; /* espaço p/ menu fixo */
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: #1f2937;
  line-height: 1.7;
  font-size: 18px;
  overflow: auto; /* rolagem apenas do conteúdo */
  max-height: calc(100vh - 96px - 64px); /* viewport - menu - footer */
}

/* Títulos e listas */
body.content-page .page-content h1 { color: #2a65ff; font-size: 30px; margin: 0 0 16px; }
body.content-page .page-content h2 { font-size: 22px; margin: 20px 0 10px; }
body.content-page .page-content ul { padding-left: 22px; }
body.content-page .page-content p { margin: 12px 0; }

.conteudo-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px; /* espaço para o menu fixo */
  gap: 20px; /* espaço entre jogo e texto */
}

#table-ranking{ 
      border-collapse: collapse;
      width: 100%;
      background-color: #ffffffcc;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      color: #001F3F;
    }

#table-ranking th, 
#table-ranking td {   
      padding: 4px 6px;  /* menos espaço interno */
      border-bottom: 2px solid #ccc;
      text-align: center;
      word-break: break-word; /* quebra palavras longas */
      font-size: 15px;
    }

#table-ranking th {
      background-color: #eee;
      font-weight: bold;
      padding-left: 0px;
    }

#table-ranking tr:hover {
      background-color: rgba(197, 216, 255, 0.4);
    }

canvas {
  pointer-events: none !important;
  touch-action: none;
}

/*------------------------------------------------------------------------------------*/

#table-history {
  border-collapse: collapse;
  width: 100%; /* ocupa largura toda */
  background-color: #ffffffcc;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#table-history th,
#table-history td {
  padding: 4px 6px;  /* menos espaço interno */
  border-bottom: 2px solid #ccc;
  text-align: center;
  word-break: break-word; /* quebra palavras longas */
}

#table-history th {
  background-color: #eee;
  font-weight: bold;
  font-size: 15px;
}

#table-history td {
  font-size: 15px;
}

/* Faz a tabela rolar horizontalmente se for muito larga */
#table-history {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

#tutorial-ranking{
      left: -50px;
      position: relative;
    }

#seletor-nave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
}

#preview-nave {
  width: 26px;
  height: 26px;
  background: url('images/characters-.png') no-repeat center center;
  background-repeat: no-repeat;
  background-size: auto;
  transform: scale(2) scaleX(-1);
  image-rendering: pixelated;
  overflow: hidden;
}

#prev-nave,
#next-nave {
  width: 32px;   /* largura do botão */
  height: 32px;  /* altura do botão */
  background-size: contain; /* garante que a seta encaixe */
  background-position: center;
  background-repeat: no-repeat;
  padding: 0; /* remove padding que bagunça */
}

#exit-fullscreen {
  position: relative;
  left: 88%;
  width: 40px;
  height: 40px;
  background: url('images/exit-btnOri.png') no-repeat center center;
  background-size: contain;
  border: none;
  z-index: 10000;
  pointer-events: auto;
  display: none;
}

#exit-fullscreen-01 {
  position: fixed;
  top: 0%;
  left: 95%;
  width: 5px;
  height: 20px;
  background: url('images/exit-btnOri.png') no-repeat center center;
  background-size: 20px 20px;
  border: none;
  display: flex;
}

#cronometro{
      position:absolute; 
      font-size: 10px; 
      font-weight: bold; 
      color: white; 
      font-family: 'VT323', monospace; 
      background-color: rgba(0,0,0,0.6); 
      padding: 0px 2px;
      padding-left: 4px; 
      border-radius: 4px; 
      width: 25%; 
      top: 0px; 
      display: none;
      height: 5%;
    }

.menu-botoes button {
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;
  width: 100px;   /* um pouco maior para caber o texto */
  height: 5px;   /* altura padrão */
  text-align: center;

  font-size: 15px; /* fica mais visível */
  transition: transform 0.15s ease, background 0.3s ease;
  display: flex;               /* 🔹 habilita flexbox */
  align-items: center;         /* 🔹 centraliza vertical */
  justify-content: center;     /* 🔹 centraliza horizontal */
}

/* Efeito hover bonito */
.menu-botoes button:hover {
  background: linear-gradient(145deg, #d1ddf5, #ffffff);
  transform: scale(1.05);
}

/* Efeito clique */
.menu-botoes button:active {
  transform: scale(0.97);
}

#player-name {
  width: 70%;
  padding: 10px 14px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  text-align: center;

  background: linear-gradient(145deg, #f0f7ff, #dbe7ff);
  border: 2px solid #9bb8ff;
  border-radius: 8px;

  color: #001F3F;
  outline: none;
  transition: all 0.25s ease-in-out;
}

#intro-container {
  position: fixed;           /* fica sempre visível no centro */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* move pro centro exato */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #001F3F; /* opcional: fundo escuro */
  padding: 20px;
  border-radius: 10px;
  height: 70%;
  width: 90%;
}

#intro-container video {
  max-width: 90%;   /* responsivo */
  max-height: 100vh; /* não ultrapassa a tela */
  border-radius: 4px;
  padding: 20px;
}

#intro-container button {
  margin-top: 20px; /* espaço abaixo do vídeo */
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: clamp(12px, 1vw, 12px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 0px 0px;
  width: clamp(100px, 50%, 100px);
  text-align: center;
  top: 15px;
  right: 10px;
  height: 25px;
}

.Character_trail-01,
.Character_trail-01-2 {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("images/turbina.gif") no-repeat center center;
  background-size: contain;
  display: none; /* começa invisível */
  z-index: 9999999;
}

}

/* O landscape começa na linha 3535-------------------------------------------------------------------------landascape ----------------*/

@media screen and (orientation: landscape) and (max-width: 900px) {

  #intro-container {
  position: fixed;           /* fica sempre visível no centro */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* move pro centro exato */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #001F3F; /* opcional: fundo escuro */
  padding: 20px;
  border-radius: 10px;
  width: 95% !important;
  height: 95% !important;
}

#intro-container video {
    max-width: 180% !important;
    max-height: 90vh !important;
    padding: 0 !important;
}

#intro-container button {
  margin-top: 20px; /* espaço abaixo do vídeo */
  background: linear-gradient(145deg, #b2bcce, #e6f0ff);
  border: 2px solid #c5d8ff;
  border-radius: 14px;
  cursor: pointer;

  font-family: 'VT323', monospace;
  font-size: clamp(12px, 1vw, 12px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #001F3F;

  padding: 0px 0px;
  width: clamp(100px, 50%, 100px);
  text-align: center;
  top: 15px;
  right: 10px;
  height: 25px;
}

  .player-info {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  padding: 5px 0;
  gap: 5px;
  text-align: center;
  top: 80px;
  left: 210px;
}

  .player-info h1,
  .player-info p {
    position: static;
    font-size: 12px;
    text-align: center;
    margin: 4px 0;
    color: #001F3F;
  }

.game-container {
  position: relative;
  image-rendering: pixelated;
  max-width: none !important;
  aspect-ratio: 16/9 !important;
  margin: auto !important;
  touch-action: none;
  transform-origin: center center;
  overflow: hidden;
  top: 30%;
  left: 50%;
}

#game-inner {
  transform-origin: center center;
  will-change: transform;
}

.joystick-container {
  position: fixed;
  top: 60%;
  left: 5%;
  flex-direction: column;
  align-items: center;
  display: flex;
  opacity: 100%;
  pointer-events: auto !important; /* ← reativa toques neles */
  z-index: 999999 !important; /* ← sempre acima do game-container */
}

.joystick-container-01 {
  position: fixed;
  top: 60%;
  left: 0%;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  display: flex !important;
  opacity: 0%;
  color: cyan;
}

#joystick-zone{
  position: absolute;
  left: 0px;
  width: 120px;
  height: 120px;
  display: flex;
  opacity: 1;
  background: rgba(255,255,255,0.04); /* visível para testes */
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 99999;   /* 🔥 garante que fica acima do canvas */
}

#joystick-zone-01{
  position: absolute;
  left: 0px;
  width: 120px;
  height: 120px;
  display: flex;
  opacity: 1;
  background:rgba(150, 230, 210, 0.4); /* visível para testes */
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 99999;   /* 🔥 garante que fica acima do canvas */
  bottom: 20px;
  -webkit-touch-callout: none;
  pointer-events: auto; /* garante que toques passem para o joystick */
}

.attack-button {
  background-color: rgba(255, 255, 255, 0); /* fundo transparente */;
  left: 650px;
  top: -20px;
  display: block !important; /* garantir que apareça */
  width: 133px;
  height: 133px; /* altura do botão */
  background-image: url(images/ataque.png);
  background-repeat: no-repeat;
  position: relative;
  border: none;
  pointer-events: auto !important; /* ← reativa toques neles */
  z-index: 999999 !important; /* ← sempre acima do game-container */
}

.attack-button-01 {
  background-color: rgba(255, 255, 255, 0); /* fundo transparente */;
  top: 36%;
  left: 48%;
  display: flex !important; /* garantir que apareça */
  width: 133px;
  height: 133px; /* altura do botão */
  background-image: url(images/ataque.png);
  background-repeat: no-repeat;
  position: fixed;
  z-index: 9999999 !important;
  pointer-events: auto;
  border: none;
  }

 #hud {
  position: fixed;
  top: 0.1rem;
  left: 0.1rem;
  display: none;
  align-items: center;
  column-gap: 0px; /* reduz a distância entre descrição e valor */
  flex-direction: column;
  gap: 1.3px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 2px;
  border-radius: 2px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
  z-index: 999;
  width: 18%;
  height: 30%;
}

.hud-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ separa label e valor */
  width: 100%; /* garante o espaço total */
}

/*-------------------------------------------------LADSCAPE--------------------------LADSCAPE                  LADSCAPE*/

#telaInicio {
  flex: 0 0 280px; /* largura fixa para o menu */
  position: relative; /* mantém o fluxo natural da página */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 100px auto 0px auto; /* 100px de distância do topo (ajuste conforme a altura do menu) */
  transform: none;
  background: rgba(0,0,0,0.5);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  z-index: 200;
  width: clamp(500px, 10%, 400px);
  height: auto;
  margin-bottom: 0px; /* diminui o espaço até o conteúdo abaixo */
}

#telaInicio h2{

  font-size: 10px !important;

}

#tela-art {
  flex: 0 0 280px; /* largura fixa para o menu */
  position: fixed;
  inset: 0; /* ocupa toda a área */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  top: 0 !important;
  left: auto;
  transform: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 0.5rem !important;
  border-radius: 12px;
  text-align: center;
  z-index: 200;
  width: 20% !important;
  height: auto;
  min-height: 250px; /* reserva espaço antes da imagem carregar */
}

#telaInicio h1, #telaInicio h2, #telaInicio p {
    text-align: center;
    color: white;
    font-size: clamp(18px, 4vw, 28px); /* mínimo 16px, escala até 32px */
    text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
}

/* Imagens dentro da tela de início */
#telaInicio img {
    width: 20px !important;
    height: auto !important;
    max-width: 20% !important;
}

#telaInicio-start {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 10%, 400px);
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 12px;
  text-align: center;
  z-index: 300;
  min-height: 300px; /* garante espaço para mostrar o seletor */
  gap: 1rem;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* <-- centraliza certinho */
}

#telaInicio-start h1, #telaInicio-start h2, #telaInicio-start p {
    text-align: center;
    color: white;
    font-size: clamp(18px, 4vw, 28px); /* mínimo 16px, escala até 32px */
    text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
}

/* Imagens dentro da tela de início */
#telaInicio-start img {
    max-width: 80%;
    height: auto;
}

#telaInicio-start label {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 4vw, 28px);
  color: white; /* vermelho forte */
  font-weight: bold;
  text-shadow: 0 0 5px #090627, 0 0 10px #10241a, 0 0 15px #050e21;
  margin-top: 10px;
}

#telaInicio-start button{
  width: 100px;
  height: 20px;
  border: none;
  padding-bottom: 20px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-weight: bold;
  border-radius: 4px;
  outline: 0;
  font-size: clamp(10px, 1vw, 10px);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 2px; /* espaçamento entre letras */
}

.page-content {
  position: relative;        /* em vez de absolute */
  width: 100%;
  max-width: 900px;
  margin: 0 auto;   /* espaço no topo p/ menu fixo e embaixo p/ footer */
  padding: 24px;
  box-sizing: border-box;

  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,240,255,0.9));
  border: 2px solid rgba(200,220,255,0.8);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.5);

  color: #001F3F;
  font: bold 16px/1.6 'VT323', monospace;
  margin-top: clamp(30px, 22vw, 110px) !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
}

.page-content h1 {
  font-size: clamp(18px, 4vw, 28px);
  text-align: center;
  color: #2a65ff; margin: 0 0 16px;
}

.page-content h2 {
  font-size: clamp(18px, 4vw, 28px);
  color: #001F3F;
  text-align: center;
  color: #2a65ff; margin: 0 0 16px;
}

.page-content h3 {
  font-size: clamp(18px, 4vw, 28px);
  color: #001F3F;
  text-align: center;
  color: #2a65ff; margin: 0 0 16px;
}

.page-content ul, ol, dl {
 padding-left: 30px;
 font-size: clamp(15px, 2.2vw, 20px);
 text-align: justify;
 text-indent: clamp(15px, 4vw, 50px);
}

.page-content dl {
  padding-left: 20px;
  padding-right: 20px;
  font-size: clamp(15px, 2.2vw, 20px);
  text-align: center;
  text-indent: clamp(15px, 4vw, 50px);
}

.page-content p {
  padding-left: 20px;
  padding-right: 20px;
  font-size: clamp(15px, 2.2vw, 20px);
  text-align: justify;
  text-indent: clamp(15px, 4vw, 50px);
}

.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content figure {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.content-page .page-content h1 { color: #2a65ff; font-size: clamp(22px, 5vw, 30px); margin: 0 0 16px; }
body.content-page .page-content h2 { font-size: clamp(18px, 4vw, 22px); margin: 20px 0 10px; }
body.content-page .page-content ul { padding-left: 0px; justify-content: center; }
body.content-page .page-content p { margin: 12px 0; }

html, body {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px; /* espaço pro footer fixo (ajuste conforme a altura real do footer) */
  box-sizing: border-box;
  height: auto;
  background: linear-gradient(
    180deg, 
    #e8f1ff 0%,   /* azul gelo, lembra cristal */
    #c9d6ff 40%,  /* lilás suave */
    #a3bffa 70%,  /* azul claro */
    #6d83f2 100%  /* azul mais forte, dá profundidade */
  );
  font-family: 'VT323', monospace;
  display: block;
  align-items: unset;
  justify-content: unset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;   
  user-select: none;
  color: white;
  font-size: 14px;
    overflow-x: hidden !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  display: block;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #020817;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #25d5ff, #0a6fa8);
  border-radius: 8px;
  border: 2px solid #020817;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9af1ff, #25d5ff);
}

#exit-fullscreen {
  position: relative;
  left: 95%;
  width: 40px;
  height: 40px;
  background: url('images/exit-btnOri.png') no-repeat center center;
  background-size: contain;
  border: none;
  z-index: 10000;
  pointer-events: auto;
  display: none;
}

}
/* ==========================================================================
   Seção de conteúdo da home (features, cards de artigo, CTA, roadmap)
   Essas classes existiam no HTML mas não tinham nenhum estilo definido.
   ========================================================================== */

.home-features,
.home-articles,
.home-news,
.home-cta {
  width: 100%;
  max-width: 900px;
  margin: 32px auto;
}

.home-features .container,
.home-articles .container {
  width: 100%;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.feature {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 31, 63, 0.15);
  border-radius: 12px;
  padding: 16px;
  text-indent: 0 !important;
}

.feature h3 {
  color: #001F3F;
  font-size: clamp(16px, 3vw, 20px);
  text-indent: 0;
  margin: 0 0 8px;
}

.feature p {
  text-indent: 0 !important;
  font-size: clamp(14px, 2vw, 17px);
}

.feature img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.section-intro {
  text-indent: 0 !important;
}

.roadmap-list {
  text-indent: 0 !important;
  padding-left: 20px !important;
}

.roadmap-list li {
  margin-bottom: 10px;
}

.home-cta {
  text-align: center;
  padding: 24px 16px;
  background: rgba(0, 31, 63, 0.06);
  border-radius: 12px;
}

.home-cta .btn,
.home-cta a {
  font-weight: bold;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin: 24px auto;
}

.card-article {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 31, 63, 0.15);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  text-indent: 0 !important;
}

.card-thumb {
  text-align: center;
  margin-bottom: 8px;
}

.card-thumb img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.card-article h3 {
  color: #001F3F;
  font-size: clamp(16px, 3vw, 19px);
  text-indent: 0;
  margin: 4px 0 8px;
}

.card-excerpt {
  text-indent: 0 !important;
  font-size: clamp(14px, 2vw, 16px);
  flex: 1;
}

.read-more {
  font-weight: bold;
  color: #2a65ff;
}


/* ============================================================
   CRISTAL WAR — PADRÃO VISUAL ÚNICO DE INTERFACE
   Baseado no visual atual do single.html.
   Objetivo: nenhum texto claro sobre fundo claro.
   Exceções: controles que são exclusivamente imagens.
   ============================================================ */
:root{
  --cw-ui-bg: linear-gradient(135deg, rgba(0,55,95,.95), rgba(2,18,40,.98));
  --cw-ui-bg-hover: linear-gradient(135deg, rgba(0,75,125,.98), rgba(3,27,55,.99));
  --cw-ui-border: #25d5ff;
  --cw-ui-border-hover: #9af1ff;
  --cw-ui-text: #ffffff;
  --cw-ui-shadow: 0 0 12px rgba(0,180,255,.08);
  --cw-ui-shadow-hover: 0 0 20px rgba(0,200,255,.25);
}
html, body{background:#020817 !important;color:#e8f6ff !important;}
button,.btn,input[type="button"],input[type="submit"]{
  box-sizing:border-box; min-height:46px; height:46px; padding:0 18px; margin:0;
  border:1px solid var(--cw-ui-border) !important; border-radius:9px !important;
  background:var(--cw-ui-bg) !important; color:var(--cw-ui-text) !important;
  font-family:'VT323',monospace !important; font-size:20px !important; font-weight:700; line-height:1;
  letter-spacing:1px !important; text-shadow:0 2px 3px #000 !important;
  box-shadow:var(--cw-ui-shadow); cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
button:hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,button:focus-visible,.btn:focus-visible,input[type="button"]:focus-visible,input[type="submit"]:focus-visible{
  background:var(--cw-ui-bg-hover) !important; color:var(--cw-ui-text) !important; border-color:var(--cw-ui-border-hover) !important;
  box-shadow:var(--cw-ui-shadow-hover); transform:translateY(-2px);
}
button:active,.btn:active,input[type="button"]:active,input[type="submit"]:active{transform:translateY(0) scale(.97);}
button:disabled,.btn:disabled,input[type="button"]:disabled,input[type="submit"]:disabled{
  background:linear-gradient(135deg,rgba(20,35,50,.95),rgba(10,18,30,.98)) !important;
  color:#9fb8c7 !important; border-color:#476273 !important; text-shadow:none !important; box-shadow:none !important;
  cursor:not-allowed; opacity:1 !important; transform:none !important;
}
.menu-botoes button,#telaInicio-start > button{
  width:clamp(160px,60%,260px) !important; min-height:46px !important; height:46px !important; padding:0 18px !important;
  border:1px solid var(--cw-ui-border) !important; border-radius:9px !important; background:var(--cw-ui-bg) !important; color:var(--cw-ui-text) !important;
}
#telaInicio-start > button:first-of-type{background:var(--cw-ui-bg) !important;color:var(--cw-ui-text) !important;text-shadow:0 2px 3px #000 !important;}
.cw-encyclopedia-nav a{min-height:46px;padding:0 18px;border:1px solid var(--cw-ui-border) !important;border-radius:9px;background:var(--cw-ui-bg) !important;color:var(--cw-ui-text) !important;text-shadow:0 2px 3px #000;}
.ranking-actions button,.end-box button,.tutorial-btn,#confirmarSenha,#intro-container button{
  min-height:46px !important;height:46px !important;padding:0 18px !important;border:1px solid var(--cw-ui-border) !important;border-radius:9px !important;
  background:var(--cw-ui-bg) !important;color:var(--cw-ui-text) !important;text-shadow:0 2px 3px #000 !important;box-shadow:var(--cw-ui-shadow);
}
.tutorial-btn.skip{background:linear-gradient(135deg,rgba(75,25,45,.96),rgba(35,12,25,.98)) !important;color:#ffdbe5 !important;border-color:#ff6f91 !important;}
input[type="text"],input[type="search"],input[type="email"],input[type="password"]{box-sizing:border-box;background:#020918 !important;color:#fff !important;border:1px solid #35d8ff !important;border-radius:9px !important;}
input::placeholder{color:#9fc4d8 !important;opacity:1;}
/* Controles que são exclusivamente imagem. */
#exit-fullscreen,#exit-fullscreen-01,.attack-button,.attack-button-01,.eject-button-01,.directional-buttons button,.btn-dir-up,.btn-dir-down,.btn-dir-left,.btn-dir-right,.btn-red,#reset-button{text-shadow:none !important;}
.attack-button,.attack-button-01,body.is-mobile .attack-button-01{background-color:transparent !important;border-color:transparent !important;box-shadow:none !important;min-height:0 !important;}
#exit-fullscreen,#exit-fullscreen-01{background-color:transparent !important;border-color:transparent !important;}
#hud,.hud-item,.hud-item-especial,.hud-label{color:#fff;}
.password-box,.intro-container,.tutorial-container,.tutorial-box,.end-box,.menu-botoes{color:#e8f6ff;}
@media(max-width:699px){.menu-botoes button,#telaInicio-start > button{min-height:46px !important;height:46px !important;width:calc(50% - 6px) !important;}}