/* ==========================================================================
   base.css · Fonaments compartits per tot el joc "El tresor d'Areus"
   Es carrega una sola vegada (marcat amb data-persist a l'index.html) i
   NO es descarrega en canviar de nivell, a diferència dels css/nivellN.css.
   ========================================================================== */

/* --- Tipografies: una única petició en comptes de repetir @import a cada nivell --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Carter+One&family=Mea+Culpa&family=Modern+Antiqua&family=Protest+Guerrilla&family=Tagesschrift&family=Tangerine:wght@700&display=swap');

:root{
   /* --- Paleta --- */
   --morat:        #4A235A;
   --morat-fosc:   #3A1C47;
   --blau:         #5DADE2;
   --groc:         #FFC300;
   --groc-clar:    #FFE385;
   --vermell:      #C70039;
   --marro:        #A04000;

   /* Vels translúcids reutilitzats a les targetes */
   --vel-blanc:    rgba(255, 255, 255, 0.55);
   --vel-vora:     rgba(255, 255, 255, 0.70);

   /* --- Tipografies --- */
   --font-titol:   'Carter One', cursive;
   --font-text:    'Archivo Narrow', sans-serif;
   --font-desc:    'Tagesschrift', serif;

   /* --- Ombres reutilitzables --- */
   --ombra-suau:   0 2px 2px 0 rgba(0,0,0,0.14),
                   0 1px 5px 0 rgba(0,0,0,0.12),
                   0 3px 1px -2px rgba(0,0,0,0.2);
   --ombra-card:   0 6px 22px rgba(0,0,0,0.28);
}

/* ==========================================================================
   Vora superior difuminada de la zona amb scroll (.inferior)
   Quan el contingut és més alt que la pantalla i es fa scroll, la part que
   puja es fon cap a transparent en lloc de tallar-se en sec, donant la
   sensació que hi ha més contingut a dalt. Aplica a tots els nivells.
   ========================================================================== */
.inferior{
   -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
           mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}

/* ==========================================================================
   Panell-mapa lateral plegable amb marcador de progrés (aurèola daurada)
   ========================================================================== */
#mapa-panel{
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   z-index: 40;
   display: flex;
   align-items: center;
   transition: transform .35s ease;
}
#mapa-panel.plegat{ transform: translateX(calc(-100% + 40px)); }  /* amagat excepte la pestanya */
#mapa-panel.ocult{ display: none; }

#mapa-cos{
   position: relative;
   height: 100vh;
}
#mapa-img{
   height: 100vh;
   width: auto;
   display: block;
   box-shadow: 5px 0 20px rgba(0,0,0,0.45);
}

/* Aurèola que marca el nivell actual (posició fixada per JS amb top/left en %) */
#mapa-aura{
   position: absolute;
   width: 13vh;
   height: 13vh;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255,210,80,0.60) 0%, rgba(255,200,70,0.28) 45%, rgba(255,200,70,0) 70%);
   pointer-events: none;
   animation: mapa-aura-puls 1.8s ease-in-out infinite;
}
@keyframes mapa-aura-puls{
   0%, 100% { opacity: .75; transform: translate(-50%,-50%) scale(.9); }
   50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
}

/* Pestanya per obrir/tancar el mapa */
#mapa-toggle{
   align-self: center;
   width: 40px;
   height: 66px;
   background-color: var(--groc-clar);
   border: 3px solid var(--marro);
   border-left: none;
   border-radius: 0 14px 14px 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 3px 0 8px rgba(0,0,0,0.35);
}
#mapa-toggle img{ width: 26px; }