:root {
  --paper: #faf6ec;
  --full: #fffdf7;
  --tinta: #23201b;
  --tinta-suau: #6d665a;
  --ratlla: #ded6c3;
  --vermell: #c8321f;
  --vermell-suau: #f6dcd6;
  --verd: #2d7a46;
  --verd-suau: #dcefe1;
  --taronja: #b4590a;
  --taronja-suau: #fbe6cf;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b1917;
    --full: #24211e;
    --tinta: #ece6d8;
    --tinta-suau: #a39b8c;
    --ratlla: #3b362f;
    --vermell: #ff7a66;
    --vermell-suau: #4a2620;
    --verd: #7fd29a;
    --verd-suau: #1f3a28;
    --taronja: #ffb067;
    --taronja-suau: #4a3018;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.5;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.capcalera h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
}
.capcalera p { margin: 0.25rem 0 1.25rem; color: var(--tinta-suau); }
.vermell { color: var(--vermell); }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ratlla);
}
.controls label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--tinta-suau);
}
.controls .casella {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--tinta);
  padding-bottom: 0.45rem;
}
.controls button { margin-left: auto; }

select, button, input {
  font: inherit;
  color: inherit;
}
select {
  padding: 0.4rem 0.5rem;
  background: var(--full);
  border: 1px solid var(--ratlla);
  border-radius: 6px;
}
button {
  padding: 0.5rem 1rem;
  background: var(--tinta);
  color: var(--paper);
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: 0.4; cursor: default; }
:focus-visible { outline: 2px solid var(--vermell); outline-offset: 2px; }

.marcador { margin: 1.25rem 0 1rem; }
.marcador p { margin: 0; }
.frase { font-size: 1.1rem; }
.frase strong, .xifres strong { font-variant-numeric: tabular-nums; }
.frase strong { color: var(--vermell); font-size: 1.3em; }
.barra {
  height: 8px;
  margin: 0.5rem 0;
  background: var(--ratlla);
  border-radius: 4px;
  overflow: hidden;
}
.barra div {
  height: 100%;
  width: 0;
  background: var(--verd);
  transition: width 0.3s;
}
.xifres { display: flex; gap: 1.5rem; color: var(--tinta-suau); font-size: 0.95rem; }

.text {
  padding: 1.5rem;
  background: var(--full);
  border: 1px solid var(--ratlla);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 2;
}
.mot {
  border-radius: 3px;
  cursor: pointer;
}
.mot:hover { background: var(--ratlla); }
.acabat .mot { cursor: default; }
.acabat .mot:hover { background: none; }

