/* Base común del panel, el cartón en el móvil y la pantalla de sala */
:root {
  --ink: #111111; --paper: #FFFFFF; --mist: #F3F2EE; --line: #E2E0DA; --soft: #3E3E3A; --mute: #5E5E5A;
  --orange: #EB7445; --blue: #7EA5D7; --lime: #DADD63; --lilac: #D6C3E0; --peach: #F9BB82;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tiles { display: inline-flex; gap: .09em; font-family: var(--display); font-weight: 800; line-height: 1; font-size: var(--t, 20px); }
.tiles > span { width: 1.28em; height: 1.28em; border-radius: .34em; display: flex; align-items: center; justify-content: center; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.tiles > span:nth-child(1) { background: var(--orange); transform: rotate(-7deg) translateY(.06em); }
.tiles > span:nth-child(2) { background: var(--blue); transform: rotate(5deg) translateY(-.1em); }
.tiles > span:nth-child(3) { background: var(--lime); transform: rotate(-3deg) translateY(.02em); }
.tiles > span:nth-child(4) { background: var(--lilac); transform: rotate(6deg) translateY(-.05em); }
.tiles > span:nth-child(5) { background: var(--paper); border-radius: 50%; transform: rotate(-4deg) translateY(.04em); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 15px; background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn.alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.hot { background: var(--orange); color: var(--ink); }
.campo { display: block; font-size: 14px; font-weight: 700; }
.campo input, .campo textarea { display: block; width: 100%; margin-top: 4px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 13px; background: var(--paper); font-weight: 500; font-size: 16px; }
.gira { animation: gira 3.6s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pop { 0% { scale: .3; opacity: 0; } 70% { scale: 1.08; opacity: 1; } 100% { scale: 1; opacity: 1; } }
.casilla { position: relative; overflow: hidden; border: 0; background: var(--paper); color: var(--ink); text-align: left; }
.trazo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.trazo path { fill: none; stroke: var(--paper); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 480; }
.casilla.on { background: var(--c, var(--orange)); }
.casilla.on .trazo { opacity: 1; }
.casilla.on .trazo path { animation: traza .6s ease-out both; }
@keyframes traza { from { stroke-dashoffset: 480; } to { stroke-dashoffset: 0; } }
.caja { position: relative; display: block; width: fit-content; max-width: 100%; padding: 3px 6px; border-radius: 8px; transition: background-color .2s ease; }
.casilla.on .caja { background: var(--paper); }
.confeti { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.confeti i { position: absolute; top: -50px; width: var(--s); height: var(--s); border-radius: 26%; background: var(--c); animation: cae var(--t) cubic-bezier(.3,.2,.7,1) var(--d) both; }
@keyframes cae { to { transform: translateY(112vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .gira, .casilla.on .trazo path, .confeti i { animation: none; } }
/* Logotipo completo: b·i·n·g·o + la M de DOME con la serpiente que la recorre */
.marca { display: inline-flex; align-items: center; gap: .42em; font-size: var(--m, 20px); }
.marca .tiles { --t: 1em; }
.marca .tiles > span { box-shadow: none; }
.marca .tiles > span:nth-child(5) { background: var(--ink); color: var(--paper); }
.marca.oscura .tiles > span:nth-child(5) { background: var(--paper); color: var(--ink); }
.mm { display: inline-block; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.mm svg { display: inline-block; vertical-align: baseline; height: .6923em; margin-right: .03em; overflow: visible; }
.mm .base { fill: none; stroke: currentColor; stroke-width: 15; }
.mm .run { fill: none; stroke: var(--run, var(--orange)); stroke-width: 15; stroke-dasharray: 90 600; animation: serpiente 4s linear infinite; }
@keyframes serpiente { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -600; } }
/* Barras de sonido y serpiente en movimiento */
.eq { display: inline-flex; align-items: flex-end; gap: .15em; height: 1em; }
.eq i { display: block; width: .18em; height: 100%; border-radius: .1em; transform-origin: 50% 100%; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(5n+1) { background: var(--orange); } .eq i:nth-child(5n+2) { background: var(--blue); animation-delay: -.25s; } .eq i:nth-child(5n+3) { background: var(--lime); animation-delay: -.55s; } .eq i:nth-child(5n+4) { background: var(--lilac); animation-delay: -.8s; } .eq i:nth-child(5n) { background: var(--peach); animation-delay: -.4s; }
@keyframes eq { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.tira { display: block; overflow: hidden; }
.tira svg { display: block; animation: tira 1.1s linear infinite; }
.tira path { fill: none; stroke: var(--tira, var(--lime)); stroke-width: 8.8; }
@keyframes tira { to { transform: translateX(var(--p, -40px)); } }
@media (prefers-reduced-motion: reduce) { .mm .run, .eq i, .tira svg { animation: none; } .mm .run { display: none; } }