/* Barrio: anillo de 20 casillas (7 × 5) que llena el alto y el ancho libre; jugadores a la derecha.
   Las fichas van en una capa del tamaño de una casilla y se mueven con translate en % (solo transform). */
.barrio { background: #E8F3EE; }
.br-tablero-caja { position: relative; flex: 1; min-width: 0; }
.br-tablero { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); }
.br-casilla { position: relative; margin: .1rem; background: #fff; border-radius: .7rem; border: .12rem solid #CFE0D6; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; overflow: hidden; }
.br-casilla--tienda { border-top: .6rem solid var(--c); }
.br-casilla--salida { background: #FFF4C2; }
.br-casilla--sorpresa { background: #FFE1F0; }
.br-casilla--parque { background: #DDF3E3; }
.br-casilla--nueva { animation: br-nueva .6s var(--tg-ease) 3; }
@keyframes br-nueva { 50% { transform: scale(1.08); } }
.br-e { font-size: 2rem; line-height: 1; }
.br-n { font-size: .8rem; line-height: 1.15; font-weight: var(--tg-w-medium); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .2rem; }
.br-precio { font-size: 1.1rem; line-height: 1; font-weight: var(--tg-w-strong); color: var(--tg-muted); }
.br-dueno { position: absolute; left: 0; right: 0; bottom: 0; height: .6rem; }
.br-casilla--comprada { background: #F4F4F4; }
.br-medio { grid-row: 2 / 5; grid-column: 2 / 7; display: flex; padding: .6rem; }
.br-cartel { flex: 1; font-size: 1.8rem; line-height: 1.3; font-weight: var(--tg-w-medium); text-align: center; background: #fff; border-radius: 1.2rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }
.br-cartel__dados { font-size: 2.6rem; }
.br-ficha { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: 20%; transition: transform .35s var(--tg-ease); will-change: transform; pointer-events: none; }
.br-ficha .cl-ficha { position: absolute; width: 2.3rem; height: 2.3rem; }
.br-ficha--0 .cl-ficha { left: .35rem; top: .9rem; }
.br-ficha--1 .cl-ficha { right: .35rem; top: .9rem; }
.br-ficha--2 .cl-ficha { left: .35rem; bottom: .9rem; }
.br-ficha--3 .cl-ficha { right: .35rem; bottom: .9rem; }
.barrio .cl-lado { flex: none; width: 16rem; justify-content: center; }
.br-jugadores .cl-jugador { padding: .6rem .7rem; }