@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

  /* ============ RESET ============ */
  * { box-sizing: border-box; }
  /* +12.5% sobre el tamaño base del navegador -- pedido tras pruebas en
     calle (legibilidad al sol). Escala todo lo que use rem/em; el texto
     que usa px fijo en línea (la mayoría de las etiquetas pequeñas de la
     app) no se ve afectado por esto -- tocar esos cientos de valores uno
     a uno es un repaso aparte, no algo seguro de hacer a ciegas aquí. */
  html { font-size: 112.5%; }
  html, body { height: 100%; margin: 0; padding: 0; }
  button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }
  img, svg { display: block; }

  /* ============ TOKENS ============ */
  :root {
    --parchment: #FAF6ED;
    --volcanic-dark: #1c1512;
    --anaga-green: #15241C;
    --earth-wood: #8C6239;
    --gold-accent: #C89B3C;
    --emerald-tech: #00E699;
  }

  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1e293b;
    background-color: #1c1512 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c89b3c' stroke-width='1.5' opacity='0.7'%3E%3Ccircle cx='40' cy='40' r='10'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='40'/%3E%3Cpath d='M0 0l80 80M80 0L0 80' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 100px;
  }

  .li-font-rpg { font-family: 'Cinzel', serif; }
  .li-font-tech { font-family: 'Space Grotesk', sans-serif; }

  /* ============ PERGAMINO ============ */
  .li-pergamino {
    background: linear-gradient(160deg, #EDE0C8 0%, #DFCBA0 100%);
    border-radius: 3% 2% 4% 3% / 2% 4% 2% 4%;
    box-shadow: inset 0 0 40px rgba(139,69,19,0.15), inset 0 0 10px rgba(0,0,0,0.1), 0 25px 60px rgba(0,0,0,0.9);
    border: 3px solid rgba(200,155,60,0.4);
  }
  .li-pergamino-interior {
    background-image:
      linear-gradient(rgba(140,98,57,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,98,57,0.06) 1px, transparent 1px),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-20,100 C40,-20 120,220 220,100' fill='none' stroke='%238C6239' stroke-width='2' opacity='0.08'/%3E%3Cpath d='M-20,120 C40,0 120,240 220,120' fill='none' stroke='%238C6239' stroke-width='0.5' opacity='0.08'/%3E%3Cpath d='M-20,80 C40,-40 120,200 220,80' fill='none' stroke='%238C6239' stroke-width='0.5' opacity='0.08'/%3E%3Cpath d='M-20,150 C60,50 140,250 220,150' fill='none' stroke='%238C6239' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 30px 30px, 30px 30px, 150px 150px;
  }

  @keyframes li-shine {
    0% { transform: translateX(-150%) rotate(35deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(250%) rotate(35deg); opacity: 0; }
  }
  .li-shine { position: relative; overflow: hidden; }
  .li-shine::before {
    content: '';
    position: absolute;
    top: -100%; left: -50%;
    width: 50%; height: 300%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(200,155,60,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(35deg);
    animation: li-shine 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
    pointer-events: none;
    z-index: 50;
  }

  @keyframes li-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(0,230,153,0.55); }
    100% { box-shadow: 0 0 0 16px rgba(0,230,153,0); }
  }
  .li-pulse-ring { animation: li-pulse-ring 1.8s ease-out infinite; }

  @keyframes li-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }
  .animate-ping { animation: li-ping 1.4s cubic-bezier(0,0,0.2,1) infinite; }

  @keyframes li-pulse-op {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .animate-pulse { animation: li-pulse-op 1.6s cubic-bezier(0.4,0,0.6,1) infinite; }

  .li-scrollbar-hide::-webkit-scrollbar { display: none; }
  .li-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

  /* ============ TABLERO TÁCTICO DE MUNDO ABIERTO (pan & zoom, sin costa dibujada) ============ */
  .li-tactical-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #150f0c;
    cursor: grab;
    touch-action: none;
  }
  .li-tactical-viewport.li-dragging { cursor: grabbing; }
  .li-tactical-world {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #150f0c;
    background-image:
      linear-gradient(rgba(0,230,153,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,230,153,0.07) 1px, transparent 1px),
      url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c89b3c' stroke-width='1.5' opacity='0.6'%3E%3Ccircle cx='45' cy='45' r='12'/%3E%3Ccircle cx='45' cy='45' r='24'/%3E%3Ccircle cx='45' cy='45' r='36'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 22px 22px, 22px 22px, 90px 90px;
    transform-origin: 0 0;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .li-tactical-world.li-no-transition { transition: none; }

  .li-tactical-label { font-family: 'Space Grotesk', sans-serif; fill: #FAF6ED; letter-spacing: 0.05em; }
  .li-tactical-sublabel { font-family: 'Space Grotesk', sans-serif; fill: rgba(250,246,237,0.45); letter-spacing: 0.08em; }
  .li-quest-pin { cursor: pointer; }
  .li-quest-pin circle.li-quest-dot { fill: #C89B3C; stroke: #FAF6ED; stroke-width: 1.5; }
  .li-player-ring { animation: li-pulse-ring-svg 1.8s ease-out infinite; transform-origin: center; }
  @keyframes li-pulse-ring-svg {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.4); }
  }

  /* ---- nodos de región (tablero de mundo abierto estilo board-game) ---- */
  .li-region-node { cursor: pointer; }
  .li-region-medallion-locked { fill: rgba(28,21,18,0.92); stroke: rgba(140,98,57,0.55); stroke-width: 2; }
  .li-region-medallion-open { fill: rgba(0,230,153,0.14); stroke: #00E699; stroke-width: 2.5; }
  .li-region-lock-badge { fill: var(--volcanic-dark); stroke: rgba(140,98,57,0.6); stroke-width: 1.5; }
  .li-connector-line { fill: none; stroke: rgba(140,98,57,0.5); stroke-width: 2; stroke-dasharray: 6 6; }
  .li-connector-active { stroke: #00E699; stroke-opacity: 0.55; stroke-dasharray: none; }
  @keyframes li-region-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
  }
  .li-region-shake { animation: li-region-shake 0.4s ease; }

  /* ---- controles flotantes de zoom ---- */
  .li-zoom-controls {
    position: absolute;
    right: 14px;
    top: 66px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .li-zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background-color: rgba(28,21,18,0.92);
    border: 1.5px solid var(--gold-accent);
    color: var(--gold-accent);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(200,155,60,0.25);
    transition: transform 0.15s ease;
  }
  .li-zoom-btn:active { transform: scale(0.9); }
  .li-zoom-btn-reset { font-size: 15px; }

  /* ============ MOTOR MAPLIBRE (mapa real recoloreado) ============ */
  .li-gl-loading {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background-color: #150f0c;
    color: rgba(250,246,237,0.75);
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  #maplibreContainer .maplibregl-ctrl-attrib { font-size: 7px !important; padding: 0 2px !important; background: rgba(28,21,18,0.5) !important; color: rgba(250,246,237,0.4) !important; opacity: 0.6; }
  #maplibreContainer .maplibregl-ctrl-attrib a { color: rgba(0,230,153,0.6) !important; }
  #maplibreContainer .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 14px !important; }
  #maplibreContainer .maplibregl-ctrl-logo { opacity: 0.35; }
  #maplibreContainer, #map { background-color: #0c1926 !important; }

  .li-gl-player-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
  .li-gl-player-ring {
    position: absolute;
    width: 30px; height: 30px;
    border-radius: 999px;
    border: 2px solid #00E699;
    animation: li-pulse-ring-svg 1.8s ease-out infinite;
  }
  .li-gl-player-dot {
    position: relative;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: #0B120E;
    border: 2px solid #00E699;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }

  .li-hidden-marker { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: default; }
  #maplibreContainer .maplibregl-marker:has(.li-hidden-marker) { transition: transform 1.6s ease-in-out; }
  /* Prioridad de toque para Berrinche (feedback de campo: "a veces el toque
     se lo lleva otro elemento debajo, no el marcador de Berrinche"). Los
     marcadores de MapLibre se apilan por orden de inserción en el DOM, no
     por relevancia -- como Berrinche deambula (se reposiciona con
     setLngLat en vez de reinsertarse), su posición de apilamiento queda
     fija desde que se crea, así que cualquier otro marcador o el propio
     mapa puede acabar "encima" de ella según el orden de carga. Forzando
     su z-index por encima de cualquier otro marcador, el toque siempre le
     llega a ella primero cuando hay superposición visual. */
  #maplibreContainer .maplibregl-marker:has(.li-hidden-marker-capture) { z-index: 50 !important; }
  .li-hidden-marker-icon {
    position: relative; z-index: 2;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: rgba(237,224,200,0.95);
    border: 2.5px solid #c89b3c;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    opacity: 0.9;
    filter: grayscale(0.3) brightness(0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    animation: li-hidden-marker-pulse 2s ease-in-out infinite;
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  }
  @keyframes li-hidden-marker-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 0 rgba(200,155,60,0.55); }
    50% { box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 9px rgba(200,155,60,0); }
  }
  .li-hidden-marker-glow {
    position: absolute; inset: -6px; border-radius: 999px;
    background: radial-gradient(circle, rgba(0,230,153,0.6) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.6s ease;
  }
  .li-hidden-marker-revealed .li-hidden-marker-icon {
    animation: none;
    opacity: 1; filter: grayscale(0); transform: scale(1.15);
    background: rgba(0,230,153,0.18);
    border: 1.5px solid #00E699;
    box-shadow: 0 0 12px rgba(0,230,153,0.7);
  }
  .li-hidden-marker-revealed .li-hidden-marker-glow { opacity: 1; }
  .li-hidden-marker-inrange .li-hidden-marker-icon {
    animation: li-hidden-marker-inrange-pulse 0.9s ease-in-out infinite !important;
    opacity: 1 !important; filter: grayscale(0) !important;
    background: rgba(0,230,153,0.3) !important;
    border: 2.5px solid #00E699 !important;
    cursor: pointer;
  }
  .li-hidden-marker-inrange .li-hidden-marker-glow { opacity: 1; }
  @keyframes li-hidden-marker-inrange-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(0,230,153,0.8); }
    50% { transform: scale(1.18); box-shadow: 0 0 22px rgba(0,230,153,1); }
  }
  .li-hidden-marker-wobble { animation: li-marker-wobble 0.4s ease; }
  @keyframes li-marker-wobble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-4px) rotate(-8deg); }
    40% { transform: translateX(4px) rotate(8deg); }
    60% { transform: translateX(-3px) rotate(-5deg); }
    80% { transform: translateX(3px) rotate(5deg); }
  }
  /* Icono de misiones tipo "capture": la propia imagen del token, más grande,
     con un anillo de estela girando alrededor — se distingue claramente de
     las misiones de pregunta (pergamino). */
  .li-hidden-marker-capture { width: 46px; height: 46px; }
  .li-hidden-marker-capture .li-hidden-marker-icon {
    width: 38px; height: 38px;
    padding: 0; overflow: hidden;
    background: radial-gradient(circle, rgba(200,155,60,0.3) 0%, rgba(28,21,18,0.92) 75%);
  }
  .li-hidden-marker-capture .li-hidden-marker-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.8); border-radius: 999px; }
  .li-hidden-marker-trail {
    position: absolute; inset: -9px; border-radius: 999px;
    border: 2px dashed rgba(200,155,60,0.55);
    animation: li-trail-spin 3.2s linear infinite;
    pointer-events: none;
  }
  .li-hidden-marker-inrange .li-hidden-marker-trail { border-color: rgba(0,230,153,0.7); animation-duration: 1.4s; }
  @keyframes li-trail-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .li-hidden-marker-completed .li-hidden-marker-icon {
    background: rgba(243,211,130,0.25) !important;
    border: 1.5px solid #f3d382 !important;
    box-shadow: 0 0 14px rgba(243,211,130,0.85) !important;
  }
  .li-hidden-marker-locked .li-hidden-marker-icon {
    animation: none !important;
    opacity: 0.55 !important;
    filter: grayscale(1) !important;
    border: 1.5px solid rgba(150,150,150,0.6) !important;
  }
  .li-hidden-marker-locked::after {
    content: "⏳";
    position: absolute;
    top: -4px; right: -4px;
    font-size: 13px;
    filter: none;
  }
  /* Misión descubierta pero sin completar: queda un "?" en el mapa, en las
     coordenadas de activación (no necesariamente el punto físico exacto),
     para poder retomarla tocándola de nuevo -- sin esto, cerrar sin
     completar significa perderla de vista hasta volver a la Taberna. */
  .li-hidden-marker-pending::after {
    content: "❓";
    position: absolute;
    top: -4px; right: -4px;
    font-size: 13px;
    filter: none;
    animation: li-spark-twinkle 2s ease-in-out infinite;
  }
  .li-hidden-marker-completed .li-hidden-marker-glow {
    background: radial-gradient(circle, rgba(243,211,130,0.65) 0%, transparent 70%) !important;
  }
  /* Misiones de Campaña: escudo propio en vez del icono-moneda circular
     genérico -- sin fondo/borde circular, tamaño mayor para que el escudo
     (más alto que ancho) no quede recortado. */
  .li-campaign-marker { width: 40px; height: 48px; }
  .li-campaign-marker .li-hidden-marker-icon {
    width: 40px; height: 48px;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    animation: li-campaign-pulse 2.6s ease-in-out infinite;
  }
  .li-campaign-shield-icon { width: 100%; height: 100%; display: block; }
  .li-campaign-shield-icon svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
  @keyframes li-campaign-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }
  .li-campaign-marker.li-hidden-marker-inrange .li-hidden-marker-icon { animation: li-campaign-pulse 0.9s ease-in-out infinite !important; }
  /* Completada: el escudo se atenúa (no se borra ni se sustituye) y se
     superpone un check verde en la esquina -- pedido explícito de que el
     estado completado se vea "elegante" encima del diseño nuevo. */
  .li-hidden-marker-completed.li-campaign-marker .li-campaign-shield-icon svg {
    filter: grayscale(0.75) brightness(0.5) drop-shadow(0 2px 5px rgba(0,0,0,0.6));
  }
  .li-hidden-marker-completed.li-campaign-marker::after {
    content: "✅";
    position: absolute;
    bottom: -3px; right: -6px;
    font-size: 15px;
    filter: none;
  }
  /* Nodo de Lore: pergamino antiguo gris (NO el dorado/esmeralda de las
     misiones) con destello sutil + leve flotación, para distinguirlo de un
     vistazo en el mapa. Estilo propio, no reutiliza -revealed/-inrange. */
  .li-lore-marker .li-hidden-marker-icon {
    background: radial-gradient(circle, rgba(196,192,182,0.4) 0%, rgba(52,50,46,0.94) 78%) !important;
    border: 1.5px solid #8f887a !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 11px rgba(200,196,184,0.55) !important;
    opacity: 1 !important; filter: none !important;
    animation: li-lore-shimmer 2.6s ease-in-out infinite, li-lore-float 3.8s ease-in-out infinite !important;
  }
  .li-lore-marker .li-hidden-marker-glow {
    background: radial-gradient(circle, rgba(210,206,196,0.5) 0%, transparent 70%) !important;
    opacity: 1 !important;
  }
  @keyframes li-lore-shimmer {
    0%, 100% { filter: brightness(1) saturate(0.6); }
    50% { filter: brightness(1.4) saturate(0.85); }
  }
  @keyframes li-lore-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .li-lore-marker-label {
    position: absolute; top: 100%; left: 50%; margin-top: 3px;
    transform: translateX(-50%);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em;
    color: #cdc7b8; text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    white-space: nowrap; pointer-events: none;
  }
  @keyframes li-levelup-pop {
    0% { transform: scale(0.5); opacity: 0; }
    55% { transform: scale(1.08); opacity: 1; }
    75% { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes li-spark-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
  }
  .li-levelup-spark {
    position: absolute;
    font-size: 1.5rem;
    z-index: 15;
    animation: li-spark-twinkle 1.5s ease-in-out infinite;
    pointer-events: none;
  }

  /* ---- confeti al completar cualquier misión ---- */
  .li-confetti-piece {
    position: fixed;
    top: -12px;
    width: 8px;
    height: 14px;
    z-index: 3000;
    pointer-events: none;
    animation-name: li-confetti-fall;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    animation-fill-mode: forwards;
  }
  @keyframes li-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(600deg); opacity: 0.9; }
  }

  .li-gl-region-pin {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer;
  }
  .li-gl-region-medallion {
    width: 40px; height: 40px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
  }
  .li-gl-region-medallion svg { width: 19px; height: 19px; }
  .li-gl-region-medallion.locked { background: rgba(28,21,18,0.92); border: 2px solid rgba(140,98,57,0.55); color: rgba(200,155,60,0.75); }
  .li-gl-region-medallion.open { background: rgba(0,230,153,0.16); border: 2.5px solid #00E699; box-shadow: 0 0 10px rgba(0,230,153,0.4); color: #00E699; }
  .li-gl-region-medallion.mystic { background: rgba(24,20,10,0.85); border: 2px solid rgba(200,155,60,0.7); box-shadow: 0 0 14px rgba(200,155,60,0.35); color: rgba(200,155,60,0.85); }
  /* Cartel rústico/aborigen (La Laguna): madera y oro, sin el brillo neón
     de ".open" -- pensado para el único nodo "de verdad jugable" del mapa,
     que merece leerse como un hito del terreno, no como una etiqueta de UI. */
  .li-gl-region-medallion.rustic { background: rgba(200,155,60,0.14); border: 2.5px solid var(--gold-accent); color: var(--gold-accent); }
  .li-gl-region-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FAF6ED;
    background: rgba(6,10,8,0.7);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .li-gl-region-label.rustic {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--parchment);
    background: rgba(28,21,18,0.88);
    border: 1px solid rgba(200,155,60,0.45);
  }
  .li-gl-region-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00E699;
    text-shadow: 0 0 6px rgba(0,230,153,0.7);
    margin-top: 2px;
    white-space: nowrap;
  }
  .li-gl-region-subtitle.mystic { color: rgba(200,155,60,0.85); text-shadow: 0 0 6px rgba(200,155,60,0.5); }

  /* Modo depuración (solo admin, ver logAdminDebugEvent en app.js): línea
     discreta de una vez por evento de proximidad/permanencia, apilada en
     la esquina inferior izquierda -- deliberadamente distinta del toast
     central de juego (li-toast) para no pisarlo ni confundirse con un aviso
     de recompensa real. */
  .li-admin-debug-line {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #00E699;
    background: rgba(6,10,8,0.85);
    border: 1px solid rgba(0,230,153,0.4);
    border-radius: 5px;
    padding: 3px 7px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .li-admin-debug-line.show { opacity: 1; transform: translateY(0); }
  /* Variante de fallo -- antes un error de red/servidor en proximidad o
     permanencia era invisible del todo, ni para el admin (el simulacro de
     hoy tardó horas en detectarse por esto exacto). Se queda más tiempo en
     pantalla que el aviso normal a propósito, para que de verdad se note. */
  .li-admin-debug-line-error {
    color: #FF6B6B;
    border-color: rgba(255,107,107,0.5);
  }

  /* ============ ESTÉTICA RPG ÉPICA (modales / pop-ups) ============ */
  .li-pergamino-epic {
    background: linear-gradient(145deg, #281e18 0%, #1c1512 100%);
    border-radius: 3% 2% 4% 3% / 2% 4% 2% 4%;
    border: 4px solid var(--gold-accent);
    box-shadow:
      inset 0 0 50px rgba(0,0,0,0.65),
      0 0 0 2px rgba(200,155,60,0.25),
      0 0 40px rgba(200,155,60,0.4),
      0 25px 70px rgba(0,0,0,0.9);
  }
  .li-epic-heading { text-transform: uppercase; letter-spacing: 2px; }
  .li-pergamino-epic-interior {
    background-image:
      linear-gradient(rgba(200,155,60,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,155,60,0.05) 1px, transparent 1px),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-20,100 C40,-20 120,220 220,100' fill='none' stroke='%23C89B3C' stroke-width='2' opacity='0.07'/%3E%3Cpath d='M-20,120 C40,0 120,240 220,120' fill='none' stroke='%23C89B3C' stroke-width='0.5' opacity='0.07'/%3E%3Cpath d='M-20,80 C40,-40 120,200 220,80' fill='none' stroke='%23C89B3C' stroke-width='0.5' opacity='0.07'/%3E%3C/svg%3E");
    background-size: 30px 30px, 30px 30px, 150px 150px;
  }

  /* ---- tarjeta "Guanche Volcanic RPG": basalto + borde de bronce grabado ---- */
  .li-guanche-card {
    background: linear-gradient(145deg, #281e18 0%, #1c1512 100%) !important;
    border: 2px solid #c89b3c !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7), inset 0 0 10px rgba(200,155,60,0.15) !important;
  }

  /* ---- fondo oscuro de los paneles de la app (Códice/Mercado/Taberna/Explorador) ---- */
  .li-guanche-panel { background: linear-gradient(180deg, #1c1512 0%, #281e18 100%) !important; }

  /* ---- logros: mosaico (antes intentaba usar "grid grid-cols-3 gap-2.5",
     pero esas clases nunca se definieron -> colapsaba a lista vertical) ---- */
  .li-achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }
  .li-achievement-tile {
    position: relative;
    padding: 0.7rem 0.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }
  .li-achievement-locked { opacity: 0.45; }
  .li-achievement-titulo {
    border-color: var(--gold-accent) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 14px rgba(200,155,60,0.35), inset 0 0 10px rgba(200,155,60,0.2) !important;
  }
  .li-achievement-icon { font-size: 1.7rem; line-height: 1; }
  .li-achievement-locked .li-achievement-icon { filter: grayscale(1); }
  .li-achievement-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #ebdcc6;
    line-height: 1.25;
  }
  .li-achievement-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 7.5px;
    font-weight: 500;
    color: #99aab5;
    line-height: 1.3;
  }
  .li-achievement-lock { position: absolute; top: 6px; right: 6px; font-size: 9px; }
  .li-achievement-badge { position: absolute; top: 6px; left: 6px; font-size: 9px; }

  .li-rune {
    position: absolute;
    color: var(--gold-accent);
    opacity: 0.4;
    font-size: 13px;
    z-index: 10;
    pointer-events: none;
    font-family: 'Cinzel', serif;
  }

  /* ---- modal de autenticación ---- */
  .li-auth-input {
    width: 100%;
    background-color: #150f0c !important;
    border: 1px solid #c89b3c;
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
    color: #ebdcc6;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
  }
  .li-auth-input::placeholder { color: rgba(235,220,198,0.4); }
  .li-auth-input:focus { outline: none; border-color: var(--gold-accent); box-shadow: 0 0 8px rgba(200,155,60,0.35); }
  .li-pw-toggle {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 4px;
    opacity: 0.65; transition: opacity 0.15s ease;
  }
  .li-pw-toggle:hover { opacity: 1; }
  .li-auth-mode-btn { background-color: rgba(0,0,0,0.25); color: rgba(235,220,198,0.55); transition: all .2s ease; }
  .li-auth-mode-btn.active { background-color: var(--volcanic-dark); color: var(--gold-accent); }

  /* ---- toast de interacción ---- */
  .li-toast {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 90px;
    z-index: 50;
    background-color: #1c1610;
    border: 2px solid var(--gold-accent);
    border-radius: 0.9rem;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(200,155,60,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .li-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .li-toast-message { flex: 1; margin: 0; color: var(--parchment); font-size: 12px; font-family: 'Space Grotesk', sans-serif; line-height: 1.4; }
  .li-toast-close { color: var(--gold-accent); font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; background: none; border: none; text-decoration: underline; }

  /* ---- tarjeta de coordenadas del jugador ---- */
  .li-player-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(28,21,18,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .li-player-card-overlay.show { opacity: 1; pointer-events: auto; }
  .li-player-card {
    width: 100%;
    max-width: 260px;
    padding: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.25s ease;
  }
  .li-player-card-overlay.show .li-player-card { transform: scale(1); }



  /* ---- mini token del Baifo (icono de card, landing) ---- */
  .li-token-medallion {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--volcanic-dark);
    border: 1px solid rgba(16,185,129,0.5);
  }
  .li-token-medallion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    display: block;
  }


  /* ============ MINI UTILITY SET (matches original className usage) ============ */
  .absolute { position: absolute; }
  .relative { position: relative; }
  .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  .top-0 { top: 0; }
  .top-4 { top: 1rem; }
  .bottom-4 { bottom: 1rem; }
  .left-0 { left: 0; }
  .left-3 { left: 0.75rem; }
  .left-4 { left: 1rem; }
  .right-0 { right: 0; }
  .right-3 { right: 0.75rem; }
  .right-4 { right: 1rem; }
  .z-10 { z-index: 10; }
  .z-20 { z-index: 20; }
  .z-30 { z-index: 30; }
  .z-40 { z-index: 40; }

  .flex { display: flex; }
  .flex-1 { flex: 1 1 0%; }
  .flex-col { flex-direction: column; }
  .grid { display: grid; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-around { justify-content: space-around; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .inline-flex { display: inline-flex; }
  .inline-block { display: inline-block; }
  .block { display: block; }
  .overflow-hidden { overflow: hidden; }
  .object-contain { object-fit: contain; }
  .overflow-y-auto { overflow-y: auto; }
  .pointer-events-none { pointer-events: none; }
  .shrink-0 { flex-shrink: 0; }
  .w-full { width: 100%; }
  .h-full { height: 100%; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .min-h-screen { min-height: 100vh; }

  .h-1\.5 { height: 0.375rem; } .h-2 { height: 0.5rem; } .h-4 { height: 1rem; }
  .h-9 { height: 2.25rem; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; }
  .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-48 { height: 12rem; }
  .w-1\.5 { width: 0.375rem; } .w-2 { width: 0.5rem; } .w-4 { width: 1rem; }
  .w-9 { width: 2.25rem; } .w-10 { width: 2.5rem; } .w-16 { width: 4rem; }
  .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-px { width: 1px; }

  .p-1 { padding: 0.25rem; } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: 0.75rem; }
  .p-3\.5 { padding: 0.875rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
  .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; }
  .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; }
  .pb-4 { padding-bottom: 1rem; } .pb-28 { padding-bottom: 7rem; }
  .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
  .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; }
  .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; }
  .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; }
  .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
  .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; }
  .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; }
  .space-y-1\.5 > * + * { margin-top: 0.375rem; }
  .space-y-2\.5 > * + * { margin-top: 0.625rem; }
  .space-y-3 > * + * { margin-top: 0.75rem; }

  .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; }
  .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; } .text-3xl { font-size: 1.875rem; }
  .text-10 { font-size: 10px; } .text-11 { font-size: 11px; }
  .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
  .font-black { font-weight: 900; }
  .uppercase { text-transform: uppercase; }
  .italic { font-style: italic; }
  .underline { text-decoration: underline; }
  .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; }
  .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; }
  .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; }
  .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; }
  .text-center { text-align: center; } .text-left { text-align: left; }

  .border { border-width: 1px; border-style: solid; }
  .border-t-2 { border-top-width: 2px; border-style: solid; }
  .border-b-2 { border-bottom-width: 2px; border-style: solid; }
  .border-l-2 { border-left-width: 2px; border-style: solid; }
  .border-r-2 { border-right-width: 2px; border-style: solid; }
  .rounded-full { border-radius: 9999px; }
  .rounded-xl { border-radius: 0.75rem; }
  .rounded-2xl { border-radius: 1rem; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-md { border-radius: 0.375rem; }

  .blur-md { filter: blur(12px); }
  .opacity-60 { opacity: 0.6; }
  .transition-transform { transition: transform 0.15s ease; }
  .btn-press:active { transform: scale(0.98); }

  @keyframes li-btn-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(0,230,153,0.4); }
    50% { transform: scale(1.03); box-shadow: 0 0 30px rgba(0,230,153,0.9), 0 0 10px rgba(255,255,255,0.8); }
  }
  .li-btn-pulse { animation: li-btn-pulse 2s infinite ease-in-out; }

  /* ---- botones esmeralda gaming ---- */
  #btnIniciarAventura, .li-btn-primary {
    background: linear-gradient(135deg, #00b377 0%, #006644 100%) !important;
    border: 1px solid #00e699 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
  }
  #btnIniciarAventura:hover, .li-btn-primary:hover {
    box-shadow: 0 0 25px rgba(0,230,153,0.8) !important;
    transform: translateY(-2px) !important;
  }

  /* ---- colchón inferior para no chocar con la barra de navegación ---- */
  .view-container { padding-bottom: 120px !important; }

  /* phone frame */
  .li-phone {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 830px;
    border-radius: 2.5rem;
    box-shadow: 0 30px 70px rgba(0,0,0,0.85);
    border: 1px solid rgba(200,155,60,0.35);
    overflow: hidden;
  }

  /* En un móvil real no tiene sentido el "marco flotante" de escritorio —
     el patrón decorativo del body se veía como una franja rara a los lados.
     Aquí el juego pasa a ocupar la pantalla entera, de borde a borde. */
  @media (max-width: 480px) {
    body { padding: 0; }
    .li-phone { max-width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
  }

  /* Oculta banners flotantes de servidores de prueba (p. ej. Tiiny.host) */
  div[id*="tiiny"], div[class*="tiiny"], #tiiny-host-banner { display: none !important; opacity: 0 !important; pointer-events: none !important; }

  /* Plegable del Panel Maestro (p. ej. reinicio de misiones de prueba) --
     <details> nativo en vez de JS a medida, sin estado ni listeners extra. */
  .li-admin-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .li-admin-details > summary::-webkit-details-marker { display: none; }
  .li-admin-details > summary::after {
    content: "▸";
    color: #f3d382;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .li-admin-details[open] > summary::after { transform: rotate(90deg); }

  /* Ofrenda Guanche: pantalla de éxito con un elemento en movimiento a
     propósito -- una captura de pantalla se queda congelada, esto no. Es
     lo que el camarero mira dos segundos para saber que el canje es de
     verdad, sin tener que preguntar ni escanear nada por su cuenta. */
  @keyframes li-ofrenda-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.65; }
  }
  .li-ofrenda-exito-pulse { animation: li-ofrenda-pulse 0.9s ease-in-out infinite; }