/* ============================================================
   ZONA GAMER 2026 — sistema visual y chasis de app
   ------------------------------------------------------------
   Pensado primero para el celular (la zona va a vivir como app):
   barra superior corta, contenido en una columna y barra de
   pestañas abajo, al alcance del pulgar. En computador la misma
   pieza se abre a varias columnas y las pestañas suben al lado.

   Personalidad: noche profunda + colores de juego que se usan
   con medida. Lima = jugar (la acción principal, siempre la
   misma). Sol = fichas. Uva/rosa = gemas. Cielo = información.
   Botones gruesos con borde inferior que se hunden al tocarlos,
   como en los juegos de celular que la gente ya conoce.

   Tipos: Bricolage Grotesque (títulos) + Rubik (todo lo demás).
   Nada de emojis: íconos de Font Awesome y dibujos propios.

   Las páginas viejas (arcade.css / gamer.css) siguen sirviendo:
   al final de este archivo se les cambian los tokens --a-* para
   que hablen el mismo idioma visual.
   ============================================================ */

:root {
    --zg-bg: #090c1a;
    --zg-bg-2: #0f1328;
    --zg-card: #151a35;
    --zg-card-2: #1c2246;
    --zg-card-3: #252c57;
    --zg-line: rgba(255, 255, 255, .07);
    --zg-line-2: rgba(255, 255, 255, .13);
    --zg-text: #f5f6ff;
    --zg-dim: #aab0d8;
    --zg-muted: #7179a6;

    --zg-lime: #b9f43c;
    --zg-lime-d: #6fa112;
    --zg-lime-ink: #0d1406;
    --zg-sun: #ffc93c;
    --zg-sun-d: #c98a00;
    --zg-gem: #c77dff;
    --zg-gem-d: #8a3fd1;
    --zg-sky: #4cc3ff;
    --zg-sky-d: #1677b8;
    --zg-coral: #ff5d5d;
    --zg-coral-d: #c22c2c;
    --zg-grape: #7b61ff;
    --zg-grape-d: #4b33c9;
    --zg-mint: #3ee6a8;

    --zg-display: 'Bricolage Grotesque', 'Rubik', system-ui, sans-serif;
    --zg-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --zg-top-h: 56px;
    --zg-nav-h: 66px;
    --zg-r: 20px;
    --zg-r-sm: 14px;
    --zg-max: 1180px;
    --zg-ease: cubic-bezier(.2, .8, .2, 1);
    --zg-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ───────── Base ───────── */
.zg-html { background: var(--zg-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
.zg-app {
    margin: 0;
    min-height: 100dvh;
    background:
        radial-gradient(900px 420px at 85% -120px, rgba(123, 97, 255, .16), transparent 70%),
        radial-gradient(700px 380px at -10% 10%, rgba(76, 195, 255, .08), transparent 70%),
        var(--zg-bg);
    background-attachment: fixed;
    color: var(--zg-text);
    font-family: var(--zg-font);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}
.zg-app *, .zg-app *::before, .zg-app *::after { box-sizing: border-box; }
.zg-app [hidden] { display: none !important; }
.zg-app a { color: inherit; text-decoration: none; }
.zg-app button, .zg-app input, .zg-app select, .zg-app textarea { font-family: inherit; }
.zg-app img { max-width: 100%; }
.zg-app :focus-visible { outline: 3px solid var(--zg-lime); outline-offset: 2px; border-radius: 10px; }
.zg-app ::selection { background: var(--zg-lime); color: var(--zg-lime-ink); }

.zg-skip {
    position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 12px;
    background: var(--zg-lime); color: var(--zg-lime-ink) !important; font-weight: 700;
}
.zg-skip:focus { top: 10px; }

/* ───────── Barra superior ───────── */
.zg-top {
    position: sticky; top: 0; z-index: 70;
    padding-top: env(safe-area-inset-top);
    background: rgba(9, 12, 26, .78);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
}
.zg-top.is-scrolled { border-bottom-color: var(--zg-line); background: rgba(9, 12, 26, .92); }
.zg-top-in {
    max-width: var(--zg-max); height: var(--zg-top-h); margin: 0 auto; padding: 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.zg-brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin-right: auto; }
.zg-mark { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
.zg-brand-name { font-family: var(--zg-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; white-space: nowrap; }
.zg-brand-name b { color: var(--zg-lime); font-weight: 800; }

.zg-back {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; margin-right: 2px;
    background: rgba(255, 255, 255, .06); color: var(--zg-text); border: 0; cursor: pointer; font-size: 1rem;
}
.zg-back:active { transform: scale(.94); }

/* Monedero: fichas y gemas siempre a la vista. */
.zg-purse { display: inline-flex; align-items: center; gap: 6px; }
.zg-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 5px;
    border-radius: 999px; font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--zg-line-2); color: var(--zg-text);
    white-space: nowrap; transition: transform .15s var(--zg-spring);
}
.zg-pill:active { transform: scale(.95); }
.zg-pill .zg-ico-coin, .zg-pill .zg-ico-gem { width: 24px; height: 24px; }
.zg-pill.is-bump { animation: zg-bump .5s var(--zg-spring); }
@keyframes zg-bump { 30% { transform: scale(1.18); } }

.zg-ico-coin, .zg-ico-gem, .zg-ico-ticket { display: inline-block; width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -.25em; }

.zg-me-btn {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
    background: var(--zg-card-2); box-shadow: 0 0 0 2px var(--zg-lime); overflow: hidden;
}
.zg-me-btn img { width: 100%; height: 100%; object-fit: cover; }

/* Escritorio: las pestañas suben a la barra superior. */
.zg-topnav { display: none; }

/* Teléfonos angostos: que nada se monte. «Entrar» sigue a mano en la hoja de
   registro (pestaña «Ya tengo cuenta») y en «Yo». */
@media (max-width: 399px) {
    .zg-top-in > .zg-b.is-ghost[data-zg-auth="login"] { display: none; }
}
@media (max-width: 459px) {
    .zg-back ~ .zg-brand .zg-brand-name { display: none; }
}
@media (max-width: 379px) {
    .zg-app.is-member .zg-brand-name { display: none; }
}
@media (max-width: 359px) {
    .zg-brand-name { display: none; }
}

/* ───────── Botones ───────── */
.zg-b {
    --b: var(--zg-lime); --b-d: var(--zg-lime-d); --b-ink: var(--zg-lime-ink);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 20px; border-radius: 16px; border: 0; cursor: pointer;
    font-family: var(--zg-display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap;
    color: var(--b-ink) !important; background: var(--b);
    box-shadow: 0 4px 0 var(--b-d), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .1);
    transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
    user-select: none; -webkit-user-select: none; text-decoration: none;
}
.zg-b:hover { filter: brightness(1.06); }
.zg-b:active, .zg-b.is-pressed { transform: translateY(4px); box-shadow: 0 0 0 var(--b-d), inset 0 2px 0 rgba(255, 255, 255, .25); }
.zg-b i { font-size: .95em; }
.zg-b.is-sm { min-height: 38px; padding: 0 14px; border-radius: 13px; font-size: .88rem; box-shadow: 0 3px 0 var(--b-d), inset 0 2px 0 rgba(255, 255, 255, .3); }
.zg-b.is-sm:active { transform: translateY(3px); }
.zg-b.is-lg { min-height: 58px; padding: 0 26px; border-radius: 18px; font-size: 1.14rem; }
.zg-b.is-block { width: 100%; }
.zg-b.is-sun { --b: var(--zg-sun); --b-d: var(--zg-sun-d); --b-ink: #2a1a00; }
.zg-b.is-gem { --b: var(--zg-gem); --b-d: var(--zg-gem-d); --b-ink: #1f0636; }
.zg-b.is-sky { --b: var(--zg-sky); --b-d: var(--zg-sky-d); --b-ink: #021727; }
.zg-b.is-coral { --b: var(--zg-coral); --b-d: var(--zg-coral-d); --b-ink: #fff; }
.zg-b.is-grape { --b: var(--zg-grape); --b-d: var(--zg-grape-d); --b-ink: #fff; }
.zg-b.is-ghost {
    --b: rgba(255, 255, 255, .08); --b-d: rgba(0, 0, 0, .35); --b-ink: var(--zg-text);
    box-shadow: 0 4px 0 var(--b-d), inset 0 0 0 1px var(--zg-line-2);
}
.zg-b.is-ghost.is-sm { box-shadow: 0 3px 0 var(--b-d), inset 0 0 0 1px var(--zg-line-2); }
.zg-b[disabled], .zg-b.is-busy { opacity: .55; pointer-events: none; }
.zg-b.is-busy::after {
    content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent;
    animation: zg-spin .7s linear infinite;
}
@keyframes zg-spin { to { transform: rotate(360deg); } }

.zg-link { color: var(--zg-lime) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.zg-link i { font-size: .8em; transition: transform .2s ease; }
.zg-link:hover i { transform: translateX(3px); }

.zg-iconbtn {
    display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .07); color: var(--zg-text); font-size: 1rem; transition: background .15s ease, transform .1s ease;
}
.zg-iconbtn:hover { background: rgba(255, 255, 255, .12); }
.zg-iconbtn:active { transform: scale(.93); }
.zg-iconbtn.is-on { background: rgba(185, 244, 60, .16); color: var(--zg-lime); }

/* ───────── Contenido ───────── */
.zg-main {
    max-width: var(--zg-max); margin: 0 auto;
    padding: 14px 16px calc(var(--zg-nav-h) + 34px + env(safe-area-inset-bottom));
    min-height: calc(100dvh - var(--zg-top-h));
}
.zg-main.is-wide { max-width: none; padding-left: 0; padding-right: 0; }

.zg-h1 { font-family: var(--zg-display); font-weight: 800; font-size: clamp(1.7rem, 6.4vw, 2.6rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.zg-h2 { font-family: var(--zg-display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.zg-lead { color: var(--zg-dim); margin: 6px 0 0; font-size: .98rem; }
.zg-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--zg-lime); }

.zg-sec { margin: 30px 0 0; }
.zg-sec:first-child { margin-top: 6px; }
.zg-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.zg-sec-head p { margin: 3px 0 0; color: var(--zg-muted); font-size: .86rem; }

.zg-card {
    position: relative; border-radius: var(--zg-r); background: var(--zg-card);
    border: 1px solid var(--zg-line); padding: 16px;
}
.zg-card.is-flat { background: rgba(255, 255, 255, .035); }

/* Fila desplazable (estantes): pasa de largo en el celular sin barra visible. */
.zg-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: var(--col, 44%); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none;
}
.zg-row::-webkit-scrollbar { display: none; }
.zg-row > * { scroll-snap-align: start; min-width: 0; }

/* ───────── Tarjeta de juego ───────── */
.zg-game {
    --c: var(--zg-lime);
    position: relative; display: block; border-radius: 18px; overflow: hidden;
    background: var(--zg-card); border: 1px solid var(--zg-line);
    transition: transform .2s var(--zg-ease), border-color .2s ease, box-shadow .25s ease;
    isolation: isolate;
}
.zg-game:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.zg-game:active { transform: scale(.97); }
.zg-game-shot {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 40%, #151a35), #0d1126);
}
.zg-game-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--zg-ease); }
.zg-game:hover .zg-game-shot img { transform: scale(1.06); }
.zg-game-shot .zg-game-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; color: var(--c); opacity: .9; }
.zg-game-shot::after {
    content: ''; position: absolute; inset: auto 0 0; height: 45%;
    background: linear-gradient(transparent, rgba(9, 12, 26, .55));
    pointer-events: none;
}
.zg-game-body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.zg-game-name { font-family: var(--zg-display); font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-game-meta { font-size: .78rem; color: var(--zg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.zg-game-meta i { color: var(--c); font-size: .8em; }
.zg-game-tag {
    position: absolute; top: 9px; left: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    background: rgba(9, 12, 26, .78); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.zg-game-tag.is-new { background: var(--zg-lime); color: var(--zg-lime-ink); }
.zg-game-tag.is-hot { background: var(--zg-coral); }
.zg-game-tag.is-daily { background: var(--zg-sun); color: #2a1a00; }
.zg-game-best {
    position: absolute; right: 9px; top: 9px; z-index: 2; padding: 4px 8px; border-radius: 999px;
    background: rgba(9, 12, 26, .78); font-size: .68rem; font-weight: 700; color: var(--zg-sun);
    display: inline-flex; align-items: center; gap: 4px;
}
.zg-game-play {
    position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; background: var(--zg-lime); color: var(--zg-lime-ink); font-size: .85rem;
    box-shadow: 0 3px 0 var(--zg-lime-d); opacity: 0; transform: translateY(6px) scale(.9);
    transition: opacity .2s ease, transform .25s var(--zg-spring);
}
.zg-game:hover .zg-game-play, .zg-game:focus-visible .zg-game-play { opacity: 1; transform: none; }

/* Versión mini (sigue jugando). */
.zg-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: var(--zg-card); border: 1px solid var(--zg-line); min-width: 0; }
.zg-mini img, .zg-mini .zg-mini-ico { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: 0 0 54px; background: var(--zg-card-2); display: grid; place-items: center; }
.zg-mini strong { display: block; font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-mini small { color: var(--zg-muted); font-size: .76rem; }
.zg-mini > span { min-width: 0; flex: 1; }
.zg-mini .zg-mini-go { color: var(--zg-lime); font-size: 1.1rem; }

/* ───────── Chips ───────── */
.zg-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.zg-chips::-webkit-scrollbar { display: none; }
.zg-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
    border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--zg-line-2);
    font-weight: 600; font-size: .86rem; color: var(--zg-dim); cursor: pointer; white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.zg-chip i { font-size: .85em; }
.zg-chip:hover { color: var(--zg-text); }
.zg-chip:active { transform: scale(.95); }
.zg-chip.is-on { background: var(--zg-text); color: var(--zg-bg); border-color: var(--zg-text); }

/* ───────── Barra de pestañas (abajo, celular) ───────── */
.zg-nav {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(12, 15, 33, .94);
    backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-top: 1px solid var(--zg-line);
    display: grid; grid-template-columns: repeat(5, 1fr);
}
.zg-nav a {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
    height: 54px; border-radius: 16px; color: var(--zg-muted); font-size: .7rem; font-weight: 600; letter-spacing: .01em;
    transition: color .15s ease;
}
.zg-nav a i { font-size: 1.22rem; line-height: 1; transition: transform .25s var(--zg-spring); }
.zg-nav a:active i { transform: scale(.85); }
.zg-nav a.is-on { color: var(--zg-text); }
.zg-nav a.is-on i { color: var(--zg-lime); transform: translateY(-1px); }
.zg-nav a.is-on::before {
    content: ''; position: absolute; top: -6px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 4px 4px;
    background: var(--zg-lime); box-shadow: 0 0 14px var(--zg-lime);
}
.zg-nav .zg-dot {
    position: absolute; top: 6px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--zg-coral); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center;
    box-shadow: 0 0 0 2px #0c0f21;
}

/* Sala de juego: sin pestañas abajo, toda la pantalla para jugar. */
.zg-app.is-playing .zg-nav { display: none; }
.zg-app.is-playing .zg-main { padding-bottom: 24px; }

/* ───────── Hoja (modal desde abajo) ───────── */
.zg-sheet2 { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; }
.zg-sheet2-bg { position: absolute; inset: 0; background: rgba(3, 5, 14, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: zg-fade .2s ease; }
.zg-sheet2-card {
    position: relative; width: 100%; max-width: 520px; margin: 0 auto; max-height: 92dvh; overflow: auto;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
    background: var(--zg-bg-2); border: 1px solid var(--zg-line-2); border-bottom: 0;
    box-shadow: 0 -30px 80px -30px rgba(0, 0, 0, .9);
    animation: zg-up .34s var(--zg-ease);
}
.zg-sheet2-card::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 99px; background: var(--zg-line-2); margin: 0 auto 14px; }
.zg-sheet2-x { position: absolute; right: 12px; top: 12px; }
@keyframes zg-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zg-fade { from { opacity: 0; } }
@media (min-width: 720px) {
    .zg-sheet2 { align-items: center; }
    .zg-sheet2-card { border-radius: 26px; border-bottom: 1px solid var(--zg-line-2); }
}

/* ───────── Avisos ───────── */
.zg-flashes { max-width: var(--zg-max); margin: 10px auto 0; padding: 0 16px; display: grid; gap: 8px; }
.zg-flash { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: .9rem; border: 1px solid var(--zg-line-2); background: var(--zg-card); }
.zg-flash.is-success { border-color: rgba(62, 230, 168, .35); background: rgba(62, 230, 168, .1); color: #a6f5d6; }
.zg-flash.is-error { border-color: rgba(255, 93, 93, .4); background: rgba(255, 93, 93, .1); color: #ffb3b3; }
.zg-flash.is-info { border-color: rgba(76, 195, 255, .35); background: rgba(76, 195, 255, .08); color: #bde9ff; }

.zg-foot {
    max-width: var(--zg-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
    padding: 18px 16px calc(var(--zg-nav-h) + 30px + env(safe-area-inset-bottom));
    font-size: .76rem; color: var(--zg-muted);
}
.zg-foot a:hover { color: var(--zg-text); }
.zg-app.has-foot .zg-main { padding-bottom: 8px; }

/* Selector de idioma: en la zona vive dentro de "Yo", no flotando sobre la barra. */
.zg-app > .globality-lang-wrap { display: none !important; }
.zg-lang-slot .globality-lang-wrap { position: static !important; inset: auto !important; transform: none !important; display: inline-block !important; }
.zg-lang-slot .globality-lang-menu { bottom: calc(100% + 8px) !important; top: auto !important; right: auto !important; left: 0 !important; }

/* ───────── Toast ───────── */
.zg-toast2 {
    position: fixed; z-index: 140; left: 50%; top: calc(var(--zg-top-h) + 10px + env(safe-area-inset-top));
    transform: translateX(-50%); width: min(420px, calc(100% - 24px));
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
    background: var(--zg-card-2); border: 1px solid var(--zg-line-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
    animation: zg-drop .4s var(--zg-spring);
}
.zg-toast2 strong { display: block; font-weight: 700; }
.zg-toast2 small { color: var(--zg-dim); }
@keyframes zg-drop { from { transform: translate(-50%, -16px); opacity: 0; } }

/* ───────── Movimiento ───────── */
.zg-in { animation: zg-rise .5s var(--zg-ease) both; }
.zg-in:nth-child(2) { animation-delay: .04s; } .zg-in:nth-child(3) { animation-delay: .08s; } .zg-in:nth-child(4) { animation-delay: .12s; }
.zg-in:nth-child(5) { animation-delay: .16s; } .zg-in:nth-child(6) { animation-delay: .2s; }
@keyframes zg-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    .zg-app *, .zg-app *::before, .zg-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────── Escritorio ───────── */
@media (min-width: 900px) {
    :root { --zg-top-h: 68px; }
    .zg-top-in { padding: 0 24px; gap: 18px; }
    .zg-brand { margin-right: 0; }
    .zg-topnav { display: flex; gap: 4px; margin-right: auto; margin-left: 18px; }
    .zg-topnav a {
        display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 13px;
        font-weight: 600; font-size: .92rem; color: var(--zg-dim); transition: background .15s ease, color .15s ease;
    }
    .zg-topnav a:hover { background: rgba(255, 255, 255, .06); color: var(--zg-text); }
    .zg-topnav a.is-on { background: rgba(185, 244, 60, .12); color: var(--zg-lime); }
    .zg-topnav .zg-dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--zg-coral); color: #fff; font-size: .66rem; display: grid; place-items: center; }
    .zg-nav { display: none; }
    .zg-main { padding: 26px 24px 60px; }
    .zg-foot { padding-bottom: 40px; }
    .zg-row { --col: 23%; margin: 0; padding: 2px 0 10px; }
    .zg-chips { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; }
}

/* ============================================================
   Puente con las pantallas viejas (arcade.css / gamer.css)
   Mismos tokens --a-* con la paleta nueva, para que tienda,
   pase, avatar, logros y Gamer Card se vean de la misma familia.
   ============================================================ */
.zg-html .arcade {
    --a-bg: transparent;
    --a-panel: #151a35;
    --a-panel-shadow: none;
    --a-line: rgba(255, 255, 255, .07);
    --a-line-2: rgba(255, 255, 255, .14);
    --a-text: #f5f6ff;
    --a-dim: #aab0d8;
    --a-muted: #7179a6;
    --a-accent: #7b61ff;
    --a-accent-2: #4cc3ff;
    --a-gold: #ffc93c;
    --a-card-bg: #151a35;
    --a-card-shadow: none;
    --a-aurora-opacity: 0;
    --a-dots-color: transparent;
    --a-ring-bg: radial-gradient(circle at 50% 30%, #252c57, #151a35 70%);
    --a-title-gradient: linear-gradient(120deg, #f5f6ff 40%, #b9f43c);
    --a-result-gradient: linear-gradient(180deg, #ffffff, #b9f43c);
    --a-toast-bg: #1c2246;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: var(--zg-font) !important;
    overflow: visible !important;
}
.zg-html .arcade h1, .zg-html .arcade h2, .zg-html .arcade h3 { font-family: var(--zg-display); letter-spacing: -.02em; }
.zg-html .arcade .arcade-shell, .zg-html .gamer .arcade-shell { max-width: none; padding: 0; }
.zg-html .arcade .a-aurora, .zg-html .arcade .a-dots, .zg-html .arcade::before, .zg-html .arcade::after { display: none !important; }
/* La barra de secciones vieja sobra: la navegación es la barra de pestañas. */
.zg-html .g-subnav, .zg-html .g-tabs.is-zone-nav { display: none !important; }

/* ============================================================
   INICIO
   ============================================================ */
.zg-hl { color: var(--zg-lime); position: relative; white-space: nowrap; }
.zg-hl::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; border-radius: 99px; background: var(--zg-lime); opacity: .35; }
.zg-hello { margin: 4px 0 16px; }
.zg-hello .zg-h1 { margin-top: 8px; }
.zg-hello.is-member { padding: 14px 16px; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-hello-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zg-hello-hi { display: block; font-family: var(--zg-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.1; }
.zg-hello-lv { display: block; color: var(--zg-dim); font-size: .84rem; margin-top: 2px; }
.zg-xp { height: 10px; margin-top: 12px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.zg-xp > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--zg-lime-d), var(--zg-lime)); box-shadow: 0 0 12px rgba(185, 244, 60, .5); animation: zg-grow 1s var(--zg-ease) both; transform-origin: left; }
@keyframes zg-grow { from { transform: scaleX(0); } }
.zg-xp-note { display: block; margin-top: 6px; font-size: .76rem; color: var(--zg-muted); }
.zg-streak { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 138, 61, .14); color: #ffb37a; font-weight: 700; font-size: .84rem; white-space: nowrap; }
.zg-wiggle { animation: zg-wiggle 2.6s ease-in-out infinite; }
@keyframes zg-wiggle { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-4deg) scale(1.04); } 92% { transform: rotate(4deg) scale(1.04); } 96% { transform: rotate(-2deg); } }

/* Portada giratoria */
.zg-hero2 { position: relative; margin: 0 -16px; }
.zg-hero2-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 32px); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 0 16px; scrollbar-width: none;
}
.zg-hero2-track::-webkit-scrollbar { display: none; }
.zg-slide {
    --c: var(--zg-lime);
    position: relative; display: block; scroll-snap-align: start; aspect-ratio: 5 / 4; border-radius: 24px; overflow: hidden;
    background: radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--c) 45%, #151a35), #0b0f22);
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    isolation: isolate;
}
.zg-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s linear; }
.zg-slide:hover img { transform: scale(1.1); }
.zg-slide-ico { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; color: var(--c); opacity: .8; }
.zg-slide-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 12, 26, 0) 25%, rgba(9, 12, 26, .55) 55%, rgba(9, 12, 26, .96)); }
.zg-slide-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: grid; gap: 4px; justify-items: start; }
.zg-slide-copy strong { font-family: var(--zg-display); font-weight: 800; font-size: clamp(1.7rem, 7.5vw, 2.5rem); line-height: 1; letter-spacing: -.035em; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.zg-slide-copy small { color: #d5d9f5; font-size: .95rem; margin-bottom: 8px; }
.zg-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.zg-kicker.is-sun { background: var(--zg-sun); color: #2a1a00; }
.zg-kicker.is-lime { background: var(--zg-lime); color: var(--zg-lime-ink); }
.zg-kicker.is-coral { background: var(--zg-coral); color: #fff; }
.zg-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.zg-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--zg-line-2); cursor: pointer; transition: width .3s var(--zg-ease), background .2s ease; }
.zg-dots button.is-on { width: 22px; background: var(--zg-lime); }

/* Tipos de juego */
.zg-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zg-group {
    display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; text-align: center;
    background: var(--zg-card); border: 1px solid var(--zg-line); font-size: .84rem; font-weight: 600;
    transition: transform .15s var(--zg-spring), border-color .15s ease;
}
.zg-group:active { transform: scale(.94); }
.zg-group:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.zg-group-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; font-size: 1.15rem; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }

.zg-row.is-big { --col: 72%; }
.zg-row.is-big .zg-game-shot { aspect-ratio: 16 / 10; }

/* Invitación a la cuenta */
.zg-promo {
    display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; padding: 16px;
    border-radius: var(--zg-r); border: 1px solid rgba(185, 244, 60, .3);
    background: radial-gradient(260px 140px at 0% 0%, rgba(185, 244, 60, .16), transparent 70%), var(--zg-card);
}
.zg-promo .zg-b { grid-column: 1 / -1; }
.zg-promo-art { position: relative; width: 74px; height: 64px; }
.zg-promo-art svg { position: absolute; width: 34px; height: 34px; }
.zg-promo-art svg:nth-child(1) { left: 0; top: 18px; }
.zg-promo-art svg:nth-child(2) { left: 24px; top: 0; width: 30px; height: 30px; }
.zg-promo-art svg:nth-child(3) { left: 38px; top: 28px; }
.zg-promo-copy strong { display: block; font-family: var(--zg-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.zg-promo-copy small { display: block; color: var(--zg-dim); font-size: .86rem; margin-top: 2px; }
.zg-float { animation: zg-float 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes zg-float { 50% { transform: translateY(-5px) rotate(-6deg); } }

/* Premios de hoy */
.zg-today { display: block; padding: 14px; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-today-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.zg-today-head strong { font-family: var(--zg-display); font-size: 1.1rem; font-weight: 800; }
.zg-today-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zg-today-item { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); text-align: center; }
.zg-today-item i { font-size: 1.15rem; color: var(--zg-dim); margin-bottom: 2px; }
.zg-today-item b { font-size: .86rem; font-weight: 700; }
.zg-today-item small { font-size: .68rem; color: var(--zg-muted); }
.zg-today-item.is-hot { background: rgba(255, 201, 60, .12); }
.zg-today-item.is-hot i { color: var(--zg-sun); animation: zg-bump 1.6s var(--zg-spring) infinite; }
.zg-today-item.is-hot::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--zg-coral); box-shadow: 0 0 0 3px var(--zg-card); }
.zg-today-item.is-done i { color: var(--zg-mint); }

/* Ranking */
.zg-podium { list-style: none; margin: 0; padding: 6px; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); display: grid; gap: 2px; }
.zg-podium a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; }
.zg-podium a:hover { background: rgba(255, 255, 255, .04); }
.zg-podium-n { width: 26px; text-align: center; font-family: var(--zg-display); font-weight: 800; color: var(--zg-muted); }
.zg-podium .is-1 .zg-podium-n { color: var(--zg-sun); }
.zg-podium .is-2 .zg-podium-n { color: #d3dbea; }
.zg-podium .is-3 .zg-podium-n { color: #e39a6b; }
.zg-podium img { width: 40px; height: 40px; border-radius: 50%; background: var(--zg-card-2); flex: 0 0 40px; }
.zg-podium .is-1 img { box-shadow: 0 0 0 2px var(--zg-sun); }
.zg-podium-name { flex: 1; min-width: 0; display: grid; }
.zg-podium-name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-podium-name small { font-size: .74rem; }
.zg-podium-xp { font-family: var(--zg-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.zg-podium-xp small { font-size: .7rem; color: var(--zg-muted); font-family: var(--zg-font); }
.zg-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; font-size: .84rem; color: var(--zg-muted); }

/* Fuera de la zona */
.zg-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zg-out-tile { display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-out-tile img { width: 48px; height: 48px; margin-bottom: 4px; }
.zg-out-tile strong { font-size: .86rem; font-weight: 600; line-height: 1.2; }
.zg-out-tile small { font-size: .72rem; color: var(--zg-muted); line-height: 1.25; }
.zg-out-tile:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }

.zg-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 34px 0 6px; font-size: .8rem; color: var(--zg-muted); }
.zg-trust i { color: var(--zg-mint); margin-right: 4px; }

/* Bienvenida */
.zg-welcome { text-align: center; }
.zg-welcome-mark { width: 64px; height: 64px; margin: 4px auto 10px; display: block; animation: zg-bump 1.2s var(--zg-spring) .3s both; }
.zg-welcome h2 { font-family: var(--zg-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.zg-welcome > p { color: var(--zg-dim); margin: 6px 0 16px; }
.zg-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.zg-pick {
    display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border-radius: 16px; cursor: pointer;
    background: var(--zg-card); border: 2px solid var(--zg-line-2); color: var(--zg-text); font-size: .95rem; font-weight: 600; text-align: left;
    transition: transform .15s var(--zg-spring), border-color .15s ease, background .15s ease;
}
.zg-pick i { color: var(--c); width: 20px; text-align: center; }
.zg-pick:active { transform: scale(.95); }
.zg-pick.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--zg-card)); }
.zg-welcome-safe { margin: 12px 0 0; font-size: .8rem; color: var(--zg-muted); }
.zg-welcome-safe i { color: var(--zg-mint); }

@media (min-width: 900px) {
    .zg-hero2 { margin: 0; }
    .zg-hero2-track { grid-auto-columns: calc(50% - 6px); padding: 0; scroll-padding: 0; }
    .zg-slide { aspect-ratio: 16 / 10; }
    .zg-groups { grid-template-columns: repeat(6, 1fr); }
    .zg-row.is-big { --col: 32%; }
    .zg-promo { grid-template-columns: auto 1fr auto; }
    .zg-promo .zg-b { grid-column: auto; }
    .zg-hello.is-member { max-width: 560px; }
}

/* ============================================================
   ANUNCIO CON PREMIO
   ============================================================ */
.zg-ad { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; }
.zg-ad-bg { position: absolute; inset: 0; background: rgba(3, 5, 14, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: zg-fade .2s ease; }
.zg-ad-card {
    position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 26px;
    background: var(--zg-bg-2); border: 1px solid var(--zg-line-2); box-shadow: 0 40px 100px -30px #000;
    animation: zgPop .3s var(--zg-spring);
}
.zg-ad-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px; }
.zg-ad-label { padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: .72rem; font-weight: 600; color: #e7e9fb; }
.zg-ad-timer { position: relative; margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; }
.zg-ad-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.zg-ad-timer circle { fill: rgba(0, 0, 0, .6); stroke-width: 3; }
.zg-ad-timer .t { stroke: rgba(255, 255, 255, .15); }
.zg-ad-timer .p { fill: none; stroke: var(--zg-lime); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.zg-ad-timer b { position: relative; font-size: .86rem; font-weight: 700; }
.zg-ad-timer.is-done b { color: var(--zg-lime); }
.zg-ad-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.zg-ad-art { margin: 0; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #1c2246, #0f1328); overflow: hidden; }
.zg-ad-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zg-ad-body { padding: 0 0 6px; display: grid; justify-items: start; }
.zg-ad-body > *:not(.zg-ad-art) { margin-left: 18px; margin-right: 18px; }
.zg-ad-kicker { margin-top: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--zg-sky); }
.zg-ad-body h2 { font-family: var(--zg-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; margin-bottom: 0; }
.zg-ad-body p { color: var(--zg-dim); margin-top: 6px; margin-bottom: 12px; font-size: .92rem; }
.zg-ad-foot { padding: 12px 18px 18px; border-top: 1px solid var(--zg-line); margin-top: 8px; }
.zg-ad-reward { margin: 0 0 10px; font-size: .84rem; color: var(--zg-dim); text-align: center; }
.zg-ad-foot .zg-b[disabled] { opacity: 1; filter: grayscale(1) brightness(.6); }
.zg-ad-foot .zg-b.is-ready { animation: zg-bump .5s var(--zg-spring); }
.zg-ad-leave {
    position: absolute; inset: auto 12px 12px; z-index: 3; padding: 16px; border-radius: 20px; text-align: center;
    background: var(--zg-card-2); border: 1px solid var(--zg-line-2); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
    animation: zg-up .25s var(--zg-ease);
}
.zg-ad-leave strong { font-family: var(--zg-display); font-size: 1.1rem; }
.zg-ad-leave p { color: var(--zg-dim); font-size: .88rem; margin: 6px 0 12px; }
.zg-ad-leave-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.zg-cat-head { margin: 4px 0 14px; }
.zg-search-bar {
    position: sticky; top: calc(var(--zg-top-h) + env(safe-area-inset-top)); z-index: 30;
    display: flex; gap: 8px; margin: 0 -16px; padding: 8px 16px;
    background: linear-gradient(var(--zg-bg) 70%, rgba(9, 12, 26, 0));
}
.zg-search { flex: 1; position: relative; display: block; }
.zg-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--zg-muted); pointer-events: none; }
.zg-search input {
    width: 100%; height: 48px; padding: 0 14px 0 42px; border-radius: 16px; border: 1.5px solid var(--zg-line-2);
    background: var(--zg-card); color: var(--zg-text); font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none;
}
.zg-search input:focus { border-color: var(--zg-lime); }
.zg-search input::placeholder { color: var(--zg-muted); }
.zg-lucky { min-height: 48px; padding: 0 14px; }
.zg-lucky span { display: none; }
.zg-filters { margin-bottom: 14px; }
.zg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zg-grid .zg-game[hidden] { display: none; }
.zg-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--zg-dim); }
.zg-empty i { font-size: 2.4rem; color: var(--zg-grape); margin-bottom: 6px; animation: zg-float 3s ease-in-out infinite; }
.zg-empty strong { font-family: var(--zg-display); font-size: 1.2rem; color: var(--zg-text); }
.zg-empty p { margin: 0; }
@media (min-width: 600px) { .zg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zg-lucky span { display: inline; } }
@media (min-width: 900px) {
    .zg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .zg-search-bar { margin: 0; padding: 8px 0; }
}
@media (min-width: 1150px) { .zg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============================================================
   SALA DE JUEGO
   ============================================================ */
.zg-room-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.zg-room-ico {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
    background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-size: 1rem;
}
.zg-room-name { min-width: 0; display: grid; line-height: 1.15; }
.zg-room-name strong { font-family: var(--zg-display); font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-room-name small { font-size: .74rem; color: var(--zg-muted); white-space: nowrap; }
.zg-room-name small i { color: var(--zg-sun); margin-right: 2px; }
.zg-room-name small b { color: var(--zg-text); font-weight: 600; }
.zg-app.is-playing .zg-main { padding-top: 10px; }

.zg-html .zg-room .a-stage-wrap { border-radius: 22px; border-color: var(--zg-line-2); }
.zg-html .zg-room .a-stage { min-height: clamp(380px, 64dvh, 680px); }
.zg-html .zg-room .a-hud { background: #0d1126; }
.zg-html .zg-room .a-hud-item .vl { font-family: var(--zg-display); font-weight: 800; }

/* Pantalla de inicio de la partida: portada del juego desenfocada detrás. */
.zg-html .zg-room .a-overlay { background: rgba(9, 12, 26, .82); padding: 22px 16px; isolation: isolate; }
.zg-room-cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.2); opacity: .45; transform: scale(1.15); pointer-events: none; }
.zg-room-kicker { margin-bottom: 10px; }
.zg-html .zg-room .a-overlay h2 {
    font-family: var(--zg-display); text-transform: none; letter-spacing: -.035em; font-weight: 800;
    font-size: clamp(2rem, 9vw, 3.2rem); color: #fff !important; text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
.zg-html .zg-room .a-overlay .a-msg { color: #cfd3f2 !important; margin: 8px 0 18px; font-size: .95rem; }
.zg-html .zg-room .a-picker { margin-bottom: 14px; }
.zg-html .zg-room .a-picker-label { letter-spacing: .1em; font-size: .7rem; font-weight: 600; color: var(--zg-muted) !important; }
.zg-html .zg-room .a-opt { border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1.5px solid var(--zg-line-2); padding: 10px 8px; }
.zg-html .zg-room .a-opt .t { font-weight: 600; }
.zg-html .zg-room .a-opt.is-active { background: rgba(185, 244, 60, .12); border-color: var(--zg-lime); box-shadow: none; }
.zg-html .zg-room .a-opt.is-active .t { color: var(--zg-lime) !important; filter: none; }

/* Botones del motor = botones de la casa */
.zg-html .arcade .a-btn {
    font-family: var(--zg-display); font-weight: 800; letter-spacing: -.01em; border-radius: 16px; padding: 14px 20px; min-height: 50px;
    color: var(--zg-lime-ink) !important; background: var(--zg-lime);
    box-shadow: 0 4px 0 var(--zg-lime-d), inset 0 2px 0 rgba(255, 255, 255, .35);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.zg-html .arcade .a-btn:hover { transform: none; filter: brightness(1.06); }
.zg-html .arcade .a-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--zg-lime-d); }
.zg-html .arcade .a-btn.a-lg { min-height: 60px; padding: 0 40px; font-size: 1.2rem; border-radius: 18px; }
.zg-html .arcade .a-btn.a-ghost { color: var(--zg-text) !important; background: rgba(255, 255, 255, .08); border: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .4), inset 0 0 0 1px var(--zg-line-2); }
.zg-html .arcade .a-btn.a-ghost:active { box-shadow: inset 0 0 0 1px var(--zg-line-2); }
.zg-html .zg-room #btnStart { animation: zg-breathe 2.4s ease-in-out infinite; }
@keyframes zg-breathe { 50% { transform: scale(1.04); } }

/* ¿Seguir jugando? */
.zg-html .zg-room .a-revive-ring { background: conic-gradient(var(--zg-lime) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); box-shadow: 0 0 40px -10px rgba(185, 244, 60, .6); }
.zg-html .zg-room .a-revive-ring::before { background: #11152d; }
.zg-html .zg-room .a-revive-num { font-family: var(--zg-display); }
.zg-html .zg-room .a-revive-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zg-html .zg-room .a-revive-btns .a-btn.is-ad, .zg-html .zg-room .a-revive-btns .a-btn.is-join, .zg-html .zg-room .a-revive-btns .a-btn.is-free { grid-column: 1 / -1; }
.zg-html .zg-room .a-revive-btns .a-btn.is-join { background: var(--zg-sky); color: #021727 !important; box-shadow: 0 4px 0 var(--zg-sky-d); }
.zg-html .zg-room .a-revive-btns .a-btn.is-free { background: var(--zg-grape); color: #fff !important; box-shadow: 0 4px 0 var(--zg-grape-d); }
.zg-html .zg-room .a-revive-btns .a-btn.is-coins { background: var(--zg-sun); color: #2a1a00 !important; box-shadow: 0 4px 0 var(--zg-sun-d); }
.zg-html .zg-room .a-revive-btns .a-btn.is-gems { background: var(--zg-gem); color: #1f0636 !important; box-shadow: 0 4px 0 var(--zg-gem-d); }
.zg-html .zg-room .a-revive-btns .a-btn:disabled { filter: grayscale(.8) brightness(.7); opacity: 1; }
.zg-html .zg-room .a-revive-btns .a-btn.a-hidden { display: none; }
.zg-html .zg-room .a-revive-no { color: var(--zg-dim) !important; font-weight: 500; padding: 8px; }

/* Resultado */
.zg-html .zg-room .a-result-label { letter-spacing: .12em; font-weight: 600; }
.zg-html .zg-room .a-result-score { font-family: var(--zg-display); letter-spacing: -.04em; }
.zg-html .zg-room .a-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; margin-top: 14px; }
.zg-html .zg-room .a-result-actions.a-hidden { display: none; }
.zg-html .zg-room .a-result-actions .a-btn:first-child { grid-column: 1 / -1; background: #25d366; color: #052e14 !important; box-shadow: 0 4px 0 #128c43; }
.zg-html .zg-room .a-tag.gold { color: var(--zg-sun) !important; }
.zg-html .zg-room .a-tag.green { color: var(--zg-mint) !important; }

/* Bajo la cabina */
.zg-room-tools { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; }
.zg-room-controls { flex: 1; min-width: 0; font-size: .8rem; color: var(--zg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-room-controls i { margin-right: 4px; }
.zg-room-skin { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: .84rem; font-weight: 600; }
.zg-room-skin .sw { width: 16px; height: 16px; border-radius: 5px; }
.zg-room-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 18px 0 12px; padding: 4px; border-radius: 16px; background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-room-tabs button { min-height: 42px; border: 0; border-radius: 12px; background: none; color: var(--zg-dim); font-weight: 600; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.zg-room-tabs button.is-on { background: var(--zg-text); color: var(--zg-bg); }
.zg-room-tabs button i { font-size: .85em; }
.zg-room-pane { padding: 4px 0 8px; }
.zg-html .zg-room .zg-periods { display: flex; gap: 6px; margin-bottom: 8px; }
.zg-html .zg-room .zg-periods .a-tab { flex: 1; border-radius: 12px; }
.zg-html .zg-room #leaderboardList { border-radius: 18px; background: var(--zg-card); border: 1px solid var(--zg-line); padding: 6px; }
.zg-howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zg-howto li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--zg-card); border: 1px solid var(--zg-line); color: var(--zg-dim); font-size: .92rem; }
.zg-howto li i { color: var(--c, var(--zg-lime)); margin-top: 3px; width: 18px; text-align: center; }
.zg-howto strong { color: var(--zg-text); }
.zg-howto kbd { padding: 1px 6px; border-radius: 6px; background: var(--zg-card-2); border: 1px solid var(--zg-line-2); font-size: .8rem; }

/* ============================================================
   PREMIOS
   ============================================================ */
.zg-page-head { margin: 4px 0 16px; }
.zg-rw-preview { display: grid; gap: 10px; }
.zg-rw-card { --c: var(--zg-lime); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-rw-card.is-sun { --c: var(--zg-sun); } .zg-rw-card.is-gem { --c: var(--zg-gem); } .zg-rw-card.is-sky { --c: var(--zg-sky); }
.zg-rw-card strong { display: block; font-family: var(--zg-display); font-size: 1.08rem; font-weight: 700; }
.zg-rw-card small { color: var(--zg-dim); font-size: .86rem; }
.zg-rw-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; font-size: 1.3rem; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.zg-rw-ico .zg-ico-ticket { width: 30px; height: 30px; }
.zg-rw-cta { display: grid; gap: 12px; margin-top: 20px; }

.zg-daily2 { position: relative; padding: 16px; border-radius: 24px; border: 1px solid rgba(255, 201, 60, .35); background: radial-gradient(320px 160px at 100% 0%, rgba(255, 201, 60, .2), transparent 70%), var(--zg-card); overflow: hidden; }
.zg-daily2.is-done { border-color: var(--zg-line); background: var(--zg-card); }
.zg-daily2-top { display: flex; align-items: center; gap: 14px; }
.zg-daily2-top strong { display: block; font-family: var(--zg-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.zg-daily2-top small { color: var(--zg-dim); font-size: .86rem; }
.zg-daily2-box { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 18px; font-size: 1.6rem; color: #2a1a00; background: var(--zg-sun); box-shadow: 0 4px 0 var(--zg-sun-d); }
.zg-daily2.is-ready .zg-daily2-box { animation: zg-wiggle 2.4s ease-in-out infinite; }
.zg-daily2.is-done .zg-daily2-box { background: rgba(62, 230, 168, .15); color: var(--zg-mint); box-shadow: none; }
.zg-daily2-days { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.zg-daily2-days li { display: grid; justify-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: .62rem; color: var(--zg-muted); }
.zg-daily2-days li svg { width: 22px; height: 22px; opacity: .45; filter: grayscale(.6); }
.zg-daily2-days li.is-done svg, .zg-daily2-days li.is-today svg { opacity: 1; filter: none; }
.zg-daily2-days li.is-done { background: rgba(62, 230, 168, .1); color: var(--zg-mint); }
.zg-daily2-days li.is-today { background: rgba(255, 201, 60, .16); color: var(--zg-sun); box-shadow: inset 0 0 0 1.5px var(--zg-sun); }
.zg-daily2-days li.is-gem { background: rgba(199, 125, 255, .1); }

.zg-adbox { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--zg-card); border: 1px dashed rgba(185, 244, 60, .35); }
.zg-adbox > div { flex: 1; min-width: 0; }
.zg-adbox strong { display: block; font-weight: 700; }
.zg-adbox small { color: var(--zg-dim); font-size: .8rem; }
.zg-adbox-ico svg { width: 38px; height: 38px; }

.zg-count { font-family: var(--zg-display); font-weight: 800; font-size: 1.1rem; color: var(--zg-lime); }
.zg-missions { display: grid; gap: 8px; }
.zg-missions-sub { margin: 14px 0 2px; font-family: var(--zg-display); font-size: 1.02rem; font-weight: 700; }
.zg-missions-sub small { display: block; font-family: var(--zg-font); font-weight: 400; color: var(--zg-muted); font-size: .8rem; }
.zg-mission { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-mission.is-ready { border-color: rgba(185, 244, 60, .5); background: radial-gradient(200px 80px at 0% 50%, rgba(185, 244, 60, .1), transparent 70%), var(--zg-card); }
.zg-mission.is-claimed { opacity: .55; }
.zg-mission-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--zg-sky); }
.zg-mission.is-ready .zg-mission-ico { background: rgba(185, 244, 60, .15); color: var(--zg-lime); }
.zg-mission-body { flex: 1; min-width: 0; }
.zg-mission-body strong { display: block; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.zg-mission-body small { font-size: .74rem; color: var(--zg-muted); font-variant-numeric: tabular-nums; }
.zg-mission-bar { height: 6px; margin: 6px 0 3px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.zg-mission-bar span { display: block; height: 100%; border-radius: inherit; background: var(--zg-sky); }
.zg-mission.is-ready .zg-mission-bar span { background: var(--zg-lime); }
.zg-mission-prize { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .86rem; color: var(--zg-sun); white-space: nowrap; }
.zg-mission-prize i { color: #cfd6e6; margin-left: 2px; }
.zg-mission-done { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(62, 230, 168, .15); color: var(--zg-mint); }
.zg-challenge { position: relative; display: grid; gap: 2px; justify-items: start; margin-top: 12px; padding: 14px 40px 14px 14px; border-radius: 18px; border: 1px solid rgba(255, 201, 60, .35); background: rgba(255, 201, 60, .07); }
.zg-challenge strong { font-family: var(--zg-display); font-size: 1.05rem; }
.zg-challenge small { color: var(--zg-dim); }
.zg-challenge > i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--zg-sun); }

.zg-chests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zg-chest { --c: #a16207; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 6px; border-radius: 18px; background: var(--zg-card); border: 1px solid var(--zg-line); text-align: center; min-width: 0; }
.zg-chest strong { font-size: .8rem; font-weight: 600; }
.zg-chest-art { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 1.4rem; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.zg-chest.is-ready { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 24px -8px var(--c); }
.zg-chest.is-ready .zg-chest-art { animation: zg-wiggle 1.8s ease-in-out infinite; }
.zg-chest.is-empty { border-style: dashed; opacity: .6; }
.zg-chest.is-empty .zg-chest-art { color: var(--zg-muted); background: none; }
.zg-chest small { font-size: .7rem; color: var(--zg-muted); }
.zg-chest-time { font-variant-numeric: tabular-nums; color: var(--zg-text) !important; font-weight: 600; }
.zg-chest .zg-b { min-height: 34px; padding: 0 6px; font-size: .78rem; gap: 4px; }
.zg-chest .zg-b svg { width: 16px; height: 16px; }
.zg-odds { margin-top: 10px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--zg-line); }
.zg-odds summary { cursor: pointer; padding: 12px 14px; font-size: .86rem; color: var(--zg-dim); list-style: none; }
.zg-odds summary::-webkit-details-marker { display: none; }
.zg-odds table { width: calc(100% - 20px); margin: 0 10px; border-collapse: collapse; font-size: .8rem; }
.zg-odds th, .zg-odds td { padding: 7px 4px; text-align: left; border-bottom: 1px solid var(--zg-line); }
.zg-odds th { color: var(--zg-muted); font-weight: 500; }
.zg-odds p { margin: 10px 14px 14px; font-size: .78rem; color: var(--zg-muted); }

.zg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zg-pass-card, .zg-league { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-pass-card { background: radial-gradient(200px 120px at 100% 0%, rgba(76, 195, 255, .18), transparent 70%), var(--zg-card); }
.zg-league { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.zg-pass-top { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--zg-dim); }
.zg-pass-top .zg-ico-ticket { width: 20px; height: 20px; }
.zg-league .zg-pass-top i { color: var(--c); }
.zg-pass-card strong, .zg-league strong { font-family: var(--zg-display); font-size: 1.35rem; font-weight: 800; }
.zg-league strong { color: var(--c); }
.zg-pass-card small, .zg-league small { color: var(--zg-muted); font-size: .76rem; }
.zg-pass-card .zg-xp { margin-top: 4px; height: 8px; }

.zg-badge { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 18px; background: var(--zg-card); border: 1px solid var(--zg-line); text-align: center; }
.zg-badge-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .05); color: var(--zg-muted); font-size: 1.1rem; }
.zg-badge.is-on .zg-badge-ico { background: rgba(255, 201, 60, .16); color: var(--zg-sun); box-shadow: 0 0 0 2px rgba(255, 201, 60, .4); }
.zg-badge strong { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.zg-badge small { font-size: .7rem; color: var(--zg-muted); }

.zg-reveal { text-align: center; overflow: hidden; }
.zg-reveal h2 { position: relative; font-family: var(--zg-display); font-size: 1.8rem; font-weight: 800; margin: 18px 0 10px; letter-spacing: -.03em; }
.zg-reveal-burst { position: absolute; left: 50%; top: -120px; width: 360px; height: 360px; margin-left: -180px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 201, 60, .14) 0 10deg, transparent 10deg 20deg); animation: zg-spin 14s linear infinite; pointer-events: none; mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.zg-reveal-list { position: relative; list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.zg-reveal-list li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--zg-card); font-family: var(--zg-display); font-size: 1.2rem; font-weight: 800; animation: zg-pop2 .5s var(--zg-spring) both; }
.zg-reveal-list li svg { width: 32px; height: 32px; }
.zg-reveal-list li i { color: var(--zg-sun); font-size: 1.3rem; }
@keyframes zg-pop2 { from { opacity: 0; transform: scale(.6) translateY(10px); } }

/* ============================================================
   YO
   ============================================================ */
.zg-me-card { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-radius: 24px; background: radial-gradient(260px 140px at 0% 0%, rgba(123, 97, 255, .22), transparent 70%), var(--zg-card); border: 1px solid var(--zg-line); margin-bottom: 14px; }
.zg-me-avatar { position: relative; flex: 0 0 84px; }
.zg-me-avatar img { width: 84px; height: 84px; border-radius: 50%; background: var(--zg-card-2); box-shadow: 0 0 0 3px var(--zg-lime); display: block; }
.zg-me-avatar span { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zg-lime); color: var(--zg-lime-ink); font-size: .74rem; box-shadow: 0 0 0 3px var(--zg-card); }
.zg-me-ring { --p: 0; position: relative; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--zg-lime) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.zg-me-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--zg-card); }
.zg-me-ring span, .zg-me-ring small { position: relative; }
.zg-me-ring span { font-family: var(--zg-display); font-weight: 800; font-size: 1.8rem; line-height: 1; }
.zg-me-ring small { font-size: .66rem; color: var(--zg-muted); text-transform: uppercase; letter-spacing: .1em; }
.zg-me-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zg-me-id strong { font-family: var(--zg-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-me-id small { color: var(--zg-dim); font-size: .82rem; }
.zg-me-id .zg-xp { margin: 6px 0 2px; height: 8px; }
.zg-me-warn { color: var(--zg-sun) !important; margin-top: 4px; }
.zg-me-perks { margin-top: 8px; }
.zg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.zg-stats div { display: grid; justify-items: center; padding: 12px 4px; border-radius: 16px; background: var(--zg-card); border: 1px solid var(--zg-line); }
.zg-stats b { font-family: var(--zg-display); font-size: 1.15rem; font-weight: 800; }
.zg-stats small { font-size: .7rem; color: var(--zg-muted); }
.zg-list-title { margin-bottom: 10px; }
.zg-list { display: grid; border-radius: var(--zg-r); background: var(--zg-card); border: 1px solid var(--zg-line); overflow: hidden; }
.zg-list > a, .zg-list > button, .zg-list > form > button, .zg-list-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; background: none; color: var(--zg-text);
    font-size: .96rem; font-weight: 500; text-align: left; cursor: pointer; border-top: 1px solid var(--zg-line);
}
.zg-list > :first-child, .zg-list > form:first-child > button { border-top: 0; }
.zg-list > a:active, .zg-list > button:active, .zg-list > form > button:active { background: rgba(255, 255, 255, .04); }
.zg-list > a > i:first-child, .zg-list > button > i:first-child, .zg-list > form > button > i:first-child, .zg-list-row > i:first-child {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; font-size: 1rem;
    color: var(--c, var(--zg-lime)); background: color-mix(in srgb, var(--c, #b9f43c) 14%, transparent);
}
.zg-list img { width: 38px; height: 38px; flex: 0 0 38px; }
.zg-list span { flex: 1; min-width: 0; display: grid; }
.zg-list span small { font-size: .78rem; color: var(--zg-muted); font-weight: 400; }
.zg-list > a > i:last-child, .zg-list > button > i:last-child, .zg-list > form > button > i:last-child { color: var(--zg-muted); font-size: .8rem; }
.zg-list > a.is-hl { background: rgba(185, 244, 60, .07); }
.zg-list-row .zg-lang-slot { flex: 0 0 auto; }
.zg-list [hidden] { display: none !important; }
.zg-agecard { display: grid; gap: 8px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 201, 60, .07); border: 1px solid rgba(255, 201, 60, .35); }
.zg-agecard strong { font-weight: 700; }
.zg-agecard strong i { color: var(--zg-sun); margin-right: 6px; }
.zg-agecard small { color: var(--zg-dim); font-size: .84rem; }
.zg-agecard .zg-inline select { flex: 1 1 160px; min-height: 46px; }
.zg-me-foot { margin: 26px 0 0; text-align: center; font-size: .78rem; color: var(--zg-muted); line-height: 1.6; }

@media (min-width: 900px) {
    .zg-me-card, .zg-stats, .zg-list, .zg-agecard, .zg-tagcard, .zg-me-perks { max-width: 680px; }
    .zg-rw-preview { grid-template-columns: 1fr 1fr; }
    .zg-rw-cta { max-width: 420px; }
    .zg-daily2, .zg-adbox { max-width: 720px; }
    .zg-missions { grid-template-columns: 1fr 1fr; }
    .zg-missions-sub { grid-column: 1 / -1; }
    .zg-row .zg-badge { min-width: 0; }
}

@media (min-width: 900px) {
    .zg-html .zg-room { max-width: 980px; margin: 0 auto; }
    .zg-html .zg-room .zg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   DENTRO DE MI GLOBAL (layouts.gamer-hosted)
   La zona es un panel oscuro dentro del portal: arriba su
   barra de Mi Global, abajo sus pestañas; en medio, la zona con
   su submenú pegado bajo la barra del portal.
   ============================================================ */
.page.zg-page { max-width: none; padding: 0 0 calc(var(--tabbar-h, 4.125rem) + var(--sab, 0px)); }
.zg-hosted {
    --zg-portal-bar: calc(3.5rem + var(--sat, 0px));
    --zg-top-h: calc(var(--zg-portal-bar) + 104px);
    min-height: calc(100dvh - var(--zg-portal-bar) - var(--tabbar-h, 4.125rem));
    background-attachment: scroll;
    font-size: 15px;
}
.zg-hosted .zg-main { min-height: 0; padding: 14px 16px 28px; }
.zg-sub {
    position: sticky; top: var(--zg-portal-bar); z-index: 35;
    padding: 4px 16px 0;
    background: rgba(9, 12, 26, .94);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--zg-line);
}
.zg-sub-row { display: flex; align-items: center; gap: 10px; min-height: 52px; max-width: var(--zg-max); margin: 0 auto; }
.zg-sub-row .zg-brand-name { font-size: 1.05rem; }
.zg-subnav { display: flex; gap: 2px; max-width: var(--zg-max); margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.zg-subnav::-webkit-scrollbar { display: none; }
.zg-subnav a {
    position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; padding: 0 12px; border-bottom: 3px solid transparent;
    color: var(--zg-muted); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.zg-subnav a i { font-size: .95rem; }
.zg-subnav a:hover { color: var(--zg-text); }
.zg-subnav a.is-on { color: var(--zg-text); border-bottom-color: var(--zg-lime); }
.zg-subnav a.is-on i { color: var(--zg-lime); }
.zg-subnav .zg-dot { position: absolute; top: 9px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--zg-coral); box-shadow: 0 0 0 2px var(--zg-bg); }
.zg-hosted.is-playing .zg-main { padding-top: 10px; }
body.arcade-immersive .zg-sub { display: none; }
/* Celular: las cinco caben como en una barra de pestañas (ícono arriba, palabra abajo). */
@media (max-width: 559px) {
    .zg-subnav { gap: 0; }
    .zg-subnav a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; height: 54px; padding: 0 2px; font-size: .72rem; }
    .zg-subnav a i { font-size: 1.1rem; }
    .zg-subnav .zg-dot { top: 6px; right: calc(50% - 16px); }
    .zg-hosted { --zg-top-h: calc(var(--zg-portal-bar) + 112px); }
}
@media (max-width: 379px) {
    .zg-sub-row .zg-brand-name { display: none; }
}
@media (min-width: 1024px) {
    .page.zg-page { padding: 0 0 32px; }
    .zg-hosted { --zg-top-h: calc(var(--zg-portal-bar) + 104px); margin: 8px 24px 0; border-radius: 26px; overflow: clip; min-height: 0; }
    .zg-hosted .zg-main { padding: 22px 24px 40px; }
    .zg-hosted .zg-row { --col: 23%; }
    .zg-sub { border-radius: 26px 26px 0 0; }
}