/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image:url(https://i.pinimg.com/736x/1d/cb/57/1dcb5717b481eff60a6c826ba721d6c6.jpg);
  color: black;
  font-family: Verdana;
  font-size: 12px; 
  text-align: center; 
  
  /* Truque do contorno usando sombras empurradas para as 4 direções */
  text-shadow: 
    -1px -1px 0 white,  
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}

h1 {
  font-size: 55px; /* Fonte bem maior e de destaque */
  color: #ff69b4; /* Rosa choque clássico */
  font-family: "Comic Sans MS", "Brush Script MT", cursive; /* Fontes super detalhadas e nostálgicas */
  border: 4px dashed #ffb6c1; /* Borda tracejada em rosa bebê */
  border-radius: 15px; /* Deixa as quinas da borda redondinhas */
  padding: 10px 25px; /* Dá um espaço de respiro entre o texto e a borda */
  
  /* O truque do contorno branco e da sombra 3D */
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white; 
  text-shadow: 4px 4px 0px #c21361; /* Sombra rosa escuro para dar aquele efeito de profundidade 3D! */
  
  /* Fundo translúcido e ajuste da caixa */
  background-color: rgba(255, 255, 255, 0.6); /* Um fundo branquinho meio transparente pra destacar ainda mais */
  display: inline-block; /* Faz a borda abraçar o texto no tamanho exato dele */
  margin-top: 10px;
}

h2 {
  font-size: 15px;

}
 .title-bar {
 background:linear-gradient(90deg, purple, orchid, pink);
}

.player {
  width: fit-content;
  border: black solid 1px;
  border-width: 1px 0px 0px 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px; /* É esta linha nova que empurra o player para longe do texto! */
}

.controlimg:hover {
 cursor:help;
}

input[type="range"] {
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 background: transparent;
}

input[type="range"]:focus {
 outline: none;
}

input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 14px;
 width: 11px;
 background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
 transform: translateY(-8px);
 box-shadow: none;
 border: none;
}

input[type="range"].has-box-indicator::-webkit-slider-thumb {
 background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
 transform: translateY(-10px);
}

input[type="range"]::-moz-range-thumb {
 height: 14px;
 width: 11px;
 border: 0;
 border-radius: 0;
 background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
 transform: translateY(2px);
}

input[type="range"]::-moz-range-thumb {
 background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
 border: 0;
 border-radius: 0;
 height: 14px;
 transform: translateY(2px);
 width: 11px;
}

input[type="range"].has-box-indicator::-moz-range-thumb {
 background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
 transform: translateY(0px);
}

input[type="range"]::-webkit-slider-runnable-track {
 width: 100%;
 height: 2px;
 box-sizing: border-box;
 background: black;
 border-right: 1px solid grey;
 border-bottom: 1px solid grey;
 box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
 -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

input[type="range"]::-moz-range-track {
 width: 100%;
 height: 2px;
 box-sizing: border-box;
 background: black;
 border-right: 1px solid grey;
 border-bottom: 1px solid grey;
 box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
 -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}u{border-bottom:.5px solid #222;text-decoration:none} button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}

.title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}

.title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}

.title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}

