:root {
  color-scheme: light;
  --fons: #eef3f8;
  --targeta: #ffffff;
  --text: #1d2a36;
  --suau: #5b6b7a;
  --accent: #2f5d8a;
  --accent-fort: #234a70;
  --avis-fons: #fdecea;
  --avis-text: #8a1f15;
  --estrella: #f2b705;
  --vora: #cfd9e3;
  --forat: #ffffff;
}
/* Mode fosc: el del mòbil, si l'alumne no n'ha triat cap amb el botó... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="clar"]) {
    color-scheme: dark;
    --fons: #10171e;
    --targeta: #1a242e;
    --text: #e6edf3;
    --suau: #9fb0c0;
    --accent: #5b9bd5;
    --accent-fort: #7cb2e3;
    --avis-fons: #3a1c19;
    --avis-text: #f5b4ac;
    --vora: #2e3c4a;
  --forat: #2e3c4a;
  }
}
/* ...o el que hagi triat amb el botó. */
:root[data-tema="fosc"] {
  color-scheme: dark;
  --fons: #10171e;
  --targeta: #1a242e;
  --text: #e6edf3;
  --suau: #9fb0c0;
  --accent: #5b9bd5;
  --accent-fort: #7cb2e3;
  --avis-fons: #3a1c19;
  --avis-text: #f5b4ac;
  --vora: #2e3c4a;
  --forat: #2e3c4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--fons);
  color: var(--text);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 14px;
}

.targeta {
  width: 100%;
  max-width: 420px;
  background: var(--targeta);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  text-align: center;
}

h1 { font-size: 1.6rem; margin: 0 0 .4em; }
p { margin: 0 0 1em; color: var(--suau); }
p.gran { font-size: 1.15rem; color: var(--text); }

form { text-align: left; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }

input[type=email], input[type=password], input[type=text] {
  width: 100%;
  font-size: 18px;            /* evita el zoom automàtic a iOS */
  padding: 13px 14px;
  border: 2px solid var(--vora);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
}
input:focus { outline: none; border-color: var(--accent); }

.usuari {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--vora);
  border-radius: 12px;
  overflow: hidden;
}
.usuari:focus-within { border-color: var(--accent); }
.usuari input[type=text] {
  flex: 1;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.usuari .domini {
  display: flex;
  align-items: center;
  padding: 0 12px 0 2px;
  color: var(--suau);
  font-size: 15px;
  white-space: nowrap;
}

label.mostra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--suau);
  font-size: .95rem;
}

button {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
button:active { background: var(--accent-fort); }

.secundari { text-align: center; }
button.enllac {
  width: auto;
  margin-top: 14px;
  padding: 8px;
  background: none;
  color: var(--accent);
  font-weight: 400;
  font-size: .95rem;
  text-decoration: underline;
}

.avis {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--avis-fons);
  color: var(--avis-text);
}

.estrella {
  font-size: 84px;
  line-height: 1;
  color: var(--estrella);
  margin-bottom: 8px;
  animation: brilla .9s ease-out both;
}
@keyframes brilla {
  0%   { transform: scale(.2) rotate(-90deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .estrella { animation: none; }
}

/* Botó discret per canviar entre mode clar i fosc */
.tema {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--suau);
  background: transparent;
  border: 1px solid var(--vora);
  border-radius: 50%;
  opacity: .7;
}
.tema:hover, .tema:focus-visible { opacity: 1; }

/* ---------- Trencaclosques ---------- */
.repte {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--vora);
}
.repte h2 { font-size: 1.3rem; margin: 0 0 .4em; }

.marcador {
  display: flex;
  justify-content: space-between;
  margin: 4px 2px 10px;
  color: var(--suau);
  font-size: .95rem;
}
.marcador strong { color: var(--text); font-variant-numeric: tabular-nums; }

.tauler {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--forat);   /* color del forat */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.peca {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--col));
  height: calc(100% / var(--fil));
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
  background-color: #fff;
  background-repeat: no-repeat;
  transition: transform .14s ease-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.peca:active { filter: brightness(.95); }
