/* Dragon Ball — cielo naranja con líneas de velocidad, trazo de manga y la bola de 4 estrellas. */

:root {
  --bg: #ffb23f;
  --fondo:
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 255, 255, .13) 0 4deg, transparent 4deg 9deg),
    linear-gradient(180deg, #ff8a1f 0%, #ffc044 45%, #ffe9a8 100%);
  --surface: #fffaf0;
  --surface-2: #ffe7b8;
  --borde: #1b1b2f;
  --texto: #1b1b2f;
  --suave: #5b4a3a;
  --acento: #1f5fbf;
  --grad: linear-gradient(180deg, #2d74d6, #1a4fa0);
  --sobre-acento: #fff;
  --ok: #2fa84f;
  --sobre-ok: #fff;
  --casi: #ffd21f;
  --sobre-casi: #2a2100;
  --mal: #d92b2b;
  --sobre-mal: #fff;
  --r: 14px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Bangers', 'Inter', sans-serif;
  --cab-bg: #14142b;
  --naranja: #ff7a00;
}

/* Trazo grueso de manga en todo lo que es "panel" */
.tarjeta, .juego, .modal, .celda.pj, .pista, .intentos li, .campo input, .pixel, .tecnica { border: 3px solid var(--borde) !important; box-shadow: 4px 4px 0 var(--borde); }
.top { border-bottom: 4px solid var(--naranja); }
.top .logo { color: #fff; }
.top .logo b { background: none; color: var(--naranja); -webkit-text-fill-color: var(--naranja); }
.top .icono { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
.top .nav a { color: #c9c9e0; }
.top .tema-link { font-family: 'Bangers', sans-serif; font-size: 24px; letter-spacing: 1px; color: #ffcf33; }
.top .nav a.on { box-shadow: inset 0 -3px 0 var(--naranja); }
h1.titulo { font-weight: 400; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 2px var(--borde); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--borde); }
.subtitulo, .leyenda { color: #3a2a1a; }
.btn { border: 3px solid var(--borde); box-shadow: 3px 3px 0 var(--borde); font-family: 'Bangers', sans-serif; font-size: 20px; letter-spacing: 1px; }
.celda { border: 2px solid var(--borde); }

.db-hero { text-align: center; padding: 14px 0 28px; }
.db-hero .bola {
  width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; border: 3px solid var(--borde);
  background: radial-gradient(circle at 35% 30%, #fff6c8 0 10%, #ffb300 30%, #ff7a00 75%, #d85a00 100%);
  display: grid; place-items: center; color: #e0141e; font-size: 16px; letter-spacing: -2px; line-height: .8; text-align: center;
}
.db-hero h1 { font: 400 clamp(60px, 14vw, 110px)/.9 var(--font-d); letter-spacing: 3px; color: #ffcf33; -webkit-text-stroke: 3px var(--borde); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--borde); }
.db-hero h1 span { color: #fff; }
.db-hero p { color: #3a2a1a; font-weight: 600; margin-top: 10px; }
.juego .cuerpo b { font: 400 32px/1 var(--font-d); letter-spacing: 1px; }
.juego .muestra { background: repeating-conic-gradient(from 0deg at 50% 100%, #ffb84a 0 6deg, #ffc86b 6deg 12deg); border-bottom: 3px solid var(--borde); }

.pixel { background: radial-gradient(circle, #fff 0, #ffe7b8 70%); }
.tecnica {
  /* Sin imagen (delataría al personaje): solo el nombre, sobre un estallido de ki */
  position: relative; display: grid; place-items: center; text-align: center; min-height: 240px; padding: 30px 18px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, #fff 0 8%, #fff3a0 16%, #ffc21f 30%, transparent 58%),
    repeating-conic-gradient(from 0deg at 50% 55%, #1f5fbf 0 7deg, #2d74d6 7deg 14deg);
}
.tecnica small { display: block; font: 700 12px/1 var(--font); letter-spacing: 3px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tecnica b { display: block; margin-top: 10px; font: 400 clamp(34px, 8vw, 54px)/1 var(--font-d); letter-spacing: 2px; color: #ffcf33; -webkit-text-stroke: 2px var(--borde); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--borde); }
.tecnica i { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: #1b1b2f; background: rgba(255, 255, 255, .85); padding: 2px 10px; border-radius: 999px; }