/* OKIRO — Variables, Reset, Layout Global */

/* ── VARIABLES ──────────────────────────────────────────────────── */
:root {
  /* Fondo — violeta-negro, nunca negro neutro (kit de marca) */
  --bg-base:   #0A0612;
  --surface-1: #150E24;
  --surface-2: #1E1533;

  /* Marca — el aura */
  --brand:      #8B4DFF;
  --brand-soft: #A87BFF;
  --brand-deep: #6425D0;

  /* Texto — blanco con sesgo violeta */
  --text-1: #EFE9F7;
  --text-2: #DCD4E8;
  --text-3: #948AA8;
  --text-4: #4B4557;

  /* Estados — fuera de la escala de aura para no competir con ella */
  --success: #3FB27F;
  --warning: #E0A42B;
  --danger:  #E05252;

  /* Escala de aura — el color se gana subiendo de rango */
  --rank-e: #4B4557;
  --rank-d: #6D5A9E;
  --rank-c: #8B4DFF;
  --rank-b: #A472FF;
  --rank-a: #C08BFF;
  --rank-s: #E4C4FF;

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radios */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 100px;

  /* Glow */
  --glow-cyan:        0 0 16px rgba(139, 77, 255, 0.5);
  --glow-cyan-strong: 0 0 24px rgba(139, 77, 255, 0.8);
  --glow-white:       0 0 20px rgba(255, 255, 255, 0.4);

  /* Compat — usados internamente por animaciones y transiciones */
  --transition:  150ms ease;
  --glow:        rgba(139, 77, 255, 0.25);
  --glow-strong: rgba(139, 77, 255, 0.5);
  --glow-green:  rgba(52, 211, 153, 0.25);

  /* Compat — alias del diseño anterior (evitan estilos rotos) */
  --accent:  var(--brand);
  --accent2: var(--success);
  --text1:   var(--text-1);
  --text2:   var(--text-2);
  --text3:   var(--text-3);
  --fm:      var(--font-sans);
}

/* ── RESET Y BASE ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  height:    100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;   /* iOS no infla el texto al rotar */
  text-size-adjust:         100%;
}

body {
  background:                  var(--bg-base);
  color:                       var(--text-2);
  font-family:                 var(--font-sans);
  font-weight:                 500;
  -webkit-font-smoothing:      antialiased;
  -moz-osx-font-smoothing:     grayscale;
  font-variant-numeric:        tabular-nums;
  height:                      100dvh;
  overflow:                    hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action:                manipulation;   /* mata el doble-tap-zoom */
  margin:                      0;
  padding:                     0;
  min-height:                  100vh;
}

::selection {
  background: rgba(139, 77, 255, 0.3);
  color:      #fff;
}

#cnt {
  scrollbar-width: none;
}

#cnt::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  display:   block;
}

/* ── LAYOUT PRINCIPAL ───────────────────────────────────────────── */
#app {
  display:        flex;
  flex-direction: column;
  height:         100dvh;
  max-width:      480px;
  margin:         0 auto;
  position:       relative;
  z-index:        2;
  /* deja hueco para la nav flotante + barra de gestos del iPhone */
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  /* en modo app (standalone) el contenido pasa bajo la barra de estado */
  padding-top:    env(safe-area-inset-top, 0px);
}

#cnt {
  flex:             1;
  overflow-y:       auto;
  overflow-x:       hidden;
  scroll-behavior:  smooth;
  padding:          16px 16px 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Toques más responsivos en móvil (sin retardo de doble tap) */
button, select, .nb, .rc, .streak-day, .tg {
  touch-action: manipulation;
}

/* No seleccionar texto al pulsar/mantener botones y chrome de la UI */
button, .nb, .streak-day, .stl, .ct, #hdr, #nav, .rc {
  -webkit-user-select: none;
  user-select:         none;
}

/* ── ORBES DE LUZ ───────────────────────────────────────────────── */
#particles {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        0;
  overflow:       hidden;
}

#particles::before {
  content:       '';
  position:      absolute;
  top:           80px;
  right:         30px;
  width:         240px;
  height:        240px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(139, 77, 255, 0.35), transparent 70%);
  filter:        blur(60px);
}

#particles::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          -40px;
  width:         280px;
  height:        280px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(100, 37, 208, 0.28), transparent 70%);
  filter:        blur(60px);
}

/* ── VIGNETTE ───────────────────────────────────────────────────── */
#vignette {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        1;
  background:     radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.4) 100%);
}

/* ── HEADER ─────────────────────────────────────────────────────── */
#hdr {
  background:              rgba(20, 20, 26, 0.55);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter:         blur(40px) saturate(180%);
  border-radius:           var(--radius-lg);
  padding:                 13px 18px 12px;
  display:                 flex;
  flex-direction:          column;
  gap:                     11px;
  margin:                  16px 16px 14px;
  flex-shrink:             0;
  position:                relative;
  overflow:                hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 0 0.5px rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.6);
}

