@layer ficha {

@scope (.cos-ficha) {

:scope { --realce: var(--il-groc); --realce-fosc: var(--il-blau-fosc); --realce-suau: var(--il-cel); }
.pg { height: 100%; display: grid; gap: 4mm; }
.ct-p1 { grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
.ct-p2 { grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
.pg > .ex { min-height: 0; }


.ct-camins { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; }
.ct-camí { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3mm; justify-items: center; padding: 2mm; border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); }
.ct-capcalera { width: 100%; display: grid; grid-template-columns: 24mm minmax(0, 1fr); gap: 3mm; align-items: center; }
.ct-foto { width: 24mm; aspect-ratio: 1 / 1; display: grid; }
.ct-instr { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5mm; font-weight: 800; font-size: .95em; line-height: 1.2; }
.ct-graella { height: 100%; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1mm; padding: 1mm; background: var(--realce-fosc); border-radius: 6px; min-height: 0; }
button.ct-casella, .ct-inici { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: var(--paper); }
button.ct-casella.on { background: var(--realce); box-shadow: inset 0 0 0 1.2mm var(--realce-fosc); }
.ct-inici { display: grid; place-items: center; background: var(--realce-suau); font-size: var(--t-l); color: var(--realce-fosc); line-height: 1; }


.ct-joc { height: 100%; display: grid; grid-template-columns: 44mm minmax(0, 1fr); gap: 5mm; }
.ct-foto2 { width: 44mm; aspect-ratio: 4 / 5; display: grid; }
.ct-passos { min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2mm; }
.ct-pas { display: flex; align-items: center; gap: 4mm; padding: 0 4mm; font-size: var(--t-l); background: var(--realce-suau); border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); }
.ct-pas .ordre { flex: none; width: 9mm; height: 9mm; background: var(--paper); }


.ct-uneix { height: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 16mm; }
.ct-col { min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.ct-ordre { display: flex; align-items: center; justify-content: space-between; gap: 3mm; padding: 0 4mm; font-size: 1.05em; font-weight: 700; line-height: 1.25; background: var(--realce-suau); border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); }
.ct-figura { min-height: 0; display: flex; align-items: center; gap: 4mm; padding: 1mm 4mm; border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); background: var(--paper); }
.ct-figura svg { height: 100%; width: auto; flex: 1; }
.ct-forma { fill: var(--realce); stroke: var(--realce-fosc); stroke-width: 2.5; }


.ct-obert { height: 100%; display: grid; grid-template-columns: 74mm minmax(0, 1fr); gap: 5mm; }
.ct-foto3 { width: 74mm; aspect-ratio: 8 / 9; display: grid; }

}
}