/* ============================================================
   CRONOJOCS UI SYSTEM — cronojocs-theme.css
   ============================================================
   Font de veritat única per a la identitat visual de tota la
   plataforma. Cronograna, whO1s? i qualsevol joc futur l'enllacen
   amb <link rel="stylesheet" href="../assets/cronojocs/cronojocs-theme.css">
   (ajusta la ruta relativa segons la profunditat del fitxer del joc).

   Canviar una variable aquí es propaga a tots els jocs que
   enllacin aquest fitxer — NO couen d'aquest CSS dins de cada
   HTML de joc.
   ============================================================ */

:root{
  /* ---- Paleta base ---- */
  --cj-navy: #0B1A2B;
  --cj-navy-2: #102743;
  --cj-navy-light: #1A3455;

  --cj-gold: #FFC83D;
  --cj-gold-dark: #D99400;

  --cj-cream: #FFF4D6;
  --cj-white: #FFFFFF;
  --cj-grey: #9CA3AF;

  --cj-blue: #22B8F0;

  --cj-green: #10C864;
  --cj-red: #FF3145;

  --cj-border: #041428;

  /* ---- Tipografia ---- */
  --cj-font-display: 'Press Start 2P', monospace;   /* titulars i elements de joc */
  --cj-font-body: 'VT323', monospace;                /* interfície i textos llargs */

  /* ---- Ombres / marcs arcade ---- */
  --cj-shadow-hard: 4px 4px 0 rgba(0,0,0,.45);
  --cj-shadow-btn: 0 4px 0 var(--cj-border);
  --cj-outline-blue: 0 0 0 2px var(--cj-blue);

  /* ---- Capes (z-index) — mateixa escala a tots els jocs ---- */
  --cj-z-bg: 0;       /* fons general navy */
  --cj-z-stadium: 1;  /* fons d'estadi */
  --cj-z-fx: 2;       /* scanlines / decoració arcade */
  --cj-z-game: 10;     /* joc interactiu (DOM real) */
  --cj-z-hud: 20;      /* marcador i controls */
  --cj-z-overlay: 30;  /* feedback / modals / interstitials */
}

/* ============================================================
   UTILITATS
   ============================================================ */
.pixel-asset{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   ESCENARI DE JOC — capa d'estadi + efecte arcade
   ============================================================
   Ús: <div class="cj-stage"> ... contingut real del joc ... </div>
   El fons MAI substitueix la UI — és només decoració darrere.
   ============================================================ */
.cj-stage{
  position: relative;
  isolation: isolate; /* evita fuites de z-index cap a ancestres/overlays */
  overflow: hidden;
  background: var(--cj-navy);
  z-index: var(--cj-z-bg);
}
.cj-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(5,20,40,.55), rgba(5,20,40,.72)),
    url("../cronojocs/backgrounds/stadium-desktop.jpg") center / cover no-repeat;
  z-index: var(--cj-z-stadium);
  pointer-events: none;
}
@media (max-width: 600px){
  .cj-stage::before{
    background:
      linear-gradient(rgba(5,20,40,.6), rgba(5,20,40,.8)),
      url("../cronojocs/backgrounds/stadium-mobile.jpg") center / cover no-repeat;
  }
}
.cj-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.025) 0,
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 4px
  );
  z-index: var(--cj-z-fx);
  pointer-events: none;
}
.cj-stage > *{
  position: relative;
  z-index: var(--cj-z-game);
}

/* ============================================================
   MARCADOR — component compartit (icona + valor + etiqueta)
   ============================================================
   Ús:
   <div class="cj-score-item">
     <img class="cj-score-icon pixel-asset" src="...points.png" alt="">
     <div><strong id="stat-pts">0</strong><span>Punts</span></div>
   </div>
   La dada segueix sent text HTML — l'asset és només la icona.
   ============================================================ */
.cj-scorebar{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: var(--cj-z-hud);
}
.cj-score-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 110px;
  padding: 10px 14px;
  background: var(--cj-navy);
  border: 2px solid var(--cj-blue);
  font-family: var(--cj-font-body);
}
.cj-score-icon{
  width: clamp(20px, 3vw, 38px);
  height: clamp(20px, 3vw, 38px);
  object-fit: contain;
  flex-shrink: 0;
}
.cj-score-item strong{
  display: block;
  color: var(--cj-gold);
  font-size: 22px;
  line-height: 1.1;
}
.cj-score-item span{
  display: block;
  color: var(--cj-cream);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 600px){
  .cj-scorebar{ gap: 3px; flex-wrap: nowrap; }
  .cj-score-item{
    min-width: 0; flex: 1;
    padding: 5px 3px; gap: 3px;
    flex-direction: column;
    border-width: 1.5px;
  }
  .cj-score-item strong{ font-size: 14px; }
  .cj-score-item span{ font-size: 7px; }
}

/* ============================================================
   BOTONS ARCADE
   ============================================================ */
.cj-btn{
  font-family: var(--cj-font-body);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid var(--cj-border);
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: var(--cj-shadow-btn);
  transition: transform .06s ease, box-shadow .06s ease;
}
.cj-btn:active{
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--cj-border);
}
.cj-btn-primary{ background: var(--cj-gold); color: var(--cj-navy); font-weight: 700; }
.cj-btn-primary:hover{ background: var(--cj-gold-dark); }
.cj-btn-secondary{ background: var(--cj-navy); color: var(--cj-cream); border-color: var(--cj-blue); }
.cj-btn-secondary:hover{ background: var(--cj-navy-2); }

/* ============================================================
   PANELL ARCADE genèric (targetes, targeta de jugador, etc.)
   ============================================================ */
.cj-panel{
  background: var(--cj-navy);
  border: 2px solid var(--cj-blue);
  outline: 1px solid var(--cj-gold);
  outline-offset: -4px;
  box-shadow: var(--cj-shadow-hard);
  position: relative;
  z-index: var(--cj-z-hud);
}

/* ============================================================
   FEEDBACK (encert / error) — colors compartits
   ============================================================ */
.cj-feedback-ok{ color: var(--cj-green); }
.cj-feedback-bad{ color: var(--cj-red); }

/* Focus visible accessible, coherent amb la resta de la plataforma */
:focus-visible{
  outline: 3px solid var(--cj-gold);
  outline-offset: 2px;
}