/* DopaminAPP · barra común (móvil abajo, escritorio a la izquierda).
   Tokens de la piel única. Radio 0 salvo avatares. Fuentes locales. */
@font-face{font-family:'Bebas Neue';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/bebas-neue-latin-400-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-400-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-500-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-700-normal-v1.woff2') format('woff2')}

:root{
  --fondo:#0c0c0c;
  --rojo:#e5483b;
  --ama:#e0c48a;
  --tile:#161616;
  --shell-linea:#262626;
  --shell-texto:#8a8a8a;
  --shell-activo:#f4f4f4;
  --shell-alto:64px;
  --shell-lateral:232px;
}

.app-shell{font-family:'DM Sans',system-ui,sans-serif;background:var(--fondo);z-index:250;margin:0}
.app-shell *{box-sizing:border-box;border-radius:0}
.app-shell a{color:var(--shell-texto);text-decoration:none;-webkit-tap-highlight-color:transparent}
.app-shell a[aria-current="page"]{color:var(--shell-activo)}
.app-shell svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell .as-lab{font-size:11px;font-weight:500;letter-spacing:.02em}

/* Móvil: barra de 5 pestañas, la del centro es roja */
.app-shell{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:stretch;
  height:calc(var(--shell-alto) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--shell-linea)}
.app-shell .as-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}
.app-shell .as-rojo{flex:0 0 60px;margin-top:-12px;background:var(--rojo);color:#fff;position:relative}
.app-shell .as-rojo svg{stroke:#fff;stroke-width:2.2}
.app-shell .as-rojo .as-boton{display:flex}
.app-shell .as-rojo .as-lab{color:#fff;font-weight:700}
.app-shell a[aria-current="page"] .as-lab{font-weight:700}
.app-shell .as-solo-escritorio{display:none}
.app-shell .as-marca{display:none}

body.has-app-shell{padding-bottom:calc(var(--shell-alto) + env(safe-area-inset-bottom,0px))}

/* Escritorio: barra lateral */
@media (min-width:1024px){
  .app-shell{top:0;right:auto;bottom:0;width:var(--shell-lateral);height:auto;flex-direction:column;
    padding:28px 0 20px;border-top:0;border-right:1px solid var(--shell-linea)}
  .app-shell .as-marca{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:28px;letter-spacing:.04em;
    color:var(--shell-activo);padding:0 28px 28px}
  .app-shell .as-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:14px 28px}
  .app-shell .as-item .as-lab{font-size:15px}
  .app-shell .as-solo-escritorio{display:flex}
  .app-shell .as-rojo{flex:0 0 auto;flex-direction:row;justify-content:center;gap:12px;margin:auto 20px 0;padding:14px 20px;background:var(--rojo);order:99}
  .app-shell .as-rojo .as-boton{width:auto;height:auto;margin:0;background:none;border:0;border-radius:0}
  .app-shell .as-rojo .as-lab{color:#fff;font-size:15px}
  body.has-app-shell{padding-bottom:0;padding-left:var(--shell-lateral)}
}

/* Pantallas a pantalla completa (crisis, cierre, onboarding): sin barra */
body.shell-oculta nav.app-shell{display:none}
body.shell-oculta.has-app-shell{padding-bottom:0;padding-left:0}

/* La burbuja de Chispa: abre el juego. Se arrastra y se pega al borde; no sale en el Botón Rojo. */
.chispa-burbuja{box-sizing:border-box;position:fixed;z-index:230;width:60px;height:60px;border-radius:50%;background:#e5483b;border:3px solid #0c0c0c;box-shadow:0 0 0 2px #e0c48a,0 6px 16px rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;transition:opacity .25s,transform .25s,left .2s,top .2s;text-decoration:none}
.chispa-burbuja img{width:114%;max-width:none;height:auto;margin-top:3px;pointer-events:none;-webkit-user-drag:none;user-select:none}
.chispa-burbuja.quieta{opacity:.4;transform:scale(.86)}
.chispa-burbuja.arrastrando{transition:none;transform:scale(1.1);cursor:grabbing}
.chispa-burbuja:focus-visible{outline:3px solid #fff;outline-offset:3px}
body.shell-oculta .chispa-burbuja, body.ob-abierto .chispa-burbuja, body.hoja-abierta .chispa-burbuja{display:none}
@media (prefers-reduced-motion:reduce){ .chispa-burbuja{transition:none} .chispa-burbuja.quieta{transform:none} }