@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-herba); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pg-nius { grid-template-rows: minmax(0, 116fr) minmax(0, 90fr); }
.pg-espiral { grid-template-rows: minmax(0, 118fr) minmax(0, 128fr); }
.pg .ex-cos { display: grid; grid-template-columns: minmax(0, 1fr); }

.punts-o2 { fill: none; stroke: var(--il-contorn); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.ini-o2 { fill: var(--il-verd-fosc); stroke: var(--il-contorn); stroke-width: 1.5; }


.tres-nius-ex { display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.gallina-n { border-radius: var(--radi); }
.tres-nius { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; min-height: 0; }
.niu { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; background: var(--il-sorra); border: var(--gruix) solid var(--il-contorn); border-bottom: 6mm solid var(--il-marro); border-radius: var(--radi) var(--radi) 18mm 18mm; min-height: 0; }
.niu > svg { width: 100%; height: 100%; min-height: 0; }


.copia-o { display: grid; grid-template-columns: minmax(0, 1fr) 36mm; gap: 5mm; min-height: 0; }
.nen-ca { border-radius: var(--radi); }
.dues-caselles-o2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; min-height: 0; }
.casella-o2 { background: linear-gradient(var(--il-gris), var(--il-gris)) 0 18% / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--il-gris) 0 2mm, transparent 2mm 3.5mm) 0 50% / 100% 1px no-repeat, linear-gradient(var(--il-contorn), var(--il-contorn)) 0 82% / 100% 1.5px no-repeat, var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }


.camp-espiral { display: grid; grid-template-columns: 40mm minmax(0, 1fr); gap: 5mm; min-height: 0; }
.cargol-es { border-radius: var(--radi); }
.caixa-espiral { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 3mm; background: var(--il-herba); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); min-height: 0; }
.caixa-espiral > svg { width: 100%; height: 100%; min-height: 0; }
.punts-espiral { fill: none; stroke: var(--il-contorn); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 6; }


.bombo-ex { display: grid; grid-template-columns: minmax(0, 1fr) 38mm; gap: 5mm; min-height: 0; }
.mesa-bombo { position: relative; aspect-ratio: 1; justify-self: center; height: 100%; max-width: 100%; min-height: 0; }
.bombo { position: absolute; inset: 0; background: var(--il-cel); border: 3mm solid var(--il-contorn); border-radius: 14mm; }
.bola-v { position: absolute; width: 16%; height: 16%; margin: -8% 0 0 -8%; display: grid; place-items: center; padding: 0; border-radius: 50%; background: var(--il-rosa); }
.bola-v .lletra-gran { font-size: 9mm; }
.bola-v.on { background: var(--acento); color: var(--paper); }
.c0 { left: 50%; top: 50%; }
.c1 { left: 74%; top: 50%; } .c2 { left: 62%; top: 70.8%; } .c3 { left: 38%; top: 70.8%; } .c4 { left: 26%; top: 50%; } .c5 { left: 38%; top: 29.2%; } .c6 { left: 62%; top: 29.2%; }
.c7 { left: 84.6%; top: 70%; } .c8 { left: 50%; top: 88%; } .c9 { left: 15.4%; top: 70%; } .c10 { left: 15.4%; top: 30%; } .c11 { left: 50%; top: 12%; } .c12 { left: 84.6%; top: 30%; }
.c13 { left: 11%; top: 11%; } .c14 { left: 89%; top: 11%; } .c15 { left: 11%; top: 89%; } .c16 { left: 89%; top: 89%; }
.gat-bo { border-radius: var(--radi); }

}
}