@charset "UTF-8";

/* ==================================================
   CONFIGURAÇÕES GERAIS E IDENTIDADE VISUAL
   ================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #121212; /* Fundo escuro padrão do seu portfólio */
  min-height: 100vh;
  display: grid;
  place-items: center;
  -webkit-font-smoothing: antialiased;
  font-family: 'Monaco', 'Courier New', Courier, monospace; /* Sua fonte padrão */
  color: #e0e0e0;
  overflow-y: auto;        /* Permite rolagem vertical caso o conteúdo estoure */
  overflow-x: hidden;      /* Proíbe que a tela balance para os lados */
  padding: 40px 0;         /* Espaçamento de respiro no topo e na base */
}

.scene {
  perspective: 1000px;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

/* ==================================================
   ESTRUTURA TRIDIMENSIONAL DO CELULAR (DESKTOP)
   ================================================== */
.phone {
  width: 256px;
  height: 537px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease-out;
}

.back {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1a1a1a, #2d2d2d, #1a1a1a); /* Titânio Escuro */
  border-radius: 30px;
  transform: translateZ(-16px);
  border: 1px solid #333;
}

/* Laterais 3D do Aparelho */
.edge {
  position: absolute;
  background: linear-gradient(180deg, #262626, #1a1a1a, #262626);
}

.edge-r {
  top: 30px; bottom: 30px; right: 0; width: 16px;
  transform-origin: right center; transform: rotateY(-90deg);
}

.edge-l {
  top: 30px; bottom: 30px; left: 0; width: 16px;
  transform-origin: left center; transform: rotateY(90deg);
}

.edge-t {
  left: 30px; right: 30px; top: 0; height: 16px;
  transform-origin: center top; transform: rotateX(-90deg);
}

.edge-b {
  left: 30px; right: 30px; bottom: 0; height: 16px;
  transform-origin: center bottom; transform: rotateX(90deg);
}

.bezel {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #262626, #1a1a1a, #333);
  border-radius: 30px;
  padding: 4px;
  position: relative;
  transform: translateZ(1px);
  border: 1px solid #ff3333; /* Película Vermelha Fina */
}

.inner {
  width: 100%;
  height: 100%;
  background: #080808;
  border-radius: 27px;
  padding: 3px;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #080808;
}

/* Camada da película preta de privacidade */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: var(--priv-opacity, 0);
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply;
  transition: opacity 0.1s ease;
}

/* Papel de parede interno */
.wallpaper {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at center, #3a0000 0%, #0a0000 100%);
}

/* Interface do sistema */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px 0;
  position: relative;
  z-index: 10;
  font-size: 10px;
  color: #fff;
}

.status-icons {
  display: flex;
  gap: 6px;
}

/* Notificação do Sistema */
.notification {
  margin: 20px 10px 0;
  background: rgba(38, 38, 38, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(255, 51, 51, 0.4);
}

.notification::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: var(--notif-priv, 0);
  z-index: 15;
  border-radius: 12px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.notif-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 9px;
  color: #ff6666;
}

.notif-icon {
  color: #ff3333;
}

.notif-title {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}

.notif-body {
  font-size: 10px;
  color: #b3b3b3;
  margin-top: 4px;
}

/* Texto de Habilidades Interno */
.secret-content {
  position: absolute;
  top: 170px;
  left: 15px;
  right: 15px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 8px;
  border-left: 3px solid #ff3333;
}

.secret-content h3 {
  font-size: 12px;
  color: #ff3333;
  margin-bottom: 8px;
}

.secret-content p {
  font-size: 11px;
  color: #ccc;
  margin-bottom: 4px;
}

/* Barra inferior (Dock) */
.dock {
  position: absolute;
  bottom: 16px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-around;
  z-index: 10;
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 8px;
  border: 1px solid #333;
}

.dock-icon {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: white;
  background: #262626;
  transition: all 0.2s;
}

.dock-icon:hover {
  background: #ff3333;
  transform: translateY(-2px);
}

.home-bar {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  z-index: 10;
}

/* ==================================================
   PAINEL DE CONTROLE LATERAL DA DIREITA
   ================================================== */
.panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 280px;
  background: #1a1a1a;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #ff3333;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative; 
  z-index: 999; /* Prioridade inicial de empilhamento */
}

.panel a {
  position: relative;
  z-index: 1000; /* Garante que os links fiquem acima de tudo para aceitar o clique */
}

.panel-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff3333;
}

.panel-sub {
  font-size: 10px;
  color: #888;
  margin-top: 5px;
}

.mode-toggle {
  display: flex;
  background: #262626;
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
  font-family: inherit;
}

.mode-btn.active {
  background: #ff3333;
  color: #fff;
}

.angle-readout {
  font-size: 11px;
  color: #aaa;
}

.angle-val {
  color: #ff3333;
  font-weight: bold;
}

.hint {
  font-size: 10px;
  color: #666;
  line-height: 1.5;
}

/* ==================================================
   CORREÇÃO RESPONSIVA DEFINITIVA PARA CELULARES
   ================================================== */
@media (max-width: 600px) {
  body {
    overflow-y: auto !important; /* Força a rolagem da página para baixo no smartphone */
    overflow-x: hidden !important;
    height: auto !important;
    padding: 20px 10px !important;
  }

  .scene {
    flex-direction: column !important; /* Empilha o celular e o painel em pé */
    gap: 20px !important;
    width: 100% !important;
  }

   /* Mude apenas a regra .phone dentro da @media no seu galaxy.css */
  .phone {
    transform-style: preserve-3d !important; /* Libera o espaço 3D */
    pointer-events: none;       /* Mantém desativado o toque na imagem para não travar o seu dedo */
    margin: 30px auto !important;
    width: 240px !important;    
    height: 500px !important;
  }


  /* Redefine as quinas do celular de forma estática */
  .bezel, .inner, .screen, .wallpaper {
    border-radius: 20px !important;
  }

  /* Destrava e joga o painel com os botões para a camada master de clique */
  .panel {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 9999 !important; /* Permite rolar a tela e tocar nos links perfeitamente */
  }

  .panel a, .panel button, .wall-option {
    pointer-events: auto !important; /* Libera os eventos de clique ao toque do dedo */
  }
}