@media (not(hover)){
 button:not(:disabled):hover {
 box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.title-bar-controls button::-moz-focus-inner {border:0}


@font-face {
 font-family: "Pixelated MS Sans Serif";
 src: url("https://files.catbox.moe/1za99g.woff") format("woff");
 src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "Pixelated MS Sans Serif";
 src: url("https://files.catbox.moe/z7csle.woff") format("woff");
 src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
 font-weight: bold;
 font-style: normal;
}

.window, .title-bar {
 font-family: "Pixelated MS Sans Serif", Arial;
 -webkit-font-smoothing: none;
 font-size: 11px;
}

.window {
 box-shadow: inset -1px -1px #0a0a0a,
 inset 1px 1px #dfdfdf, inset -2px -2px #808080,
 inset 2px 2px #ffffff;
 background: #c0c0c0;
 padding: 3px;
 width:260px;
}

.title-bar {
 padding: 3px 2px 3px 3px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.title-bar-text {
 font-weight: bold;
 color: white;
 letter-spacing: 0;
 margin-right: 24px;
}

.title-bar-controls {
 display: flex;
}

.title-bar-controls button {
 padding: 0;
 display: block;
 min-width: 16px;
 min-height: 14px;
}

.title-bar-controls button:active {
 padding: 0;
}

.title-bar-controls button:focus {
 outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px}

.window-body { margin:0px; height:98px; }

input[type=range] {
 -webkit-appearance: none;
 appearance:none;
 width: 100%;
 }

 input[type=range]:focus {
 outline: none;
 }

 /* settings for chrome browsers */
 input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 2px; /* thickness of seeking track */
 cursor: help;
 }

 /* settings for firefox browsers */
 input[type=range]::-moz-range-track {
 width: 100%;
 height: 2px; /* thickness of seeking track */
 cursor: help;
 }

 .flex {display: flex;}

 .titlebaricon { height:14px; width:14px;}

 .songtitlewindow {
 background-color:#fff;
 box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
 }

 #musicplayer {
 border:2px solid silver; /* border around player */
 border-width: 2px 0px 0px 0px;
 width:160px; /* width of the player */
 }

 #imagestyle {
 background:silver; /* background color of player */
 border:2px solid silver; /* border around player */
 width:95px; /* width of the player */
 height:95px;
 box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
 }

 .ic {
 width:90px;
 position:relative;
 bottom:1px;
 right:1px;
 overflow:hidden;
 padding:2px;
 border:2px solid transparent;
 }

 .songtitlearrow {
 background-size:100%;
 background-repeat:no-repeat;
 background-image:url(https://files.catbox.moe/f5e8np.png);
 height:21px;
 width:21px;
 position:relative;
 top:2px;
 left:-2px;
 border:0px solid transparent;
 border-width:0px 0px 0px 0px;
 }

 .songtitle {
 padding:5px; /* padding around song title */
 border-bottom:0px; /* border under song title */
 display:block;
 font-family:Pixelated MS Sans Serif;
 }

 .controls {
 font-size:18px !important; /* size of controls */
 text-align:center;
 width:100%;
 position:relative;
 bottom:10px;
 }

 .controls td {
 padding:8px 5px 0px 5px; /* padding around controls */
 }

 button {
 min-width:14px;
 }

 .seeking {
 background-color:#c0c0c0; /* background color of seeking bar */
 display:flex;
 justify-content: space-evenly;
 padding:14px; /* padding around seeking bar */
 }

 .current-time {
 padding-right:5px;
 }

 .total-duration {
 padding-left:5px;
 }

 .controlimg {
 height:15px;
 width:15px;
 }
 /* 1. A caixa invisível que organiza lado a lado */
.secao-perfil {
  display: flex;
  align-items: center; /* Mantém a foto e a caixinha alinhados no meio */
  gap: 20px; /* Cria um espaço de 20px entre a foto e a caixinha */
  margin-top: 20px; /* Desgruda do player de música */
}

/* 2. O tamanho da sua foto (ajuste os pixels se quiser ela maior/menor) */
.minha-foto {
  width: 150px; 
  height: auto;
}

/* 3. O visual da caixinha de visitas (Estilo Windows 98) */
.caixa-visitas {
  background: #c0c0c0;
  border: 2px solid silver;
  padding: 10px 15px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  text-align: center;
  margin-left: 100px;
}

/* Tira o espaçamento padrão do parágrafo dentro da caixa */
.caixa-visitas p {
  margin: 0 0 5px 0;
  font-weight: bold;
}

.numero-falso {
  font-size: 28px; /* É aqui que a mágica acontece! Aumente ou diminua esse valor se quiser */
  color: blue;
  letter-spacing: 4px; /* Isso dá um espacinho entre os números para ficar mais clássico */
  display: block; /* Garante que o número fique bem centralizado embaixo da palavra "Visitas:" */
  margin-top: 5px;
}

/* Estética da caixa de leitura (Formato de Livro Vertical) */
.caixa-lendo {
  background: #c0c0c0;
  border: 2px solid silver;
  padding: 3px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  text-align: center; /* Agora tudo dentro dela fica centralizado */
  width: 140px; /* Mais estreita para dar a proporção de um livro */
  margin-top: 200px;  /* Empurra para BAIXO */
  margin-left: 350px; /* Empurra para a DIREITA */
}

/* Barra de título combinando com o player de música */
.titulo-lendo {
  background: linear-gradient(90deg, purple, orchid, pink);
  color: white;
  font-weight: bold;
  padding: 2px 4px;
  margin-bottom: 8px;
  letter-spacing: 0;
  text-align: left; /* O título do topo continua à esquerda (padrão Windows) */
}

/* Organiza a capa e o texto EMPILHADOS na vertical */
.conteudo-lendo {
  display: flex;
  flex-direction: column; /* A mágica que transforma linha em coluna! */
  align-items: center;
  gap: 10px; /* Espaço entre a capa e o texto debaixo dela */
  padding-bottom: 8px; /* Dá um respiro no fundo da caixa */
}

/* Tamanho da capa (Agora maior e em destaque) */
.capa-livro {
  width: 100px; /* Aumentamos bastante a capa para preencher a vertical */
  height: auto;
  border: 1px solid black; 
  box-shadow: 2px 2px 0px grey; /* Adicionei uma sombrinha para parecer que o livro está em 3D saindo da tela! */
}

/* Formatação do nome do livro e autor */
.info-livro {
  color: black;
  line-height: 1.4;
}


/* O caixote do menu inteiro (Estética Girly Anos 2000) */
.menu-navegacao {
  background: #ffc0cb; /* Fundo rosa claro clássico */
  border: 2px solid #ff69b4; /* Borda rosa choque (Hot Pink) */
  box-shadow: inset -2px -2px #ff8da1, inset 2px 2px #fff0f5; /* Sombrinha em tons de rosa */
  padding: 8px;
  display: flex;
  justify-content: center; 
  gap: 20px; 
  margin-bottom: 30px; 
  border-radius: 8px; /* Deixa as pontinhas do menu levemente arredondadas */
}

/* O texto clicável de cada botão */
.menu-navegacao a {
  color: #c21361; /* Texto em um tom de rosa bem escuro para facilitar a leitura */
  text-decoration: none; 
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  background: #fff0f5; /* Fundo do botão num tom bem clarinho (quase branco) */
  border: 1px dotted #ff69b4; /* Bordinha pontilhada rosa choque */
}

/* O efeitinho quando o mouse passa por cima do link */
.menu-navegacao a:hover {
  background: #ff69b4; /* O botão acende em rosa choque! */
  color: white; /* A letra fica branca para dar contraste */
  border: 1px dotted white;
  cursor: help; /* Mantém aquele mouse de interrogação charmoso */
}

/* Dá um respiro para todos os textos e melhora a leitura */
p {
  margin-top: 25px; /* Empurra o parágrafo inteiro para baixo */
  line-height: 1.6; /* Dá espaço entre as linhas do texto */
}

/* Coleção de Blinkies no rodapé */
.colecao-blinkies {
  clear: both; /* ESSA É A MÁGICA: Impede os blinkies de subirem e grudarem na foto! */
  display: flex;
  justify-content: center; /* Centraliza todos os botões */
  flex-wrap: wrap; /* Se você colocar muitos botões, eles descem para a próxima linha automaticamente */
  gap: 5px; /* Um espacinho mínimo entre um botão e outro */
  
  margin-top: 60px; /* Descola bem do resto do site */
  margin-bottom: 20px;
  padding: 15px;
  
  background-color: rgba(255, 192, 203, 0.2); /* Fundo rosinha bem suave e transparente */
  border: 2px dashed #ffb6c1; /* Borda tracejada rosa bebê */
  border-radius: 10px;
}

/* Garante que o tamanho se adapte sem achatar as imagens */
.colecao-blinkies img {
  height: 60px; /* Trava a altura clássica dos anos 2000 */
  width: auto; /* Essa é a mágica! A largura se ajusta ao tamanho original do GIF */
  image-rendering: pixelated; /* Mantém a carinha de pixel art nítida */
}

/* Estética e posição da imagem principal de apresentação do Windows */
.imagem-apresentacao {
  float: right; /* Faz a imagem grudar no lado direito da tela */
  margin-top: 10px; /* Alinha a imagem com as caixinhas da esquerda */
  margin-left: 25px; /* Cria um espaço para as caixas não baterem nela */
  margin-bottom: 25px;
  max-width: 350px; /* Tamanho controlado para não ocupar a tela inteira */
  
  /* Borda e sombra rosa estilo 2000s */
  border: 3px solid #ff69b4; 
  border-radius: 10px; 
  box-shadow: 4px 4px 0px #ffb6c1; 
}

/* Estética e posição da nova imagem na esquerda */
.imagem-esquerda {
  float: left; /* O comando mágico que faz ela grudar na esquerda! */
  margin-top: -20px; /* Dá um espacinho para desgrudar das caixas de cima */
  margin-right: 25px; /* Empurra qualquer coisa que estiver à direita */
  margin-bottom: 25px;
  max-width: 300px; /* Controle de tamanho (ajuste se precisar) */
  
  /* A mesma moldura rosa anos 2000 para manter tudo combinando */
  border: 3px solid #ff69b4; 
  border-radius: 10px; 
  box-shadow: -4px 4px 0px #ffb6c1; /* Sombreado deslocado para a esquerda para dar charme */
}

/* ========================================= */
/* ESTILOS DA PÁGINA "SOBRE MIM" (Folha de Diário) */
/* ========================================= */

/* A folha principal que segura todo o conteúdo */
.folha-diario {
  background-color: #fff0f5; /* Rosa beeeeem clarinho, lembrando papel de carta */
  border: 3px solid #ff69b4; /* Borda rosa choque para destacar do fundo principal */
  border-radius: 15px; /* Bordas arredondadas */
  
  width: 80%; /* A folha ocupa 80% da tela, deixando o fundo principal aparecer nas laterais */
  max-width: 800px; /* Garante que a folha não fique gigante em monitores grandes */
  margin: 30px auto; /* Centraliza a folha na tela perfeitamente */
  padding: 30px; /* Espaço por dentro para os textos não grudarem na borda */
  
  box-shadow: 10px 10px 0px rgba(255, 105, 180, 0.4); /* Sombreado 3D deslocado */
  
  /* Limpa flutuações para que a foto do avatar não quebre a página */
  overflow: auto; 
}

/* O canto do avatar */
.area-avatar {
  float: left; /* Joga a foto pro canto esquerdo */
  margin-right: 25px; /* Afasta o texto da foto */
  margin-bottom: 15px;
  text-align: center;
}

/* A foto de perfil */
.foto-perfil {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Transforma a foto em um círculo perfeito! */
  border: 4px dashed #ffb6c1; /* Borda fofa */
  object-fit: cover; /* Garante que a foto não fique achatada */
}

/* O nomezinho debaixo da foto */
.nome-perfil {
  font-family: "Comic Sans MS", cursive;
  color: #c21361;
  font-weight: bold;
  font-size: 18px;
  margin-top: 10px;
  letter-spacing: 2px;
}

/* Ajustes no texto dentro da folha para melhorar a leitura */
.conteudo-sobre {
  text-align: left; /* Na folha, o texto fica alinhado à esquerda como num livro */
}

.conteudo-sobre h1 {
  margin-top: 0; /* Tira o espaço extra acima do título dentro da folha */
}

.conteudo-sobre h2 {
  color: #ff69b4;
  font-size: 22px;
  border-bottom: 2px dotted #ffb6c1; /* Uma linhazinha separadora charmosa */
  padding-bottom: 5px;
  margin-top: 30px;
}

/* ========================================= */
/* GALERIA DOS PERSONAGENS FAVORITOS */
/* ========================================= */
.galeria-personagens {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  flex-wrap: wrap; /* Faz as fotos descerem de linha se não couberem na tela */
}

/* Estética de Polaroid para os personagens */
.cartao-personagem {
  background: white;
  border: 2px solid silver;
  padding: 8px;
  text-align: center;
  box-shadow: 3px 3px 0px pink;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px; /* Tamanho do cartãozinho */
}

.cartao-personagem img {
  width: 100px;
  height: 100px;
  object-fit: cover; /* Não deixa a foto esticar feio */
  border: 1px solid black;
  margin-bottom: 5px;
}

.cartao-personagem b {
  color: #c21361;
  font-size: 13px;
}

.cartao-personagem i {
  font-size: 10px;
  color: gray;
}

/* ========================================= */
/* ORGANIZAÇÃO DOS WIDGETS NA PÁGINA INICIAL */
/* ========================================= */
.painel-widgets {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 40px;
  gap: 30px;
  flex-wrap: wrap; /* Faz as colunas descerem bonitinhas se a tela for pequena */
}

.coluna-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Transformamos as duas imagens soltas em fotos de scrapbook padronizadas */
.foto-scrapbook {
  border: 3px solid #ff69b4; 
  border-radius: 10px; 
  box-shadow: 4px 4px 0px #ffb6c1;
  max-width: 200px;
}

/* Como agora as caixas estão organizadas em colunas, precisamos tirar 
   aquelas margens gigantes que empurravam elas pro meio do nada */
.caixa-visitas { margin-left: 0 !important; }
.caixa-lendo { margin-top: 0 !important; margin-left: 0 !important; }
.player { margin-top: 0 !important; }

/* Tamanho e estética dos gifs/imagens que preenchem os espaços vazios */
.gif-decorativo {
  max-width: 200px; /* Tamanho delicado (aumente ou diminua se precisar) */
  height: auto;
  image-rendering: pixelated; /* Deixa os gifs com aquela carinha nítida de pixel art */
}

/* Estética da foto da porta embaixo do player de música */
.foto-porta {
  max-width: 180px; /* Largura controlada para caber certinho embaixo do CD Player */
  height: auto; 
  margin-top: 15px; /* Empurra a porta um pouquinho para baixo para não grudar no rádio */
  
  /* Moldura de scrapbook para ficar o conjunto perfeito */
  border: 3px solid #ff69b4; 
  border-radius: 10px; 
  box-shadow: 4px 4px 0px #ffb6c1;
}
/* Ajustes de formato para as fotos novas da Coluna Esquerda */
.foto-quadrada {
  width: 160px; 
  height: 160px; /* Mesma medida da largura = quadrado perfeito! */
  object-fit: cover; /* Garante que a foto não fique achatada/espremida */
}

.foto-horizontal {
  width: 200px; /* Mais larguinha */
  height: 150px; /* Mais baixinha (efeito esticado/paisagem) */
  object-fit: cover; 
}

/* ========================================= */
/* ESTÉTICA DO JOGO DE VESTIR (DOLLMAKER)    */
/* ========================================= */
.jogo-de-vestir {
  display: flex;
  flex-direction: row !important; /* Força o guarda-roupa a ficar ao lado da boneca */
  flex-wrap: wrap; /* Se a tela for pequena, desce com elegância */
  gap: 40px;
  margin-top: 30px;
  background-color: rgba(255, 192, 203, 0.2);
  padding: 20px;
  border: 2px dashed #ffb6c1;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

/* O palco trava o tamanho DEFINITIVAMENTE */
.palco-boneca {
  position: relative;
  width: 200px !important;
  height: 400px !important;
  min-width: 200px;
  flex-shrink: 0; /* Impede o palco de ser esmagado ou esticado */
  background: white;
  border: 2px solid silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  overflow: hidden; /* Corta qualquer coisa que tente vazar do palco */
}

/* Pega TODAS as imagens dentro do palco e obriga a ficarem empilhadas no tamanho certo */
.palco-boneca img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 200px !important;
  height: 400px !important;
  object-fit: contain; 
  image-rendering: pixelated; /* Deixa os pixels nítidos e fofos */
}

.guarda-roupa {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 200px; /* Garante que os botões tenham espaço para respirar */
}

.cabide h3 {
  margin: 0 0 8px 0;
  color: #c21361;
  font-size: 16px;
  border-bottom: 2px dotted #ff69b4;
  font-family: "Pixelated MS Sans Serif", Arial;
}

.botoes-roupa {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; 
}

/* Um visual totally blindado contra o 98.css antigo */
.botoes-roupa button {
  background: #fff0f5 !important;
  border: 1px dotted #ff69b4 !important;
  color: #c21361 !important;
  text-shadow: none !important; /* Tira sombra preta forçada do Windows antigo */
  padding: 5px 10px !important;
  font-family: "Pixelated MS Sans Serif", Arial !important;
  cursor: help !important;
  border-radius: 5px !important;
  min-height: auto !important;
}

.botoes-roupa button:hover {
  background: #ff69b4 !important;
  color: white !important;
}