/* RESET BÁSICO */
body {
  margin: 0;
  font-family: "Courier New", monospace;
  color: #222;
  text-align: center;
  background-color: #ffeaf4;
  background-image: linear-gradient(#0002 1px, transparent 1px),
                    linear-gradient(90deg, #0002 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Filtro CRT scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 2px,
    transparent 3px
  );
  z-index: 999;
}

/* ENCABEZADO Y PIE */
header {
  margin: 40px 0 20px;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}

header h1 {
  font-size: 2rem;
  margin: 0;
}

header p {
  font-size: 1rem;
  margin: 10px 0 0;
}

footer {
  margin: 40px 0 20px;
  font-size: 0.9rem;
  color: #444;
  border-top: 2px solid #000;
  padding-top: 10px;
}

/* GRID DE IDIOMAS */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px;
}

/* CAJAS DE IDIOMA */
.language-box {
  display: block;
  background-color: #fff;
  border: 2px solid #000;
  text-decoration: none;
  color: #000;
  padding: 20px;
  font-weight: bold;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-shadow: 4px 4px 0px #888;
}

.language-box:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 6px 6px 0px #000;
}

.language-box .flag {
  display: block;
  font-size: 2rem;
  margin-bottom: 8px;
}

/* SELECTOR DE TRADUCCIÓN */
.translate-menu label {
  margin-right: 6px;
  font-weight: bold;
}

.translate-menu select {
  border: 2px solid #000;
  background: #fff;
  padding: 4px 8px;
  font-family: "Courier New", monospace;
}

/* 🌬️ BURBUJAS FLOTANTES */
.floating-deco {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background-color: #9c9c9c;
  opacity: 0.5;
  animation: floaty 8s infinite ease-in-out;
  filter: blur(1px);
}

.bubble.one   { width: 40px; height: 40px; top: 100px; right: 30px; }
.bubble.two   { width: 25px; height: 25px; top: 180px; right: 60px; }
.bubble.three { width: 20px; height: 20px; top: 250px; right: 20px; }
.bubble.four  { width: 30px; height: 30px; bottom: 80px; left: 30px; }
.bubble.five  { width: 20px; height: 20px; bottom: 150px; left: 70px; }
.bubble.six   { width: 15px; height: 15px; bottom: 230px; left: 40px; }

@keyframes floaty {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

/* ✨ Glitch effect para el logo Aidomi (texto) */
.brand {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 2.5rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

.brand::before,
.brand::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
}

.brand::before {
  left: 2px;
  text-shadow: -2px 0 red;
  animation: glitch-top 2s infinite linear alternate-reverse;
}

.brand::after {
  left: -2px;
  text-shadow: -2px 0 blue;
  animation: glitch-bottom 1.5s infinite linear alternate-reverse;
}

@keyframes glitch-skew {
  0%,100% { transform: skew(0deg); }
  20% { transform: skew(2deg); }
  40% { transform: skew(-2deg); }
  60% { transform: skew(1deg); }
  80% { transform: skew(-1deg); }
}

@keyframes glitch-top {
  0%,40%,80% { clip: rect(0, 9999px, 0, 0); }
  20% { clip: rect(0, 9999px, 50px, 0); }
  60% { clip: rect(0, 9999px, 30px, 0); }
  100% { clip: rect(0, 9999px, 40px, 0); }
}

@keyframes glitch-bottom {
  0% { clip: rect(100px, 9999px, 100px, 0); }
  20% { clip: rect(60px, 9999px, 9999px, 0); }
  40% { clip: rect(80px, 9999px, 9999px, 0); }
  60% { clip: rect(40px, 9999px, 9999px, 0); }
  80% { clip: rect(70px, 9999px, 9999px, 0); }
  100% { clip: rect(50px, 9999px, 9999px, 0); }
}

/* PALABRA DEL DÍA */
#daily-word {
  margin: 30px auto;
  padding: 15px 20px;
  max-width: 500px;
  border: 2px solid #000;
  background: #f8f8f8;
  box-shadow: 4px 4px 0px #888;
  font-family: "Courier New", monospace;
  text-align: center;
  border-radius: 6px;
}

#daily-word p { margin: 0; font-size: 1.1rem; }

#daily-word strong {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 6px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ✨ Efecto azul brillante retro */
.highlight-text {
  color: #0af;
  text-shadow: 
    0 0 4px #0af,
    0 0 8px #08f,
    0 0 12px #00f;
  animation: glow-flicker 2s infinite alternate;
}

@keyframes glow-flicker {
  0%   { text-shadow: 0 0 2px #0af, 0 0 6px #08f; }
  50%  { text-shadow: 0 0 6px #0af, 0 0 12px #0ff, 0 0 20px #08f; }
  100% { text-shadow: 0 0 3px #0af, 0 0 8px #08f; }
}

/* Logo en esquina */
.logo-link {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 10;
}

/* Logo dinámico */
.retro-logo {
  width: 120px;  /* ancho base para evitar gigantismo */
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.retro-logo-lat { width: 120px; }
.retro-logo-ja { width: 160px; }

.retro-logo:hover {
  transform: scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 0 8px #0ff) drop-shadow(0 0 15px #f0f);
}

/* Glitch animación en cambio */
@keyframes glitch-flicker {
  0% { opacity: 1; transform: translate(0,0); }
  20% { opacity: 0.6; transform: translate(-2px,2px) scale(1.02); filter: hue-rotate(30deg); }
  40% { opacity: 0.8; transform: translate(2px,-2px) scale(0.98); filter: hue-rotate(-30deg); }
  60% { opacity: 0.4; transform: translate(-3px,1px); filter: contrast(200%); }
  80% { opacity: 0.9; transform: translate(1px,-1px); }
  100% { opacity: 1; transform: translate(0,0); filter: none; }
}

.glitching { animation: glitch-flicker 0.4s linear; }