/* Garabatos: lienzos SVG (el canvas cae de fps en la Bravia tras ocultarse). */
.garabatos { background: #F1EAFF; }
.ga-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.ga-titulo { font-size: 2rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; text-align: center; }
.ga-titulo .tg-personaje--linea { width: 2rem; height: 2rem; vertical-align: -.4rem; }
.ga-lienzos { flex: 1; min-height: 0; display: flex; gap: 1.2rem; align-items: center; justify-content: center; }
.ga-lienzo { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
/* En directo: los lienzos lo más grandes que quepan en una fila (área ≈ 57 × 28 rem). */
.ga-papel { width: 8.6rem; height: 8.6rem; background: #fff; border-radius: 1rem; border: .15rem solid #CDB8F5; }
.ga-lienzos .ga-papel { width: 19rem; height: 19rem; }
.ga-lienzos--3 .ga-papel { width: 16.5rem; height: 16.5rem; }
.ga-lienzos--4 .ga-papel { width: 12.4rem; height: 12.4rem; }
.ga-listo { position: absolute; right: -.6rem; top: -.6rem; font-size: 2.4rem; line-height: 1; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .25s; }
.ga-lienzo--listo .ga-listo { opacity: 1; transform: scale(1); }
.ga-lienzo--listo .ga-papel { border-color: var(--tg-online); }
.ga-papel svg { width: 100%; height: 100%; display: block; }
.ga-quien { display: flex; align-items: center; gap: .4rem; font-size: 1.3rem; font-weight: var(--tg-w-medium); }
.ga-grande { flex: 1; display: flex; gap: 2rem; align-items: center; }
.ga-papel--grande { width: 22rem; height: 22rem; }
.ga-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ga-opcion { background: #fff; border-radius: 1rem; padding: .6rem 1rem; font-size: 1.4rem; font-weight: var(--tg-w-medium); display: flex; align-items: center; gap: .6rem; border: .15rem solid transparent; }
.ga-opcion b { font-size: 2.4rem; font-weight: normal; }
.ga-opcion--bien { border-color: var(--tg-online); background: #E3F8EA; }