.trobada {
  background: var(--verd-suau);
  color: var(--verd);
  border-radius: 3px;
  padding: 0 0.15em;
}
/* Correcció bona però diferent de la de l'autor: compta, i s'hi pot tornar. */
.sinonim, .trobada.sinonim {
  background: var(--taronja-suau);
  color: var(--taronja);
  border-radius: 3px;
  padding: 0 0.15em;
}
.resum .sinonim .senyal { color: var(--taronja); }
/* Correcció ben escrita però no prevista: ni encert ni error; es pot tornar a provar. */
.grup.dubtosa { text-decoration: underline dashed var(--tinta-suau); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.missatge.dubte { background: var(--paper); color: var(--tinta-suau); }
.missatge.sinonim { background: var(--taronja-suau); color: var(--taronja); }
.perduda del { color: var(--vermell); text-decoration-thickness: 2px; }
.perduda ins {
  color: var(--verd);
  text-decoration: none;
  font-weight: 600;
  padding-left: 0.25em;
}
/* Errors del jugador: queden marcats allà on s'han comès. */
.mot.fals {
  color: var(--tinta-suau);
  text-decoration: underline dotted var(--vermell);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: default;
}
.mot.fals:hover { background: none; }
.grup.mal-corregida {
  text-decoration: underline wavy var(--vermell);
  text-underline-offset: 0.25em;
}
.ajuda .mot { cursor: default; }
.ajuda .mot:hover { background: none; }
.fallada { animation: fallada 0.9s; }
@keyframes fallada {
  0%, 60% { background: var(--vermell-suau); }
  15% { transform: translateX(-3px); }
  30% { transform: translateX(3px); }
  45% { transform: translateX(0); }
}

.editor { display: inline-flex; gap: 0.25rem; align-items: center; vertical-align: baseline; }
.editor input {
  font-family: var(--serif);
  font-size: 1em;
  padding: 0 0.3em;
  min-width: 3ch;
  background: var(--paper);
  border: 0;
  border-bottom: 2px solid var(--vermell);
  border-radius: 3px 3px 0 0;
}
.editor button {
  padding: 0;
  width: 1.7em;
  height: 1.7em;
  font-size: 0.8em;
  line-height: 1;
}
.editor .cancella { background: none; color: var(--tinta-suau); border: 1px solid var(--ratlla); }

/* Teclat propi dels mòbils: substitueix el del telèfon perquè no proposi la paraula ben escrita. */
.teclat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 6px 3px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--ratlla); display: flex; flex-direction: column; gap: 5px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.teclat .fila { display: flex; gap: 4px; justify-content: center; }
.teclat .tecla {
  flex: 1 1 0; min-width: 0; height: 2.75rem; padding: 0;
  font-family: var(--sans); font-size: 1.15rem; font-weight: 500; line-height: 1;
  color: var(--tinta); background: var(--full); border: 0; border-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.teclat .tecla:active { background: var(--paper); }
.teclat .tecla.ampla { flex: 1.5 1 0; }
.teclat .tecla.espai { flex: 6 1 0; font-size: 0.9rem; color: var(--tinta-suau); }
.teclat .tecla.accepta { background: var(--tinta); color: var(--paper); }
.teclat .tecla.cancella { color: var(--tinta-suau); }
.teclat.majuscules .tecla { text-transform: uppercase; }
.teclat.majuscules .tecla[data-tecla="⇧"] { background: var(--tinta); color: var(--paper); }

.font { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--tinta-suau); text-align: right; }
/* Barra fixa a baix de tot: l'encert o l'error es veu sempre, encara que el text sigui llarg. */
.missatge {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--full); border-top: 1px solid var(--ratlla); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
  font-weight: 600; display: flex; align-items: center; gap: 0.75rem;
}
.missatge .avis { flex: 1; text-align: center; }
.missatge .compte { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta); white-space: nowrap; }
.missatge.be { background: var(--verd-suau); }
.missatge.malament { background: var(--vermell-suau); }
body { padding-bottom: 4.5rem; }
.missatge.be { color: var(--verd); }
.missatge.malament { color: var(--vermell); }

.accions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.ajuda { font-size: 0.85rem; color: var(--tinta-suau); }

.resum { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ratlla); }
.resum h2 { margin: 0 0 0.25rem; font-family: var(--serif); font-size: 1.6rem; }
.resum p { margin: 0 0 1rem; }
.resum ol { list-style: none; margin: 0; padding: 0; }
.resum li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--ratlla);
}
.resum .senyal { font-weight: 700; }
.resum .si .senyal { color: var(--verd); }
.resum .no .senyal { color: var(--vermell); }
.resum .canvi { font-family: var(--serif); font-size: 1.1rem; }
.resum .canvi del { color: var(--vermell); }
.resum .canvi strong { color: var(--verd); }
.resum .perque { grid-column: 2; font-size: 0.9rem; color: var(--tinta-suau); }

@media (max-width: 30rem) {
  .text { padding: 1rem; font-size: 1.15rem; }
  .controls button { margin-left: 0; width: 100%; }
}

/* ───────── Editor de fitxes ───────── */
main.ample { max-width: 82rem; }
.capcalera h1.petit { font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: 0.02em; }
a { color: var(--vermell); }
button.secundari { background: none; color: var(--tinta); border: 1px solid var(--ratlla); font-weight: 400; }
input[type="search"] {
  padding: 0.4rem 0.5rem;
  background: var(--full);
  border: 1px solid var(--ratlla);
  border-radius: 6px;
  min-width: 0;
}

.eines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ratlla);
}
.eines label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--tinta-suau); }
.eines .creix { flex: 1 1 12rem; }
.eines .casella { flex-direction: row; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--tinta); padding-bottom: 0.45rem; }

.estat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0.5rem;
}
.estat p { margin: 0; flex: 1 1 18rem; font-size: 0.9rem; color: var(--tinta-suau); }
.estat p.pendent { color: var(--vermell); font-weight: 600; }
.estat div { display: flex; gap: 0.5rem; }

