@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-rosa); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-vall { grid-template-rows: minmax(0, 80fr) minmax(0, 126fr); }
.pg-garlanda { grid-template-rows: minmax(0, 112fr) minmax(0, 134fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }


.vall-u { height: 100%; aspect-ratio: auto; border-radius: var(--radi); overflow: hidden; }
.carta-u { position: absolute; width: 22mm; height: 22mm; margin: 0; display: grid; place-items: center; padding: 0; border-radius: 4mm; }
.carta-u .lletra-gran { font-size: 14mm; }
.v1 { left: 3%; top: 6%; }
.v2 { left: 21%; top: 34%; }
.v3 { left: 43.5%; top: 52%; }
.v4 { left: 66%; top: 34%; }
.v5 { left: 84%; top: 6%; }
.model-u { position: absolute; left: 41%; top: 4%; width: 18%; height: 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--realce); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); }
.model-u .lletra-gran { font-size: 15mm; }


.rusc-u { display: grid; grid-template-columns: minmax(0, 1fr) 38mm; gap: 5mm; min-height: 0; }
.bresques { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2mm; padding: 3mm; background: var(--il-groc); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.fila-r { display: flex; justify-content: center; align-items: center; gap: 8mm; min-height: 0; }
.cel-u { height: 100%; max-height: 20mm; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--il-sorra); }
.cel-u .lletra-gran { font-size: 10mm; }
.abella-u { border-radius: var(--radi); }
.cel-u.on, .banderi.on { background: var(--acento); color: var(--paper); }


.festa-u { display: grid; grid-template-columns: minmax(0, 1fr) 40mm; gap: 5mm; min-height: 0; }
.garlanda { position: relative; min-height: 0; background: radial-gradient(ellipse 50% 42% at 50% 4%, transparent 97%, var(--il-contorn) 98% 100%, transparent 100.5%); }
.banderi { position: absolute; width: 17mm; height: 29mm; margin: 0 0 0 -8.5mm; display: grid; align-items: start; justify-items: center; padding: 3mm 0 0; border-radius: 1mm 1mm 8.5mm 8.5mm; background: var(--realce); }
.banderi .lletra-gran { font-size: 10mm; }
.b1 { left: 8%; top: 26.8%; }
.b2 { left: 22%; top: 38.8%; }
.b3 { left: 36%; top: 44.3%; }
.b4 { left: 50%; top: 46%; }
.b5 { left: 64%; top: 44.3%; }
.b6 { left: 78%; top: 38.8%; }
.b7 { left: 92%; top: 26.8%; }
.gat-u { border-radius: var(--radi); }


.camins-u { display: grid; grid-template-columns: 36mm minmax(0, 1fr); gap: 4mm; min-height: 0; }
.nena-u { border-radius: var(--radi); }
.tres-u { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.camp-u { display: grid; grid-template-rows: minmax(0, 1fr) 24mm; gap: 3mm; min-height: 0; }
.punts-box { display: grid; place-items: center; padding: 2mm; border: var(--gruix) dashed var(--realce); border-radius: var(--radi); min-height: 0; }
.fil-u { fill: none; stroke: var(--il-contorn); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 7.5; }
.casella-u { 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; }

}
}