/* PELIN VALINTA — oma tiedostonsa 14.10.2026.
 *
 * ⚠️ NÄMÄ OLIVAT `yhteinen.css`:ssä, ja se riitti niin kauan kuin valitsin oli
 * vain korttipelin sivuilla. Lautapeli on nyt kolmas peli omalla sivullaan
 * (`apinavaaka.html`), joka EI lataa `yhteinen.css`:ää — se on korttipelin
 * tyyli, ja sen body- ja asettelusäännöt eivät kuulu komponenttisivulle.
 *
 * 📐 Mitattu: ilman tätä valitsin piirtyi apinavaaan valikkoon ilman
 * ryhmälaatikkoa ja ilman valitun oranssia korostusta — toimi, näytti
 * rikkinäiseltä. Kopiointi `apinavaaka.css`:ään olisi tehnyt samasta
 * säännöstä kaksi; yksi tiedosto, jonka molemmat lataavat, pitää ne yhtenä.
 *
 * Kontekstisäännöt (`.valikko-laatikko .pelivalinta`, `.aloitusruutu
 * .pelivalinta`) jäivät `yhteinen.css`:ään: ne koskevat korttipelin omia
 * säiliöitä eivätkä valitsinta itseään. */

/* --- KAKSI RIVIÄ, EI KAHTA OTSIKOITUA RYHMÄÄ (14.10.2026) ---------------
 * Ylärivi on laji (Korttipeli · Lautapeli), alarivi sen lajin pelit. Alarivi
 * on olemassa vain jos lajissa on useampi peli, joten lautapelin puolella
 * rivejä on yksi.
 *
 * ⚠️ OTSIKOT POISTUIVAT, EIVÄT SIIRTYNEET. `.pelivalinta-laji` oli pieni
 * versaaliotsikko kummankin ryhmän yllä; kun ruudulla on vain yhden lajin
 * pelit, otsikko kertoisi sen minkä valittu laji jo sanoo. */
/* ⚠️ EI PILLEREITÄ (Marko 15.10.2026: «Täysin pyöreä pillerin pääty ei ole
 * brändin mukainen vaan se on aina pyöristetty nelikulmio»). 📐 Mitattu:
 * korttipelin omissa tyyleissä `999px` esiintyy nolla kertaa — pillerit
 * tulivat tänne minun kanssani eilen. Nyt 12 px / 9 px, kuten muuallakin.
 * --- LAJIN LIUKUKYTKIN (Marko 14.10.2026) -------------------------------
 * Ura, jonka päällä nappula liukuu. Nappula on oma elementtinsä eikä napin
 * tausta: vain niin siirtymän näkee liukuna.
 * ⚠️ Nappula on valkoinen eikä oranssi, koska aloitusruudussa on voimassa
 * Markon 9.10. sääntö «vain Pelaa täytetty» — yksi täytetty oranssi kertoo
 * mistä aloitetaan, ja kytkin kertoo missä ollaan. */
.pelivalinta-kytkin{position:relative;display:grid;grid-template-columns:repeat(var(--n,2),1fr);
  gap:0;padding:4px;border-radius:12px;background:rgba(60,34,12,.10);--i:0}
.pelivalinta-liuku{position:absolute;left:4px;top:4px;bottom:4px;
  width:calc((100% - 8px) / var(--n,2));border-radius:9px;background:var(--surface,#fff);
  box-shadow:0 2px 6px rgba(60,34,12,.22);
  transform:translateX(calc(var(--i) * 100%));transition:transform .22s ease}
@media (prefers-reduced-motion:reduce){.pelivalinta-liuku{transition:none}}
.pelivalinta-kytkin-nappi{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  padding:10px 6px;border-radius:9px;font:inherit;font-weight:700;font-size:15px;
  color:rgba(26,26,26,.55);white-space:nowrap;transition:color .22s ease}
.pelivalinta-kytkin-nappi.valittu{color:var(--deep,#C2580C)}
.pelivalinta-kytkin-nappi:focus-visible{outline:3px solid var(--ink,#1A1A1A);outline-offset:2px}

.pelivalinta{display:flex;flex-direction:column;gap:6px;margin:0 0 4px;
  width:100%;box-sizing:border-box;align-self:stretch}
.pelivalinta-ryhma{display:flex;gap:4px;padding:4px;border-radius:12px;
  background:rgba(60,34,12,.08)}
.pelivalinta-nappi{flex:1 1 0;min-width:0;border:0;border-radius:9px;padding:10px 6px;cursor:pointer;
  font:inherit;font-weight:700;font-size:15px;background:transparent;color:var(--ink,#1A1A1A);
  white-space:nowrap}
.pelivalinta-nappi.valittu{background:var(--orange, #EE7203);color:#fff;box-shadow:0 2px 6px rgba(60,34,12,.2)}
.pelivalinta-nappi:focus-visible{outline:3px solid var(--ink,#1A1A1A);outline-offset:2px}

/* Alarivi on alisteinen: kevyempi pohja ja reunakorostus täyden värin sijaan,
   jotta oranssi sanoo ruudulla yhden asian — minkä lajin sisällä ollaan. */
.pelivalinta-ryhma--pelit{background:rgba(60,34,12,.05)}
.pelivalinta-ryhma--pelit .pelivalinta-nappi{font-size:14px;padding:8px 6px}
.pelivalinta-ryhma--pelit .pelivalinta-nappi.valittu{background:var(--surface,#fff);color:var(--ink,#1A1A1A);
  box-shadow:inset 0 0 0 2px var(--orange, #EE7203)}

/* Asetussivulla lajirivin alle jää ilmaa ennen pelien valintalistaa. */
#pelivalintaLista .pelivalinta-ryhma{margin:0 0 10px}

/* Etuoven (index.html) pelivalinta pystysuunnassa keskelle: sivulla ei ole
   muuta sisältöä, ja ylälaitaan jätettynä alle jäisi pelkkää kuosia. */
.pelivalinta--etuovi{margin-block:auto}