/* Harry Potter — el techo encantado del Gran Comedor: noche estrellada, dorado de velas y las cuatro casas. */

:root {
  --bg: #0d0b1c;
  --fondo:
    radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 15%, #fff9, transparent),
    radial-gradient(1.5px 1.5px at 45% 60%, #fff6, transparent), radial-gradient(1px 1px at 85% 75%, #fff8, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff7, transparent) 0 0 / 260px 260px,
    radial-gradient(900px 420px at 50% -120px, rgba(212, 175, 55, .18), transparent),
    linear-gradient(180deg, #14102b, #0d0b1c);
  --surface: #1a1633;
  --surface-2: #25204a;
  --borde: rgba(212, 175, 55, .28);
  --texto: #f3ecd8;
  --suave: #b8ae94;
  --acento: #d4af37;
  --grad: linear-gradient(180deg, #e7c55a, #b28b1f);
  --sobre-acento: #1a1204;
  --ok: #2f8f55;
  --sobre-ok: #fff;
  --casi: #c9a227;
  --sobre-casi: #1a1204;
  --mal: #6e2230;
  --sobre-mal: #ffe6ea;
  --r: 8px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Cinzel Decorative', 'Cinzel', serif;
  --cab-bg: rgba(13, 11, 28, .92);
}

.top { border-bottom: 1px solid var(--acento); box-shadow: 0 1px 12px rgba(212, 175, 55, .25); }
.top .logo b { background: none; color: var(--acento); -webkit-text-fill-color: var(--acento); }
.top .tema-link { font: 700 18px/1 'Cinzel Decorative', serif; color: var(--acento); }
h1.titulo { font-weight: 700; color: var(--acento); text-shadow: 0 0 18px rgba(212, 175, 55, .45); }
.btn { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .5px; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .varita { border: 1px solid var(--borde) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); }

.hp-hero { text-align: center; padding: 24px 0 32px; }
.hp-hero h1 { font: 700 clamp(44px, 10vw, 86px)/1.05 var(--font-d); color: var(--acento); text-shadow: 0 0 30px rgba(212, 175, 55, .5); }
.hp-hero p { color: var(--suave); margin-top: 12px; font-style: italic; }
.hp-hero .casas { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.juego .cuerpo b { font: 700 24px/1.1 var(--font-d); color: var(--acento); }
.juego .muestra { background: radial-gradient(circle at 50% 120%, rgba(212, 175, 55, .25), transparent 60%), #14102b; }

/* Escudo de cada casa */
.casa { display: inline-block; padding: 3px 10px; border-radius: 4px 4px 12px 12px; font: 700 12px/1.3 'Cinzel', serif; letter-spacing: .5px; }
.casa.Gryffindor { background: #740001; color: #eeba30; }
.casa.Slytherin { background: #1a472a; color: #c0c0c0; }
.casa.Hufflepuff { background: #ecb939; color: #372e29; }
.casa.Ravenclaw { background: #0e1a40; color: #d9a45b; border: 1px solid #946b2d; }

/* Varita: ficha de Ollivander */
.varita { position: relative; text-align: center; padding: 30px 18px 26px; border-radius: 10px; background: linear-gradient(180deg, #221c42, #15112b); }
.varita small { display: block; font: 700 11px/1 'Cinzel', serif; letter-spacing: 3px; color: var(--suave); text-transform: uppercase; }
.varita .palo { width: 70%; height: 10px; margin: 18px auto; border-radius: 6px; background: linear-gradient(90deg, #3a2412, #8a5a2b 70%, #f6e6b4 100%); box-shadow: 0 0 16px rgba(246, 230, 180, .55); }
.varita dl { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 14px; text-align: left; }
.varita dt { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.varita dd { font: 700 20px/1.1 'Cinzel', serif; color: var(--texto); }