/* multiplicacions.css — Pissarra de multiplicacions (mòdul germà de la Pissarra de divisions, 21/09/2026).
 *
 * Aquí NOMÉS hi ha el que és nou o diferent. Tot el que és un component idèntic al de la pissarra de divisions
 * (targeta, controls, panells, registre, bafarada, botons, taula del factor, guia de passos, avisos) reaprofita les
 * seves classes `dv-` (spec §2): així aquest fitxer no torna a declarar ni un sol color i la pell nova de l'app el
 * pot vestir sense tocar-lo.
 *
 * Llei de la pell: cap color fix. Tot surt de tokens (`--bg2`, `--border`, `--accent`, `--ok`, `--danger`…) o, dins
 * del tauler, de les variables de guix que defineix `.dv-board` (`--chalk-dim`, `--focus-chalk`, `--mark`).
 * Mides i graella: les del mockup aprovat pel client (tauler 440×300, píndoles de passos, graella de pràctica).
 */

/* ── la pissarra s'obre PER SOBRE de la de divisions (z-index 60): és el pont, i la divisió es queda a sota ── */
.mu-overlay { z-index: 70; }

/* ── franja del pont: «Has vingut d'una divisió (D : d) · Torna a la divisió» ── */
.mu-franja { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--accent); color: var(--bg2); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; }
.mu-franja .dv-btn { background: var(--bg2); color: var(--accent); border-color: var(--bg2); padding: 5px 12px; font-size: 13.5px; }