#hdr-top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

/* ── NIVEL + XP (HUD del jugador) ────────────────────────────────── */
#xp-row {
  display:     flex;
  align-items: center;
  gap:         9px;
}

#rank-chip {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size:   10px;
  border-radius: 6px;
}

#xp-bar {
  flex:          1;
  height:        7px;
  border-radius: 4px;
  background:    rgba(0, 0, 0, 0.45);
  box-shadow:    inset 0 1px 2px rgba(0,0,0,0.6);
  overflow:      hidden;
}

#xp-fill {
  height:        100%;
  width:         0%;
  border-radius: 4px;
  background:    linear-gradient(90deg, var(--brand), var(--brand-soft));
  box-shadow:    0 0 10px rgba(139, 77, 255, 0.65);
  transition:    width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#xp-text {
  flex-shrink:    0;
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    500;
  color:          var(--text-3);
  letter-spacing: 0.3px;
  white-space:    nowrap;
}

#hdr::before {
  content:    '';
  position:   absolute;
  top: 0; left: 8%; right: 8%;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
}

#hdr > * {
  position: relative;
  z-index:  2;
}

#hdr h1 {
  font-family:    var(--font-sans);
  font-size:      16px;
  font-weight:    600;
  letter-spacing: -0.3px;
  color:          var(--text-2);
  margin:         0;
}

#hdr h1 span {
  color: var(--brand);
}

#fh {
  font-size:      9px;
  color:          var(--brand);
  letter-spacing: 2.5px;
  font-weight:    600;
  text-transform: uppercase;
  margin:         0 0 2px 0;
}

#hdr-right {
  text-align:     right;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
}

#clk {
  font-family:          var(--font-mono);
  font-size:            17px;
  font-weight:          600;
  font-variant-numeric: tabular-nums;
  color:                var(--text-2);
  margin:               0;
}

#lvl-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  color:          var(--brand);
  letter-spacing: 1.5px;
  font-weight:    700;
  text-shadow:    0 0 8px rgba(139, 77, 255, 0.5);
}

/* ── NAVEGACIÓN — Liquid Glass (estilo iOS 26 / Instagram) ──────── */
#nav {
  position:                fixed;
  bottom:                  calc(14px + env(safe-area-inset-bottom, 0px));
  left:                    16px;
  right:                   16px;
  background:              rgba(16, 16, 22, 0.38);
  -webkit-backdrop-filter: blur(36px) saturate(210%) brightness(1.12);
  backdrop-filter:         blur(36px) saturate(210%) brightness(1.12);
  border-radius:           var(--radius-pill);
  padding:                 7px;
  display:                 flex;
  justify-content:         space-around;
  gap:                     2px;
  z-index:                 100;
  overflow:                hidden;
  max-width:               448px;
  margin-left:             auto;
  margin-right:            auto;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 0 0.5px rgba(255,255,255,0.12),
    0 24px 60px rgba(0,0,0,0.75);
}

#nav::before {
  content:    '';
  position:   absolute;
  top: 0; left: 10%; right: 10%;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  pointer-events: none;
}

.nb {
  background:      none;
  border:          none;
  color:           var(--text-3);
  font-family:     var(--font-sans);
  font-size:       8.5px;
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  0.6px;
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  flex:            1;
  min-width:       44px;                /* área táctil mínima iOS */
  padding:         8px 4px 7px;
  position:        relative;
  border-radius:   var(--radius-pill);
  z-index:         2;
  transition:      color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* "Lente" de cristal ÚNICA que se desliza siguiendo el dedo */
#nav-lens {
  position:      absolute;
  top:           7px;
  bottom:        7px;
  left:          0;
  width:         60px;                 /* lo fija el JS al ancho del botón */
  border-radius: var(--radius-pill);
  z-index:       1;
  pointer-events: none;
  background:    linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 0 0.5px rgba(255,255,255,0.10),
    0 4px 14px rgba(0,0,0,0.35),
    0 0 18px rgba(139, 77, 255, 0.18);
  transform:  translateX(0);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease;
  will-change: transform;
}

/* mientras arrastras, la lente sigue el dedo al instante */
#nav.dragging #nav-lens {
  transition: none;
}

.nb.active {
  color:       var(--brand);
  font-weight: 700;
}

/* botón bajo el dedo mientras se desliza */
.nb.drag-hover {
  color: var(--brand);
}

