@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-sorra); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-elefant { grid-template-rows: minmax(0, 104fr) minmax(0, 102fr); }
.pg-pont { grid-template-rows: minmax(0, 128fr) minmax(0, 118fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.escriure-ee { display: grid; grid-template-columns: 36mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.mestre-e { border-radius: var(--radi); }
.costat-ee { display: grid; grid-template-rows: 20mm minmax(0, 1fr); gap: 3mm; min-height: 0; }
.quadre-petites { display: flex; align-items: center; justify-content: space-around; gap: 4mm; padding: 0 5mm; background: var(--realce); border: var(--gruix) dashed var(--il-contorn); border-radius: var(--radi); }
.chip-p { display: grid; place-items: center; width: 14mm; height: 14mm; font-size: 10mm; background: var(--il-blanc); border: var(--gruix) solid var(--il-contorn); border-radius: 50%; }
.tres-e { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.fila-ee { display: grid; grid-template-columns: 34mm 14mm minmax(0, 1fr); align-items: stretch; gap: 3mm; padding: 1.5mm 4mm; background: var(--il-cel); border-radius: var(--radi); min-height: 0; }
.gran-e { display: grid; place-items: center; font-size: 15mm; background: var(--il-blanc); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm; }
.buida-e { color: transparent; -webkit-text-stroke: 2px var(--il-contorn); }
.grossa-e { font-weight: 800; font-size: 17mm; }
.fle-e { align-self: center; justify-self: center; width: 0; height: 0; border-top: 3mm solid transparent; border-bottom: 3mm solid transparent; border-left: 6mm solid var(--il-contorn); }
.fila-ee .r { align-self: stretch; width: 100%; height: 100%; min-height: 0; max-height: 100%; }


.corral-ex { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3mm; min-height: 0; }
.corral-b { aspect-ratio: 7 / 1; border-radius: var(--radi); }
.cistelles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; min-height: 0; }
.cistella { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm; padding: 3mm; background: var(--il-marro); border: var(--gruix) solid var(--il-contorn); border-radius: 3mm 3mm 10mm 10mm; min-height: 0; }
.ou { display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--il-blanc); }
.ou .lletra-gran { font-size: 11mm; }
.ou.on { background: var(--acento); color: var(--paper); }


.pont-ex { display: grid; grid-template-columns: minmax(0, 1fr) 40mm; gap: 5mm; min-height: 0; }
.pedres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 3mm; background: var(--il-cel); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.pedra { position: relative; display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 40%; background: var(--il-gris); }
.pedra .lletra-gran { font-size: 11mm; }
.pedra.on { background: var(--acento); color: var(--paper); }
.inici-p, .meta-p { position: absolute; left: 2mm; top: 1mm; font-size: 5mm; line-height: 1; }
.riu-e { border-radius: var(--radi); }


.escriure-dos { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nen-ee { border-radius: var(--radi); }
.dues-gran { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 26mm; gap: 3mm 4mm; min-height: 0; }
.punts-ee { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; border: var(--gruix) dashed var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.punts-ee > svg { width: 100%; height: 100%; min-height: 0; }
.fil-ee { fill: none; stroke: var(--il-contorn); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.5; }
.casella-ee { 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; }

}
}