/* FINDLEY GAMES · Pantalla de juego (barra, lienzo y menús) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--fg-fondo); color: var(--fg-texto); font-family: "Plus Jakarta Sans", system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--fg-cian); outline-offset: 2px; }

.sala-barra { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(10, 7, 20, .92), rgba(10, 7, 20, .6)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--fg-linea); }
.sala-volver { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; font-size: 26px; line-height: 1; padding-bottom: 3px; }
.sala-titulo { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.sala-titulo b { font-family: var(--fg-display); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-titulo span { font-size: 12px; color: var(--fg-gris); }
.sala-pase { padding: 4px 9px; border-radius: 99px; background: linear-gradient(135deg, var(--fg-oro), #ff9f1c); color: #1a1030; font-size: 11px; font-weight: 800; }
.sala-gemas { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid rgba(0, 229, 255, .3); border-radius: 99px; background: rgba(0, 229, 255, .08); color: #fff; cursor: pointer; font-size: 14px; }
.sala-gemas b { font-family: var(--fg-display); font-variant-numeric: tabular-nums; }
.sala-icono { width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-size: 15px; }

.escenario { position: fixed; inset: 56px 0 0 0; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 0%, #22164a 0%, transparent 70%), var(--fg-fondo); }
.escenario canvas { display: block; touch-action: none; border-radius: 6px; }

/* Pantallas encima del juego */
.sala-pantalla { position: fixed; inset: 56px 0 0 0; z-index: 10; display: none; place-items: center; padding: 16px; background: rgba(8, 5, 18, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sala-pantalla.ver { display: grid; animation: sala-entra .28s ease-out; }
@keyframes sala-entra { from { transform: translateY(10px); } }
.sala-caja { width: min(460px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.sala-pantalla.portada .sala-caja { padding-top: 8px; }
.sala-logo { font-family: var(--fg-display); font-weight: 700; font-size: clamp(42px, 11vw, 64px); line-height: .95; letter-spacing: -.02em; background: linear-gradient(135deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px color-mix(in srgb, var(--c1) 60%, transparent)); animation: flotar 3.5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-6px); } }
.sala-lema { color: var(--fg-gris); font-size: 15px; }
.sala-lema b { color: #fff; }
.sala-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.sala-stats div { padding: 12px 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--fg-linea); display: grid; }
.sala-stats b { font-family: var(--fg-display); font-size: 22px; }
.sala-stats span { font-size: 12px; color: var(--fg-gris); }
.sala-jugar { min-height: 58px; font-size: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--fg-lima), #64dd17); color: #0b1a00; box-shadow: 0 12px 30px rgba(198, 255, 0, .25); animation: latir 2.2s ease-in-out infinite; }
@keyframes latir { 50% { box-shadow: 0 12px 40px rgba(198, 255, 0, .45); } }
.sala-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sala-pase-btn { border: 1px dashed rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); color: var(--fg-oro); border-radius: 14px; padding: 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.sala-pase-btn:hover { background: rgba(255, 210, 63, .15); }
.sala-pase-ok { color: var(--fg-oro); font-weight: 700; font-size: 14px; }
.sala-ayuda { color: var(--fg-gris); font-size: 12.5px; opacity: .85; }
.sala-grande { font-family: var(--fg-display); font-size: 40px; line-height: 1; }

.sala-cab { display: flex; align-items: center; gap: 10px; }
.sala-cab h2 { flex: 1; font-family: var(--fg-display); font-size: 26px; text-align: left; }
.sala-atras { border: 0; background: rgba(255, 255, 255, .07); color: #fff; padding: 8px 12px; border-radius: 12px; cursor: pointer; font-weight: 700; }
.sala-total { font-family: var(--fg-display); color: var(--fg-oro); font-weight: 700; }
.sala-nota { font-size: 13px; color: var(--fg-gris); text-align: left; }
.sala-scroll { overflow: auto; max-height: calc(100dvh - 210px); padding: 2px 2px 16px; text-align: left; }
.sala-mundo { font-family: var(--fg-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-cian); margin: 14px 0 8px; }
.rejilla-niveles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ficha-nivel { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 2px; border-radius: 14px; border: 1px solid var(--fg-linea); background: linear-gradient(180deg, #2a1f4d, #1a1233); color: #fff; cursor: pointer; transition: transform .12s; }
.ficha-nivel:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--fg-violeta-2); }
.ficha-nivel b { font-family: var(--fg-display); font-size: 20px; }
.ficha-nivel .mini-est { font-size: 10px; color: var(--fg-oro); letter-spacing: 1px; }
.ficha-nivel.bloqueado { opacity: .35; cursor: not-allowed; }
.ficha-nivel.pago { border-color: rgba(255, 210, 63, .45); }
.ficha-nivel .corona { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--fg-oro); color: #1a1030; }

.rejilla-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ficha-skin { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--fg-linea); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; }
.ficha-skin.activa { border-color: var(--fg-lima); background: rgba(198, 255, 0, .07); }
.ficha-skin b { font-size: 13px; }
.ficha-skin small { font-size: 12px; color: var(--fg-lima); font-weight: 700; }
.ficha-skin small.precio { color: var(--fg-oro); }
.muestra { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, var(--b), var(--a)); box-shadow: 0 8px 24px color-mix(in srgb, var(--a) 50%, transparent); }
.muestra svg { width: 52px; height: 52px; }
.sala-gratis { background: linear-gradient(135deg, var(--fg-rosa), #ff6d00); }

.estrellas-grandes { display: flex; justify-content: center; gap: 6px; font-size: 54px; line-height: 1; }
.estrellas-grandes span { color: rgba(255, 255, 255, .15); }
.estrellas-grandes .si { color: var(--fg-oro); text-shadow: 0 0 24px rgba(255, 210, 63, .7); animation: estrella .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.estrellas-grandes span:nth-child(2) { font-size: 70px; margin-top: -10px; }
@keyframes estrella { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
.sala-premio { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--fg-display); font-size: 30px; }
.sala-premio em { font: 700 12px/1 "Plus Jakarta Sans", sans-serif; padding: 4px 8px; border-radius: 99px; background: var(--fg-oro); color: #1a1030; font-style: normal; }

/* Aviso de toque para empezar */
.aviso-toque { position: fixed; left: 50%; bottom: 12%; z-index: 5; transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; font-size: 14px; pointer-events: none; animation: parpadeo 1.2s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: .45; } }

.girar { display: none; position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 4; text-align: center; color: var(--fg-gris); font-size: 13px; pointer-events: none; }
.girar span { display: inline-block; animation: girar 2.4s ease-in-out infinite; }
@keyframes girar { 40%, 60% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) { .girar { display: block; } }
@media (max-width: 380px) { .rejilla-niveles { grid-template-columns: repeat(4, 1fr); } .sala-gemas { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .sala-logo, .sala-jugar, .aviso-toque { animation: none; } }