/* =================================================================
   portal-sonhos.css · Portal II · Sonhos
   Estilo: PÁGINA PESSOAL DE 1999 (Web 1.0)
   Ligado a: portais.html · afeta apenas .portal-sonhos
   [CONEXÃO PENDENTE] Reaproveite este arquivo em sonhos.html
   Usa só fontes do sistema (Times, Comic Sans, Arial, Courier), como na época.
   ================================================================= */

.portal-sonhos {
  /* Céu estrelado desenhado em SVG embutido (não depende de imagem externa) */
  background: #000010 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ccircle cx='12' cy='14' r='1' fill='%23fff'/%3E%3Ccircle cx='60' cy='38' r='1.4' fill='%23ffff99'/%3E%3Ccircle cx='33' cy='72' r='.8' fill='%23fff'/%3E%3Ccircle cx='80' cy='80' r='1' fill='%23aaccff'/%3E%3C/svg%3E");
  color: #fff;
  font: 15px/1.45 "Times New Roman", Times, serif;
  text-align: center;
}

.portal-sonhos .portal__corpo { padding: 18px 18px 22px; gap: 14px; align-items: center; }

/* Letreiro rolante (substitui a antiga tag <marquee>) */
.ps-letreiro {
  background: #000080; color: #00FF00;
  font: 13px "Courier New", monospace;
  white-space: nowrap; overflow: hidden;
  padding: 5px 0;
  border-bottom: 2px ridge #C0C0C0;
}
.ps-letreiro span { display: inline-block; padding-left: 100%; animation: ps-rolar 18s linear infinite; }
@keyframes ps-rolar { to { transform: translateX(-100%); } }

.ps-rotulo { font: bold 11px Arial, sans-serif; letter-spacing: .2em; color: #9999CC; }

/* Título em Comic Sans amarelo com sombra rosa */
.portal-sonhos h2 {
  margin: 4px 0 0;
  font: bold clamp(34px, 4vw, 48px) "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  color: #FFFF00;
  text-shadow: 3px 3px #FF00FF;
}
.ps-sub { font-style: italic; color: #F2E6C4; }

/* Divisor arco-íris */
.ps-arco-iris { width: 100%; height: 5px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet); }

/* Tabela com bordas em relevo (outset/inset), típica dos anos 90 */
.ps-tabela {
  width: 100%;
  border: 3px outset #C0C0C0;
  border-collapse: separate; border-spacing: 3px;
  background: #000044;
  font-size: 14px; text-align: left;
}
.ps-tabela th { background: #000080; font: bold 13px Arial, sans-serif; padding: 4px 6px; border: 2px inset #C0C0C0; }
.ps-tabela td { border: 2px inset #C0C0C0; padding: 5px 6px; vertical-align: top; }
.ps-tabela td:first-child { color: #00FFFF; white-space: nowrap; }

/* Selo "NEW" piscando */
.ps-novo { background: red; color: #fff; font: bold 10px Arial, sans-serif; padding: 0 3px; animation: ps-piscar 1s steps(1) infinite; }
@keyframes ps-piscar { 50% { visibility: hidden; } }

/* Botão cinza em relevo, estilo Windows 98 */
.ps-entrar {
  margin-top: auto;
  display: inline-block;
  padding: 8px 18px;
  background: #C0C0C0; color: #000;
  border: 3px outset #fff;
  font: bold 15px Arial, sans-serif;
  text-decoration: none;
}
.ps-entrar:active { border-style: inset; }

/* Quem prefere menos movimento: sem letreiro rolando e sem piscar */
@media (prefers-reduced-motion: reduce) {
  .ps-letreiro span, .ps-novo { animation: none; }
}