@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-rosa); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-cartes { grid-template-rows: minmax(0, 66fr) minmax(0, 140fr); }
.pg-cordills { grid-template-rows: minmax(0, 148fr) minmax(0, 98fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.partida { display: grid; grid-template-columns: 34mm 30mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.ossos-p { border-radius: var(--radi); }
.model-carta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); }
.model-carta .lletra-gran { font-size: 18mm; }
.ventall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 7mm; padding: 0 6mm; min-height: 0; }
.carta-v { display: grid; place-items: center; padding: 0; height: 74%; min-height: 0; border-radius: 3mm; }
.carta-v .lletra-gran { font-size: 14mm; }
.v1 { rotate: -6deg; } .v2 { rotate: -3deg; } .v3 { rotate: 0deg; } .v4 { rotate: 3deg; } .v5 { rotate: 6deg; }


.taula-ex { display: grid; grid-template-columns: minmax(0, 1fr) 38mm; gap: 5mm; min-height: 0; }
.taula-cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 24mm repeat(5, minmax(0, 1fr)); gap: 2.5mm; padding: 3mm; background: var(--il-sorra); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.cap-col { display: grid; place-items: center; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; }
.cap-col .lletra-gran { font-size: 15mm; }
.cas-t { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 3mm; background: var(--il-blanc); }
.cas-t .lletra-gran { font-size: 10mm; }
.cas-t.on { background: var(--acento); color: var(--paper); }
.conill-t { border-radius: var(--radi); }


.roba-ex { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.gos-r { border-radius: var(--radi); }
.cordills { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2mm; min-height: 0; }
.cordill { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3mm; padding: 0 2mm; border-top: 2mm solid var(--il-marro); min-height: 0; }
.penjada { display: grid; place-items: center; padding: 0; margin: 0 0 1mm; min-height: 0; border-radius: 0 0 3mm 3mm; border-top: 4mm solid var(--il-vermell); background: var(--il-blanc); }
.penjada .lletra-gran { font-size: 11mm; }
.penjada.on { background: var(--acento); color: var(--paper); }


.escriure-4 { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nen-4 { border-radius: var(--radi); }
.quatre-gran { display: grid; grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm; min-height: 0; }
.punts-4 > svg { width: 100%; height: 100%; min-height: 0; }
.punts-4 { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; border: var(--gruix) dashed var(--realce); border-radius: var(--radi); min-height: 0; }
.fil-4 { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.dues-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.casella-4 { background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); background-image: repeating-linear-gradient(90deg, var(--il-gris) 0 2mm, transparent 2mm 3.5mm); background-size: 100% 1px; background-position: 0 50%; background-repeat: no-repeat; min-height: 0; }

}
}