/* ==========================================================================
   FONTES, CURSOR E DEFINIÇÕES DO CANVAS GERAL
   ========================================================================== */
@font-face {
  font-family: 'MSGothic';
  src: url('../fonts/MSGOTHIC.TTF') format('truetype');
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/VT323-Regular.ttf') format('truetype');
}

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

body {
  background-image: url('../bedroom/decor/bedroompagebg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #cbdcf0;
  cursor: url('../bedroom/decor/starcursor.png'), auto;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas-screen {
  position: relative;
  width: 1440px;
  height: 900px;
}

.independent-box {
  position: absolute;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   MOLDURAS LACEFRAME 
   ========================================================================== */
.box-title-header {
  display: block;
  z-index: 15;
}
.center-title { align-self: center; }


.changelog-window .updates-title-solo,
.updates-title-solo {
  position: absolute;
  z-index: 99;             /* Camada máxima acima de tudo */
  
  /* 🛠️ CORES E PARAMETROS DE ESTICAMENTO: */
  height: auto; 
  width: 170px;          
  top: -05px;              
  left: 50%;              
  transform: translateX(-50%);
}


/* 3. TÍTULO DO QUARTO CENTRAL (bedroomboxtitle.png) */
.bedroom-window .box-title-header {
  position: absolute;
  z-index: 30;
  width: auto;
  height: auto;
  
  max-width: 220px;       
  top: -20px;              
  left: 50%;               
  transform: translateX(-50%);
}

/* 4. TÍTULO DA WELCOME BOX (welcomeboxtitle.png) - LIBERADO PARA AJUSTE MANUAL */
.welcome-window img.box-title-header,
.welcome-window .box-title-header {
  position: absolute !important;
  z-index: 50;                 
  height: auto !important;     
  width: 160px !important;  
  top: -5px !important;    
  left: 159px !important;     
  transform: none !important;
}



.lace-border {
  border: 12px solid transparent;
  border-image: url('../bedroom/decor/laceframe.png') 12 repeat;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.tight-lace-frame {
  border: 12px solid transparent;
  border-image: url('../bedroom/decor/laceframe.png') 12 repeat;
  background: transparent !important;
  padding: 0 !important;
  display: inline-flex;
}

.nav-bg-tile { background-image: url('../bedroom/decor/navwelcomeboxbg.png'); background-repeat: repeat; }
.whitedotted-bg-tile { background-image: url('../bedroom/decor/whitedottedbg.png'); background-repeat: repeat; }

/* ROCHAS DE SCROLLING OCULTAS */
.nav-scroll-area,
.changelog-scroll-area,
.inner-scroll-text {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.nav-scroll-area::-webkit-scrollbar,
.changelog-scroll-area::-webkit-scrollbar,
.inner-scroll-text::-webkit-scrollbar {
  display: none;
}


/* 1. Caixa Nav (Mais para a esquerda e bem arrumada) */
.nav-window {
  top: 30px;
  left: -20px;
  width: 300px;
  height: 280px;
}

/* 2. Caixa Changelog (Esquerda Base) */
.changelog-window {
  top: 580px;
  left: -130px;
  width: 320px;
  height: 315px;
}

/* 3. Quarto Central (Bedroom Principal) */
.bedroom-window {
  top: 40px;
  left: 325px;
  width: 760px;
  height: 815px;
}

/* 4. Welcome Box (Redimensionada, mais larga e jogada para a ponta direita) */
.welcome-window {
  bottom: 10px;
  left: 1100px;
  width: 480px; /* Alargada conforme pedido */
  height: 400px;
}


.nav-window .lace-border { padding: 0 !important; }

.menulilac-foreground {
  /* REPETIÇÃO TILE DO LILÁS EM FORMATO MOSAICO RESTAURADA */
  background-image: url('../bedroom/decor/menulilactilebg.png') !important;
  background-repeat: repeat !important;
  background-size: auto !important; /* Impede a imagem de se esticar de forma errada */
  margin: 14px;
  flex-grow: 1;
  overflow: hidden;
  border: 1px dashed rgba(255,255,255,0.3);
}

.nav-scroll-area {
  padding: 10px 14px; /* Reduz de 50px para 14px para dar espaço igual nas duas bordas */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 2px; 
  align-content: start;
}

.menu-btn {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: #6AB6EC;
  background-image: url('../bedroom/decor/buttonbase3.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border: none;
  display: block;
  width: 100px; 
  max-width: 110px;
  height: 30px; 
  padding-left: 4px;
  text-align: center;
  line-height: 28px;
  position: relative;
  cursor: url('../bedroom/decor/starcursor.png'), pointer;
  margin: 0 auto;
}

/* ESTRELINHA ALADA DO HOVER DOS BOTÕES DA NAV */
.menu-btn::before {
  content: '';
  position: absolute;
  z-index: 10;                  /* Fica por cima da base do botão */
  
  /* 1. 🛠️ TAMANHO BEM GRANDE DA ESTRELA (Aumentado e travado) */
  width: 38px !important;       /* Altere aqui se quiser ela ainda maior (Ex: 42px) */
  height: 38px !important;      /* Mantém igual para não achatar o gif */
  
  background-image: url('../bedroom/decor/wingedstarblue.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 2. 🛠️ CENTRALIZAÇÃO VERTICAL PERFEITA */
  top: 50%;
  transform: translateY(-50%);
  
  /* 3. 🛠️ METADE PARA DENTRO, METADE PARA FORA DA BORDA ESQUERDA */
  left: -19px !important;       /* Metade exata do tamanho (38px / 2 = 19px). */
                                /* Esse valor negativo força ela a "vazar" para fora do botão! */
  
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Garante que ela apareça tanto no hover real quanto no hover cruzado simulado */
.menu-btn:hover::before,
.menu-btn.is-hovered::before {
  opacity: 1;
}


/* ==========================================================================
   INTERIOR DO CHANGELOG (MOLDURA DE RENDA EXTERNA + CADERNO REAJUSTADO)
   ========================================================================== */

/* WRAPPER QUE APLICA A MOLDURA DE RENDA POR FORA SEM APERTAR O PAPEL */
.changelog-lace-container-wrapper {
  border: 12px solid transparent;
  border-image: url('../bedroom/decor/laceframe.png') 12 repeat;
  background-clip: padding-box;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* O BLOCO DE NOTAS EM SUA PROPORÇÃO NATIVA 100% CORRETA */
.changelog-frame-box {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background-image: url('../bedroom/decor/changelogbox.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  /* 🛠️ AJUSTE DE ALTURA DOS UPDATES: Diminuído de 42px para 32px para SUBIR as caixinhas na folha */
  padding: 32px 12px 12px 12px; 
  
  overflow: hidden;
}

/* ==========================================================================
   CONTROLE INTEGRAL DE TAMANHO DAS CAIXAS DE UPDATES (CHANGELOG)
   ========================================================================== */

.changelog-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  
  /* ATIVA O SCROLL INVISÍVEL NO CADERNO GERAL QUANDO TIVER MUITOS UPDATES */
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.changelog-scroll-area::-webkit-scrollbar {
  display: none; /* Chrome, Safari e Edge */
}

/* AS CAIXINHAS INDIVIDUAIS DE CADA ATUALIZAÇÃO */
.update-box {
  border: 6px solid transparent !important;
  border-image: url('../bedroom/decor/laceframe.png') 9 repeat !important;
  left: 21px;
  display: flex;
  gap: 6px;
  position: relative; 
  background-clip: padding-box;

  /* 🛠️ AJUSTE MANUAL DE TAMANHO COMPLETO AQUI: */
  width: 90%;            
  min-height: 40px;       
  
  /* 🛠️ TRAVA DE SEGURANÇA: Impede a caixinha de crescer demais e quebrar o caderno */
  max-height: 75px;       /* Altere aqui se quiser caixinhas individuais mais altas ou mais baixas */
  
  padding: 6px 6px;       
}

.update-star { 
  width: 32px; 
  height: 17px; 
  margin-top: 1px; 
  flex-shrink: 0; 
}

.new-badge { 
  position: absolute; 
  top: 7px; 
  right: 11.3px; 
  width: 30px; 
  height: auto; 
  z-index: 5; 
}

.font-msgothic { 
  font-family: 'MSGothic', sans-serif; 
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Garante o isolamento do conteúdo */
}

.update-date { 
  font-size: 09px; 
  font-weight: bold; 
  color: #4e637a; 
  display: block;
  flex-shrink: 0;
}

/* 🛠️ ÁREA DE TEXTO COM SCROLLING INVISÍVEL INDIVIDUAL INTERNO */
.update-content {
  overflow-y: auto;       /* Ativa o scroll se o parágrafo for maior que a caixinha */
  scrollbar-width: none;  /* Oculta barra no Firefox */
  width: 100%;
}
.update-content::-webkit-scrollbar {
  display: none;          /* Oculta barra no Chrome/Safari */
}

.update-content p { 
  font-size: 11px; 
  color: #5B9ED7; 
  margin-top: 1px; 
  line-height: 1.2;
}


/* ==========================================================================
   QUARTO CENTRAL (BEDROOM ENGENHARIA DE ATIVOS)
   ========================================================================== */
.bedroom-bg-image {
  background-image: url('../bedroom/decor/bedroombg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.bedroom-asset {
  position: absolute;
  z-index: 25;
  transition: transform 0.15s ease, filter 0.15s ease;
}
/* Retornamos para max-width: 100% para a imagem respeitar o limite em pixels de cada móvel individual */
.bedroom-asset img { display: block; max-width: 100%; height: auto; }

/* 🛠️ APAGUE O SEU :HOVER ANTIGO E COLE ESTE NO LUGAR: */
.bedroom-asset:hover,
.bedroom-asset.is-hovered {
  /* scale(1.15) força o móvel a crescer 15% de tamanho fisicamente no hover! */
  /* Aumente para scale(1.2) ou scale(1.25) se quiser que ele fique ainda maior no zoom */
  transform: translateY(-5px) scale(1.00) !important;
  
  /* O brilho azul externo (outer glow) com tamanho expandido */
  filter: drop-shadow(0 0 6px rgba(106, 182, 236, 0.95)) !important;
  z-index: 99 !important; /* Joga o móvel hovered para a frente de tudo */

}

.bedroom-asset[data-item="about"]       { bottom: 34%;  left: 55%;   max-width: 310px; }
.bedroom-asset[data-item="blog"]        { bottom: 19%; right: 5%;  max-width: 130px;  }
.bedroom-asset[data-item="journal"]     { top: 20.3%;  left: 82.5%;  max-width: 40px;  }
.bedroom-asset[data-item="logs"]        { top: 20.3%; left: 74.5%;  max-width: 50px;  }
.bedroom-asset[data-item="media"]       { top: 44%;  left: 24%;  max-width: 110px;  }
.bedroom-asset[data-item="reads"]       { top: 20.5%; right: 25%; max-width: 60px;  }
.bedroom-asset[data-item="games"]       { bottom: 27%; right: 50%; max-width: 110px;  }
.bedroom-asset[data-item="music"]       { bottom: 22%; left: 09%;  max-width: 150px;  }
.bedroom-asset[data-item="projects"]    { bottom: 3%;  right: 7%;  max-width: 130px;  }
.bedroom-asset[data-item="shrines"]     { top: 15%; left: 21%;  max-width: 140px; }
.bedroom-asset[data-item="outfits"]     { top: 4%;  left: 68%;  max-width: 140px;  }
.bedroom-asset[data-item="mybag"]       { bottom: 32%; right: 28%;   max-width: 105px;  }
.bedroom-asset[data-item="locker"]      { top: 40%; left: 3%;   max-width: 100px;  }
.bedroom-asset[data-item="guestbook"]   { bottom: -2%; left: 2%;  max-width: 120px;  }
  
.purely-hoverable:nth-of-type(1) { top: 3%;  left: 2%;   max-width: 130px; }
.purely-hoverable:nth-of-type(2) { top: 33.5%;  left: 88.5%;  max-width: 65px; }


.bedroom-asset[data-item]:hover {
  cursor: url('../bedroom/decor/starcursor.png'), auto;
}



#camelpack-interactive-trigger { bottom: 15%; left: 62%; max-width: 85px; }

/* ==========================================================================
   INTERIOR DA WELCOME BOX (AJUSTES DE ÁREA DE SAYA REDUZIDA)
   ========================================================================== */
.welcome-inner-widgets {
  position: relative;          /* Habilita o mapa interno de coordenadas livres X/Y */
  height: 100%;
  width: 100%;
  padding: 40px 14px 14px 14px; 
}

/* 🐰 IMAGEM DO COELHINHO DO COMPUTADOR (CAMADA INTERMEDIÁRIA) */
.pcbunnywelcomebox {
  position: absolute;
  z-index: 1;                 /* Z-index baixo fixa ele atrás da textbox e da Saya */
  
  /* 🛠️ CONTROLE MANUAL DE POSIÇÃO E TAMANHO: */
  top: 220px;                  /* Altere para mover para cima ou para baixo dentro da Welcome Box */
  left: 240px;                 /* Altere para mover para a esquerda ou para a direita */
  width: 190px;               /* Altere aqui a largura que você deseja para o gráfico */
}
.pcbunnywelcomebox img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Textbox da Welcome bem menor e com posicionamento absoluto livre */
.welcome-textbox { 
  position: absolute;
  top: 100px;                   /* Ajuste para mover verticalmente */
  left: 50px;                  /* Ajuste para mover horizontalmente */
  height: 100px; 
  width: 350px;
  padding: 4px; 
}

/* 🛠️ PROPRIEDADES DE FONTE E SCROLL ATIVADAS PARA O TEXTO INTERNO */
.inner-scroll-text { 
  padding: 6px; 
  font-family: 'MSGothic', sans-serif; /* Aplica a fonte MSGOTHIC.TTF configurada no topo */
  font-size: 11px;                     /* Tamanho pixelado nítido e proporcional */
  color: #5B9ED7;                      /* Cor cinza escura suave para melhor leitura */
  line-height: 1.4;                    /* Altura de linha para dar respiro ao texto */
  
  /* Sistema de rolagem invisível caso o texto de boas-vindas aumente */
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;               /* Oculta a barra no Firefox */
}

/* Oculta a barra de rolagem no Chrome, Safari e Edge */
.inner-scroll-text::-webkit-scrollbar {
  display: none; 
}


/* Caixa da Saya de tamanho mini e posicionamento absoluto livre */
.saya-box-container {
  position: absolute;
  top: 220px;                  /* Ajuste para mover verticalmente na Welcome */
  left: 20px;                  /* Travada de forma estrita no alinhamento esquerdo */
  width: 230px;                /* Muito menor conforme solicitado */
  height: 230px;               /* Muito menor conforme solicitado */
  padding: 2px;
}

.saya-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.saya-fg-overlay { position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.saya-character-sprite { position: relative; z-index: 2; max-height: 85%; width: auto; }

.inner-scroll-text { padding: 4px; }

/* Caixa da Saya MUITO menor e inteiramente alinhada ao lado esquerdo */
.saya-box-container { 
  height: 140px; 
  width: 200px; /* Travada em tamanho reduzido */
  padding: 2px; 
  align-self: flex-start; /* Alinhamento estrito à esquerda */
}

.saya-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.saya-fg-overlay { position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.saya-character-sprite { position: relative; z-index: 6; max-height: 85%; width: auto; }

/* ==========================================================================
   ELEMENTOS DECORATIVOS AVULSOS SOLTOS (COORDENADAS ABSOLUTAS LIVRES)
   ========================================================================== */

/* Configuração base para as imagens soltas e flutuantes do layout */
.loose-decor-asset {
  position: absolute;
  z-index: 20;
}

/* 📷 REGRA DE SEGURANÇA FORÇADA: Garante que as imagens cresçam até preencher o tamanho configurado */
.loose-decor-asset img,
.asset-girl-solo img,
.asset-neko-solo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* Preserva as proporções originais do pixel art sem achatar */
}


/* 🏷️ Imagem: pfp.png (Foto de perfil flutuante) */
.asset-pfp-loose {
  position: absolute;
  z-index: 20;
  bottom: 300px;
  left: 1440px;
  width: 180px;
}

/* 🏷️ Imagem: pinkrose.png (Rosa decorativa número 1) */
.pinkrose-1 {
  position: absolute;
  z-index: 20;
  top: 280px;
  left: 111px;
}
/* Força a imagem a obedecer os 75px de largura configurados */
.pinkrose-1 img {
  width: 40px !important;
  height: auto !important;
}

/* 🏷️ Imagem: pinkrose.png (Rosa decorativa número 2 - Rotacionada) */
.pinkcatgirl {
  position: absolute;
  z-index: 20;
  bottom: 225px;
  left: 1476px;
}
/* Força a imagem a obedecer os 45px de largura configurados */
.pinkcatgirl img {
  width: 60px !important;
  height: auto !important;
}

.pinkrose-2 {
  position: absolute;
  z-index: 20;
  bottom: 183px;
  left: 1480px;
  transform: rotate(-30deg); /* Aplica a rotação de 5 graus para a direita */
}
/* Força a imagem a obedecer os 45px de largura configurados */
.pinkrose-2 img {
  width: 45px !important;
  height: auto !important;
}

.pastelstarsnav {
  position: absolute;
  z-index: 20;
  top: 210px;                /* Mantenha sua coordenada original perfeita do print */
  left: -100px;               /* Mantenha sua coordenada original perfeita do print */
  width: 150px !important;    /* ALTERE AQUI: Mude para 60px ou 40px para ajustar a largura do bloco das estrelas */
  height: auto !important;
}

/* 🛠️ SOLUÇÃO DA TRAVA: Força a imagem interna a seguir o tamanho do container e não o tamanho gigante original */
.pastelstarsnav img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 🏷️ Imagem: shootingstarnav.png (Estrela cadente decorativa nova) */
.shootingstarnav {
  position: absolute;
  z-index: 20;
  top: -27px;
  left: 220px;
}
/* Força a imagem nova a obedecer os 105px de largura configurados */
.shootingstarnav img {
  width: 105px !important;
  height: auto !important;
}

/* 🏷️ Imagem: alicebunnycardnav.png (Card decorativo da coelhinha) */
.asset-alice-card {
  position: absolute;
  z-index: 20;
  top: 255px;
  left: 220px;
  width: 105px;
}

/* 🏷️ Imagem: bedroomgirl.png (Ilustração solo no topo direito) */
/* 🛠️ AJUSTE DE PROPORÇÃO NATIVA: Mudamos a altura para 'auto' para o laceframe seguir o formato real dela! */
.asset-girl-solo {
  position: absolute;
  z-index: 20;
  top: 215px;
  left: 1100px;
  width: 350px !important;    /* Altere a largura aqui (Ex: 110px ou 130px) */
  height: auto !important;     /* Trava desfeita! A altura agora calcula de forma automática e nativa */
}

/* 🏷️ Imagem: nekousagi.png (Ilustração solo no topo direito) */
/* 🛠️ AJUSTE DE PROPORÇÃO NATIVA: Mudamos a altura para 'auto' para o laceframe seguir o formato real dela! */
.asset-neko-solo {
  position: absolute;
  z-index: 20;
  top: 65px;
  left: 1380px;               /* Ajuste fino de afastamento lateral */
  width: 230px !important;     /* Altere a largura aqui (Ex: 85px ou 100px) */
  height: auto !important;    /* Trava desfeita! A altura agora calcula de forma automática e nativa */
}

/* 🏷️ Imagem: lambmilktitle.png (Título gráfico decorativo) */
.asset-lambmilk-title {
  position: absolute;
  z-index: 20;
  top: 205px;
  left: 1125px;
}

/* ==========================================================================
   SISTEMA DE ESTRELAS FLUTUANTES (SOBREAPOSTAS À NEKO USAGI)
   ========================================================================== */

/* Configuração base para o posicionamento das duas estrelas decorativas */
.standalone-star-asset {
  position: absolute !important; /* Força o comportamento flutuante nas duas imagens */
  z-index: 40;
  pointer-events: none;          /* Garante que as estrelas não bloqueiem cliques de fundo */
}

/* 🏷️ Imagem: pinkstar-needslightenfx.png (Camada de baixo com efeito Photoshop) */
/* 🛠️ COORDENADAS E DIMENSÕES MANTIDAS EXATAMENTE COMO VOCÊ CONFIGUROU */
.fx-lighten-star {
  top: 15px !important;
  left: 1325px !important;       
  width: 350px !important;       
  mix-blend-mode: lighten;       /* Aplica o modo de fusão Photoshop "Clarear" nativo */
}

/* 🏷️ Imagem: bluestar.png (Camada de cima sem efeito de fusão) */
/* 🛠️ CORRIGIDO: Seletor blindado com !important para destravar o aparecimento na tela */
.fx-top-star {
  top: 20px !important;
  left: 1320px !important;       /* Sincronizado para centralizar em cima da nova posição da neko */
  width: 350px !important;
  display: block !important;
}

.cinnamoon-gif {
  position: absolute;
  z-index: 20;
  bottom: 330px;
  left: 1130px;
  width: 130px;
}

.welcomepastel-gif
{
  position: absolute;
  z-index: 20;
  bottom: 310px;
  left: 1280px;
  width: 120px;
}


/* ==========================================================================
   STICKER DE BASE CENTRAL DO QUARTO
   ========================================================================== */

/* 🏷️ Imagem: haveagooddaysticker.png (Adesivo ancorado na base geral da tela) */
.sticker-global-anchor {
  position: absolute;
  top: 700px;                 /* Altere aqui para mover o adesivo para cima ou para baixo */
  left: 570px;                /* Altere aqui para mover o adesivo para a esquerda ou direita */
  z-index: 40;
  pointer-events: none;
}

.sticker-global-anchor img {
  display: block;
  width: 280px;
  height: auto;
}


/* ==========================================================================
   MECÂNICA E TRAVAMENTO DE POSIÇÃO DOS TÍTULOS DA NAV E DO CHANGELOG
   ========================================================================== */

/* 1. RESTAURA E TRAVA O TÍTULO DA NAV NO LUGAR ANTERIOR */
.nav-window img.box-title-header,
.nav-window .box-title-header {
  position: absolute !important;   /* Força a plaquinha a flutuar solta da caixa */
  z-index: 30;                     /* Fica à frente de todas as molduras */
  width: 150px;             
  max-width: 100px;                /* Mantém a proporção exata da sua imagem 'nav' */
  height: auto;
  left: 50% !important;            /* Garante a centralização horizontal exata */
  transform: translateX(-50%) !important; 
  top: -15px !important;           /* Devolve e trava a plaquinha flutuando na borda superior */
}

/* 2. REGULA APENAS O TÍTULO DE UPDATES (DESTRAVADO E ISOLADO) */
.changelog-window img.updates-title-solo,
.changelog-window .updates-title-solo,
img.updates-title-solo {
  position: absolute !important;
  z-index: 99 !important;          /* Fica na camada mais alta acima do arame */
  height: auto !important;         /* Mantém proporções perfeitas ao esticar horizontalmente */
  
  /* 🛠️ CONTROLE MANUAL DE TAMANHO DO TÍTULO DE UPDATES: */
  width: 160px !important;         /* ALTERE AQUI: Mude a largura em pixels para o tamanho que quiser */
  
  /* 🛠️ CONTROLE MANUAL DE ALTURA DO TÍTULO DE UPDATES: */
  top: -05px !important;            /* ALTERE AQUI: Mude este valor para descer ou subir no caderno */
  
  left: 50% !important;            /* Mantém a centralização horizontal automática perfeita */
  transform: translateX(-50%) !important;
}

/* ==========================================================================
   EFEITO DE HOVER CRUADO: QUANDO O MENU DA NAV ATIVA O ASSET DO QUARTO
   ========================================================================== */

/* Quando você passa o mouse no móvel OU passa o mouse no botão correspondente da Nav */
.bedroom-asset:hover,
.bedroom-asset.is-hovered {
  /* 🛠️ O ÚNICO LUGAR QUE MUDA O TAMANHO DO MÓVEL NO HOVER: */
  /* scale(1.08) aumenta o móvel em 8%. */
  /* Se você mudar para scale(1.30) !important; o móvel vai crescer 30% na tela na hora! */
  /* Se quiser que ele dobre de tamanho, mude para scale(2.0) !important; */
  transform: translateY(-5px) scale(1.30) !important; 
  
  /* CONTROLE DO BRILHO EXTERNO (OUTER GLOW) */
  filter: drop-shadow(0 0 6px rgba(106, 182, 236, 0.95)) !important;
  
  z-index: 99 !important; /* Garante que o móvel hovered fique por cima de tudo */
}

/* ==========================================================================
   WIDGET RETRÔ NOW PLAYING (DRAGGABLE E TOTALMENTE COMPACTO)
   ========================================================================== */

.draggable-music-player {
  position: absolute;
  z-index: 200;                /* Mantém flutuando acima de todas as janelas */
  top: 20px;                   
  left: -210px;                  
}

.player-lace-wrapper {
  padding: 12px;               /* Aplica o laceframe modular fixo por fora */
  background-clip: padding-box;
  background-color: #cbdcf0;   
}

/* 🛠️ REDUÇÃO COMPACTA DO PLAYER: Diminuído proporcionalmente de 250px para 170px */
.player-container-base {
  position: relative;
  width: 170px;                /* Altere aqui se quiser um pouco maior (Ex: 180px) ou menor */
  height: 170px;               
  overflow: hidden;
}

.player-interface-gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;        /* 🚀 LIBERA O ARRASTE: O clique atravessa a imagem e ativa a janela */
}

/* Camada transparente de sobreposição de elementos */
.player-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 🖼️ CAPA DO ÁLBUM COMPACTA (Sincronizada com o novo tamanho menor) */
.music-album-cover {
  position: absolute;
  top: 41px;                   /* Reposicionado para o centro do novo GIF menor */
  left: 51px;
  width: 68px;                 /* Tamanho reduzido proporcionalmente */
  height: 54px;
  background-color: #000;
  overflow: hidden;
  pointer-events: none;        /* O clique atravessa a foto do álbum */
}
.music-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🎤 TEXTOS DA MÚSICA COMPACTOS */
.music-details-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  top: 102px;                  /* Reposicionado verticalmente no player compacto */
  pointer-events: none;        /* O clique atravessa as letras */
}

.text-vt323 {
  font-family: 'VT323', monospace;
  color: #0C1E58;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}

.music-track-title {
  font-size: 13px;             /* Fonte reduzida para não estourar nas bordas */
  font-weight: bold;
}

.music-artist-name {
  font-size: 11px;
  margin-top: 1px;
}

/* 🕹️ REPOSICIONAMENTO DO BOTÃO DE CLIQUE (AGORA FUNCIONANDO) */
.invisible-playback-trigger {
  position: absolute;
  background: transparent;
  border: none;
  cursor: url('../bedroom/decor/starcursor.png'), pointer;
  z-index: 250;                /* Fica na camada mais alta para capturar o clique do play antes do arraste */
  pointer-events: auto;        /* 🚀 FORÇA O CLIQUE: Este botão mantém o clique ativo apenas para ele */
  

  /* 🛠️ COORDENADAS REAJUSTADAS PARA O NOVO TRIÂNGULO COMPACTO MENOR: */
  top: 136px;                  /* AUMENTE para descer o quadrado vermelho, DIMINUA para subir */
  left: 77px;                  /* AUMENTE para mover para a direita, DIMINUA para a esquerda */
  width: 18px;                 /* Largura mini adaptada ao novo triângulo */
  height: 18px;                /* Altura mini adaptada ao novo triângulo */
}


/* ==========================================================================
   ALINHAMENTO INTEGRAL EM LINHA DO CARD DE UPDATES (REVISADO)
   ========================================================================== */

/* Remove o esticamento e centraliza o conteúdo em linha horizontal */
.update-box .update-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100%;
}

/* Container do texto inline (Reseta para peso normal para igualar as caixas) */
.journal-title-inline {
  font-family: 'MSGothic', sans-serif;
  font-size: 10px;
  color: #222222;
  font-weight: normal;         /* 🚀 CORREÇÃO: Remove o bold forçado que diferenciava as caixas */
  margin: 0;
  line-height: 1.3;
}

/* Destaca apenas a data em negrito sutil */
.update-date-inline {
  font-weight: bold;
  color: #4e637a;
  margin-right: 6px;
}

.journal-text-inline {
  font-weight: normal;
}

/* 🚀 CORREÇÃO DA ESTRELA: Destravada com position: absolute para se mover livremente */
.update-box .update-star {
  position: absolute !important; /* 🌟 ADICIONE ESTA LINHA: Libera o movimento por pixels! */
  z-index: 10 !important;
  
  /* 🛠️ COORDENADAS DE MOVIMENTO LIVRE: */
  top: 4px !important;            
  left: 16px !important;         /* ➡️ AGORA SIM: Aumente para 25px, 40px, etc. para empurrar para a direita! */
  
  width: 25px !important;       
  height: 20px !important;      
  flex-shrink: 0 !important;    
  display: block;
}


/* Container do botão de clique (Atua como âncora absoluta para o badge) */
.journal-click-btn {
  display: block;
  position: relative;          /* Cria o mapa de coordenadas para o NEW flutuar sobre ele */
  flex-shrink: 0;
  cursor: url('../bedroom/decor/starcursor.png'), pointer;
}

.journal-click-btn img {
  display: block;
  width: auto;
  max-width: 55px !important;
  height: auto !important;
}

/* 🚀 CORREÇÃO DO BADGE: Centralizado verticalmente um pouco acima do botão click */
.new-badge-over-click {
  position: absolute !important;
  z-index: 10;
  
  /* Centraliza horizontalmente em cima do botão click */
  left: 50%;
  transform: translateX(-50%);
  
  /* 🛠️ AJUSTE MANUAL DE ALTURA: */
  top: -12px;                  /* Diminua (Ex: -16px) para subir mais o badge, aumente para descer */
  
  width: 28px !important;      /* Largura mini proporcional para não cobrir o botão inteiro */
  height: auto !important;
}

/* ==========================================================================
   ALINHAMENTO EXCLUSIVO DO TEXTO E DA ESTRELA APENAS NO CARD 1
   ========================================================================== */

/* 🚀 DESCE O TEXTO DA PRIMEIRA CAIXA SEM MEXER NA ESTRUTURA GLOBAL */
.has-link .journal-title-inline {
  margin-top: 14px !important;    /* 🛠️ ALTERE AQUI: Aumente (Ex: 20px) para descer mais o texto */
}

/* 🚀 DESCE A ESTRELA ALADA DA PRIMEIRA CAIXA INDEPENDENTEMENTE */
.has-link .update-star {
  position: absolute !important;   /* Destrava a estrela para se mover livremente por pixels */
  top: -2px !important;
  left: 11px;
  width: 95%/* 🛠️ ALTERE AQUI: Aumente para descer a estrela, diminua para subir */
}

/* 🚀 DESCE O BADGE DE NEW DA PRIMEIRA CAIXA */
.has-link .new-badge {
  top: 5px !important;            /* 🛠️ ALTERE AQUI: Aumente para descer o badge, diminua para subir */
right: 11px
}

/* 🏷️ Imagem: blueroseleftcorner.webp (Rosa azul avulsa sobreposta ao Player de Música) */
.bluerose-player-corner {
  position: absolute !important;
  z-index: 290;                 /* Z-index bem alto para ficar acima do frame do player e do clique */
  pointer-events: none;         /* Impede que a rosa bloqueie o clique do arraste ou do botão */

  /* 🛠️ AJUSTE MANUAL DE POSIÇÃO (BASEADO NO TOPO ESQUERDO DO SEU PLAYER): */
  top: 210px;                   /* ALTERE AQUI: Aumente para descer a rosa, diminua para subir */
  left: -235px;                   /* ALTERE AQUI: Aumente para ir para a direita, diminua para a esquerda */
}

/* Força a imagem a obedecer uma largura mini coesa sem deformar a silhueta */
.bluerose-player-corner img {
  width: 55px !important;       /* ALTERE AQUI: Mude a largura em pixels para o tamanho visual ideal */
  height: auto !important;
  display: block !important;
}

/* ==========================================================================
   WIDGET RETRÔ ADO GIF (DRAGGABLE E TOTALMENTE INDEPENDENTE)
   ========================================================================== */

.draggable-gif-widget {
  position: absolute;
  z-index: 190;                /* Camada alta para flutuar acima das janelas fixas */
  
  /* 🛠️ AJUSTE MANUAL DA POSIÇÃO INICIAL DO GIF NA TELA: */
  /* Como o player de música começa em top: 50px e tem 170px + moldura, colocamos em top: 270px para ficar abaixo dele */
  top: 300px;                  /* ALTERE AQUI: Mude os pixels para subir ou descer o widget na tela */
  left: 50px;                  /* ALTERE AQUI: Alinhado na mesma linha horizontal do player de música */
}

.ado-lace-wrapper {
  padding: 12px;               /* Aplica o laceframe modular fixo por fora */
  background-clip: padding-box;
  background-color: #cbdcf0;   
}

/* 🛠️ AJUSTE MANUAL DE TAMANHO DO GIF DO COMPUTAODR: */
.ado-container-base {
  position: relative;
  width: 170px;                /* ALTERE AQUI: Largura da caixinha (mantive o tamanho do player menor) */
  height: 120px;               /* ALTERE AQUI: Altura da caixinha ajustada à proporção do gif */
  overflow: hidden;
}

.ado-content-gif {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;           /* Corta as bordas excedentes do gif sem achatar o pixel art */
  pointer-events: none;        /* 🚀 LIBERA O ARRASTE: O clique atravessa o gif e ativa a janela para mover */
}

/* 🏷️ Imagem: sleepingcinna.webp (Cinnamoroll dormindo avulso no cenário) */
.asset-sleeping-cinna {
  position: absolute !important;
  z-index: 20;                  /* Alinhado na mesma camada das outras decorações do quarto */
  
  /* 🛠️ COORDENADAS CONFIGURADAS EXATAMENTE COMO VOCÊ PEDIU: */
  top: 775px !important;                  
  left: -165px !important;       /* Valores menores ou positivos trazem ele mais para dentro da tela */
}

/* Força a tag da imagem a herdar a proporção correta sem achatar o pixel art */
.asset-sleeping-cinna img {
  width: auto;
  max-width: 120px !important;  /* ALTERE AQUI: Mude a largura em pixels para regular o tamanho dele */
  height: auto !important;
  display: block !important;
}

/* 🏷️ Imagem: adoro (Gatinha azul da Sanrio com asas na Nav) */
.adoro {
  position: absolute !important;
  z-index: 190;
  top: 240px !important;                  
  left: -235px !important;  
  
  /* 🎯 Define o centro da gatinha como o eixo fixo da rotação */
  transform-origin: center center !important;
  
  /* 🎯 Alterado de 3s para 6s para deixar a animação bem mais devagar */
  animation: balancoGatinha 6s ease-in-out infinite !important;
}

/* 🚀 SOLUÇÃO: Mira direto na imagem e força ela a encolher e respeitar os 30px */
.adoro img {
  width: 230px !important;        
  height: 230px !important;       
  display: block !important;
  object-fit: contain !important; 
}

/* 🔄 LINHA DO TEMPO DA ANIMAÇÃO */
@keyframes balancoGatinha {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(6deg);  
  }
  75% {
    transform: rotate(-6deg); 
  }
  100% {
    transform: rotate(0deg);  
  }
}