/* Ruutupeli – perustyylit. w1 sovittaa värit ja fontit sivuston ilmeeseen. */
.rp { --rp-tausta: #1f2a37; --rp-ruutu: #c9d4e0; --rp-auki: #eef2f6; --rp-reuna: #8796a8; --rp-p1: #d1495b; --rp-p2: #2b7bb9; font-variant-numeric: tabular-nums; }
.rp-valinnat { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .75rem; align-items: center; }
.rp-valinnat label { display: inline-flex; gap: .35rem; align-items: center; min-height: 44px; }
.rp-valinnat select { min-height: 36px; }
.rp-palkki { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--rp-tausta); color: #fff; border-radius: 8px 8px 0 0; }
.rp-palkki button { min-height: 40px; padding: 0 .9rem; border-radius: 6px; border: 1px solid #fff4; background: #ffffff1a; color: #fff; cursor: pointer; }
.rp-lippu[aria-pressed="true"] { background: #f0b429; color: #1f2a37; border-color: #f0b429; }
.rp-laskuri, .rp-kello { min-width: 3.5rem; font-weight: 700; font-size: 1.15rem; }
.rp-kello { text-align: right; }
.rp-vuoro { padding: .35rem .75rem; color: #fff; font-weight: 600; }
.rp-vuoro.rp-pelaaja1 { background: var(--rp-p1); } .rp-vuoro.rp-pelaaja2 { background: var(--rp-p2); }
.rp-alue { overflow-x: auto; padding: .75rem; background: var(--rp-tausta); border-radius: 0 0 8px 8px; -webkit-overflow-scrolling: touch; }
.rp-kentta { position: relative; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rp-ruutu { position: absolute; padding: 0; border: 0; background: var(--rp-ruutu); font: 700 calc(var(--rp-koko, 30px) * .5)/1 system-ui, sans-serif; color: #1f2a37; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-nelio .rp-ruutu { box-shadow: inset 0 0 0 1px var(--rp-reuna); border-radius: 3px; }
.rp-kuusikulmio .rp-ruutu { clip-path: polygon(50% 2%, 97% 26%, 97% 74%, 50% 98%, 3% 74%, 3% 26%); }
.rp-ruutu:hover:not(.rp-auki) { filter: brightness(1.08); }
.rp-ruutu:focus-visible { outline: 3px solid #f0b429; outline-offset: -3px; z-index: 2; }
.rp-auki { background: var(--rp-auki); cursor: default; }
.rp-liputettu { color: #c0392b; }
.rp-miina { background: #f6c3c3; }
.rp-miina.rp-pelaaja1 { background: var(--rp-p1); color: #fff; } .rp-miina.rp-pelaaja2 { background: var(--rp-p2); color: #fff; }
.rp-rajahti { background: #c0392b; color: #fff; }
.rp-vaara-lippu { background: #ffe08a; }
.rp-n1 { color: #1d5fa8; } .rp-n2 { color: #1e7a3c; } .rp-n3 { color: #b42318; } .rp-n4 { color: #4b2a8c; }
.rp-n5 { color: #8a3b12; } .rp-n6 { color: #0e7480; } .rp-n7 { color: #222; } .rp-n8 { color: #666; }
.rp-tila { min-height: 1.5em; margin: .6rem 0 .2rem; }
.rp-ennatys { color: #555; font-size: .9rem; margin: 0; }
.rp-paiva { font-weight: 600; margin-bottom: .5rem; }