.graella-caixa {
  margin: 0.5rem 0 1rem;
  max-height: 70vh;
  overflow: auto;
  background: var(--full);
  border: 1px solid var(--ratlla);
  border-radius: 8px;
}
.graella { width: 100%; min-width: 68rem; border-collapse: collapse; table-layout: fixed; }
.graella th, .graella td { padding: 0; border-bottom: 1px solid var(--ratlla); border-right: 1px solid var(--ratlla); }
.graella th:last-child, .graella td:last-child { border-right: 0; }
.graella thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  color: var(--tinta-suau);
  box-shadow: 0 1px 0 var(--ratlla);
}
.graella thead button { padding: 0; background: none; color: inherit; font: inherit; }
.graella thead button::after { content: attr(data-sentit); padding-left: 0.3em; color: var(--vermell); }
.graella tbody tr:hover { background: var(--paper); }
.graella input, .graella select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.graella input:focus, .graella select:focus { outline: 2px solid var(--vermell); outline-offset: -2px; background: var(--full); }
.graella .c-be input, .graella .c-mal input, .graella .c-altres input { font-family: var(--serif); font-size: 1.05rem; }
.graella .c-nota input { font-size: 0.85rem; }
.graella input.invalid { background: var(--vermell-suau); }
.graella .c-num { width: 2.8rem; }
.graella .c-be, .graella .c-mal { width: 15%; }
.graella .c-altres { width: 17%; }
.graella .c-cat { width: 13rem; }
.graella .c-nivell { width: 7.5rem; }
.graella .c-textos { width: 4.5rem; }
.graella .c-accions { width: 4.6rem; }
.graella td.c-num, .graella td.c-textos { text-align: center; font-size: 0.8rem; color: var(--tinta-suau); font-variant-numeric: tabular-nums; }
.graella td.c-textos:not(.buit) { color: var(--verd); font-weight: 700; }
.graella td.c-accions { text-align: center; white-space: nowrap; }
.graella td.c-accions button { padding: 0.25rem 0.45rem; background: none; color: var(--tinta-suau); font-weight: 400; }
.graella td.c-accions button:hover { color: var(--vermell); }

.peu { margin-top: 2.5rem; font-size: 0.85rem; color: var(--tinta-suau); }

/* ───────── Progrés del jugador ───────── */
.premis { margin: -0.5rem 0 1rem; font-weight: 700; color: var(--verd); }
.progres { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ratlla); }
.progres summary { font-family: var(--serif); font-size: 1.3rem; cursor: pointer; }
.progres h3 { margin: 1.25rem 0 0.5rem; font-size: 0.95rem; }
.rajoles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin: 1rem 0 0.75rem; }
.rajola {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  background: var(--full);
  border: 1px solid var(--ratlla);
  border-radius: 8px;
}
.rajola strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rajola span { font-size: 0.8rem; color: var(--tinta-suau); }
.rang, .repas { margin: 0.5rem 0; font-size: 0.95rem; }
.grafica { width: 100%; height: auto; margin: 0.5rem 0; }
.grafica .guia { stroke: var(--ratlla); stroke-width: 1; }
.grafica .eix { fill: var(--tinta-suau); font-size: 11px; font-family: var(--sans); }
.grafica .tendencia { fill: none; stroke: var(--vermell); stroke-width: 2; stroke-linejoin: round; }
.grafica .punt { fill: var(--tinta-suau); stroke: var(--paper); stroke-width: 1.5; }
.grafica .punt.nivell-3, .grafica .punt.nivell-4 { fill: var(--tinta); }
.domini { display: grid; grid-template-columns: 12rem 1fr 4.5rem; gap: 0.75rem; align-items: center; padding: 0.2rem 0; font-size: 0.9rem; }
.domini .xifra { text-align: right; color: var(--tinta-suau); font-variant-numeric: tabular-nums; }
.domini.feble .nom { color: var(--vermell); font-weight: 600; }
.barra-domini { height: 8px; background: var(--ratlla); border-radius: 4px; overflow: hidden; }
.barra-domini span { display: block; height: 100%; background: var(--verd); }
.domini.feble .barra-domini span { background: var(--vermell); }
.progres button { margin-top: 1.25rem; font-size: 0.85rem; }
@media (max-width: 30rem) {
  .rajoles { grid-template-columns: repeat(2, 1fr); }
  .domini { grid-template-columns: 8rem 1fr 3.5rem; }
}