.nb .ni {
  font-size:   20px;
  line-height: 1;
  transition:  transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nb.active .ni {
  filter:    drop-shadow(0 0 8px rgba(139, 77, 255, 0.8));
  transform: translateY(-1px);
}

.nb:active {
  transform: scale(0.9);
}

/* ── SCROLLBAR CUSTOM ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 77, 255, 0.3);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ── TOASTS ─────────────────────────────────────────────────────── */
#toasts {
  position:       fixed;
  bottom:         calc(100px + env(safe-area-inset-bottom, 0px));
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  z-index:        250;
  pointer-events: none;
  width:          calc(100% - 48px);
  max-width:      400px;
}

.toast {
  background:              rgba(20, 20, 26, 0.85);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter:         blur(30px) saturate(180%);
  border-radius:           var(--radius-pill);
  padding:                 10px 20px;
  font-family:             var(--font-sans);
  font-size:               12px;
  font-weight:             500;
  color:                   var(--text-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 0.5px rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.6);
  animation:               toast-in 0.3s ease;
  max-width:               100%;
  text-align:              center;
}

.toast-ok    { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(52,211,153,0.35), 0 8px 24px rgba(0,0,0,0.6); }
.toast-error { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(248,113,113,0.45), 0 8px 24px rgba(0,0,0,0.6); color: #FCA5A5; }

.toast.out {
  opacity:    0;
  transform:  translateY(8px);
  transition: all 0.3s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PANTALLA DE ACCESO ─────────────────────────────────────────── */
#lock {
  position:        fixed;
  inset:           0;
  /* El horizonte de marca: aura violeta asomando por el tercio inferior.
     assets/lock-bg.webp encima si existe; el degradado es el fallback.
     En WebP son 10 KB en vez de 625: es la primera pantalla que se ve. */
  background:
    url('/assets/lock-bg.webp') center bottom / cover no-repeat,
    linear-gradient(to top, rgba(139, 77, 255, 0.22), transparent 45%),
    var(--bg-base);
  z-index:         300;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}

.lock-card {
  width:                   100%;
  max-width:               340px;
  background:              rgba(20, 20, 26, 0.65);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter:         blur(40px) saturate(180%);
  border-radius:           var(--radius-lg);
  padding:                 32px 24px;
  text-align:              center;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    0 0 0 0.5px rgba(255,255,255,0.08),
    0 20px 60px rgba(0,0,0,0.7);
}

.lock-card h2 {
  font-family:    var(--font-sans);
  font-size:      18px;
  font-weight:    700;
  letter-spacing: 3px;
  color:          var(--brand);
  margin-bottom:  6px;
}

.lock-card p {
  font-size:     12px;
  color:         var(--text-3);
  margin-bottom: 18px;
}

.lock-card input {
  width:         100%;
  padding:       12px 16px;
  background:    var(--surface-2);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color:         var(--text-1);
  font-family:   var(--font-sans);
  font-size:     14px;
  text-align:    center;
  margin-bottom: 12px;
  outline:       none;
}

.lock-card input:focus {
  border-color: var(--brand);
  box-shadow:   0 0 12px rgba(139, 77, 255, 0.25);
}

#lock-err {
  color:      var(--danger);
  font-size:  11px;
  margin-top: 10px;
  min-height: 14px;
}

/* ── BOTÓN ELIMINAR COMIDA ──────────────────────────────────────── */
.meal-del {
  background:      none;
  border:          none;
  color:           var(--text-4);
  font-size:       13px;
  cursor:          pointer;
  padding:         8px 4px 8px 12px;
  flex-shrink:     0;
  transition:      color var(--transition);
}

.meal-del:hover,
.meal-del:active {
  color: var(--danger);
}

/* ── DESKTOP (la PWA vive en una columna centrada) ──────────────── */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(ellipse 60% 45% at 70% 10%, rgba(139, 77, 255, 0.06), transparent),
      radial-gradient(ellipse 55% 40% at 20% 80%, rgba(52, 211, 153, 0.05), transparent),
      var(--bg-base);
  }

  #app {
    max-width:  520px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 40px 120px rgba(0, 0, 0, 0.8);
    border-radius: 0;
  }

  #nav {
    max-width: 488px;
  }

  /* Hover útil con ratón */
  .nb:hover        { color: var(--brand-soft); }
  .rc:hover        { border-color: rgba(139, 77, 255, 0.4); cursor: pointer; }
  button:hover     { filter: brightness(1.08); }
}


/* ── MARCA EN LA CABECERA (rebranding OKIRO) ────────────────────── */
#hdr-brand {
  display:     flex;
  align-items: center;
  gap:         9px;
}

#hdr-mark {
  flex-shrink: 0;
  color:       var(--text-1);
  filter:      drop-shadow(0 0 6px rgba(139, 77, 255, 0.35));
}

/* El aura nunca baja del horizonte: sin animaciones que lo hundan */
@media (prefers-reduced-motion: reduce) {
  #hdr-mark { filter: none; }
}