/* Peça 2 — La sala de màquines */

/* ---------- les tres divisions que no surten rodones ----------
   Una graella de columnes compartides: els «=» i els resultats queden
   alineats verticalment, i és aquesta columna alineada la que fa la feina.
   Si cada divisió anés pel seu compte no es podrien comparar d'una ullada. */
.divisions{
  display:grid; grid-template-columns:auto auto auto auto 1fr;
  gap:10px 12px; align-items:baseline; margin:34px 0 14px;
  background:var(--panell); border:1px solid var(--vora); border-radius:14px;
  padding:22px 22px;
}
.divisions .d{display:contents}
.divisions .q{font-size:16px; color:var(--suau)}
.divisions .op{font-family:var(--mono); color:var(--apagat)}
.divisions b{
  font-family:var(--mono); font-size:clamp(17px,4.6vw,22px); font-weight:400;
  color:var(--falta); font-variant-numeric:tabular-nums;
}

/* ---------- barres de comparació ---------- */
.comp{margin:26px 0 0}
.fila{margin-bottom:16px}
.fila .cap{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:13px; margin-bottom:6px}
.fila .cap b{font-weight:400}
.pista{height:26px; background:var(--panell); border:1px solid var(--vora); border-radius:6px; overflow:hidden; display:flex}
.seg{height:100%}
.seg.mesos{background:var(--lluna)}
.seg.any{background:var(--sol)}
.seg.gap{background:var(--falta)}
.llegenda{font-family:var(--mono); font-size:13px; color:var(--falta); margin-top:8px}

/* ---------- el número que ha de quedar ---------- */
.forat{
  font-family:var(--mono); font-size:clamp(52px,15vw,86px); line-height:1;
  color:var(--falta); margin:30px 0 0; text-align:center; max-width:none;
}
.forat b{font-weight:400}
.forat span{font-size:.34em; color:var(--apagat); letter-spacing:.1em}
.foratEt{
  text-align:center; color:var(--suau); font-size:16px;
  margin:12px auto 0; max-width:46ch;
}

/* ---------- regle del deute ---------- */
.deute{background:var(--panell); border:1px solid var(--vora); border-radius:14px; padding:22px 20px; margin-top:20px}
.deute .top{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.stepper{display:flex; align-items:center; gap:12px}
.stepper button{width:38px; height:38px; padding:0; font-size:19px; line-height:1}
.deute .valor{font-family:var(--mono); font-size:15px; min-width:82px; text-align:center}
.deute .valor.total{color:var(--falta)}
.regle{position:relative; height:52px; margin-bottom:10px}
.regle .fons{position:absolute; inset:0 0 22px 0; background:var(--fosc); border:1px solid var(--vora); border-radius:6px; overflow:hidden}
.regle .omplert{position:absolute; left:0; top:0; bottom:0; background:var(--falta); transition:width .35s cubic-bezier(.2,.7,.3,1)}
.regle .marca{position:absolute; top:0; bottom:22px; width:1px; background:var(--vora)}
.regle .etiqueta{position:absolute; bottom:0; font-family:var(--mono); font-size:11px; color:var(--apagat); transform:translateX(-50%)}
.deute .veredicte{font-family:var(--mono); font-size:14px; color:var(--apagat); min-height:44px; margin:0}
.deute .veredicte strong{color:var(--tinta); font-weight:400}
.deute .veredicte.premi strong{color:var(--sol)}

@media (max-width:520px){
  /* amb poc ample les divisions es queden en una sola columna i deixen de
     comparar-se; val més que cada divisió sigui una línia sencera */
  .divisions{grid-template-columns:auto auto auto auto auto; padding:18px 14px; gap:12px 8px}
  .divisions .q{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .regle .omplert{transition:none}
}