/* Musicològic: pell de la família Lògic (Numerològic), mobile-first. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton.woff2") format("woff2");
}
:root {
  --blau: #5b63b7;        /* accents i vores: 5,4:1 sobre blanc */
  --blau-hex: #c3cbf3;    /* hexàgons: text --blau-hex-text a 7,7:1 */
  --blau-hex-text: #24306b;
  --blau-hex-on: #4f57ac; /* hexàgon triat: blanc a 6,4:1 */
  --blau-fosc: #4f57ac;   /* text sobre blanc 6,4:1, i fons amb text blanc */
  --rosa: #c2577d;        /* logo */
  --rosa-hex: #f3b3c6;    /* central: text --rosa-hex-text a 7,4:1 */
  --rosa-hex-text: #5e1632;
  --rosa-hex-on: #a14468; /* central triat: blanc a 5,9:1 */
  --tint-1: #eff1fd;      /* fons suaus (xips, hover) */
  --tint-2: #c3cbf3;      /* vores suaus */
  --tint-3: #e3e7fa;      /* fila pròpia al rànquing */
  --tint-text: #24306b;
  --or: #eab308;
  --or-fosc: #a16207;
  --text: #1f2937;
  --suau: #6b7280;        /* 4,83:1 sobre blanc */
  --vora: #d8dee4;
  --fons: #f5f3f9;
  --ok: #15803d;          /* encert: 5,0:1 sobre blanc */
  --ko: #b91c1c;          /* fallada: 6,5:1 sobre blanc */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fons); font-family: system-ui, sans-serif; color: var(--text);
  display: flex; justify-content: center; padding: 16px;
}
.pl {
  width: 100%; max-width: 400px; background: #fff; border: 1px solid #eef2f4;
  border-radius: 18px; padding: 14px 16px 20px; box-shadow: 0 8px 26px rgba(0,0,0,.06);
}
button { font: inherit; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Capçalera */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.logo { font-family: "Anton", system-ui, sans-serif; font-weight: 400; font-size: 34px; letter-spacing: 1px; line-height: 1; margin: 4px 0; color: var(--text); }
.logo a { color: inherit; text-decoration: none; }
.logo .t { color: var(--blau); }
.logo .r { color: var(--rosa); }
.prefs { display: flex; gap: 6px; }
.toggle { min-width: 40px; height: 36px; padding: 0 10px; border: 1.5px solid var(--vora); border-radius: 999px; background: #fff; color: #374151; font-size: 14px; font-weight: 700; cursor: pointer; }
.toggle[aria-pressed="true"] { border-color: var(--blau); color: var(--blau-fosc); }

/* Pestanyes de mode i nivell */
.modes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 10px 0 6px; padding: 3px; background: var(--fons); border-radius: 22px; }
.modes a { grid-column: span 3; } /* 4 modes a la fila de dalt (4 × 3 de 12 columnes) */
.modes a:nth-child(5) { grid-column: span 5; } .modes a:nth-child(6) { grid-column: span 3; } .modes a:nth-child(7) { grid-column: span 4; } /* i 3 a la de baix (5 + 3 + 4) */
.modes a { display: block; white-space: nowrap; text-align: center; padding: 8px 2px; border-radius: 999px; color: #475569; font-size: 13px; font-weight: 700; text-decoration: none; }
.modes a[aria-current="page"] { background: #fff; color: var(--blau-fosc); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.modes .fet { margin-left: 2px; color: var(--ok); }
@media (max-width: 400px) { .modes a { font-size: 12px; } } /* amb el ✓, «Anàlisi» (a la fila de 3) hi cap als 375 px */
.nivells { display: flex; justify-content: center; gap: 6px; margin: 4px 0 2px; }
.nivells button { padding: 3px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; background: #f8fafc; color: var(--suau); }
.nivells .facil[aria-pressed="true"] { background: #dcfce7; color: #166534; border-color: #86efac; }
.nivells .dificil[aria-pressed="true"] { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Zona de joc */
.goal { text-align: center; color: var(--suau); font-size: 13px; margin-top: 8px; }
.sel { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; min-height: 40px; margin: 10px 0 2px; font-size: 24px; font-weight: 700; }
.sel .nota { padding: 0 2px; }
.sel .baix { border-bottom: 3px solid var(--blau); }
.sel .buit { color: #cbd5e1; font-weight: 400; }
.flash { text-align: center; min-height: 22px; font-size: 14px; font-weight: 600; margin: 2px 0 4px; }
.flash.found { color: #15803d; }
.flash.tutti { color: var(--or-fosc); }
.flash.dup { color: #b45309; }
.flash.error { color: #b91c1c; }

.hive { display: flex; flex-direction: column; align-items: center; margin: 4px 0 14px; }
.hrow { display: flex; gap: 6px; }
.hrow + .hrow { margin-top: -14px; }
.hex {
  position: relative; width: 74px; height: 85px; background: var(--blau-hex); color: var(--blau-hex-text); font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  touch-action: manipulation;
}
.hex.center { background: var(--rosa-hex); color: var(--rosa-hex-text); }
.hex.on { background: var(--blau-hex-on); color: #fff; }
.hex.center.on { background: var(--rosa-hex-on); color: #fff; }
.hex:active { filter: brightness(.9); }
.hex small { position: absolute; bottom: 12px; font-size: 10px; font-weight: 600; opacity: .8; }
.hex.figura { font-size: 30px; }

.actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pill { padding: 11px 18px; border: 1.5px solid var(--vora); border-radius: 999px; background: #fff; color: #374151; font-size: 14px; cursor: pointer; }
.pill:disabled { opacity: .5; cursor: default; }
.round { width: 44px; height: 44px; border: 1.5px solid var(--vora); border-radius: 999px; background: #fff; color: var(--blau-fosc); font-size: 18px; cursor: pointer; }
.send { border-color: var(--blau); color: var(--blau-fosc); font-weight: 700; }

/* Trobats */
.trobats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 0; padding: 0; list-style: none; }
.chip { padding: 5px 10px; border-radius: 999px; background: var(--tint-1); color: var(--tint-text); border: 1px solid var(--tint-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip.quatriada { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.chip.extensio { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.chip.tuti { background: var(--or); color: #422006; border-color: var(--or); }

/* Peu */
.foot { text-align: center; margin-top: 16px; }
.found { background: none; border: none; color: #374151; font-size: 14px; cursor: pointer; }
.status, .links { color: var(--suau); font-size: 13px; line-height: 1.9; }
.status { margin-top: 6px; }
.num { color: var(--text); font-weight: 600; }
.rankbtn { background: none; border: none; color: var(--text); font-weight: 600; cursor: pointer; font-size: 13px; padding: 2px; }
.star { color: var(--or-fosc); }
.share-ready { background: var(--blau-fosc); color: #fff; border-radius: 999px; padding: 2px 10px; }
.credits { text-align: center; font-size: 11px; color: var(--suau); margin-top: 12px; }
.credits a { color: inherit; }

/* Panell modal */
.panel { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.panel-card { position: relative; background: #fff; border-radius: 14px; padding: 18px 20px; max-width: 360px; width: 100%; max-height: 80vh; overflow: auto; }
.panel-card h3 { margin: 0 28px 10px 0; }
.panel-card ul { margin: 0; padding-left: 18px; }
.panel-card li { margin: 4px 0; }
.panel-card p { line-height: 1.45; }
.tanca { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: none; border-radius: 999px; background: #f1f5f9; font-size: 18px; cursor: pointer; }
.taula { width: 100%; border-collapse: collapse; font-size: 14px; }
.taula td, .taula th { padding: 4px 6px; text-align: left; border-bottom: 1px solid #eef2f4; }
.taula td.n, .taula th.n { text-align: right; font-variant-numeric: tabular-nums; }
.taula tr.aqui td { font-weight: 800; color: var(--blau-fosc); }
.opcions { display: grid; gap: 8px; margin-top: 10px; }
.opcions .pill { text-align: left; }
.aviat { text-align: center; color: var(--suau); padding: 40px 10px; }

/* Ritmològic */
.compassos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.compassos button { padding: 6px 12px; border: 1.5px solid var(--vora); border-radius: 999px; background: #fff; color: #374151; font-size: 14px; font-weight: 700; cursor: pointer; }
.compassos button[aria-selected="true"] { background: var(--blau-fosc); border-color: var(--blau-fosc); color: #fff; }
.compassos small { font-weight: 500; opacity: .85; margin-left: 2px; }
.partitura { display: flex; justify-content: center; min-height: 104px; }
.partitura svg { width: 100%; max-width: 340px; height: auto; }
.sel-text { text-align: center; font-size: 13px; color: var(--suau); min-height: 20px; margin-top: 6px; }
.hex .ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 70px; font-size: 11px; line-height: 1.1; text-align: center; }
.hex .ico svg path, .hex .ico svg rect { fill: currentColor; stroke: currentColor; }
.hex .ico svg text { fill: currentColor; }
.ritmes { margin-top: 12px; }
.ritmes h4 { margin: 8px 0 4px; font-size: 13px; color: var(--suau); text-align: center; }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mini-ritme { width: 100%; padding: 2px 4px; border: 1px solid var(--tint-2); border-radius: 10px; background: var(--tint-1); cursor: pointer; min-width: 0; overflow: hidden; }
.mini-ritme span { display: block; font-size: 11px; }
.mini-ritme svg { width: 100%; max-width: 100%; height: auto; display: block; }

/* Anàlisi (cadenciologic): hexàgons coloreats per funció (T blau, S rosa, D gris), amb la lletra a més del color.
   El contorn és un hexàgon darrere del farciment (clip-path no deixa vores): fosc = central, blau = pot seguir. */
:root {
  --neutre-hex: #e5e7eb;      /* dominant: text --neutre-hex-text a 12:1 */
  --neutre-hex-text: #1f2937;
  --neutre-hex-on: #4b5563;   /* dominant triada: blanc a 7,6:1 */
}
.hex.acord {
  --fill: var(--blau-hex); --txt: var(--blau-hex-text); --fill-on: var(--blau-hex-on);
  --anell: transparent; --gruix: 0px;
  flex-direction: column; gap: 1px; padding-bottom: 8px; line-height: 1.1;
  background: var(--anell); color: var(--txt);
}
.hex.acord.f-S { --fill: var(--rosa-hex); --txt: var(--rosa-hex-text); --fill-on: var(--rosa-hex-on); }
.hex.acord.f-D { --fill: var(--neutre-hex); --txt: var(--neutre-hex-text); --fill-on: var(--neutre-hex-on); }
.hex.acord.triat { --fill: var(--fill-on); --txt: #fff; }
.hex.acord.possible { --anell: var(--blau-fosc); --gruix: 4px; }
.hex.acord.centre { --anell: var(--text); --gruix: 4px; }
.hex.acord::before {
  content: ""; position: absolute; inset: var(--gruix); background: var(--fill); z-index: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex.acord > * { position: relative; z-index: 1; }
.hex.acord .rom { font-size: 18px; font-weight: 800; }
.hex.acord .rom.l1 { font-size: 15px; }
.hex.acord .rom.l2 { font-size: 12.5px; }
.hex.acord .nom { font-size: 12px; font-weight: 700; }
.hex.acord .nom.l1 { font-size: 11px; }
.hex.acord .nom.l2 { font-size: 10px; }
.hex.acord.m-graus .rom { font-size: 21px; }
.hex.acord.m-graus .rom.l1 { font-size: 17px; }
.hex.acord.m-graus .rom.l2 { font-size: 14px; }
.hex.acord.m-noms .nom { font-size: 19px; }
.hex.acord.m-noms .nom.l1 { font-size: 16px; }
.hex.acord.m-noms .nom.l2 { font-size: 13px; }
.hex.acord .tag, .xip .tag {
  display: inline-block; min-width: 16px; padding: 0 3px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
  background: var(--txt); color: var(--fill);
}
.hex.acord .tag { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); }
.hex.acord.triat .tag { background: #fff; color: var(--fill-on); }
.hex.estatic { cursor: default; }
.hex.estatic:active { transform: none; filter: none; }
.llegenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: -4px 0 12px; font-size: 12px; color: var(--suau); }
.xips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.xip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fill); color: var(--txt); }
.xip .tag { background: var(--txt); color: var(--fill); }
.f-T { --fill: var(--blau-hex); --txt: var(--blau-hex-text); }
.f-S { --fill: var(--rosa-hex); --txt: var(--rosa-hex-text); }
.f-D { --fill: var(--neutre-hex); --txt: var(--neutre-hex-text); }
.tut-rusc { margin: 8px 0; }
.tut-cadena { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.tut-pas { font-size: 13px; font-weight: 600; color: var(--suau); }
.tut-botons { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.flash.ample { min-height: 40px; }
.sel .fletxa { color: #94a3b8; font-weight: 400; font-size: 18px; }
.sel sub { display: block; font-size: 11px; color: var(--suau); font-weight: 600; text-align: center; }
.sel .nota { display: inline-flex; flex-direction: column; align-items: center; font-size: 20px; }
.mini-toggle { margin-left: 6px; padding: 2px 10px; border: 1.5px solid var(--blau); border-radius: 999px; background: var(--tint-1); color: var(--blau-fosc); font-size: 12px; font-weight: 700; cursor: pointer; }

/* Rànquing (de Numerològic) */
.rk-note { margin: 6px 0; color: var(--suau); font-size: 13px; }
.rk-msg { margin: 8px 0; color: #b45309; font-size: 13px; font-weight: 600; }
.rk-sep { border: none; border-top: 1px solid #e2e8f0; margin: 12px 0; }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rk-btn { padding: 8px 12px; border: 1.5px solid var(--vora); border-radius: 999px; background: #fff; color: #374151; font-size: 13px; cursor: pointer; }
.rk-btn:hover { background: #f1f5f9; }
.rk-btn:disabled { opacity: .5; cursor: default; }
.rk-tab { flex: 1; padding: 7px 4px; }
.rk-tab[aria-pressed="true"] { background: var(--blau-fosc); border-color: var(--blau-fosc); color: #fff; font-weight: 700; }
.rk-main { border-color: var(--blau); color: var(--blau-fosc); font-weight: 700; }
.rk-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rk-own { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #cbd5e1; }
.rk-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 6px; border-radius: 8px; font-size: 14px; }
.rk-row.jo { background: var(--tint-3); font-weight: 700; }
.rk-pos { width: 2em; text-align: right; color: var(--suau); }
.rk-alias { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-punts { font-variant-numeric: tabular-nums; }
.rk-codi { margin: 4px 0; text-align: center; font-family: "Anton", system-ui, sans-serif; font-size: 40px; letter-spacing: 6px; color: var(--text); }
.rk-join { display: flex; gap: 6px; }
.rk-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--vora); border-radius: 10px; font-size: 14px; text-transform: uppercase; }

/* Melodiològic i Errològic */
.melodia { position: relative; width: 100%; max-width: 440px; margin: 4px auto 0; padding-bottom: 20px; }
.melodia.sola { padding-bottom: 0; }
.melodia svg { width: 100%; height: auto; display: block; }
.nota-bt { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); padding: 0; border: none; border-radius: 8px; background: transparent; cursor: pointer; touch-action: manipulation; }
.nota-bt:hover:not(:disabled) { background: rgba(31,127,144,.14); }
.nota-bt:disabled { cursor: default; }
.nota-bt .marca { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 14px; font-weight: 800; line-height: 1; }
.nota-bt.ok .marca { color: var(--ok); }
.nota-bt.ko .marca { color: var(--ko); }
.nota-bt.perdut .marca { color: var(--or-fosc); }
.notes-text { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 8px; }
.notes-text .nota-bt { position: relative; top: auto; bottom: auto; transform: none; min-width: 40px; height: 52px; padding: 0 4px 16px; border: 1.5px solid var(--vora); background: #fff; color: var(--text); font-size: 14px; font-weight: 700; }
.notes-text .nota-bt.ok { border-color: var(--ok); }
.notes-text .nota-bt.ko { border-color: var(--ko); }
.notes-text .nota-bt.perdut { border-color: var(--or-fosc); }
.notes-text .nota-bt.sel { border: 3px solid var(--blau-fosc); background: var(--tint-1); }
/* Casella seleccionada de la partitura (dibuixaMelodia): requadre i barra gruixuda, no només color */
.sel-nota { fill: var(--tint-1); stroke: var(--blau-fosc); stroke-width: 2; }
.sel-base { fill: var(--blau-fosc); }

/* Avís de so dels modes d'oïda (js/ui/avis-so.js): text 10,9:1 sobre el fons */
.avis-so { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border: 1.5px solid var(--blau); border-radius: 12px; background: var(--tint-1); color: var(--tint-text); font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; }
.pill[aria-pressed="true"] { border-color: var(--blau); background: var(--tint-1); color: var(--blau-fosc); font-weight: 700; }

.opcions-mel { display: grid; gap: 8px; margin: 8px 0 4px; }
.opcio-fila { display: flex; align-items: center; gap: 6px; }
.opcio { position: relative; flex: 1; min-width: 0; padding: 2px 32px 2px 28px; border: 1.5px solid var(--vora); border-radius: 12px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.opcio:hover:not(:disabled) { border-color: var(--blau); background: var(--tint-1); }
.opcio:disabled { cursor: default; }
.opcio .num { position: absolute; left: 10px; top: 8px; font-size: 14px; font-weight: 800; color: var(--blau-fosc); }
.opcio .mel { display: block; font-size: 13px; }
.opcio .mel svg { width: 100%; height: auto; display: block; }
.opcio .estat { position: absolute; right: 10px; top: 8px; font-size: 18px; font-weight: 800; }
.opcio.ok { border-color: var(--ok); background: #f0fdf4; }
.opcio.ok .estat { color: var(--ok); }
.opcio.ko { border-color: var(--ko); background: #fef2f2; }
.opcio.ko .estat { color: var(--ko); }

.hex.nota { font-size: 22px; }
.intents { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.intent { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 100%; padding: 3px; border: 1px solid var(--vora); border-radius: 10px; background: #fff; cursor: pointer; }
.cel { display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.25; }
.cel b { font-size: 12px; }
.cel.ok { background: #dcfce7; color: #14532d; }
.cel.ko { background: #fee2e2; color: #7f1d1d; }

/* Resum del dia i estadístiques (js/ui/resum.js) */
.summary { margin: 0; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #eef2f4; font-size: 15px; }
.sum-row dt { color: #475569; }
.sum-row dd { margin: 0; font-weight: 700; text-align: right; }
.sum-next { margin: 12px 0 4px; text-align: center; color: #475569; font-size: 14px; }
.sum-next b { font-variant-numeric: tabular-nums; color: var(--text); font-size: 20px; }
.sharerow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.pill.principal { background: var(--blau-fosc); border-color: var(--blau-fosc); color: #fff; font-weight: 700; }
.pill.principal:hover { background: var(--blau); border-color: var(--blau); }
.resum-titol { margin: 14px 0 4px; font-size: 13px; color: var(--suau); }
.resum-modes { list-style: none; padding: 0 !important; }
.resum-modes li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eef2f4; font-size: 14px; }
.resum-modes a { color: var(--blau-fosc); font-weight: 600; }
.resum-modes .fet { color: var(--ok); font-weight: 700; }
.resum-modes .pendent { color: var(--suau); }
.status > span:last-child { white-space: nowrap; }

/* Animacions (js/comu/fx.js) i barra de rang (js/ui/rang.js) */
.fx-shake { animation: fx-shake .35s ease-in-out; }
.fx-pop { animation: fx-pop .3s ease-out; }
@keyframes fx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes fx-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.fx-confetti-box { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 100; }
.fx-confetti { position: absolute; top: -10vh; width: 8px; height: 12px; border-radius: 2px; animation: fx-fall 1.4s ease-in forwards; }
@keyframes fx-fall {
  to { transform: translate(var(--dx, 0), 115vh) rotate(var(--rot, 360deg)); opacity: .9; }
}
.rang { margin: 4px auto 0; max-width: 260px; }
.rang-pista { height: 6px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.rang-fill { height: 100%; border-radius: 999px; background: var(--blau); transition: width .4s ease; }
.rang-text { margin-top: 3px; font-size: 12px; color: var(--suau); }
@media (prefers-reduced-motion: no-preference) {
  .hex { transition: transform .1s ease-out; }
  .hex:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-pop, .fx-confetti { animation: none; }
  .fx-confetti-box { display: none; }
  .rang-fill { transition: none; }
}

.panel-card a { color: var(--blau-fosc); }

/* Harmonia Difícil: cartes de repte */
.cartes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cartes[hidden] { display: none; }
.carta { font-size: 0.85rem; padding: 4px 10px; border: 1px dashed var(--blau-fosc); border-radius: 8px; color: var(--text); background: var(--fons); }
.carta.feta { border-style: solid; background: var(--tint-1); color: var(--tint-text); }

/* Solfeig Difícil: fitxes */
.hex.figura { position: relative; }
.hex.figura .fitxes { position: absolute; right: 14px; bottom: 10px; font-size: 0.75rem; font-weight: 700; color: var(--blau-hex-text); }
.hex.figura.esgotada { opacity: 0.45; }
/* Intervals (js/ui/intervalologic-ui.js) */
.int-vista { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 124px; margin: 8px 0 0; text-align: center; }
.int-vista .int-part { max-width: 300px; margin: 0 auto; padding-bottom: 0; }
.int-arrel { margin: 0; font-size: 34px; font-weight: 800; color: var(--blau-fosc); line-height: 1.15; }
.int-demana { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.int-dir { margin: 0; font-size: 14px; color: var(--suau); }
.int-graella-box { margin: 8px 0 2px; }
.int-graella { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.int-lletres { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.int-alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.int-op { min-height: 50px; padding: 4px 2px; border: 1.5px solid var(--vora); border-radius: 12px; background: #fff; color: var(--text); line-height: 1.15; cursor: pointer; touch-action: manipulation; }
.int-op b { display: block; font-size: 18px; font-weight: 800; }
.int-op small { display: block; font-size: 11px; font-weight: 600; color: var(--suau); }
.int-op:hover:not(:disabled) { border-color: var(--blau); background: var(--tint-1); }
.int-op:active:not(:disabled) { filter: brightness(.94); }
.int-op[aria-pressed="true"] { border-color: var(--blau-fosc); background: var(--tint-1); box-shadow: inset 0 0 0 1.5px var(--blau-fosc); color: var(--tint-text); }
.int-op[aria-pressed="true"] small { color: var(--tint-text); }
.int-op:disabled { cursor: default; }
.int-op.ok { border-color: var(--ok); background: #f0fdf4; color: #14532d; box-shadow: inset 0 0 0 1.5px var(--ok); }
.int-op.ok small { color: #14532d; }
.int-op.ko { border-color: var(--ko); background: #fef2f2; color: #7f1d1d; box-shadow: inset 0 0 0 1.5px var(--ko); }
.int-op.ko small { color: #7f1d1d; }
/* Contrapunt (js/ui/contrapuntologic-ui.js) */
.con-escena { width: 100%; max-width: 440px; margin: 6px auto 0; }
.con-part { margin-top: 0; }
.con-text { margin: 0; padding: 10px 4px; font-size: 14px; line-height: 1.5; text-align: center; }
.con-acords { position: relative; height: 22px; margin-top: -2px; }
.con-acords span { position: absolute; top: 0; transform: translateX(-50%); font-size: 14px; font-weight: 800; color: var(--blau-fosc); white-space: nowrap; }
.con-enllacos { position: relative; height: 60px; }
.con-enl { position: absolute; top: 4px; transform: translateX(-50%); width: 44px; min-width: 30px; max-width: 44px; height: 52px; padding: 3px 0; border: 1.5px solid var(--vora); border-radius: 12px; background: #fff; color: var(--text); line-height: 1.1; cursor: pointer; touch-action: manipulation; }
.con-enl b { display: block; font-size: 17px; font-weight: 800; }
.con-enl small { display: block; min-height: 12px; font-size: 10px; font-weight: 700; color: var(--suau); white-space: nowrap; }
.con-enl:hover { border-color: var(--blau); background: var(--tint-1); }
.con-enl:active { filter: brightness(.94); }
.con-enl.marcat { border-color: var(--blau-fosc); background: var(--tint-1); box-shadow: inset 0 0 0 1.5px var(--blau-fosc); color: var(--tint-text); }
.con-enl.marcat small { color: var(--tint-text); }
.con-enl.actiu { box-shadow: inset 0 0 0 3px var(--blau-fosc); }
.con-enl.ok { border-color: var(--ok); background: #f0fdf4; color: #14532d; box-shadow: inset 0 0 0 1.5px var(--ok); cursor: default; }
.con-enl.ok small { color: #14532d; }
.con-enl.ko { border-color: var(--ko); background: #fef2f2; color: #7f1d1d; box-shadow: inset 0 0 0 1.5px var(--ko); cursor: default; }
.con-enl.ko small { color: #7f1d1d; }
.con-enl.perdut { border-color: var(--or-fosc); background: #fefce8; color: #713f12; box-shadow: inset 0 0 0 1.5px var(--or-fosc); cursor: default; }
.con-enl.perdut small { color: #713f12; }
.con-tipus { margin: 4px 0 0; }
.con-tipus[hidden] { display: none; }
.con-tipus p { margin: 0 0 6px; text-align: center; color: var(--suau); font-size: 13px; }
.con-tipus p.actions { margin: 8px 0 0; }
.con-tipus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.con-tp { min-height: 44px; padding: 4px 6px; border: 1.5px solid var(--vora); border-radius: 12px; background: #fff; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.15; cursor: pointer; touch-action: manipulation; }
.con-tp:hover:not(:disabled) { border-color: var(--blau); background: var(--tint-1); }
.con-tp:active:not(:disabled) { filter: brightness(.94); }
.con-tp[aria-pressed="true"] { border-color: var(--blau-fosc); background: var(--tint-1); box-shadow: inset 0 0 0 1.5px var(--blau-fosc); color: var(--tint-text); }
.con-tp:disabled { color: #4b5563; background: var(--fons); cursor: default; }
.con-sol { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 5px; font-size: 13px; line-height: 1.4; }
.con-sol[hidden] { display: none; }
.con-sol li { padding: 6px 10px; border: 1.5px solid var(--vora); border-radius: 10px; background: #fff; }
.con-sol li.ok { border-color: var(--ok); background: #f0fdf4; color: #14532d; }
.con-sol li.ko { border-color: var(--ko); background: #fef2f2; color: #7f1d1d; }
.con-sol li.perdut { border-color: var(--or-fosc); background: #fefce8; color: #713f12; }
.con-sol li.neutre { border-style: dashed; color: #475569; background: var(--fons); }