/* ── el truc de la taula que s'està practicant ── */
.mu-truc { margin: 0; background: var(--bg2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 9px 13px; font-size: 15px; line-height: 1.4; }
.mu-truc b { color: var(--accent); }

/* ── maquetació: tauler + registre + taula del factor de costat; narració i resposta a sota ──
   El tipus «practica una taula» (.mu-t1) canvia el registre i el panell per la graella de nou caselles. */
.mu-taulell { display: grid; grid-template-columns: 440px minmax(200px, 1fr) 250px; grid-template-areas: "board registre taula" "peu peu taula"; gap: 12px 14px; align-items: start; }
.mu-taulell > .mu-board { grid-area: board; }
.mu-taulell > .mu-registre { grid-area: registre; height: 300px; overflow: auto; align-content: start; box-sizing: border-box; }
.mu-taulell > .mu-panel-taula { grid-area: taula; }
.mu-taulell > .mu-peu { grid-area: peu; min-width: 0; }
.mu-taulell > .mu-practica-caixa { grid-area: practica; min-width: 0; }
.mu-taulell.mu-t1 { grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "board practica" "peu peu"; }

/* ── el tauler: marc FIX (el contingut s'escala, el marc no creix mai). Els colors de guix vénen de .dv-board ── */
.mu-board { width: 440px; height: 300px; display: grid; place-items: center; }
.mu-board-inner { display: inline-grid; grid-template-columns: 24px repeat(var(--cols, 3), var(--cell)) auto; grid-auto-rows: auto; font-family: 'Gabarito', 'Trebuchet MS', var(--font-body); font-weight: 600; font-size: var(--digit); font-variant-numeric: tabular-nums; min-width: max-content; transform-origin: 50% 50%; }
.mu-line { grid-column: 1 / -1; }
/* la ratlla que encara no toca ocupa el seu lloc però no es veu: el tauler no ha de saltar quan arriba */
.mu-line-pend { visibility: hidden; }
/* les que «me'n porto»: petites, a sobre de la columna següent */
.mu-dut { height: 24px; font-size: .5em; color: var(--focus-chalk); align-self: end; }
.mu-etiq { align-self: center; padding: 0 4px 0 12px; }

/* ── el tauler quan es practica una taula: un sol producte, gran, amb la fila d'abans com a ajuda ── */
.mu-fact { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.mu-fact .op { font-size: 1.5em; letter-spacing: .02em; }
.mu-fact .incog { color: var(--focus-chalk); }
.mu-fact .mu-fet { color: var(--mark); }
.mu-fact .abans { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--chalk-dim); }

/* ── la graella de nou caselles ── */
.mu-practica { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.mu-fila { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.mu-fila .op { font-family: var(--font-head); font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mu-fila input[type="number"] { width: 3.6em; font: 600 17px var(--font-body); text-align: center; }
.mu-fila .mu-val { font-family: var(--font-head); font-size: 21px; color: var(--accent2); font-variant-numeric: tabular-nums; }
/* el senyal no és NOMÉS el color: hi ha sempre un símbol, perquè es llegeixi sense distingir colors.
   El `color` del text va lligat al fons de l'estat, NO al de la pell: `--ok-bg`/`--danger-bg` són clars sempre
   (app.css els declara un sol cop i cap pell no els canvia), de manera que heretar el `--text` de la pell deixava
   el «7 × N =» blanc sobre verd clar a les pells fosques —contrast 1,06 a «nau» i 1,05 a «retro»: invisible—.
   `--ok-fg`/`--danger-fg` són els companys de cada fons i donen 7,45 a TOTES les pells, present i futures. */
.mu-fila.be { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); }
.mu-fila.be::after { content: '✓'; color: var(--ok-fg); font-weight: 700; margin-left: auto; }
.mu-fila.mal { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-fg); }
.mu-fila.mal::after { content: '✗'; color: var(--danger-fg); font-weight: 700; margin-left: auto; }
.mu-fila.rev { border-color: var(--accent2); border-style: dashed; background: var(--bg3); }
.mu-fila.rev::after { content: 'pista'; color: var(--accent2); font-size: 12px; font-weight: 700; margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

/* ── «N de 9 a la primera»: no és cap puntuació ni cap rànquing, és quantes li han sortit de primera ── */
.mu-marcador { display: inline-flex; align-items: center; gap: 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: 14px; font-weight: 600; color: var(--text); }
.mu-marcador b { font-family: var(--font-head); font-size: 20px; color: var(--accent2); }

/* ── el «me'n porto», explicat a part (al mockup és una píndola pròpia) ── */
.mu-porto { margin: 8px 0 0; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.mu-porto b { color: var(--accent2); }
.mu-porto small { display: block; font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* ── la prova, en línia pròpia dins la bafarada (el motor emet <span class="mu-prova">) ── */
.mu-prova { display: block; margin-top: 6px; font-size: 1.08em; }
.mu-prova b { color: var(--accent2); font-variant-numeric: tabular-nums; }

/* ── els dos enllaços entre pissarres: «la prova» cap a divisions i el pont des de divisions ── */
.mu-prova-caixa { margin: 10px 0 0; }
.mu-pont { margin: 10px 0 0; }
.mu-enllac { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px var(--font-body); color: var(--accent); background: transparent; border: 1px dashed var(--accent); border-radius: 999px; padding: 6px 13px; cursor: pointer; text-decoration: none; }
.mu-enllac:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── al registre, el «me'n porto» té línia pròpia ── */
.mu-reg-porto { font-style: italic; }

/* ── la guia de passos d'aquest mòdul en té 4 o 5, no 6 (cal repetir-ho a cada tall: divisions.css també ho fixa) ── */
.mu-passos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .mu-taulell:not(.mu-t1) { grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "board registre" "peu peu" "taula taula"; }
  .mu-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .mu-practica { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* el :not() ha de ser el MATEIX que al tall de 1100 px: amb menys especificitat, la regla de 1100 guanyaria i el
     taulell es quedaria a dues columnes (i desbordaria a 375 px) */
  .mu-taulell:not(.mu-t1) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "peu" "taula" "registre"; }
  .mu-taulell.mu-t1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "practica" "peu"; }
  .mu-taulell > .mu-registre { height: auto; max-height: 240px; }
}
@media (max-width: 560px) {
  .mu-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-practica { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .mu-board { height: 250px; } }