.peca.buida { visibility: hidden; }
.peca .num {
  display: none;
  position: absolute;
  top: 3px;
  left: 4px;
  min-width: 1.4em;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.tauler.amb-numeros .num { display: block; }

/* En acabar: apareix la peça que faltava i desapareixen les juntes */
.tauler.complet .peca { border-color: transparent; border-radius: 0; cursor: default; }
.tauler.complet .peca.buida { visibility: visible; animation: apareix .4s ease-out; }
.tauler.complet .num { display: none; }
@keyframes apareix { from { opacity: 0; } to { opacity: 1; } }

.pista {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: 100% 100%;
  animation: apareix .2s ease-out;
}

.eines {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.eines label.mostra { margin: 10px 0 0; }
.eines button.enllac { margin-top: 10px; }

.resolt { margin-top: 16px; }
.resolt p { margin-bottom: .4em; }

@media (prefers-reduced-motion: reduce) {
  .peca { transition: none; }
}

.capcalera-joc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.etiqueta-nivell {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .95rem;
}
.sessio-joc { color: var(--suau); font-size: .85rem; text-align: right; }
.missatge {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--fons);
  color: var(--text);
  font-size: .95rem;
}
.dificultat {
  margin: 14px 0 0;
  color: var(--text);
  font-size: .95rem;
}
button.enllac.rendeix { display: block; margin: 8px auto 0; }
button.enllac.rendeix.destacat {
  padding: 8px 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}
.final { margin-top: 8px; }

/* Benvinguda i presentació del repte */
.subtitol { margin: -4px 0 12px; color: var(--suau); }
.proposit { margin: 4px 0 0; font-size: 1.12rem; line-height: 1.4; color: var(--text); }
.proposit strong { color: var(--accent); }
.repte-text { color: var(--text); font-size: 1.08rem; line-height: 1.55; }
.rellotge {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--fons);
  font-weight: 700;
}

/* Les caselles de les partides de la sessió */
.fites { display: flex; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.fita {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: var(--suau);
  background: var(--vora);
  transition: background .3s, transform .3s;
}
.fita.color-1, .fita.feta.color-1 { background: #7cc6e8; color: #fff; }
.fita.color-2, .fita.feta.color-2 { background: #7fd3b0; color: #fff; }
.fita.color-3, .fita.feta.color-3 { background: #f2c14e; color: #fff; }
.fita.color-4, .fita.feta.color-4 { background: #f29a5c; color: #fff; }
.fita.color-5, .fita.feta.color-5 { background: #e5637e; color: #fff; }
.fita.feta { animation: pinta .5s ease-out; }
.fita.actual { outline: 3px solid var(--accent); outline-offset: 2px; }
.fita.abandonada { opacity: .55; }
@keyframes pinta { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: none; } }
.fites-peu {
  display: flex;
  justify-content: space-between;
  max-width: 232px;
  margin: 0 auto 10px;
  font-size: .8rem;
  color: var(--suau);
}
.joc .fites { margin: 2px 0 10px; }
.joc .fita { width: 34px; height: 34px; font-size: .85rem; }

/* Logo petit a la pantalla final, al lloc on hi havia l'estrella (mateixa alçada) */
.logo-petit {
  display: block;
  width: auto;
  height: 70px;
  margin: 0 auto 8px;
}

/* Capçalera mentre es juga: logo més gran i títol */
.cap-joc { margin-bottom: 4px; }
.logo-joc { display: block; width: auto; height: 80px; margin: 0 auto 6px; }
.cap-joc h1 { margin-bottom: .2em; }

/* Casella resolta: color original, número i un ✓ petit a la cantonada */
.fita { position: relative; }
.fita.feta::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #2a9d5c;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Botons Reinicia (verd) i No me'n surto (vermell) */
.botons-joc { display: flex; gap: 10px; margin-top: 14px; }
.botons-joc button {
  flex: 1;
  margin: 0;
  padding: 11px 8px;
  font-size: 1rem;
  border-radius: 12px;
}
.boto-reinicia { background: #2a9d5c; }
.boto-reinicia:active { background: #217d49; }
.boto-rendeix { background: #d64545; }
.boto-rendeix:active { background: #b33636; }
.boto-rendeix.destacat { animation: batec 1.2s ease-in-out 3; }
@keyframes batec { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .boto-rendeix.destacat { animation: none; } }

/* Capçalera del joc: logo i peça de trencaclosques un al costat de l'altre */
.cap-joc-icones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 6px;
}
.cap-joc-icones .logo-joc { margin: 0; }
.peca-icona { font-size: 56px; line-height: 1; }

/* Més aire entre nivell, caselles i marcador */
.joc .capcalera-joc { margin-bottom: 14px; }
.joc .fites { margin: 0 0 16px; }
.joc .marcador { margin: 0 2px 12px; }

/* Pantalla de fora d'horari */
.horari-obre { margin-top: 14px; color: var(--text); font-size: 1.05rem; }
.horari-info { font-size: .9rem; }

/* Franja d'avís quan HORA_PROVA està activa */
.franja-prova {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 6px 10px;
  background: #d64545;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}